@asdp/ferryui 0.1.0 → 0.1.3

package/dist/index.mjs

@@ -1,7 +1,12 @@
-import { makeStyles, tokens, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button } from '@fluentui/react-components';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, typographyStyles, Checkbox, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React2, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
+import { Icon } from '@iconify/react';
+import { Controller } from 'react-hook-form';
+import PhoneInput from 'react-phone-input-2';
+import Select from 'react-select';
+import { Calendar } from '@fluentui/react-calendar-compat';
 
-// src/components/ModalRadius/ModalRadius.tsx
 var useStyles = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -20,36 +25,26 @@ var useStyles = makeStyles({
     maxWidth: "100%",
     height: "auto"
   },
-  infoText: {
-    marginTop: tokens.spacingVerticalM,
-    color: tokens.colorNeutralForeground3
-  },
   buttonContainer: {
     display: "flex",
-    width: "100%"
+    width: "100%",
+    gap: tokens.spacingHorizontalM
   }
 });
-var ModalRadius = ({
+var ModalIllustration = ({
   open,
   onClose,
-  title = "Anda berada di luar area pemesanan",
-  message = "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
+  title,
+  message,
   imageSrc = "/assets/images/illustrations/radius.svg",
-  imageAlt = "Radius Illustration",
+  imageAlt = "Illustration",
   imageWidth = 361,
   imageHeight = 203,
-  buttonText = "Tutup & Coba Lagi",
-  onButtonClick
+  primaryButton,
+  secondaryButton
 }) => {
   const styles = useStyles();
-  const handleButtonClick = () => {
-    if (onButtonClick) {
-      onButtonClick();
-    } else {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ jsx(Dialog, { open, modalType: "modal", children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => !data.open && onClose(), modalType: "modal", children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: title }),
     /* @__PURE__ */ jsxs(DialogContent, { children: [
       /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
@@ -63,23 +58,2984 @@ var ModalRadius = ({
             className: styles.image
           }
         ),
-        /* @__PURE__ */ jsx(Body1, { style: { textAlign: "center" }, children: message })
+        typeof message === "string" ? /* @__PURE__ */ jsx(Body1, { style: { textAlign: "center" }, children: message }) : message
       ] }),
-      /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: styles.buttonContainer, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            style: { width: "100%" },
+            type: "button",
+            appearance: primaryButton.appearance || "primary",
+            onClick: primaryButton.onClick,
+            children: primaryButton.text
+          }
+        ),
+        secondaryButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            style: { width: "100%" },
+            type: "button",
+            appearance: secondaryButton.appearance || "outline",
+            onClick: secondaryButton.onClick,
+            children: secondaryButton.text
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+};
+
+// src/components/ModalIllustration/presets.ts
+var MODAL_PRESETS = {
+  /**
+   * Modal for radius/location restriction
+   */
+  RADIUS: {
+    title: "Anda berada di luar area pemesanan",
+    message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
+    imageSrc: "/assets/images/illustrations/radius.svg",
+    imageAlt: "Radius Limitation Illustration"
+  },
+  /**
+   * Modal for expired session
+   */
+  SESSION_EXPIRED: {
+    title: "Sesi anda telah berakhir",
+    message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.",
+    imageSrc: "/assets/images/illustrations/sessionexp.svg",
+    imageAlt: "Session Expired Illustration"
+  },
+  /**
+   * Modal for purchase period expired
+   */
+  PURCHASE_PERIOD_EXPIRED: {
+    title: "Waktu pembelian telah berakhir",
+    message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.",
+    imageSrc: "/assets/images/illustrations/pay.svg",
+    imageAlt: "Purchase Period Expired Illustration"
+  },
+  /**
+   * Modal for transaction limit reached
+   */
+  TRANSACTION_LIMIT: {
+    title: "Anda mencapai batas transaksi tertunda",
+    message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.",
+    imageSrc: "/assets/images/illustrations/mobile-pay.svg",
+    imageAlt: "Transaction Limit Illustration"
+  }
+};
+var getModalPreset = (presetKey) => {
+  return MODAL_PRESETS[presetKey];
+};
+var useStyles2 = makeStyles({
+  carousel: {},
+  customCarouselNav: {
+    display: "flex",
+    gap: tokens.spacingHorizontalXS,
+    justifyContent: "center",
+    alignItems: "center",
+    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingVerticalM),
+    borderRadius: tokens.borderRadiusCircular
+  },
+  carouselNavButton: {
+    "& button": {
+      padding: 0,
+      marginInline: "0px",
+      width: "45px",
+      height: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+      "@media (max-width: 425px)": {
+        width: "35px",
+        height: "10px"
+      }
+    },
+    "& button::after": {
+      content: '""',
+      transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "& button[aria-selected='true']::after": {
+      backgroundImage: "linear-gradient(to right,#00B3BD, #8DC63F)",
+      width: "55px",
+      height: "16px",
+      borderRadius: tokens.borderRadiusCircular,
+      transform: "translateX(0)",
+      "@media (max-width: 425px)": {
+        width: "25px",
+        height: "10px"
+      },
+      "@media (max-width: 768px)": {
+        width: "35px",
+        height: "13px"
+      }
+    },
+    "& button[aria-selected='false']::after": {
+      backgroundColor: "#D1D1D1",
+      width: "15px",
+      height: "15px",
+      opacity: "90%",
+      transform: "scale(0.9)",
+      "@media (max-width: 425px)": {
+        width: "10px",
+        height: "10px"
+      }
+    }
+  }
+});
+var defaultAnnouncement = (index, totalSlides) => {
+  return `Carousel slide ${index + 1} of ${totalSlides}`;
+};
+var CarouselWithCustomNav = ({
+  children,
+  circular = true,
+  draggable = true,
+  align = "start",
+  whitespace = false,
+  announcement = defaultAnnouncement,
+  activeIndex: controlledIndex,
+  onActiveIndexChange,
+  ariaLabel = "Carousel",
+  darkNavBackground = true,
+  className,
+  cardFocus = false
+}) => {
+  const styles = useStyles2();
+  const [internalIndex, setInternalIndex] = useState(0);
+  const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
+  const handleIndexChange = useCallback((index) => {
+    if (controlledIndex === void 0) {
+      setInternalIndex(index);
+    }
+    onActiveIndexChange?.(index);
+  }, [controlledIndex, onActiveIndexChange]);
+  return /* @__PURE__ */ jsxs(
+    Carousel,
+    {
+      circular,
+      draggable,
+      align,
+      className: mergeClasses(styles.carousel, className),
+      whitespace,
+      announcement,
+      activeIndex,
+      onActiveIndexChange: (_, data) => handleIndexChange(data.index),
+      children: [
+        /* @__PURE__ */ jsx(CarouselViewport, { children: /* @__PURE__ */ jsx(
+          CarouselSlider,
+          {
+            cardFocus,
+            "aria-label": ariaLabel,
+            children
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CarouselNav,
+          {
+            style: {
+              backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
+              marginTop: tokens.spacingVerticalXL
+            },
+            appearance: "brand",
+            className: styles.carouselNavButton,
+            children: (index) => /* @__PURE__ */ jsx(CarouselNavButton, { "aria-label": `Slide ${index + 1}` })
+          }
+        )
+      ]
+    }
+  );
+};
+var useStyles3 = makeStyles({
+  actionCard: {
+    borderRadius: tokens.borderRadiusXLarge,
+    overflow: "hidden",
+    textAlign: "center",
+    width: "360px",
+    maxWidth: "360px",
+    margin: "0px 6px",
+    boxShadow: tokens.shadow4,
+    backgroundColor: tokens.colorNeutralForegroundInverted,
+    "@media (max-width: 1024px)": {
+      width: "200px",
+      maxWidth: "200px"
+    },
+    "@media (max-width: 768px)": {
+      width: "190px",
+      maxWidth: "190px"
+    },
+    "@media (max-width: 480px)": {
+      width: "180px",
+      maxWidth: "180px",
+      margin: "0px 4px"
+    }
+  },
+  imageContainer: {
+    position: "relative",
+    width: "100%",
+    height: "202px",
+    overflow: "hidden",
+    "@media (max-width: 1024px)": {
+      height: "120px"
+    },
+    "@media (max-width: 768px)": {
+      height: "110px"
+    },
+    "@media (max-width: 480px)": {
+      height: "100px"
+    }
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    objectPosition: "center"
+  },
+  info: {
+    display: "flex",
+    flexDirection: "column",
+    padding: tokens.spacingHorizontalM,
+    width: "100%",
+    alignContent: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacingVerticalSNudge,
+    "@media (max-width: 1024px)": {
+      padding: tokens.spacingHorizontalSNudge,
+      gap: tokens.spacingVerticalSNudge
+    },
+    "@media (max-width: 768px)": {
+      padding: tokens.spacingVerticalS,
+      gap: tokens.spacingVerticalXS
+    },
+    "@media (max-width: 480px)": {
+      padding: tokens.spacingVerticalSNudge,
+      gap: tokens.spacingVerticalXS
+    }
+  }
+});
+var CardPromo = ({
+  imageUrl,
+  title,
+  description,
+  imageAlt = "Promo image",
+  index = 0,
+  totalCards,
+  onClick
+}) => {
+  const classes = useStyles3();
+  const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
+  return /* @__PURE__ */ jsxs(
+    CarouselCard,
+    {
+      autoSize: true,
+      className: classes.actionCard,
+      "aria-label": ariaLabel,
+      onClick,
+      style: { cursor: onClick ? "pointer" : "default" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.imageContainer, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: classes.image,
+            src: imageUrl,
+            role: "presentation",
+            alt: imageAlt
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: classes.info, children: [
+          /* @__PURE__ */ jsx(Subtitle2, { children: title }),
+          /* @__PURE__ */ jsx(Body1, { children: description })
+        ] })
+      ]
+    }
+  );
+};
+var useStyles4 = makeStyles({
+  bannerCard: {
+    overflow: "hidden",
+    width: "100%",
+    maxWidth: "100%",
+    margin: 0,
+    padding: 0,
+    backgroundColor: "transparent",
+    border: "none"
+  },
+  bannerImage: {
+    width: "100%",
+    height: "auto",
+    objectFit: "cover",
+    display: "block",
+    cursor: "pointer"
+  }
+});
+var CardBanner = ({
+  imageUrl,
+  alt,
+  index = 0,
+  totalBanners,
+  onClick
+}) => {
+  const classes = useStyles4();
+  const ariaLabel = totalBanners ? `Banner ${index + 1} of ${totalBanners}` : `Banner ${index + 1}`;
+  return /* @__PURE__ */ jsx(
+    CarouselCard,
+    {
+      className: classes.bannerCard,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: classes.bannerImage,
+          src: imageUrl,
+          alt,
+          role: "presentation",
+          onClick,
+          style: { cursor: onClick ? "pointer" : "default" }
+        }
+      )
+    }
+  );
+};
+var useStyles5 = makeStyles({
+  ticketWrapper: {
+    borderRadius: tokens.borderRadiusXLarge,
+    overflow: "visible",
+    boxShadow: tokens.shadow4,
+    display: "flex",
+    width: "100%",
+    marginBottom: "2rem",
+    minHeight: "323px",
+    padding: 0,
+    "@media (max-width: 1200px)": {
+      flexDirection: "column"
+    }
+  },
+  ticketLeftCard: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "3em",
+    width: "100%",
+    height: "100%",
+    boxShadow: "none",
+    position: "relative",
+    overflow: "visible",
+    flexDirection: "column",
+    "@media (min-width: 1200px)": {
+      borderRight: `0.7em dashed ${tokens.colorNeutralBackground1Hover}`,
+      borderEndEndRadius: 0,
+      borderEndStartRadius: 0,
+      borderTopLeftRadius: tokens.borderRadiusXLarge,
+      borderBottomLeftRadius: tokens.borderRadiusXLarge
+    },
+    "@media (max-width: 1200px)": {
+      borderBottom: `0.5em dashed ${tokens.colorNeutralBackground1Hover}`,
+      borderTopLeftRadius: tokens.borderRadiusXLarge,
+      borderTopRightRadius: tokens.borderRadiusXLarge,
+      borderEndEndRadius: 0,
+      borderEndStartRadius: 0,
+      gap: "1rem",
+      flexDirection: "row",
+      justifyContent: "space-around",
+      padding: "2rem"
+    }
+  },
+  circularLeft: {
+    position: "absolute",
+    width: "100px",
+    height: "50px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    left: "-50px",
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularLeftMd: {
+    position: "absolute",
+    width: "50px",
+    height: "30px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    left: "-25px",
+    bottom: "-18px",
+    zIndex: 2,
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularRightMd: {
+    position: "absolute",
+    width: "50px",
+    height: "30px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    right: "-25px",
+    bottom: "-18px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  ticketMiddleCard: {
+    width: "100%",
+    height: "100%",
+    boxShadow: "none",
+    borderRadius: 0,
+    padding: "2rem",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    "@media (max-width: 768px)": {
+      padding: "1rem"
+    }
+  },
+  ticketInfo: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.5em"
+  },
+  ticketTime: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: "0.5em"
+  },
+  ticketDuration: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem"
+  },
+  dividerContainer: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyItems: "center",
+    width: "100%"
+  },
+  ticketButtons: {
+    display: "flex",
+    gap: "1rem",
+    marginTop: "1rem",
+    "@media (max-width: 768px)": {
+      flexDirection: "column"
+    }
+  },
+  ticketRightCard: {
+    width: "100%",
+    height: "100%",
+    boxShadow: "none",
+    borderRadius: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderTopRightRadius: tokens.borderRadiusXLarge,
+    borderBottomRightRadius: tokens.borderRadiusXLarge,
+    position: "relative",
+    overflow: "visible",
+    background: "linear-gradient(75deg, #58C91B 0%, #1949E0 103.3%)",
+    padding: "5em",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    color: tokens.colorNeutralForegroundInverted,
+    "@media (max-width: 1200px)": {
+      padding: "2rem",
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: tokens.borderRadiusXLarge,
+      borderBottomRightRadius: tokens.borderRadiusXLarge
+    },
+    "@media (max-width: 768px)": {
+      padding: "1rem"
+    }
+  },
+  priceCard: {
+    border: "1px solid #FFF",
+    background: "rgba(255, 255, 255, 0.30)",
+    backdropFilter: "blur(17.5px)",
+    borderRadius: tokens.borderRadiusLarge,
+    padding: "1.2rem",
+    gap: "1rem",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    "@media (max-width: 768px)": {
+      padding: "1rem"
+    }
+  },
+  facilitiesSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem"
+  },
+  facilitiesList: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "0.75rem"
+  },
+  facilityItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontSize: "14px"
+  },
+  circularRight: {
+    position: "absolute",
+    width: "100px",
+    height: "50px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    right: "-50px",
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  asdpLogo: {
+    width: "clamp(50px, 20vw, 150px)"
+  }
+});
+var CardTicket = ({
+  shipType,
+  logoSrc = "/assets/logo/asdp-default.svg",
+  shipName,
+  availableSeats,
+  departure,
+  arrival,
+  duration,
+  actionButtons = [],
+  price,
+  primaryButton,
+  facilities,
+  shipIcon,
+  facilityIcon
+}) => {
+  const styles = useStyles5();
+  const threshold = availableSeats.threshold ?? 50;
+  const isLowSeats = availableSeats.count <= threshold;
+  return /* @__PURE__ */ jsxs("div", { className: styles.ticketWrapper, children: [
+    /* @__PURE__ */ jsxs(Card, { className: styles.ticketLeftCard, children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: shipType.tooltip || shipType.label,
+          relationship: "label",
+          appearance: "inverted",
+          children: /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "large",
+              appearance: "filled",
+              color: shipType.color,
+              iconPosition: "before",
+              shape: "rounded",
+              children: shipType.label
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logoSrc,
+          className: styles.asdpLogo,
+          alt: "Logo"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          size: "large",
+          appearance: "tint",
+          color: isLowSeats ? "danger" : "success",
+          iconPosition: "after",
+          shape: "rounded",
+          children: [
+            "Tersedia ",
+            availableSeats.count
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Subtitle2, { children: shipName }),
+      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.circularLeft,
+          style: {
+            top: `${18 + index * 60}px`
+          }
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: styles.circularLeftMd }),
+      /* @__PURE__ */ jsx("div", { className: styles.circularRightMd })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: styles.ticketMiddleCard, children: [
+      /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          size: "extra-large",
+          appearance: "tint",
+          color: isLowSeats ? "danger" : "success",
+          iconPosition: "after",
+          shape: "rounded",
+          children: [
+            "Tersedia ",
+            availableSeats.count
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+          /* @__PURE__ */ jsx(Caption1, { children: departure.day }),
+          /* @__PURE__ */ jsx(Title2, { children: departure.time }),
+          /* @__PURE__ */ jsx(Caption1, { children: departure.location })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
+          /* @__PURE__ */ jsxs(Caption2, { children: [
+            "Estimasi ",
+            duration
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: shipIcon || /* @__PURE__ */ jsx("span", { children: "\u{1F6A2}" }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+          /* @__PURE__ */ jsx(Caption1, { children: arrival.day }),
+          /* @__PURE__ */ jsx(Title2, { children: arrival.time }),
+          /* @__PURE__ */ jsx(Caption1, { children: arrival.location })
+        ] })
+      ] }) }),
+      actionButtons.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: actionButtons.slice(0, 2).map((button, idx) => /* @__PURE__ */ jsx(
         Button,
         {
-          style: { width: "100%" },
-          type: "button",
-          appearance: "primary",
-          onClick: handleButtonClick,
-          children: buttonText
+          appearance: "outline",
+          shape: "circular",
+          style: {
+            flex: 1,
+            borderColor: tokens.colorBrandBackground,
+            color: tokens.colorBrandBackground
+          },
+          icon: button.icon,
+          size: "medium",
+          onClick: button.onClick,
+          children: button.label
+        },
+        idx
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+          /* @__PURE__ */ jsx(Subtitle2, { children: "Total harga" }),
+          /* @__PURE__ */ jsxs(Title3, { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [
+            "IDR ",
+            price
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: primaryButton.onClick,
+            appearance: "primary",
+            size: "medium",
+            shape: "circular",
+            icon: primaryButton.icon,
+            style: { backgroundColor: "#58C91B" },
+            children: primaryButton.label
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
+        /* @__PURE__ */ jsx(Subtitle2, { children: "Fasilitas" }),
+        /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
+          facilityIcon || /* @__PURE__ */ jsx("span", { children: "\u2713" }),
+          /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
+        ] }, idx)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.circularRight,
+          style: {
+            top: `${18 + index * 60}px`
+          }
+        },
+        index
+      )) })
+    ] })
+  ] });
+};
+var BackgroundTicketCard = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 1850 465",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("g", { filter: "url(#filter0_dd_156_32114)", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1819.6 9.85962C1815.43 8.63925 1810.75 8.00891 1806.01 8.02751H523.015C517.214 8.02224 511.553 8.98897 506.816 10.7941C502.078 12.5993 498.497 15.1537 496.568 18.1041C492.794 23.9726 485.817 29.088 476.552 32.7781C467.288 36.4682 456.169 38.5603 444.659 38.7794C443.997 38.7794 443.3 38.7794 442.604 38.7794C430.731 38.7805 419.152 36.7877 409.476 33.0776C399.799 29.3676 392.505 24.1246 388.606 18.0766C386.681 15.1284 383.106 12.5753 378.374 10.7702C373.643 8.96512 367.989 7.99718 362.193 8.00001H43.9587C40.2864 7.9988 36.6498 8.38797 33.2567 9.1453C29.8635 9.90262 26.7806 11.0133 24.184 12.4137C21.5873 13.814 19.5279 15.4767 18.1237 17.3066C16.7194 19.1365 15.9978 21.0978 16 23.0782V425.922C15.9978 427.902 16.7194 429.863 18.1237 431.693C19.5279 433.523 21.5873 435.186 24.184 436.586C26.7806 437.987 29.8635 439.097 33.2567 439.855C36.6498 440.612 40.2864 441.001 43.9587 441H362.193C367.99 441.005 373.646 440.039 378.379 438.233C383.111 436.428 386.685 433.873 388.606 430.923C392.505 424.875 399.799 419.632 409.476 415.922C419.152 412.212 430.731 410.219 442.604 410.221C443.3 410.221 443.997 410.221 444.659 410.221C456.169 410.44 467.288 412.532 476.552 416.222C485.817 419.912 492.794 425.027 496.568 430.896C498.495 433.847 502.075 436.402 506.814 438.208C511.552 440.013 517.214 440.979 523.015 440.973H1806.04C1809.71 440.974 1813.35 440.585 1816.74 439.827C1820.14 439.07 1823.22 437.959 1825.82 436.559C1828.41 435.159 1830.47 433.496 1831.88 431.666C1833.28 429.836 1834 427.875 1834 425.894V23.0599C1834 20.3673 1832.66 17.7243 1830.13 15.4037C1827.59 13.0831 1823.96 11.1692 1819.6 9.85962ZM447.343 390.645C447.352 391.126 447.104 391.599 446.628 392.007C446.152 392.415 445.469 392.74 444.659 392.944C444.032 393.133 443.322 393.228 442.604 393.219C441.977 393.22 441.355 393.154 440.775 393.025C440.195 392.896 439.668 392.707 439.224 392.467C438.78 392.228 438.429 391.944 438.19 391.631C437.951 391.318 437.829 390.983 437.831 390.645V360.818C437.831 360.135 438.334 359.48 439.229 358.998C440.124 358.515 441.338 358.244 442.604 358.244C443.317 358.24 444.022 358.328 444.659 358.5C445.145 358.623 445.587 358.791 445.967 358.995C446.856 359.484 447.351 360.142 447.343 360.827V390.645ZM447.343 339.556C447.352 340.038 447.104 340.511 446.628 340.919C446.152 341.326 445.469 341.652 444.659 341.856C444.029 342.04 443.321 342.135 442.604 342.13C441.975 342.134 441.352 342.07 440.769 341.942C440.187 341.814 439.658 341.624 439.214 341.385C438.769 341.145 438.418 340.86 438.18 340.546C437.943 340.232 437.824 339.895 437.831 339.556V309.702C437.829 309.364 437.951 309.028 438.19 308.716C438.429 308.403 438.78 308.119 439.224 307.879C439.668 307.64 440.195 307.45 440.775 307.322C441.355 307.193 441.977 307.127 442.604 307.128C443.317 307.124 444.022 307.212 444.659 307.384C445.144 307.504 445.587 307.669 445.967 307.87C446.853 308.36 447.347 309.018 447.343 309.702V339.556ZM447.343 288.468C447.35 288.949 447.101 289.422 446.625 289.829C446.149 290.237 445.467 290.562 444.659 290.767C444.029 290.952 443.321 291.047 442.604 291.042C441.971 291.043 441.345 290.975 440.761 290.843C440.178 290.711 439.649 290.517 439.207 290.273C438.761 290.033 438.409 289.747 438.173 289.432C437.937 289.117 437.82 288.78 437.831 288.441V258.614C437.829 258.275 437.951 257.94 438.19 257.627C438.429 257.314 438.78 257.03 439.224 256.791C439.668 256.552 440.195 256.362 440.775 256.233C441.355 256.104 441.977 256.039 442.604 256.04C443.317 256.036 444.022 256.123 444.659 256.296C445.148 256.413 445.591 256.577 445.967 256.782C446.853 257.272 447.347 257.929 447.343 258.614V288.468ZM447.343 237.371C447.353 237.854 447.105 238.328 446.63 238.737C446.154 239.147 445.47 239.474 444.659 239.679C444.028 239.861 443.32 239.953 442.604 239.945C441.977 239.946 441.355 239.88 440.775 239.751C440.195 239.622 439.668 239.433 439.224 239.193C438.78 238.954 438.429 238.67 438.19 238.357C437.951 238.044 437.829 237.709 437.831 237.371V207.535C437.831 207.197 437.954 206.863 438.195 206.551C438.435 206.239 438.786 205.956 439.23 205.718C439.673 205.479 440.2 205.291 440.779 205.162C441.358 205.034 441.978 204.969 442.604 204.97C443.319 204.968 444.023 205.059 444.659 205.235C445.148 205.352 445.591 205.516 445.967 205.721C446.41 205.962 446.759 206.248 446.995 206.563C447.232 206.877 447.35 207.214 447.343 207.553V237.371ZM447.343 186.282C447.354 186.764 447.107 187.238 446.63 187.646C446.154 188.054 445.47 188.379 444.659 188.582C444.032 188.771 443.322 188.866 442.604 188.856C441.335 188.859 440.115 188.592 439.207 188.114C438.327 187.622 437.834 186.966 437.831 186.282V156.456C437.831 155.773 438.334 155.118 439.229 154.635C440.124 154.153 441.338 153.881 442.604 153.881C443.875 153.883 445.095 154.152 446.001 154.633C446.887 155.122 447.381 155.78 447.377 156.465L447.343 186.282ZM447.343 135.194C447.352 135.676 447.104 136.149 446.628 136.556C446.152 136.964 445.469 137.289 444.659 137.493C444.032 137.683 443.322 137.778 442.604 137.768C441.977 137.769 441.355 137.704 440.775 137.575C440.195 137.446 439.668 137.256 439.224 137.017C438.78 136.778 438.429 136.493 438.19 136.18C437.951 135.868 437.829 135.532 437.831 135.194V105.367C437.831 104.685 438.334 104.03 439.229 103.547C440.124 103.064 441.338 102.793 442.604 102.793C443.317 102.789 444.022 102.877 444.659 103.05C445.145 103.173 445.587 103.34 445.967 103.544C446.856 104.033 447.351 104.692 447.343 105.376V135.194ZM447.343 84.1057C447.352 84.5874 447.104 85.0604 446.628 85.4681C446.152 85.8758 445.469 86.201 444.659 86.405C444.029 86.5898 443.321 86.6845 442.604 86.6798C441.975 86.6835 441.352 86.6194 440.769 86.4913C440.187 86.3632 439.658 86.1739 439.214 85.9341C438.769 85.6943 438.418 85.409 438.18 85.0951C437.943 84.7811 437.824 84.4447 437.831 84.1057V54.279C437.829 53.9407 437.951 53.6054 438.19 53.2925C438.429 52.9797 438.78 52.6954 439.224 52.4561C439.668 52.2168 440.195 52.0273 440.775 51.8983C441.355 51.7694 441.977 51.7037 442.604 51.7049C443.317 51.7007 444.022 51.7886 444.659 51.9614C445.144 52.0812 445.587 52.2455 445.967 52.4469C446.856 52.9357 447.351 53.5943 447.343 54.279V84.1057Z",
+          fill: "white"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "filter",
+        {
+          id: "filter0_dd_156_32114",
+          x: "0",
+          y: "0",
+          width: "1850",
+          height: "465",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [
+            /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "SourceAlpha",
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                result: "hardAlpha"
+              }
+            ),
+            /* @__PURE__ */ jsx("feOffset", {}),
+            /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1" }),
+            /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" }),
+            /* @__PURE__ */ jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_156_32114" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "SourceAlpha",
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                result: "hardAlpha"
+              }
+            ),
+            /* @__PURE__ */ jsx("feOffset", { dy: "8" }),
+            /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "8" }),
+            /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" }),
+            /* @__PURE__ */ jsx(
+              "feBlend",
+              {
+                mode: "normal",
+                in2: "effect1_dropShadow_156_32114",
+                result: "effect2_dropShadow_156_32114"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feBlend",
+              {
+                mode: "normal",
+                in: "SourceGraphic",
+                in2: "effect2_dropShadow_156_32114",
+                result: "shape"
+              }
+            )
+          ]
         }
       ) })
