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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1877,7 +1877,8 @@ var DEFAULT_LABELS6 = {
1877
1877
  hotelLabel: "Hotel",
1878
1878
  hotelDescription: "Layanan pemesanan hotel",
1879
1879
  otherLabel: "Lainnya",
1880
- otherDescription: "Layanan lainnya",
1880
+ otherDescription: "Akses fitur tambahan dan pengaturan.",
1881
+ modalTitle: "Daftar Menu",
1881
1882
  serviceAriaLabel: "Layanan"
1882
1883
  },
1883
1884
  en: {
@@ -1889,8 +1890,9 @@ var DEFAULT_LABELS6 = {
1889
1890
  skptDescription: "Integrated Passenger Ticketing System",
1890
1891
  hotelLabel: "Hotel",
1891
1892
  hotelDescription: "Hotel Booking Service",
1892
- otherLabel: "Other",
1893
- otherDescription: "Other Services",
1893
+ otherLabel: "More",
1894
+ otherDescription: "Access additional features and settings.",
1895
+ modalTitle: "Service List",
1894
1896
  serviceAriaLabel: "Service"
1895
1897
  }
1896
1898
  };
@@ -1931,12 +1933,191 @@ var ALIAS_MENU_ITEMS = [
1931
1933
  var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
1932
1934
  var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
1933
1935
  var useStyles6 = makeStyles({
1936
+ dialogSurface: {
1937
+ maxWidth: "900px",
1938
+ width: "100%"
1939
+ },
1940
+ closeButton: {
1941
+ minWidth: "32px",
1942
+ minHeight: "32px"
1943
+ },
1944
+ content: {
1945
+ paddingTop: "8px",
1946
+ paddingBottom: "16px"
1947
+ },
1948
+ // Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
1949
+ menuItem: {
1950
+ display: "flex",
1951
+ flexDirection: "row",
1952
+ alignItems: "center",
1953
+ justifyContent: "flex-start",
1954
+ padding: "12px 16px",
1955
+ borderRadius: tokens.borderRadiusMedium,
1956
+ cursor: "pointer",
1957
+ textAlign: "left",
1958
+ transition: "background-color 0.2s ease",
1959
+ color: tokens.colorNeutralForeground1,
1960
+ backgroundColor: tokens.colorNeutralBackground1,
1961
+ border: "none",
1962
+ gap: "12px",
1963
+ width: "100%",
1964
+ "&:hover": {
1965
+ backgroundColor: tokens.colorNeutralBackground1Hover
1966
+ },
1967
+ [`@media (${BP_TABLET})`]: {
1968
+ padding: "10px 10px",
1969
+ gap: "8px"
1970
+ },
1971
+ [`@media (${BP_MOBILE})`]: {
1972
+ flexDirection: "column",
1973
+ alignItems: "center",
1974
+ textAlign: "center",
1975
+ padding: "8px 6px",
1976
+ gap: "4px"
1977
+ }
1978
+ },
1979
+ logoWrapper: {
1980
+ display: "flex",
1981
+ alignItems: "center",
1982
+ justifyContent: "center",
1983
+ flexShrink: 0
1984
+ },
1985
+ logo: {
1986
+ height: "32px",
1987
+ width: "32px",
1988
+ flexShrink: 0,
1989
+ objectFit: "contain",
1990
+ [`@media (${BP_TABLET})`]: {
1991
+ height: "28px",
1992
+ width: "28px"
1993
+ },
1994
+ [`@media (${BP_MOBILE})`]: {
1995
+ height: "24px",
1996
+ width: "24px"
1997
+ }
1998
+ },
1999
+ textContent: {
2000
+ display: "flex",
2001
+ flexDirection: "column",
2002
+ gap: "2px",
2003
+ minWidth: 0,
2004
+ width: "100%",
2005
+ [`@media (${BP_MOBILE})`]: {
2006
+ alignItems: "center"
2007
+ }
2008
+ },
2009
+ label: {
2010
+ fontSize: tokens.fontSizeBase300,
2011
+ fontWeight: tokens.fontWeightSemibold,
2012
+ lineHeight: "1.2",
2013
+ whiteSpace: "nowrap",
2014
+ overflow: "hidden",
2015
+ textOverflow: "ellipsis",
2016
+ width: "100%",
2017
+ [`@media (${BP_TABLET})`]: {
2018
+ fontSize: tokens.fontSizeBase200
2019
+ },
2020
+ [`@media (${BP_MOBILE})`]: {
2021
+ fontSize: tokens.fontSizeBase100,
2022
+ textAlign: "center"
2023
+ }
2024
+ },
2025
+ description: {
2026
+ fontSize: tokens.fontSizeBase200,
2027
+ fontWeight: tokens.fontWeightRegular,
2028
+ color: tokens.colorNeutralForeground2,
2029
+ display: "-webkit-box",
2030
+ WebkitLineClamp: 2,
2031
+ WebkitBoxOrient: "vertical",
2032
+ overflow: "hidden",
2033
+ textOverflow: "ellipsis",
2034
+ lineHeight: "1.4",
2035
+ [`@media (${BP_TABLET})`]: {
2036
+ fontSize: tokens.fontSizeBase100,
2037
+ WebkitLineClamp: 1
2038
+ },
2039
+ [`@media (${BP_MOBILE})`]: {
2040
+ display: "none"
2041
+ }
2042
+ }
2043
+ });
2044
+ var ModalListMenuService = ({
2045
+ open = false,
2046
+ onClose = () => {
2047
+ },
2048
+ title = "",
2049
+ menuItems = ALIAS_MENU_ITEMS,
2050
+ onItemClick,
2051
+ showDescriptions = true
2052
+ }) => {
2053
+ const styles = useStyles6();
2054
+ return /* @__PURE__ */ jsx(
2055
+ Dialog,
2056
+ {
2057
+ open,
2058
+ onOpenChange: (_, data) => {
2059
+ if (!data.open) {
2060
+ onClose();
2061
+ }
2062
+ },
2063
+ children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
2064
+ /* @__PURE__ */ jsx(
2065
+ DialogTitle,
2066
+ {
2067
+ action: /* @__PURE__ */ jsx(
2068
+ Button,
2069
+ {
2070
+ appearance: "subtle",
2071
+ "aria-label": "close",
2072
+ icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
2073
+ onClick: onClose,
2074
+ className: styles.closeButton
2075
+ }
2076
+ ),
2077
+ children: title
2078
+ }
2079
+ ),
2080
+ /* @__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(
2081
+ Button,
2082
+ {
2083
+ className: styles.menuItem,
2084
+ onClick: () => onItemClick?.(item),
2085
+ "aria-label": item.name,
2086
+ children: [
2087
+ /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
2088
+ "img",
2089
+ {
2090
+ src: item.imageUrl,
2091
+ alt: item.name,
2092
+ className: styles.logo
2093
+ }
2094
+ ) }),
2095
+ /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2096
+ /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
2097
+ showDescriptions && /* @__PURE__ */ jsx(
2098
+ MenuItemDescription,
2099
+ {
2100
+ description: item.description,
2101
+ className: styles.description
2102
+ }
2103
+ )
2104
+ ] })
2105
+ ]
2106
+ }
2107
+ ) }, item.id)) }) })
2108
+ ] }) })
2109
+ }
2110
+ );
2111
+ };
2112
+ var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
2113
+ var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
2114
+ var useStyles7 = makeStyles({
1934
2115
  card: {
1935
2116
  width: "100%",
1936
2117
  boxSizing: "border-box",
1937
2118
  padding: "0px",
1938
2119
  borderRadius: tokens.borderRadiusXLarge,
1939
- [`@media (${BP_MOBILE})`]: {
2120
+ [`@media (${BP_MOBILE2})`]: {
1940
2121
  borderRadius: tokens.borderRadiusLarge
1941
2122
  }
1942
2123
  },
@@ -1946,7 +2127,7 @@ var useStyles6 = makeStyles({
1946
2127
  flexDirection: "column",
1947
2128
  justifyContent: "space-around",
1948
2129
  // Tablet + Mobile: horizontal scroll row
1949
- [`@media (${BP_TABLET})`]: {
2130
+ [`@media (${BP_TABLET2})`]: {
1950
2131
  flexDirection: "row",
1951
2132
  overflowX: "auto",
1952
2133
  overflowY: "visible",
@@ -1956,7 +2137,7 @@ var useStyles6 = makeStyles({
1956
2137
  // Thin scrollbar on tablet, hidden on mobile
1957
2138
  scrollbarWidth: "thin"
1958
2139
  },
1959
- [`@media (${BP_MOBILE})`]: {
2140
+ [`@media (${BP_MOBILE2})`]: {
1960
2141
  scrollbarWidth: "none"
1961
2142
  }
1962
2143
  },
@@ -1980,7 +2161,7 @@ var useStyles6 = makeStyles({
1980
2161
  backgroundColor: tokens.colorNeutralBackground1Hover
1981
2162
  },
1982
2163
  // Tablet: compact column, fixed width, description visible (1 line)
1983
- [`@media (${BP_TABLET})`]: {
2164
+ [`@media (${BP_TABLET2})`]: {
1984
2165
  flexDirection: "column",
1985
2166
  alignItems: "center",
1986
2167
  textAlign: "center",
@@ -1992,7 +2173,7 @@ var useStyles6 = makeStyles({
1992
2173
  scrollSnapAlign: "start"
1993
2174
  },
1994
2175
  // Mobile: even tighter, no description
1995
- [`@media (${BP_MOBILE})`]: {
2176
+ [`@media (${BP_MOBILE2})`]: {
1996
2177
  padding: "8px 6px",
1997
2178
  width: "72px",
1998
2179
  gap: "4px"
@@ -2012,16 +2193,32 @@ var useStyles6 = makeStyles({
2012
2193
  justifyContent: "center",
2013
2194
  flexShrink: 0
2014
2195
  },
2196
+ moreIconOuter: {
2197
+ display: "flex",
2198
+ alignItems: "center",
2199
+ justifyContent: "center",
2200
+ borderRadius: "50%",
2201
+ width: "32px",
2202
+ height: "32px",
2203
+ [`@media (${BP_TABLET2})`]: {
2204
+ width: "28px",
2205
+ height: "28px"
2206
+ },
2207
+ [`@media (${BP_MOBILE2})`]: {
2208
+ width: "24px",
2209
+ height: "24px"
2210
+ }
2211
+ },
2015
2212
  logo: {
2016
2213
  height: "32px",
2017
2214
  width: "32px",
2018
2215
  flexShrink: 0,
2019
2216
  objectFit: "contain",
2020
- [`@media (${BP_TABLET})`]: {
2217
+ [`@media (${BP_TABLET2})`]: {
2021
2218
  height: "28px",
2022
2219
  width: "28px"
2023
2220
  },
2024
- [`@media (${BP_MOBILE})`]: {
2221
+ [`@media (${BP_MOBILE2})`]: {
2025
2222
  height: "24px",
2026
2223
  width: "24px"
2027
2224
  }
@@ -2033,7 +2230,7 @@ var useStyles6 = makeStyles({
2033
2230
  minWidth: 0,
2034
2231
  width: "100%",
2035
2232
  // allow ellipsis to work
2036
- [`@media (${BP_TABLET})`]: {
2233
+ [`@media (${BP_TABLET2})`]: {
2037
2234
  alignItems: "center",
2038
2235
  gap: "2px"
2039
2236
  }
@@ -2042,7 +2239,7 @@ var useStyles6 = makeStyles({
2042
2239
  fontSize: tokens.fontSizeBase300,
2043
2240
  fontWeight: tokens.fontWeightSemibold,
2044
2241
  lineHeight: "1.2",
2045
- [`@media (${BP_TABLET})`]: {
2242
+ [`@media (${BP_TABLET2})`]: {
2046
2243
  fontSize: tokens.fontSizeBase200,
2047
2244
  whiteSpace: "nowrap",
2048
2245
  overflow: "hidden",
@@ -2050,7 +2247,7 @@ var useStyles6 = makeStyles({
2050
2247
  width: "100%",
2051
2248
  textAlign: "center"
2052
2249
  },
2053
- [`@media (${BP_MOBILE})`]: {
2250
+ [`@media (${BP_MOBILE2})`]: {
2054
2251
  fontSize: tokens.fontSizeBase100
2055
2252
  }
2056
2253
  },
@@ -2066,7 +2263,7 @@ var useStyles6 = makeStyles({
2066
2263
  textOverflow: "ellipsis",
2067
2264
  lineHeight: "1.4",
2068
2265
  // Tablet: 1-line clamp, compact
2069
- [`@media (${BP_TABLET})`]: {
2266
+ [`@media (${BP_TABLET2})`]: {
2070
2267
  fontSize: tokens.fontSizeBase100,
2071
2268
  WebkitLineClamp: 1,
2072
2269
  whiteSpace: "nowrap",
@@ -2074,7 +2271,7 @@ var useStyles6 = makeStyles({
2074
2271
  textAlign: "center"
2075
2272
  },
2076
2273
  // Mobile: hide description entirely
2077
- [`@media (${BP_MOBILE})`]: {
2274
+ [`@media (${BP_MOBILE2})`]: {
2078
2275
  display: "none"
2079
2276
  }
2080
2277
  },
@@ -2091,13 +2288,13 @@ var useStyles6 = makeStyles({
2091
2288
  [`@media (min-width: ${extendedTokens.breakpointXl})`]: {
2092
2289
  display: "none"
2093
2290
  },
2094
- [`@media (${BP_MOBILE})`]: {
2291
+ [`@media (${BP_MOBILE2})`]: {
2095
2292
  display: "none"
2096
2293
  }
2097
2294
  },
2098
2295
  dividerHorizontal: {
2099
2296
  // Only visible on desktop (vertical layout)
2100
- [`@media (${BP_TABLET})`]: {
2297
+ [`@media (${BP_TABLET2})`]: {
2101
2298
  display: "none"
2102
2299
  }
2103
2300
  }
@@ -2113,60 +2310,110 @@ var CardServiceMenu = ({
2113
2310
  isLoading = false,
2114
2311
  skeletonCount = 4
2115
2312
  }) => {
2116
- const styles = useStyles6();
2117
- ({ ...DEFAULT_LABELS6[language], ...labels });
2313
+ const styles = useStyles7();
2314
+ const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
2315
+ const [isModalOpen, setIsModalOpen] = useState(false);
2118
2316
  const getMenuItemClass = (serviceId) => {
2119
- const isActive = activeServiceId === serviceId;
2317
+ const isActive = serviceId !== void 0 && activeServiceId === serviceId;
2120
2318
  return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
2121
2319
  };
2122
- 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: [
2123
- /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
2124
- /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
2125
- /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2126
- /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
2127
- showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
2128
- ] })
2129
- ] }),
2130
- index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
2131
- /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
2132
- /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
2133
- ] })
2134
- ] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
2135
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
2136
- /* @__PURE__ */ jsxs(
2320
+ const MAX_ITEMS = 5;
2321
+ const isOverflow = menuItems.length > MAX_ITEMS;
2322
+ const displayItems = isOverflow ? menuItems.slice(0, MAX_ITEMS - 1) : menuItems;
2323
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2324
+ /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxs("div", { className: styles.menuList, children: [
2325
+ isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
2326
+ /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
2327
+ /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
2328
+ /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2329
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
2330
+ showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
2331
+ ] })
2332
+ ] }),
2333
+ index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
2334
+ /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
2335
+ /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
2336
+ ] })
2337
+ ] }, `skeleton-${index}`)) : displayItems.map((item, index) => {
2338
+ return /* @__PURE__ */ jsxs(React.Fragment, { children: [
2339
+ /* @__PURE__ */ jsxs(
2340
+ Button,
2341
+ {
2342
+ className: getMenuItemClass(item.id),
2343
+ onClick: () => onServiceClick?.(item.id),
2344
+ "aria-label": item.name,
2345
+ children: [
2346
+ /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
2347
+ "img",
2348
+ {
2349
+ src: item.imageUrl,
2350
+ alt: item.name,
2351
+ className: styles.logo
2352
+ }
2353
+ ) }),
2354
+ /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2355
+ /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
2356
+ showDescriptions && /* @__PURE__ */ jsx(
2357
+ MenuItemDescription,
2358
+ {
2359
+ description: item.description,
2360
+ className: styles.description
2361
+ }
2362
+ )
2363
+ ] })
2364
+ ]
2365
+ }
2366
+ ),
2367
+ (index < displayItems.length - 1 || isOverflow) && /* @__PURE__ */ jsxs(Fragment, { children: [
2368
+ /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
2369
+ /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
2370
+ ] })
2371
+ ] }, item.id);
2372
+ }),
2373
+ !isLoading && isOverflow && /* @__PURE__ */ jsxs(
2137
2374
  Button,
2138
2375
  {
2139
- className: getMenuItemClass(item.id),
2140
- onClick: () => onServiceClick?.(item.id),
2141
- "aria-label": item.name,
2376
+ className: getMenuItemClass(),
2377
+ onClick: () => setIsModalOpen(true),
2378
+ "aria-label": mergedLabels.otherLabel,
2142
2379
  children: [
2143
- /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
2144
- "img",
2380
+ /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.moreIconOuter, children: /* @__PURE__ */ jsx(
2381
+ Icon,
2145
2382
  {
2146
- src: item.imageUrl,
2147
- alt: item.name,
2148
- className: styles.logo
2383
+ icon: "fluent:apps-24-regular",
2384
+ fontSize: "32px",
2385
+ color: tokens.colorNeutralForeground1
2149
2386
  }
2150
- ) }),
2387
+ ) }) }),
2151
2388
  /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
2152
- /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
2389
+ /* @__PURE__ */ jsx("span", { className: styles.label, children: mergedLabels.otherLabel }),
2153
2390
  showDescriptions && /* @__PURE__ */ jsx(
2154
2391
  MenuItemDescription,
2155
2392
  {
2156
- description: item.description,
2393
+ description: mergedLabels.otherDescription,
2157
2394
  className: styles.description
2158
2395
  }
2159
2396
  )
2160
2397
  ] })
2161
2398
  ]
2162
2399
  }
2163
- ),
2164
- index < menuItems.length - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
2165
- /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
2166
- /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
2167
- ] })
2168
- ] }, item.id);
2169
- }) }) });
2400
+ )
2401
+ ] }) }),
2402
+ !isLoading && isOverflow && /* @__PURE__ */ jsx(
2403
+ ModalListMenuService,
2404
+ {
2405
+ open: isModalOpen,
2406
+ onClose: () => setIsModalOpen(false),
2407
+ title: mergedLabels.modalTitle,
2408
+ menuItems,
2409
+ onItemClick: (item) => {
2410
+ setIsModalOpen(false);
2411
+ onServiceClick?.(item.id);
2412
+ },
2413
+ showDescriptions
2414
+ }
2415
+ )
2416
+ ] });
2170
2417
  };
