@asdp/ferryui 0.1.22-dev.10601 → 0.1.22-dev.10665

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction, DialogProps } from '@fluentui/react-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, Path, Control, UseFormWatch, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 
@@ -548,13 +547,13 @@ declare const CardTicket: React$1.FC<CardTicketProps>;
  * Horizontal ticket card background with decorative perforated edges
  * Use this for desktop/landscape layouts
  */
-declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 /**
  * Vertical ticket card background with decorative perforated edges
  * Use this for mobile/portrait layouts
  */
-declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 type ServiceId = 'ferry' | 'ifcs' | 'skpt' | 'hotel' | 'other';
 interface CardServiceMenuLabels {

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction, DialogProps } from '@fluentui/react-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, Path, Control, UseFormWatch, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 
@@ -548,13 +547,13 @@ declare const CardTicket: React$1.FC<CardTicketProps>;
  * Horizontal ticket card background with decorative perforated edges
  * Use this for desktop/landscape layouts
  */
-declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 /**
  * Vertical ticket card background with decorative perforated edges
  * Use this for mobile/portrait layouts
  */
-declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 type ServiceId = 'ferry' | 'ifcs' | 'skpt' | 'hotel' | 'other';
 interface CardServiceMenuLabels {

package/dist/index.js

@@ -14655,22 +14655,22 @@ var CardBookingAddOn = ({
   const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   const addOnRows = [
-    {
+    addOnData?.lounge && {
       key: "lounge",
-      label: addOnData?.lounge?.label || mergedLabels.loungeLabel,
-      price: addOnData?.lounge?.price || mergedLabels.addOnPrice
+      label: addOnData.lounge.label || mergedLabels.loungeLabel,
+      price: addOnData.lounge.price
     },
-    {
+    addOnData?.assurance && {
       key: "assurance",
-      label: addOnData?.assurance?.label || mergedLabels.assuranceLabel,
-      price: addOnData?.assurance?.price || mergedLabels.addOnPrice
+      label: addOnData.assurance.label || mergedLabels.assuranceLabel,
+      price: addOnData.assurance.price
     },
-    {
+    addOnData?.meal && {
       key: "meal",
-      label: addOnData?.meal?.label || mergedLabels.mealLabel,
-      price: addOnData?.meal?.price || mergedLabels.addOnPrice
+      label: addOnData.meal.label || mergedLabels.mealLabel,
+      price: addOnData.meal.price
     }
-  ];
+  ].filter(Boolean);
   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: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -15689,6 +15689,16 @@ var useStyles34 = reactComponents.makeStyles({
     flexDirection: "column",
     rowGap: reactComponents.tokens.spacingVerticalL
   },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalL
+  },
+  passengerListScrollable: {
+    maxHeight: "560px",
+    overflowY: "auto",
+    paddingRight: reactComponents.tokens.spacingHorizontalXS
+  },
   passengerCard: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -15747,12 +15757,13 @@ var CardReviewPassenger = ({
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.title;
+  const isScrollable = !isLoading && passengers.length > 5;
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.list, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.titleDivider })
     ] }) }),
-    isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.passengerList} ${isScrollable ? styles.passengerListScrollable : ""}`, children: isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "220px", height: "16px" } })
@@ -15790,7 +15801,7 @@ var CardReviewPassenger = ({
           }
         ) })
       ] }) }) }, passenger.id || index);
-    })
+    }) })
   ] }) });
 };