From 68b6085dd77ddbe2b9a5d5812e03b8a60565df0c Mon Sep 17 00:00:00 2001
From: helsonxiao <helsonxiao@gmail.com>
Date: Fri, 29 Oct 2021 12:11:46 +0800
Subject: [PATCH] feat: pure react usage

---
 dumi/docs/demos/lite-version.md               |   6 +
 example/craco.config.js                       |   9 +
 example/package.json                          |  25 +-
 example/src/App.tsx                           |   4 +
 example/src/demos/antd-form.tsx               |  22 +-
 example/src/demos/basic-usage.tsx             |   2 +-
 example/src/demos/lite-version.tsx            |  31 ++
 example/tsconfig.json                         |   4 +-
 example/yarn.lock                             | 284 +++++++++++++++++-
 package.json                                  |  14 +-
 src/area-select.lite.tsx                      |  48 +++
 src/{area-select.antd.tsx => area-select.tsx} |  19 +-
 src/index.ts                                  |   8 +
 src/index.tsx                                 |   6 -
 src/lite.ts                                   |   8 +
 src/{styles.less => phone-input.less}         |   7 +-
 src/phone-input.lite.tsx                      |  58 ++++
 src/phone-input.tsx                           |  63 ++++
 src/{phone-input.antd.tsx => shared.tsx}      |  93 ++----
 src/typings.ts                                |   5 +
 yarn.lock                                     |  22 ++
 21 files changed, 615 insertions(+), 123 deletions(-)
 create mode 100644 dumi/docs/demos/lite-version.md
 create mode 100644 example/craco.config.js
 create mode 100644 example/src/demos/lite-version.tsx
 create mode 100644 src/area-select.lite.tsx
 rename src/{area-select.antd.tsx => area-select.tsx} (68%)
 create mode 100644 src/index.ts
 delete mode 100644 src/index.tsx
 create mode 100644 src/lite.ts
 rename src/{styles.less => phone-input.less} (56%)
 create mode 100644 src/phone-input.lite.tsx
 create mode 100644 src/phone-input.tsx
 rename src/{phone-input.antd.tsx => shared.tsx} (53%)
 create mode 100644 src/typings.ts

diff --git a/dumi/docs/demos/lite-version.md b/dumi/docs/demos/lite-version.md
new file mode 100644
index 0000000..df109bd
--- /dev/null
+++ b/dumi/docs/demos/lite-version.md
@@ -0,0 +1,6 @@
+---
+title: Lite Version(without antd)
+order: 6
+---
+
+<code defaultShowCode src="../../../example/src/demos/lite-version.tsx"></code>
diff --git a/example/craco.config.js b/example/craco.config.js
new file mode 100644
index 0000000..9a94ce8
--- /dev/null
+++ b/example/craco.config.js
@@ -0,0 +1,9 @@
+const CracoLessPlugin = require('craco-less');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+    },
+  ],
+};
diff --git a/example/package.json b/example/package.json
index 5f3c0ad..284bdd3 100644
--- a/example/package.json
+++ b/example/package.json
@@ -4,12 +4,20 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
   },
   "dependencies": {
+    "antd-country-phone-input": "link:..",
+    "flagpack": "^1.0.5",
+    "rc-select": "^12.1.13",
+    "react": "link:../node_modules/react",
+    "react-dom": "link:../node_modules/react-dom",
+    "world_countries_lists": "^2.1.0"
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.4.0",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
     "@testing-library/react": "link:../node_modules/@testing-library/react",
     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
@@ -17,15 +25,10 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "antd-country-phone-input": "link:..",
-    "flagpack": "^1.0.5",
-    "react": "link:../node_modules/react",
-    "react-dom": "link:../node_modules/react-dom",
+    "craco-less": "^1.20.0",
     "react-scripts": "~4.0.1",
-    "typescript": "link:../node_modules/typescript",
-    "world_countries_lists": "^2.1.0"
+    "typescript": "link:../node_modules/typescript"
   },
