chore: update dependencies to latest versions

package.json

@@ -43,15 +43,15 @@
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
     "@mdx-js/react": "1.6.22",
-    "@types/enzyme": "3.10.8",
+    "@types/enzyme": "3.10.9",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/jest": "26.0.23",
-    "@types/react": "17.0.13",
-    "@types/react-dom": "17.0.8",
+    "@types/jest": "26.0.24",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
     "@types/styled-components": "5.1.11",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
-    "babel-plugin-styled-components": "1.13.1",
+    "@typescript-eslint/eslint-plugin": "4.28.3",
+    "@typescript-eslint/parser": "4.28.3",
+    "babel-plugin-styled-components": "1.13.2",
     "eslint": "7.30.0",
     "eslint-config-typescript-shareable": "1.2.0",
     "eslint-plugin-cypress": "2.11.3",
@@ -60,7 +60,7 @@
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "26.6.3",
-    "jest-styled-components": "7.0.4",
+    "jest-styled-components": "7.0.5",
     "pepjs": "0.5.3",
     "prettier": "2.3.2",
     "react": "17.0.2",

packages/core/package.json

@@ -13,7 +13,7 @@
     "focus-trap-react": "8.7.0",
     "no-scroll": "2.1.1",
     "practical-react-components-icons": "workspace:*",
-    "react-hooks-shareable": "1.32.0"
+    "react-hooks-shareable": "1.33.0"
   },
   "devDependencies": {
     "@babel/cli": "7.14.5",
@@ -24,14 +24,14 @@
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@types/no-scroll": "2.1.0",
-    "@types/react": "17.0.13",
-    "@types/react-dom": "17.0.8",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
     "@types/react-test-renderer": "17.0.1",
-    "@types/react-transition-group": "4.4.1",
+    "@types/react-transition-group": "4.4.2",
     "@types/styled-components": "5.1.11",
-    "@types/yup": "0.29.12",
+    "@types/yup": "0.29.13",
     "core-js": "3.15.2",
-    "jest-styled-components": "7.0.4",
+    "jest-styled-components": "7.0.5",
     "pepjs": "0.5.3",
     "prop-types": "15.7.2",
     "react": "17.0.2",

packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap

@@ -51,12 +51,6 @@ exports[`Checkbox Checked 1`] = `
   transform: scale(1.77);
 }
 
-.c2:focus-within .c5,
-.c2:focus-within .Checkbox__CSSCheckboxChecked-sc-1pw2164-4,
-.c2:focus-within .Checkbox__CSSCheckboxIndeterminate-sc-1pw2164-5 {
-  border: 2px solid rgb(69,39,160);
-}
-
 .c2:active .c3 {
   background-color: rgba(204,204,204,0.24);
   -webkit-transform: scale(1.88);
@@ -189,27 +183,21 @@ exports[`Checkbox Checked 2`] = `
   pointer-events: none;
 }
 
-.c11:hover .c3 {
+.c10:hover .c3 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1.77);
   -ms-transform: scale(1.77);
   transform: scale(1.77);
 }
 
-.c11:focus-within .c3 {
+.c10:focus-within .c3 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1.77);
   -ms-transform: scale(1.77);
   transform: scale(1.77);
 }
 
