@asdp/ferryui 0.1.22-dev.8798 → 0.1.22-dev.8833

package/dist/index.js

@@ -732,8 +732,13 @@ var CardPromo = ({
             role: "presentation",
             alt: displayImageAlt,
             onError: (e) => {
-              e.currentTarget.src = "/assets/images/helper/error.svg";
-              e.currentTarget.style.objectFit = "fill";
+              const target = e.currentTarget;
+              target.src = "/assets/images/helper/error.svg";
+              target.style.objectFit = "fill";
+              target.style.scale = "0.7";
+              if (target.parentElement) {
+                target.parentElement.style.backgroundColor = reactComponents.tokens.colorNeutralStroke1;
+              }
             }
           }
         ) }),
@@ -2041,12 +2046,12 @@ var useStyles7 = reactComponents.makeStyles({
     marginBottom: reactComponents.tokens.spacingVerticalM
   },
   errorText: {
-    color: reactComponents.tokens.colorPaletteRedBackground1,
-    fontSize: reactComponents.tokens.fontSizeBase200
+    color: reactComponents.tokens.colorPaletteRedBackground1
+    // fontSize: tokens.fontSizeBase200,
   },
   helperText: {
-    color: reactComponents.tokens.colorNeutralForeground2,
-    fontSize: reactComponents.tokens.fontSizeBase200
+    color: reactComponents.tokens.colorNeutralForeground2
+    // fontSize: tokens.fontSizeBase200,
   },
   disabledFilledLighter: {
     backgroundColor: reactComponents.tokens.colorNeutralBackground4,
@@ -2061,7 +2066,7 @@ var useStyles7 = reactComponents.makeStyles({
     border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
     borderRadius: reactComponents.tokens.borderRadiusMedium,
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
-    fontSize: reactComponents.tokens.fontSizeBase300,
+    // fontSize: tokens.fontSizeBase300,
     "&:focus": {
       outline: `2px solid ${reactComponents.tokens.colorBrandStroke1}`
     }
@@ -2129,7 +2134,7 @@ var useStyles7 = reactComponents.makeStyles({
       borderRadius: reactComponents.tokens.borderRadiusMedium,
       padding: reactComponents.tokens.spacingVerticalS,
       paddingLeft: "48px",
-      fontSize: reactComponents.tokens.fontSizeBase300,
+      // fontSize: tokens.fontSizeBase300,
       fontFamily: reactComponents.tokens.fontFamilyBase,
       backgroundColor: reactComponents.tokens.colorNeutralBackground1,
       color: reactComponents.tokens.colorNeutralForeground1,
@@ -2138,7 +2143,7 @@ var useStyles7 = reactComponents.makeStyles({
       minHeight: "40px"
     },
     "& .react-tel-input .form-control::placeholder": {
-      fontSize: reactComponents.tokens.fontSizeBase400
+      // fontSize: tokens.fontSizeBase400,
     },
     "& .react-tel-input .form-control:hover": {
       border: `1px solid ${reactComponents.tokens.colorNeutralStroke1Hover}`
@@ -2193,7 +2198,7 @@ var useStyles7 = reactComponents.makeStyles({
       borderRadius: reactComponents.tokens.borderRadiusCircular,
       cursor: "pointer",
       transition: "all 0.2s ease",
-      fontSize: reactComponents.tokens.fontSizeBase300,
+      // fontSize: tokens.fontSizeBase300,
       color: reactComponents.tokens.colorNeutralForeground2
     },
     "&:hover .fui-Radio__label": {
@@ -2223,6 +2228,24 @@ var useStyles7 = reactComponents.makeStyles({
       backgroundColor: reactComponents.tokens.colorNeutralBackground4,
       border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`
     }
+  },
+  labelSmall: {
+    fontSize: reactComponents.tokens.fontSizeBase100
+  },
+  labelMedium: {
+    fontSize: reactComponents.tokens.fontSizeBase200
+  },
+  labelLarge: {
+    fontSize: reactComponents.tokens.fontSizeBase300
+  },
+  valueSmall: {
+    fontSize: reactComponents.tokens.fontSizeBase200
+  },
+  valueMedium: {
+    fontSize: reactComponents.tokens.fontSizeBase300
+  },
+  valueLarge: {
+    fontSize: reactComponents.tokens.fontSizeBase400
   }
 });
 var detectIdentityType = (value) => {
@@ -2263,7 +2286,7 @@ var InputDynamic = ({
   helperText,
   className,
   layout,
-  size,
+  size = "large",
   onClick,
   style,
   defaultCountry = "ID",
@@ -2300,7 +2323,7 @@ var InputDynamic = ({
       const baseStyles = {
         ...provided,
         minHeight: "40px",
-        fontSize: reactComponents.tokens.fontSizeBase400,
+        // fontSize: tokens.fontSizeBase400,
         transition: "all 0.2s ease"
       };
       if (currentAppearance === "outline") {
@@ -2397,19 +2420,19 @@ var InputDynamic = ({
       }),
       option: (provided, state) => ({
         ...provided,
-        fontSize: reactComponents.tokens.fontSizeBase300,
+        // fontSize: tokens.fontSizeBase300,
         color: state.isSelected ? reactComponents.tokens.colorNeutralForegroundOnBrand : reactComponents.tokens.colorNeutralForeground1,
         backgroundColor: state.isSelected ? reactComponents.tokens.colorBrandBackground : state.isFocused ? reactComponents.tokens.colorNeutralBackground1Hover : "transparent"
       }),
       placeholder: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground3,
-        fontSize: reactComponents.tokens.fontSizeBase400
+        color: reactComponents.tokens.colorNeutralForeground3
+        // fontSize: tokens.fontSizeBase400,
       }),
       singleValue: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground1,
-        fontSize: reactComponents.tokens.fontSizeBase400
+        color: reactComponents.tokens.colorNeutralForeground1
+        // fontSize: tokens.fontSizeBase400,
       })
     };
   };
@@ -2498,6 +2521,8 @@ var InputDynamic = ({
     };
     const otpMatch = /^otp(\d+)$/.exec(String(name));
     const otpIndex2 = otpMatch ? parseInt(otpMatch[1], 10) : null;
+    const classNameSize = size === "small" ? styles.valueSmall : size === "medium" ? styles.valueMedium : styles.valueLarge;
+    const fontSizeValuePhoneInput = size == "small" ? reactComponents.tokens.fontSizeBase200 : size === "medium" ? reactComponents.tokens.fontSizeBase300 : reactComponents.tokens.fontSizeBase400;
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
@@ -2537,6 +2562,9 @@ var InputDynamic = ({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              },
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -2596,6 +2624,7 @@ var InputDynamic = ({
             field.onChange(normalizedValue);
             updateEmailOrPhoneType(normalizedValue);
           },
+          className: classNameSize,
           placeholder: inputPlaceholder,
           disabled,
           appearance,
@@ -2675,7 +2704,10 @@ var InputDynamic = ({
               placeholder: inputPlaceholder,
               disabled,
               enableSearch: true,
-              disableSearchIcon: true
+              disableSearchIcon: true,
+              inputStyle: {
+                fontSize: fontSizeValuePhoneInput
+              }
             }
           )
         }
@@ -2698,13 +2730,22 @@ var InputDynamic = ({
           appearance,
           size,
           type: inputType,
-          style: { width: "100%" }
+          style: { width: "100%" },
+          className: classNameSize
         }
       ) });
     }
     switch (type) {
       case "textarea":
-        return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Textarea, { ...commonProps, rows, resize: "vertical" });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Textarea,
+          {
+            ...commonProps,
+            rows,
+            resize: "vertical",
+            className: classNameSize
+          }
+        );
       case "select":
         return /* @__PURE__ */ jsxRuntime.jsx(
           Select__default.default,
@@ -2715,7 +2756,7 @@ var InputDynamic = ({
             placeholder,
             options,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: reactComponents.mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             isMulti: isMultiSelect,
             inputProps: {
@@ -2751,7 +2792,7 @@ var InputDynamic = ({
             placeholder: placeholder || "Select country",
             options: COUNTRIES,
             styles: getSelectStyles(!!error),
-            className: styles.reactSelect,
+            className: reactComponents.mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
             inputProps: {
               autoComplete: "new-password",
@@ -2768,10 +2809,16 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
-            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-            ] }),
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", gap: "8px" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                ]
+              }
+            ),
             menuPlacement
           }
         );
@@ -2802,7 +2849,10 @@ var InputDynamic = ({
                 placeholder: placeholder || mergedLabels.phoneDefaultPlaceholder,
                 disabled,
                 enableSearch: true,
-                disableSearchIcon: true
+                disableSearchIcon: true,
+                inputStyle: {
+                  fontSize: fontSizeValuePhoneInput
+                }
               }
             )
           }
@@ -2908,7 +2958,10 @@ var InputDynamic = ({
             min,
             max,
             step,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "time":
@@ -2920,7 +2973,10 @@ var InputDynamic = ({
             type,
             min,
             max,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
       case "password":
@@ -2929,7 +2985,10 @@ var InputDynamic = ({
           {
             ...commonProps,
             type: showPassword ? "text" : "password",
-            className: styles.inputWithAutocomplete,
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            ),
             contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.Button,
               {
@@ -3092,7 +3151,10 @@ var InputDynamic = ({
             ...commonProps,
             type,
             onInput,
-            className: styles.inputWithAutocomplete
+            className: reactComponents.mergeClasses(
+              styles.inputWithAutocomplete,
+              classNameSize
+            )
           }
         );
     }
@@ -3202,7 +3264,14 @@ var InputDynamic = ({
           validationMessage: error?.message,
           validationState: error ? "error" : "none",
           children: [
-            label && type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { required, children: label }),
+            label && type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Label,
+              {
+                required,
+                className: size === "small" ? styles.labelSmall : size === "medium" ? styles.labelMedium : styles.labelLarge,
+                children: label
+              }
+            ),
             renderInput(field, error?.message),
             helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(
               reactComponents.Text,
@@ -3560,7 +3629,7 @@ var CardTicketSearch = ({
                                 }
                               ),
                               appearance: "filled-lighter",
-                              size: "medium",
+                              size: "large",
                               placeholder: labels.placeholderPort,
                               onClick: onFromClick,
                               onChange: handleFromChange,
@@ -3630,7 +3699,7 @@ var CardTicketSearch = ({
                             ),
                             disabled: toDisabled,
                             appearance: "filled-lighter",
-                            size: "medium",
+                            size: "large",
                             placeholder: labels.placeholderDestinationPort,
                             onClick: onToClick,
                             validationRules: {
@@ -3668,7 +3737,7 @@ var CardTicketSearch = ({
                               }
                             ),
                             appearance: "filled-lighter",
-                            size: "medium",
+                            size: "large",
                             placeholder: labels.placeholderDepartureDate,
                             onClick: onStartDateClick,
                             required: true,
@@ -3698,7 +3767,7 @@ var CardTicketSearch = ({
                             control,
                             type: "switch",
                             disabled: roundTripDisabled,
-                            size: "medium"
+                            size: "large"
                           }
                         )
                       }
@@ -3728,7 +3797,7 @@ var CardTicketSearch = ({
                               }
                             ),
                             appearance: "filled-lighter",
-                            size: "medium",
+                            size: "large",
                             placeholder: labels.placeholderReturnDate,
                             onClick: onEndDateClick,
                             disabled: endDateDisabled,
@@ -3801,7 +3870,7 @@ var CardTicketSearch = ({
                                   }
                                 ),
                                 appearance: "filled-lighter",
-                                size: "medium",
+                                size: "large",
                                 placeholder: labels.placeholderTypeClass,
                                 onClick: onServiceClassClick,
                                 required: true,
@@ -3835,7 +3904,7 @@ var CardTicketSearch = ({
                                   }
                                 ),
                                 appearance: "filled-lighter",
-                                size: "medium",
+                                size: "large",
                                 placeholder: labels.placeholderTypeService,
                                 onClick: onTypeOfServiceClick,
                                 required: true,
@@ -3870,7 +3939,7 @@ var CardTicketSearch = ({
                                   }
                                 ),
                                 appearance: "filled-lighter",
-                                size: "medium",
+                                size: "large",
                                 placeholder: labels.placeholderPassenger,
                                 onClick: onPassengerClick
                               }
@@ -3930,8 +3999,9 @@ var useStyles9 = reactComponents.makeStyles({
     borderRadius: "32px",
     // borderBottomLeftRadius: '0',
     // borderBottomRightRadius: '0',
-    padding: "3rem",
-    paddingBottom: "8rem",
+    padding: "1rem",
+    paddingTop: "2rem",
+    paddingBottom: "7rem",
     position: "relative",
     overflow: "visible",
     // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
@@ -4026,6 +4096,47 @@ var CardTicketSearchSummary = ({
     return { count: 11, spacing: 136, size: 100, height: 90 };
   };
   const circularConfig = getCircularConfig();
+  const RenderField = ({ label, value, icon }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "5px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon,
+                    color: reactComponents.tokens.colorNeutralForeground1,
+                    style: { height: "20px", width: "20px" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { style: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 1,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden"
+                }, children: value })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.cardSearchTicket, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4036,10 +4147,10 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 5,
-          xxxl: 5,
+          xxl: 4,
+          xxxl: 4,
           className: styles.paddingResponsive,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { padding: "12px" }, children: [
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", alignItems: "center" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               reactGridSystem.Col,
               {
@@ -4052,28 +4163,11 @@ var CardTicketSearchSummary = ({
                 xxxl: 5,
                 className: styles.paddingResponsive,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Field,
+                  RenderField,
                   {
                     label: mergedLabels.originHarbor,
-                    className: styles.field,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.Input,
-                      {
-                        name: "from",
-                        disabled: true,
-                        type: "text",
-                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                          react.Icon,
-                          {
-                            icon: "fluent:vehicle-ship-16-filled",
-                            color: reactComponents.tokens.colorNeutralForegroundDisabled
-                          }
-                        ),
-                        value: originHarbor,
-                        appearance: "outline",
-                        size: "medium"
-                      }
-                    )
+                    value: originHarbor,
+                    icon: "fluent:vehicle-ship-24-filled"
                   }
                 )
               }
@@ -4120,28 +4214,11 @@ var CardTicketSearchSummary = ({
                 xxxl: 6,
                 className: styles.paddingResponsive,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Field,
+                  RenderField,
                   {
                     label: mergedLabels.destinationHarbor,
-                    className: styles.field,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.Input,
-                      {
-                        name: "to",
-                        type: "text",
-                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                          react.Icon,
-                          {
-                            icon: "fluent:location-24-filled",
-                            color: reactComponents.tokens.colorNeutralForegroundDisabled
-                          }
-                        ),
-                        disabled: true,
-                        appearance: "outline",
-                        size: "medium",
-                        value: destinationHarbor
-                      }
-                    )
+                    value: destinationHarbor,
+                    icon: "fluent:location-24-filled"
                   }
                 )
               }
@@ -4157,8 +4234,8 @@ var CardTicketSearchSummary = ({
           md: 12,
           lg: 12,
           xl: 12,
-          xxl: 5,
-          xxxl: 5,
+          xxl: 6,
+          xxxl: 6,
           className: styles.paddingResponsive,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", alignItems: "center" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4172,24 +4249,14 @@ var CardTicketSearchSummary = ({
                 xxl: 3,
                 xxxl: 3,
                 className: styles.paddingResponsive,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Input,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RenderField,
                   {
-                    name: "startDate",
-                    type: "text",
-                    contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                      react.Icon,
-                      {
-                        icon: "fluent:calendar-24-regular",
-                        color: reactComponents.tokens.colorNeutralForegroundDisabled
-                      }
-                    ),
-                    disabled: true,
-                    appearance: "outline",
-                    size: "medium",
-                    value: departureDate
+                    label: mergedLabels.departureDate,
+                    value: departureDate,
+                    icon: "fluent:calendar-24-regular"
                   }
-                ) })
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4203,24 +4270,14 @@ var CardTicketSearchSummary = ({
                 xxl: 3,
                 xxxl: 3,
                 className: styles.paddingResponsive,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Input,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RenderField,
                   {
-                    name: "serviceClass",
-                    type: "text",
-                    contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                      react.Icon,
-                      {
-                        icon: "fluent:ribbon-star-24-regular",
-                        color: reactComponents.tokens.colorNeutralForegroundDisabled
-                      }
-                    ),
-                    disabled: true,
-                    appearance: "outline",
-                    size: "medium",
-                    value: serviceClass
+                    label: mergedLabels.serviceClass,
+                    value: serviceClass,
+                    icon: "fluent:ribbon-star-24-regular"
                   }
-                ) })
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4234,23 +4291,14 @@ var CardTicketSearchSummary = ({
                 xxl: 3,
                 xxxl: 3,
                 className: styles.paddingResponsive,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Input,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RenderField,
                   {
-                    type: "text",
-                    contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                      react.Icon,
-                      {
-                        icon: "fluent:vehicle-car-24-regular",
-                        color: reactComponents.tokens.colorNeutralForegroundDisabled
-                      }
-                    ),
-                    disabled: true,
-                    appearance: "outline",
-                    size: "medium",
-                    value: typeOfService
+                    label: mergedLabels.typeOfService,
+                    value: typeOfService,
+                    icon: "fluent:vehicle-car-24-regular"
                   }
-                ) })
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4264,24 +4312,14 @@ var CardTicketSearchSummary = ({
                 xxl: 3,
                 xxxl: 3,
                 className: styles.paddingResponsive,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Input,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  RenderField,
                   {
-                    name: "passenger",
-                    type: "text",
-                    contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                      react.Icon,
-                      {
-                        icon: "fluent:people-24-regular",
-                        color: reactComponents.tokens.colorNeutralForegroundDisabled
-                      }
-                    ),
-                    disabled: true,
-                    appearance: "outline",
-                    size: "medium",
-                    value: totalPassengers
+                    label: mergedLabels.totalPassengers,
+                    value: totalPassengers,
+                    icon: "fluent:people-24-regular"
                   }
-                ) })
+                )
               }
             )
           ] }) })
@@ -5102,10 +5140,10 @@ var ModalService = ({
   React5.useEffect(() => {
     if (open) {
       if (selectedServiceIds && selectedServiceIds.length > 0) {
-        const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
+        const validIds = services.filter((s) => selectedServiceIds.includes(s.serviceTypeId)).map((s) => s.serviceTypeId);
         setSelectedServices(validIds);
       } else {
-        setSelectedServices(services.map((s) => s.id));
+        setSelectedServices(services.map((s) => s.serviceTypeId));
       }
     }
   }, [open, services, selectedServiceIds]);
@@ -5125,12 +5163,12 @@ var ModalService = ({
     if (selectedServices.length === services.length) {
       setSelectedServices([]);
     } else {
-      setSelectedServices(services.map((s) => s.id));
+      setSelectedServices(services.map((s) => s.serviceTypeId));
     }
   };
   const handleSave = () => {
     const selectedServiceItems = services.filter(
-      (s) => selectedServices.includes(s.id)
+      (s) => selectedServices.includes(s.serviceTypeId)
     );
     onSave(selectedServiceItems);
   };
@@ -5167,7 +5205,7 @@ var ModalService = ({
           "div",
           {
             className: styles.serviceItem,
-            onClick: () => handleToggleService(service.id),
+            onClick: () => handleToggleService(service.serviceTypeId),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceContent, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.serviceName, children: service.serviceTypeName }),
@@ -5177,13 +5215,13 @@ var ModalService = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactComponents.Checkbox,
                 {
-                  checked: selectedServices.includes(service.id),
-                  onChange: () => handleToggleService(service.id)
+                  checked: selectedServices.includes(service.serviceTypeId),
+                  onChange: () => handleToggleService(service.serviceTypeId)
                 }
               )
             ]
           },
-          service.id
+          service.serviceTypeId
         ))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6988,7 +7026,7 @@ var ModalSearchTicket = ({
                           }
                         ),
                         appearance: "filled-lighter",
-                        size: "medium",
+                        size: "large",
                         placeholder: mergedLabels.fromPlaceholder,
                         onClick: onSelectOrigin,
                         onChange: handleFromChange,
@@ -7057,7 +7095,7 @@ var ModalSearchTicket = ({
                       ),
                       disabled: toDisabled,
                       appearance: "filled-lighter",
-                      size: "medium",
+                      size: "large",
                       placeholder: mergedLabels.toPlaceholder,
                       onClick: onSelectDestination,
                       validationRules: {
@@ -7095,7 +7133,7 @@ var ModalSearchTicket = ({
                         }
                       ),
                       appearance: "filled-lighter",
-                      size: "medium",
+                      size: "large",
                       placeholder: mergedLabels.departureDatePlaceholder,
                       onClick: onSelectDepartureDate,
                       required: true,
@@ -7125,7 +7163,7 @@ var ModalSearchTicket = ({
                       control,
                       type: "switch",
                       disabled: roundTripDisabled,
-                      size: "medium"
+                      size: "large"
                     }
                   )
                 }
@@ -7155,7 +7193,7 @@ var ModalSearchTicket = ({
                         }
                       ),
                       appearance: "filled-lighter",
-                      size: "medium",
+                      size: "large",
                       placeholder: mergedLabels.returnDatePlaceholder,
                       onClick: onSelectReturnDate,
                       disabled: endDateDisabled,
@@ -7223,7 +7261,7 @@ var ModalSearchTicket = ({
                           }
                         ),
                         appearance: "filled-lighter",
-                        size: "medium",
+                        size: "large",
                         placeholder: mergedLabels.serviceClassPlaceholder,
                         onClick: onSelectServiceClass,
                         required: true,
@@ -7257,7 +7295,7 @@ var ModalSearchTicket = ({
                           }
                         ),
                         appearance: "filled-lighter",
-                        size: "medium",
+                        size: "large",
                         placeholder: mergedLabels.typeOfServicePlaceholder,
                         onClick: onSelectTypeOfService,
                         required: true,
@@ -7292,7 +7330,7 @@ var ModalSearchTicket = ({
                           }
                         ),
                         appearance: "filled-lighter",
-                        size: "medium",
+                        size: "large",
                         placeholder: mergedLabels.passengerPlaceholder,
                         onClick: onSelectPassenger
                       }
@@ -8804,7 +8842,8 @@ var CardVehicleOwnerForm = ({
                         name: `looseCargoOwners.${index}.originCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions
+                        options: cityOptions,
+                        size: "large"
                       }
                     )
                   ] }),
@@ -8817,7 +8856,8 @@ var CardVehicleOwnerForm = ({
                         name: `looseCargoOwners.${index}.destinationCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions
+                        options: cityOptions,
+                        size: "large"
                       }
                     )
                   ] })
@@ -9076,7 +9116,8 @@ var CardVehicleOwnerForm = ({
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: []
+                                        options: [],
+                                        size: "large"
                                       }
                                     ),
                                     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9124,7 +9165,8 @@ var CardVehicleOwnerForm = ({
                                             value: "unit",
                                             label: mergedLabels.cargoTypeOptions.unit
                                           }
-                                        ]
+                                        ],
+                                        size: "large"
                                       }
                                     ),
                                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -9328,7 +9370,8 @@ var CardVehicleOwnerForm = ({
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: []
+                                        options: [],
+                                        size: "large"
                                       }
                                     ),
                                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -9355,7 +9398,8 @@ var CardVehicleOwnerForm = ({
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: []
+                                        options: [],
+                                        size: "large"
                                       }
                                     ),
                                     /* @__PURE__ */ jsxRuntime.jsxs(