@intl-tel-input/react 28.0.2 → 28.0.4

package/README.md

@@ -1,6 +1,6 @@
-# IntlTelInput React Component
+# React component for intl-tel-input
 
-A React component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript library. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/packages/react/src/IntlTelInput.tsx).
+For entering, formatting, and validating international telephone numbers.
 
 [Explore docs »](https://intl-tel-input.com/docs/react-component)
 
@@ -10,6 +10,10 @@ A React component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-
   <img width="271" height="279" alt="intl-tel-input screenshot showing country dropdown open" src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/iti-github-light.png">
 </picture>
 
+## Resources
+
+Check out the [website](https://intl-tel-input.com), where you can find [a full set of docs](https://intl-tel-input.com/docs/react-component), a [live playground](https://intl-tel-input.com/playground/) where you can try out all of the options, as well as plenty of [examples](https://intl-tel-input.com/examples/react-component/validation) of different setups.
+
 ## Running the demos locally
 
 1. Initialise the submodules: `git submodule update --init --recursive`
@@ -17,3 +21,11 @@ A React component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-
 3. Build: `npm run build`
 
 You can then open `packages/react/demo/validation/index.html` in your browser to try the validation demo. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/packages/react/demo).
+
+## Issues and contributing
+
+Please report issues and open pull requests on the [main repository](https://github.com/jackocnr/intl-tel-input).
+
+## License
+
+MIT

package/dist/IntlTelInput.js

@@ -1965,7 +1965,7 @@ var defaults = {
   //* A function to load the utils script.
   loadUtils: null,
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
-  nationalMode: true,
+  nationalMode: false,
   //* Display only these countries.
   onlyCountries: null,
   //* Number type to use for placeholders.
@@ -2250,31 +2250,50 @@ var createEl = (tagName, attrs, container) => {
 };
 
 // packages/core/src/js/core/icons.ts
-var buildSearchIcon = () => `
-  <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
-    <circle cx="11" cy="11" r="7" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>`;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var buildSvg = ([tag, attrs, children]) => {
+  const el = document.createElementNS(SVG_NS, tag);
+  if (attrs) {
+    for (const k in attrs) {
+      el.setAttribute(k, String(attrs[k]));
+    }
+  }
+  if (children) {
+    for (const c of children) {
+      el.appendChild(buildSvg(c));
+    }
+  }
+  return el;
+};
+var buildSearchIcon = () => buildSvg(
+  ["svg", { class: "iti__search-icon-svg", width: 14, height: 14, viewBox: "0 0 24 24", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["circle", { cx: 11, cy: 11, r: 7 }],
+    ["line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 }]
+  ]]
+);
 var buildClearIcon = (id) => {
   const maskId = `iti-${id}-clear-mask`;
-  return `
-    <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
-      <mask id="${maskId}" maskUnits="userSpaceOnUse">
-        <rect width="16" height="16" fill="white" />
-        <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
-      </mask>
-      <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
-    </svg>`;
+  return buildSvg(
+    ["svg", { class: "iti__search-clear-svg", width: 12, height: 12, viewBox: "0 0 16 16", [ARIA.HIDDEN]: "true", focusable: "false" }, [
+      ["mask", { id: maskId, maskUnits: "userSpaceOnUse" }, [
+        ["rect", { width: 16, height: 16, fill: "white" }],
+        ["path", { d: "M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8", stroke: "black", "stroke-linecap": "round", class: "iti__search-clear-x" }]
+      ]],
+      ["circle", { cx: 8, cy: 8, r: 8, class: "iti__search-clear-bg", mask: `url(#${maskId})` }]
+    ]]
+  );
 };
-var buildCheckIcon = () => `
-  <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
-    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-  </svg>`;
-var buildGlobeIcon = () => `
-  <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
-    <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
-    <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
-  </svg>`;
+var buildCheckIcon = () => buildSvg(
+  ["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }]
+  ]]
+);
+var buildGlobeIcon = () => buildSvg(
+  ["svg", { width: 256, height: 256, viewBox: "0 0 512 512", class: "iti__globe-svg" }, [
+    ["path", { d: "M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39" }],
+    ["path", { d: "m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40" }]
+  ]]
+);
 
 // packages/core/src/js/core/countrySearch.ts
 var buildSearchTokens = (countries) => {
@@ -2627,7 +2646,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchIconEl.innerHTML = buildSearchIcon();
+    this.#searchIconEl.appendChild(buildSearchIcon());
     this.#searchInputEl = createEl(
       "input",
       {
@@ -2656,7 +2675,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchClearButtonEl.innerHTML = buildClearIcon(this.#id);
+    this.#searchClearButtonEl.appendChild(buildClearIcon(this.#id));
     this.#searchResultsLiveRegionEl = createEl(
       "span",
       { class: "iti__a11y-text" },
@@ -3156,7 +3175,7 @@ var UI = class _UI {
           { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
           newListItem
         );
-        checkIcon.innerHTML = buildCheckIcon();
+        checkIcon.appendChild(buildCheckIcon());
         this.#selectedListItemEl = newListItem;
         if (this.#options.dropdownAlwaysOpen) {
           this.#highlightListItem(newListItem);
@@ -3301,20 +3320,27 @@ var UI = class _UI {
     }
     if (this.#selectedCountryEl) {
       const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
-      let ariaLabel, title, flagInnerHtml;
+      let ariaLabel, title;
+      let flagContent = null;
       if (iso2) {
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        flagInnerHtml = showFlags ? "" : buildGlobeIcon();
+        if (!showFlags) {
+          flagContent = buildGlobeIcon();
+        }
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
-        flagInnerHtml = buildGlobeIcon();
+        flagContent = buildGlobeIcon();
       }
       this.#selectedFlagEl.className = flagClass;
       this.#selectedCountryEl.setAttribute("title", title);
       this.#selectedCountryEl.setAttribute(ARIA.LABEL, ariaLabel);
-      this.#selectedFlagEl.innerHTML = flagInnerHtml;
+      if (flagContent) {
+        this.#selectedFlagEl.replaceChildren(flagContent);
+      } else {
+        this.#selectedFlagEl.replaceChildren();
+      }
     }
     if (separateDialCode) {
       const fullDialCode = dialCode ? `+${dialCode}` : "";
@@ -4633,7 +4659,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.2",
+    version: "28.0.4",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR
@@ -4671,7 +4697,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
-  const pluginInputClassesRef = useRef("");
+  const libraryInputClassesRef = useRef("");
   const lastEmittedNumberRef = useRef(void 0);
   const lastEmittedCountryRef = useRef(void 0);
   const lastEmittedValidityRef = useRef(void 0);
@@ -4738,7 +4764,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       return void 0;
     }
     itiRef.current = intlTelInput_default(inputEl, initOptions);
-    pluginInputClassesRef.current = inputEl.className;
+    libraryInputClassesRef.current = inputEl.className;
     const handleOpen = () => onOpenCountryDropdownRef.current?.();
     const handleClose = () => onCloseCountryDropdownRef.current?.();
     const handleStrictReject = (e) => {
@@ -4802,7 +4828,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     if (ignoredInputProps.has(key)) {
       warnInputProp(key);
     } else if (key === "className") {
-      sanitizedInputProps[key] = `${pluginInputClassesRef.current} ${val}`;
+      sanitizedInputProps[key] = `${libraryInputClassesRef.current} ${val}`;
     } else {
       sanitizedInputProps[key] = val;
     }

package/dist/IntlTelInputWithUtils.js

@@ -1965,7 +1965,7 @@ var defaults = {
   //* A function to load the utils script.
   loadUtils: null,
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
-  nationalMode: true,
+  nationalMode: false,
   //* Display only these countries.
   onlyCountries: null,
   //* Number type to use for placeholders.
@@ -2250,31 +2250,50 @@ var createEl = (tagName, attrs, container) => {
 };
 
 // packages/core/src/js/core/icons.ts
-var buildSearchIcon = () => `
-  <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
-    <circle cx="11" cy="11" r="7" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>`;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var buildSvg = ([tag, attrs, children]) => {
+  const el = document.createElementNS(SVG_NS, tag);
+  if (attrs) {
+    for (const k in attrs) {
+      el.setAttribute(k, String(attrs[k]));
+    }
+  }
+  if (children) {
+    for (const c of children) {
+      el.appendChild(buildSvg(c));
+    }
+  }
+  return el;
+};
+var buildSearchIcon = () => buildSvg(
+  ["svg", { class: "iti__search-icon-svg", width: 14, height: 14, viewBox: "0 0 24 24", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["circle", { cx: 11, cy: 11, r: 7 }],
+    ["line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 }]
+  ]]
+);
 var buildClearIcon = (id) => {
   const maskId = `iti-${id}-clear-mask`;
-  return `
-    <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" ${ARIA.HIDDEN}="true" focusable="false">
-      <mask id="${maskId}" maskUnits="userSpaceOnUse">
-        <rect width="16" height="16" fill="white" />
-        <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
-      </mask>
-      <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
-    </svg>`;
+  return buildSvg(
+    ["svg", { class: "iti__search-clear-svg", width: 12, height: 12, viewBox: "0 0 16 16", [ARIA.HIDDEN]: "true", focusable: "false" }, [
+      ["mask", { id: maskId, maskUnits: "userSpaceOnUse" }, [
+        ["rect", { width: 16, height: 16, fill: "white" }],
+        ["path", { d: "M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8", stroke: "black", "stroke-linecap": "round", class: "iti__search-clear-x" }]
+      ]],
+      ["circle", { cx: 8, cy: 8, r: 8, class: "iti__search-clear-bg", mask: `url(#${maskId})` }]
+    ]]
+  );
 };
-var buildCheckIcon = () => `
-  <svg class="iti__country-check-svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" focusable="false" ${ARIA.HIDDEN}="true">
-    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-  </svg>`;
-var buildGlobeIcon = () => `
-  <svg width="256" height="256" viewBox="0 0 512 512" class="iti__globe-svg">
-    <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
-    <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
-  </svg>`;
+var buildCheckIcon = () => buildSvg(
+  ["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }]
+  ]]
+);
+var buildGlobeIcon = () => buildSvg(
+  ["svg", { width: 256, height: 256, viewBox: "0 0 512 512", class: "iti__globe-svg" }, [
+    ["path", { d: "M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39" }],
+    ["path", { d: "m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40" }]
+  ]]
+);
 
 // packages/core/src/js/core/countrySearch.ts
 var buildSearchTokens = (countries) => {
@@ -2627,7 +2646,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchIconEl.innerHTML = buildSearchIcon();
+    this.#searchIconEl.appendChild(buildSearchIcon());
     this.#searchInputEl = createEl(
       "input",
       {
@@ -2656,7 +2675,7 @@ var UI = class _UI {
       },
       searchWrapper
     );
-    this.#searchClearButtonEl.innerHTML = buildClearIcon(this.#id);
+    this.#searchClearButtonEl.appendChild(buildClearIcon(this.#id));
     this.#searchResultsLiveRegionEl = createEl(
       "span",
       { class: "iti__a11y-text" },
@@ -3156,7 +3175,7 @@ var UI = class _UI {
           { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
           newListItem
         );
-        checkIcon.innerHTML = buildCheckIcon();
+        checkIcon.appendChild(buildCheckIcon());
         this.#selectedListItemEl = newListItem;
         if (this.#options.dropdownAlwaysOpen) {
           this.#highlightListItem(newListItem);
@@ -3301,20 +3320,27 @@ var UI = class _UI {
     }
     if (this.#selectedCountryEl) {
       const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
-      let ariaLabel, title, flagInnerHtml;
+      let ariaLabel, title;
+      let flagContent = null;
       if (iso2) {
         title = name;
         ariaLabel = i18n.selectedCountryAriaLabel.replace("${countryName}", name).replace("${dialCode}", `+${dialCode}`);
-        flagInnerHtml = showFlags ? "" : buildGlobeIcon();
+        if (!showFlags) {
+          flagContent = buildGlobeIcon();
+        }
       } else {
         title = i18n.noCountrySelected;
         ariaLabel = i18n.noCountrySelected;
-        flagInnerHtml = buildGlobeIcon();
+        flagContent = buildGlobeIcon();
       }
       this.#selectedFlagEl.className = flagClass;
       this.#selectedCountryEl.setAttribute("title", title);
       this.#selectedCountryEl.setAttribute(ARIA.LABEL, ariaLabel);
-      this.#selectedFlagEl.innerHTML = flagInnerHtml;
+      if (flagContent) {
+        this.#selectedFlagEl.replaceChildren(flagContent);
+      } else {
+        this.#selectedFlagEl.replaceChildren();
+      }
     }
     if (separateDialCode) {
       const fullDialCode = dialCode ? `+${dialCode}` : "";
@@ -4633,7 +4659,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.2",
+    version: "28.0.4",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR
@@ -11025,7 +11051,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
-  const pluginInputClassesRef = useRef("");
+  const libraryInputClassesRef = useRef("");
   const lastEmittedNumberRef = useRef(void 0);
   const lastEmittedCountryRef = useRef(void 0);
   const lastEmittedValidityRef = useRef(void 0);
@@ -11092,7 +11118,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       return void 0;
     }
     itiRef.current = intlTelInput_default(inputEl, initOptions);
-    pluginInputClassesRef.current = inputEl.className;
+    libraryInputClassesRef.current = inputEl.className;
     const handleOpen = () => onOpenCountryDropdownRef.current?.();
     const handleClose = () => onCloseCountryDropdownRef.current?.();
     const handleStrictReject = (e) => {
@@ -11156,7 +11182,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     if (ignoredInputProps.has(key)) {
       warnInputProp(key);
     } else if (key === "className") {
-      sanitizedInputProps[key] = `${pluginInputClassesRef.current} ${val}`;
+      sanitizedInputProps[key] = `${libraryInputClassesRef.current} ${val}`;
     } else {
       sanitizedInputProps[key] = val;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@intl-tel-input/react",
-  "version": "28.0.2",
-  "description": "A React component for the intl-tel-input JavaScript plugin",
+  "version": "28.0.4",
+  "description": "A React component for intl-tel-input, for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",
   "author": "Jack O'Connor (http://jackocnr.com)",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "intl-tel-input": "^28.0.2"
+    "intl-tel-input": "^28.0.4"
   },
   "peerDependencies": {
     "react": ">=18",