@idds/react 1.4.16 → 1.4.18

package/dist/index.es.js

@@ -820,14 +820,6 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   Component.displayName = `${iconNamePascal}`;
   return Component;
 };
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$w = [["path", { "d": "M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z", "key": "svg-0" }], ["path", { "d": "M10 16h6", "key": "svg-1" }], ["path", { "d": "M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M4 8h3", "key": "svg-3" }], ["path", { "d": "M4 12h3", "key": "svg-4" }], ["path", { "d": "M4 16h3", "key": "svg-5" }]];
-const IconAddressBook = createReactComponent("outline", "address-book", "AddressBook", __iconNode$w);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
@@ -1660,6 +1652,66 @@ function ButtonGroup({
     );
   }) });
 }
+function CircleProgressBar({
+  progress = 0,
+  diameter = 20,
+  strokeWidth = 3,
+  variant = "primary",
+  trackColor = "#EAECF0",
+  className
+}) {
+  const normalizedProgress = Math.min(100, Math.max(0, progress));
+  const isCustomColor = variant.startsWith("#");
+  const center = diameter / 2;
+  const radius = (diameter - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - normalizedProgress / 100 * circumference;
+  const containerClasses = clsx(
+    "ina-circle-progress-bar",
+    !isCustomColor && `ina-circle-progress-bar--${variant}`,
+    className
+  );
+  const style = {
+    "--ina-circle-progress-size": `${diameter}px`,
+    ...trackColor && { "--ina-circle-progress-track-color": trackColor },
+    ...isCustomColor && { "--ina-circle-progress-color": variant }
+  };
+  return /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ina-circle-progress-bar__svg",
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${diameter} ${diameter}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ina-circle-progress-bar__track",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ina-circle-progress-bar__progress",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset
+          }
+        )
+      ]
+    }
+  ) });
+}
 function Checkbox({
   id,
   label,
@@ -4058,54 +4110,466 @@ function PasswordInput({
     ] })
   ] });
 }
