update broken examples

Author: ugogo

examples/basic/package.json

@@ -14,9 +14,9 @@
     "@types/react-dom": "^16.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-input-verification-code": "^0.4.2",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5",
-    "react-input-verification-code": "latest"
+    "typescript": "^3.7.5"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

examples/basic/src/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactInputVerificationCode from 'react-input-verification-code';
 
-import 'react-input-verification-code/dist/index.css';
 import './index.css';
 
 ReactDOM.render(

examples/basic/yarn.lock

@@ -8527,10 +8527,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-input-verification-code@latest:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.3.0.tgz#341e2467b850af196ffb07e3b031fa050b44155e"
-  integrity sha512-EivKrY4aJvFD+viWD1m4W23ziX0PP/kvqcAh4/dgJzol5UkdLS4lqeyExMAMja3651Ses7xp1b7mLwwVCdGlcQ==
+react-input-verification-code@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.4.2.tgz#29e368b35f2c44517a2a50375a8978f32d26ad4f"
+  integrity sha512-DiKMLUj1BZ4wXsJLR1XQm7b3/1+/0U6IDncp5vHCjamSYJ4TJLY78IJiy48sU9W3m+bgj8dXBZPN8pRIqqqk7g==
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"

examples/custom-styles/package.json

@@ -14,9 +14,9 @@
     "@types/react-dom": "^16.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-input-verification-code": "^0.4.2",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5",
-    "react-input-verification-code": "latest"
+    "typescript": "^3.7.5"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

examples/custom-styles/src/index.css

@@ -32,24 +32,23 @@ p {
   padding: 0 3rem;
 }
 
-.ReactInputVerificationCode__container {
-  --itemWidth: 2.5rem !important;
-  --itemHeight: 3.5rem !important;
+.custom-styles {
+  --ReactInputVerificationCode-itemWidth: 2.5rem;
+  --ReactInputVerificationCode-itemHeight: 3.5rem;
 }
 
-.ReactInputVerificationCode__input,
-.ReactInputVerificationCode__item {
-  --boxShadowSize: 0 !important;
-  border-radius: 0;
-}
-
-.ReactInputVerificationCode__item {
+.custom-styles .ReactInputVerificationCode__item {
   position: relative;
   color: #262626;
   font-weight: 500;
 }
 
-.ReactInputVerificationCode__item:after {
+.custom-styles .ReactInputVerificationCode__item,
+.custom-styles .ReactInputVerificationCode__item.is-active {
+  box-shadow: none;
+}
+
+.custom-styles .ReactInputVerificationCode__item:after {
   content: '';
   display: block;
   position: absolute;
@@ -61,6 +60,6 @@ p {
   transition: background-color 0.2s ease-out;
 }
 
-.ReactInputVerificationCode__item.is-active:after {
+.custom-styles .ReactInputVerificationCode__item.is-active:after {
   background-color: #046cde;
 }

examples/custom-styles/src/index.tsx

@@ -2,18 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactInputVerificationCode from 'react-input-verification-code';
 
-import 'react-input-verification-code/dist/index.css';
 import './index.css';
 
 ReactDOM.render(
-  <main>
-    <h1>Authenticate your account</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
-      gravida ligula nulla, eu molestie dui vehicula non. Sed volutpat mollis
-      sapien sit amet eleifend. Sed vitae molestie lectus
-    </p>
+  <div className='custom-styles'>
     <ReactInputVerificationCode placeholder='' onChange={console.log} />
-  </main>,
+  </div>,
   document.getElementById('root')
 );

examples/custom-styles/yarn.lock

@@ -8527,10 +8527,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-input-verification-code@latest:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.3.0.tgz#341e2467b850af196ffb07e3b031fa050b44155e"
-  integrity sha512-EivKrY4aJvFD+viWD1m4W23ziX0PP/kvqcAh4/dgJzol5UkdLS4lqeyExMAMja3651Ses7xp1b7mLwwVCdGlcQ==
+react-input-verification-code@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.4.2.tgz#29e368b35f2c44517a2a50375a8978f32d26ad4f"
+  integrity sha512-DiKMLUj1BZ4wXsJLR1XQm7b3/1+/0U6IDncp5vHCjamSYJ4TJLY78IJiy48sU9W3m+bgj8dXBZPN8pRIqqqk7g==
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"