@helpdice/ui 1.7.3 → 1.7.4

package/dist/PhoneInput/index.js

@@ -0,0 +1,1999 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTheme = require('components/use-theme');
+var styles = require('components/input/styles');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var index = {};
+
+var hasRequiredIndex;
+
+function requireIndex () {
+	if (hasRequiredIndex) return index;
+	hasRequiredIndex = 1;
+	var React$1 = React;
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+	var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+	/*
+	Based on Glamor's sheet
+	https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
+	*/ function _defineProperties(target, props) {
+	    for(var i = 0; i < props.length; i++){
+	        var descriptor = props[i];
+	        descriptor.enumerable = descriptor.enumerable || false;
+	        descriptor.configurable = true;
+	        if ("value" in descriptor) descriptor.writable = true;
+	        Object.defineProperty(target, descriptor.key, descriptor);
+	    }
+	}
+	function _createClass(Constructor, protoProps, staticProps) {
+	    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+	    return Constructor;
+	}
+	var isProd = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production";
+	var isString = function(o) {
+	    return Object.prototype.toString.call(o) === "[object String]";
+	};
+	var StyleSheet = /*#__PURE__*/ function() {
+	    function StyleSheet(param) {
+	        var ref = param === void 0 ? {} : param, _name = ref.name, name = _name === void 0 ? "stylesheet" : _name, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? isProd : _optimizeForSpeed;
+	        invariant$1(isString(name), "`name` must be a string");
+	        this._name = name;
+	        this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}";
+	        invariant$1(typeof optimizeForSpeed === "boolean", "`optimizeForSpeed` must be a boolean");
+	        this._optimizeForSpeed = optimizeForSpeed;
+	        this._serverSheet = undefined;
+	        this._tags = [];
+	        this._injected = false;
+	        this._rulesCount = 0;
+	        var node = typeof window !== "undefined" && document.querySelector('meta[property="csp-nonce"]');
+	        this._nonce = node ? node.getAttribute("content") : null;
+	    }
+	    var _proto = StyleSheet.prototype;
+	    _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {
+	        invariant$1(typeof bool === "boolean", "`setOptimizeForSpeed` accepts a boolean");
+	        invariant$1(this._rulesCount === 0, "optimizeForSpeed cannot be when rules have already been inserted");
+	        this.flush();
+	        this._optimizeForSpeed = bool;
+	        this.inject();
+	    };
+	    _proto.isOptimizeForSpeed = function isOptimizeForSpeed() {
+	        return this._optimizeForSpeed;
+	    };
+	    _proto.inject = function inject() {
+	        var _this = this;
+	        invariant$1(!this._injected, "sheet already injected");
+	        this._injected = true;
+	        if (typeof window !== "undefined" && this._optimizeForSpeed) {
+	            this._tags[0] = this.makeStyleTag(this._name);
+	            this._optimizeForSpeed = "insertRule" in this.getSheet();
+	            if (!this._optimizeForSpeed) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.");
+	                }
+	                this.flush();
+	                this._injected = true;
+	            }
+	            return;
+	        }
+	        this._serverSheet = {
+	            cssRules: [],
+	            insertRule: function(rule, index) {
+	                if (typeof index === "number") {
+	                    _this._serverSheet.cssRules[index] = {
+	                        cssText: rule
+	                    };
+	                } else {
+	                    _this._serverSheet.cssRules.push({
+	                        cssText: rule
+	                    });
+	                }
+	                return index;
+	            },
+	            deleteRule: function(index) {
+	                _this._serverSheet.cssRules[index] = null;
+	            }
+	        };
+	    };
+	    _proto.getSheetForTag = function getSheetForTag(tag) {
+	        if (tag.sheet) {
+	            return tag.sheet;
+	        }
+	        // this weirdness brought to you by firefox
+	        for(var i = 0; i < document.styleSheets.length; i++){
+	            if (document.styleSheets[i].ownerNode === tag) {
+	                return document.styleSheets[i];
+	            }
+	        }
+	    };
+	    _proto.getSheet = function getSheet() {
+	        return this.getSheetForTag(this._tags[this._tags.length - 1]);
+	    };
+	    _proto.insertRule = function insertRule(rule, index) {
+	        invariant$1(isString(rule), "`insertRule` accepts only strings");
+	        if (typeof window === "undefined") {
+	            if (typeof index !== "number") {
+	                index = this._serverSheet.cssRules.length;
+	            }
+	            this._serverSheet.insertRule(rule, index);
+	            return this._rulesCount++;
+	        }
+	        if (this._optimizeForSpeed) {
+	            var sheet = this.getSheet();
+	            if (typeof index !== "number") {
+	                index = sheet.cssRules.length;
+	            }
+	            // this weirdness for perf, and chrome's weird bug
+	            // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
+	            try {
+	                sheet.insertRule(rule, index);
+	            } catch (error) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+	                }
+	                return -1;
+	            }
+	        } else {
+	            var insertionPoint = this._tags[index];
+	            this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint));
+	        }
+	        return this._rulesCount++;
+	    };
+	    _proto.replaceRule = function replaceRule(index, rule) {
+	        if (this._optimizeForSpeed || typeof window === "undefined") {
+	            var sheet = typeof window !== "undefined" ? this.getSheet() : this._serverSheet;
+	            if (!rule.trim()) {
+	                rule = this._deletedRulePlaceholder;
+	            }
+	            if (!sheet.cssRules[index]) {
+	                // @TBD Should we throw an error?
+	                return index;
+	            }
+	            sheet.deleteRule(index);
+	            try {
+	                sheet.insertRule(rule, index);
+	            } catch (error) {
+	                if (!isProd) {
+	                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+	                }
+	                // In order to preserve the indices we insert a deleteRulePlaceholder
+	                sheet.insertRule(this._deletedRulePlaceholder, index);
+	            }
+	        } else {
+	            var tag = this._tags[index];
+	            invariant$1(tag, "old rule at index `" + index + "` not found");
+	            tag.textContent = rule;
+	        }
+	        return index;
+	    };
+	    _proto.deleteRule = function deleteRule(index) {
+	        if (typeof window === "undefined") {
+	            this._serverSheet.deleteRule(index);
+	            return;
+	        }
+	        if (this._optimizeForSpeed) {
+	            this.replaceRule(index, "");
+	        } else {
+	            var tag = this._tags[index];
+	            invariant$1(tag, "rule at index `" + index + "` not found");
+	            tag.parentNode.removeChild(tag);
+	            this._tags[index] = null;
+	        }
+	    };
+	    _proto.flush = function flush() {
+	        this._injected = false;
+	        this._rulesCount = 0;
+	        if (typeof window !== "undefined") {
+	            this._tags.forEach(function(tag) {
+	                return tag && tag.parentNode.removeChild(tag);
+	            });
+	            this._tags = [];
+	        } else {
+	            // simpler on server
+	            this._serverSheet.cssRules = [];
+	        }
+	    };
+	    _proto.cssRules = function cssRules() {
+	        var _this = this;
+	        if (typeof window === "undefined") {
+	            return this._serverSheet.cssRules;
+	        }
+	        return this._tags.reduce(function(rules, tag) {
+	            if (tag) {
+	                rules = rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules, function(rule) {
+	                    return rule.cssText === _this._deletedRulePlaceholder ? null : rule;
+	                }));
+	            } else {
+	                rules.push(null);
+	            }
+	            return rules;
+	        }, []);
+	    };
+	    _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) {
+	        if (cssString) {
+	            invariant$1(isString(cssString), "makeStyleTag accepts only strings as second parameter");
+	        }
+	        var tag = document.createElement("style");
+	        if (this._nonce) tag.setAttribute("nonce", this._nonce);
+	        tag.type = "text/css";
+	        tag.setAttribute("data-" + name, "");
+	        if (cssString) {
+	            tag.appendChild(document.createTextNode(cssString));
+	        }
+	        var head = document.head || document.getElementsByTagName("head")[0];
+	        if (relativeToTag) {
+	            head.insertBefore(tag, relativeToTag);
+	        } else {
+	            head.appendChild(tag);
+	        }
+	        return tag;
+	    };
+	    _createClass(StyleSheet, [
+	        {
+	            key: "length",
+	            get: function get() {
+	                return this._rulesCount;
+	            }
+	        }
+	    ]);
+	    return StyleSheet;
+	}();
+	function invariant$1(condition, message) {
+	    if (!condition) {
+	        throw new Error("StyleSheet: " + message + ".");
+	    }
+	}
+
+	function hash(str) {
+	    var _$hash = 5381, i = str.length;
+	    while(i){
+	        _$hash = _$hash * 33 ^ str.charCodeAt(--i);
+	    }
+	    /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+	   * integers. Since we want the results to be always positive, convert the
+	   * signed int to an unsigned by doing an unsigned bitshift. */ return _$hash >>> 0;
+	}
+	var stringHash = hash;
+
+	var sanitize = function(rule) {
+	    return rule.replace(/\/style/gi, "\\/style");
+	};
+	var cache = {};
+	/**
+	 * computeId
+	 *
+	 * Compute and memoize a jsx id from a basedId and optionally props.
+	 */ function computeId(baseId, props) {
+	    if (!props) {
+	        return "jsx-" + baseId;
+	    }
+	    var propsToString = String(props);
+	    var key = baseId + propsToString;
+	    if (!cache[key]) {
+	        cache[key] = "jsx-" + stringHash(baseId + "-" + propsToString);
+	    }
+	    return cache[key];
+	}
+	/**
+	 * computeSelector
+	 *
+	 * Compute and memoize dynamic selectors.
+	 */ function computeSelector(id, css) {
+	    var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g;
+	    // Sanitize SSR-ed CSS.
+	    // Client side code doesn't need to be sanitized since we use
+	    // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).
+	    if (typeof window === "undefined") {
+	        css = sanitize(css);
+	    }
+	    var idcss = id + css;
+	    if (!cache[idcss]) {
+	        cache[idcss] = css.replace(selectoPlaceholderRegexp, id);
+	    }
+	    return cache[idcss];
+	}
+
+	function mapRulesToStyle(cssRules, options) {
+	    if (options === void 0) options = {};
+	    return cssRules.map(function(args) {
+	        var id = args[0];
+	        var css = args[1];
+	        return /*#__PURE__*/ React__default["default"].createElement("style", {
+	            id: "__" + id,
+	            // Avoid warnings upon render with a key
+	            key: "__" + id,
+	            nonce: options.nonce ? options.nonce : undefined,
+	            dangerouslySetInnerHTML: {
+	                __html: css
+	            }
+	        });
+	    });
+	}
+	var StyleSheetRegistry = /*#__PURE__*/ function() {
+	    function StyleSheetRegistry(param) {
+	        var ref = param === void 0 ? {} : param, _styleSheet = ref.styleSheet, styleSheet = _styleSheet === void 0 ? null : _styleSheet, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? false : _optimizeForSpeed;
+	        this._sheet = styleSheet || new StyleSheet({
+	            name: "styled-jsx",
+	            optimizeForSpeed: optimizeForSpeed
+	        });
+	        this._sheet.inject();
+	        if (styleSheet && typeof optimizeForSpeed === "boolean") {
+	            this._sheet.setOptimizeForSpeed(optimizeForSpeed);
+	            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+	        }
+	        this._fromServer = undefined;
+	        this._indices = {};
+	        this._instancesCounts = {};
+	    }
+	    var _proto = StyleSheetRegistry.prototype;
+	    _proto.add = function add(props) {
+	        var _this = this;
+	        if (undefined === this._optimizeForSpeed) {
+	            this._optimizeForSpeed = Array.isArray(props.children);
+	            this._sheet.setOptimizeForSpeed(this._optimizeForSpeed);
+	            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+	        }
+	        if (typeof window !== "undefined" && !this._fromServer) {
+	            this._fromServer = this.selectFromServer();
+	            this._instancesCounts = Object.keys(this._fromServer).reduce(function(acc, tagName) {
+	                acc[tagName] = 0;
+	                return acc;
+	            }, {});
+	        }
+	        var ref = this.getIdAndRules(props), styleId = ref.styleId, rules = ref.rules;
+	        // Deduping: just increase the instances count.
+	        if (styleId in this._instancesCounts) {
+	            this._instancesCounts[styleId] += 1;
+	            return;
+	        }
+	        var indices = rules.map(function(rule) {
+	            return _this._sheet.insertRule(rule);
+	        })// Filter out invalid rules
+	        .filter(function(index) {
+	            return index !== -1;
+	        });
+	        this._indices[styleId] = indices;
+	        this._instancesCounts[styleId] = 1;
+	    };
+	    _proto.remove = function remove(props) {
+	        var _this = this;
+	        var styleId = this.getIdAndRules(props).styleId;
+	        invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found");
+	        this._instancesCounts[styleId] -= 1;
+	        if (this._instancesCounts[styleId] < 1) {
+	            var tagFromServer = this._fromServer && this._fromServer[styleId];
+	            if (tagFromServer) {
+	                tagFromServer.parentNode.removeChild(tagFromServer);
+	                delete this._fromServer[styleId];
+	            } else {
+	                this._indices[styleId].forEach(function(index) {
+	                    return _this._sheet.deleteRule(index);
+	                });
+	                delete this._indices[styleId];
+	            }
+	            delete this._instancesCounts[styleId];
+	        }
+	    };
+	    _proto.update = function update(props, nextProps) {
+	        this.add(nextProps);
+	        this.remove(props);
+	    };
+	    _proto.flush = function flush() {
+	        this._sheet.flush();
+	        this._sheet.inject();
+	        this._fromServer = undefined;
+	        this._indices = {};
+	        this._instancesCounts = {};
+	    };
+	    _proto.cssRules = function cssRules() {
+	        var _this = this;
+	        var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function(styleId) {
+	            return [
+	                styleId,
+	                _this._fromServer[styleId]
+	            ];
+	        }) : [];
+	        var cssRules = this._sheet.cssRules();
+	        return fromServer.concat(Object.keys(this._indices).map(function(styleId) {
+	            return [
+	                styleId,
+	                _this._indices[styleId].map(function(index) {
+	                    return cssRules[index].cssText;
+	                }).join(_this._optimizeForSpeed ? "" : "\n")
+	            ];
+	        })// filter out empty rules
+	        .filter(function(rule) {
+	            return Boolean(rule[1]);
+	        }));
+	    };
+	    _proto.styles = function styles(options) {
+	        return mapRulesToStyle(this.cssRules(), options);
+	    };
+	    _proto.getIdAndRules = function getIdAndRules(props) {
+	        var css = props.children, dynamic = props.dynamic, id = props.id;
+	        if (dynamic) {
+	            var styleId = computeId(id, dynamic);
+	            return {
+	                styleId: styleId,
+	                rules: Array.isArray(css) ? css.map(function(rule) {
+	                    return computeSelector(styleId, rule);
+	                }) : [
+	                    computeSelector(styleId, css)
+	                ]
+	            };
+	        }
+	        return {
+	            styleId: computeId(id),
+	            rules: Array.isArray(css) ? css : [
+	                css
+	            ]
+	        };
+	    };
+	    /**
+	   * selectFromServer
+	   *
+	   * Collects style tags from the document with id __jsx-XXX
+	   */ _proto.selectFromServer = function selectFromServer() {
+	        var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));
+	        return elements.reduce(function(acc, element) {
+	            var id = element.id.slice(2);
+	            acc[id] = element;
+	            return acc;
+	        }, {});
+	    };
+	    return StyleSheetRegistry;
+	}();
+	function invariant(condition, message) {
+	    if (!condition) {
+	        throw new Error("StyleSheetRegistry: " + message + ".");
+	    }
+	}
+	var StyleSheetContext = /*#__PURE__*/ React$1.createContext(null);
+	StyleSheetContext.displayName = "StyleSheetContext";
+	function createStyleRegistry() {
+	    return new StyleSheetRegistry();
+	}
+	function StyleRegistry(param) {
+	    var configuredRegistry = param.registry, children = param.children;
+	    var rootRegistry = React$1.useContext(StyleSheetContext);
+	    var ref = React$1.useState(function() {
+	        return rootRegistry || configuredRegistry || createStyleRegistry();
+	    }), registry = ref[0];
+	    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
+	        value: registry
+	    }, children);
+	}
+	function useStyleRegistry() {
+	    return React$1.useContext(StyleSheetContext);
+	}
+
+	// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
+	// https://github.com/reactwg/react-18/discussions/110
+	var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
+	var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
+	function JSXStyle(props) {
+	    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
+	    var insertionEffectCalled = React$1.useRef(false);
+	    // `registry` might not exist while server-side rendering
+	    if (!registry) {
+	        return null;
+	    }
+	    if (typeof window === "undefined") {
+	        registry.add(props);
+	        return null;
+	    }
+	    useInsertionEffect(function() {
+	        // ReactDOM removes all DOM during hydration in certain cases
+	        if (!document.head) {
+	            return;
+	        }
+	        registry.add(props);
+	        insertionEffectCalled.current = true;
+	        return function() {
+	            insertionEffectCalled.current = false;
+	            registry.remove(props);
+	        };
+	    }, [
+	        props.id,
+	        String(props.dynamic)
+	    ]);
+	    React$1.useLayoutEffect(function() {
+	        if (!document.head || insertionEffectCalled.current) {
+	            return;
+	        }
+	        registry.add(props);
+	        return function() {
+	            registry.remove(props);
+	        };
+	    // props.children can be string[], will be striped since id is identical
+	    }, [
+	        props.id,
+	        String(props.dynamic)
+	    ]);
+	    return null;
+	}
+	JSXStyle.dynamic = function(info) {
+	    return info.map(function(tagInfo) {
+	        var baseId = tagInfo[0];
+	        var props = tagInfo[1];
+	        return computeId(baseId, props);
+	    }).join(" ");
+	};
+
+	index.StyleRegistry = StyleRegistry;
+	index.createStyleRegistry = createStyleRegistry;
+	index.style = JSXStyle;
+	index.useStyleRegistry = useStyleRegistry;
+	return index;
+}
+
+var style;
+var hasRequiredStyle;
+
+function requireStyle () {
+	if (hasRequiredStyle) return style;
+	hasRequiredStyle = 1;
+	style = requireIndex().style;
+	return style;
+}
+
+var styleExports = requireStyle();
+var _JSXStyle = /*@__PURE__*/getDefaultExportFromCjs(styleExports);
+
+var countries = [
+	{
+		code: "AD",
+		label: "Andorra",
+		phone: "+376"
+	},
+	{
+		code: "AE",
+		label: "United Arab Emirates",
+		phone: "+971"
+	},
+	{
+		code: "AF",
+		label: "Afghanistan",
+		phone: "+93"
+	},
+	{
+		code: "AG",
+		label: "Antigua and Barbuda",
+		phone: "+1-268"
+	},
+	{
+		code: "AI",
+		label: "Anguilla",
+		phone: "+1-264"
+	},
+	{
+		code: "AL",
+		label: "Albania",
+		phone: "+355"
+	},
+	{
+		code: "AM",
+		label: "Armenia",
+		phone: "+374"
+	},
+	{
+		code: "AO",
+		label: "Angola",
+		phone: "+244"
+	},
+	{
+		code: "AQ",
+		label: "Antarctica",
+		phone: "+672"
+	},
+	{
+		code: "AR",
+		label: "Argentina",
+		phone: "+54"
+	},
+	{
+		code: "AS",
+		label: "American Samoa",
+		phone: "+1-684"
+	},
+	{
+		code: "AT",
+		label: "Austria",
+		phone: "+43"
+	},
+	{
+		code: "AU",
+		label: "Australia",
+		phone: "+61",
+		suggested: true
+	},
+	{
+		code: "AW",
+		label: "Aruba",
+		phone: "+297"
+	},
+	{
+		code: "AX",
+		label: "Alland Islands",
+		phone: "+358"
+	},
+	{
+		code: "AZ",
+		label: "Azerbaijan",
+		phone: "+994"
+	},
+	{
+		code: "BA",
+		label: "Bosnia and Herzegovina",
+		phone: "+387"
+	},
+	{
+		code: "BB",
+		label: "Barbados",
+		phone: "+1-246"
+	},
+	{
+		code: "BD",
+		label: "Bangladesh",
+		phone: "+880"
+	},
+	{
+		code: "BE",
+		label: "Belgium",
+		phone: "+32"
+	},
+	{
+		code: "BF",
+		label: "Burkina Faso",
+		phone: "+226"
+	},
+	{
+		code: "BG",
+		label: "Bulgaria",
+		phone: "+359"
+	},
+	{
+		code: "BH",
+		label: "Bahrain",
+		phone: "+973"
+	},
+	{
+		code: "BI",
+		label: "Burundi",
+		phone: "+257"
+	},
+	{
+		code: "BJ",
+		label: "Benin",
+		phone: "+229"
+	},
+	{
+		code: "BL",
+		label: "Saint Barthelemy",
+		phone: "+590"
+	},
+	{
+		code: "BM",
+		label: "Bermuda",
+		phone: "+1-441"
+	},
+	{
+		code: "BN",
+		label: "Brunei Darussalam",
+		phone: "+673"
+	},
+	{
+		code: "BO",
+		label: "Bolivia",
+		phone: "+591"
+	},
+	{
+		code: "BR",
+		label: "Brazil",
+		phone: "+55"
+	},
+	{
+		code: "BS",
+		label: "Bahamas",
+		phone: "+1-242"
+	},
+	{
+		code: "BT",
+		label: "Bhutan",
+		phone: "+975"
+	},
+	{
+		code: "BV",
+		label: "Bouvet Island",
+		phone: "+47"
+	},
+	{
+		code: "BW",
+		label: "Botswana",
+		phone: "+267"
+	},
+	{
+		code: "BY",
+		label: "Belarus",
+		phone: "+375"
+	},
+	{
+		code: "BZ",
+		label: "Belize",
+		phone: "+501"
+	},
+	{
+		code: "CA",
+		label: "Canada",
+		phone: "+1",
+		suggested: true
+	},
+	{
+		code: "CC",
+		label: "Cocos (Keeling) Islands",
+		phone: "+61"
+	},
+	{
+		code: "CD",
+		label: "Congo, Democratic Republic of the",
+		phone: "+243"
+	},
+	{
+		code: "CF",
+		label: "Central African Republic",
+		phone: "+236"
+	},
+	{
+		code: "CG",
+		label: "Congo, Republic of the",
+		phone: "+242"
+	},
+	{
+		code: "CH",
+		label: "Switzerland",
+		phone: "+41"
+	},
+	{
+		code: "CI",
+		label: "Cote d'Ivoire",
+		phone: "+225"
+	},
+	{
+		code: "CK",
+		label: "Cook Islands",
+		phone: "+682"
+	},
+	{
+		code: "CL",
+		label: "Chile",
+		phone: "+56"
+	},
+	{
+		code: "CM",
+		label: "Cameroon",
+		phone: "+237"
+	},
+	{
+		code: "CN",
+		label: "China",
+		phone: "+86"
+	},
+	{
+		code: "CO",
+		label: "Colombia",
+		phone: "+57"
+	},
+	{
+		code: "CR",
+		label: "Costa Rica",
+		phone: "+506"
+	},
+	{
+		code: "CU",
+		label: "Cuba",
+		phone: "+53"
+	},
+	{
+		code: "CV",
+		label: "Cape Verde",
+		phone: "+238"
+	},
+	{
+		code: "CW",
+		label: "Curacao",
+		phone: "+599"
+	},
+	{
+		code: "CX",
+		label: "Christmas Island",
+		phone: "+61"
+	},
+	{
+		code: "CY",
+		label: "Cyprus",
+		phone: "+357"
+	},
+	{
+		code: "CZ",
+		label: "Czech Republic",
+		phone: "+420"
+	},
+	{
+		code: "DE",
+		label: "Germany",
+		phone: "+49",
+		suggested: true
+	},
+	{
+		code: "DJ",
+		label: "Djibouti",
+		phone: "+253"
+	},
+	{
+		code: "DK",
+		label: "Denmark",
+		phone: "+45"
+	},
+	{
+		code: "DM",
+		label: "Dominica",
+		phone: "+1-767"
+	},
+	{
+		code: "DO",
+		label: "Dominican Republic",
+		phone: "+1-809"
+	},
+	{
+		code: "DZ",
+		label: "Algeria",
+		phone: "+213"
+	},
+	{
+		code: "EC",
+		label: "Ecuador",
+		phone: "+593"
+	},
+	{
+		code: "EE",
+		label: "Estonia",
+		phone: "+372"
+	},
+	{
+		code: "EG",
+		label: "Egypt",
+		phone: "+20"
+	},
+	{
+		code: "EH",
+		label: "Western Sahara",
+		phone: "+212"
+	},
+	{
+		code: "ER",
+		label: "Eritrea",
+		phone: "+291"
+	},
+	{
+		code: "ES",
+		label: "Spain",
+		phone: "+34"
+	},
+	{
+		code: "ET",
+		label: "Ethiopia",
+		phone: "+251"
+	},
+	{
+		code: "FI",
+		label: "Finland",
+		phone: "+358"
+	},
+	{
+		code: "FJ",
+		label: "Fiji",
+		phone: "+679"
+	},
+	{
+		code: "FK",
+		label: "Falkland Islands (Malvinas)",
+		phone: "+500"
+	},
+	{
+		code: "FM",
+		label: "Micronesia, Federated States of",
+		phone: "+691"
+	},
+	{
+		code: "FO",
+		label: "Faroe Islands",
+		phone: "+298"
+	},
+	{
+		code: "FR",
+		label: "France",
+		phone: "+33",
+		suggested: true
+	},
+	{
+		code: "GA",
+		label: "Gabon",
+		phone: "+241"
+	},
+	{
+		code: "GB",
+		label: "United Kingdom",
+		phone: "+44"
+	},
+	{
+		code: "GD",
+		label: "Grenada",
+		phone: "+1-473"
+	},
+	{
+		code: "GE",
+		label: "Georgia",
+		phone: "+995"
+	},
+	{
+		code: "GF",
+		label: "French Guiana",
+		phone: "+594"
+	},
+	{
+		code: "GG",
+		label: "Guernsey",
+		phone: "+44"
+	},
+	{
+		code: "GH",
+		label: "Ghana",
+		phone: "+233"
+	},
+	{
+		code: "GI",
+		label: "Gibraltar",
+		phone: "+350"
+	},
+	{
+		code: "GL",
+		label: "Greenland",
+		phone: "+299"
+	},
+	{
+		code: "GM",
+		label: "Gambia",
+		phone: "+220"
+	},
+	{
+		code: "GN",
+		label: "Guinea",
+		phone: "+224"
+	},
+	{
+		code: "GP",
+		label: "Guadeloupe",
+		phone: "+590"
+	},
+	{
+		code: "GQ",
+		label: "Equatorial Guinea",
+		phone: "+240"
+	},
+	{
+		code: "GR",
+		label: "Greece",
+		phone: "+30"
+	},
+	{
+		code: "GS",
+		label: "South Georgia and the South Sandwich Islands",
+		phone: "+500"
+	},
+	{
+		code: "GT",
+		label: "Guatemala",
+		phone: "+502"
+	},
+	{
+		code: "GU",
+		label: "Guam",
+		phone: "+1-671"
+	},
+	{
+		code: "GW",
+		label: "Guinea-Bissau",
+		phone: "+245"
+	},
+	{
+		code: "GY",
+		label: "Guyana",
+		phone: "+592"
+	},
+	{
+		code: "HK",
+		label: "Hong Kong",
+		phone: "+852"
+	},
+	{
+		code: "HM",
+		label: "Heard Island and McDonald Islands",
+		phone: "+672"
+	},
+	{
+		code: "HN",
+		label: "Honduras",
+		phone: "+504"
+	},
+	{
+		code: "HR",
+		label: "Croatia",
+		phone: "+385"
+	},
+	{
+		code: "HT",
+		label: "Haiti",
+		phone: "+509"
+	},
+	{
+		code: "HU",
+		label: "Hungary",
+		phone: "+36"
+	},
+	{
+		code: "ID",
+		label: "Indonesia",
+		phone: "+62"
+	},
+	{
+		code: "IE",
+		label: "Ireland",
+		phone: "+353"
+	},
+	{
+		code: "IL",
+		label: "Israel",
+		phone: "+972"
+	},
+	{
+		code: "IM",
+		label: "Isle of Man",
+		phone: "+44"
+	},
+	{
+		code: "IN",
+		label: "India",
+		phone: "+91"
+	},
+	{
+		code: "IO",
+		label: "British Indian Ocean Territory",
+		phone: "+246"
+	},
+	{
+		code: "IQ",
+		label: "Iraq",
+		phone: "+964"
+	},
+	{
+		code: "IR",
+		label: "Iran, Islamic Republic of",
+		phone: "+98"
+	},
+	{
+		code: "IS",
+		label: "Iceland",
+		phone: "+354"
+	},
+	{
+		code: "IT",
+		label: "Italy",
+		phone: "+39"
+	},
+	{
+		code: "JE",
+		label: "Jersey",
+		phone: "+44"
+	},
+	{
+		code: "JM",
+		label: "Jamaica",
+		phone: "+1-876"
+	},
+	{
+		code: "JO",
+		label: "Jordan",
+		phone: "+962"
+	},
+	{
+		code: "JP",
+		label: "Japan",
+		phone: "+81",
+		suggested: true
+	},
+	{
+		code: "KE",
+		label: "Kenya",
+		phone: "+254"
+	},
+	{
+		code: "KG",
+		label: "Kyrgyzstan",
+		phone: "+996"
+	},
+	{
+		code: "KH",
+		label: "Cambodia",
+		phone: "+855"
+	},
+	{
+		code: "KI",
+		label: "Kiribati",
+		phone: "+686"
+	},
+	{
+		code: "KM",
+		label: "Comoros",
+		phone: "+269"
+	},
+	{
+		code: "KN",
+		label: "Saint Kitts and Nevis",
+		phone: "+1-869"
+	},
+	{
+		code: "KP",
+		label: "Korea, Democratic People's Republic of",
+		phone: "+850"
+	},
+	{
+		code: "KR",
+		label: "Korea, Republic of",
+		phone: "+82"
+	},
+	{
+		code: "KW",
+		label: "Kuwait",
+		phone: "+965"
+	},
+	{
+		code: "KY",
+		label: "Cayman Islands",
+		phone: "+1-345"
+	},
+	{
+		code: "KZ",
+		label: "Kazakhstan",
+		phone: "+7"
+	},
+	{
+		code: "LA",
+		label: "Lao People's Democratic Republic",
+		phone: "+856"
+	},
+	{
+		code: "LB",
+		label: "Lebanon",
+		phone: "+961"
+	},
+	{
+		code: "LC",
+		label: "Saint Lucia",
+		phone: "+1-758"
+	},
+	{
+		code: "LI",
+		label: "Liechtenstein",
+		phone: "+423"
+	},
+	{
+		code: "LK",
+		label: "Sri Lanka",
+		phone: "+94"
+	},
+	{
+		code: "LR",
+		label: "Liberia",
+		phone: "+231"
+	},
+	{
+		code: "LS",
+		label: "Lesotho",
+		phone: "+266"
+	},
+	{
+		code: "LT",
+		label: "Lithuania",
+		phone: "+370"
+	},
+	{
+		code: "LU",
+		label: "Luxembourg",
+		phone: "+352"
+	},
+	{
+		code: "LV",
+		label: "Latvia",
+		phone: "+371"
+	},
+	{
+		code: "LY",
+		label: "Libya",
+		phone: "+218"
+	},
+	{
+		code: "MA",
+		label: "Morocco",
+		phone: "+212"
+	},
+	{
+		code: "MC",
+		label: "Monaco",
+		phone: "+377"
+	},
+	{
+		code: "MD",
+		label: "Moldova, Republic of",
+		phone: "+373"
+	},
+	{
+		code: "ME",
+		label: "Montenegro",
+		phone: "+382"
+	},
+	{
+		code: "MF",
+		label: "Saint Martin (French part)",
+		phone: "+590"
+	},
+	{
+		code: "MG",
+		label: "Madagascar",
+		phone: "+261"
+	},
+	{
+		code: "MH",
+		label: "Marshall Islands",
+		phone: "+692"
+	},
+	{
+		code: "MK",
+		label: "Macedonia, the Former Yugoslav Republic of",
+		phone: "+389"
+	},
+	{
+		code: "ML",
+		label: "Mali",
+		phone: "+223"
+	},
+	{
+		code: "MM",
+		label: "Myanmar",
+		phone: "+95"
+	},
+	{
+		code: "MN",
+		label: "Mongolia",
+		phone: "+976"
+	},
+	{
+		code: "MO",
+		label: "Macao",
+		phone: "+853"
+	},
+	{
+		code: "MP",
+		label: "Northern Mariana Islands",
+		phone: "+1-670"
+	},
+	{
+		code: "MQ",
+		label: "Martinique",
+		phone: "+596"
+	},
+	{
+		code: "MR",
+		label: "Mauritania",
+		phone: "+222"
+	},
+	{
+		code: "MS",
+		label: "Montserrat",
+		phone: "+1-664"
+	},
+	{
+		code: "MT",
+		label: "Malta",
+		phone: "+356"
+	},
+	{
+		code: "MU",
+		label: "Mauritius",
+		phone: "+230"
+	},
+	{
+		code: "MV",
+		label: "Maldives",
+		phone: "+960"
+	},
+	{
+		code: "MW",
+		label: "Malawi",
+		phone: "+265"
+	},
+	{
+		code: "MX",
+		label: "Mexico",
+		phone: "+52"
+	},
+	{
+		code: "MY",
+		label: "Malaysia",
+		phone: "+60"
+	},
+	{
+		code: "MZ",
+		label: "Mozambique",
+		phone: "+258"
+	},
+	{
+		code: "NA",
+		label: "Namibia",
+		phone: "+264"
+	},
+	{
+		code: "NC",
+		label: "New Caledonia",
+		phone: "+687"
+	},
+	{
+		code: "NE",
+		label: "Niger",
+		phone: "+227"
+	},
+	{
+		code: "NF",
+		label: "Norfolk Island",
+		phone: "+672"
+	},
+	{
+		code: "NG",
+		label: "Nigeria",
+		phone: "+234"
+	},
+	{
+		code: "NI",
+		label: "Nicaragua",
+		phone: "+505"
+	},
+	{
+		code: "NL",
+		label: "Netherlands",
+		phone: "+31"
+	},
+	{
+		code: "NO",
+		label: "Norway",
+		phone: "+47"
+	},
+	{
+		code: "NP",
+		label: "Nepal",
+		phone: "+977"
+	},
+	{
+		code: "NR",
+		label: "Nauru",
+		phone: "+674"
+	},
+	{
+		code: "NU",
+		label: "Niue",
+		phone: "+683"
+	},
+	{
+		code: "NZ",
+		label: "New Zealand",
+		phone: "+64"
+	},
+	{
+		code: "OM",
+		label: "Oman",
+		phone: "+968"
+	},
+	{
+		code: "PA",
+		label: "Panama",
+		phone: "+507"
+	},
+	{
+		code: "PE",
+		label: "Peru",
+		phone: "+51"
+	},
+	{
+		code: "PF",
+		label: "French Polynesia",
+		phone: "+689"
+	},
+	{
+		code: "PG",
+		label: "Papua New Guinea",
+		phone: "+675"
+	},
+	{
+		code: "PH",
+		label: "Philippines",
+		phone: "+63"
+	},
+	{
+		code: "PK",
+		label: "Pakistan",
+		phone: "+92"
+	},
+	{
+		code: "PL",
+		label: "Poland",
+		phone: "+48"
+	},
+	{
+		code: "PM",
+		label: "Saint Pierre and Miquelon",
+		phone: "+508"
+	},
+	{
+		code: "PN",
+		label: "Pitcairn",
+		phone: "+870"
+	},
+	{
+		code: "PR",
+		label: "Puerto Rico",
+		phone: "+1"
+	},
+	{
+		code: "PS",
+		label: "Palestine, State of",
+		phone: "+970"
+	},
+	{
+		code: "PT",
+		label: "Portugal",
+		phone: "+351"
+	},
+	{
+		code: "PW",
+		label: "Palau",
+		phone: "+680"
+	},
+	{
+		code: "PY",
+		label: "Paraguay",
+		phone: "+595"
+	},
+	{
+		code: "QA",
+		label: "Qatar",
+		phone: "+974"
+	},
+	{
+		code: "RE",
+		label: "Reunion",
+		phone: "+262"
+	},
+	{
+		code: "RO",
+		label: "Romania",
+		phone: "+40"
+	},
+	{
+		code: "RS",
+		label: "Serbia",
+		phone: "+381"
+	},
+	{
+		code: "RU",
+		label: "Russian Federation",
+		phone: "+7"
+	},
+	{
+		code: "RW",
+		label: "Rwanda",
+		phone: "+250"
+	},
+	{
+		code: "SA",
+		label: "Saudi Arabia",
+		phone: "+966"
+	},
+	{
+		code: "SB",
+		label: "Solomon Islands",
+		phone: "+677"
+	},
+	{
+		code: "SC",
+		label: "Seychelles",
+		phone: "+248"
+	},
+	{
+		code: "SD",
+		label: "Sudan",
+		phone: "+249"
+	},
+	{
+		code: "SE",
+		label: "Sweden",
+		phone: "+46"
+	},
+	{
+		code: "SG",
+		label: "Singapore",
+		phone: "+65"
+	},
+	{
+		code: "SH",
+		label: "Saint Helena",
+		phone: "+290"
+	},
+	{
+		code: "SI",
+		label: "Slovenia",
+		phone: "+386"
+	},
+	{
+		code: "SJ",
+		label: "Svalbard and Jan Mayen",
+		phone: "+47"
+	},
+	{
+		code: "SK",
+		label: "Slovakia",
+		phone: "+421"
+	},
+	{
+		code: "SL",
+		label: "Sierra Leone",
+		phone: "+232"
+	},
+	{
+		code: "SM",
+		label: "San Marino",
+		phone: "+378"
+	},
+	{
+		code: "SN",
+		label: "Senegal",
+		phone: "+221"
+	},
+	{
+		code: "SO",
+		label: "Somalia",
+		phone: "+252"
+	},
+	{
+		code: "SR",
+		label: "Suriname",
+		phone: "+597"
+	},
+	{
+		code: "SS",
+		label: "South Sudan",
+		phone: "+211"
+	},
+	{
+		code: "ST",
+		label: "Sao Tome and Principe",
+		phone: "+239"
+	},
+	{
+		code: "SV",
+		label: "El Salvador",
+		phone: "+503"
+	},
+	{
+		code: "SX",
+		label: "Sint Maarten (Dutch part)",
+		phone: "+1-721"
+	},
+	{
+		code: "SY",
+		label: "Syrian Arab Republic",
+		phone: "+963"
+	},
+	{
+		code: "SZ",
+		label: "Swaziland",
+		phone: "+268"
+	},
+	{
+		code: "TC",
+		label: "Turks and Caicos Islands",
+		phone: "+1-649"
+	},
+	{
+		code: "TD",
+		label: "Chad",
+		phone: "+235"
+	},
+	{
+		code: "TF",
+		label: "French Southern Territories",
+		phone: "+262"
+	},
+	{
+		code: "TG",
+		label: "Togo",
+		phone: "+228"
+	},
+	{
+		code: "TH",
+		label: "Thailand",
+		phone: "+66"
+	},
+	{
+		code: "TJ",
+		label: "Tajikistan",
+		phone: "+992"
+	},
+	{
+		code: "TK",
+		label: "Tokelau",
+		phone: "+690"
+	},
+	{
+		code: "TL",
+		label: "Timor-Leste",
+		phone: "+670"
+	},
+	{
+		code: "TM",
+		label: "Turkmenistan",
+		phone: "+993"
+	},
+	{
+		code: "TN",
+		label: "Tunisia",
+		phone: "+216"
+	},
+	{
+		code: "TO",
+		label: "Tonga",
+		phone: "+676"
+	},
+	{
+		code: "TR",
+		label: "Turkey",
+		phone: "+90"
+	},
+	{
+		code: "TT",
+		label: "Trinidad and Tobago",
+		phone: "+1-868"
+	},
+	{
+		code: "TV",
+		label: "Tuvalu",
+		phone: "+688"
+	},
+	{
+		code: "TW",
+		label: "Taiwan, Province of China",
+		phone: "+886"
+	},
+	{
+		code: "TZ",
+		label: "United Republic of Tanzania",
+		phone: "+255"
+	},
+	{
+		code: "UA",
+		label: "Ukraine",
+		phone: "+380"
+	},
+	{
+		code: "UG",
+		label: "Uganda",
+		phone: "+256"
+	},
+	{
+		code: "US",
+		label: "United States",
+		phone: "+1",
+		suggested: true
+	},
+	{
+		code: "UY",
+		label: "Uruguay",
+		phone: "+598"
+	},
+	{
+		code: "UZ",
+		label: "Uzbekistan",
+		phone: "+998"
+	},
+	{
+		code: "VA",
+		label: "Holy See (Vatican City State)",
+		phone: "+379"
+	},
+	{
+		code: "VC",
+		label: "Saint Vincent and the Grenadines",
+		phone: "+1-784"
+	},
+	{
+		code: "VE",
+		label: "Venezuela",
+		phone: "+58"
+	},
+	{
+		code: "VG",
+		label: "British Virgin Islands",
+		phone: "+1-284"
+	},
+	{
+		code: "VI",
+		label: "US Virgin Islands",
+		phone: "+1-340"
+	},
+	{
+		code: "VN",
+		label: "Vietnam",
+		phone: "+84"
+	},
+	{
+		code: "VU",
+		label: "Vanuatu",
+		phone: "+678"
+	},
+	{
+		code: "WF",
+		label: "Wallis and Futuna",
+		phone: "+681"
+	},
+	{
+		code: "WS",
+		label: "Samoa",
+		phone: "+685"
+	},
+	{
+		code: "XK",
+		label: "Kosovo",
+		phone: "+383"
+	},
+	{
+		code: "YE",
+		label: "Yemen",
+		phone: "+967"
+	},
+	{
+		code: "YT",
+		label: "Mayotte",
+		phone: "+262"
+	},
+	{
+		code: "ZA",
+		label: "South Africa",
+		phone: "+27"
+	},
+	{
+		code: "ZM",
+		label: "Zambia",
+		phone: "+260"
+	},
+	{
+		code: "ZW",
+		label: "Zimbabwe",
+		phone: "+263"
+	}
+];
+
+var PhoneInput = function PhoneInput(_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    country = _ref.country,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
+    _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color;
+  var theme = useTheme();
+  var defaultValue = country ? countries.findIndex(function (cn) {
+    return cn.code == country;
+  }) : 103;
+  var _useState = React.useState(countries[defaultValue]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCountry = _useState2[0],
+    setSelectedCountry = _useState2[1];
+  var _useState3 = React.useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phoneNumber = _useState4[0],
+    setPhoneNumber = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFocused = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dropdownOpen = _useState8[0],
+    setDropdownOpen = _useState8[1];
+  var _useState9 = React.useState(''),
+    _useState0 = _slicedToArray(_useState9, 2),
+    searchTerm = _useState0[0],
+    setSearchTerm = _useState0[1];
+  var dropdownRef = React.useRef(null);
+  var _useMemo = React.useMemo(function () {
+      return styles.getColors(theme.palette, _color);
+    }, [theme.palette]),
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var handleSelectCountry = function handleSelectCountry(country) {
+    setSelectedCountry(country);
+    setDropdownOpen(false);
+    setSearchTerm('');
+    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
+  };
+  var handlePhoneChange = function handlePhoneChange(e) {
+    var value = e.target.value.replace(/[^\d]/g, '');
+    setPhoneNumber(value);
+    if (onChange) onChange("".concat(selectedCountry.code).concat(value));
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setDropdownOpen(false);
+      setSearchTerm('');
+    }
+  };
+  React.useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var filteredCountries = countries.filter(function (c) {
+    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setDropdownOpen(!dropdownOpen);
+    },
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 5
+    },
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, /*#__PURE__*/React.createElement("img", {
+    loading: "lazy",
+    width: "23",
+    height: "23",
+    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
+    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
+    alt: "Flag of ".concat(selectedCountry.label),
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
+    type: "tel",
+    placeholder: placeholder,
+    value: phoneNumber,
+    onChange: handlePhoneChange,
+    onFocus: function onFocus() {
+      return setIsFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Search country...",
+    value: searchTerm,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
+  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: c.code,
+      onClick: function onClick() {
+        return handleSelectCountry(c);
+      },
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5
+      },
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      width: "23",
+      height: "23",
+      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
+      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
+      alt: "Flag of ".concat(c.label),
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'grey'
+      },
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, c.label)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "785147617",
+    dynamic: [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
+  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;max-width:400px;}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ".concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:100%;background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
+};
+
+exports.default = PhoneInput;