@asdp/ferryui 0.1.22-dev.8784 → 0.1.22-dev.8826

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +8 -2
  2. package/dist/index.d.ts +8 -2
  3. package/dist/index.js +192 -161
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +193 -162
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -732,8 +732,13 @@ var CardPromo = ({
732
732
  role: "presentation",
733
733
  alt: displayImageAlt,
734
734
  onError: (e) => {
735
- e.currentTarget.src = "/assets/images/helper/error.svg";
736
- e.currentTarget.style.objectFit = "fill";
735
+ const target = e.currentTarget;
736
+ target.src = "/assets/images/helper/error.svg";
737
+ target.style.objectFit = "fill";
738
+ target.style.scale = "0.7";
739
+ if (target.parentElement) {
740
+ target.parentElement.style.backgroundColor = reactComponents.tokens.colorNeutralStroke1;
741
+ }
737
742
  }
738
743
  }
739
744
  ) }),
@@ -2041,12 +2046,12 @@ var useStyles7 = reactComponents.makeStyles({
2041
2046
  marginBottom: reactComponents.tokens.spacingVerticalM
2042
2047
  },
2043
2048
  errorText: {
2044
- color: reactComponents.tokens.colorPaletteRedBackground1,
2045
- fontSize: reactComponents.tokens.fontSizeBase200
2049
+ color: reactComponents.tokens.colorPaletteRedBackground1
2050
+ // fontSize: tokens.fontSizeBase200,
2046
2051
  },
2047
2052
  helperText: {
2048
- color: reactComponents.tokens.colorNeutralForeground2,
2049
- fontSize: reactComponents.tokens.fontSizeBase200
2053
+ color: reactComponents.tokens.colorNeutralForeground2
2054
+ // fontSize: tokens.fontSizeBase200,
2050
2055
  },
2051
2056
  disabledFilledLighter: {
2052
2057
  backgroundColor: reactComponents.tokens.colorNeutralBackground4,
@@ -2061,7 +2066,7 @@ var useStyles7 = reactComponents.makeStyles({
2061
2066
  border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
2062
2067
  borderRadius: reactComponents.tokens.borderRadiusMedium,
2063
2068
  backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2064
- fontSize: reactComponents.tokens.fontSizeBase300,
2069
+ // fontSize: tokens.fontSizeBase300,
2065
2070
  "&:focus": {
2066
2071
  outline: `2px solid ${reactComponents.tokens.colorBrandStroke1}`
2067
2072
  }
@@ -2129,7 +2134,7 @@ var useStyles7 = reactComponents.makeStyles({
2129
2134
  borderRadius: reactComponents.tokens.borderRadiusMedium,
2130
2135
  padding: reactComponents.tokens.spacingVerticalS,
2131
2136
  paddingLeft: "48px",
2132
- fontSize: reactComponents.tokens.fontSizeBase300,
2137
+ // fontSize: tokens.fontSizeBase300,
2133
2138
  fontFamily: reactComponents.tokens.fontFamilyBase,
2134
2139
  backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2135
2140
  color: reactComponents.tokens.colorNeutralForeground1,
@@ -2138,7 +2143,7 @@ var useStyles7 = reactComponents.makeStyles({
2138
2143
  minHeight: "40px"
2139
2144
  },
2140
2145
  "& .react-tel-input .form-control::placeholder": {
2141
- fontSize: reactComponents.tokens.fontSizeBase400
2146
+ // fontSize: tokens.fontSizeBase400,
2142
2147
  },
2143
2148
  "& .react-tel-input .form-control:hover": {
2144
2149
  border: `1px solid ${reactComponents.tokens.colorNeutralStroke1Hover}`
@@ -2193,7 +2198,7 @@ var useStyles7 = reactComponents.makeStyles({
2193
2198
  borderRadius: reactComponents.tokens.borderRadiusCircular,
2194
2199
  cursor: "pointer",
2195
2200
  transition: "all 0.2s ease",
2196
- fontSize: reactComponents.tokens.fontSizeBase300,
2201
+ // fontSize: tokens.fontSizeBase300,
2197
2202
  color: reactComponents.tokens.colorNeutralForeground2
2198
2203
  },
2199
2204
  "&:hover .fui-Radio__label": {
@@ -2223,6 +2228,15 @@ var useStyles7 = reactComponents.makeStyles({
2223
2228
  backgroundColor: reactComponents.tokens.colorNeutralBackground4,
2224
2229
  border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`
2225
2230
  }
2231
+ },
2232
+ labelSmall: {
2233
+ fontSize: reactComponents.tokens.fontSizeBase100
2234
+ },
2235
+ labelMedium: {
2236
+ fontSize: reactComponents.tokens.fontSizeBase200
2237
+ },
2238
+ labelLarge: {
2239
+ fontSize: reactComponents.tokens.fontSizeBase300
2226
2240
  }
2227
2241
  });
2228
2242
  var detectIdentityType = (value) => {
@@ -2263,7 +2277,7 @@ var InputDynamic = ({
2263
2277
  helperText,
2264
2278
  className,
2265
2279
  layout,
2266
- size,
2280
+ size = "large",
2267
2281
  onClick,
2268
2282
  style,
2269
2283
  defaultCountry = "ID",
@@ -2300,7 +2314,7 @@ var InputDynamic = ({
2300
2314
  const baseStyles = {
2301
2315
  ...provided,
2302
2316
  minHeight: "40px",
2303
- fontSize: reactComponents.tokens.fontSizeBase400,
2317
+ // fontSize: tokens.fontSizeBase400,
2304
2318
  transition: "all 0.2s ease"
2305
2319
  };
2306
2320
  if (currentAppearance === "outline") {
@@ -2397,19 +2411,19 @@ var InputDynamic = ({
2397
2411
  }),
2398
2412
  option: (provided, state) => ({
2399
2413
  ...provided,
2400
- fontSize: reactComponents.tokens.fontSizeBase300,
2414
+ // fontSize: tokens.fontSizeBase300,
2401
2415
  color: state.isSelected ? reactComponents.tokens.colorNeutralForegroundOnBrand : reactComponents.tokens.colorNeutralForeground1,
2402
2416
  backgroundColor: state.isSelected ? reactComponents.tokens.colorBrandBackground : state.isFocused ? reactComponents.tokens.colorNeutralBackground1Hover : "transparent"
2403
2417
  }),
2404
2418
  placeholder: (provided) => ({
2405
2419
  ...provided,
2406
- color: reactComponents.tokens.colorNeutralForeground3,
2407
- fontSize: reactComponents.tokens.fontSizeBase400
2420
+ color: reactComponents.tokens.colorNeutralForeground3
2421
+ // fontSize: tokens.fontSizeBase400,
2408
2422
  }),
2409
2423
  singleValue: (provided) => ({
2410
2424
  ...provided,
2411
- color: reactComponents.tokens.colorNeutralForeground1,
2412
- fontSize: reactComponents.tokens.fontSizeBase400
2425
+ color: reactComponents.tokens.colorNeutralForeground1
2426
+ // fontSize: tokens.fontSizeBase400,
2413
2427
  })
2414
2428
  };
2415
2429
  };
@@ -3202,7 +3216,14 @@ var InputDynamic = ({
3202
3216
  validationMessage: error?.message,
3203
3217
  validationState: error ? "error" : "none",
3204
3218
  children: [
3205
- label && type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { required, children: label }),
3219
+ label && type !== "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
3220
+ reactComponents.Label,
3221
+ {
3222
+ required,
3223
+ className: size === "small" ? styles.labelSmall : size === "medium" ? styles.labelMedium : styles.labelLarge,
3224
+ children: label
3225
+ }
3226
+ ),
3206
3227
  renderInput(field, error?.message),
3207
3228
  helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(
3208
3229
  reactComponents.Text,
@@ -3560,7 +3581,7 @@ var CardTicketSearch = ({
3560
3581
  }
3561
3582
  ),
3562
3583
  appearance: "filled-lighter",
3563
- size: "medium",
3584
+ size: "large",
3564
3585
  placeholder: labels.placeholderPort,
3565
3586
  onClick: onFromClick,
3566
3587
  onChange: handleFromChange,
@@ -3630,7 +3651,7 @@ var CardTicketSearch = ({
3630
3651
  ),
3631
3652
  disabled: toDisabled,
3632
3653
  appearance: "filled-lighter",
3633
- size: "medium",
3654
+ size: "large",
3634
3655
  placeholder: labels.placeholderDestinationPort,
3635
3656
  onClick: onToClick,
3636
3657
  validationRules: {
@@ -3668,7 +3689,7 @@ var CardTicketSearch = ({
3668
3689
  }
3669
3690
  ),
3670
3691
  appearance: "filled-lighter",
3671
- size: "medium",
3692
+ size: "large",
3672
3693
  placeholder: labels.placeholderDepartureDate,
3673
3694
  onClick: onStartDateClick,
3674
3695
  required: true,
@@ -3698,7 +3719,7 @@ var CardTicketSearch = ({
3698
3719
  control,
3699
3720
  type: "switch",
3700
3721
  disabled: roundTripDisabled,
3701
- size: "medium"
3722
+ size: "large"
3702
3723
  }
3703
3724
  )
3704
3725
  }
@@ -3728,7 +3749,7 @@ var CardTicketSearch = ({
3728
3749
  }
3729
3750
  ),
3730
3751
  appearance: "filled-lighter",
3731
- size: "medium",
3752
+ size: "large",
3732
3753
  placeholder: labels.placeholderReturnDate,
3733
3754
  onClick: onEndDateClick,
3734
3755
  disabled: endDateDisabled,
@@ -3801,7 +3822,7 @@ var CardTicketSearch = ({
3801
3822
  }
3802
3823
  ),
3803
3824
  appearance: "filled-lighter",
3804
- size: "medium",
3825
+ size: "large",
3805
3826
  placeholder: labels.placeholderTypeClass,
3806
3827
  onClick: onServiceClassClick,
3807
3828
  required: true,
@@ -3835,7 +3856,7 @@ var CardTicketSearch = ({
3835
3856
  }
3836
3857
  ),
3837
3858
  appearance: "filled-lighter",
3838
- size: "medium",
3859
+ size: "large",
3839
3860
  placeholder: labels.placeholderTypeService,
3840
3861
  onClick: onTypeOfServiceClick,
3841
3862
  required: true,
@@ -3870,7 +3891,7 @@ var CardTicketSearch = ({
3870
3891
  }
3871
3892
  ),
3872
3893
  appearance: "filled-lighter",
3873
- size: "medium",
3894
+ size: "large",
3874
3895
  placeholder: labels.placeholderPassenger,
3875
3896
  onClick: onPassengerClick
3876
3897
  }
@@ -3930,8 +3951,9 @@ var useStyles9 = reactComponents.makeStyles({
3930
3951
  borderRadius: "32px",
3931
3952
  // borderBottomLeftRadius: '0',
3932
3953
  // borderBottomRightRadius: '0',
3933
- padding: "3rem",
3934
- paddingBottom: "8rem",
3954
+ padding: "1rem",
3955
+ paddingTop: "2rem",
3956
+ paddingBottom: "7rem",
3935
3957
  position: "relative",
3936
3958
  overflow: "visible",
3937
3959
  // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
@@ -4026,6 +4048,47 @@ var CardTicketSearchSummary = ({
4026
4048
  return { count: 11, spacing: 136, size: 100, height: 90 };
4027
4049
  };
4028
4050
  const circularConfig = getCircularConfig();
4051
+ const RenderField = ({ label, value, icon }) => {
4052
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4053
+ "div",
4054
+ {
4055
+ style: {
4056
+ display: "flex",
4057
+ flexDirection: "column",
4058
+ gap: "10px"
4059
+ },
4060
+ children: [
4061
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: label }),
4062
+ /* @__PURE__ */ jsxRuntime.jsxs(
4063
+ "div",
4064
+ {
4065
+ style: {
4066
+ display: "flex",
4067
+ alignItems: "center",
4068
+ gap: "5px"
4069
+ },
4070
+ children: [
4071
+ /* @__PURE__ */ jsxRuntime.jsx(
4072
+ react.Icon,
4073
+ {
4074
+ icon,
4075
+ color: reactComponents.tokens.colorNeutralForeground1,
4076
+ style: { height: "20px", width: "20px" }
4077
+ }
4078
+ ),
4079
+ /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { style: {
4080
+ display: "-webkit-box",
4081
+ WebkitLineClamp: 1,
4082
+ WebkitBoxOrient: "vertical",
4083
+ overflow: "hidden"
4084
+ }, children: value })
4085
+ ]
4086
+ }
4087
+ )
4088
+ ]
4089
+ }
4090
+ );
4091
+ };
4029
4092
  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.cardSearchTicket, children: [
4030
4093
  /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
4031
4094
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4036,10 +4099,10 @@ var CardTicketSearchSummary = ({
4036
4099
  md: 12,
4037
4100
  lg: 12,
4038
4101
  xl: 12,
4039
- xxl: 5,
4040
- xxxl: 5,
4102
+ xxl: 4,
4103
+ xxxl: 4,
4041
4104
  className: styles.paddingResponsive,
4042
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { padding: "12px" }, children: [
4105
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", alignItems: "center" }, children: [
4043
4106
  /* @__PURE__ */ jsxRuntime.jsx(
4044
4107
  reactGridSystem.Col,
4045
4108
  {
@@ -4052,28 +4115,11 @@ var CardTicketSearchSummary = ({
4052
4115
  xxxl: 5,
4053
4116
  className: styles.paddingResponsive,
4054
4117
  children: /* @__PURE__ */ jsxRuntime.jsx(
4055
- reactComponents.Field,
4118
+ RenderField,
4056
4119
  {
4057
4120
  label: mergedLabels.originHarbor,
4058
- className: styles.field,
4059
- children: /* @__PURE__ */ jsxRuntime.jsx(
4060
- reactComponents.Input,
4061
- {
4062
- name: "from",
4063
- disabled: true,
4064
- type: "text",
4065
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4066
- react.Icon,
4067
- {
4068
- icon: "fluent:vehicle-ship-16-filled",
4069
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4070
- }
4071
- ),
4072
- value: originHarbor,
4073
- appearance: "outline",
4074
- size: "medium"
4075
- }
4076
- )
4121
+ value: originHarbor,
4122
+ icon: "fluent:vehicle-ship-24-filled"
4077
4123
  }
4078
4124
  )
4079
4125
  }
@@ -4120,28 +4166,11 @@ var CardTicketSearchSummary = ({
4120
4166
  xxxl: 6,
4121
4167
  className: styles.paddingResponsive,
4122
4168
  children: /* @__PURE__ */ jsxRuntime.jsx(
4123
- reactComponents.Field,
4169
+ RenderField,
4124
4170
  {
4125
4171
  label: mergedLabels.destinationHarbor,
4126
- className: styles.field,
4127
- children: /* @__PURE__ */ jsxRuntime.jsx(
4128
- reactComponents.Input,
4129
- {
4130
- name: "to",
4131
- type: "text",
4132
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4133
- react.Icon,
4134
- {
4135
- icon: "fluent:location-24-filled",
4136
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4137
- }
4138
- ),
4139
- disabled: true,
4140
- appearance: "outline",
4141
- size: "medium",
4142
- value: destinationHarbor
4143
- }
4144
- )
4172
+ value: destinationHarbor,
4173
+ icon: "fluent:location-24-filled"
4145
4174
  }
4146
4175
  )
4147
4176
  }
@@ -4157,8 +4186,8 @@ var CardTicketSearchSummary = ({
4157
4186
  md: 12,
4158
4187
  lg: 12,
4159
4188
  xl: 12,
4160
- xxl: 5,
4161
- xxxl: 5,
4189
+ xxl: 6,
4190
+ xxxl: 6,
4162
4191
  className: styles.paddingResponsive,
4163
4192
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", alignItems: "center" }, children: [
4164
4193
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4172,24 +4201,14 @@ var CardTicketSearchSummary = ({
4172
4201
  xxl: 3,
4173
4202
  xxxl: 3,
4174
4203
  className: styles.paddingResponsive,
4175
- children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
4176
- reactComponents.Input,
4204
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4205
+ RenderField,
4177
4206
  {
4178
- name: "startDate",
4179
- type: "text",
4180
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4181
- react.Icon,
4182
- {
4183
- icon: "fluent:calendar-24-regular",
4184
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4185
- }
4186
- ),
4187
- disabled: true,
4188
- appearance: "outline",
4189
- size: "medium",
4190
- value: departureDate
4207
+ label: mergedLabels.departureDate,
4208
+ value: departureDate,
4209
+ icon: "fluent:calendar-24-regular"
4191
4210
  }
4192
- ) })
4211
+ )
4193
4212
  }
4194
4213
  ),
4195
4214
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4203,24 +4222,14 @@ var CardTicketSearchSummary = ({
4203
4222
  xxl: 3,
4204
4223
  xxxl: 3,
4205
4224
  className: styles.paddingResponsive,
4206
- children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
4207
- reactComponents.Input,
4225
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4226
+ RenderField,
4208
4227
  {
4209
- name: "serviceClass",
4210
- type: "text",
4211
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4212
- react.Icon,
4213
- {
4214
- icon: "fluent:ribbon-star-24-regular",
4215
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4216
- }
4217
- ),
4218
- disabled: true,
4219
- appearance: "outline",
4220
- size: "medium",
4221
- value: serviceClass
4228
+ label: mergedLabels.serviceClass,
4229
+ value: serviceClass,
4230
+ icon: "fluent:ribbon-star-24-regular"
4222
4231
  }
4223
- ) })
4232
+ )
4224
4233
  }
4225
4234
  ),
4226
4235
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4234,23 +4243,14 @@ var CardTicketSearchSummary = ({
4234
4243
  xxl: 3,
4235
4244
  xxxl: 3,
4236
4245
  className: styles.paddingResponsive,
4237
- children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
4238
- reactComponents.Input,
4246
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4247
+ RenderField,
4239
4248
  {
4240
- type: "text",
4241
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4242
- react.Icon,
4243
- {
4244
- icon: "fluent:vehicle-car-24-regular",
4245
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4246
- }
4247
- ),
4248
- disabled: true,
4249
- appearance: "outline",
4250
- size: "medium",
4251
- value: typeOfService
4249
+ label: mergedLabels.typeOfService,
4250
+ value: typeOfService,
4251
+ icon: "fluent:vehicle-car-24-regular"
4252
4252
  }
4253
- ) })
4253
+ )
4254
4254
  }
4255
4255
  ),
4256
4256
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4264,24 +4264,14 @@ var CardTicketSearchSummary = ({
4264
4264
  xxl: 3,
4265
4265
  xxxl: 3,
4266
4266
  className: styles.paddingResponsive,
4267
- children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { className: styles.field, children: /* @__PURE__ */ jsxRuntime.jsx(
4268
- reactComponents.Input,
4267
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4268
+ RenderField,
4269
4269
  {
4270
- name: "passenger",
4271
- type: "text",
4272
- contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
4273
- react.Icon,
4274
- {
4275
- icon: "fluent:people-24-regular",
4276
- color: reactComponents.tokens.colorNeutralForegroundDisabled
4277
- }
4278
- ),
4279
- disabled: true,
4280
- appearance: "outline",
4281
- size: "medium",
4282
- value: totalPassengers
4270
+ label: mergedLabels.totalPassengers,
4271
+ value: totalPassengers,
4272
+ icon: "fluent:people-24-regular"
4283
4273
  }
4284
- ) })
4274
+ )
4285
4275
  }
4286
4276
  )
4287
4277
  ] }) })
@@ -5102,10 +5092,10 @@ var ModalService = ({
5102
5092
  React5.useEffect(() => {
5103
5093
  if (open) {
5104
5094
  if (selectedServiceIds && selectedServiceIds.length > 0) {
5105
- const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
5095
+ const validIds = services.filter((s) => selectedServiceIds.includes(s.serviceTypeId)).map((s) => s.serviceTypeId);
5106
5096
  setSelectedServices(validIds);
5107
5097
  } else {
5108
- setSelectedServices(services.map((s) => s.id));
5098
+ setSelectedServices(services.map((s) => s.serviceTypeId));
5109
5099
  }
5110
5100
  }
5111
5101
  }, [open, services, selectedServiceIds]);
@@ -5125,12 +5115,12 @@ var ModalService = ({
5125
5115
  if (selectedServices.length === services.length) {
5126
5116
  setSelectedServices([]);
5127
5117
  } else {
5128
- setSelectedServices(services.map((s) => s.id));
5118
+ setSelectedServices(services.map((s) => s.serviceTypeId));
5129
5119
  }
5130
5120
  };
5131
5121
  const handleSave = () => {
5132
5122
  const selectedServiceItems = services.filter(
5133
- (s) => selectedServices.includes(s.id)
5123
+ (s) => selectedServices.includes(s.serviceTypeId)
5134
5124
  );
5135
5125
  onSave(selectedServiceItems);
5136
5126
  };
@@ -5167,7 +5157,7 @@ var ModalService = ({
5167
5157
  "div",
5168
5158
  {
5169
5159
  className: styles.serviceItem,
5170
- onClick: () => handleToggleService(service.id),
5160
+ onClick: () => handleToggleService(service.serviceTypeId),
5171
5161
  children: [
5172
5162
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceContent, children: [
5173
5163
  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.serviceName, children: service.serviceTypeName }),
@@ -5177,13 +5167,13 @@ var ModalService = ({
5177
5167
  /* @__PURE__ */ jsxRuntime.jsx(
5178
5168
  reactComponents.Checkbox,
5179
5169
  {
5180
- checked: selectedServices.includes(service.id),
5181
- onChange: () => handleToggleService(service.id)
5170
+ checked: selectedServices.includes(service.serviceTypeId),
5171
+ onChange: () => handleToggleService(service.serviceTypeId)
5182
5172
  }
5183
5173
  )
5184
5174
  ]
5185
5175
  },
5186
- service.id
5176
+ service.serviceTypeId
5187
5177
  ))
5188
5178
  ] }),
5189
5179
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6988,7 +6978,7 @@ var ModalSearchTicket = ({
6988
6978
  }
6989
6979
  ),
6990
6980
  appearance: "filled-lighter",
6991
- size: "medium",
6981
+ size: "large",
6992
6982
  placeholder: mergedLabels.fromPlaceholder,
6993
6983
  onClick: onSelectOrigin,
6994
6984
  onChange: handleFromChange,
@@ -7057,7 +7047,7 @@ var ModalSearchTicket = ({
7057
7047
  ),
7058
7048
  disabled: toDisabled,
7059
7049
  appearance: "filled-lighter",
7060
- size: "medium",
7050
+ size: "large",
7061
7051
  placeholder: mergedLabels.toPlaceholder,
7062
7052
  onClick: onSelectDestination,
7063
7053
  validationRules: {
@@ -7095,7 +7085,7 @@ var ModalSearchTicket = ({
7095
7085
  }
7096
7086
  ),
7097
7087
  appearance: "filled-lighter",
7098
- size: "medium",
7088
+ size: "large",
7099
7089
  placeholder: mergedLabels.departureDatePlaceholder,
7100
7090
  onClick: onSelectDepartureDate,
7101
7091
  required: true,
@@ -7125,7 +7115,7 @@ var ModalSearchTicket = ({
7125
7115
  control,
7126
7116
  type: "switch",
7127
7117
  disabled: roundTripDisabled,
7128
- size: "medium"
7118
+ size: "large"
7129
7119
  }
7130
7120
  )
7131
7121
  }
@@ -7155,7 +7145,7 @@ var ModalSearchTicket = ({
7155
7145
  }
7156
7146
  ),
7157
7147
  appearance: "filled-lighter",
7158
- size: "medium",
7148
+ size: "large",
7159
7149
  placeholder: mergedLabels.returnDatePlaceholder,
7160
7150
  onClick: onSelectReturnDate,
7161
7151
  disabled: endDateDisabled,
@@ -7223,7 +7213,7 @@ var ModalSearchTicket = ({
7223
7213
  }
7224
7214
  ),
7225
7215
  appearance: "filled-lighter",
7226
- size: "medium",
7216
+ size: "large",
7227
7217
  placeholder: mergedLabels.serviceClassPlaceholder,
7228
7218
  onClick: onSelectServiceClass,
7229
7219
  required: true,
@@ -7257,7 +7247,7 @@ var ModalSearchTicket = ({
7257
7247
  }
7258
7248
  ),
7259
7249
  appearance: "filled-lighter",
7260
- size: "medium",
7250
+ size: "large",
7261
7251
  placeholder: mergedLabels.typeOfServicePlaceholder,
7262
7252
  onClick: onSelectTypeOfService,
7263
7253
  required: true,
@@ -7292,7 +7282,7 @@ var ModalSearchTicket = ({
7292
7282
  }
7293
7283
  ),
7294
7284
  appearance: "filled-lighter",
7295
- size: "medium",
7285
+ size: "large",
7296
7286
  placeholder: mergedLabels.passengerPlaceholder,
7297
7287
  onClick: onSelectPassenger
7298
7288
  }
@@ -8804,7 +8794,8 @@ var CardVehicleOwnerForm = ({
8804
8794
  name: `looseCargoOwners.${index}.originCity`,
8805
8795
  placeholder: mergedLabels.selectPlaceholder,
8806
8796
  type: "select",
8807
- options: cityOptions
8797
+ options: cityOptions,
8798
+ size: "large"
8808
8799
  }
8809
8800
  )
8810
8801
  ] }),
@@ -8817,7 +8808,8 @@ var CardVehicleOwnerForm = ({
8817
8808
  name: `looseCargoOwners.${index}.destinationCity`,
8818
8809
  placeholder: mergedLabels.selectPlaceholder,
8819
8810
  type: "select",
8820
- options: cityOptions
8811
+ options: cityOptions,
8812
+ size: "large"
8821
8813
  }
8822
8814
  )
8823
8815
  ] })
@@ -9076,7 +9068,8 @@ var CardVehicleOwnerForm = ({
9076
9068
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
9077
9069
  placeholder: mergedLabels.selectPlaceholder,
9078
9070
  type: "select",
9079
- options: []
9071
+ options: [],
9072
+ size: "large"
9080
9073
  }
9081
9074
  ),
9082
9075
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9124,7 +9117,8 @@ var CardVehicleOwnerForm = ({
9124
9117
  value: "unit",
9125
9118
  label: mergedLabels.cargoTypeOptions.unit
9126
9119
  }
9127
- ]
9120
+ ],
9121
+ size: "large"
9128
9122
  }
9129
9123
  ),
9130
9124
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -9328,7 +9322,8 @@ var CardVehicleOwnerForm = ({
9328
9322
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
9329
9323
  placeholder: mergedLabels.selectPlaceholder,
9330
9324
  type: "select",
9331
- options: []
9325
+ options: [],
9326
+ size: "large"
9332
9327
  }
9333
9328
  ),
9334
9329
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -9355,7 +9350,8 @@ var CardVehicleOwnerForm = ({
9355
9350
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
9356
9351
  placeholder: mergedLabels.selectPlaceholder,
9357
9352
  type: "select",
9358
- options: []
9353
+ options: [],
9354
+ size: "large"
9359
9355
  }
9360
9356
  ),
9361
9357
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11909,7 +11905,8 @@ var FileUpload = React5__default.default.forwardRef(
11909
11905
  placeholder: placeholderProp,
11910
11906
  disabled = false,
11911
11907
  language = "id",
11912
- labels: customLabels
11908
+ labels: customLabels,
11909
+ pdfIcon
11913
11910
  }, ref) => {
11914
11911
  const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
11915
11912
  const styles = uploadStyles();
@@ -12056,7 +12053,24 @@ var FileUpload = React5__default.default.forwardRef(
12056
12053
  alt: "preview",
12057
12054
  className: styles.filePreviewImage
12058
12055
  }
12059
- ) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
12056
+ ) : pdfIcon ? /* @__PURE__ */ jsxRuntime.jsx(
12057
+ "img",
12058
+ {
12059
+ src: pdfIcon,
12060
+ alt: "PDF Icon",
12061
+ width: 32,
12062
+ height: 32,
12063
+ style: { flexShrink: 0 }
12064
+ }
12065
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12066
+ react.Icon,
12067
+ {
12068
+ icon: "fluent:document-pdf-32-regular",
12069
+ width: 32,
12070
+ height: 32,
12071
+ style: { flexShrink: 0, color: brandColors2[80] }
12072
+ }
12073
+ )
12060
12074
  }
12061
12075
  ),
12062
12076
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.disabledFileInfo, children: [
@@ -12209,7 +12223,24 @@ var FileUpload = React5__default.default.forwardRef(
12209
12223
  alt: "preview",
12210
12224
  className: styles.filePreviewImage
12211
12225
  }
12212
- ) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
12226
+ ) : pdfIcon ? /* @__PURE__ */ jsxRuntime.jsx(
12227
+ "img",
12228
+ {
12229
+ src: pdfIcon,
12230
+ alt: "PDF Icon",
12231
+ width: 32,
12232
+ height: 32,
12233
+ style: { flexShrink: 0 }
12234
+ }
12235
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12236
+ react.Icon,
12237
+ {
12238
+ icon: "fluent:document-pdf-32-regular",
12239
+ width: 32,
12240
+ height: 32,
12241
+ style: { flexShrink: 0, color: brandColors2[80] }
12242
+ }
12243
+ )
12213
12244
  }
12214
12245
  ),
12215
12246
  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(