+    ]
+  }
+);
+var BackgroundTicketCard_default = BackgroundTicketCard;
+var BackgroundTicketCardVertical = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 465 1750",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("g", { filter: "url(#filter0_dd_156_32115)", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M455.14 1719.6C456.36 1715.43 456.99 1710.75 456.973 1706.01V423.015C456.978 417.214 456.011 411.553 454.206 406.816C452.401 402.078 449.846 398.497 446.896 396.568C441.027 392.794 435.912 385.817 432.222 376.552C428.532 367.288 426.44 356.169 426.221 344.659C426.221 343.997 426.221 343.3 426.221 342.604C426.219 330.731 428.212 319.152 431.922 309.476C435.632 299.799 440.875 292.505 446.923 288.606C449.872 286.681 452.425 283.106 454.23 278.374C456.035 273.643 457.003 267.989 457 262.193V43.9587C457.001 40.2864 456.612 36.6498 455.855 33.2567C455.097 29.8635 453.987 26.7806 452.586 24.184C451.186 21.5873 449.523 19.5279 447.693 18.1237C445.863 16.7194 443.902 15.9978 441.922 16H23.0782C21.0978 16 19.1365 16.7194 17.3066 18.1237C15.4767 19.5279 13.814 21.5873 12.4137 24.184C11.0133 26.7806 9.90262 29.8635 9.1453 33.2567C8.38797 36.6498 7.9988 40.2864 8.00001 43.9587V262.193C7.99512 267.99 8.96103 273.646 10.7672 278.379C12.5723 283.111 15.1274 286.685 18.0766 288.606C24.1246 292.505 29.3676 299.799 33.0776 309.476C36.7877 319.152 38.7805 330.731 38.7794 342.604C38.7794 343.3 38.7794 343.997 38.7794 344.659C38.5603 356.169 36.4682 367.288 32.7781 376.552C29.088 385.817 23.9726 392.794 18.1041 396.568C15.1537 398.495 12.5993 402.075 10.7941 406.814C8.98897 411.552 8.02224 417.214 8.02751 423.015V1706.04C8.02604 1709.71 8.41503 1713.35 9.17279 1716.74C9.93055 1720.14 11.0413 1723.22 12.4414 1725.82C13.8414 1728.41 15.5041 1730.47 17.3342 1731.88C19.1643 1733.28 21.1253 1734 23.1059 1734H441.94C444.633 1734 447.276 1732.66 449.596 1730.13C451.917 1727.59 453.831 1723.96 455.14 1719.6ZM64.3552 347.343C63.8743 347.352 63.4013 347.104 62.9936 346.628C62.5859 346.152 62.261 345.469 62.0569 344.659C61.8675 344.032 61.7723 343.322 61.7814 342.604C61.7799 341.977 61.8461 341.355 61.975 340.775C62.1039 340.195 62.2932 339.668 62.5325 339.224C62.7718 338.78 63.0562 338.429 63.3691 338.19C63.682 337.951 64.0173 337.829 64.3552 337.831H94.1823C94.8653 337.831 95.5203 338.334 96.0023 339.229C96.4843 340.124 96.7557 341.338 96.7557 342.604C96.7599 343.317 96.672 344.022 96.5 344.659C96.3771 345.145 96.2092 345.587 96.0051 345.967C95.5163 346.856 94.8585 347.351 94.1733 347.343H64.3552ZM115.444 347.343C114.962 347.352 114.489 347.104 114.081 346.628C113.674 346.152 113.349 345.469 113.145 344.659C112.96 344.029 112.865 343.321 112.87 342.604C112.866 341.975 112.93 341.352 113.058 340.769C113.186 340.187 113.376 339.658 113.615 339.214C113.855 338.769 114.14 338.418 114.454 338.18C114.768 337.943 115.105 337.824 115.444 337.831H145.298C145.636 337.829 145.972 337.951 146.284 338.19C146.597 338.429 146.881 338.78 147.121 339.224C147.36 339.668 147.55 340.195 147.678 340.775C147.807 341.355 147.873 341.977 147.872 342.604C147.876 343.317 147.788 344.022 147.616 344.659C147.496 345.144 147.331 345.587 147.13 345.967C146.64 346.853 145.982 347.347 145.298 347.343H115.444ZM166.532 347.343C166.051 347.35 165.578 347.101 165.171 346.625C164.763 346.149 164.438 345.467 164.233 344.659C164.048 344.029 163.953 343.321 163.958 342.604C163.957 341.971 164.025 341.345 164.157 340.761C164.289 340.178 164.483 339.649 164.727 339.207C164.967 338.761 165.253 338.409 165.568 338.173C165.883 337.937 166.22 337.82 166.559 337.831H196.386C196.725 337.829 197.06 337.951 197.373 338.19C197.686 338.429 197.97 338.78 198.209 339.224C198.448 339.668 198.638 340.195 198.767 340.775C198.896 341.355 198.961 341.977 198.96 342.604C199.036 343.317 198.948 344.022 198.776 344.659C198.659 345.148 198.505 345.591 198.299 345.967C197.809 346.853 197.152 347.347 196.468 347.343H166.532ZM217.629 347.343C217.146 347.353 216.672 347.105 216.263 346.63C215.853 346.154 215.526 345.47 215.321 344.659C215.139 344.028 215.047 343.32 215.055 342.604C215.054 341.977 215.12 341.355 215.249 340.775C215.378 340.195 215.567 339.668 215.807 339.224C216.046 338.78 216.33 338.429 216.643 338.19C216.956 337.951 217.291 337.829 217.629 337.831H247.465C247.803 337.831 248.137 337.954 248.449 338.195C248.761 338.435 249.044 338.786 249.282 339.23C249.521 339.673 249.709 340.2 249.838 340.779C249.966 341.358 250.031 341.978 250.03 342.604C250.032 343.319 249.941 344.023 249.765 344.659C249.648 345.148 249.484 345.591 249.279 345.967C248.964 346.41 248.578 346.759 248.163 346.995C247.748 347.232 247.311 347.35 246.873 347.343H217.629ZM268.718 347.343C268.236 347.354 267.762 347.107 267.354 346.63C266.946 346.154 266.621 345.47 266.418 344.659C266.229 344.032 266.134 343.322 266.144 342.604C266.141 341.335 266.408 340.115 266.886 339.207C267.378 338.327 268.034 337.834 268.718 337.831H298.544C299.227 337.831 299.882 338.334 300.365 339.229C300.847 340.124 301.119 341.338 301.119 342.604C301.117 343.875 300.848 345.095 300.367 346.001C299.878 346.887 299.22 347.381 298.535 347.377L268.718 347.343ZM319.806 347.343C319.324 347.352 318.851 347.104 318.444 346.628C318.036 346.152 317.711 345.469 317.507 344.659C317.317 344.032 317.222 343.322 317.232 342.604C317.231 341.977 317.296 341.355 317.425 340.775C317.554 340.195 317.744 339.668 317.983 339.224C318.222 338.78 318.507 338.429 318.82 338.19C319.132 337.951 319.468 337.829 319.806 337.831H349.633C350.315 337.831 350.97 338.334 351.453 339.229C351.936 340.124 352.207 341.338 352.207 342.604C352.211 343.317 352.123 344.022 351.95 344.659C351.827 345.145 351.66 345.587 351.456 345.967C350.967 346.856 350.308 347.351 349.624 347.343H319.806ZM370.894 347.343C370.413 347.352 369.94 347.104 369.532 346.628C369.124 346.152 368.799 345.469 368.595 344.659C368.41 344.029 368.315 343.321 368.32 342.604C368.316 341.975 368.38 341.352 368.508 340.769C368.637 340.187 368.826 339.658 369.066 339.214C369.306 338.769 369.592 338.418 369.905 338.18C370.219 337.943 370.555 337.824 370.894 337.831H400.721C401.059 337.829 401.395 337.951 401.707 338.19C402.02 338.429 402.305 388.78 402.544 339.224C402.783 339.668 402.973 340.195 403.102 340.775C403.231 341.355 403.296 341.977 403.295 342.604C403.299 343.317 403.212 344.022 403.039 344.659C402.919 345.144 402.755 345.587 402.553 345.967C402.064 346.856 401.406 347.351 400.721 347.343H370.894Z",
+          fill: "white"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "filter",
+        {
+          id: "filter0_dd_156_32115",
+          x: "0",
+          y: "0",
+          width: "465",
+          height: "1750",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [
+            /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "SourceAlpha",
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                result: "hardAlpha"
+              }
+            ),
+            /* @__PURE__ */ jsx("feOffset", {}),
+            /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1" }),
+            /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feBlend",
+              {
+                mode: "normal",
+                in2: "BackgroundImageFix",
+                result: "effect1_dropShadow_156_32115"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                in: "SourceAlpha",
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                result: "hardAlpha"
+              }
+            ),
+            /* @__PURE__ */ jsx("feOffset", { dy: "8" }),
+            /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "8" }),
+            /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ jsx(
+              "feColorMatrix",
+              {
+                type: "matrix",
+                values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feBlend",
+              {
+                mode: "normal",
+                in2: "effect1_dropShadow_156_32115",
+                result: "effect2_dropShadow_156_32115"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "feBlend",
+              {
+                mode: "normal",
+                in: "SourceGraphic",
+                in2: "effect2_dropShadow_156_32115",
+                result: "shape"
+              }
+            )
+          ]
+        }
+      ) })
+    ]
+  }
+);
+var BackgroundTicketCardVertical_default = BackgroundTicketCardVertical;
+var useStyles6 = makeStyles({
+  card: {
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "0px",
+    borderRadius: tokens.borderRadiusXLarge
+  },
+  menuList: {
+    display: "flex",
+    flexDirection: "column",
+    "@media (max-width: 1200px)": {
+      flexDirection: "row",
+      overflowX: "auto",
+      flexWrap: "nowrap",
+      gap: "0px",
+      WebkitOverflowScrolling: "touch",
+      scrollbarWidth: "thin",
+      justifyContent: "space-around"
+    }
+  },
+  menuItem: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    padding: "12px",
+    borderRadius: tokens.borderRadiusMedium,
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    textDecoration: "none",
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: "none",
+    gap: "12px",
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    },
+    "@media (max-width: 1200px)": {
+      padding: "10px 12px",
+      flexShrink: 0,
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center"
+    }
+  },
+  menuItemActive: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    color: tokens.colorNeutralForeground1,
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground3Hover
+    }
+  },
+  logo: {
+    height: "32px",
+    width: "32px",
+    flexShrink: 0
+  },
+  textContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    "@media (max-width: 1200px)": {
+      alignItems: "center"
+    }
+  },
+  label: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: "1.2"
+  },
+  description: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2,
+    lineHeight: "1.4",
+    "@media (max-width: 1200px)": {
+      fontSize: tokens.fontSizeBase100,
+      whiteSpace: "nowrap"
+    }
+  },
+  dividerVertical: {
+    "@media (min-width: 1200px)": {
+      display: "none"
+    }
+  },
+  dividerHorizontal: {
+    "@media (max-width: 1200px)": {
+      display: "none"
+    }
+  }
+});
+var CardServiceMenu = ({
+  items,
+  activeItemId,
+  onItemClick,
+  showDescriptions = true,
+  className
+}) => {
+  const styles = useStyles6();
+  const getMenuItemClass = (itemId) => {
+    const isActive = activeItemId === itemId;
+    return mergeClasses(
+      styles.menuItem,
+      isActive && styles.menuItemActive
+    );
+  };
+  return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: items.map((item, index) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: getMenuItemClass(item.id),
+        onClick: () => onItemClick?.(item.id),
+        style: item.customStyle,
+        children: [
+          item.logo && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.logo,
+              alt: item.label,
+              className: styles.logo
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.label, children: item.label }),
+            showDescriptions && item.description && /* @__PURE__ */ jsx("span", { className: styles.description, children: item.description })
+          ] })
+        ]
+      }
+    ),
+    index < items.length - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
+      /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
     ] })
