@asdp/ferryui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,8 +1,12 @@
-import { makeStyles, tokens, shorthands, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong } from '@fluentui/react-components';
+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, { useState, useCallback } from 'react';
+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/ModalIllustration/ModalIllustration.tsx
 var useStyles = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -1069,7 +1073,1969 @@ var CardServiceMenu = ({
     ] })
   ] }, 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" }) })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, MODAL_PRESETS, ModalIllustration, getModalPreset };
+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