-  "devDependencies": {},
   "browserslist": {
     "production": [
       ">0.2%",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 58d075c..0eef161 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,6 +1,7 @@
 import { Card } from 'antd';
 
 import BasicUsage from './demos/basic-usage';
+import LiteVersion from './demos/lite-version';
 import InlineStyle from './demos/inline-style';
 import CustomArea from './demos/custom-area';
 import CustomFlag from './demos/custom-flag';
@@ -26,6 +27,9 @@ const App = () => {
       <Card type="inner" title="Custom Flag" style={cardStyle}>
         <CustomFlag />
       </Card>
+      <Card type="inner" title="Lite Version(without antd)" style={cardStyle}>
+        <LiteVersion />
+      </Card>
     </>
   );
 };
diff --git a/example/src/demos/antd-form.tsx b/example/src/demos/antd-form.tsx
index eb1e0f1..97fab25 100644
--- a/example/src/demos/antd-form.tsx
+++ b/example/src/demos/antd-form.tsx
@@ -15,24 +15,20 @@ const App = () => {
 
   return (
     <ConfigProvider locale={en}>
-      <Form
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        initialValues={{
-          lowerCase: {
+      <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
+        <Form.Item
+          name="lowerCase"
+          initialValue={{
             short: 'us',
-          },
-          undefined: undefined,
-        }}
-      >
-        <Form.Item name="lowerCase">
+          }}
+        >
           <CountryPhoneInput />
         </Form.Item>
-        <Form.Item name="undefined">
-          <CountryPhoneInput />
+        <Form.Item name="undefined" initialValue={undefined}>
+          <CountryPhoneInput placeholder="initialValue is undefined" />
         </Form.Item>
         <Form.Item name="ignored">
-          <CountryPhoneInput />
+          <CountryPhoneInput placeholder="initialValue is ignored" />
         </Form.Item>
         <Button type="primary" htmlType="submit">
           Submit
diff --git a/example/src/demos/basic-usage.tsx b/example/src/demos/basic-usage.tsx
index 5bff44f..eed9295 100644
--- a/example/src/demos/basic-usage.tsx
+++ b/example/src/demos/basic-usage.tsx
@@ -18,7 +18,7 @@ const App = () => {
         onChange={(v) => {
           setValue(v);
         }}
-        className="my-custom-class"
+        className="your-custom-class"
       />
     </ConfigProvider>
   );
diff --git a/example/src/demos/lite-version.tsx b/example/src/demos/lite-version.tsx
new file mode 100644
index 0000000..15af448
--- /dev/null
+++ b/example/src/demos/lite-version.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import {
+  ConfigProvider,
+  CountryPhoneInputValue,
+  CountryPhoneInput,
+} from 'antd-country-phone-input/dist/lite';
+import en from 'world_countries_lists/data/en/world.json';
+// If you're writing styles with less, this could be a starter for you.
+import 'rc-select/assets/index.less';
+
+const App = () => {
+  const [value, setValue] = useState<CountryPhoneInputValue>({ short: 'US' });
+
+  return (
+    <ConfigProvider locale={en}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <CountryPhoneInput
+          style={{ height: 24 }}
+          selectProps={{ style: { height: 24 } }}
+          value={value}
+          onChange={(v) => {
+            setValue(v);
+          }}
+        />
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default App;
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 9ea1d03..a10dc1d 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -23,8 +23,8 @@
     "strictNullChecks": true,
     // Linter Checks
     "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     // Advanced
     "skipLibCheck": true,
diff --git a/example/yarn.lock b/example/yarn.lock
index 1f9a0d0..bef8661 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1111,6 +1111,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee"
@@ -1171,6 +1178,18 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@craco/craco@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.4.0.tgz#449ca141c4af5751999e8c91764c0e1d3576b420"
+  integrity sha512-puLp+pSL5B2tpoIPUYlWjKd0VDBPNF16BJIKEKrwg0x/9XC/4h8XPcVGNr6pd27pj8sahiH5QUdoBxB5AE9++g==
+  dependencies:
+    "@endemolshinegroup/cosmiconfig-typescript-loader" "^3.0.2"
+    cosmiconfig "^7.0.1"
+    cross-spawn "^7.0.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    webpack-merge "^4.2.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -1181,6 +1200,16 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@endemolshinegroup/cosmiconfig-typescript-loader@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
+  integrity sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==
+  dependencies:
+    lodash.get "^4"
+    make-error "^1"
+    ts-node "^9"
+    tslib "^2"
+
 "@eslint/eslintrc@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
@@ -2327,6 +2356,11 @@ aproba@^1.1.1:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -3289,6 +3323,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3524,6 +3563,13 @@ cookie@0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
+copy-anything@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
+  integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
+  dependencies:
+    is-what "^3.12.0"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -3601,6 +3647,25 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+craco-less@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/craco-less/-/craco-less-1.20.0.tgz#7f68679b84c7756f785f9c5ee4e4f795662acad1"
+  integrity sha512-oP7kMRFOwwCPAlS+RBfA0yt9qAfSH8EOzJOQyzspVOECDtATTLXYyEYd0ghoybbReVRZbOmGxNtPWh4ALpVRng==
+  dependencies:
+    less "^4.1.1"
+    less-loader "^7.3.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -3632,6 +3697,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -4092,6 +4162,11 @@ diff-sequences@^26.6.2:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
   integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -4155,6 +4230,11 @@ dom-accessibility-api@^0.5.6:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
   integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
 
+dom-align@^1.7.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.2.tgz#0f8164ebd0c9c21b0c790310493cd855892acd4b"
+  integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -4356,7 +4436,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -5655,7 +5735,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5696,6 +5776,11 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+
 immer@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
@@ -6153,6 +6238,11 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-what@^3.12.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -6880,6 +6970,32 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
+less-loader@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-7.3.0.tgz#f9d6d36d18739d642067a05fb5bd70c8c61317e5"
+  integrity sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+less@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.1.2.tgz#6099ee584999750c2624b65f80145f8674e4b4b0"
+  integrity sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^2.5.2"
+    source-map "~0.6.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -6981,6 +7097,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.get@^4:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7011,7 +7132,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7061,7 +7182,7 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -7076,6 +7197,11 @@ make-dir@^3.0.0, make-dir@^3.0.2:
   dependencies:
     semver "^6.0.0"
 
+make-error@^1, make-error@^1.1.1:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -7207,7 +7333,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19,
   dependencies:
     mime-db "1.46.0"
 
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -7415,6 +7541,15 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.9.1.tgz#22d1dffbe3490c2b83e301f7709b6736cd8f2684"
+  integrity sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -7913,6 +8048,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse5@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -9005,6 +9145,89 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+rc-align@^4.0.0:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.11.tgz#8198c62db266bc1b8ef05e56c13275bf72628a5e"
+  integrity sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    dom-align "^1.7.0"
+    lodash "^4.17.21"
+    rc-util "^5.3.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-motion@^2.0.0, rc-motion@^2.0.1:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.4.4.tgz#e995d5fa24fc93065c24f714857cf2677d655bb0"
+  integrity sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.2.1"
+
+rc-overflow@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.2.2.tgz#95b0222016c0cdbdc0db85f569c262e7706a5f22"
+  integrity sha512-X5kj9LDU1ue5wHkqvCprJWLKC+ZLs3p4He/oxjZ1Q4NKaqKBaYf5OdSzRSgh3WH8kSdrfU8LjvlbWnHgJOEkNQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.5.1"
+
+rc-resize-observer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.0.1.tgz#ccd0986543ff1bf49f8a581e8ac4bb714ed24dcd"
+  integrity sha512-OxO2mJI9e8610CAWBFfm52SPvWib0eNKjaSsRbbKHmLaJIxw944P+D61DlLJ/w2vuOjGNcalJu8VdqyNm/XCRg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-util "^5.0.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-select@^12.1.13:
+  version "12.1.13"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-12.1.13.tgz#c33560ccb9339d30695b52458f55efc35af35273"
+  integrity sha512-cPI+aesP6dgCAaey4t4upDbEukJe+XN0DK6oO/6flcCX5o28o7KNZD7JAiVtC/6fCwqwI/kSs7S/43dvHmBl+A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.0.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.9.8"
+    rc-virtual-list "^3.2.0"
+
+rc-trigger@^5.0.4:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.2.10.tgz#8a0057a940b1b9027eaa33beec8a6ecd85cce2b1"
+  integrity sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-align "^4.0.0"
+    rc-motion "^2.0.0"
+    rc-util "^5.5.0"
+
+rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0, rc-util@^5.5.1, rc-util@^5.9.8:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.14.0.tgz#52c650e27570c2c47f7936c7d32eaec5212492a8"
+  integrity sha512-2vy6/Z1BJUcwLjm/UEJb/htjUTQPigITUIemCcFEo1fQevAumc9sA32x2z5qyWoa9uhrXbiAjSDpPIUqyg65sA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
+rc-virtual-list@^3.2.0:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz#1078327aa7230b5e456d679ed2ce99f3c036ebd1"
+  integrity sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==
+  dependencies:
+    classnames "^2.2.6"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.0.7"
+
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -9056,7 +9279,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9402,6 +9625,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9635,7 +9863,7 @@ sass-loader@^10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -9815,6 +10043,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -9971,6 +10204,14 @@ source-map-resolve@^0.6.0:
     atob "^2.1.2"
     decode-uri-component "^0.2.0"
 
+source-map-support@^0.5.17:
+  version "0.5.20"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
+  integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -10607,6 +10848,18 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-node@^9:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-9.1.1.tgz#51a9a450a3e959401bda5f004a72d54b936d376d"
+  integrity sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==
+  dependencies:
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
 ts-pnp@1.2.0, ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -10627,6 +10880,11 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2, tslib@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tslib@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
@@ -11105,6 +11363,13 @@ webpack-manifest-plugin@2.2.0:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -11518,6 +11783,11 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
diff --git a/package.json b/package.json
index be279d7..7fd516b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "antd-country-phone-input",
-  "version": "4.1.1",
+  "version": "4.2.0-rc.0",
   "description": "Country phone input component as standard Ant.Design form item",
   "author": "wangsijie <i@sijie.wang>",
   "homepage": "https://boyuai.github.io/antd-country-phone-input/",
@@ -20,8 +20,10 @@
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.m.js",
-  "exports": "./dist/index.modern.js",
-  "source": "./src/index.tsx",
+  "exports": {
+    ".": "./dist/index.modern.js",
+    "./lite": "./dist/lite.modern.js"
+  },
   "typings": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -30,8 +32,8 @@
     "node": ">=10"
   },
   "scripts": {
-    "build": "microbundle --format modern,es,cjs --jsx React.createElement",
-    "start": "microbundle watch --format modern,es,cjs --jsx React.createElement",
+    "build": "microbundle build src/index.ts src/lite.ts --format modern,es,cjs --jsx React.createElement",
+    "start": "microbundle watch src/index.ts src/lite.ts --format modern,es,cjs --jsx React.createElement",
     "prepack": "yarn build",
     "lint:es": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:style": "stylelint '**/*.{css,less,scss,sass}'",
@@ -59,6 +61,7 @@
   },
   "peerDependencies": {
     "antd": "4.x",
+    "rc-select": "^12.1.13",
     "react": ">= 16.8.0 || 17.x",
     "world_countries_lists": "^2.1.0"
   },
@@ -92,6 +95,7 @@
     "lint-staged": "~10.5.3",
     "microbundle": "~0.13.0",
     "prettier": "~2.2.1",
+    "rc-select": "^12.1.13",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",
     "react-scripts": "~4.0.1",
diff --git a/src/area-select.lite.tsx b/src/area-select.lite.tsx
new file mode 100644
index 0000000..87bba73
--- /dev/null
+++ b/src/area-select.lite.tsx
@@ -0,0 +1,48 @@
+import Select, { SelectProps } from 'rc-select';
+import { OptionProps } from 'rc-select/es/Option';
+import React, { useContext } from 'react';
+import { configContext } from './config';
+import { filterOption, filterSort } from './shared';
+
+export interface AreaSelectProps extends SelectProps<any> {
+  optionProps?: OptionProps;
+}
+
+export const AreaSelect = ({
+  optionProps,
+  ...selectProps
+}: AreaSelectProps) => {
+  const { areas } = useContext(configContext);
+
+  return (
+    <Select
+      showArrow
+      showSearch
+      dropdownMatchSelectWidth={false}
+      optionLabelProp="label"
+      filterOption={filterOption}
+      filterSort={filterSort}
+      {...selectProps}
+    >
+      {areas.map((item) => {
+        const key = `${item.name} ${item.phoneCode}`;
+        const fixedProps = {
+          key,
+          value: item.short,
+          label: (
+            <>
+              {item.emoji} +{item.phoneCode}
+            </>
+          ),
+        };
+        return (
+          <Select.Option {...optionProps} {...fixedProps}>
+            {item.emoji} {key}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export default AreaSelect;
diff --git a/src/area-select.antd.tsx b/src/area-select.tsx
similarity index 68%
rename from src/area-select.antd.tsx
rename to src/area-select.tsx
index 04a6dbd..1257545 100644
--- a/src/area-select.antd.tsx
+++ b/src/area-select.tsx
@@ -2,6 +2,7 @@ import { Select } from 'antd';
 import { OptionProps, SelectProps } from 'antd/es/select';
 import React, { useContext } from 'react';
 import { configContext } from './config';
+import { filterOption, filterSort } from './shared';
 
 export interface AreaSelectProps extends SelectProps<any> {
   optionProps?: OptionProps;
@@ -26,22 +27,8 @@ export const AreaSelect = ({
         bordered={false}
         dropdownMatchSelectWidth={false}
         optionLabelProp="label"
-        filterOption={(input, option) => {
-          const key = (option?.key as string).toLowerCase();
-          const inputChars = Array.from(input.toLowerCase());
-          const keyHasAllChars = inputChars.reduce((prevResult, char) => {
-            if (prevResult === undefined) {
-              return true;
-            }
-            return prevResult && key.includes(char);
-          }, true);
-          return keyHasAllChars;
-        }}
-        filterSort={(a, b) => {
-          const keyA = a.key as string;
-          const keyB = b.key as string;
-          return keyA.length - keyB.length;
-        }}
+        filterOption={filterOption}
+        filterSort={filterSort}
         {...selectProps}
       >
         {areas.map((item) => {
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..bdfd101
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,8 @@
+import { CountryPhoneInput } from './phone-input';
+export default CountryPhoneInput;
+export * from './phone-input';
+export * from './area-select';
+
+export type { CountryPhoneInputValue } from './typings';
+export * from './config';
+export * from './sources';
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index af71860..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CountryPhoneInput } from './phone-input.antd';
-export default CountryPhoneInput;
-export * from './phone-input.antd';
-export * from './area-select.antd';
-export * from './config';
-export * from './sources';
diff --git a/src/lite.ts b/src/lite.ts
new file mode 100644
index 0000000..b4b544f
--- /dev/null
+++ b/src/lite.ts
@@ -0,0 +1,8 @@
+import { CountryPhoneInput } from './phone-input.lite';
+export default CountryPhoneInput;
+export * from './phone-input.lite';
+export * from './area-select.lite';
+
+export type { CountryPhoneInputValue } from './typings';
+export * from './config';
+export * from './sources';
diff --git a/src/styles.less b/src/phone-input.less
similarity index 56%
rename from src/styles.less
rename to src/phone-input.less
index a032da2..3f06cfe 100644
--- a/src/styles.less
+++ b/src/phone-input.less
@@ -4,7 +4,12 @@
   }
   .ant-input-group-addon {
     background-color: inherit;
-    .ant-select-selector {
+    .ant-select-focused {
+      .ant-select-selector {
+        color: inherit;
+      }
+    }
+    .ant-select-selection-item {
       color: inherit;
     }
   }
diff --git a/src/phone-input.lite.tsx b/src/phone-input.lite.tsx
new file mode 100644
index 0000000..c03887f
--- /dev/null
+++ b/src/phone-input.lite.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import AreaSelect, { AreaSelectProps } from './area-select.lite';
+import { CountryPhoneInputValue } from './typings';
+import { usePhoneInput } from './shared';
+
+export interface CountryPhoneInputProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    'defaultValue' | 'value' | 'onChange'
+  > {
+  defaultValue?: CountryPhoneInputValue;
+  value?: CountryPhoneInputValue;
+  onChange?: (value: CountryPhoneInputValue) => void;
+  selectProps?: AreaSelectProps;
+  className?: string;
+}
+
+export const CountryPhoneInput = ({
+  defaultValue,
+  onChange,
+  selectProps = {},
+  className,
+  ...inputProps
+}: CountryPhoneInputProps) => {
+  const isControlled = 'value' in inputProps;
+  const { value } = inputProps;
+  const { area, handleAreaChange, handlePhoneChange } = usePhoneInput({
+    isControlled,
+    defaultValue,
+    value,
+    onChange,
+  });
+
+  const areaSelect = (
+    <AreaSelect
+      {...selectProps}
+      value={area?.short}
+      onChange={handleAreaChange}
+    />
+  );
+
+  return (
+    <>
+      {areaSelect}
+      <input
+        {...inputProps}
+        className={
+          'rc-country-phone-input' + (className ? ` ${className}` : '')
+        }
+        value={isControlled ? value?.phone ?? '' : undefined}
+        onChange={handlePhoneChange}
+      />
+    </>
+  );
+};
diff --git a/src/phone-input.tsx b/src/phone-input.tsx
new file mode 100644
index 0000000..453a533
--- /dev/null
+++ b/src/phone-input.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Input } from 'antd';
+import { GroupProps, InputProps } from 'antd/es/input';
+import AreaSelect, { AreaSelectProps } from './area-select';
+import { CountryPhoneInputValue } from './typings';
+import { usePhoneInput } from './shared';
+
+import './phone-input.less';
+
+export interface CountryPhoneInputProps
+  extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange'> {
+  defaultValue?: CountryPhoneInputValue;
+  value?: CountryPhoneInputValue;
+  onChange?: (value: CountryPhoneInputValue) => void;
+  selectProps?: AreaSelectProps;
+  inputGroupProps?: GroupProps;
+  inline?: boolean;
+  className?: string;
+}
+
+export const CountryPhoneInput = ({
+  defaultValue,
+  onChange,
+  selectProps = {},
+  inputGroupProps,
+  inline,
+  className,
+  ...inputProps
+}: CountryPhoneInputProps) => {
+  const isControlled = 'value' in inputProps;
+  const { value } = inputProps;
+  const { area, handleAreaChange, handlePhoneChange } = usePhoneInput({
+    isControlled,
+    defaultValue,
+    value,
+    onChange,
+  });
+
+  const areaSelect = (
+    <AreaSelect
+      {...selectProps}
+      value={area?.short}
+      onChange={handleAreaChange}
+    />
+  );
+
+  if (inline) {
+    inputProps.addonBefore = areaSelect;
+  } else {
+    inputProps.prefix = areaSelect;
+  }
+
+  return (
+    <Input
+      {...inputProps}
+      className={
+        'antd-country-phone-input' + (className ? ` ${className}` : '')
+      }
+      value={value?.phone}
+      onChange={handlePhoneChange}
+    />
+  );
+};
diff --git a/src/phone-input.antd.tsx b/src/shared.tsx
similarity index 53%
rename from src/phone-input.antd.tsx
rename to src/shared.tsx
index cf39853..1c72fc5 100644
--- a/src/phone-input.antd.tsx
+++ b/src/shared.tsx
@@ -1,41 +1,42 @@
-import React, { useCallback, useState, useEffect, useRef } from 'react';
-import { Input } from 'antd';
-import { GroupProps, InputProps } from 'antd/es/input';
-import AreaSelect, { AreaSelectProps } from './area-select.antd';
+import { SelectProps } from 'rc-select';
+import { useCallback, useEffect, useState } from 'react';
 import compactAreas, { Area } from './sources';
-import './styles.less';
+import { CountryPhoneInputValue } from './typings';
 
-export interface CountryPhoneInputProps
-  extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange'> {
-  onChange?: (value: CountryPhoneInputValue) => void;
-  value?: CountryPhoneInputValue;
-  defaultValue?: CountryPhoneInputValue;
-  selectProps?: AreaSelectProps;
-  inputGroupProps?: GroupProps;
-  inline?: boolean;
-  className?: string;
-}
+export const filterOption: SelectProps['filterOption'] = (input, option) => {
+  const key = (option?.key as string).toLowerCase();
+  const inputChars = Array.from(input.toLowerCase());
+  const keyHasAllChars = inputChars.reduce((prevResult, char) => {
+    if (prevResult === undefined) {
+      return true;
+    }
+    return prevResult && key.includes(char);
+  }, true);
+  return keyHasAllChars;
+};
 
-export type CountryPhoneInputValue = {
-  code?: number;
-  phone?: string;
-  short?: string;
+export const filterSort: SelectProps['filterSort'] = (a, b) => {
+  const keyA = a.key as string;
+  const keyB = b.key as string;
+  return keyA.length - keyB.length;
 };
 
-export const CountryPhoneInput = ({
+export const usePhoneInput = ({
+  isControlled,
   defaultValue,
+  value,
   onChange,
-  selectProps = {},
-  inputGroupProps,
-  inline,
-  className,
-  ...inputProps
-}: CountryPhoneInputProps) => {
+}: {
+  isControlled: boolean;
+  defaultValue?: CountryPhoneInputValue;
+  value?: CountryPhoneInputValue;
+  onChange?: (value: CountryPhoneInputValue) => void;
+}) => {
   if (defaultValue) {
     defaultValue.short = defaultValue.short?.toUpperCase();
   }
-  if (inputProps.value) {
-    inputProps.value.short = inputProps.value.short?.toUpperCase();
+  if (value) {
+    value.short = value.short?.toUpperCase();
   }
 
   const defaultArea: Area | undefined = compactAreas.find((area) => {
@@ -47,16 +48,9 @@ export const CountryPhoneInput = ({
   const [area, setArea] = useState<Area | undefined>(defaultArea);
   const [phone, setPhone] = useState<string | undefined>(defaultValue?.phone);
 
-  const latestInputPropsRef = useRef(inputProps);
-  useEffect(() => {
-    latestInputPropsRef.current = inputProps;
-  }, [inputProps]);
   useEffect(() => {
-    if (!('value' in latestInputPropsRef.current)) {
-      return;
-    }
+    if (!isControlled) return;
 
-    const value = inputProps.value;
     if (value === undefined) {
       setArea(undefined);
       setPhone(undefined);
@@ -68,7 +62,7 @@ export const CountryPhoneInput = ({
       setArea(compactAreas.find((area) => area.phoneCode === value.code));
     }
     setPhone(value.phone);
-  }, [inputProps.value]);
+  }, [value, isControlled]);
 
   const triggerChange = useCallback(
     (phone?: string, area?: Area) => {
@@ -103,28 +97,5 @@ export const CountryPhoneInput = ({
     [setPhone, area, triggerChange]
   );
 
-  const areaSelect = (
-    <AreaSelect
-      {...selectProps}
-      value={area?.short}
-      onChange={handleAreaChange}
-    />
-  );
-
-  if (inline) {
-    inputProps.addonBefore = areaSelect;
-  } else {
-    inputProps.prefix = areaSelect;
-  }
-
-  return (
-    <Input
-      {...inputProps}
-      className={'antd-country-phone-input' + className ? ` ${className}` : ''}
-      value={inputProps.value?.phone}
-      onChange={handlePhoneChange}
-    />
-  );
+  return { area, handleAreaChange, handlePhoneChange };
 };
-
-export default CountryPhoneInput;
diff --git a/src/typings.ts b/src/typings.ts
new file mode 100644
index 0000000..6debc24
--- /dev/null
+++ b/src/typings.ts
@@ -0,0 +1,5 @@
+export type CountryPhoneInputValue = {
+  code?: number;
+  phone?: string;
+  short?: string;
+};
diff --git a/yarn.lock b/yarn.lock
index 3e18ab8..06af052 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11652,6 +11652,19 @@ rc-select@^12.0.0, rc-select@~12.1.0:
     rc-util "^5.0.1"
     rc-virtual-list "^3.2.0"
 
+rc-select@^12.1.13:
+  version "12.1.13"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-12.1.13.tgz#c33560ccb9339d30695b52458f55efc35af35273"
+  integrity sha512-cPI+aesP6dgCAaey4t4upDbEukJe+XN0DK6oO/6flcCX5o28o7KNZD7JAiVtC/6fCwqwI/kSs7S/43dvHmBl+A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.0.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.9.8"
+    rc-virtual-list "^3.2.0"
+
 rc-slider@~9.7.1:
   version "9.7.1"
   resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.7.1.tgz#63535177a74a3ee44f090909e8c6f98426eb9dba"
@@ -11773,6 +11786,15 @@ rc-util@^5.0.0, rc-util@^5.0.1, rc-util@^5.0.5, rc-util@^5.0.6, rc-util@^5.0.7,
     react-is "^16.12.0"
     shallowequal "^1.1.0"
 
+rc-util@^5.9.8:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.14.0.tgz#52c650e27570c2c47f7936c7d32eaec5212492a8"
+  integrity sha512-2vy6/Z1BJUcwLjm/UEJb/htjUTQPigITUIemCcFEo1fQevAumc9sA32x2z5qyWoa9uhrXbiAjSDpPIUqyg65sA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc-virtual-list@^3.0.1, rc-virtual-list@^3.2.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.2.6.tgz#2c92a40f4425e19881b38134d6bd286a11137d2d"