2171
2418
  var MenuItemDescription = ({ description, className }) => {
2172
2419
  const ref = useRef(null);
@@ -2420,7 +2667,7 @@ var COUNTRIES = [
2420
2667
  { value: "PG", label: "Papua New Guinea", flag: "twemoji:flag-papua-new-guinea" }
2421
2668
  ];
2422
2669
  var PhoneInput = PhoneInputComponent.default || PhoneInputComponent;
2423
- var useStyles7 = makeStyles({
2670
+ var useStyles8 = makeStyles({
2424
2671
  field: {
2425
2672
  display: "flex",
2426
2673
  flexDirection: "column",
@@ -2758,7 +3005,7 @@ var InputDynamic = ({
2758
3005
  labels,
2759
3006
  menuPlacement
2760
3007
  }) => {
2761
- const styles = useStyles7();
3008
+ const styles = useStyles8();
2762
3009
  const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
2763
3010
  const [showPassword, setShowPassword] = useState(false);
2764
3011
  const [isPhoneMode, setIsPhoneMode] = useState(false);
@@ -3265,7 +3512,7 @@ var InputDynamic = ({
3265
3512
  autoCapitalize: "off",
3266
3513
  spellCheck: "false"
3267
3514
  },
3268
- value: COUNTRIES.find((country) => country.value === field.value) || null,
3515
+ value: (options && options.length > 0 ? options : COUNTRIES).find((country) => country.value === field.value) || null,
3269
3516
  onChange: (selectedOption) => {
3270
3517
  field.onChange(selectedOption ? selectedOption.value : "");
3271
3518
  if (onChange) {
@@ -3832,7 +4079,7 @@ var DEFAULT_LABELS8 = {
3832
4079
  otherDescription: "Other Services"
3833
4080
  }
3834
4081
  };
3835
- var useStyles8 = makeStyles({
4082
+ var useStyles9 = makeStyles({
3836
4083
  card: {
3837
4084
  position: "relative",
3838
4085
  width: "100%",
@@ -3970,7 +4217,7 @@ var CardTicketSearch = ({
3970
4217
  menuItems,
3971
4218
  isLoadingServiceMenu
3972
4219
  }) => {
3973
- const styles = useStyles8();
4220
+ const styles = useStyles9();
3974
4221
  const labels = React.useMemo(
3975
4222
  () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
3976
4223
  [language, customLabels]
@@ -4482,7 +4729,7 @@ var DEFAULT_LABELS9 = {
4482
4729
  swapAriaLabel: "Swap origin and destination"
4483
4730
  }
4484
4731
  };
4485
- var useStyles9 = makeStyles({
4732
+ var useStyles10 = makeStyles({
4486
4733
  cardSearchTicket: {
4487
4734
  borderRadius: "32px",
4488
4735
  // borderBottomLeftRadius: '0',
@@ -4564,7 +4811,7 @@ var CardTicketSearchSummary = ({
4564
4811
  showSwapButton = false,
4565
4812
  children
4566
4813
  }) => {
4567
- const styles = useStyles9();
4814
+ const styles = useStyles10();
4568
4815
  const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
4569
4816
  const { width } = useWindowSize();
4570
4817
  const getCircularConfig = () => {
@@ -4893,7 +5140,7 @@ var DEFAULT_LABELS10 = {
4893
5140
  popularHarborHeader: "Popular Harbor"
4894
5141
  }
4895
5142
  };
4896
- var useStyles10 = makeStyles({
5143
+ var useStyles11 = makeStyles({
4897
5144
  dialogTitle: {
4898
5145
  display: "flex",
4899
5146
  justifyContent: "space-between",
@@ -5026,7 +5273,7 @@ var ModalSearchHarbor = ({
5026
5273
  popularHarbors,
5027
5274
  showButtonFavorite = true
5028
5275
  }) => {
5029
- const styles = useStyles10();
5276
+ const styles = useStyles11();
5030
5277
  const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
5031
5278
  const handleSelect = (harbor) => {
5032
5279
  onAddLastSearched(harbor);
@@ -5216,7 +5463,7 @@ var DEFAULT_LABELS11 = {
5216
5463
  closeAriaLabel: "Close"
5217
5464
  }
5218
5465
  };
5219
- var useStyles11 = makeStyles({
5466
+ var useStyles12 = makeStyles({
5220
5467
  dialogSurface: {
5221
5468
  maxWidth: "600px",
5222
5469
  width: "100%"
@@ -5336,7 +5583,7 @@ var ModalSelectDate = ({
5336
5583
  dateFormat = "DD MMMM YYYY",
5337
5584
  showRoundtrip = true
5338
5585
  }) => {
5339
- const styles = useStyles11();
5586
+ const styles = useStyles12();
5340
5587
  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
5341
5588
  useEffect(() => {
5342
5589
  moment.locale(language === "id" ? "id" : "en");
@@ -5578,7 +5825,7 @@ var DEFAULT_LABELS12 = {
5578
5825
  closeAriaLabel: "Close"
5579
5826
  }
5580
5827
  };
5581
- var useStyles12 = makeStyles({
5828
+ var useStyles13 = makeStyles({
5582
5829
  dialogSurface: {
5583
5830
  maxWidth: "600px",
5584
5831
  width: "100%"
@@ -5663,7 +5910,7 @@ var ModalService = ({
5663
5910
  isLoading = false,
5664
5911
  isError = false
5665
5912
  }) => {
5666
- const styles = useStyles12();
5913
+ const styles = useStyles13();
5667
5914
  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
5668
5915
  const displayTitle = title || mergedLabels.title;
5669
5916
  const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
@@ -5785,7 +6032,7 @@ var DEFAULT_LABELS13 = {
5785
6032
  closeAriaLabel: "Close"
5786
6033
  }
5787
6034
  };
5788
- var useStyles13 = makeStyles({
6035
+ var useStyles14 = makeStyles({
5789
6036
  dialogSurface: {
5790
6037
  maxWidth: "600px",
5791
6038
  width: "100%"
@@ -5865,7 +6112,7 @@ var ModalTotalPassengers = ({
5865
6112
  maxPassengers = 10,
5866
6113
  infoMessage
5867
6114
  }) => {
5868
- const styles = useStyles13();
6115
+ const styles = useStyles14();
5869
6116
  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
5870
6117
  const [passengers, setPassengers] = useState([]);
5871
6118
  const [openItems, setOpenItems] = useState([]);
@@ -6162,7 +6409,7 @@ var DEFAULT_VEHICLE_ICONS = {
6162
6409
  bigTruck: "/assets/images/icons/big-truck.webp",
6163
6410
  looseLoad: "/assets/images/icons/loose-load.webp"
6164
6411
  };
6165
- var useStyles14 = makeStyles({
6412
+ var useStyles15 = makeStyles({
6166
6413
  dialogSurface: {
6167
6414
  maxWidth: "600px",
6168
6415
  width: "100%"
@@ -6216,7 +6463,7 @@ var ModalTypeOfService = ({
6216
6463
  onSave,
6217
6464
  renderImage
6218
6465
  }) => {
6219
- const styles = useStyles14();
6466
+ const styles = useStyles15();
6220
6467
  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
6221
6468
  const [selectedServiceId, setSelectedServiceId] = useState(
6222
6469
  selectedService?.id || 0
@@ -6497,7 +6744,7 @@ var getSortLabel = (value) => {
6497
6744
  const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
6498
6745
  return option?.label || "Rekomendasi";
6499
6746
  };
6500
- var useStyles15 = makeStyles({
6747
+ var useStyles16 = makeStyles({
6501
6748
  container: {
6502
6749
  display: "flex",
6503
6750
  width: "100%",
@@ -6533,7 +6780,7 @@ var SortMenu = ({
6533
6780
  sortButtonText: deprecatedSortButtonText,
6534
6781
  clearFiltersText: deprecatedClearFiltersText
6535
6782
  }) => {
6536
- const styles = useStyles15();
6783
+ const styles = useStyles16();
6537
6784
  const labels = React.useMemo(
6538
6785
  () => ({
6539
6786
  ...DEFAULT_LABELS15[language],
@@ -6709,7 +6956,7 @@ var DEFAULT_DURATION_RANGE = {
6709
6956
  min: 0,
6710
6957
  max: 8
6711
6958
  };
6712
- var useStyles16 = makeStyles({
6959
+ var useStyles17 = makeStyles({
6713
6960
  dialogSurface: {
6714
6961
  maxWidth: "600px",
6715
6962
  width: "100%"
@@ -6819,7 +7066,7 @@ var ModalFilterTicket = ({
6819
7066
  minDuration = DEFAULT_DURATION_RANGE.min,
6820
7067
  maxDuration = DEFAULT_DURATION_RANGE.max
6821
7068
  }) => {
6822
- const styles = useStyles16();
7069
+ const styles = useStyles17();
6823
7070
  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
6824
7071
  const [rangeReady, setRangeReady] = useState(false);
6825
7072
  useEffect(() => {
@@ -7143,7 +7390,7 @@ var DEFAULT_LABELS17 = {
7143
7390
  }
7144
7391
  };
7145
7392
  var DEFAULT_SCROLL_AMOUNT = 150;
7146
- var useStyles17 = makeStyles({
7393
+ var useStyles18 = makeStyles({
7147
7394
  container: {
7148
7395
  display: "flex",
7149
7396
  alignItems: "stretch",
@@ -7226,7 +7473,7 @@ var DateFilter = ({
7226
7473
  labels,
7227
7474
  isLoading = false
7228
7475
  }) => {
7229
- const styles = useStyles17();
7476
+ const styles = useStyles18();
7230
7477
  const scrollRef = useRef(null);
7231
7478
  const mergedLabels = {
7232
7479
  ...DEFAULT_LABELS17[language],
@@ -7352,7 +7599,7 @@ var DEFAULT_FORM_VALUES = {
7352
7599
  typeOfService: "",
7353
7600
  passenger: ""
7354
7601
  };
7355
- var useStyles18 = makeStyles({
7602
+ var useStyles19 = makeStyles({
7356
7603
  dialogSurface: {
7357
7604
  maxWidth: "900px",
7358
7605
  width: "100%"
@@ -7454,7 +7701,7 @@ var ModalSearchTicket = ({
7454
7701
  showRoundTrip = true,
7455
7702
  ...props
7456
7703
  }) => {
7457
- const styles = useStyles18();
7704
+ const styles = useStyles19();
7458
7705
  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
7459
7706
  const { control, setValue, handleSubmit, watch } = useForm({
7460
7707
  defaultValues: {
@@ -7902,7 +8149,7 @@ var DEFAULT_LABELS19 = {
7902
8149
  ferryIconAlt: "Ferry Icon"
7903
8150
  }
7904
8151
  };
7905
- var useStyles19 = makeStyles({
8152
+ var useStyles20 = makeStyles({
7906
8153
  stepperWrapper: {
7907
8154
  position: "relative",
7908
8155
  width: "100%",
@@ -8027,7 +8274,7 @@ var Stepper = ({
8027
8274
  language = "id",
8028
8275
  labels
8029
8276
  }) => {
8030
- const styles = useStyles19();
8277
+ const styles = useStyles20();
8031
8278
  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
8032
8279
  const currentStepIndex = useMemo(() => {
8033
8280
  if (typeof currentStep === "number") {
@@ -8098,7 +8345,7 @@ var DEFAULT_LABELS20 = {
8098
8345
  email: "Email"
8099
8346
  }
8100
8347
  };
8101
- var useStyles20 = makeStyles({
8348
+ var useStyles21 = makeStyles({
8102
8349
  card: {
8103
8350
  padding: "1.5rem",
8104
8351
  borderRadius: tokens.borderRadiusXLarge,
@@ -8128,7 +8375,7 @@ var CardOrdererInfo = ({
8128
8375
  labels,
8129
8376
  className
8130
8377
  }) => {
8131
- const styles = useStyles20();
8378
+ const styles = useStyles21();
8132
8379
  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
8133
8380
  return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
8134
8381
  /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
@@ -8180,7 +8427,7 @@ var DEFAULT_LABELS21 = {
8180
8427
  }
8181
8428
  }
8182
8429
  };
8183
- var useStyles21 = makeStyles({
8430
+ var useStyles22 = makeStyles({
8184
8431
  dialogSurface: {
8185
8432
  maxWidth: "600px",
8186
8433
  width: "100%",
@@ -8235,7 +8482,7 @@ var ModalListPassenger = ({
8235
8482
  // sameAsOrderer,
8236
8483
  // onSameAsOrdererChange,
8237
8484
  }) => {
8238
- const styles = useStyles21();
8485
+ const styles = useStyles22();
8239
8486
  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
8240
8487
  const displayTitle = title || mergedLabels.title;
8241
8488
  const handleClose = () => {
@@ -8491,7 +8738,7 @@ var TYPE_OPTIONS = [
8491
8738
  value: "lainnya"
8492
8739
  }
8493
8740
  ];
8494
- var useStyles22 = makeStyles({
8741
+ var useStyles23 = makeStyles({
8495
8742
  dialogSurface: {
8496
8743
  maxWidth: "600px",
8497
8744
  width: "100%",
@@ -8669,7 +8916,7 @@ var ModalPassengerForm = ({
8669
8916
  ticketClassOptions,
8670
8917
  onScanComplete
8671
8918
  }) => {
8672
- const styles = useStyles22();
8919
+ const styles = useStyles23();
8673
8920
  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
8674
8921
  const mergedErrors = {
8675
8922
  ...DEFAULT_LABELS22[language].errors,
@@ -9424,7 +9671,7 @@ var getBadgeConfig = (ticketClass) => {
9424
9671
  };
9425
9672
  }
9426
9673
  };
9427
- var useStyles23 = makeStyles({
9674
+ var useStyles24 = makeStyles({
9428
9675
  card: {
9429
9676
  padding: "1.5rem",
9430
9677
  borderRadius: tokens.borderRadiusXLarge,
@@ -9507,7 +9754,7 @@ var CardPassengerList = ({
9507
9754
  labels,
9508
9755
  className
9509
9756
  }) => {
9510
- const styles = useStyles23();
9757
+ const styles = useStyles24();
9511
9758
  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
9512
9759
  const displayTitle = title || mergedLabels.defaultTitle;
9513
9760
  return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
@@ -9599,7 +9846,7 @@ var DEFAULT_LABELS24 = {
9599
9846
  noLabel: "No"
9600
9847
  }
9601
9848
  };
9602
- var useStyles24 = makeStyles({
9849
+ var useStyles25 = makeStyles({
9603
9850
  card: {
9604
9851
  padding: "1.5rem",
9605
9852
  borderRadius: tokens.borderRadiusXLarge,
@@ -9639,7 +9886,7 @@ var CardVehicleDetail = ({
9639
9886
  language = "id",
9640
9887
  labels
9641
9888
  }) => {
9642
- const styles = useStyles24();
9889
+ const styles = useStyles25();
9643
9890
  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
9644
9891
  return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
9645
9892
  /* @__PURE__ */ jsxs(
@@ -9810,7 +10057,7 @@ var DEFAULT_LABELS25 = {
9810
10057
  incrementQuantityAriaLabel: "Increase quantity"
9811
10058
  }
9812
10059
  };
9813
- var useStyles25 = makeStyles({
10060
+ var useStyles26 = makeStyles({
9814
10061
  card: {
9815
10062
  padding: "1.5rem",
9816
10063
  borderRadius: tokens.borderRadiusXLarge,
@@ -9878,7 +10125,7 @@ var CardVehicleOwnerForm = ({
9878
10125
  language = "id",
9879
10126
  labels
9880
10127
  }) => {
9881
- const styles = useStyles25();
10128
+ const styles = useStyles26();
9882
10129
  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
9883
10130
  return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
9884
10131
  /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
@@ -10693,7 +10940,7 @@ var DEFAULT_LABELS26 = {
10693
10940
  currencySymbol: "IDR"
10694
10941
  }
10695
10942
  };
10696
- var useStyles26 = makeStyles({
10943
+ var useStyles27 = makeStyles({
10697
10944
  container: {
10698
10945
  display: "flex",
10699
10946
  flexDirection: "column",
@@ -10826,7 +11073,7 @@ var CardBookingTicket = ({
10826
11073
  onPrevious,
10827
11074
  className
10828
11075
  }) => {
10829
- const styles = useStyles26();
11076
+ const styles = useStyles27();
10830
11077
  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
10831
11078
  return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
10832
11079
  /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
@@ -11019,7 +11266,7 @@ var DEFAULT_FAQ_ITEMS = {
11019
11266
  }
11020
11267
  ]
11021
11268
  };
11022
- var useStyles27 = makeStyles({
11269
+ var useStyles28 = makeStyles({
11023
11270
  faqSection: {
11024
11271
  // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
11025
11272
  },
@@ -11043,7 +11290,7 @@ var CardFAQ = ({
11043
11290
  items,
11044
11291
  className
11045
11292
  }) => {
11046
- const styles = useStyles27();
11293
+ const styles = useStyles28();
11047
11294
  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
11048
11295
  const faqItems = items || DEFAULT_FAQ_ITEMS[language];
11049
11296
  return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
@@ -11097,7 +11344,7 @@ var DEFAULT_LABELS28 = {
11097
11344
  currencySymbol: "Rp"
11098
11345
  }
11099
11346
  };
11100
- var useStyles28 = makeStyles({
11347
+ var useStyles29 = makeStyles({
11101
11348
  card: {
11102
11349
  backgroundColor: tokens.colorNeutralBackground1,
11103
11350
  boxShadow: tokens.shadow4,
@@ -11270,7 +11517,7 @@ var CardAddon = ({
11270
11517
  children,
11271
11518
  className
11272
11519
  }) => {
11273
- const styles = useStyles28();
11520
+ const styles = useStyles29();
11274
11521
  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
11275
11522
  return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.gapRow, children: [
11276
11523
  /* @__PURE__ */ jsxs("div", { className: styles.titleDivider, children: [
@@ -11498,7 +11745,7 @@ var DEFAULT_LABELS29 = {
11498
11745
  searchPlaceholder: "Search for food or drinks you want"
11499
11746
  }
11500
11747
  };
11501
- var useStyles29 = makeStyles({
11748
+ var useStyles30 = makeStyles({
11502
11749
  container: {
11503
11750
  display: "flex",
11504
11751
  flexDirection: "column",
@@ -11642,7 +11889,7 @@ var CardMealCatalog = ({
11642
11889
  searchValue,
11643
11890
  onSearchChange
11644
11891
  }) => {
11645
- const styles = useStyles29();
11892
+ const styles = useStyles30();
11646
11893
  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
11647
11894
  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
11648
11895
  /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
@@ -11756,7 +12003,7 @@ var DEFAULT_LABELS30 = {
11756
12003
  defaultTitle: "Review"
11757
12004
  }
11758
12005
  };
11759
- var useStyles30 = makeStyles({
12006
+ var useStyles31 = makeStyles({
11760
12007
  card: {
11761
12008
  padding: "1.5rem",
11762
12009
  borderRadius: tokens.borderRadiusXLarge,
@@ -11807,7 +12054,7 @@ var CardReview = ({
11807
12054
  className,
11808
12055
  headerAction
11809
12056
  }) => {
11810
- const styles = useStyles30();
12057
+ const styles = useStyles31();
11811
12058
  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
11812
12059
  return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
11813
12060
  /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -11865,7 +12112,7 @@ var DEFAULT_LABELS31 = {
11865
12112
  idNumber: "ID Number"
11866
12113
  }
11867
12114
  };
11868
- var useStyles31 = makeStyles({
12115
+ var useStyles32 = makeStyles({
11869
12116
  card: {
11870
12117
  padding: "1.5rem",
11871
12118
  borderRadius: tokens.borderRadiusXLarge,
@@ -11963,7 +12210,7 @@ var CardReviewPassenger = ({
11963
12210
  passengers,
11964
12211
  className
11965
12212
  }) => {
11966
- const styles = useStyles31();
12213
+ const styles = useStyles32();
11967
12214
  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
11968
12215
  const displayTitle = title || mergedLabels.title;
11969
12216
  return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
@@ -12043,7 +12290,7 @@ var DEFAULT_LABELS32 = {
12043
12290
  currencyPrefix: "Rp. "
12044
12291
  }
12045
12292
  };
12046
- var useStyles32 = makeStyles({
12293
+ var useStyles33 = makeStyles({
12047
12294
  list: {
12048
12295
  margin: 0,
12049
12296
  padding: 0,
@@ -12065,11 +12312,11 @@ var PriceDetailsTerms = ({
12065
12312
  language = "id",
12066
12313
  labels
12067
12314
  }) => {
12068
- const styles = useStyles32();
12315
+ const styles = useStyles33();
12069
12316
  const linkColor = tokens.colorBrandBackground;
12070
12317
  const bookingTerms = labels.bookingTerms;
12071
12318
  const agreementTerms = [
12072
- /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Link, { href: "/terms-and-conditions", style: { color: linkColor }, children: labels.agreementLinkFerizy }) }),
12319
+ /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Link, { href: "/term-condition", style: { color: linkColor }, children: labels.agreementLinkFerizy }) }),
12073
12320
  /* @__PURE__ */ jsxs(Fragment, { children: [
12074
12321
  labels.agreementCovidInfo,
12075
12322
  /* @__PURE__ */ jsx(Link, { href: "/surat-edaran-satgas-covid-19", style: { color: linkColor }, children: labels.agreementCovidLink })
@@ -12085,7 +12332,7 @@ var PriceDetailsTerms = ({
12085
12332
  ] })
12086
12333
  ] });
12087
12334
  };
12088
- var useStyles33 = makeStyles({
12335
+ var useStyles34 = makeStyles({
12089
12336
  card: {
12090
12337
  padding: "1.5rem",
12091
12338
  borderRadius: tokens.borderRadiusXLarge,
@@ -12162,7 +12409,7 @@ var CardPriceDetails = ({
12162
12409
  total,
12163
12410
  labels
12164
12411
  }) => {
12165
- const styles = useStyles33();
12412
+ const styles = useStyles34();
12166
12413
  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
12167
12414
  const displayTitle = title || mergedLabels.defaultTitle;
12168
12415
  const getVariantClass = (variant) => {
@@ -12230,7 +12477,7 @@ var DEFAULT_LABELS33 = {
12230
12477
  selectAriaLabel: "Select payment method"
12231
12478
  }
12232
12479
  };
12233
- var useStyles34 = makeStyles({
12480
+ var useStyles35 = makeStyles({
12234
12481
  container: {
12235
12482
  display: "flex",
12236
12483
  flexDirection: "column",
@@ -12290,7 +12537,7 @@ var CardPaymentMethodList = ({
12290
12537
  selectedValue,
12291
12538
  onSelect
12292
12539
  }) => {
12293
- const styles = useStyles34();
12540
+ const styles = useStyles35();
12294
12541
  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
12295
12542
  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
12296
12543
  index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
@@ -12348,7 +12595,7 @@ var DEFAULT_LABELS34 = {
12348
12595
  title: "Payment Method"
12349
12596
  }
12350
12597
  };
12351
- var useStyles35 = makeStyles({
12598
+ var useStyles36 = makeStyles({
12352
12599
  container: {
12353
12600
  display: "flex",
12354
12601
  flexDirection: "column",
@@ -12385,7 +12632,7 @@ var CardPaymentGuide = ({
12385
12632
  guides,
12386
12633
  className
12387
12634
  }) => {
12388
- const styles = useStyles35();
12635
+ const styles = useStyles36();
12389
12636
  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
12390
12637
  const displayTitle = title || mergedLabels.title;
12391
12638
  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
@@ -12423,7 +12670,7 @@ var DEFAULT_LABELS35 = {
12423
12670
  currencySymbol: "Rp."
12424
12671
  }
12425
12672
  };
12426
- var useStyles36 = makeStyles({
12673
+ var useStyles37 = makeStyles({
12427
12674
  container: {
12428
12675
  display: "flex",
12429
12676
  flexDirection: "column",
@@ -12505,7 +12752,7 @@ var CardPaymentInfo = ({
12505
12752
  onCopyVA,
12506
12753
  onCheckStatus
12507
12754
  }) => {
12508
- const styles = useStyles36();
12755
+ const styles = useStyles37();
12509
12756
  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
12510
12757
  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
12511
12758
  /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
@@ -12594,7 +12841,7 @@ var DEFAULT_LABELS36 = {
12594
12841
  illustrationAlt: "E-Ticket Illustration"
12595
12842
  }
12596
12843
  };
12597
- var useStyles37 = makeStyles({
12844
+ var useStyles38 = makeStyles({
12598
12845
  activeCard: {
12599
12846
  width: "100%",
12600
12847
  // padding: tokens.spacingHorizontalNone, // default
@@ -12664,7 +12911,7 @@ var CardStatusOrder = ({
12664
12911
  onClickViewTicket,
12665
12912
  className
12666
12913
  }) => {
12667
- const styles = useStyles37();
12914
+ const styles = useStyles38();
12668
12915
  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
12669
12916
  const displayStatus = statusLabel || mergedLabels.defaultStatus;
12670
12917
  const displayTitle = title || mergedLabels.defaultTitle;
@@ -12788,7 +13035,7 @@ var DEFAULT_LABELS37 = {
12788
13035
  closeAriaLabel: "Close"
12789
13036
  }
12790
13037
  };
12791
- var useStyles38 = makeStyles({
13038
+ var useStyles39 = makeStyles({
12792
13039
  surface: {
12793
13040
  width: "680px",
12794
13041
  maxWidth: "90vw",
@@ -12915,7 +13162,7 @@ var ModalPriceDetail = ({
12915
13162
  grandTotal,
12916
13163
  ...props
12917
13164
  }) => {
12918
- const styles = useStyles38();
13165
+ const styles = useStyles39();
12919
13166
  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
12920
13167
  return /* @__PURE__ */ jsx(
12921
13168
  Dialog,
@@ -13074,7 +13321,7 @@ var DEFAULT_LABELS38 = {
13074
13321
  requiredError: "is required"
13075
13322
  }
13076
13323
  };
13077
- var useStyles39 = makeStyles({
13324
+ var useStyles40 = makeStyles({
13078
13325
  surface: {
13079
13326
  maxWidth: "90vw",
13080
13327
  maxHeight: "90vh",
@@ -13101,7 +13348,7 @@ var ModalPreviewImage = ({
13101
13348
  imageUrl,
13102
13349
  alt = "Preview"
13103
13350
  }) => {
13104
- const styles = useStyles39();
13351
+ const styles = useStyles40();
13105
13352
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
13106
13353
  /* @__PURE__ */ jsx(
13107
13354
  DialogTitle,
@@ -13614,7 +13861,7 @@ var DEFAULT_LABELS39 = {
13614
13861
  id: {},
13615
13862
  en: {}
13616
13863
  };
13617
- var useStyles40 = makeStyles({
13864
+ var useStyles41 = makeStyles({
13618
13865
  container: {
13619
13866
  display: "flex",
13620
13867
  flexDirection: "column",
@@ -13674,7 +13921,7 @@ var CardProfileMenu = ({
13674
13921
  selectedValue,
13675
13922
  onTabSelect
13676
13923
  }) => {
13677
- const styles = useStyles40();
13924
+ const styles = useStyles41();
13678
13925
  ({ ...DEFAULT_LABELS39[language], ...labels });
13679
13926
  const handleTabSelect = (_, data) => {
13680
13927
  onTabSelect(data.value);
@@ -13703,185 +13950,6 @@ var CardProfileMenu = ({
13703
13950
  }
13704
13951
  ) });
13705
13952
  };
13706
- var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
13707
- var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
13708
- var useStyles41 = makeStyles({
13709
- dialogSurface: {
13710
- maxWidth: "900px",
13711
- width: "100%"
13712
- },
13713
- closeButton: {
13714
- minWidth: "32px",
13715
- minHeight: "32px"
13716
- },
13717
- content: {
13718
- paddingTop: "8px",
13719
- paddingBottom: "16px"
13720
- },
13721
- // Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
13722
- menuItem: {
13723
- display: "flex",
13724
- flexDirection: "row",
13725
- alignItems: "center",
13726
- justifyContent: "flex-start",
13727
- padding: "12px 16px",
13728
- borderRadius: tokens.borderRadiusMedium,
13729
- cursor: "pointer",
13730
- textAlign: "left",
13731
- transition: "background-color 0.2s ease",
13732
- color: tokens.colorNeutralForeground1,
13733
- backgroundColor: tokens.colorNeutralBackground1,
13734
- border: "none",
13735
- gap: "12px",
13736
- width: "100%",
13737
- "&:hover": {
13738
- backgroundColor: tokens.colorNeutralBackground1Hover
13739
- },
13740
- [`@media (${BP_TABLET2})`]: {
13741
- padding: "10px 10px",
13742
- gap: "8px"
13743
- },
13744
- [`@media (${BP_MOBILE2})`]: {
13745
- flexDirection: "column",
13746
- alignItems: "center",
13747
- textAlign: "center",
13748
- padding: "8px 6px",
13749
- gap: "4px"
13750
- }
13751
- },
13752
- logoWrapper: {
13753
- display: "flex",
13754
- alignItems: "center",
13755
- justifyContent: "center",
13756
- flexShrink: 0
13757
- },
13758
- logo: {
13759
- height: "32px",
13760
- width: "32px",
13761
- flexShrink: 0,
13762
- objectFit: "contain",
13763
- [`@media (${BP_TABLET2})`]: {
13764
- height: "28px",
13765
- width: "28px"
13766
- },
13767
- [`@media (${BP_MOBILE2})`]: {
13768
- height: "24px",
13769
- width: "24px"
13770
- }
13771
- },
13772
- textContent: {
13773
- display: "flex",
13774
- flexDirection: "column",
13775
- gap: "2px",
13776
- minWidth: 0,
13777
- width: "100%",
13778
- [`@media (${BP_MOBILE2})`]: {
13779
- alignItems: "center"
13780
- }
13781
- },
13782
- label: {
13783
- fontSize: tokens.fontSizeBase300,
13784
- fontWeight: tokens.fontWeightSemibold,
13785
- lineHeight: "1.2",
13786
- whiteSpace: "nowrap",
13787
- overflow: "hidden",
13788
- textOverflow: "ellipsis",
13789
- width: "100%",
13790
- [`@media (${BP_TABLET2})`]: {
13791
- fontSize: tokens.fontSizeBase200
13792
- },
13793
- [`@media (${BP_MOBILE2})`]: {
13794
- fontSize: tokens.fontSizeBase100,
13795
- textAlign: "center"
13796
- }
13797
- },
13798
- description: {
13799
- fontSize: tokens.fontSizeBase200,
13800
- fontWeight: tokens.fontWeightRegular,
13801
- color: tokens.colorNeutralForeground2,
13802
- display: "-webkit-box",
13803
- WebkitLineClamp: 2,
13804
- WebkitBoxOrient: "vertical",
13805
- overflow: "hidden",
13806
- textOverflow: "ellipsis",
13807
- lineHeight: "1.4",
13808
- [`@media (${BP_TABLET2})`]: {
13809
- fontSize: tokens.fontSizeBase100,
13810
- WebkitLineClamp: 1
13811
- },
13812
- [`@media (${BP_MOBILE2})`]: {
13813
- display: "none"
13814
- }
13815
- }
13816
- });
13817
- var ModalListMenuService = ({
13818
- open = false,
13819
- onClose = () => {
13820
- },
13821
- title = "",
13822
- menuItems = ALIAS_MENU_ITEMS,
13823
- onItemClick,
13824
- showDescriptions = true
13825
- }) => {
13826
- const styles = useStyles41();
13827
- return /* @__PURE__ */ jsx(
13828
- Dialog,
13829
- {
13830
- open,
13831
- onOpenChange: (_, data) => {
13832
- if (!data.open) {
13833
- onClose();
13834
- }
13835
- },
13836
- children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
13837
- /* @__PURE__ */ jsx(
13838
- DialogTitle,
13839
- {
13840
- action: /* @__PURE__ */ jsx(
13841
- Button,
13842
- {
13843
- appearance: "subtle",
13844
- "aria-label": "close",
13845
- icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
13846
- onClick: onClose,
13847
- className: styles.closeButton
13848
- }
13849
- ),
13850
- children: title
13851
- }
13852
- ),
13853
- /* @__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(
13854
- Button,
13855
- {
13856
- className: styles.menuItem,
13857
- onClick: () => onItemClick?.(item),
13858
- "aria-label": item.name,
13859
- children: [
13860
- /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
13861
- "img",
13862
- {
13863
- src: item.imageUrl,
13864
- alt: item.name,
13865
- className: styles.logo
13866
- }
13867
- ) }),
13868
- /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
13869
- /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
13870
- showDescriptions && /* @__PURE__ */ jsx(
13871
- MenuItemDescription,
13872
- {
13873
- description: item.description,
13874
- className: styles.description
13875
- }
13876
- )
13877
- ] })
13878
- ]
13879
- }
13880
- ) }, item.id)) }) })
13881
- ] }) })
13882
- }
13883
- );
13884
- };
13885
13953
 
13886
13954
  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 };
13887
13955
  //# sourceMappingURL=index.mjs.map