@asdp/ferryui 0.1.22-dev.9114 → 0.1.22-dev.9151

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var reactComponents = require('@fluentui/react-components');
 var jsxRuntime = require('react/jsx-runtime');
-var React5 = require('react');
+var React = require('react');
 var reactIcons = require('@fluentui/react-icons');
 var reactGridSystem = require('react-grid-system');
 var react = require('@iconify/react');
@@ -15,7 +15,7 @@ var reactRange = require('react-range');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var PhoneInputComponent__default = /*#__PURE__*/_interopDefault(PhoneInputComponent);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
@@ -607,11 +607,13 @@ var CarouselWithCustomNav = ({
   cardFocus = false,
   showNavButtons = false,
   showCloseButton = false,
-  onCloseClick
+  onCloseClick,
+  autoPlay = false,
+  autoPlayInterval = 5e3
 }) => {
   const styles = useStyles2();
-  const [internalIndex, setInternalIndex] = React5.useState(0);
-  const labels = React5__default.default.useMemo(
+  const [internalIndex, setInternalIndex] = React.useState(0);
+  const labels = React__default.default.useMemo(
     () => ({
       ...DEFAULT_LABELS2[language],
       ...customLabels,
@@ -620,7 +622,7 @@ var CarouselWithCustomNav = ({
     [language, customLabels, deprecatedAriaLabel]
   );
   const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
-  const handleIndexChange = React5.useCallback(
+  const handleIndexChange = React.useCallback(
     (index) => {
       if (controlledIndex === void 0) {
         setInternalIndex(index);
@@ -629,7 +631,33 @@ var CarouselWithCustomNav = ({
     },
     [controlledIndex, onActiveIndexChange]
   );
-  const defaultAnnouncement = React5.useCallback(
+  React__default.default.useEffect(() => {
+    if (!autoPlay) return;
+    const totalSlides = React__default.default.Children.count(children);
+    if (totalSlides <= 1) return;
+    const intervalId = setInterval(() => {
+      let nextIndex = activeIndex + 1;
+      if (nextIndex >= totalSlides) {
+        nextIndex = circular ? 0 : activeIndex;
+      }
+      if (nextIndex !== activeIndex) {
+        if (controlledIndex === void 0) {
+          setInternalIndex(nextIndex);
+        }
+        onActiveIndexChange?.(nextIndex);
+      }
+    }, autoPlayInterval);
+    return () => clearInterval(intervalId);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    children,
+    circular,
+    activeIndex,
+    controlledIndex,
+    onActiveIndexChange
+  ]);
+  const defaultAnnouncement = React.useCallback(
     (index, totalSlides) => {
       return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides.toString());
     },
@@ -966,12 +994,12 @@ var useStyles4 = reactComponents.makeStyles({
     padding: 0,
     backgroundColor: "transparent",
     border: "none",
-    height: "450px",
+    aspectRatio: "3/1",
     borderRadius: reactComponents.tokens.borderRadiusXLarge
   },
   bannerImage: {
     width: "100%",
-    height: "auto",
+    aspectRatio: "3/1",
     objectFit: "cover",
     display: "block",
     cursor: "pointer",
@@ -1030,11 +1058,11 @@ var CardBanner = ({
   ) });
 };
 function useWindowSize() {
-  const [windowSize, setWindowSize] = React5.useState({
+  const [windowSize, setWindowSize] = React.useState({
     width: 0,
     height: 0
   });
-  React5.useEffect(() => {
+  React.useEffect(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -1970,7 +1998,7 @@ var CardServiceMenu = ({
     return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         reactComponents.Button,
         {
@@ -2007,9 +2035,9 @@ var CardServiceMenu = ({
   }) }) });
 };
 function useIsClamped(deps) {
-  const ref = React5.useRef(null);
-  const [isClamped, setIsClamped] = React5.useState(false);
-  React5.useEffect(() => {
+  const ref = React.useRef(null);
+  const [isClamped, setIsClamped] = React.useState(false);
+  React.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const check = () => setIsClamped(el.scrollHeight > el.clientHeight);
@@ -2040,7 +2068,7 @@ var MenuItemDescription = ({ description, className }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description });
 };
-var DatePickerInput = React5.forwardRef(
+var DatePickerInput = React.forwardRef(
   ({
     field,
     placeholder,
@@ -2053,7 +2081,7 @@ var DatePickerInput = React5.forwardRef(
     max,
     ...restProps
   }, ref) => {
-    const [isOpen, setIsOpen] = React5.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
     const dateValue = field.value ? new Date(field.value) : void 0;
     const onSelectDate = (date) => {
       if (date) {
@@ -2576,19 +2604,19 @@ var InputDynamic = ({
 }) => {
   const styles = useStyles7();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
-  const [showPassword, setShowPassword] = React5.useState(false);
-  const [isPhoneMode, setIsPhoneMode] = React5.useState(false);
-  const [emailOrPhoneType, setEmailOrPhoneType] = React5.useState("none");
-  const [identityType, setIdentityType] = React5.useState(
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [isPhoneMode, setIsPhoneMode] = React.useState(false);
+  const [emailOrPhoneType, setEmailOrPhoneType] = React.useState("none");
+  const [identityType, setIdentityType] = React.useState(
     "id"
   );
-  const [lastPhoneValue, setLastPhoneValue] = React5.useState("");
-  const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = React5.useState("");
-  const inputRef = React5.useRef(null);
-  const phoneInputRef = React5.useRef(null);
-  const emailOrPhoneInputRef = React5.useRef(null);
-  const shouldFocusRef = React5.useRef(false);
-  const isBackspaceNavigationRef = React5.useRef(false);
+  const [lastPhoneValue, setLastPhoneValue] = React.useState("");
+  const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = React.useState("");
+  const inputRef = React.useRef(null);
+  const phoneInputRef = React.useRef(null);
+  const emailOrPhoneInputRef = React.useRef(null);
+  const shouldFocusRef = React.useRef(false);
+  const isBackspaceNavigationRef = React.useRef(false);
   const getSelectStyles = (hasError2, selectAppearance) => {
     const currentAppearance = appearance || "outline";
     const getControlStyles = (provided, state) => {
@@ -2708,7 +2736,7 @@ var InputDynamic = ({
       })
     };
   };
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (shouldFocusRef.current) {
       setTimeout(() => {
         if (identityType === "phone" && phoneInputRef.current) {
@@ -2730,7 +2758,7 @@ var InputDynamic = ({
       }, 50);
     }
   }, [identityType]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (shouldFocusRef.current && type === "emailOrPhone") {
       setTimeout(() => {
         if (emailOrPhoneType === "phone" && emailOrPhoneInputRef.current) {
@@ -3766,7 +3794,7 @@ var CardTicketSearch = ({
   menuItems
 }) => {
   const styles = useStyles8();
-  const labels = React5__default.default.useMemo(
+  const labels = React__default.default.useMemo(
     () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
     [language, customLabels]
   );
@@ -3787,7 +3815,7 @@ var CardTicketSearch = ({
     name: "roundTrip",
     defaultValue: roundTrip
   });
-  React5__default.default.useEffect(() => {
+  React__default.default.useEffect(() => {
     setValue("from", from);
     setValue("to", to);
     setValue("startDate", startDate);
@@ -3807,7 +3835,7 @@ var CardTicketSearch = ({
     passenger,
     setValue
   ]);
-  React5__default.default.useEffect(() => {
+  React__default.default.useEffect(() => {
     if (onRoundTripChange) {
       onRoundTripChange(roundTripValue);
     }
@@ -5125,18 +5153,18 @@ var ModalSelectDate = ({
 }) => {
   const styles = useStyles11();
   const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
-  React5.useEffect(() => {
+  React.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
   }, [language]);
-  const [selectedDate, setSelectedDate] = React5.useState(
+  const [selectedDate, setSelectedDate] = React.useState(
     selectedDepartureDate
   );
-  const [selectedEndDate, setSelectedEndDate] = React5.useState(
+  const [selectedEndDate, setSelectedEndDate] = React.useState(
     selectedReturnDate
   );
-  const [hoveredDate, setHoveredDate] = React5.useState();
-  const [activeTab, setActiveTab] = React5.useState(initialTab);
-  const previewEndDate = React5.useMemo(() => {
+  const [hoveredDate, setHoveredDate] = React.useState();
+  const [activeTab, setActiveTab] = React.useState(initialTab);
+  const previewEndDate = React.useMemo(() => {
     if (selectedEndDate) return selectedEndDate;
     if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
       return hoveredDate;
@@ -5147,7 +5175,7 @@ var ModalSelectDate = ({
     if (!first || !second) return false;
     return moment__default.default(first).isSame(second, "day");
   };
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (open) {
       setSelectedDate(selectedDepartureDate);
       setSelectedEndDate(selectedReturnDate);
@@ -5199,7 +5227,7 @@ var ModalSelectDate = ({
       handleClose();
     }
   };
-  const handleCustomDayCellRef = React5.useCallback(
+  const handleCustomDayCellRef = React.useCallback(
     (element, date, _classNames) => {
       if (!element) return;
       const removeTokens = (className) => {
@@ -5453,8 +5481,8 @@ var ModalService = ({
   const styles = useStyles12();
   const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   const displayTitle = title || mergedLabels.title;
-  const [selectedServices, setSelectedServices] = React5.useState(selectedServiceIds);
-  React5.useEffect(() => {
+  const [selectedServices, setSelectedServices] = React.useState(selectedServiceIds);
+  React.useEffect(() => {
     if (open) {
       if (selectedServiceIds && selectedServiceIds.length > 0) {
         const validIds = services.filter((s) => selectedServiceIds.includes(s.serviceTypeId)).map((s) => s.serviceTypeId);
@@ -5654,13 +5682,13 @@ var ModalTotalPassengers = ({
 }) => {
   const styles = useStyles13();
   const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
-  const [passengers, setPassengers] = React5.useState([]);
-  const [openItems, setOpenItems] = React5.useState([]);
+  const [passengers, setPassengers] = React.useState([]);
+  const [openItems, setOpenItems] = React.useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
     "{maxPassengers}",
     String(maxPassengers)
   );
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (passengerTypes.length === 0) return;
     const defaultPassengers = passengerTypes.map(
       (passengerType) => ({
@@ -6005,10 +6033,10 @@ var ModalTypeOfService = ({
 }) => {
   const styles = useStyles14();
   const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
-  const [selectedServiceId, setSelectedServiceId] = React5.useState(
+  const [selectedServiceId, setSelectedServiceId] = React.useState(
     selectedService?.id || 0
   );
-  const [openItems, setOpenItems] = React5.useState(() => {
+  const [openItems, setOpenItems] = React.useState(() => {
     if (!selectedService) return [];
     for (const item of serviceTypes) {
       if (item.children && item.children.length > 0) {
@@ -6038,7 +6066,7 @@ var ModalTypeOfService = ({
     }
   );
   const imageRenderer = renderImage || defaultRenderImage;
-  React5.useEffect(() => {
+  React.useEffect(() => {
     const newId = selectedService?.id || 0;
     if (newId !== selectedServiceId) {
       setSelectedServiceId(newId);
@@ -6321,7 +6349,7 @@ var SortMenu = ({
   clearFiltersText: deprecatedClearFiltersText
 }) => {
   const styles = useStyles15();
-  const labels = React5__default.default.useMemo(
+  const labels = React__default.default.useMemo(
     () => ({
       ...DEFAULT_LABELS15[language],
       ...customLabels,
@@ -6344,11 +6372,11 @@ var SortMenu = ({
       deprecatedClearFiltersText
     ]
   );
-  const sortOptions = React5__default.default.useMemo(
+  const sortOptions = React__default.default.useMemo(
     () => customSortOptions || getSortOptions(labels),
     [customSortOptions, labels]
   );
-  const currentSortLabel = React5__default.default.useMemo(
+  const currentSortLabel = React__default.default.useMemo(
     () => sortOptions.find((opt) => opt.value === value)?.label || labels.recommendation,
     [sortOptions, value, labels.recommendation]
   );
@@ -6607,8 +6635,8 @@ var ModalFilterTicket = ({
 }) => {
   const styles = useStyles16();
   const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
-  const [rangeReady, setRangeReady] = React5.useState(false);
-  React5.useEffect(() => {
+  const [rangeReady, setRangeReady] = React.useState(false);
+  React.useEffect(() => {
     if (open) {
       const timer = setTimeout(() => {
         setRangeReady(true);
@@ -6645,7 +6673,7 @@ var ModalFilterTicket = ({
       price
     );
   };
-  const renderPriceTrack = React5.useCallback(
+  const renderPriceTrack = React.useCallback(
     ({ props, children }) => {
       const [value1, value2] = priceRange;
       const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
@@ -6684,7 +6712,7 @@ var ModalFilterTicket = ({
     },
     [priceRange, minPrice, maxPrice]
   );
-  const renderDurationTrack = React5.useCallback(
+  const renderDurationTrack = React.useCallback(
     ({ props, children }) => {
       const [value1, value2] = durationRange;
       const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
@@ -7012,7 +7040,7 @@ var DateFilter = ({
   labels
 }) => {
   const styles = useStyles17();
-  const scrollRef = React5.useRef(null);
+  const scrollRef = React.useRef(null);
   const mergedLabels = {
     ...DEFAULT_LABELS17[language],
     ...labels
@@ -7249,8 +7277,8 @@ var ModalSearchTicket = ({
     name: "roundTrip",
     defaultValue: defaultValues?.roundTrip || false
   });
-  const isUpdatingFromProps = React5.useRef(false);
-  React5.useEffect(() => {
+  const isUpdatingFromProps = React.useRef(false);
+  React.useEffect(() => {
     if (defaultValues) {
       isUpdatingFromProps.current = true;
       Object.entries(defaultValues).forEach(([key, value]) => {
@@ -7261,7 +7289,7 @@ var ModalSearchTicket = ({
       }, 0);
     }
   }, [defaultValues, setValue]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (onRoundTripChange && !isUpdatingFromProps.current) {
       onRoundTripChange(roundTripValue);
     }
@@ -7811,13 +7839,13 @@ var Stepper = ({
 }) => {
   const styles = useStyles19();
   const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
-  const currentStepIndex = React5.useMemo(() => {
+  const currentStepIndex = React.useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
     }
     return steps.findIndex((step) => step.id === currentStep);
   }, [steps, currentStep]);
-  const activeStepNumber = React5.useMemo(() => {
+  const activeStepNumber = React.useMemo(() => {
     return currentStepIndex >= 0 ? steps[currentStepIndex].number : 1;
   }, [currentStepIndex, steps]);
   const getStepStatus = (stepNumber) => {
@@ -7848,7 +7876,7 @@ var Stepper = ({
         className: styles.stepperBackground
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.stepCircleWrapper, children: [
         getStepStatus(step.number) === "active" ? /* @__PURE__ */ jsxRuntime.jsx(
           "img",
@@ -8459,28 +8487,28 @@ var ModalPassengerForm = ({
   };
   const displayTitle = title || mergedLabels.title;
   const idTypes = ["KTP", "SIM", "Paspor"];
-  const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = React5.useState(false);
-  const [isModalScanOpen, setIsModalScanOpen] = React5.useState(false);
-  const [scannedIdType, setScannedIdType] = React5.useState(null);
-  const [scanStatus, setScanStatus] = React5.useState("idle");
-  const [scanStep, setScanStep] = React5.useState(0);
-  const [capturedImage, setCapturedImage] = React5.useState(null);
-  const [stream, setStream] = React5.useState(null);
-  const videoRef = React5.useRef(null);
+  const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = React.useState(false);
+  const [isModalScanOpen, setIsModalScanOpen] = React.useState(false);
+  const [scannedIdType, setScannedIdType] = React.useState(null);
+  const [scanStatus, setScanStatus] = React.useState("idle");
+  const [scanStep, setScanStep] = React.useState(0);
+  const [capturedImage, setCapturedImage] = React.useState(null);
+  const [stream, setStream] = React.useState(null);
+  const videoRef = React.useRef(null);
   const { control, handleSubmit, reset, watch, setValue } = reactHookForm.useForm({
     defaultValues
   });
   const idType = watch("idType");
   const watchPassportCountry = watch("country");
-  React5.useEffect(() => {
+  React.useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (idType) {
       setValue("idNumber", "");
     }
   }, [idType, watchPassportCountry, setValue]);
-  const stopCamera = React5.useCallback(() => {
+  const stopCamera = React.useCallback(() => {
     if (stream) {
       stream.getTracks().forEach((track) => track.stop());
       setStream(null);
@@ -8490,7 +8518,7 @@ var ModalPassengerForm = ({
       videoRef.current.srcObject = null;
     }
   }, [stream]);
-  const startCamera = React5.useCallback(async () => {
+  const startCamera = React.useCallback(async () => {
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({
         video: {
@@ -8505,7 +8533,7 @@ var ModalPassengerForm = ({
       alert(mergedLabels.cameraPermissionError);
     }
   }, [mergedLabels.cameraPermissionError]);
-  const capturePhoto = React5.useCallback(() => {
+  const capturePhoto = React.useCallback(() => {
     if (videoRef.current) {
       const canvas = document.createElement("canvas");
       canvas.width = videoRef.current.videoWidth;
@@ -8523,12 +8551,12 @@ var ModalPassengerForm = ({
       }
     }
   }, [scannedIdType, stopCamera]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (isModalScanOpen && scanStatus === "idle") {
       startCamera();
     }
   }, [isModalScanOpen, scanStatus, startCamera]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (isModalScanOpen && scanStatus === "idle" && stream && videoRef.current) {
       if (videoRef.current.srcObject !== stream) {
         videoRef.current.srcObject = stream;
@@ -8543,18 +8571,18 @@ var ModalPassengerForm = ({
       }
     }
   }, [isModalScanOpen, scanStatus, stream]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (!isModalScanOpen) {
       stopCamera();
       setScanStep(0);
     }
   }, [isModalScanOpen, stopCamera]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       stopCamera();
     };
   }, [stopCamera]);
-  React5.useEffect(() => {
+  React.useEffect(() => {
     if (scanStatus !== "reading" || !capturedImage) return;
     let isCancelled = false;
     const performOCR = async () => {
@@ -10758,44 +10786,44 @@ var DEFAULT_LABELS27 = {
 var DEFAULT_FAQ_ITEMS = {
   id: [
     {
-      value: "1",
+      id: 1,
       question: "Bagaimana cara memesan tiket?",
       answer: "Anda dapat memesan tiket melalui halaman pencarian tiket dengan memilih pelabuhan asal, tujuan, dan tanggal keberangkatan."
     },
     {
-      value: "2",
+      id: 2,
       question: "Apakah bisa mengajukan refund?",
       answer: "Ya, pengajuan refund dapat dilakukan melalui menu Riwayat Pesanan sesuai dengan syarat dan ketentuan yang berlaku."
     },
     {
-      value: "3",
+      id: 3,
       question: "Metode pembayaran apa saja yang tersedia?",
       answer: "Kami mendukung berbagai metode pembayaran termasuk Virtual Account, E-Wallet, dan Kartu Kredit/Debit."
     },
     {
-      value: "4",
+      id: 4,
       question: "Apakah tiket perlu dicetak?",
       answer: "Tidak perlu. Anda dapat menunjukkan E-Tiket atau QR Code pada saat check-in di pelabuhan."
     }
   ],
   en: [
     {
-      value: "1",
+      id: 1,
       question: "How to book a ticket?",
       answer: "You can book tickets through the ticket search page by selecting origin, destination, and departure date."
     },
     {
-      value: "2",
+      id: 2,
       question: "Can I request a refund?",
       answer: "Yes, refund requests can be made via the Order History menu subject to applicable terms and conditions."
     },
     {
-      value: "3",
+      id: 3,
       question: "What payment methods are available?",
       answer: "We support various payment methods including Virtual Account, E-Wallet, and Credit/Debit Cards."
     },
     {
-      value: "4",
+      id: 4,
       question: "Do I need to print the ticket?",
       answer: "No physically printed ticket needed. You can show your E-Ticket or QR Code during check-in at the port."
     }
@@ -10833,7 +10861,7 @@ var CardFAQ = ({
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, children: faqItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       reactComponents.AccordionItem,
       {
-        value: item.value,
+        value: item.id,
         className: styles.accordionItem,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10857,7 +10885,7 @@ var CardFAQ = ({
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: item.answer })
         ]
       },
-      item.value
+      item.id
     )) })
   ] });
 };
@@ -11607,7 +11635,7 @@ var CardReview = ({
           }
         ) : (
           // Clone element to append className if it's a valid React element
-          React5__default.default.isValidElement(item.label) ? React5__default.default.cloneElement(item.label, {
+          React__default.default.isValidElement(item.label) ? React__default.default.cloneElement(item.label, {
             className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
           }) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -11960,7 +11988,7 @@ var CardPriceDetails = ({
   const renderItem = (item, key) => {
     const variantClass = getVariantClass(item.variant);
     const isTaxLike = item.variant === "danger";
-    return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
         isTaxLike ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: reactComponents.mergeClasses(styles.label, variantClass), children: item.name }),
         isTaxLike ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
@@ -11987,7 +12015,7 @@ var CardPriceDetails = ({
             section.detail.map((item, i) => renderItem(item, i))
           ] }, index);
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
+        return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
       }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalRow, children: [
@@ -12981,7 +13009,7 @@ var uploadStyles = reactComponents.makeStyles({
     objectFit: "contain"
   }
 });
-var FileUpload = React5__default.default.forwardRef(
+var FileUpload = React__default.default.forwardRef(
   ({
     name,
     control,
@@ -12997,12 +13025,12 @@ var FileUpload = React5__default.default.forwardRef(
   }, ref) => {
     const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
     const styles = uploadStyles();
-    const fileInputRef = React5.useRef(null);
-    const [, setIsDragOver] = React5.useState(false);
-    const [previewUrl, setPreviewUrl] = React5.useState(null);
-    const [sizeError, setSizeError] = React5.useState(null);
-    const [currentFile, setCurrentFile] = React5.useState(null);
-    const [isPreviewOpen, setIsPreviewOpen] = React5.useState(false);
+    const fileInputRef = React.useRef(null);
+    const [, setIsDragOver] = React.useState(false);
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const [sizeError, setSizeError] = React.useState(null);
+    const [currentFile, setCurrentFile] = React.useState(null);
+    const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
     const formatFileSize = (bytes) => {
       if (bytes < 1024) return `${bytes} B`;
       const kb = bytes / 1024;
@@ -13091,7 +13119,7 @@ var FileUpload = React5__default.default.forwardRef(
         rules: { required: required ? `${label} ${mergedLabels.requiredError}` : false },
         render: ({ field: { onChange, value }, fieldState: { error } }) => {
           const displayFile = currentFile || value;
-          React5.useEffect(() => {
+          React.useEffect(() => {
             const fileToPreview = currentFile || value;
             if (fileToPreview instanceof File) {
               if (fileToPreview.type.startsWith("image/")) {