react-simple-phone-input 1.0.9-beta → 1.0.10-beta

package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./PhoneInput.css";
 interface Props {
     placeholder: string;
     country: string;

package/dist/esm/index.js

@@ -2800,6 +2800,36 @@ function requireReact_development () {
 
 var React = /*@__PURE__*/getDefaultExportFromCjs(react.exports);
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".simple-phone-input-sri198-container {\r\n    position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-main {\r\n    display: flex;\r\n    border: 1px solid rgba(0, 0, 0, 0.295);\r\n    user-select: none;\r\n    border-radius: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container {\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    background: rgba(0, 0, 0, 0.144);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container img {\r\n    margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown {\r\n    background: white;\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    height: 250px;\r\n    overflow-y: auto;\r\n    box-shadow: 0 0 20px rgb(180, 180, 180);\r\n    display: none;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button {\r\n    display: flex;\r\n    flex: 1;\r\n    width: 92px;\r\n    padding: 5px 2px 5px 7px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button.dial {\r\n    width: unset;\r\n    padding: 8px 3px 8px 8px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown.active {\r\n    display: block;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li {\r\n    margin: 3px 0;\r\n    padding: 3px 8px;\r\n    display: flex;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li.active {\r\n    background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li img {\r\n    margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-text {\r\n    font-size: 15px;\r\n    flex: 1;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-country-code {\r\n    opacity: 0.6;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon svg {\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon.active svg {\r\n    transform: rotate(-180deg)\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li:hover {\r\n    background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-selected-code {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-input {\r\n    width: 100%;\r\n    border: none;\r\n    padding: 0 10px;\r\n}\r\n\r\n.simple-phone-input-sri198-input:focus {\r\n    outline: none;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container {\r\n    padding: 5px;\r\n    position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input {\r\n    border: 1px solid rgba(0, 0, 0, 0.116);\r\n    padding: 8px 10px;\r\n    width: 100%;\r\n    font-size: 15px;\r\n    border-radius: 2px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon {\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    display: flex;\r\n    pointer-events: none;\r\n}\r\n\r\n.simple-phone-input-sri198-not-found {\r\n    text-align: center;\r\n    margin-top: 10px;\r\n    font-size: 15px;\r\n    color: red;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon svg {\r\n    font-size: 20px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input:focus {\r\n    outline: none;\r\n}";
+styleInject(css_248z);
+
 const countryData = [
     {
         country: "Afghanistan",