-  ] }) }) });
+  ] }, item.id)) }) });
+};
+var fontWeight = {
+  "Medium": 500};
+var sharedColors = {
+  "Shared_Cranberry_Primary": "#c50f1f"};
+var lightModeColors = {
+  "Brand_Stroke_1_Rest": "#00B3BD"};
+var tokensV2_default = {
+  lightModeColors};
+var DatePickerInput = forwardRef(
+  ({
+    field,
+    placeholder,
+    disabled,
+    appearance,
+    size,
+    contentBefore,
+    onClick,
+    style,
+    max,
+    ...restProps
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dateValue = field.value ? new Date(field.value) : void 0;
+    const onSelectDate = (date) => {
+      if (date) {
+        const offset = date.getTimezoneOffset();
+        const adjustedDate = new Date(date.getTime() - offset * 60 * 1e3);
+        field.onChange(adjustedDate.toISOString().split("T")[0]);
+        setIsOpen(false);
+      }
+    };
+    const formatDate = (dateString) => {
+      if (!dateString) return "";
+      const date = new Date(dateString);
+      return date.toLocaleDateString("id-ID", {
+        day: "numeric",
+        month: "long",
+        year: "numeric"
+      });
+    };
+    const handleInputClick = (e) => {
+      e?.preventDefault();
+      if (!disabled) {
+        setIsOpen(!isOpen);
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (_, data) => setIsOpen(data.open), trapFocus: true, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...restProps,
+          value: formatDate(field.value),
+          readOnly: true,
+          placeholder: placeholder || "Pilih tanggal",
+          disabled,
+          appearance,
+          size,
+          contentBefore,
+          onClick: handleInputClick,
+          style: {
+            cursor: disabled ? "not-allowed" : "pointer",
+            ...style
+          },
+          contentAfter: /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled) {
+                  setIsOpen(!isOpen);
+                }
+              },
+              style: {
+                cursor: disabled ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:calendar-24-regular" })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverSurface, { tabIndex: -1, style: { maxWidth: "530px" }, children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          value: dateValue,
+          onSelectDate,
+          showGoToToday: true,
+          highlightSelectedMonth: true,
+          showMonthPickerAsOverlay: false,
+          maxDate: max ? new Date(max) : void 0
+        }
+      ) })
+    ] });
+  }
+);
+DatePickerInput.displayName = "DatePickerInput";
+var DatePickerInput_default = DatePickerInput;
+var useStyles7 = makeStyles({
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS,
+    marginBottom: tokens.spacingVerticalM
+  },
+  errorText: {
+    color: tokens.colorPaletteRedBackground1,
+    fontSize: tokens.fontSizeBase200
+  },
+  helperText: {
+    color: tokens.colorNeutralForeground2,
+    fontSize: tokens.fontSizeBase200
+  },
+  disabledFilledLighter: {
+    backgroundColor: tokens.colorNeutralBackground4,
+    border: "none",
+    "& input": {
+      backgroundColor: tokens.colorNeutralBackground4,
+      border: "none"
+    }
+  },
+  fileInput: {
+    padding: tokens.spacingVerticalS,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground1,
+    fontSize: tokens.fontSizeBase300,
+    "&:focus": {
+      outline: `2px solid ${tokens.colorBrandStroke1}`
+    }
+  },
+  reactSelect: {
+    // Custom styles akan dihandle via styles prop react-select
+  },
+  reactSelectError: {
+    // Custom styles akan dihandle via styles prop react-select
+  },
+  phoneContainer: {
+    display: "flex",
+    gap: tokens.spacingHorizontalS,
+    alignItems: "flex-start",
+    width: "100%"
+  },
+  phoneCountrySelect: {
+    minWidth: "120px",
+    maxWidth: "120px",
+    flexShrink: 0
+  },
+  switchWrapper: {
+    "& .fui-Switch": {
+      minHeight: "20px"
+    },
+    "& .fui-Switch__indicator": {
+      height: "20px",
+      width: "40px",
+      borderRadius: "10px"
+    },
+    "& .fui-Switch__thumb": {
+      height: "14px",
+      width: "14px",
+      borderRadius: "50%"
+    }
+  },
+  otpInput: {
+    "& input": {
+      textAlign: "center"
+    }
+  },
+  inputWithAutocomplete: {
+    "& input:-webkit-autofill": {
+      "-webkit-box-shadow": "0 0 0 30px white inset !important",
+      "-webkit-text-fill-color": `${tokens.colorNeutralForeground1} !important`
+    },
+    "& input:-webkit-autofill:hover": {
+      "-webkit-box-shadow": "0 0 0 30px white inset !important"
+    },
+    "& input:-webkit-autofill:focus": {
+      "-webkit-box-shadow": "0 0 0 30px white inset !important"
+    },
+    "& input:-webkit-autofill:active": {
+      "-webkit-box-shadow": "0 0 0 30px white inset !important"
+    }
+  },
+  phoneInputWrapper: {
+    width: "100%",
+    "& .react-tel-input": {
+      width: "100%"
+    },
+    "& .react-tel-input .form-control": {
+      width: "100%",
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      borderRadius: tokens.borderRadiusMedium,
+      padding: tokens.spacingVerticalS,
+      paddingLeft: "48px",
+      fontSize: tokens.fontSizeBase300,
+      fontFamily: tokens.fontFamilyBase,
+      backgroundColor: tokens.colorNeutralBackground1,
+      color: tokens.colorNeutralForeground1,
+      outline: "none",
+      height: "auto",
+      minHeight: "40px"
+    },
+    "& .react-tel-input .form-control::placeholder": {
+      fontSize: tokens.fontSizeBase400
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: `1px solid ${tokens.colorNeutralStroke1Hover}`
+    },
+    "& .react-tel-input .form-control:focus": {
+      borderBottom: `2px solid ${tokens.colorBrandStroke1}`
+      // boxShadow: `0 0 0 1px ${tokens.colorBrandStroke1}`,
+    },
+    "& .react-tel-input .form-control:disabled": {
+      backgroundColor: tokens.colorNeutralBackground4,
+      color: tokens.colorNeutralForegroundDisabled,
+      cursor: "not-allowed"
+    },
+    "& .react-tel-input .flag-dropdown": {
+      border: "none",
+      backgroundColor: "transparent",
+      borderRadius: tokens.borderRadiusMedium
+    },
+    "& .react-tel-input .selected-flag": {
+      padding: "0 0 0 8px",
+      width: "40px",
+      backgroundColor: "transparent"
+    },
+    "& .react-tel-input .selected-flag:hover": {
+      backgroundColor: "transparent"
+    },
+    "& .react-tel-input .flag-dropdown.open .selected-flag": {
+      backgroundColor: "transparent"
+    }
+  },
+  phoneInputError: {
+    "& .react-tel-input .form-control": {
+      border: `2px solid ${tokens.colorPaletteRedBorder2}`
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: `2px solid ${tokens.colorPaletteRedBorder2}`,
+      boxShadow: `0 0 0 1px ${tokens.colorPaletteRedBorder2}`
+    }
+  },
+  classRadioGroup: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "12px"
+  },
+  classRadio: {
+    "& .fui-Radio__indicator": {
+      display: "none"
+    },
+    "& .fui-Radio__label": {
+      padding: "10px 24px",
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      borderRadius: tokens.borderRadiusCircular,
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      fontSize: tokens.fontSizeBase300,
+      color: tokens.colorNeutralForeground2
+    },
+    "&:hover .fui-Radio__label": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      border: `1px solid ${tokensV2_default.lightModeColors.Brand_Stroke_1_Rest}`
+    },
+    "& .fui-Radio__input:checked ~ .fui-Radio__label": {
+      borderRadius: tokens.borderRadiusXLarge,
+      border: `1px solid ${tokensV2_default.lightModeColors.Brand_Stroke_1_Rest}`,
+      color: tokensV2_default.lightModeColors.Brand_Stroke_1_Rest,
+      backgroundColor: "transparent"
+    },
+    // Fallback for aria-checked if needed
+    '&[aria-checked="true"] .fui-Radio__label': {
+      borderRadius: tokens.borderRadiusXLarge,
+      border: `1px solid ${tokensV2_default.lightModeColors.Brand_Stroke_1_Rest}`,
+      color: tokensV2_default.lightModeColors.Brand_Stroke_1_Rest,
+      backgroundColor: "transparent"
+    }
+  }
+});
+var DEFAULT_COUNTRY_CODES = [
+  { code: "AF", name: "Afghanistan", dialCode: "+93", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "AL", name: "Albania", dialCode: "+355", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", passportRegex: "^[0-9]{9}$" },
+  { code: "AS", name: "American Samoa", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
+  { code: "AD", name: "Andorra", dialCode: "+376", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AO", name: "Angola", dialCode: "+244", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AI", name: "Anguilla", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AQ", name: "Antarctica", dialCode: "+672", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "AR", name: "Argentina", dialCode: "+54", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "AM", name: "Armenia", dialCode: "+374", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "AW", name: "Aruba", dialCode: "+297", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "AU", name: "Australia", dialCode: "+61", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "AT", name: "Austria", dialCode: "+43", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BS", name: "Bahamas", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BH", name: "Bahrain", dialCode: "+973", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "BB", name: "Barbados", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BY", name: "Belarus", dialCode: "+375", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BE", name: "Belgium", dialCode: "+32", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BZ", name: "Belize", dialCode: "+501", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BJ", name: "Benin", dialCode: "+229", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BM", name: "Bermuda", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BT", name: "Bhutan", dialCode: "+975", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BO", name: "Bolivia", dialCode: "+591", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "BA",
+    name: "Bosnia and Herzegovina",
+    dialCode: "+387",
+    passportRegex: "^[A-Z]{2}[0-9]{6}$"
+  },
+  { code: "BW", name: "Botswana", dialCode: "+267", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BR", name: "Brazil", dialCode: "+55", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "BN", name: "Brunei", dialCode: "+673", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359", passportRegex: "^[0-9]{9}$" },
+  { code: "BF", name: "Burkina Faso", dialCode: "+226", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BI", name: "Burundi", dialCode: "+257", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KH", name: "Cambodia", dialCode: "+855", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "CM", name: "Cameroon", dialCode: "+237", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CA", name: "Canada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "CV", name: "Cape Verde", dialCode: "+238", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KY", name: "Cayman Islands", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "CF",
+    name: "Central African Republic",
+    dialCode: "+236",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "TD", name: "Chad", dialCode: "+235", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CL", name: "Chile", dialCode: "+56", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CN", name: "China", dialCode: "+86", passportRegex: "^[0-9]{9}$" },
+  { code: "CO", name: "Colombia", dialCode: "+57", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "KM", name: "Comoros", dialCode: "+269", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CG", name: "Congo", dialCode: "+242", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CR", name: "Costa Rica", dialCode: "+506", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "HR", name: "Croatia", dialCode: "+385", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "CU", name: "Cuba", dialCode: "+53", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CY", name: "Cyprus", dialCode: "+357", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", passportRegex: "^[0-9]{8}$" },
+  { code: "DK", name: "Denmark", dialCode: "+45", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "DJ", name: "Djibouti", dialCode: "+253", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "DM", name: "Dominica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "DO", name: "Dominican Republic", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "EC", name: "Ecuador", dialCode: "+593", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "EG", name: "Egypt", dialCode: "+20", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "SV", name: "El Salvador", dialCode: "+503", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ER", name: "Eritrea", dialCode: "+291", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "EE", name: "Estonia", dialCode: "+372", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "SZ", name: "Eswatini", dialCode: "+268", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "FJ", name: "Fiji", dialCode: "+679", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "FI", name: "Finland", dialCode: "+358", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "FR", name: "France", dialCode: "+33", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GA", name: "Gabon", dialCode: "+241", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GM", name: "Gambia", dialCode: "+220", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GE", name: "Georgia", dialCode: "+995", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "DE", name: "Germany", dialCode: "+49", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GH", name: "Ghana", dialCode: "+233", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GR", name: "Greece", dialCode: "+30", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GD", name: "Grenada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GT", name: "Guatemala", dialCode: "+502", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "GN", name: "Guinea", dialCode: "+224", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GW", name: "Guinea-Bissau", dialCode: "+245", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GY", name: "Guyana", dialCode: "+592", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HT", name: "Haiti", dialCode: "+509", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HN", name: "Honduras", dialCode: "+504", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "HU", name: "Hungary", dialCode: "+36", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "IS", name: "Iceland", dialCode: "+354", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "IN", name: "India", dialCode: "+91", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "IR", name: "Iran", dialCode: "+98", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "IQ", name: "Iraq", dialCode: "+964", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "IE", name: "Ireland", dialCode: "+353", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
+  { code: "IL", name: "Israel", dialCode: "+972", passportRegex: "^[0-9]{8,9}$" },
+  { code: "IT", name: "Italy", dialCode: "+39", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JM", name: "Jamaica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JP", name: "Japan", dialCode: "+81", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JO", name: "Jordan", dialCode: "+962", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KE", name: "Kenya", dialCode: "+254", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KI", name: "Kiribati", dialCode: "+686", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KP", name: "North Korea", dialCode: "+850", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KR", name: "South Korea", dialCode: "+82", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "KW", name: "Kuwait", dialCode: "+965", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "KG", name: "Kyrgyzstan", dialCode: "+996", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "LA", name: "Laos", dialCode: "+856", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "LV", name: "Latvia", dialCode: "+371", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "LB", name: "Lebanon", dialCode: "+961", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "LS", name: "Lesotho", dialCode: "+266", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LR", name: "Liberia", dialCode: "+231", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LY", name: "Libya", dialCode: "+218", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "LI", name: "Liechtenstein", dialCode: "+423", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LT", name: "Lithuania", dialCode: "+370", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "MO", name: "Macau", dialCode: "+853", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "MG", name: "Madagascar", dialCode: "+261", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MW", name: "Malawi", dialCode: "+265", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "MV", name: "Maldives", dialCode: "+960", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "ML", name: "Mali", dialCode: "+223", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MT", name: "Malta", dialCode: "+356", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MH", name: "Marshall Islands", dialCode: "+692", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MQ", name: "Martinique", dialCode: "+596", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MR", name: "Mauritania", dialCode: "+222", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MU", name: "Mauritius", dialCode: "+230", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "MX", name: "Mexico", dialCode: "+52", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "FM", name: "Micronesia", dialCode: "+691", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MD", name: "Moldova", dialCode: "+373", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MC", name: "Monaco", dialCode: "+377", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MN", name: "Mongolia", dialCode: "+976", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "ME", name: "Montenegro", dialCode: "+382", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MS", name: "Montserrat", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MA", name: "Morocco", dialCode: "+212", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "MZ", name: "Mozambique", dialCode: "+258", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MM", name: "Myanmar", dialCode: "+95", passportRegex: "^[A-Z]{1}[0-9]{6,7}$" },
+  { code: "NA", name: "Namibia", dialCode: "+264", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NR", name: "Nauru", dialCode: "+674", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NP", name: "Nepal", dialCode: "+977", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "NC", name: "New Caledonia", dialCode: "+687", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "NI", name: "Nicaragua", dialCode: "+505", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "NE", name: "Niger", dialCode: "+227", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "NO", name: "Norway", dialCode: "+47", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "OM", name: "Oman", dialCode: "+968", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PW", name: "Palau", dialCode: "+680", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PS", name: "Palestine", dialCode: "+970", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "PA", name: "Panama", dialCode: "+507", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "PG", name: "Papua New Guinea", dialCode: "+675", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "PY", name: "Paraguay", dialCode: "+595", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "PE", name: "Peru", dialCode: "+51", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PH", name: "Philippines", dialCode: "+63", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PL", name: "Poland", dialCode: "+48", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
+  { code: "PT", name: "Portugal", dialCode: "+351", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "RO", name: "Romania", dialCode: "+40", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "RU", name: "Russia", dialCode: "+7", passportRegex: "^[0-9]{9}$" },
+  { code: "RW", name: "Rwanda", dialCode: "+250", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "KN",
+    name: "Saint Kitts and Nevis",
+    dialCode: "+1",
+    passportRegex: "^[A-Z]{2}[0-9]{7}$"
+  },
+  { code: "LC", name: "Saint Lucia", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "VC",
+    name: "Saint Vincent and the Grenadines",
+    dialCode: "+1",
+    passportRegex: "^[A-Z]{2}[0-9]{7}$"
+  },
+  { code: "WS", name: "Samoa", dialCode: "+685", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SM", name: "San Marino", dialCode: "+378", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "ST",
+    name: "Sao Tome and Principe",
+    dialCode: "+239",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SN", name: "Senegal", dialCode: "+221", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "RS", name: "Serbia", dialCode: "+381", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "SC", name: "Seychelles", dialCode: "+248", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SL", name: "Sierra Leone", dialCode: "+232", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SG", name: "Singapore", dialCode: "+65", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SK", name: "Slovakia", dialCode: "+421", passportRegex: "^[0-9]{9}$" },
+  { code: "SI", name: "Slovenia", dialCode: "+386", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SB", name: "Solomon Islands", dialCode: "+677", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SO", name: "Somalia", dialCode: "+252", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "ES", name: "Spain", dialCode: "+34", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "LK", name: "Sri Lanka", dialCode: "+94", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SD", name: "Sudan", dialCode: "+249", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SR", name: "Suriname", dialCode: "+597", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SE", name: "Sweden", dialCode: "+46", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SY", name: "Syria", dialCode: "+963", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TW", name: "Taiwan", dialCode: "+886", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "TJ", name: "Tajikistan", dialCode: "+992", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "TZ", name: "Tanzania", dialCode: "+255", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TH", name: "Thailand", dialCode: "+66", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TL", name: "Timor-Leste", dialCode: "+670", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TG", name: "Togo", dialCode: "+228", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TO", name: "Tonga", dialCode: "+676", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TR", name: "Turkey", dialCode: "+90", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TM", name: "Turkmenistan", dialCode: "+993", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "TC",
+    name: "Turks and Caicos Islands",
+    dialCode: "+1",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "TV", name: "Tuvalu", dialCode: "+688", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "UG", name: "Uganda", dialCode: "+256", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  {
+    code: "AE",
+    name: "United Arab Emirates",
+    dialCode: "+971",
+    passportRegex: "^[A-Z]{1}[0-9]{7}$"
+  },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "US", name: "United States", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
+  { code: "UY", name: "Uruguay", dialCode: "+598", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "VU", name: "Vanuatu", dialCode: "+678", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "VA", name: "Vatican City", dialCode: "+379", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "YE", name: "Yemen", dialCode: "+967", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "ZM", name: "Zambia", dialCode: "+260", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263", passportRegex: "^[A-Z0-9]{6,10}$" }
+];
+var detectIdentityType = (value) => {
+  if (!value) return "id";
+  const stringValue = String(value);
+  if (stringValue.includes("@")) return "email";
+  if (stringValue.startsWith("+")) return "phone";
+  return "id";
+};
+var detectEmailOrPhoneStrict = (value) => {
+  if (!value) return "none";
+  if (value.includes("@")) return "email";
+  if (value.startsWith("+")) return "phone";
+  if (/^0\d/.test(value)) return "phone";
+  if (/^62\d/.test(value)) return "phone";
+  return "none";
+};
+function InputDynamic({
+  name,
+  control,
+  label,
+  type,
+  placeholder,
+  required = false,
+  disabled = false,
+  options = [],
+  multiple = false,
+  accept,
+  rows = 3,
+  min,
+  max,
+  step,
+  isMultiSelect = false,
+  selectScrollbarColor,
+  contentBefore,
+  appearance = "outline",
+  validationRules,
+  helperText,
+  className,
+  layout,
+  size,
+  onClick,
+  style,
+  countryCodes = DEFAULT_COUNTRY_CODES,
+  defaultCountry = "ID",
+  maxLength,
+  autoAdvance = false,
+  otpIndex,
+  hasError = false,
+  autoComplete,
+  onInput,
+  contentAfter,
+  onChange
+}) {
+  const styles = useStyles7();
+  const [showPassword, setShowPassword] = useState(false);
+  const [isPhoneMode, setIsPhoneMode] = useState(false);
+  const [emailOrPhoneType, setEmailOrPhoneType] = useState("none");
+  const [identityType, setIdentityType] = useState("id");
+  const [lastPhoneValue, setLastPhoneValue] = useState("");
+  const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = useState("");
+  const inputRef = useRef(null);
+  const phoneInputRef = useRef(null);
+  const emailOrPhoneInputRef = useRef(null);
+  const shouldFocusRef = useRef(false);
+  const isBackspaceNavigationRef = useRef(false);
+  const getSelectStyles = (hasError2) => ({
+    menuPortal: (base) => ({
+      ...base,
+      zIndex: 9999999,
+      borderRadius: tokens.borderRadiusMedium
+    }),
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: hasError2 ? tokens.colorPaletteRedBorder2 : state.isFocused ? tokens.colorBrandStroke1 : tokens.colorNeutralStroke1,
+      borderRadius: tokens.borderRadiusMedium,
+      minHeight: "40px",
+      fontSize: tokens.fontSizeBase400,
+      backgroundColor: tokens.colorNeutralBackground1,
+      boxShadow: state.isFocused ? `0 0 0 2px ${hasError2 ? tokens.colorPaletteRedBorder2 : tokens.colorBrandStroke1}` : "none",
+      "&:hover": {
+        borderColor: hasError2 ? tokens.colorPaletteRedBorder2 : tokens.colorNeutralStroke1Hover
+      }
+    }),
+    menu: (provided) => ({
+      ...provided,
+      border: `1px solid ${tokens.colorNeutralStroke1}`,
+      borderRadius: tokens.borderRadiusMedium,
+      zIndex: 9999
+    }),
+    menuList: (provided) => ({
+      ...provided,
+      padding: 0,
+      // Opsional: bersihkan padding agar scrollbar mepet ke pinggir
+      maxHeight: "300px",
+      // Pastikan ada limit height agar scrollbar muncul
+      /* Targetkan Webkit Scrollbar di menuList */
+      "&::-webkit-scrollbar": {
+        width: "8px",
+        display: "block"
+        // Pastikan tampil
+      },
+      "&::-webkit-scrollbar-track": {
+        backgroundColor: tokens.colorNeutralBackground2,
+        borderRadius: "4px"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        backgroundColor: selectScrollbarColor || tokens.colorNeutralStroke2,
+        borderRadius: "4px"
+      },
+      "&::-webkit-scrollbar-thumb:hover": {
+        backgroundColor: selectScrollbarColor || tokens.colorBrandBackground
+      },
+      "&::-webkit-scrollbar-thumb:active": {
+        backgroundColor: selectScrollbarColor || tokens.colorBrandBackgroundPressed
+      }
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      fontSize: tokens.fontSizeBase300,
+      color: state.isSelected ? tokens.colorNeutralForegroundOnBrand : tokens.colorNeutralForeground1,
+      backgroundColor: state.isSelected ? tokens.colorBrandBackground : state.isFocused ? tokens.colorNeutralBackground1Hover : "transparent"
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: tokens.colorNeutralForeground3,
+      fontSize: tokens.fontSizeBase400
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      color: tokens.colorNeutralForeground1,
+      fontSize: tokens.fontSizeBase400
+    })
+  });
+  useEffect(() => {
+    if (shouldFocusRef.current) {
+      setTimeout(() => {
+        if (identityType === "phone" && phoneInputRef.current) {
+          const phoneInput = phoneInputRef.current.querySelector("input.form-control");
+          if (phoneInput) {
+            phoneInput.focus();
+            const len = phoneInput.value.length;
+            phoneInput.setSelectionRange(len, len);
+          }
+        } else if (inputRef.current) {
+          inputRef.current.focus();
+          const inputType = inputRef.current.type;
+          if (inputType === "text" || inputType === "tel" || inputType === "url" || inputType === "search") {
+            const len = inputRef.current.value.length;
+            inputRef.current.setSelectionRange(len, len);
+          }
+        }
+        shouldFocusRef.current = false;
+      }, 50);
+    }
+  }, [identityType]);
+  useEffect(() => {
+    if (shouldFocusRef.current && type === "emailOrPhone") {
+      setTimeout(() => {
+        if (emailOrPhoneType === "phone" && emailOrPhoneInputRef.current) {
+          const phoneInput = emailOrPhoneInputRef.current.querySelector("input.form-control");
+          if (phoneInput) {
+            phoneInput.focus();
+            const len = phoneInput.value.length;
+            phoneInput.setSelectionRange(len, len);
+          }
+        } else if (inputRef.current) {
+          inputRef.current.focus();
+          const inputType = inputRef.current.type;
+          if (inputType === "text" || inputType === "tel" || inputType === "url" || inputType === "search") {
+            const len = inputRef.current.value.length;
+            inputRef.current.setSelectionRange(len, len);
+          }
+        }
+        shouldFocusRef.current = false;
+      }, 50);
+    }
+  }, [emailOrPhoneType, type]);
+  const updateIdentityType = (value) => {
+    const stringValue = typeof value === "string" ? value : value?.phoneNumber || "";
+    const detectedType = detectIdentityType(stringValue);
+    if (detectedType !== identityType) {
+      setIdentityType(detectedType);
+    }
+  };
+  const updateEmailOrPhoneType = (value) => {
+    const stringValue = typeof value === "string" ? value : "";
+    const detectedType = detectEmailOrPhoneStrict(stringValue);
+    if (detectedType !== emailOrPhoneType) {
+      setEmailOrPhoneType(detectedType);
+    }
+  };
+  const renderInput = (field, error) => {
+    const shouldTransparentBorder = disabled && appearance !== "outline" && appearance !== "underline";
+    const inputStyle = shouldTransparentBorder ? { ...style, border: "transparent" } : style;
+    const handleInputChange = (e) => {
+      field.onChange(e);
+      if (onChange) {
+        onChange(e.target?.value ?? e);
+      }
+    };
+    const commonProps = {
+      ...field,
+      onChange: handleInputChange,
+      value: field.value ?? "",
+      placeholder,
+      disabled,
+      appearance: error ? "invalid" : appearance,
+      size,
+      contentBefore,
+      onClick,
+      style: inputStyle,
+      maxLength,
+      autoComplete: autoComplete || "off",
+      contentAfter,
+      max
+    };
+    const otpMatch = /^otp(\d+)$/.exec(String(name));
+    const otpIndex2 = otpMatch ? parseInt(otpMatch[1], 10) : null;
+    if (type === "emailOrPhone") {
+      updateEmailOrPhoneType(field.value);
+      const stringValue = typeof field.value === "string" ? field.value : "";
+      let inputType = "text";
+      let inputPlaceholder = placeholder || "Email atau Nomor HP";
+      if (emailOrPhoneType === "email") {
+        inputType = "email";
+        inputPlaceholder = placeholder || "Email";
+      } else if (emailOrPhoneType === "phone") {
+        inputType = "tel";
+        inputPlaceholder = placeholder || "Nomor HP";
+      }
+      const normalizePhoneNumber = (val) => {
+        if (!val) return val;
+        if (val.startsWith("08")) {
+          return "+62" + val.substring(1);
+        }
+        if (val.startsWith("62") && !val.startsWith("+")) {
+          return "+" + val;
+        }
+        return val;
+      };
+      const cleanPhoneValue = (val) => {
+        if (!val) return val;
+        const match = val.match(/^(\d{1,4})(0\d+)$/);
+        if (match) {
+          return match[1] + match[2].substring(1);
+        }
+        return val;
+      };
+      emailOrPhoneType === "phone" ? cleanPhoneValue(stringValue) : stringValue;
+      return /* @__PURE__ */ jsx("div", { className: styles.phoneContainer, children: emailOrPhoneType === "phone" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: emailOrPhoneInputRef,
+          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          children: /* @__PURE__ */ jsx(
+            PhoneInput,
+            {
+              country: defaultCountry.toLowerCase(),
+              value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
+              onChange: (value, data) => {
+                if (!value) {
+                  shouldFocusRef.current = true;
+                  field.onChange("");
+                  updateEmailOrPhoneType("");
+                  setLastEmailOrPhoneValue("");
+                  return;
+                }
+                const countryDialCode = data?.dialCode || "";
+                if (value === countryDialCode) {
+                  const dialCodeChanged = lastEmailOrPhoneValue && lastEmailOrPhoneValue !== countryDialCode && !lastEmailOrPhoneValue.startsWith(countryDialCode);
+                  const isInitial = !lastEmailOrPhoneValue;
+                  const wasFullNumber = lastEmailOrPhoneValue && lastEmailOrPhoneValue.length > 3;
+                  if (isInitial || dialCodeChanged || wasFullNumber) {
+                    const phoneValue2 = "+" + value;
+                    field.onChange(phoneValue2);
+                    updateEmailOrPhoneType(phoneValue2);
+                    setLastEmailOrPhoneValue(value);
+                    return;
+                  } else {
+                    shouldFocusRef.current = true;
+                    field.onChange("");
+                    updateEmailOrPhoneType("");
+                    setLastEmailOrPhoneValue("");
+                    return;
+                  }
+                }
+                const phoneValue = "+" + value;
+                field.onChange(phoneValue);
+                updateEmailOrPhoneType(phoneValue);
+                setLastEmailOrPhoneValue(value);
+              },
+              placeholder: inputPlaceholder,
+              disabled,
+              enableSearch: true
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          value: stringValue,
+          maxLength,
+          autoComplete: autoComplete || "off",
+          onChange: (e) => {
+            const newValue = e.target.value;
+            const willSwitchType = emailOrPhoneType !== detectEmailOrPhoneStrict(newValue);
+            if (willSwitchType) shouldFocusRef.current = true;
+            let normalizedValue = newValue;
+            const detectedType = detectEmailOrPhoneStrict(newValue);
+            if (detectedType === "phone") {
+              normalizedValue = normalizePhoneNumber(newValue);
+            }
+            field.onChange(normalizedValue);
+            updateEmailOrPhoneType(normalizedValue);
+          },
+          placeholder: inputPlaceholder,
+          disabled,
+          appearance,
+          size,
+          type: inputType,
+          style: { width: "100%" }
+        }
+      ) });
+    }
+    if (type === "identity") {
+      updateIdentityType(field.value);
+      const stringValue = typeof field.value === "string" ? field.value : "";
+      let inputType = "text";
+      let inputPlaceholder = placeholder || "Email, KTP, SIM, Passport, atau Nomor Telepon";
+      if (identityType === "email") {
+        inputType = "email";
+        inputPlaceholder = placeholder || "Email";
+      } else if (identityType === "phone") {
+        inputType = "tel";
+        inputPlaceholder = placeholder || "Nomor telepon";
+      } else if (identityType === "id") {
+        inputType = "text";
+        inputPlaceholder = placeholder || "KTP, SIM, atau Passport";
+      }
+      const cleanPhoneValue = (val) => {
+        if (!val) return val;
+        const stringVal = String(val);
+        const match = stringVal.match(/^(\d{1,4})(0\d+)$/);
+        if (match) {
+          return match[1] + match[2].substring(1);
+        }
+        return stringVal;
+      };
+      identityType === "phone" ? cleanPhoneValue(stringValue) : stringValue;
+      return /* @__PURE__ */ jsx("div", { className: styles.phoneContainer, children: identityType === "phone" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: phoneInputRef,
+          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          children: /* @__PURE__ */ jsx(
+            PhoneInput,
+            {
+              country: defaultCountry.toLowerCase(),
+              value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
+              onChange: (value, data) => {
+                if (!value) {
+                  shouldFocusRef.current = true;
+                  field.onChange("");
+                  updateIdentityType("");
+                  setLastPhoneValue("");
+                  return;
+                }
+                const countryDialCode = data?.dialCode || "";
+                if (value === countryDialCode) {
+                  const dialCodeChanged = lastPhoneValue && lastPhoneValue !== countryDialCode && !lastPhoneValue.startsWith(countryDialCode);
+                  const isInitial = !lastPhoneValue;
+                  const wasFullNumber = lastPhoneValue && lastPhoneValue.length > 3;
+                  if (isInitial || dialCodeChanged || wasFullNumber) {
+                    const phoneValue2 = "+" + value;
+                    field.onChange(phoneValue2);
+                    updateIdentityType(phoneValue2);
+                    setLastPhoneValue(value);
+                    return;
+                  } else {
+                    shouldFocusRef.current = true;
+                    field.onChange("");
+                    updateIdentityType("");
+                    setLastPhoneValue("");
+                    return;
+                  }
+                }
+                const phoneValue = "+" + value;
+                field.onChange(phoneValue);
+                updateIdentityType(phoneValue);
+                setLastPhoneValue(value);
+              },
+              placeholder: inputPlaceholder,
+              disabled,
+              enableSearch: true,
+              disableSearchIcon: true
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          value: stringValue,
+          maxLength,
+          autoComplete: autoComplete || "off",
+          onChange: (e) => {
+            const newValue = e.target.value;
+            const willSwitchType = identityType !== detectIdentityType(newValue);
+            if (willSwitchType) shouldFocusRef.current = true;
+            field.onChange(newValue);
+            updateIdentityType(newValue);
+          },
+          placeholder: inputPlaceholder,
+          disabled,
+          appearance,
+          size,
+          type: inputType,
+          style: { width: "100%" }
+        }
+      ) });
+    }
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ jsx(Textarea, { ...commonProps, rows, resize: "vertical" });
+      case "select":
+        return /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...field,
+            name: `${String(name)}_${Math.random().toString(36).substring(7)}`,
+            isDisabled: disabled,
+            placeholder,
+            options,
+            styles: getSelectStyles(!!error),
+            className: styles.reactSelect,
+            classNamePrefix: "react-select",
+            isMulti: isMultiSelect,
+            inputProps: {
+              autoComplete: "new-password",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              spellCheck: "false"
+            },
+            value: isMultiSelect ? options.filter((option) => field.value?.includes(option.value)) : options.find((option) => option.value === field.value) || null,
+            onChange: (selectedOption) => {
+              if (isMultiSelect) {
+                const values = selectedOption ? selectedOption.map((opt) => opt.value) : [];
+                field.onChange(values);
+              } else {
+                field.onChange(selectedOption ? selectedOption.value : "");
+              }
+            },
+            getOptionLabel: (option) => option.label,
+            getOptionValue: (option) => option.value,
+            isOptionDisabled: (option) => option.disabled || false
+          }
+        );
+      case "phone": {
+        const cleanPhoneValue = (val) => {
+          if (!val) return val;
+          const stringVal = String(val);
+          const match = stringVal.match(/^(\d{1,4})(0\d+)$/);
+          if (match) {
+            return match[1] + match[2].substring(1);
+          }
+          return stringVal;
+        };
+        const cleanedFieldValue = cleanPhoneValue(field.value || "");
+        return /* @__PURE__ */ jsx("div", { className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`, children: /* @__PURE__ */ jsx(
+          PhoneInput,
+          {
+            country: defaultCountry.toLowerCase(),
+            value: cleanedFieldValue,
+            onChange: (value, data) => {
+              const cleanedValue = cleanPhoneValue(value || "");
+              field.onChange(cleanedValue);
+            },
+            placeholder: placeholder || "Nomor telepon",
+            disabled,
+            enableSearch: true,
+            disableSearchIcon: true
+          }
+        ) });
+      }
+      case "passport": {
+        const passportValue = field.value || {
+          countryCode: defaultCountry,
+          phoneNumber: ""
+        };
+        const countryOptions = countryCodes.map((country) => ({
+          value: country.code,
+          label: country.name,
+          code: country.code,
+          passportRegex: country.passportRegex
+        }));
+        const formatOptionLabel = (option) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "18px" }, children: String.fromCodePoint(
+            ...option.code.split("").map((char) => 127397 + char.charCodeAt(0))
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: option.label })
+        ] });
+        const selectedCountry = countryOptions.find((opt) => opt.value === passportValue.countryCode);
+        const isCountrySelected = !!selectedCountry;
+        return /* @__PURE__ */ jsxs("div", { className: styles.phoneContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.phoneCountrySelect, children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: selectedCountry || null,
+              onChange: (selectedOption) => {
+                field.onChange({
+                  ...passportValue,
+                  countryCode: selectedOption ? selectedOption.value : defaultCountry
+                });
+              },
+              options: countryOptions,
+              isDisabled: disabled,
+              placeholder: "\xF0\u0178\x8F\xB3\xEF\xB8\x8F",
+              styles: getSelectStyles(!!error),
+              isSearchable: true,
+              formatOptionLabel
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: passportValue.phoneNumber,
+              maxLength,
+              autoComplete: autoComplete || "off",
+              onChange: (e) => {
+                field.onChange({
+                  ...passportValue,
+                  phoneNumber: e.target.value
+                });
+              },
+              placeholder: placeholder || "Nomor paspor",
+              disabled: disabled || !isCountrySelected,
+              appearance,
+              size,
+              type: "text",
+              style: { width: "100%" }
+            }
+          ) })
+        ] });
+      }
+      case "file":
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...field,
+            type: "file",
+            multiple,
+            accept,
+            disabled,
+            className: styles.fileInput,
+            value: void 0,
+            onChange: (e) => {
+              const files = e.target.files;
+              field.onChange(multiple ? files : files?.[0]);
+            }
+          }
+        );
+      case "switch":
+        return /* @__PURE__ */ jsx("div", { className: styles.switchWrapper, children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            ...field,
+            checked: field.value || false,
+            disabled,
+            onChange: (_, data) => field.onChange(data.checked)
+          }
+        ) });
+      case "date":
+        return /* @__PURE__ */ jsx(DatePickerInput_default, { ...commonProps, field });
+      case "radio":
+        return /* @__PURE__ */ jsx(RadioGroup, { ...field, disabled, layout: layout ?? "vertical", children: options.map((option) => /* @__PURE__ */ jsx(
+          Radio,
+          {
+            value: option.value,
+            label: option.label,
+            disabled: option.disabled
+          },
+          option.value
+        )) });
+      case "radiobutton":
+        return /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            ...field,
+            disabled,
+            layout: layout ?? "horizontal",
+            className: styles.classRadioGroup,
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              Radio,
+              {
+                value: option.value,
+                label: option.label,
+                disabled: option.disabled,
+                className: styles.classRadio
+              },
+              option.value
+            ))
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ...field,
+            checked: field.value || false,
+            disabled,
+            onChange: (_, data) => field.onChange(data.checked),
+            label
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...commonProps,
+            type: "number",
+            min,
+            max,
+            step,
+            className: styles.inputWithAutocomplete
+          }
+        );
+      case "time":
+      case "datetime-local":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...commonProps,
+            type,
+            min,
+            max,
+            className: styles.inputWithAutocomplete
+          }
+        );
+      case "password":
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...commonProps,
+            type: showPassword ? "text" : "password",
+            className: styles.inputWithAutocomplete,
+            contentAfter: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "transparent",
+                icon: showPassword ? /* @__PURE__ */ jsx(Icon, { icon: "fluent:eye-off-24-filled" }) : /* @__PURE__ */ jsx(Icon, { icon: "fluent:eye-24-filled" }),
+                "aria-label": showPassword ? "Hide password" : "Show password",
+                onClick: () => setShowPassword(!showPassword),
+                tabIndex: -1,
+                type: "button"
+              }
+            )
+          }
+        );
+      case "otp": {
+        const setRefs = (el) => {
+          try {
+            if (field.ref) {
+              if (typeof field.ref === "function") field.ref(el);
+              else field.ref.current = el;
+            }
+          } catch {
+          }
+          inputRef.current = el;
+        };
+        const handleChange = (e) => {
+          const val = e?.target?.value ?? "";
+          const numericValue = val.replace(/\D/g, "");
+          if (inputRef.current) {
+            inputRef.current.value = numericValue;
+          }
+          const numericEvent = {
+            ...e,
+            target: {
+              ...e.target,
+              value: numericValue
+            }
+          };
+          field.onChange(numericEvent);
+          if (autoAdvance && otpIndex2 && maxLength && numericValue.length >= maxLength) {
+            const next = document.querySelector(
+              `[data-otp-index="${otpIndex2 + 1}"]`
+            );
+            if (next) next.focus();
+          }
+        };
+        const handleKeyPress = (e) => {
+          const char = e.key;
+          if (!/^\d$/.test(char) && char !== "Backspace" && char !== "Delete" && char !== "Tab" && char !== "ArrowLeft" && char !== "ArrowRight") {
+            e.preventDefault();
+          }
+        };
+        const handleKeyDown = (e) => {
+          if (e.key === "Backspace") {
+            const curVal = field.value || "";
+            if (!curVal && otpIndex2 !== null && otpIndex2 !== void 0) {
+              const prevIndex = otpIndex2 - 1;
+              if (prevIndex >= 1) {
+                isBackspaceNavigationRef.current = true;
+                const prev = document.querySelector(
+                  `[data-otp-index="${prevIndex}"]`
+                );
+                if (prev) {
+                  prev.focus();
+                }
+              }
+            }
+          }
+        };
+        const handleClick = (e) => {
+          if (otpIndex2) {
+            let lastFilledIndex = 0;
+            for (let i = 1; i <= 6; i++) {
+              const input = document.querySelector(`[data-otp-index="${i}"]`);
+              if (input && input.value) {
+                lastFilledIndex = i;
+              } else {
+                break;
+              }
+            }
+            const targetIndex = lastFilledIndex === 6 ? 6 : lastFilledIndex + 1;
+            if (otpIndex2 < targetIndex) {
+              e.preventDefault();
+              const targetInput = document.querySelector(
+                `[data-otp-index="${targetIndex}"]`
+              );
+              if (targetInput) {
+                targetInput.focus();
+                const length = targetInput.value?.length || 0;
+                setTimeout(() => {
+                  targetInput.setSelectionRange(length, length);
+                }, 0);
+              }
+              return;
+            }
+          }
+          if (inputRef.current) {
+            const length = inputRef.current.value?.length || 0;
+            setTimeout(() => {
+              inputRef.current?.setSelectionRange(length, length);
+            }, 0);
+          }
+        };
+        const handleMouseDown = (e) => {
+          isBackspaceNavigationRef.current = false;
+          if (field.value) {
+            e.preventDefault();
+            if (inputRef.current) {
+              inputRef.current.focus();
+              const length = inputRef.current.value.length;
+              inputRef.current.setSelectionRange(length, length);
+            }
+          }
+        };
+        const handleSelect = (e) => {
+          if (inputRef.current && field.value) {
+            const length = inputRef.current.value.length;
+            inputRef.current.setSelectionRange(length, length);
+          }
+        };
+        const handleFocus = (e) => {
+        };
+        const inputAttrs = {};
+        if (otpIndex2) inputAttrs["data-otp-index"] = otpIndex2;
+        const otpStyles = {
+          height: "57px",
+          borderRadius: tokens.borderRadiusXLarge,
+          textAlign: "center",
+          ...typographyStyles.title2,
+          fontWeight: fontWeight.Medium,
+          lineHeight: tokens.lineHeightHero800,
+          borderColor: hasError ? sharedColors.Shared_Cranberry_Primary : void 0,
+          ...style
+          // Allow override from props
+        };
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...commonProps,
+            type: "tel",
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onKeyPress: handleKeyPress,
+            onClick: handleClick,
+            onMouseDown: handleMouseDown,
+            onSelect: handleSelect,
+            onFocus: handleFocus,
+            ref: setRefs,
+            style: otpStyles,
+            className: styles.otpInput,
+            ...inputAttrs
+          }
+        );
+      }
+      default:
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...commonProps,
+            type,
+            onInput,
+            className: styles.inputWithAutocomplete
+          }
+        );
+    }
+  };
+  const getValidationRules = () => {
+    const rules = {};
+    if (required) {
+      rules.required = validationRules?.required || "Field ini wajib diisi";
+    }
+    if (validationRules?.minLength) {
+      rules.minLength = validationRules.minLength;
+    }
+    if (validationRules?.maxLength) {
+      rules.maxLength = validationRules.maxLength;
+    }
+    if (validationRules?.pattern) {
+      rules.pattern = validationRules.pattern;
+    }
+    if (validationRules?.min) {
+      rules.min = validationRules.min;
+    }
+    if (validationRules?.max) {
+      rules.max = validationRules.max;
+    }
+    if (validationRules?.validate) {
+      rules.validate = validationRules.validate;
+    }
+    if (type === "email") {
+      rules.pattern = {
+        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+        message: "Email tidak valid"
+      };
+    }
+    if (type === "emailOrPhone") {
+      rules.validate = (value) => {
+        if (required && !value) {
+          return "Email atau nomor HP wajib diisi";
+        }
+        const stringValue = typeof value === "string" ? value : "";
+        if (!stringValue) return true;
+        const detectedType = detectEmailOrPhoneStrict(stringValue);
+        if (detectedType === "email") {
+          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(stringValue)) {
+            return "Format email tidak valid";
+          }
+        } else if (detectedType === "phone") {
+          if (!stringValue.startsWith("+")) {
+            return "Nomor HP harus dalam format internasional (contoh: +628123456789)";
+          }
+          const phoneDigits = stringValue.substring(1);
+          if (!/^\d+$/.test(phoneDigits)) {
+            return "Nomor HP hanya boleh berisi angka setelah +";
+          }
+          if (phoneDigits.length < 10) {
+            return "Nomor HP minimal 10 digit";
+          }
+        } else {
+          return "Masukkan email atau nomor HP yang valid";
+        }
+        return true;
+      };
+    }
+    if (type === "identity") {
+      rules.validate = (value) => {
+        if (required && !value) {
+          return "Field ini wajib diisi";
+        }
+        const stringValue = typeof value === "string" ? value : value?.phoneNumber || "";
+        if (!stringValue) return true;
+        const detectedType = detectIdentityType(stringValue);
+        if (detectedType === "email") {
+          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(stringValue)) {
+            return "Format email tidak valid";
+          }
+        } else if (detectedType === "phone") {
+          if (!stringValue.startsWith("+")) {
+            return "Nomor telepon harus diawali dengan +";
+          }
+          const phoneDigits = stringValue.substring(1);
+          if (!/^\d+$/.test(phoneDigits)) {
+            return "Nomor telepon hanya boleh berisi angka setelah +";
+          }
+        }
+        return true;
+      };
+    }
+    if (type === "phone") {
+      rules.validate = (value) => {
+        if (required && !value) {
+          return "Nomor telepon wajib diisi";
+        }
+        return true;
+      };
+    }
+    if (type === "passport") {
+      rules.validate = (value) => {
+        if (required && !value?.phoneNumber) {
+          return "Nomor paspor wajib diisi";
+        }
+        if (value?.phoneNumber) {
+          const selectedCountry = countryCodes.find((c) => c.code === value.countryCode);
+          if (selectedCountry?.passportRegex) {
+            const passportRegex = new RegExp(selectedCountry.passportRegex);
+            if (!passportRegex.test(value.phoneNumber)) {
+              return `Format paspor ${selectedCountry.name} tidak valid`;
+            }
+          }
+        }
+        return true;
+      };
+    }
+    return rules;
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules: getValidationRules(),
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(
+        Field,
+        {
+          className: `${styles.field} ${className || ""}`,
+          validationMessage: error?.message,
+          validationState: error ? "error" : "none",
+          children: [
+            label && type !== "checkbox" && /* @__PURE__ */ jsx(Label, { required, children: label }),
+            renderInput(field, error?.message),
+            helperText && !error && /* @__PURE__ */ jsx(Text, { size: 200, style: { textAlign: "left" }, className: styles.helperText, children: helperText })
+          ]
+        }
+      )
+    }
+  );
+}
+var InputDynamic_default = InputDynamic;
+
+// src/components/InputDynamic/constants.ts
+var DEFAULT_COUNTRY_CODES2 = [
+  { code: "AF", name: "Afghanistan", dialCode: "+93", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "AL", name: "Albania", dialCode: "+355", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", passportRegex: "^[0-9]{9}$" },
+  { code: "AS", name: "American Samoa", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
+  { code: "AD", name: "Andorra", dialCode: "+376", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AO", name: "Angola", dialCode: "+244", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AI", name: "Anguilla", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AQ", name: "Antarctica", dialCode: "+672", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "AR", name: "Argentina", dialCode: "+54", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "AM", name: "Armenia", dialCode: "+374", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "AW", name: "Aruba", dialCode: "+297", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "AU", name: "Australia", dialCode: "+61", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "AT", name: "Austria", dialCode: "+43", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BS", name: "Bahamas", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BH", name: "Bahrain", dialCode: "+973", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "BB", name: "Barbados", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BY", name: "Belarus", dialCode: "+375", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BE", name: "Belgium", dialCode: "+32", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BZ", name: "Belize", dialCode: "+501", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BJ", name: "Benin", dialCode: "+229", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BM", name: "Bermuda", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BT", name: "Bhutan", dialCode: "+975", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BO", name: "Bolivia", dialCode: "+591", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "BA",
+    name: "Bosnia and Herzegovina",
+    dialCode: "+387",
+    passportRegex: "^[A-Z]{2}[0-9]{6}$"
+  },
+  { code: "BW", name: "Botswana", dialCode: "+267", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BR", name: "Brazil", dialCode: "+55", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "BN", name: "Brunei", dialCode: "+673", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359", passportRegex: "^[0-9]{9}$" },
+  { code: "BF", name: "Burkina Faso", dialCode: "+226", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "BI", name: "Burundi", dialCode: "+257", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KH", name: "Cambodia", dialCode: "+855", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "CM", name: "Cameroon", dialCode: "+237", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CA", name: "Canada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "CV", name: "Cape Verde", dialCode: "+238", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KY", name: "Cayman Islands", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "CF",
+    name: "Central African Republic",
+    dialCode: "+236",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "TD", name: "Chad", dialCode: "+235", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CL", name: "Chile", dialCode: "+56", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CN", name: "China", dialCode: "+86", passportRegex: "^[0-9]{9}$" },
+  { code: "CO", name: "Colombia", dialCode: "+57", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "KM", name: "Comoros", dialCode: "+269", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CG", name: "Congo", dialCode: "+242", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "CR", name: "Costa Rica", dialCode: "+506", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "HR", name: "Croatia", dialCode: "+385", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "CU", name: "Cuba", dialCode: "+53", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CY", name: "Cyprus", dialCode: "+357", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", passportRegex: "^[0-9]{8}$" },
+  { code: "DK", name: "Denmark", dialCode: "+45", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "DJ", name: "Djibouti", dialCode: "+253", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "DM", name: "Dominica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "DO", name: "Dominican Republic", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "EC", name: "Ecuador", dialCode: "+593", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "EG", name: "Egypt", dialCode: "+20", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "SV", name: "El Salvador", dialCode: "+503", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ER", name: "Eritrea", dialCode: "+291", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "EE", name: "Estonia", dialCode: "+372", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "SZ", name: "Eswatini", dialCode: "+268", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "FJ", name: "Fiji", dialCode: "+679", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "FI", name: "Finland", dialCode: "+358", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "FR", name: "France", dialCode: "+33", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GA", name: "Gabon", dialCode: "+241", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GM", name: "Gambia", dialCode: "+220", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GE", name: "Georgia", dialCode: "+995", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "DE", name: "Germany", dialCode: "+49", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GH", name: "Ghana", dialCode: "+233", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GR", name: "Greece", dialCode: "+30", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GD", name: "Grenada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "GT", name: "Guatemala", dialCode: "+502", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "GN", name: "Guinea", dialCode: "+224", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GW", name: "Guinea-Bissau", dialCode: "+245", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "GY", name: "Guyana", dialCode: "+592", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HT", name: "Haiti", dialCode: "+509", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HN", name: "Honduras", dialCode: "+504", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "HU", name: "Hungary", dialCode: "+36", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "IS", name: "Iceland", dialCode: "+354", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "IN", name: "India", dialCode: "+91", passportRegex: "^[A-Z][0-9]{7}$" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "IR", name: "Iran", dialCode: "+98", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "IQ", name: "Iraq", dialCode: "+964", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "IE", name: "Ireland", dialCode: "+353", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
+  { code: "IL", name: "Israel", dialCode: "+972", passportRegex: "^[0-9]{8,9}$" },
+  { code: "IT", name: "Italy", dialCode: "+39", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JM", name: "Jamaica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JP", name: "Japan", dialCode: "+81", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "JO", name: "Jordan", dialCode: "+962", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KE", name: "Kenya", dialCode: "+254", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KI", name: "Kiribati", dialCode: "+686", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "KP", name: "North Korea", dialCode: "+850", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "KR", name: "South Korea", dialCode: "+82", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "KW", name: "Kuwait", dialCode: "+965", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "KG", name: "Kyrgyzstan", dialCode: "+996", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "LA", name: "Laos", dialCode: "+856", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "LV", name: "Latvia", dialCode: "+371", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "LB", name: "Lebanon", dialCode: "+961", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "LS", name: "Lesotho", dialCode: "+266", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LR", name: "Liberia", dialCode: "+231", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LY", name: "Libya", dialCode: "+218", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "LI", name: "Liechtenstein", dialCode: "+423", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "LT", name: "Lithuania", dialCode: "+370", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352", passportRegex: "^[A-Z0-9]{8}$" },
+  { code: "MO", name: "Macau", dialCode: "+853", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "MG", name: "Madagascar", dialCode: "+261", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MW", name: "Malawi", dialCode: "+265", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "MV", name: "Maldives", dialCode: "+960", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "ML", name: "Mali", dialCode: "+223", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MT", name: "Malta", dialCode: "+356", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MH", name: "Marshall Islands", dialCode: "+692", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MQ", name: "Martinique", dialCode: "+596", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MR", name: "Mauritania", dialCode: "+222", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MU", name: "Mauritius", dialCode: "+230", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "MX", name: "Mexico", dialCode: "+52", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "FM", name: "Micronesia", dialCode: "+691", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MD", name: "Moldova", dialCode: "+373", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MC", name: "Monaco", dialCode: "+377", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MN", name: "Mongolia", dialCode: "+976", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "ME", name: "Montenegro", dialCode: "+382", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "MS", name: "Montserrat", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MA", name: "Morocco", dialCode: "+212", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "MZ", name: "Mozambique", dialCode: "+258", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "MM", name: "Myanmar", dialCode: "+95", passportRegex: "^[A-Z]{1}[0-9]{6,7}$" },
+  { code: "NA", name: "Namibia", dialCode: "+264", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NR", name: "Nauru", dialCode: "+674", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NP", name: "Nepal", dialCode: "+977", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "NC", name: "New Caledonia", dialCode: "+687", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "NI", name: "Nicaragua", dialCode: "+505", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "NE", name: "Niger", dialCode: "+227", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "NO", name: "Norway", dialCode: "+47", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "OM", name: "Oman", dialCode: "+968", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PW", name: "Palau", dialCode: "+680", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PS", name: "Palestine", dialCode: "+970", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "PA", name: "Panama", dialCode: "+507", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "PG", name: "Papua New Guinea", dialCode: "+675", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "PY", name: "Paraguay", dialCode: "+595", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "PE", name: "Peru", dialCode: "+51", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PH", name: "Philippines", dialCode: "+63", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "PL", name: "Poland", dialCode: "+48", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
+  { code: "PT", name: "Portugal", dialCode: "+351", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "RO", name: "Romania", dialCode: "+40", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "RU", name: "Russia", dialCode: "+7", passportRegex: "^[0-9]{9}$" },
+  { code: "RW", name: "Rwanda", dialCode: "+250", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "KN",
+    name: "Saint Kitts and Nevis",
+    dialCode: "+1",
+    passportRegex: "^[A-Z]{2}[0-9]{7}$"
+  },
+  { code: "LC", name: "Saint Lucia", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "VC",
+    name: "Saint Vincent and the Grenadines",
+    dialCode: "+1",
+    passportRegex: "^[A-Z]{2}[0-9]{7}$"
+  },
+  { code: "WS", name: "Samoa", dialCode: "+685", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SM", name: "San Marino", dialCode: "+378", passportRegex: "^[A-Z0-9]{6,10}$" },
+  {
+    code: "ST",
+    name: "Sao Tome and Principe",
+    dialCode: "+239",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SN", name: "Senegal", dialCode: "+221", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "RS", name: "Serbia", dialCode: "+381", passportRegex: "^[A-Z0-9]{9}$" },
+  { code: "SC", name: "Seychelles", dialCode: "+248", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SL", name: "Sierra Leone", dialCode: "+232", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SG", name: "Singapore", dialCode: "+65", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SK", name: "Slovakia", dialCode: "+421", passportRegex: "^[0-9]{9}$" },
+  { code: "SI", name: "Slovenia", dialCode: "+386", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "SB", name: "Solomon Islands", dialCode: "+677", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SO", name: "Somalia", dialCode: "+252", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  { code: "ES", name: "Spain", dialCode: "+34", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "LK", name: "Sri Lanka", dialCode: "+94", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SD", name: "Sudan", dialCode: "+249", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SR", name: "Suriname", dialCode: "+597", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "SE", name: "Sweden", dialCode: "+46", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "SY", name: "Syria", dialCode: "+963", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TW", name: "Taiwan", dialCode: "+886", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
+  { code: "TJ", name: "Tajikistan", dialCode: "+992", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "TZ", name: "Tanzania", dialCode: "+255", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TH", name: "Thailand", dialCode: "+66", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TL", name: "Timor-Leste", dialCode: "+670", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TG", name: "Togo", dialCode: "+228", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TO", name: "Tonga", dialCode: "+676", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TR", name: "Turkey", dialCode: "+90", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "TM", name: "Turkmenistan", dialCode: "+993", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  {
+    code: "TC",
+    name: "Turks and Caicos Islands",
+    dialCode: "+1",
+    passportRegex: "^[A-Z0-9]{6,10}$"
+  },
+  { code: "TV", name: "Tuvalu", dialCode: "+688", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "UG", name: "Uganda", dialCode: "+256", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
+  {
+    code: "AE",
+    name: "United Arab Emirates",
+    dialCode: "+971",
+    passportRegex: "^[A-Z]{1}[0-9]{7}$"
+  },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "US", name: "United States", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
+  { code: "UY", name: "Uruguay", dialCode: "+598", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "VU", name: "Vanuatu", dialCode: "+678", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "VA", name: "Vatican City", dialCode: "+379", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "YE", name: "Yemen", dialCode: "+967", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
+  { code: "ZM", name: "Zambia", dialCode: "+260", passportRegex: "^[A-Z0-9]{6,10}$" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263", passportRegex: "^[A-Z0-9]{6,10}$" }
+];
+var useStyles8 = makeStyles({
+  dialogTitle: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: "8px"
+  },
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  searchInput: {
+    width: "100%",
+    marginBottom: "16px"
+  },
+  resultList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    paddingRight: "1rem"
+  },
+  resultItem: {
+    padding: "16px 20px",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    backgroundColor: tokens.colorNeutralBackground1,
+    position: "relative",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      borderBottom: `1px solid ${tokens.colorBrandBackground}`
+    }
+  },
+  resultItemSelected: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderLeft: `4px solid ${tokens.colorBrandBackground}`,
+    paddingLeft: "16px"
+  },
+  harborName: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground1,
+    marginBottom: "2px"
+  },
+  harborLocation: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground3
+  },
+  buttonContainer: {
+    display: "flex",
+    gap: "1rem",
+    marginBottom: "1rem",
+    flexWrap: "wrap"
+  },
+  circularButton: {
+    borderRadius: tokens.borderRadiusCircular
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "1rem",
+    marginBottom: "1rem"
+  },
+  dangerText: {
+    color: tokens.colorStatusDangerForeground1
+  },
+  historyItem: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "1rem",
+    marginBottom: "1rem"
+  },
+  iconMargin: {
+    marginRight: "0.5rem"
+  },
+  cursorPointer: {
+    cursor: "pointer"
+  },
+  sectionTitle: {
+    marginTop: "1rem",
+    marginBottom: "1rem"
+  },
+  harborList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+    marginBottom: "1rem"
+  },
+  harborItem: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  emptyState: {
+    textAlign: "center",
+    padding: "32px",
+    color: tokens.colorNeutralForeground3
+  }
+});
+var ModalSearchHarbor = ({
+  open,
+  onClose,
+  title = "Pilih Pelabuhan",
+  modalType = "origin",
+  harbors,
+  favoriteHarbors,
+  lastSearchedHarbors,
+  isLoading = false,
+  searchQuery,
+  onSearchChange,
+  onSelectHarbor,
+  onToggleFavorite,
+  onAddLastSearched,
+  onRemoveLastSearched,
+  onClearLastSearched
+}) => {
+  const styles = useStyles8();
+  const handleSelect = (harbor) => {
+    onAddLastSearched(harbor);
+    onSelectHarbor(harbor);
+    onSearchChange("");
+  };
+  const handleClose = () => {
+    onClose();
+    onSearchChange("");
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: styles.searchInput,
+              value: searchQuery,
+              onChange: (e) => onSearchChange(e.target.value),
+              placeholder: "Cari Pelabuhan...",
+              contentBefore: /* @__PURE__ */ jsx(Icon, { icon: "fluent:search-24-regular", color: tokens.colorNeutralForeground3 }),
+              size: "large"
+            }
+          ) }),
+          favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => handleSelect(harbor),
+              size: "medium",
+              appearance: "outline",
+              iconPosition: "before",
+              className: styles.circularButton,
+              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ribbon-20-filled" }),
+              children: /* @__PURE__ */ jsx(Body1, { children: harbor.name })
+            },
+            harbor.id
+          )) }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { className: styles.resultList, children: [
+            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                /* @__PURE__ */ jsx(Body1Strong, { children: "Terakhir dicari" }),
+                /* @__PURE__ */ jsx(
+                  Caption1,
+                  {
+                    className: `${styles.dangerText} ${styles.cursorPointer}`,
+                    onClick: onClearLastSearched,
+                    children: "Hapus Semua"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxs("div", { className: styles.historyItem, children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: { cursor: "pointer" },
+                    onClick: () => handleSelect(harbor),
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular", className: styles.iconMargin }),
+                      harbor.name
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    onClick: () => onRemoveLastSearched(harbor.id),
+                    icon: "fluent:dismiss-24-regular",
+                    color: tokens.colorStatusDangerForeground1,
+                    className: styles.cursorPointer
+                  }
+                )
+              ] }, harbor.id)) }),
+              /* @__PURE__ */ jsx(Divider, {})
+            ] }),
+            /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: "Semua Pelabuhan" }),
+            /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: "Memuat data..." }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles.cursorPointer,
+                  onClick: () => handleSelect(harbor),
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular", className: styles.iconMargin }),
+                    harbor.name
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: favoriteHarbors.find((fav) => fav.id === harbor.id) ? "fluent:star-24-filled" : "fluent:star-24-regular",
+                  color: tokens.colorBrandBackground,
+                  className: styles.cursorPointer,
+                  onClick: () => onToggleFavorite(harbor)
+                }
+              )
+            ] }, index)) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: "Pelabuhan tidak ditemukan" }) })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
-var ModalRadius_default = ModalRadius;
 
-export { ModalRadius, ModalRadius_default as ModalRadiusDefault };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map