@asdp/ferryui 0.1.22-dev.8766 → 0.1.22-dev.8783

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
+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';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
-import { Row, Col, Visible } from 'react-grid-system';
+import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
+import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
+import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import PhoneInputComponent from 'react-phone-input-2';
@@ -9,7 +10,6 @@ import Select from 'react-select';
 import { Calendar } from '@fluentui/react-calendar-compat';
 import moment from 'moment';
 import { Range } from 'react-range';
-import { SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
 
 // src/components/ModalIllustration/ModalIllustration.constants.ts
 var DEFAULT_LABELS = {
@@ -203,8 +203,148 @@ var DEFAULT_LABELS2 = {
     announcementTemplate: "Carousel slide {index} of {total}"
   }
 };
+
+// src/constants/generated/tokens.ts
+var brandColors = {
+  "10": "#000000",
+  "20": "#03060e",
+  "30": "#060b1c",
+  "40": "#09112a",
+  "50": "#0c1738",
+  "60": "#122255",
+  "70": "#182e71",
+  "80": "#1e398d",
+  "90": "#4b60a4",
+  "100": "#7787bb",
+  "110": "#a4afd1",
+  "120": "#bac2dd",
+  "130": "#d0d6e8",
+  "140": "#e7e9f4",
+  "150": "#fdfdff",
+  "160": "#ffffff"
+};
+
+// src/constants/generated/tokensV2.ts
+var brandColors2 = {
+  "10": "#001a1bff",
+  "20": "#02383bff",
+  "30": "#002426",
+  "40": "#004044",
+  "50": "#005D62",
+  "60": "#007A81",
+  "70": "#00969F",
+  "80": "#00B3BD",
+  "90": "#29BFC8",
+  "100": "#52CBD2",
+  "110": "#7AD7DD",
+  "120": "#A3E4E7",
+  "130": "#CCF0F2",
+  "140": "#E1F7F8",
+  "150": "#fdfdff",
+  "160": "#ffffff"
+};
+var spacing2 = {
+  "360": 36};
+var fontWeight = {
+  "Medium": 500};
+var sharedColors = {
+  "Shared_Cranberry_Primary": "#c50f1f",
+  "Shared_Red_Primary": "#d13438",
+  "Shared_Green_Primary": "#107c10"};
+var lightModeColors2 = {
+  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
+  "Brand_Stroke_1_Rest": "#00B3BD"};
+var tokensV2_default = {
+  lightModeColors: lightModeColors2};
+
+// src/constants/brandColors.ts
+var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
+var brandColors3 = !isV2Path ? brandColors2 : brandColors;
+var customBrand = {
+  10: brandColors3["10"],
+  20: brandColors3["20"],
+  30: brandColors3["30"],
+  40: brandColors3["40"],
+  50: brandColors3["50"],
+  60: brandColors3["60"],
+  70: brandColors3["70"],
+  80: brandColors3["80"],
+  90: brandColors3["90"],
+  100: brandColors3["100"],
+  110: brandColors3["110"],
+  120: brandColors3["120"],
+  130: brandColors3["130"],
+  140: brandColors3["140"],
+  150: brandColors3["150"],
+  160: brandColors3["160"]
+};
+
+// src/constants/designTokens.ts
+typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
+var designTokens = {
+  // Breakpoints for responsive design
+  breakpoints: {
+    xs: "320px",
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px",
+    xxl: "1440px",
+    xxxl: "1600px"
+  }};
+
+// src/constants/themes.ts
+var extendedTokens = {
+  breakpointXs: designTokens.breakpoints.xs,
+  breakpointSm: designTokens.breakpoints.sm,
+  breakpointMd: designTokens.breakpoints.md,
+  breakpointLg: designTokens.breakpoints.lg,
+  breakpointXl: designTokens.breakpoints.xl,
+  breakpointXxl: designTokens.breakpoints.xxl,
+  breakpointXxxl: designTokens.breakpoints.xxxl
+};
+({
+  ...createLightTheme(customBrand),
+  // Brand colors from Figma
+  colorBrandBackground: customBrand[80],
+  colorBrandBackgroundHover: customBrand[70],
+  colorBrandBackgroundPressed: customBrand[60],
+  colorBrandBackgroundSelected: customBrand[80],
+  colorBrandForeground1: customBrand[80],
+  colorBrandForeground2: customBrand[70],
+  colorBrandForegroundLink: customBrand[70],
+  colorBrandForegroundLinkHover: customBrand[60],
+  colorBrandForegroundLinkPressed: customBrand[50],
+  colorBrandForegroundLinkSelected: customBrand[70]});
+({
+  ...createDarkTheme(customBrand),
+  // Brand colors from Figma (inverted for dark mode)
+  colorBrandBackground: customBrand[100],
+  colorBrandBackgroundHover: customBrand[110],
+  colorBrandBackgroundPressed: customBrand[120],
+  colorBrandBackgroundSelected: customBrand[100],
+  colorBrandForeground1: customBrand[100],
+  colorBrandForeground2: customBrand[110],
+  colorBrandForegroundLink: customBrand[110],
+  colorBrandForegroundLinkHover: customBrand[120],
+  colorBrandForegroundLinkPressed: customBrand[130],
+  colorBrandForegroundLinkSelected: customBrand[110]});
 var useStyles2 = makeStyles({
   carousel: {},
+  carouselContainer: {
+    display: "flex",
+    gap: `${spacing2[360]}px`,
+    alignItems: "center",
+    justifyContent: "center",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      gap: tokens.spacingVerticalXS
+    }
+  },
+  carouselContainerNoNav: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   customCarouselNav: {
     display: "flex",
     gap: tokens.spacingHorizontalXS,
@@ -213,6 +353,39 @@ var useStyles2 = makeStyles({
     ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingVerticalM),
     borderRadius: tokens.borderRadiusCircular
   },
+  closeButton: {
+    width: "max-content",
+    height: "max-content",
+    backgroundColor: tokens.colorNeutralForeground2,
+    color: tokens.colorNeutralBackground1,
+    position: "absolute",
+    zIndex: 1,
+    insetInlineEnd: "0px",
+    top: "2%",
+    [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
+      top: "2%"
+    }
+  },
+  closeButtonWithNav: {
+    insetInlineEnd: "14%",
+    [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
+      insetInlineEnd: "15% !important"
+    },
+    [`@media (min-width: ${extendedTokens.breakpointMd}) and (max-width: ${extendedTokens.breakpointLg})`]: {
+      insetInlineEnd: "13% !important"
+    }
+  },
+  closeButtonWithoutNav: {
+    insetInlineEnd: "10px"
+  },
+  customeCarouselButton: {
+    borderRadius: tokens.borderRadiusCircular,
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    color: tokens.colorNeutralBackground1,
+    ":hover": {
+      backgroundColor: tokens.colorNeutralForeground2
+    }
+  },
   carouselNavButton: {
     "& button": {
       padding: 0,
@@ -274,7 +447,10 @@ var CarouselWithCustomNav = ({
   ariaLabel: deprecatedAriaLabel,
   darkNavBackground = true,
   className,
-  cardFocus = false
+  cardFocus = false,
+  showNavButtons = false,
+  showCloseButton = false,
+  onCloseClick
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = useState(0);
@@ -315,20 +491,53 @@ var CarouselWithCustomNav = ({
       activeIndex,
       onActiveIndexChange: (_, data) => handleIndexChange(data.index),
       children: [
-        /* @__PURE__ */ jsx(CarouselViewport, { children: /* @__PURE__ */ jsx(
-          CarouselSlider,
-          {
-            cardFocus,
-            "aria-label": labels.carouselAriaLabel,
-            children
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav, children: [
+          showNavButtons && /* @__PURE__ */ jsx(
+            CarouselButton,
+            {
+              navType: "prev",
+              "aria-label": "Previous Carousel Page Button",
+              className: styles.customeCarouselButton
+            }
+          ),
+          /* @__PURE__ */ jsxs(CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
+            showCloseButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(DismissRegular, {}),
+                shape: "circular",
+                onClick: onCloseClick,
+                "aria-label": "Close carousel",
+                className: mergeClasses(
+                  styles.closeButton,
+                  showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CarouselSlider,
+              {
+                cardFocus,
+                "aria-label": labels.carouselAriaLabel,
+                children
+              }
+            )
+          ] }),
+          showNavButtons && /* @__PURE__ */ jsx(
+            CarouselButton,
+            {
+              navType: "next",
+              "aria-label": "Next Carousel Page Button",
+              className: styles.customeCarouselButton
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           CarouselNav,
           {
             style: {
               backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
-              marginTop: tokens.spacingVerticalXL
+              marginTop: tokens.spacingVerticalXXL
             },
             appearance: "brand",
             className: styles.carouselNavButton,
@@ -652,154 +861,30 @@ var CardBanner = ({
       className: classes.bannerImage,
       src: imageUrl,
       alt,
-      role: "presentation",
-      onClick,
-      style: { cursor: onClick ? "pointer" : "default" }
-    }
-  ) });
-};
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: 0,
-    height: 0
-  });
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowSize;
-}
-
-// src/constants/generated/tokens.ts
-var brandColors = {
-  "10": "#000000",
-  "20": "#03060e",
-  "30": "#060b1c",
-  "40": "#09112a",
-  "50": "#0c1738",
-  "60": "#122255",
-  "70": "#182e71",
-  "80": "#1e398d",
-  "90": "#4b60a4",
-  "100": "#7787bb",
-  "110": "#a4afd1",
-  "120": "#bac2dd",
-  "130": "#d0d6e8",
-  "140": "#e7e9f4",
-  "150": "#fdfdff",
-  "160": "#ffffff"
-};
-
-// src/constants/generated/tokensV2.ts
-var brandColors2 = {
-  "10": "#001a1bff",
-  "20": "#02383bff",
-  "30": "#002426",
-  "40": "#004044",
-  "50": "#005D62",
-  "60": "#007A81",
-  "70": "#00969F",
-  "80": "#00B3BD",
-  "90": "#29BFC8",
-  "100": "#52CBD2",
-  "110": "#7AD7DD",
-  "120": "#A3E4E7",
-  "130": "#CCF0F2",
-  "140": "#E1F7F8",
-  "150": "#fdfdff",
-  "160": "#ffffff"
-};
-var fontWeight = {
-  "Medium": 500};
-var sharedColors = {
-  "Shared_Cranberry_Primary": "#c50f1f",
-  "Shared_Red_Primary": "#d13438",
-  "Shared_Green_Primary": "#107c10"};
-var lightModeColors2 = {
-  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
-  "Brand_Stroke_1_Rest": "#00B3BD"};
-var tokensV2_default = {
-  lightModeColors: lightModeColors2};
-
-// src/constants/brandColors.ts
-var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
-var brandColors3 = !isV2Path ? brandColors2 : brandColors;
-var customBrand = {
-  10: brandColors3["10"],
-  20: brandColors3["20"],
-  30: brandColors3["30"],
-  40: brandColors3["40"],
-  50: brandColors3["50"],
-  60: brandColors3["60"],
-  70: brandColors3["70"],
-  80: brandColors3["80"],
-  90: brandColors3["90"],
-  100: brandColors3["100"],
-  110: brandColors3["110"],
-  120: brandColors3["120"],
-  130: brandColors3["130"],
-  140: brandColors3["140"],
-  150: brandColors3["150"],
-  160: brandColors3["160"]
-};
-
-// src/constants/designTokens.ts
-typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
-var designTokens = {
-  // Breakpoints for responsive design
-  breakpoints: {
-    xs: "320px",
-    sm: "480px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1200px",
-    xxl: "1440px",
-    xxxl: "1600px"
-  }};
-
-// src/constants/themes.ts
-var extendedTokens = {
-  breakpointXs: designTokens.breakpoints.xs,
-  breakpointSm: designTokens.breakpoints.sm,
-  breakpointMd: designTokens.breakpoints.md,
-  breakpointLg: designTokens.breakpoints.lg,
-  breakpointXl: designTokens.breakpoints.xl,
-  breakpointXxl: designTokens.breakpoints.xxl,
-  breakpointXxxl: designTokens.breakpoints.xxxl
-};
-({
-  ...createLightTheme(customBrand),
-  // Brand colors from Figma
-  colorBrandBackground: customBrand[80],
-  colorBrandBackgroundHover: customBrand[70],
-  colorBrandBackgroundPressed: customBrand[60],
-  colorBrandBackgroundSelected: customBrand[80],
-  colorBrandForeground1: customBrand[80],
-  colorBrandForeground2: customBrand[70],
-  colorBrandForegroundLink: customBrand[70],
-  colorBrandForegroundLinkHover: customBrand[60],
-  colorBrandForegroundLinkPressed: customBrand[50],
-  colorBrandForegroundLinkSelected: customBrand[70]});
-({
-  ...createDarkTheme(customBrand),
-  // Brand colors from Figma (inverted for dark mode)
-  colorBrandBackground: customBrand[100],
-  colorBrandBackgroundHover: customBrand[110],
-  colorBrandBackgroundPressed: customBrand[120],
-  colorBrandBackgroundSelected: customBrand[100],
-  colorBrandForeground1: customBrand[100],
-  colorBrandForeground2: customBrand[110],
-  colorBrandForegroundLink: customBrand[110],
-  colorBrandForegroundLinkHover: customBrand[120],
-  colorBrandForegroundLinkPressed: customBrand[130],
-  colorBrandForegroundLinkSelected: customBrand[110]});
+      role: "presentation",
+      onClick,
+      style: { cursor: onClick ? "pointer" : "default" }
+    }
+  ) });
+};
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
 
 // src/components/CardTicket/CardTicket.constants.ts
 var DEFAULT_LABELS5 = {
@@ -11713,8 +11798,566 @@ var ModalPriceDetail = ({
   );
 };
 
-// src/components/CardProfileMenu/CardProfileMenu.constants.ts
+// src/components/FileUpload/FileUpload.constants.ts
+var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
+var MAX_FILE_SIZE_MB = 10;
 var DEFAULT_LABELS38 = {
+  id: {
+    placeholder: "Ketuk untuk pilih file",
+    maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
+    sizeLabel: "Ukuran",
+    preview: "Pratinjau",
+    requiredError: "wajib diisi"
+  },
+  en: {
+    placeholder: "Tap to select a file",
+    maxSizeWarning: "Maximum {maxSize}MB per file in PDF, JPG, JPEG, PNG format.",
+    sizeLabel: "Size",
+    preview: "Preview",
+    requiredError: "is required"
+  }
+};
+var uploadStyles = makeStyles({
+  container: {
+    backgroundColor: "#F0FEFF",
+    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%2300B3BD' stroke-width='3' stroke-dasharray='25%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+    ...shorthands.padding(tokens.spacingHorizontalM, tokens.spacingHorizontalL),
+    borderRadius: "16px",
+    cursor: "pointer",
+    width: "100%"
+  },
+  containerError: {
+    backgroundColor: tokens.colorStatusWarningBackground1,
+    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23F7630C' stroke-width='3' stroke-dasharray='25%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+    ...shorthands.padding(tokens.spacingHorizontalM, tokens.spacingHorizontalL),
+    borderRadius: "16px",
+    cursor: "pointer",
+    width: "100%"
+  },
+  containerDisabled: {
+    width: "100%"
+  },
+  fieldContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "end",
+    height: "100%",
+    gap: tokens.spacingHorizontalXS
+  },
+  disabledFileInfo: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  disabledFileName: {
+    color: tokens.colorNeutralForeground1
+  },
+  disabledFileSize: {
+    color: tokens.colorNeutralForeground3
+  },
+  uploadIcon: {
+    borderRadius: tokens.borderRadiusCircular,
+    backgroundColor: tokens.colorNeutralBackground1,
+    maxWidth: "48px",
+    width: "48px",
+    height: "48px",
+    maxHeight: "48px",
+    textAlign: "center",
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "center"
+  },
+  uploadText: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS,
+    flex: 1
+  },
+  hiddenInput: {
+    opacity: 0,
+    position: "absolute",
+    pointerEvents: "none"
+  },
+  filePreviewImage: {
+    width: "48px",
+    height: "48px",
+    borderRadius: tokens.borderRadiusSmall,
+    objectFit: "cover"
+  },
+  dialogImage: {
+    maxWidth: "100%",
+    maxHeight: "70vh",
+    objectFit: "contain"
+  }
+});
+var FileUpload = React5.forwardRef(
+  ({
+    name,
+    control,
+    label,
+    required = false,
+    accept = ACCEPTED_FILES,
+    maxSize = MAX_FILE_SIZE_MB,
+    placeholder: placeholderProp,
+    disabled = false,
+    language = "id",
+    labels: customLabels
+  }, ref) => {
+    const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
+    const styles = uploadStyles();
+    const fileInputRef = useRef(null);
+    const [, setIsDragOver] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [sizeError, setSizeError] = useState(null);
+    const [currentFile, setCurrentFile] = useState(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const formatFileSize = (bytes) => {
+      if (bytes < 1024) return `${bytes} B`;
+      const kb = bytes / 1024;
+      if (kb < 1024) return `${kb.toFixed(1)} KB`;
+      const mb = kb / 1024;
+      return `${mb.toFixed(1)} MB`;
+    };
+    const isImageFile = (file) => {
+      return file ? file.type.startsWith("image/") : false;
+    };
+    const getDisplayFileName = (file) => {
+      if (!file) return "";
+      if (file.type.startsWith("image/")) {
+        return "Image";
+      }
+      const extension = file.name.split(".").pop()?.toLowerCase() || "";
+      return `Document.${extension}`;
+    };
+    const handleFileSelect = (files, onChange) => {
+      setSizeError(null);
+      if (files && files.length > 0) {
+        const file = files[0];
+        setCurrentFile(file);
+        if (file.size > maxSize * 1024 * 1024) {
+          setSizeError("error");
+          onChange(void 0);
+          return;
+        }
+        onChange(file);
+        setCurrentFile(null);
+      }
+    };
+    const handleClick = () => {
+      if (!disabled) {
+        fileInputRef.current?.click();
+      }
+    };
+    const handleDrop = (e, onChange) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (!disabled) {
+        handleFileSelect(e.dataTransfer.files, onChange);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+      setIsDragOver(false);
+    };
+    const handleRemoveFile = (e, onChange) => {
+      e?.stopPropagation();
+      setSizeError(null);
+      setCurrentFile(null);
+      onChange(void 0);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+      setPreviewUrl(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    };
+    const handlePreview = (e, file) => {
+      e.stopPropagation();
+      const fileToPreview = file;
+      if (fileToPreview instanceof File) {
+        if (isImageFile(fileToPreview)) {
+          setIsPreviewOpen(true);
+        } else {
+          const fileUrl = URL.createObjectURL(fileToPreview);
+          window.open(fileUrl, "_blank");
+          setTimeout(() => URL.revokeObjectURL(fileUrl), 1e3);
+        }
+      }
+    };
+    const getContainerStyle = (hasFile, hasError) => {
+      if (disabled && hasFile) return styles.containerDisabled;
+      if (hasError) return styles.containerError;
+      return styles.container;
+    };
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control,
+        rules: { required: required ? `${label} ${mergedLabels.requiredError}` : false },
+        render: ({ field: { onChange, value }, fieldState: { error } }) => {
+          const displayFile = currentFile || value;
+          useEffect(() => {
+            const fileToPreview = currentFile || value;
+            if (fileToPreview instanceof File) {
+              if (fileToPreview.type.startsWith("image/")) {
+                const url = URL.createObjectURL(fileToPreview);
+                setPreviewUrl(url);
+                return () => {
+                  URL.revokeObjectURL(url);
+                  setPreviewUrl(null);
+                };
+              } else {
+                setPreviewUrl(null);
+              }
+            } else {
+              setPreviewUrl(null);
+            }
+          }, [value, currentFile]);
+          if (disabled && displayFile instanceof File) {
+            return /* @__PURE__ */ jsxs(
+              Field,
+              {
+                required,
+                label: /* @__PURE__ */ jsx(Body1, { children: label }),
+                className: styles.fieldContainer,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Container,
+                    {
+                      style: { marginLeft: 0, width: "100%", padding: 0 },
+                      fluid: true,
+                      children: /* @__PURE__ */ jsxs(Row, { children: [
+                        /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(Row, { children: [
+                          /* @__PURE__ */ jsx(
+                            Col,
+                            {
+                              xs: "content",
+                              style: {
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                width: "max-content"
+                              },
+                              children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  src: previewUrl,
+                                  alt: "preview",
+                                  className: styles.filePreviewImage
+                                }
+                              ) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", { className: styles.disabledFileInfo, children: [
+                            /* @__PURE__ */ jsx(Caption1Strong, { className: styles.disabledFileName, children: getDisplayFileName(displayFile) }),
+                            /* @__PURE__ */ jsxs(Caption2, { className: styles.disabledFileSize, children: [
+                              mergedLabels.sizeLabel,
+                              ": ",
+                              formatFileSize(displayFile.size)
+                            ] })
+                          ] }) })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            appearance: "transparent",
+                            size: "small",
+                            style: { color: brandColors2[80] },
+                            onClick: (e) => handlePreview(e, displayFile),
+                            children: mergedLabels.preview
+                          }
+                        ) })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Dialog,
+                    {
+                      open: isPreviewOpen,
+                      onOpenChange: (_, data) => setIsPreviewOpen(data.open),
+                      children: /* @__PURE__ */ jsx(
+                        DialogSurface,
+                        {
+                          style: {
+                            maxWidth: "90vw",
+                            maxHeight: "90vh",
+                            backgroundColor: "transparent",
+                            boxShadow: "none"
+                          },
+                          children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+                            /* @__PURE__ */ jsx(
+                              DialogTitle,
+                              {
+                                action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    appearance: "subtle",
+                                    "aria-label": "close",
+                                    icon: /* @__PURE__ */ jsx(Dismiss24Regular, {})
+                                  }
+                                ) })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DialogContent,
+                              {
+                                style: { alignItems: "center", textAlign: "center" },
+                                children: previewUrl && /* @__PURE__ */ jsx(
+                                  "img",
+                                  {
+                                    src: previewUrl,
+                                    alt: "Preview",
+                                    className: styles.dialogImage
+                                  }
+                                )
+                              }
+                            )
+                          ] })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            );
+          }
+          return /* @__PURE__ */ jsxs(
+            Field,
+            {
+              ref,
+              required,
+              label: /* @__PURE__ */ jsx(Body1, { children: label }),
+              className: styles.fieldContainer,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Container,
+                  {
+                    className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
+                    onClick: handleClick,
+                    onDrop: (e) => handleDrop(e, onChange),
+                    onDragOver: handleDragOver,
+                    onDragLeave: handleDragLeave,
+                    fluid: true,
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Row,
+                        {
+                          nogutter: true,
+                          style: { gap: tokens.spacingVerticalL },
+                          justify: "center",
+                          align: "center",
+                          children: [
+                            /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                icon: "fluent:warning-32-regular",
+                                style: {
+                                  color: tokens.colorStatusWarningBackground3,
+                                  maxWidth: "32px",
+                                  width: "32px",
+                                  maxHeight: "32px",
+                                  height: "32px"
+                                }
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                icon: "fluent:arrow-upload-32-filled",
+                                style: {
+                                  color: brandColors2[80],
+                                  maxWidth: "32px",
+                                  width: "32px",
+                                  maxHeight: "32px",
+                                  height: "32px"
+                                }
+                              }
+                            ) }) }),
+                            /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
+                              Row,
+                              {
+                                direction: "column",
+                                nogutter: true,
+                                style: { rowGap: tokens.spacingVerticalXS },
+                                children: [
+                                  /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
+                                  displayFile instanceof File ? /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingHorizontalS }, children: [
+                                    /* @__PURE__ */ jsx(
+                                      Col,
+                                      {
+                                        xs: "content",
+                                        style: {
+                                          display: "flex",
+                                          justifyContent: "center",
+                                          alignItems: "center",
+                                          width: "max-content"
+                                        },
+                                        children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
+                                          "img",
+                                          {
+                                            src: previewUrl,
+                                            alt: "preview",
+                                            className: styles.filePreviewImage
+                                          }
+                                        ) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: { display: "flex", flexDirection: "column" },
+                                        children: [
+                                          /* @__PURE__ */ jsx(Caption1Strong, { children: getDisplayFileName(displayFile) }),
+                                          /* @__PURE__ */ jsxs(
+                                            Caption2,
+                                            {
+                                              style: { color: tokens.colorNeutralForeground3 },
+                                              children: [
+                                                mergedLabels.sizeLabel,
+                                                ": ",
+                                                formatFileSize(displayFile.size),
+                                                (error || sizeError) && /* @__PURE__ */ jsxs(
+                                                  "span",
+                                                  {
+                                                    style: {
+                                                      color: tokens.colorStatusWarningForeground1,
+                                                      marginLeft: tokens.spacingHorizontalXS
+                                                    },
+                                                    children: [
+                                                      "(",
+                                                      sizeError || error?.message,
+                                                      ")"
+                                                    ]
+                                                  }
+                                                )
+                                              ]
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          gap: tokens.spacingVerticalS,
+                                          justifyContent: "center",
+                                          alignItems: "center",
+                                          width: "max-content",
+                                          height: "100%"
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx(
+                                            Button,
+                                            {
+                                              appearance: "transparent",
+                                              size: "small",
+                                              style: { color: brandColors2[80] },
+                                              onClick: (e) => handlePreview(e, displayFile),
+                                              children: mergedLabels.preview
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx(
+                                            Button,
+                                            {
+                                              appearance: "transparent",
+                                              size: "small",
+                                              onClick: (e) => handleRemoveFile(e, onChange),
+                                              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-16-regular" })
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    ) })
+                                  ] }) }) : /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+                                    Caption1,
+                                    {
+                                      style: { color: tokens.colorNeutralForeground3 },
+                                      children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
+                                    }
+                                  ) })
+                                ]
+                              }
+                            ) })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          ref: fileInputRef,
+                          type: "file",
+                          accept,
+                          onChange: (e) => handleFileSelect(e.target.files, onChange),
+                          className: styles.hiddenInput,
+                          disabled
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Dialog,
+                  {
+                    open: isPreviewOpen,
+                    onOpenChange: (_, data) => setIsPreviewOpen(data.open),
+                    children: /* @__PURE__ */ jsx(
+                      DialogSurface,
+                      {
+                        style: {
+                          maxWidth: "90vw",
+                          maxHeight: "90vh",
+                          backgroundColor: "transparent",
+                          boxShadow: "none"
+                        },
+                        children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+                          /* @__PURE__ */ jsx(
+                            DialogTitle,
+                            {
+                              action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  appearance: "subtle",
+                                  "aria-label": "close",
+                                  icon: /* @__PURE__ */ jsx(Dismiss24Regular, {})
+                                }
+                              ) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            DialogContent,
+                            {
+                              style: { alignItems: "center", textAlign: "center" },
+                              children: previewUrl && /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  src: previewUrl,
+                                  alt: "Preview",
+                                  className: styles.dialogImage
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+var FileUpload_default = FileUpload;
+
+// src/components/CardProfileMenu/CardProfileMenu.constants.ts
+var DEFAULT_LABELS39 = {
   id: {},
   en: {}
 };
@@ -11777,7 +12420,7 @@ var CardProfileMenu = ({
   onTabSelect
 }) => {
   const styles = useStyles39();
-  ({ ...DEFAULT_LABELS38[language], ...labels });
+  ({ ...DEFAULT_LABELS39[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -11806,6 +12449,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map