@asdp/ferryui 0.1.22-dev.8694 → 0.1.22-dev.8698

package/dist/index.js

@@ -1880,6 +1880,69 @@ var DEFAULT_LABELS7 = {
     emailOrPhoneRequiredError: "Email or phone number is required"
   }
 };
+
+// src/components/InputDynamic/countries.constants.ts
+var COUNTRIES = [
+  { value: "ID", label: "Indonesia", flag: "twemoji:flag-indonesia" },
+  { value: "MY", label: "Malaysia", flag: "twemoji:flag-malaysia" },
+  { value: "SG", label: "Singapore", flag: "twemoji:flag-singapore" },
+  { value: "TH", label: "Thailand", flag: "twemoji:flag-thailand" },
+  { value: "PH", label: "Philippines", flag: "twemoji:flag-philippines" },
+  { value: "VN", label: "Vietnam", flag: "twemoji:flag-vietnam" },
+  { value: "BN", label: "Brunei", flag: "twemoji:flag-brunei" },
+  { value: "KH", label: "Cambodia", flag: "twemoji:flag-cambodia" },
+  { value: "LA", label: "Laos", flag: "twemoji:flag-laos" },
+  { value: "MM", label: "Myanmar", flag: "twemoji:flag-myanmar-burma" },
+  { value: "TL", label: "Timor-Leste", flag: "twemoji:flag-timor-leste" },
+  // Major countries
+  { value: "US", label: "United States", flag: "twemoji:flag-united-states" },
+  { value: "GB", label: "United Kingdom", flag: "twemoji:flag-united-kingdom" },
+  { value: "AU", label: "Australia", flag: "twemoji:flag-australia" },
+  { value: "CN", label: "China", flag: "twemoji:flag-china" },
+  { value: "JP", label: "Japan", flag: "twemoji:flag-japan" },
+  { value: "KR", label: "South Korea", flag: "twemoji:flag-south-korea" },
+  { value: "IN", label: "India", flag: "twemoji:flag-india" },
+  { value: "SA", label: "Saudi Arabia", flag: "twemoji:flag-saudi-arabia" },
+  { value: "AE", label: "United Arab Emirates", flag: "twemoji:flag-united-arab-emirates" },
+  { value: "QA", label: "Qatar", flag: "twemoji:flag-qatar" },
+  // European countries
+  { value: "DE", label: "Germany", flag: "twemoji:flag-germany" },
+  { value: "FR", label: "France", flag: "twemoji:flag-france" },
+  { value: "IT", label: "Italy", flag: "twemoji:flag-italy" },
+  { value: "ES", label: "Spain", flag: "twemoji:flag-spain" },
+  { value: "NL", label: "Netherlands", flag: "twemoji:flag-netherlands" },
+  { value: "BE", label: "Belgium", flag: "twemoji:flag-belgium" },
+  { value: "CH", label: "Switzerland", flag: "twemoji:flag-switzerland" },
+  { value: "AT", label: "Austria", flag: "twemoji:flag-austria" },
+  { value: "SE", label: "Sweden", flag: "twemoji:flag-sweden" },
+  { value: "NO", label: "Norway", flag: "twemoji:flag-norway" },
+  { value: "DK", label: "Denmark", flag: "twemoji:flag-denmark" },
+  { value: "FI", label: "Finland", flag: "twemoji:flag-finland" },
+  { value: "PL", label: "Poland", flag: "twemoji:flag-poland" },
+  { value: "RU", label: "Russia", flag: "twemoji:flag-russia" },
+  { value: "TR", label: "Turkey", flag: "twemoji:flag-turkey" },
+  { value: "GR", label: "Greece", flag: "twemoji:flag-greece" },
+  { value: "PT", label: "Portugal", flag: "twemoji:flag-portugal" },
+  { value: "IE", label: "Ireland", flag: "twemoji:flag-ireland" },
+  // Americas
+  { value: "CA", label: "Canada", flag: "twemoji:flag-canada" },
+  { value: "MX", label: "Mexico", flag: "twemoji:flag-mexico" },
+  { value: "BR", label: "Brazil", flag: "twemoji:flag-brazil" },
+  { value: "AR", label: "Argentina", flag: "twemoji:flag-argentina" },
+  { value: "CL", label: "Chile", flag: "twemoji:flag-chile" },
+  { value: "CO", label: "Colombia", flag: "twemoji:flag-colombia" },
+  { value: "PE", label: "Peru", flag: "twemoji:flag-peru" },
+  // Africa
+  { value: "ZA", label: "South Africa", flag: "twemoji:flag-south-africa" },
+  { value: "EG", label: "Egypt", flag: "twemoji:flag-egypt" },
+  { value: "NG", label: "Nigeria", flag: "twemoji:flag-nigeria" },
+  { value: "KE", label: "Kenya", flag: "twemoji:flag-kenya" },
+  { value: "MA", label: "Morocco", flag: "twemoji:flag-morocco" },
+  // Oceania
+  { value: "NZ", label: "New Zealand", flag: "twemoji:flag-new-zealand" },
+  { value: "FJ", label: "Fiji", flag: "twemoji:flag-fiji" },
+  { value: "PG", label: "Papua New Guinea", flag: "twemoji:flag-papua-new-guinea" }
+];
 var PhoneInput = PhoneInputComponent__default.default.default || PhoneInputComponent__default.default;
 var useStyles7 = reactComponents.makeStyles({
   field: {
@@ -2124,7 +2187,8 @@ var InputDynamic = ({
   contentAfter,
   onChange,
   language = "id",
-  labels
+  labels,
+  menuPlacement
 }) => {
   const styles = useStyles7();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
@@ -2141,74 +2205,125 @@ var InputDynamic = ({
   const emailOrPhoneInputRef = React5.useRef(null);
   const shouldFocusRef = React5.useRef(false);
   const isBackspaceNavigationRef = React5.useRef(false);
-  const getSelectStyles = (hasError2) => ({
-    menuPortal: (base) => ({
-      ...base,
-      zIndex: 9999999,
-      borderRadius: reactComponents.tokens.borderRadiusMedium
-    }),
-    control: (provided, state) => ({
-      ...provided,
-      borderColor: hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : reactComponents.tokens.colorNeutralStroke1,
-      borderRadius: reactComponents.tokens.borderRadiusMedium,
-      minHeight: "40px",
-      fontSize: reactComponents.tokens.fontSizeBase400,
-      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
-      boxShadow: state.isFocused ? `0 0 0 2px ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : reactComponents.tokens.colorBrandStroke1}` : "none",
-      "&:hover": {
-        borderColor: hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : reactComponents.tokens.colorNeutralStroke1Hover
+  const getSelectStyles = (hasError2, selectAppearance) => {
+    const currentAppearance = appearance || "outline";
+    const getControlStyles = (provided, state) => {
+      const baseStyles = {
+        ...provided,
+        minHeight: "40px",
+        fontSize: reactComponents.tokens.fontSizeBase400,
+        transition: "all 0.2s ease"
+      };
+      if (currentAppearance === "outline") {
+        return {
+          ...baseStyles,
+          border: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : reactComponents.tokens.colorNeutralStroke1}`,
+          borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : reactComponents.tokens.colorNeutralForeground3}`,
+          borderRadius: reactComponents.tokens.borderRadiusMedium,
+          backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+          boxShadow: "none",
+          "&:hover": {
+            borderColor: hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : reactComponents.tokens.colorNeutralStroke1Hover,
+            borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : reactComponents.tokens.colorNeutralForeground3Hover}`
+          }
+        };
       }
-    }),
-    menu: (provided) => ({
-      ...provided,
-      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
-      borderRadius: reactComponents.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: reactComponents.tokens.colorNeutralBackground2,
-        borderRadius: "4px"
-      },
-      "&::-webkit-scrollbar-thumb": {
-        backgroundColor: selectScrollbarColor || reactComponents.tokens.colorNeutralStroke2,
-        borderRadius: "4px"
-      },
-      "&::-webkit-scrollbar-thumb:hover": {
-        backgroundColor: selectScrollbarColor || reactComponents.tokens.colorBrandBackground
-      },
-      "&::-webkit-scrollbar-thumb:active": {
-        backgroundColor: selectScrollbarColor || reactComponents.tokens.colorBrandBackgroundPressed
+      if (currentAppearance === "underline") {
+        return {
+          ...baseStyles,
+          border: "none",
+          borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : reactComponents.tokens.colorNeutralForeground3}`,
+          borderRadius: 0,
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          "&:hover": {
+            borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : reactComponents.tokens.colorNeutralForeground3Hover}`
+          }
+        };
       }
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      fontSize: reactComponents.tokens.fontSizeBase300,
-      color: state.isSelected ? reactComponents.tokens.colorNeutralForegroundOnBrand : reactComponents.tokens.colorNeutralForeground1,
-      backgroundColor: state.isSelected ? reactComponents.tokens.colorBrandBackground : state.isFocused ? reactComponents.tokens.colorNeutralBackground1Hover : "transparent"
-    }),
-    placeholder: (provided) => ({
-      ...provided,
-      color: reactComponents.tokens.colorNeutralForeground3,
-      fontSize: reactComponents.tokens.fontSizeBase400
-    }),
-    singleValue: (provided) => ({
-      ...provided,
-      color: reactComponents.tokens.colorNeutralForeground1,
-      fontSize: reactComponents.tokens.fontSizeBase400
-    })
-  });
+      if (currentAppearance === "filled-darker") {
+        return {
+          ...baseStyles,
+          border: "none",
+          borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : "transparent"}`,
+          borderRadius: `${reactComponents.tokens.borderRadiusMedium} ${reactComponents.tokens.borderRadiusMedium} 0 0`,
+          backgroundColor: reactComponents.tokens.colorNeutralBackground3,
+          boxShadow: "none",
+          "&:hover": {
+            backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover
+          }
+        };
+      }
+      if (currentAppearance === "filled-lighter") {
+        return {
+          ...baseStyles,
+          border: "none",
+          borderBottom: `1px solid ${hasError2 ? reactComponents.tokens.colorPaletteRedBorder2 : state.isFocused ? reactComponents.tokens.colorBrandStroke1 : "transparent"}`,
+          borderRadius: `${reactComponents.tokens.borderRadiusMedium} ${reactComponents.tokens.borderRadiusMedium} 0 0`,
+          backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+          boxShadow: "none",
+          "&:hover": {
+            backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+          }
+        };
+      }
+      return baseStyles;
+    };
+    return {
+      menuPortal: (base) => ({
+        ...base,
+        zIndex: 9999999,
+        borderRadius: reactComponents.tokens.borderRadiusMedium
+      }),
+      control: getControlStyles,
+      menu: (provided) => ({
+        ...provided,
+        border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+        borderRadius: reactComponents.tokens.borderRadiusMedium,
+        zIndex: 9999
+      }),
+      menuList: (provided) => ({
+        ...provided,
+        padding: 0,
+        maxHeight: "300px",
+        /* Targetkan Webkit Scrollbar di menuList */
+        "&::-webkit-scrollbar": {
+          width: "8px",
+          display: "block"
+        },
+        "&::-webkit-scrollbar-track": {
+          backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+          borderRadius: "4px"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: selectScrollbarColor || reactComponents.tokens.colorNeutralStroke2,
+          borderRadius: "4px"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: selectScrollbarColor || reactComponents.tokens.colorBrandBackground
+        },
+        "&::-webkit-scrollbar-thumb:active": {
+          backgroundColor: selectScrollbarColor || reactComponents.tokens.colorBrandBackgroundPressed
+        }
+      }),
+      option: (provided, state) => ({
+        ...provided,
+        fontSize: reactComponents.tokens.fontSizeBase300,
+        color: state.isSelected ? reactComponents.tokens.colorNeutralForegroundOnBrand : reactComponents.tokens.colorNeutralForeground1,
+        backgroundColor: state.isSelected ? reactComponents.tokens.colorBrandBackground : state.isFocused ? reactComponents.tokens.colorNeutralBackground1Hover : "transparent"
+      }),
+      placeholder: (provided) => ({
+        ...provided,
+        color: reactComponents.tokens.colorNeutralForeground3,
+        fontSize: reactComponents.tokens.fontSizeBase400
+      }),
+      singleValue: (provided) => ({
+        ...provided,
+        color: reactComponents.tokens.colorNeutralForeground1,
+        fontSize: reactComponents.tokens.fontSizeBase400
+      })
+    };
+  };
   React5.useEffect(() => {
     if (shouldFocusRef.current) {
       setTimeout(() => {
@@ -2533,7 +2648,42 @@ var InputDynamic = ({
             },
             getOptionLabel: (option) => option.label,
             getOptionValue: (option) => option.value,
-            isOptionDisabled: (option) => option.disabled || false
+            isOptionDisabled: (option) => option.disabled || false,
+            menuPlacement
+          }
+        );
+      case "country":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Select__default.default,
+          {
+            ...field,
+            name: `${String(name)}_${Math.random().toString(36).substring(7)}`,
+            isDisabled: disabled,
+            placeholder: placeholder || "Select country",
+            options: COUNTRIES,
+            styles: getSelectStyles(!!error),
+            className: styles.reactSelect,
+            classNamePrefix: "react-select",
+            inputProps: {
+              autoComplete: "new-password",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              spellCheck: "false"
+            },
+            value: COUNTRIES.find((country) => country.value === field.value) || null,
+            onChange: (selectedOption) => {
+              field.onChange(selectedOption ? selectedOption.value : "");
+              if (onChange) {
+                onChange(selectedOption ? selectedOption.value : "");
+              }
+            },
+            getOptionLabel: (option) => option.label,
+            getOptionValue: (option) => option.value,
+            formatOptionLabel: (option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+            ] }),
+            menuPlacement
           }
         );
       case "phone": {
@@ -2982,248 +3132,6 @@ var InputDynamic = ({
 };
 var InputDynamic_default = InputDynamic;
 
-// src/components/InputDynamic/constants.ts
-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}$" }
-];
-
 // src/components/CardTicketSearch/CardTicketSearch.constants.ts
 var DEFAULT_LABELS8 = {
   id: {
@@ -7830,6 +7738,8 @@ var DEFAULT_LABELS22 = {
     cancelButton: "Batal",
     idTypeOtherLabel: "Tanggal lahir",
     idTypeOtherPlaceholder: "DD/MM/YYYY",
+    countryLabel: "Negara Penerbit Passport",
+    countryPlaceholder: "Masukkan Negara",
     errors: {
       requiredTitle: "Title harus dipilih",
       requiredName: "Nama lengkap harus diisi",
@@ -7841,7 +7751,8 @@ var DEFAULT_LABELS22 = {
       minAge: "Usia minimal 1 tahun",
       maxAge: "Usia maksimal 150 tahun",
       requiredDate: "Tanggal lahir harus diisi",
-      requiredCity: "Kota/Kabupaten harus diisi"
+      requiredCity: "Kota/Kabupaten harus diisi",
+      requiredCountry: "Negara harus diisi"
     }
   },
   en: {
@@ -7865,6 +7776,8 @@ var DEFAULT_LABELS22 = {
     cancelButton: "Cancel",
     idTypeOtherLabel: "Date of Birth",
     idTypeOtherPlaceholder: "DD/MM/YYYY",
+    countryLabel: "Country of Issue",
+    countryPlaceholder: "Enter Country",
     errors: {
       requiredTitle: "Title is required",
       requiredName: "Full name is required",
@@ -7876,7 +7789,8 @@ var DEFAULT_LABELS22 = {
       minAge: "Age must be at least 1 year",
       maxAge: "Age must be at most 150 years",
       requiredDate: "Date of birth is required",
-      requiredCity: "City/Regency is required"
+      requiredCity: "City/Regency is required",
+      requiredCountry: "Country is required"
     }
   }
 };
@@ -8074,25 +7988,28 @@ var ModalPassengerForm = ({
                   required: mergedErrors.requiredDate
                 }
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              InputDynamic_default,
-              {
-                name: "idNumber",
-                control,
-                type: idType === "ktp" ? "number" : "text",
-                label: mergedLabels.idNumberLabel,
-                placeholder: mergedLabels.idNumberPlaceholder,
-                size: "large",
-                required: true,
-                validationRules: {
-                  required: mergedErrors.requiredIdNumber,
-                  minLength: {
-                    value: 6,
-                    message: mergedErrors.minLengthIdNumber
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              idType === "paspor" && /* @__PURE__ */ jsxRuntime.jsx(InputDynamic_default, { menuPlacement: "top", name: "country", control, type: "country", label: mergedLabels.countryLabel, placeholder: mergedLabels.countryPlaceholder, size: "large", required: true, validationRules: { required: mergedErrors.requiredCountry } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "idNumber",
+                  control,
+                  type: idType === "ktp" ? "number" : "text",
+                  label: mergedLabels.idNumberLabel,
+                  placeholder: mergedLabels.idNumberPlaceholder,
+                  size: "large",
+                  required: true,
+                  validationRules: {
+                    required: mergedErrors.requiredIdNumber,
+                    minLength: {
+                      value: 6,
+                      message: mergedErrors.minLengthIdNumber
+                    }
                   }
                 }
-              }
-            ) : null
+              )
+            ] }) : null
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
             InputDynamic_default,
             {
@@ -11880,6 +11797,7 @@ var CardProfileMenu = ({
 
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
+exports.COUNTRIES = COUNTRIES;
 exports.CardAddon = CardAddon;
 exports.CardBanner = CardBanner;
 exports.CardBookingTicket = CardBookingTicket;
@@ -11905,7 +11823,6 @@ exports.CardTicketSearchSummaryDefaultLabels = DEFAULT_LABELS9;
 exports.CardVehicleDetail = CardVehicleDetail;
 exports.CardVehicleOwnerForm = CardVehicleOwnerForm;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
-exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES;
 exports.DEFAULT_DURATION_RANGE = DEFAULT_DURATION_RANGE;
 exports.DEFAULT_PRICE_RANGE = DEFAULT_PRICE_RANGE;
 exports.DEFAULT_SCROLL_AMOUNT = DEFAULT_SCROLL_AMOUNT;