feat: update default styles

Author: ugogo

src/index.css

@@ -1,27 +1,22 @@
-:root {
-  --ReactInputVerificationCode-itemWidth: 4.5rem;
-  --ReactInputVerificationCode-itemHeight: 5rem;
-  --ReactInputVerificationCode-itemSpacing: 1rem;
-}
-
-.ReactInputVerificationCode__container {
+.ReactInputVerificationCode-container {
   display: flex;
-  gap: var(--ReactInputVerificationCode-itemSpacing);
+  gap: 0.5rem;
 }
 
-.ReactInputVerificationCode__item {
-  width: var(--ReactInputVerificationCode-itemWidth);
-  height: var(--ReactInputVerificationCode-itemHeight);
+.ReactInputVerificationCode-item {
+  width: 4rem;
+  height: 4rem;
   padding: 0;
   border-radius: 4px;
-  font-size: 1.5rem;
-  font-weight: 400;
+  font-size: 1.2rem;
   text-align: center;
   border: 0;
-  box-shadow: inset 0 0 0 1px #ccc;
+  color: #555;
+  box-shadow: 0 0 0 1px #ccc;
+  outline: 0;
   transition: box-shadow 0.2s ease-out;
 }
 
-.ReactInputVerificationCode__item:focus {
-  box-shadow: inset 0 0 0 2px #888;
+.ReactInputVerificationCode-item:focus {
+  box-shadow: 0 0 0 2px #333;
 }

src/index.tsx

@@ -212,7 +212,7 @@ const ReactInputVerificationCode = ({
   }, [inputsRefs]);
 
   return (
-    <div className='ReactInputVerificationCode__container'>
+    <div className='ReactInputVerificationCode-container'>
       {/* <S.Input
           autoComplete='one-time-code'
           type='text'
@@ -224,7 +224,7 @@ const ReactInputVerificationCode = ({
         <input
           key={i}
           ref={ref}
-          className='ReactInputVerificationCode__item'
+          className='ReactInputVerificationCode-item'
           data-cy={`${dataCy}-${i}-item`}
           value={values[i]}
           onChange={(event) => onInputChange(event, i)}