@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.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Image, Caption1Strong, Caption2, Button, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Body1, Body1Strong, Caption1, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Title1, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
1
+ import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Body1, Body1Strong, Caption1, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
4
4
  import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
@@ -723,8 +723,13 @@ var CardPromo = ({
723
723
  role: "presentation",
724
724
  alt: displayImageAlt,
725
725
  onError: (e) => {
726
- e.currentTarget.src = "/assets/images/helper/error.svg";
727
- e.currentTarget.style.objectFit = "fill";
726
+ const target = e.currentTarget;
727
+ target.src = "/assets/images/helper/error.svg";
728
+ target.style.objectFit = "fill";
729
+ target.style.scale = "0.7";
730
+ if (target.parentElement) {
731
+ target.parentElement.style.backgroundColor = tokens.colorNeutralStroke1;
732
+ }
728
733
  }
729
734
  }
730
735
  ) }),
@@ -2032,12 +2037,12 @@ var useStyles7 = makeStyles({
2032
2037
  marginBottom: tokens.spacingVerticalM
2033
2038
  },
2034
2039
  errorText: {
2035
- color: tokens.colorPaletteRedBackground1,
2036
- fontSize: tokens.fontSizeBase200
2040
+ color: tokens.colorPaletteRedBackground1
2041
+ // fontSize: tokens.fontSizeBase200,
2037
2042
  },
2038
2043
  helperText: {
2039
- color: tokens.colorNeutralForeground2,
2040
- fontSize: tokens.fontSizeBase200
2044
+ color: tokens.colorNeutralForeground2
2045
+ // fontSize: tokens.fontSizeBase200,
2041
2046
  },
2042
2047
  disabledFilledLighter: {
2043
2048
  backgroundColor: tokens.colorNeutralBackground4,
@@ -2052,7 +2057,7 @@ var useStyles7 = makeStyles({
2052
2057
  border: `1px solid ${tokens.colorNeutralStroke1}`,
2053
2058
  borderRadius: tokens.borderRadiusMedium,
2054
2059
  backgroundColor: tokens.colorNeutralBackground1,
2055
- fontSize: tokens.fontSizeBase300,
2060
+ // fontSize: tokens.fontSizeBase300,
2056
2061
  "&:focus": {
2057
2062
  outline: `2px solid ${tokens.colorBrandStroke1}`
2058
2063
  }
@@ -2120,7 +2125,7 @@ var useStyles7 = makeStyles({
2120
2125
  borderRadius: tokens.borderRadiusMedium,
2121
2126
  padding: tokens.spacingVerticalS,
2122
2127
  paddingLeft: "48px",
2123
- fontSize: tokens.fontSizeBase300,
2128
+ // fontSize: tokens.fontSizeBase300,
2124
2129
  fontFamily: tokens.fontFamilyBase,
2125
2130
  backgroundColor: tokens.colorNeutralBackground1,
2126
2131
  color: tokens.colorNeutralForeground1,
@@ -2129,7 +2134,7 @@ var useStyles7 = makeStyles({
2129
2134
  minHeight: "40px"
2130
2135
  },
2131
2136
  "& .react-tel-input .form-control::placeholder": {
2132
- fontSize: tokens.fontSizeBase400
2137
+ // fontSize: tokens.fontSizeBase400,
2133
2138
  },
2134
2139
  "& .react-tel-input .form-control:hover": {
2135
2140
  border: `1px solid ${tokens.colorNeutralStroke1Hover}`
@@ -2184,7 +2189,7 @@ var useStyles7 = makeStyles({
2184
2189
  borderRadius: tokens.borderRadiusCircular,
2185
2190
  cursor: "pointer",
2186
2191
  transition: "all 0.2s ease",
2187
- fontSize: tokens.fontSizeBase300,
2192
+ // fontSize: tokens.fontSizeBase300,
2188
2193
  color: tokens.colorNeutralForeground2
2189
2194
  },
2190
2195
  "&:hover .fui-Radio__label": {
@@ -2214,6 +2219,15 @@ var useStyles7 = makeStyles({
2214
2219
  backgroundColor: tokens.colorNeutralBackground4,
2215
2220
  border: `1px solid ${tokens.colorNeutralStroke1}`
2216
2221
  }
2222
+ },
2223
+ labelSmall: {
2224
+ fontSize: tokens.fontSizeBase100
2225
+ },
2226
+ labelMedium: {
2227
+ fontSize: tokens.fontSizeBase200
2228
+ },
2229
+ labelLarge: {
2230
+ fontSize: tokens.fontSizeBase300
2217
2231
  }
2218
2232
  });
2219
2233
  var detectIdentityType = (value) => {
@@ -2254,7 +2268,7 @@ var InputDynamic = ({
2254
2268
  helperText,
2255
2269
  className,
2256
2270
  layout,
2257
- size,
2271
+ size = "large",
2258
2272
  onClick,
2259
2273
  style,
2260
2274
  defaultCountry = "ID",
@@ -2291,7 +2305,7 @@ var InputDynamic = ({
2291
2305
  const baseStyles = {
2292
2306
  ...provided,
2293
2307
  minHeight: "40px",
2294
- fontSize: tokens.fontSizeBase400,
2308
+ // fontSize: tokens.fontSizeBase400,
2295
2309
  transition: "all 0.2s ease"
2296
2310
  };
2297
2311
  if (currentAppearance === "outline") {
@@ -2388,19 +2402,19 @@ var InputDynamic = ({
2388
2402
  }),
2389
2403
  option: (provided, state) => ({
2390
2404
  ...provided,
2391
- fontSize: tokens.fontSizeBase300,
2405
+ // fontSize: tokens.fontSizeBase300,
2392
2406
  color: state.isSelected ? tokens.colorNeutralForegroundOnBrand : tokens.colorNeutralForeground1,
2393
2407
  backgroundColor: state.isSelected ? tokens.colorBrandBackground : state.isFocused ? tokens.colorNeutralBackground1Hover : "transparent"
2394
2408
  }),
2395
2409
  placeholder: (provided) => ({
2396
2410
  ...provided,
2397
- color: tokens.colorNeutralForeground3,
2398
- fontSize: tokens.fontSizeBase400
2411
+ color: tokens.colorNeutralForeground3
2412
+ // fontSize: tokens.fontSizeBase400,
2399
2413
  }),
2400
2414
  singleValue: (provided) => ({
2401
2415
  ...provided,
2402
- color: tokens.colorNeutralForeground1,
2403
- fontSize: tokens.fontSizeBase400
2416
+ color: tokens.colorNeutralForeground1
2417
+ // fontSize: tokens.fontSizeBase400,
2404
2418
  })
2405
2419
  };
2406
2420
  };
@@ -3193,7 +3207,14 @@ var InputDynamic = ({
3193
3207
  validationMessage: error?.message,
3194
3208
  validationState: error ? "error" : "none",
3195
3209
  children: [
3196
- label && type !== "checkbox" && /* @__PURE__ */ jsx(Label, { required, children: label }),
3210
+ label && type !== "checkbox" && /* @__PURE__ */ jsx(
3211
+ Label,
3212
+ {
3213
+ required,
3214
+ className: size === "small" ? styles.labelSmall : size === "medium" ? styles.labelMedium : styles.labelLarge,
3215
+ children: label
3216
+ }
3217
+ ),
3197
3218
  renderInput(field, error?.message),
3198
3219
  helperText && !error && /* @__PURE__ */ jsx(
3199
3220
  Text,
@@ -3551,7 +3572,7 @@ var CardTicketSearch = ({
3551
3572
  }
3552
3573
  ),
3553
3574
  appearance: "filled-lighter",
3554
- size: "medium",
3575
+ size: "large",
3555
3576
  placeholder: labels.placeholderPort,
3556
3577
  onClick: onFromClick,
3557
3578
  onChange: handleFromChange,
@@ -3621,7 +3642,7 @@ var CardTicketSearch = ({
3621
3642
  ),
3622
3643
  disabled: toDisabled,
3623
3644
  appearance: "filled-lighter",
3624
- size: "medium",
3645
+ size: "large",
3625
3646
  placeholder: labels.placeholderDestinationPort,
3626
3647
  onClick: onToClick,
3627
3648
  validationRules: {
@@ -3659,7 +3680,7 @@ var CardTicketSearch = ({
3659
3680
  }
3660
3681
  ),
3661
3682
  appearance: "filled-lighter",
3662
- size: "medium",
3683
+ size: "large",
3663
3684
  placeholder: labels.placeholderDepartureDate,
3664
3685
  onClick: onStartDateClick,
3665
3686
  required: true,
@@ -3689,7 +3710,7 @@ var CardTicketSearch = ({
3689
3710
  control,
3690
3711
  type: "switch",
3691
3712
  disabled: roundTripDisabled,
3692
- size: "medium"
3713
+ size: "large"
3693
3714
  }
3694
3715
  )
3695
3716
  }
@@ -3719,7 +3740,7 @@ var CardTicketSearch = ({
3719
3740
  }
3720
3741
  ),
3721
3742
  appearance: "filled-lighter",
3722
- size: "medium",
3743
+ size: "large",
3723
3744
  placeholder: labels.placeholderReturnDate,
3724
3745
  onClick: onEndDateClick,
3725
3746
  disabled: endDateDisabled,
@@ -3792,7 +3813,7 @@ var CardTicketSearch = ({
3792
3813
  }
3793
3814
  ),
3794
3815
  appearance: "filled-lighter",
3795
- size: "medium",
3816
+ size: "large",
3796
3817
  placeholder: labels.placeholderTypeClass,
3797
3818
  onClick: onServiceClassClick,
3798
3819
  required: true,
@@ -3826,7 +3847,7 @@ var CardTicketSearch = ({
3826
3847
  }
3827
3848
  ),
3828
3849
  appearance: "filled-lighter",
3829
- size: "medium",
3850
+ size: "large",
3830
3851
  placeholder: labels.placeholderTypeService,
3831
3852
  onClick: onTypeOfServiceClick,
3832
3853
  required: true,
@@ -3861,7 +3882,7 @@ var CardTicketSearch = ({
3861
3882
  }
3862
3883
  ),
3863
3884
  appearance: "filled-lighter",
3864
- size: "medium",
3885
+ size: "large",
3865
3886
  placeholder: labels.placeholderPassenger,
3866
3887
  onClick: onPassengerClick
3867
3888
  }
@@ -3921,8 +3942,9 @@ var useStyles9 = makeStyles({
3921
3942
  borderRadius: "32px",
3922
3943
  // borderBottomLeftRadius: '0',
3923
3944
  // borderBottomRightRadius: '0',
3924
- padding: "3rem",
3925
- paddingBottom: "8rem",
3945
+ padding: "1rem",
3946
+ paddingTop: "2rem",
3947
+ paddingBottom: "7rem",
3926
3948
  position: "relative",
3927
3949
  overflow: "visible",
3928
3950
  // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
@@ -4017,6 +4039,47 @@ var CardTicketSearchSummary = ({
4017
4039
  return { count: 11, spacing: 136, size: 100, height: 90 };
4018
4040
  };
4019
4041
  const circularConfig = getCircularConfig();
4042
+ const RenderField = ({ label, value, icon }) => {
4043
+ return /* @__PURE__ */ jsxs(
4044
+ "div",
4045
+ {
4046
+ style: {
4047
+ display: "flex",
4048
+ flexDirection: "column",
4049
+ gap: "10px"
4050
+ },
4051
+ children: [
4052
+ /* @__PURE__ */ jsx(Caption1, { children: label }),
4053
+ /* @__PURE__ */ jsxs(
4054
+ "div",
4055
+ {
4056
+ style: {
4057
+ display: "flex",
4058
+ alignItems: "center",
4059
+ gap: "5px"
4060
+ },
4061
+ children: [
4062
+ /* @__PURE__ */ jsx(
4063
+ Icon,
4064
+ {
4065
+ icon,
4066
+ color: tokens.colorNeutralForeground1,
4067
+ style: { height: "20px", width: "20px" }
4068
+ }
4069
+ ),
4070
+ /* @__PURE__ */ jsx(Body1Strong, { style: {
4071
+ display: "-webkit-box",
4072
+ WebkitLineClamp: 1,
4073
+ WebkitBoxOrient: "vertical",
4074
+ overflow: "hidden"
4075
+ }, children: value })
4076
+ ]
4077
+ }
4078
+ )
4079
+ ]
4080
+ }
4081
+ );
4082
+ };
4020
4083
  return /* @__PURE__ */ jsxs(Card, { className: styles.cardSearchTicket, children: [
4021
4084
  /* @__PURE__ */ jsxs(Row, { children: [
4022
4085
  /* @__PURE__ */ jsx(
@@ -4027,10 +4090,10 @@ var CardTicketSearchSummary = ({
4027
4090
  md: 12,
4028
4091
  lg: 12,
4029
4092
  xl: 12,
4030
- xxl: 5,
4031
- xxxl: 5,
4093
+ xxl: 4,
4094
+ xxxl: 4,
4032
4095
  className: styles.paddingResponsive,
4033
- children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { padding: "12px" }, children: [
4096
+ children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", alignItems: "center" }, children: [
4034
4097
  /* @__PURE__ */ jsx(
4035
4098
  Col,
4036
4099
  {
@@ -4043,28 +4106,11 @@ var CardTicketSearchSummary = ({
4043
4106
  xxxl: 5,
4044
4107
  className: styles.paddingResponsive,
4045
4108
  children: /* @__PURE__ */ jsx(
4046
- Field,
4109
+ RenderField,
4047
4110
  {
4048
4111
  label: mergedLabels.originHarbor,
4049
- className: styles.field,
4050
- children: /* @__PURE__ */ jsx(
4051
- Input,
4052
- {
4053
- name: "from",
4054
- disabled: true,
4055
- type: "text",
4056
- contentBefore: /* @__PURE__ */ jsx(
4057
- Icon,
4058
- {
4059
- icon: "fluent:vehicle-ship-16-filled",
4060
- color: tokens.colorNeutralForegroundDisabled
4061
- }
4062
- ),
4063
- value: originHarbor,
4064
- appearance: "outline",
4065
- size: "medium"
4066
- }
4067
- )
4112
+ value: originHarbor,
4113
+ icon: "fluent:vehicle-ship-24-filled"
4068
4114
  }
4069
4115
  )
4070
4116
  }
@@ -4111,28 +4157,11 @@ var CardTicketSearchSummary = ({
4111
4157
  xxxl: 6,
4112
4158
  className: styles.paddingResponsive,
4113
4159
  children: /* @__PURE__ */ jsx(
4114
- Field,
4160
+ RenderField,
4115
4161
  {
4116
4162
  label: mergedLabels.destinationHarbor,
4117
- className: styles.field,
4118
- children: /* @__PURE__ */ jsx(
4119
- Input,
4120
- {
4121
- name: "to",
4122
- type: "text",
4123
- contentBefore: /* @__PURE__ */ jsx(
4124
- Icon,
4125
- {
4126
- icon: "fluent:location-24-filled",
4127
- color: tokens.colorNeutralForegroundDisabled
4128
- }
4129
- ),
4130
- disabled: true,
4131
- appearance: "outline",
4132
- size: "medium",
4133
- value: destinationHarbor
4134
- }
4135
- )
4163
+ value: destinationHarbor,
4164
+ icon: "fluent:location-24-filled"
4136
4165
  }
4137
4166
  )
4138
4167
  }
@@ -4148,8 +4177,8 @@ var CardTicketSearchSummary = ({
4148
4177
  md: 12,
4149
4178
  lg: 12,
4150
4179
  xl: 12,
4151
- xxl: 5,
4152
- xxxl: 5,
4180
+ xxl: 6,
4181
+ xxxl: 6,
4153
4182
  className: styles.paddingResponsive,
4154
4183
  children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", alignItems: "center" }, children: [
4155
4184
  /* @__PURE__ */ jsx(
@@ -4163,24 +4192,14 @@ var CardTicketSearchSummary = ({
4163
4192
  xxl: 3,
4164
4193
  xxxl: 3,
4165
4194
  className: styles.paddingResponsive,
4166
- children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
4167
- Input,
4195
+ children: /* @__PURE__ */ jsx(
4196
+ RenderField,
4168
4197
  {
4169
- name: "startDate",
4170
- type: "text",
4171
- contentBefore: /* @__PURE__ */ jsx(
4172
- Icon,
4173
- {
4174
- icon: "fluent:calendar-24-regular",
4175
- color: tokens.colorNeutralForegroundDisabled
4176
- }
4177
- ),
4178
- disabled: true,
4179
- appearance: "outline",
4180
- size: "medium",
4181
- value: departureDate
4198
+ label: mergedLabels.departureDate,
4199
+ value: departureDate,
4200
+ icon: "fluent:calendar-24-regular"
4182
4201
  }
4183
- ) })
4202
+ )
4184
4203
  }
4185
4204
  ),
4186
4205
  /* @__PURE__ */ jsx(
@@ -4194,24 +4213,14 @@ var CardTicketSearchSummary = ({
4194
4213
  xxl: 3,
4195
4214
  xxxl: 3,
4196
4215
  className: styles.paddingResponsive,
4197
- children: /* @__PURE__ */ jsx(Label, { className: styles.field, children: /* @__PURE__ */ jsx(
4198
- Input,
4216
+ children: /* @__PURE__ */ jsx(
4217
+ RenderField,
4199
4218
  {
4200
- name: "serviceClass",
4201
- type: "text",
4202
- contentBefore: /* @__PURE__ */ jsx(
4203
- Icon,
4204
- {
4205
- icon: "fluent:ribbon-star-24-regular",
4206
- color: tokens.colorNeutralForegroundDisabled
4207
- }
4208
- ),
4209
- disabled: true,
4210
- appearance: "outline",
4211
- size: "medium",
4212
- value: serviceClass
4219
+ label: mergedLabels.serviceClass,
4220
+ value: serviceClass,
4221
+ icon: "fluent:ribbon-star-24-regular"
4213
4222
  }
4214
- ) })
4223
+ )
4215
4224
  }
4216
4225
  ),
4217
4226
  /* @__PURE__ */ jsx(
@@ -4225,23 +4234,14 @@ var CardTicketSearchSummary = ({
4225
4234
  xxl: 3,
4226
4235
  xxxl: 3,
4227
4236
  className: styles.paddingResponsive,
4228
- children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
4229
- Input,
4237
+ children: /* @__PURE__ */ jsx(
4238
+ RenderField,
4230
4239
  {
4231
- type: "text",
4232
- contentBefore: /* @__PURE__ */ jsx(
4233
- Icon,
4234
- {
4235
- icon: "fluent:vehicle-car-24-regular",
4236
- color: tokens.colorNeutralForegroundDisabled
4237
- }
4238
- ),
4239
- disabled: true,
4240
- appearance: "outline",
4241
- size: "medium",
4242
- value: typeOfService
4240
+ label: mergedLabels.typeOfService,
4241
+ value: typeOfService,
4242
+ icon: "fluent:vehicle-car-24-regular"
4243
4243
  }
4244
- ) })
4244
+ )
4245
4245
  }
4246
4246
  ),
4247
4247
  /* @__PURE__ */ jsx(
@@ -4255,24 +4255,14 @@ var CardTicketSearchSummary = ({
4255
4255
  xxl: 3,
4256
4256
  xxxl: 3,
4257
4257
  className: styles.paddingResponsive,
4258
- children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
4259
- Input,
4258
+ children: /* @__PURE__ */ jsx(
4259
+ RenderField,
4260
4260
  {
4261
- name: "passenger",
4262
- type: "text",
4263
- contentBefore: /* @__PURE__ */ jsx(
4264
- Icon,
4265
- {
4266
- icon: "fluent:people-24-regular",
4267
- color: tokens.colorNeutralForegroundDisabled
4268
- }
4269
- ),
4270
- disabled: true,
4271
- appearance: "outline",
4272
- size: "medium",
4273
- value: totalPassengers
4261
+ label: mergedLabels.totalPassengers,
4262
+ value: totalPassengers,
4263
+ icon: "fluent:people-24-regular"
4274
4264
  }
4275
- ) })
4265
+ )
4276
4266
  }
4277
4267
  )
4278
4268
  ] }) })
@@ -5093,10 +5083,10 @@ var ModalService = ({
5093
5083
  useEffect(() => {
5094
5084
  if (open) {
5095
5085
  if (selectedServiceIds && selectedServiceIds.length > 0) {
5096
- const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
5086
+ const validIds = services.filter((s) => selectedServiceIds.includes(s.serviceTypeId)).map((s) => s.serviceTypeId);
5097
5087
  setSelectedServices(validIds);
5098
5088
  } else {
5099
- setSelectedServices(services.map((s) => s.id));
5089
+ setSelectedServices(services.map((s) => s.serviceTypeId));
5100
5090
  }
5101
5091
  }
5102
5092
  }, [open, services, selectedServiceIds]);
@@ -5116,12 +5106,12 @@ var ModalService = ({
5116
5106
  if (selectedServices.length === services.length) {
5117
5107
  setSelectedServices([]);
5118
5108
  } else {
5119
- setSelectedServices(services.map((s) => s.id));
5109
+ setSelectedServices(services.map((s) => s.serviceTypeId));
5120
5110
  }
5121
5111
  };
5122
5112
  const handleSave = () => {
5123
5113
  const selectedServiceItems = services.filter(
5124
- (s) => selectedServices.includes(s.id)
5114
+ (s) => selectedServices.includes(s.serviceTypeId)
5125
5115
  );
5126
5116
  onSave(selectedServiceItems);
5127
5117
  };
@@ -5158,7 +5148,7 @@ var ModalService = ({
5158
5148
  "div",
5159
5149
  {
5160
5150
  className: styles.serviceItem,
5161
- onClick: () => handleToggleService(service.id),
5151
+ onClick: () => handleToggleService(service.serviceTypeId),
5162
5152
  children: [
5163
5153
  /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
5164
5154
  /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
@@ -5168,13 +5158,13 @@ var ModalService = ({
5168
5158
  /* @__PURE__ */ jsx(
5169
5159
  Checkbox,
5170
5160
  {
5171
- checked: selectedServices.includes(service.id),
5172
- onChange: () => handleToggleService(service.id)
5161
+ checked: selectedServices.includes(service.serviceTypeId),
5162
+ onChange: () => handleToggleService(service.serviceTypeId)
5173
5163
  }
5174
5164
  )
5175
5165
  ]
5176
5166
  },
5177
- service.id
5167
+ service.serviceTypeId
5178
5168
  ))
5179
5169
  ] }),
5180
5170
  /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
@@ -6979,7 +6969,7 @@ var ModalSearchTicket = ({
6979
6969
  }
6980
6970
  ),
6981
6971
  appearance: "filled-lighter",
6982
- size: "medium",
6972
+ size: "large",
6983
6973
  placeholder: mergedLabels.fromPlaceholder,
6984
6974
  onClick: onSelectOrigin,
6985
6975
  onChange: handleFromChange,
@@ -7048,7 +7038,7 @@ var ModalSearchTicket = ({
7048
7038
  ),
7049
7039
  disabled: toDisabled,
7050
7040
  appearance: "filled-lighter",
7051
- size: "medium",
7041
+ size: "large",
7052
7042
  placeholder: mergedLabels.toPlaceholder,
7053
7043
  onClick: onSelectDestination,
7054
7044
  validationRules: {
@@ -7086,7 +7076,7 @@ var ModalSearchTicket = ({
7086
7076
  }
7087
7077
  ),
7088
7078
  appearance: "filled-lighter",
7089
- size: "medium",
7079
+ size: "large",
7090
7080
  placeholder: mergedLabels.departureDatePlaceholder,
7091
7081
  onClick: onSelectDepartureDate,
7092
7082
  required: true,
@@ -7116,7 +7106,7 @@ var ModalSearchTicket = ({
7116
7106
  control,
7117
7107
  type: "switch",
7118
7108
  disabled: roundTripDisabled,
7119
- size: "medium"
7109
+ size: "large"
7120
7110
  }
7121
7111
  )
7122
7112
  }
@@ -7146,7 +7136,7 @@ var ModalSearchTicket = ({
7146
7136
  }
7147
7137
  ),
7148
7138
  appearance: "filled-lighter",
7149
- size: "medium",
7139
+ size: "large",
7150
7140
  placeholder: mergedLabels.returnDatePlaceholder,
7151
7141
  onClick: onSelectReturnDate,
7152
7142
  disabled: endDateDisabled,
@@ -7214,7 +7204,7 @@ var ModalSearchTicket = ({
7214
7204
  }
7215
7205
  ),
7216
7206
  appearance: "filled-lighter",
7217
- size: "medium",
7207
+ size: "large",
7218
7208
  placeholder: mergedLabels.serviceClassPlaceholder,
7219
7209
  onClick: onSelectServiceClass,
7220
7210
  required: true,
@@ -7248,7 +7238,7 @@ var ModalSearchTicket = ({
7248
7238
  }
7249
7239
  ),
7250
7240
  appearance: "filled-lighter",
7251
- size: "medium",
7241
+ size: "large",
7252
7242
  placeholder: mergedLabels.typeOfServicePlaceholder,
7253
7243
  onClick: onSelectTypeOfService,
7254
7244
  required: true,
@@ -7283,7 +7273,7 @@ var ModalSearchTicket = ({
7283
7273
  }
7284
7274
  ),
7285
7275
  appearance: "filled-lighter",
7286
- size: "medium",
7276
+ size: "large",
7287
7277
  placeholder: mergedLabels.passengerPlaceholder,
7288
7278
  onClick: onSelectPassenger
7289
7279
  }
@@ -8795,7 +8785,8 @@ var CardVehicleOwnerForm = ({
8795
8785
  name: `looseCargoOwners.${index}.originCity`,
8796
8786
  placeholder: mergedLabels.selectPlaceholder,
8797
8787
  type: "select",
8798
- options: cityOptions
8788
+ options: cityOptions,
8789
+ size: "large"
8799
8790
  }
8800
8791
  )
8801
8792
  ] }),
@@ -8808,7 +8799,8 @@ var CardVehicleOwnerForm = ({
8808
8799
  name: `looseCargoOwners.${index}.destinationCity`,
8809
8800
  placeholder: mergedLabels.selectPlaceholder,
8810
8801
  type: "select",
8811
- options: cityOptions
8802
+ options: cityOptions,
8803
+ size: "large"
8812
8804
  }
8813
8805
  )
8814
8806
  ] })
@@ -9067,7 +9059,8 @@ var CardVehicleOwnerForm = ({
9067
9059
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
9068
9060
  placeholder: mergedLabels.selectPlaceholder,
9069
9061
  type: "select",
9070
- options: []
9062
+ options: [],
9063
+ size: "large"
9071
9064
  }
9072
9065
  ),
9073
9066
  /* @__PURE__ */ jsxs(
@@ -9115,7 +9108,8 @@ var CardVehicleOwnerForm = ({
9115
9108
  value: "unit",
9116
9109
  label: mergedLabels.cargoTypeOptions.unit
9117
9110
  }
9118
- ]
9111
+ ],
9112
+ size: "large"
9119
9113
  }
9120
9114
  ),
9121
9115
  /* @__PURE__ */ jsx(
@@ -9319,7 +9313,8 @@ var CardVehicleOwnerForm = ({
9319
9313
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
9320
9314
  placeholder: mergedLabels.selectPlaceholder,
9321
9315
  type: "select",
9322
- options: []
9316
+ options: [],
9317
+ size: "large"
9323
9318
  }
9324
9319
  ),
9325
9320
  /* @__PURE__ */ jsx(
@@ -9346,7 +9341,8 @@ var CardVehicleOwnerForm = ({
9346
9341
  name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
9347
9342
  placeholder: mergedLabels.selectPlaceholder,
9348
9343
  type: "select",
9349
- options: []
9344
+ options: [],
9345
+ size: "large"
9350
9346
  }
9351
9347
  ),
9352
9348
  /* @__PURE__ */ jsxs(
@@ -11900,7 +11896,8 @@ var FileUpload = React5.forwardRef(
11900
11896
  placeholder: placeholderProp,
11901
11897
  disabled = false,
11902
11898
  language = "id",
11903
- labels: customLabels
11899
+ labels: customLabels,
11900
+ pdfIcon
11904
11901
  }, ref) => {
11905
11902
  const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
11906
11903
  const styles = uploadStyles();
@@ -12047,7 +12044,24 @@ var FileUpload = React5.forwardRef(
12047
12044
  alt: "preview",
12048
12045
  className: styles.filePreviewImage
12049
12046
  }
12050
- ) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
12047
+ ) : pdfIcon ? /* @__PURE__ */ jsx(
12048
+ "img",
12049
+ {
12050
+ src: pdfIcon,
12051
+ alt: "PDF Icon",
12052
+ width: 32,
12053
+ height: 32,
12054
+ style: { flexShrink: 0 }
12055
+ }
12056
+ ) : /* @__PURE__ */ jsx(
12057
+ Icon,
12058
+ {
12059
+ icon: "fluent:document-pdf-32-regular",
12060
+ width: 32,
12061
+ height: 32,
12062
+ style: { flexShrink: 0, color: brandColors2[80] }
12063
+ }
12064
+ )
12051
12065
  }
12052
12066
  ),
12053
12067
  /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", { className: styles.disabledFileInfo, children: [
@@ -12200,7 +12214,24 @@ var FileUpload = React5.forwardRef(
12200
12214
  alt: "preview",
12201
12215
  className: styles.filePreviewImage
12202
12216
  }
12203
- ) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
12217
+ ) : pdfIcon ? /* @__PURE__ */ jsx(
12218
+ "img",
12219
+ {
12220
+ src: pdfIcon,
12221
+ alt: "PDF Icon",
12222
+ width: 32,
12223
+ height: 32,
12224
+ style: { flexShrink: 0 }
12225
+ }
12226
+ ) : /* @__PURE__ */ jsx(
12227
+ Icon,
12228
+ {
12229
+ icon: "fluent:document-pdf-32-regular",
12230
+ width: 32,
12231
+ height: 32,
12232
+ style: { flexShrink: 0, color: brandColors2[80] }
12233
+ }
12234
+ )
12204
12235
  }
12205
12236
  ),
12206
12237
  /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(