-.c11:focus-within .c12,
-.c11:focus-within .c5,
-.c11:focus-within .Checkbox__CSSCheckboxIndeterminate-sc-1pw2164-5 {
-  border: 2px solid rgb(69,39,160);
-}
-
-.c11:active .c3 {
+.c10:active .c3 {
   background-color: rgba(204,204,204,0.24);
   -webkit-transform: scale(1.88);
   -ms-transform: scale(1.88);
@@ -253,25 +241,14 @@ exports[`Checkbox Checked 2`] = `
   transform: scale(1.77);
 }
 
-.c2:focus-within .c12,
-.c2:focus-within .c5,
-.c2:focus-within .Checkbox__CSSCheckboxIndeterminate-sc-1pw2164-5 {
-  border: 2px solid rgb(69,39,160);
-}
-
 .c2:active .c3 {
   background-color: rgba(103,58,183,0.24);
   -webkit-transform: scale(1.88);
   -ms-transform: scale(1.88);
   transform: scale(1.88);
 }
 
-.c2:active .c5,
-.c2:active .Checkbox__CSSCheckboxIndeterminate-sc-1pw2164-5 {
-  background-color: rgb(69,39,160);
-}
-
-.c8 {
+.c7 {
   position: absolute;
   top: 0;
   left: 0;
@@ -284,7 +261,7 @@ exports[`Checkbox Checked 2`] = `
   opacity: 0;
 }
 
-.c6 {
+.c5 {
   width: 18px;
   height: 18px;
   border-radius: 2px;
@@ -305,11 +282,11 @@ exports[`Checkbox Checked 2`] = `
   position: absolute;
 }
 
-.c7 {
+.c6 {
   background-color: rgb(103,58,183);
 }
 
-.c7::after {
+.c6::after {
   content: '';
   width: 5px;
   height: 10px;
@@ -321,7 +298,7 @@ exports[`Checkbox Checked 2`] = `
   margin-bottom: 3px;
 }
 
-.c10 {
+.c9 {
   position: fixed;
   top: 0;
   width: 360px;
@@ -339,7 +316,7 @@ exports[`Checkbox Checked 2`] = `
   z-index: 0;
 }
 
-.c9 {
+.c8 {
   position: absolute;
   z-index: 1;
 }
@@ -362,11 +339,11 @@ exports[`Checkbox Checked 2`] = `
           className="c3 c4"
         />
         <div
-          className="c5 c6 c7"
+          className="c5 c6"
         />
         <input
           checked={true}
-          className="c8"
+          className="c7"
           disabled={false}
           onChange={[Function]}
           onFocus={[Function]}
@@ -379,11 +356,11 @@ exports[`Checkbox Checked 2`] = `
   </div>
   <div>
     <div
-      className="c9"
+      className="c8"
       id="layer-4"
     >
       <div
-        className="c10"
+        className="c9"
       />
     </div>
   </div>
@@ -404,27 +381,21 @@ exports[`Checkbox Checked 3`] = `
   pointer-events: none;
 }
 
-.c11:hover .c3 {
+.c10:hover .c3 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1.77);
   -ms-transform: scale(1.77);
   transform: scale(1.77);
 }
 
-.c11:focus-within .c3 {
+.c10:focus-within .c3 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1.77);
   -ms-transform: scale(1.77);
   transform: scale(1.77);
 }
 
-.c11:focus-within .c12,
-.c11:focus-within .c13,
-.c11:focus-within .c5 {
-  border: 2px solid rgb(69,39,160);
-}
-
-.c11:active .c3 {
+.c10:active .c3 {
   background-color: rgba(204,204,204,0.24);
   -webkit-transform: scale(1.88);
   -ms-transform: scale(1.88);
@@ -468,25 +439,14 @@ exports[`Checkbox Checked 3`] = `
   transform: scale(1.77);
 }
 
-.c2:focus-within .c12,
-.c2:focus-within .c13,
-.c2:focus-within .c5 {
-  border: 2px solid rgb(69,39,160);
-}
-
 .c2:active .c3 {
   background-color: rgba(103,58,183,0.24);
   -webkit-transform: scale(1.88);
   -ms-transform: scale(1.88);
   transform: scale(1.88);
 }
 
-.c2:active .c13,
-.c2:active .c5 {
-  background-color: rgb(69,39,160);
-}
-
-.c8 {
+.c7 {
   position: absolute;
   top: 0;
   left: 0;
@@ -499,7 +459,7 @@ exports[`Checkbox Checked 3`] = `
   opacity: 0;
 }
 
-.c6 {
+.c5 {
   width: 18px;
   height: 18px;
   border-radius: 2px;
@@ -520,19 +480,19 @@ exports[`Checkbox Checked 3`] = `
   position: absolute;
 }
 
-.c7 {
+.c6 {
   background-color: rgb(103,58,183);
 }
 
-.c7::after {
+.c6::after {
   content: '';
   width: 10px;
   height: 2px;
   background-color: #fff;
   border-radius: 2px;
 }
 
-.c10 {
+.c9 {
   position: fixed;
   top: 0;
   width: 360px;
@@ -550,7 +510,7 @@ exports[`Checkbox Checked 3`] = `
   z-index: 0;
 }
 
-.c9 {
+.c8 {
   position: absolute;
   z-index: 1;
 }
@@ -573,11 +533,11 @@ exports[`Checkbox Checked 3`] = `
           className="c3 c4"
         />
         <div
-          className="c5 c6 c7"
+          className="c5 c6"
         />
         <input
           checked={true}
-          className="c8"
+          className="c7"
           disabled={false}
           onChange={[Function]}
           onFocus={[Function]}
@@ -590,11 +550,11 @@ exports[`Checkbox Checked 3`] = `
   </div>
   <div>
     <div
-      className="c9"
+      className="c8"
       id="layer-6"
     >
       <div
-        className="c10"
+        className="c9"
       />
     </div>
   </div>