+const COUNTRIES = [
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "🇮🇩" },
+  { code: "AF", name: "Afghanistan", dialCode: "+93", flag: "🇦🇫" },
+  { code: "AL", name: "Albania", dialCode: "+355", flag: "🇦🇱" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "🇩🇿" },
+  { code: "AS", name: "American Samoa", dialCode: "+1684", flag: "🇦🇸" },
+  { code: "AD", name: "Andorra", dialCode: "+376", flag: "🇦🇩" },
+  { code: "AO", name: "Angola", dialCode: "+244", flag: "🇦🇴" },
+  { code: "AI", name: "Anguilla", dialCode: "+1264", flag: "🇦🇮" },
+  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1268", flag: "🇦🇬" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "🇦🇷" },
+  { code: "AM", name: "Armenia", dialCode: "+374", flag: "🇦🇲" },
+  { code: "AW", name: "Aruba", dialCode: "+297", flag: "🇦🇼" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "🇦🇹" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994", flag: "🇦🇿" },
+  { code: "BS", name: "Bahamas", dialCode: "+1242", flag: "🇧🇸" },
+  { code: "BH", name: "Bahrain", dialCode: "+973", flag: "🇧🇭" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", flag: "🇧🇩" },
+  { code: "BB", name: "Barbados", dialCode: "+1246", flag: "🇧🇧" },
+  { code: "BY", name: "Belarus", dialCode: "+375", flag: "🇧🇾" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪" },
+  { code: "BZ", name: "Belize", dialCode: "+501", flag: "🇧🇿" },
+  { code: "BJ", name: "Benin", dialCode: "+229", flag: "🇧🇯" },
+  { code: "BM", name: "Bermuda", dialCode: "+1441", flag: "🇧🇲" },
+  { code: "BT", name: "Bhutan", dialCode: "+975", flag: "🇧🇹" },
+  { code: "BO", name: "Bolivia", dialCode: "+591", flag: "🇧🇴" },
+  { code: "BA", name: "Bosnia and Herzegovina", dialCode: "+387", flag: "🇧🇦" },
+  { code: "BW", name: "Botswana", dialCode: "+267", flag: "🇧🇼" },
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "🇧🇷" },
+  { code: "IO", name: "British Indian Ocean Territory", dialCode: "+246", flag: "🇮🇴" },
+  { code: "BN", name: "Brunei Darussalam", dialCode: "+673", flag: "🇧🇳" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359", flag: "🇧🇬" },
+  { code: "BF", name: "Burkina Faso", dialCode: "+226", flag: "🇧🇫" },
+  { code: "BI", name: "Burundi", dialCode: "+257", flag: "🇧🇮" },
+  { code: "KH", name: "Cambodia", dialCode: "+855", flag: "🇰🇭" },
+  { code: "CM", name: "Cameroon", dialCode: "+237", flag: "🇨🇲" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" },
+  { code: "CV", name: "Cape Verde", dialCode: "+238", flag: "🇨🇻" },
+  { code: "KY", name: "Cayman Islands", dialCode: "+1345", flag: "🇰🇾" },
+  { code: "CF", name: "Central African Republic", dialCode: "+236", flag: "🇨🇫" },
+  { code: "TD", name: "Chad", dialCode: "+235", flag: "🇹🇩" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "🇨🇱" },
+  { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳" },
+  { code: "CX", name: "Christmas Island", dialCode: "+61", flag: "🇨🇽" },
+  { code: "CC", name: "Cocos (Keeling) Islands", dialCode: "+61", flag: "🇨🇨" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "🇨🇴" },
+  { code: "KM", name: "Comoros", dialCode: "+269", flag: "🇰🇲" },
+  { code: "CG", name: "Congo", dialCode: "+242", flag: "🇨🇬" },
+  { code: "CD", name: "Congo, Democratic Republic of the", dialCode: "+243", flag: "🇨🇩" },
+  { code: "CK", name: "Cook Islands", dialCode: "+682", flag: "🇨🇰" },
+  { code: "CR", name: "Costa Rica", dialCode: "+506", flag: "🇨🇷" },
+  { code: "CI", name: "Cote d'Ivoire", dialCode: "+225", flag: "🇨🇮" },
+  { code: "HR", name: "Croatia", dialCode: "+385", flag: "🇭🇷" },
+  { code: "CU", name: "Cuba", dialCode: "+53", flag: "🇨🇺" },
+  { code: "CY", name: "Cyprus", dialCode: "+357", flag: "🇨🇾" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "🇨🇿" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "🇩🇰" },
+  { code: "DJ", name: "Djibouti", dialCode: "+253", flag: "🇩🇯" },
+  { code: "DM", name: "Dominica", dialCode: "+1767", flag: "🇩🇲" },
+  { code: "DO", name: "Dominican Republic", dialCode: "+1", flag: "🇩🇴" },
+  { code: "EC", name: "Ecuador", dialCode: "+593", flag: "🇪🇨" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "🇪🇬" },
+  { code: "SV", name: "El Salvador", dialCode: "+503", flag: "🇸🇻" },
+  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240", flag: "🇬🇶" },
+  { code: "ER", name: "Eritrea", dialCode: "+291", flag: "🇪🇷" },
+  { code: "EE", name: "Estonia", dialCode: "+372", flag: "🇪🇪" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251", flag: "🇪🇹" },
+  { code: "FK", name: "Falkland Islands (Malvinas)", dialCode: "+500", flag: "🇫🇰" },
+  { code: "FO", name: "Faroe Islands", dialCode: "+298", flag: "🇫🇴" },
+  { code: "FJ", name: "Fiji", dialCode: "+679", flag: "🇫🇯" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "🇫🇮" },
+  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
+  { code: "GF", name: "French Guiana", dialCode: "+594", flag: "🇬🇫" },
+  { code: "PF", name: "French Polynesia", dialCode: "+689", flag: "🇵🇫" },
+  { code: "GA", name: "Gabon", dialCode: "+241", flag: "🇬🇦" },
+  { code: "GM", name: "Gambia", dialCode: "+220", flag: "🇬🇲" },
+  { code: "GE", name: "Georgia", dialCode: "+995", flag: "🇬🇪" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
+  { code: "GH", name: "Ghana", dialCode: "+233", flag: "🇬🇭" },
+  { code: "GI", name: "Gibraltar", dialCode: "+350", flag: "🇬🇮" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "🇬🇷" },
+  { code: "GL", name: "Greenland", dialCode: "+299", flag: "🇬🇱" },
+  { code: "GD", name: "Grenada", dialCode: "+1473", flag: "🇬🇩" },
+  { code: "GP", name: "Guadeloupe", dialCode: "+590", flag: "🇬🇵" },
+  { code: "GU", name: "Guam", dialCode: "+1671", flag: "🇬🇺" },
+  { code: "GT", name: "Guatemala", dialCode: "+502", flag: "🇬🇹" },
+  { code: "GG", name: "Guernsey", dialCode: "+44", flag: "🇬🇬" },
+  { code: "GN", name: "Guinea", dialCode: "+224", flag: "🇬🇳" },
+  { code: "GW", name: "Guinea-Bissau", dialCode: "+245", flag: "🇬🇼" },
+  { code: "GY", name: "Guyana", dialCode: "+592", flag: "🇬🇾" },
+  { code: "HT", name: "Haiti", dialCode: "+509", flag: "🇭🇹" },
+  { code: "VA", name: "Holy See (Vatican City State)", dialCode: "+379", flag: "🇻🇦" },
+  { code: "HN", name: "Honduras", dialCode: "+504", flag: "🇭🇳" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", flag: "🇭🇰" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "🇭🇺" },
+  { code: "IS", name: "Iceland", dialCode: "+354", flag: "🇮🇸" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳" },
+  { code: "IR", name: "Iran, Islamic Republic of", dialCode: "+98", flag: "🇮🇷" },
+  { code: "IQ", name: "Iraq", dialCode: "+964", flag: "🇮🇶" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "🇮🇪" },
+  { code: "IM", name: "Isle of Man", dialCode: "+44", flag: "🇮🇲" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "🇮🇱" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹" },
+  { code: "JM", name: "Jamaica", dialCode: "+1876", flag: "🇯🇲" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵" },
+  { code: "JE", name: "Jersey", dialCode: "+44", flag: "🇯🇪" },
+  { code: "JO", name: "Jordan", dialCode: "+962", flag: "🇯🇴" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7", flag: "🇰🇿" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "🇰🇪" },
+  { code: "KI", name: "Kiribati", dialCode: "+686", flag: "🇰🇮" },
+  { code: "KP", name: "Korea, Democratic People's Republic of", dialCode: "+850", flag: "🇰🇵" },
+  { code: "KR", name: "Korea, Republic of", dialCode: "+82", flag: "🇰🇷" },
+  { code: "KW", name: "Kuwait", dialCode: "+965", flag: "🇰🇼" },
+  { code: "KG", name: "Kyrgyzstan", dialCode: "+996", flag: "🇰🇬" },
+  { code: "LA", name: "Lao People's Democratic Republic", dialCode: "+856", flag: "🇱🇦" },
+  { code: "LV", name: "Latvia", dialCode: "+371", flag: "🇱🇻" },
+  { code: "LB", name: "Lebanon", dialCode: "+961", flag: "🇱🇧" },
+  { code: "LS", name: "Lesotho", dialCode: "+266", flag: "🇱🇸" },
+  { code: "LR", name: "Liberia", dialCode: "+231", flag: "🇱🇷" },
+  { code: "LY", name: "Libyan Arab Jamahiriya", dialCode: "+218", flag: "🇱🇾" },
+  { code: "LI", name: "Liechtenstein", dialCode: "+423", flag: "🇱🇮" },
+  { code: "LT", name: "Lithuania", dialCode: "+370", flag: "🇱🇹" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352", flag: "🇱🇺" },
+  { code: "MO", name: "Macao", dialCode: "+853", flag: "🇲🇴" },
+  { code: "MK", name: "Macedonia, the Former Yugoslav Republic of", dialCode: "+389", flag: "🇲🇰" },
+  { code: "MG", name: "Madagascar", dialCode: "+261", flag: "🇲🇬" },
+  { code: "MW", name: "Malawi", dialCode: "+265", flag: "🇲🇼" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "🇲🇾" },
+  { code: "MV", name: "Maldives", dialCode: "+960", flag: "🇲🇻" },
+  { code: "ML", name: "Mali", dialCode: "+223", flag: "🇲🇱" },
+  { code: "MT", name: "Malta", dialCode: "+356", flag: "🇲🇹" },
+  { code: "MH", name: "Marshall Islands", dialCode: "+692", flag: "🇲🇭" },
+  { code: "MQ", name: "Martinique", dialCode: "+596", flag: "🇲🇶" },
+  { code: "MR", name: "Mauritania", dialCode: "+222", flag: "🇲🇷" },
+  { code: "MU", name: "Mauritius", dialCode: "+230", flag: "🇲🇺" },
+  { code: "YT", name: "Mayotte", dialCode: "+262", flag: "🇾🇹" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "🇲🇽" },
+  { code: "FM", name: "Micronesia, Federated States of", dialCode: "+691", flag: "🇫🇲" },
+  { code: "MD", name: "Moldova, Republic of", dialCode: "+373", flag: "🇲🇩" },
+  { code: "MC", name: "Monaco", dialCode: "+377", flag: "🇲🇨" },
+  { code: "MN", name: "Mongolia", dialCode: "+976", flag: "🇲🇳" },
+  { code: "ME", name: "Montenegro", dialCode: "+382", flag: "🇲🇪" },
+  { code: "MS", name: "Montserrat", dialCode: "+1664", flag: "🇲🇸" },
+  { code: "MA", name: "Morocco", dialCode: "+212", flag: "🇲🇦" },
+  { code: "MZ", name: "Mozambique", dialCode: "+258", flag: "🇲🇿" },
+  { code: "MM", name: "Myanmar", dialCode: "+95", flag: "🇲🇲" },
+  { code: "NA", name: "Namibia", dialCode: "+264", flag: "🇳🇦" },
+  { code: "NR", name: "Nauru", dialCode: "+674", flag: "🇳🇷" },
+  { code: "NP", name: "Nepal", dialCode: "+977", flag: "🇳🇵" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "🇳🇱" },
+  { code: "NC", name: "New Caledonia", dialCode: "+687", flag: "🇳🇨" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "🇳🇿" },
+  { code: "NI", name: "Nicaragua", dialCode: "+505", flag: "🇳🇮" },
+  { code: "NE", name: "Niger", dialCode: "+227", flag: "🇳🇪" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "🇳🇬" },
+  { code: "NU", name: "Niue", dialCode: "+683", flag: "🇳🇺" },
+  { code: "NF", name: "Norfolk Island", dialCode: "+672", flag: "🇳🇫" },
+  { code: "MP", name: "Northern Mariana Islands", dialCode: "+1670", flag: "🇲🇵" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "🇳🇴" },
+  { code: "OM", name: "Oman", dialCode: "+968", flag: "🇴🇲" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", flag: "🇵🇰" },
+  { code: "PW", name: "Palau", dialCode: "+680", flag: "🇵🇼" },
+  { code: "PS", name: "Palestinian Territory, Occupied", dialCode: "+970", flag: "🇵🇸" },
+  { code: "PA", name: "Panama", dialCode: "+507", flag: "🇵🇦" },
+  { code: "PG", name: "Papua New Guinea", dialCode: "+675", flag: "🇵🇬" },
+  { code: "PY", name: "Paraguay", dialCode: "+595", flag: "🇵🇾" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "🇵🇪" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "🇵🇭" },
+  { code: "PN", name: "Pitcairn", dialCode: "+870", flag: "🇵🇳" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "🇵🇱" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "🇵🇹" },
+  { code: "PR", name: "Puerto Rico", dialCode: "+1939", flag: "🇵🇷" },
+  { code: "QA", name: "Qatar", dialCode: "+974", flag: "🇶🇦" },
+  { code: "RE", name: "Reunion", dialCode: "+262", flag: "🇷🇪" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "🇷🇴" },
+  { code: "RU", name: "Russian Federation", dialCode: "+7", flag: "🇷🇺" },
+  { code: "RW", name: "Rwanda", dialCode: "+250", flag: "🇷🇼" },
+  { code: "BL", name: "Saint Barthelemy", dialCode: "+590", flag: "🇧🇱" },
+  { code: "SH", name: "Saint Helena", dialCode: "+290", flag: "🇸🇭" },
+  { code: "KN", name: "Saint Kitts and Nevis", dialCode: "+1869", flag: "🇰🇳" },
+  { code: "LC", name: "Saint Lucia", dialCode: "+1758", flag: "🇱🇨" },
+  { code: "MF", name: "Saint Martin", dialCode: "+590", flag: "🇲🇫" },
+  { code: "PM", name: "Saint Pierre and Miquelon", dialCode: "+508", flag: "🇵🇲" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", dialCode: "+1784", flag: "🇻🇨" },
+  { code: "WS", name: "Samoa", dialCode: "+685", flag: "🇼🇸" },
+  { code: "SM", name: "San Marino", dialCode: "+378", flag: "🇸🇲" },
+  { code: "ST", name: "Sao Tome and Principe", dialCode: "+239", flag: "🇸🇹" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "🇸🇦" },
+  { code: "SN", name: "Senegal", dialCode: "+221", flag: "🇸🇳" },
+  { code: "RS", name: "Serbia", dialCode: "+381", flag: "🇷🇸" },
+  { code: "SC", name: "Seychelles", dialCode: "+248", flag: "🇸🇨" },
+  { code: "SL", name: "Sierra Leone", dialCode: "+232", flag: "🇸🇱" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "🇸🇬" },
+  { code: "SK", name: "Slovakia", dialCode: "+421", flag: "🇸🇰" },
+  { code: "SI", name: "Slovenia", dialCode: "+386", flag: "🇸🇮" },
+  { code: "SB", name: "Solomon Islands", dialCode: "+677", flag: "🇸🇧" },
+  { code: "SO", name: "Somalia", dialCode: "+252", flag: "🇸🇴" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "🇿🇦" },
+  { code: "GS", name: "South Georgia and the South Sandwich Islands", dialCode: "+500", flag: "🇬🇸" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸" },
+  { code: "LK", name: "Sri Lanka", dialCode: "+94", flag: "🇱🇰" },
+  { code: "SD", name: "Sudan", dialCode: "+249", flag: "🇸🇩" },
+  { code: "SR", name: "Suriname", dialCode: "+597", flag: "🇸🇷" },
+  { code: "SJ", name: "Svalbard and Jan Mayen", dialCode: "+47", flag: "🇸🇯" },
+  { code: "SZ", name: "Swaziland", dialCode: "+268", flag: "🇸🇿" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "🇸🇪" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭" },
+  { code: "SY", name: "Syrian Arab Republic", dialCode: "+963", flag: "🇸🇾" },
+  { code: "TW", name: "Taiwan, Province of China", dialCode: "+886", flag: "🇹🇼" },
+  { code: "TJ", name: "Tajikistan", dialCode: "+992", flag: "🇹🇯" },
+  { code: "TZ", name: "Tanzania, United Republic of", dialCode: "+255", flag: "🇹🇿" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "🇹🇭" },
+  { code: "TL", name: "Timor-Leste", dialCode: "+670", flag: "🇹🇱" },
+  { code: "TG", name: "Togo", dialCode: "+228", flag: "🇹🇬" },
+  { code: "TK", name: "Tokelau", dialCode: "+690", flag: "🇹🇰" },
+  { code: "TO", name: "Tonga", dialCode: "+676", flag: "🇹🇴" },
+  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1868", flag: "🇹🇹" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "🇹🇳" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "🇹🇷" },
+  { code: "TM", name: "Turkmenistan", dialCode: "+993", flag: "🇹🇲" },
+  { code: "TC", name: "Turks and Caicos Islands", dialCode: "+1649", flag: "🇹🇨" },
+  { code: "TV", name: "Tuvalu", dialCode: "+688", flag: "🇹🇻" },
+  { code: "UG", name: "Uganda", dialCode: "+256", flag: "🇺🇬" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "🇺🇦" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971", flag: "🇦🇪" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
+  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
+  { code: "UY", name: "Uruguay", dialCode: "+598", flag: "🇺🇾" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998", flag: "🇺🇿" },
+  { code: "VU", name: "Vanuatu", dialCode: "+678", flag: "🇻🇺" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", flag: "🇻🇪" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "🇻🇳" },
+  { code: "VG", name: "Virgin Islands, British", dialCode: "+1284", flag: "🇻🇬" },
+  { code: "VI", name: "Virgin Islands, U.S.", dialCode: "+1340", flag: "🇻🇮" },
+  { code: "WF", name: "Wallis and Futuna", dialCode: "+681", flag: "🇼🇫" },
+  { code: "EH", name: "Western Sahara", dialCode: "+212", flag: "🇪🇭" },
+  { code: "YE", name: "Yemen", dialCode: "+967", flag: "🇾🇪" },
+  { code: "ZM", name: "Zambia", dialCode: "+260", flag: "🇿🇲" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263", flag: "🇿🇼" }
+];
 function PhoneInput({
-  label = "",
-  value,
+  label,
+  value = "",
   onChange,
+  onInput,
   placeholder,
-  required = false
+  size = "md",
+  status = "neutral",
+  statusMessage,
+  helperText,
+  disabled = false,
+  readonly = false,
+  required = false,
+  defaultCountry = "ID",
+  countries = COUNTRIES,
+  className,
+  id,
+  ...rest
 }) {
-  const [focus, setFocus] = useState(false);
-  const containerClasses = clsx("ina-phone-input");
+  const inputId = useMemo(() => {
+    return id || `phone-input-${Math.random().toString(36).substr(2, 9)}`;
+  }, [id]);
+  const [phoneNumber, setPhoneNumber] = useState(value);
+  const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState(
+    countries.find((c2) => c2.code === defaultCountry) || countries[0]
+  );
+  const inputRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const formatPhoneNumber = (val) => {
+    const clean = val.replace(/\D/g, "");
+    if (clean.length > 7) {
+      return clean.replace(/^(\d{3})(\d{4})(.*)/, "$1-$2-$3");
+    } else if (clean.length > 3) {
+      return clean.replace(/^(\d{3})(.*)/, "$1-$2");
+    }
+    return clean;
+  };
+  useEffect(() => {
+    if (!value) {
+      setPhoneNumber("");
+      return;
+    }
+    const dialCode = selectedCountry.dialCode;
+    let localPart = value;
+    if (value.startsWith(dialCode)) {
+      localPart = value.substring(dialCode.length);
+    }
+    setPhoneNumber(formatPhoneNumber(localPart));
+  }, [value, selectedCountry.dialCode]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsCountryDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const filteredCountries = useMemo(() => {
+    if (!countrySearch) return countries;
+    const search = countrySearch.toLowerCase();
+    return countries.filter(
+      (country) => country.name.toLowerCase().includes(search) || country.dialCode.includes(search) || country.code.toLowerCase().includes(search)
+    );
+  }, [countries, countrySearch]);
+  const toggleCountryDropdown = () => {
+    if (disabled || readonly) return;
+    setIsCountryDropdownOpen((prev) => {
+      const newState = !prev;
+      if (newState) {
+        setCountrySearch("");
+        setTimeout(() => {
+          var _a;
+          (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+        }, 0);
+      }
+      return newState;
+    });
+  };
+  const selectCountry = (country) => {
+    setSelectedCountry(country);
+    setIsCountryDropdownOpen(false);
+    if (phoneNumber) {
+      const cleanValue = phoneNumber.replace(/\D/g, "");
+      const cleanLocal = cleanValue.startsWith("0") ? cleanValue.substring(1) : cleanValue;
+      onChange == null ? void 0 : onChange(`${country.dialCode}${cleanLocal}`);
+    }
+    setTimeout(() => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }, 0);
+  };
+  const handleInputChange = (e) => {
+    const rawValue = e.target.value;
+    const displayClean = rawValue.replace(/\D/g, "");
+    const formatted = formatPhoneNumber(displayClean);
+    setPhoneNumber(formatted);
+    let cleanValue = displayClean;
+    if (cleanValue.startsWith("0")) {
+      cleanValue = cleanValue.substring(1);
+    }
+    onChange == null ? void 0 : onChange(`${selectedCountry.dialCode}${cleanValue}`);
+    onInput == null ? void 0 : onInput(e);
+  };
+  const containerClasses = clsx(
+    "ina-phone-input",
+    disabled && "ina-phone-input--disabled",
+    className
+  );
   const wrapperClasses = clsx(
     "ina-phone-input__wrapper",
-    focus && "ina-phone-input__wrapper--focused"
+    `ina-phone-input__wrapper--size-${size}`,
+    disabled && "ina-phone-input__wrapper--disabled",
+    status !== "neutral" && `ina-phone-input__wrapper--status-${status}`
+  );
+  const helperTextClasses = clsx(
+    "ina-phone-input__helper-text",
+    status === "error" && "ina-phone-input__helper-text--error",
+    status === "warning" && "ina-phone-input__helper-text--warning"
   );
+  const bottomText = statusMessage || helperText;
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: clsx(
-          "ina-phone-input__label",
-          required && "ina-phone-input__label--required"
-        ),
-        htmlFor: String(label),
-        children: [
-          label,
-          " ",
-          required && /* @__PURE__ */ jsx("span", { className: "ina-phone-input__asterisk", children: "*" })
-        ]
-      }
-    ),
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "ina-phone-input__label", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ina-phone-input__asterisk", children: "*" })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ jsx("div", { className: "ina-phone-input__country-code", children: "+62" }),
+      /* @__PURE__ */ jsxs("div", { className: "ina-phone-input__country-selector", ref: dropdownRef, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ina-phone-input__country-button",
+            onClick: toggleCountryDropdown,
+            disabled: disabled || readonly,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-flag", children: selectedCountry.flag }),
+              /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-code", children: selectedCountry.dialCode }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: clsx(
+                    "ina-phone-input__country-chevron",
+                    isCountryDropdownOpen && "ina-phone-input__country-chevron--open"
+                  ),
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M6 9L12 15L18 9",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isCountryDropdownOpen && /* @__PURE__ */ jsxs("div", { className: "ina-phone-input__country-dropdown", children: [
+          /* @__PURE__ */ jsx("div", { className: "ina-phone-input__country-search", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              value: countrySearch,
+              onChange: (e) => setCountrySearch(e.target.value),
+              type: "text",
+              placeholder: "Search countries...",
+              className: "ina-phone-input__country-search-input"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "ina-phone-input__country-list", children: filteredCountries.map((country) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: clsx(
+                "ina-phone-input__country-option",
+                country.code === selectedCountry.code && "ina-phone-input__country-option--selected"
+              ),
+              onClick: () => selectCountry(country),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-flag", children: country.flag }),
+                /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-name", children: country.name }),
+                /* @__PURE__ */ jsx("span", { className: "ina-phone-input__country-dial-code", children: country.dialCode })
+              ]
+            },
+            country.code
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ina-phone-input__divider" }),
       /* @__PURE__ */ jsx(
         "input",
         {
-          id: String(label),
-          type: "text",
-          className: "ina-phone-input__input",
-          value,
+          ...rest,
+          id: inputId,
+          ref: inputRef,
+          value: phoneNumber,
+          type: "tel",
           placeholder,
-          onKeyDown: (e) => onlyDecimalNumber(e),
-          onChange: (e) => onChange(e.target.value),
-          onFocus: () => setFocus(true),
-          onBlur: () => setFocus(false)
+          disabled,
+          readOnly: readonly,
+          className: "ina-phone-input__input",
+          onChange: handleInputChange
         }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "ina-phone-input__contact-icon", children: /* @__PURE__ */ jsx(IconAddressBook, { className: "ina-phone-input__icon", size: 20 }) })
+      )
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "ina-phone-input__example", children: "Contoh: 8211111000666" })
+    bottomText && /* @__PURE__ */ jsx("div", { className: helperTextClasses, children: bottomText })
   ] });
 }
 function RadioInput({
@@ -10345,6 +10809,7 @@ export {
   Card,
   Checkbox,
   Chip,
+  CircleProgressBar,
   Collapse,
   ConfirmationContext,
   ConfirmationProvider,