Bump styled-component dependencies (#66611) (#67114)

# Conflicts:
#	packages/kbn-babel-preset/package.json

Author: patrykkopycinski

package.json

@@ -382,7 +382,7 @@
     "@types/semver": "^5.5.0",
     "@types/sinon": "^7.0.13",
     "@types/strip-ansi": "^3.0.0",
-    "@types/styled-components": "^4.4.2",
+    "@types/styled-components": "^5.1.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
     "@types/testing-library__react": "^9.1.2",

packages/kbn-babel-preset/package.json

@@ -14,8 +14,8 @@
     "@babel/preset-typescript": "^7.9.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-filter-imports": "^3.0.0",
-    "babel-plugin-styled-components": "^1.10.6",
-    "babel-plugin-transform-define": "^2.0.0",
+    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-transform-define": "^1.3.1",
     "babel-plugin-transform-imports": "^2.0.0"
   }
 }

packages/kbn-storybook/package.json

@@ -18,14 +18,14 @@
     "fast-glob": "2.2.7",
     "glob-watcher": "5.0.3",
     "jest-specific-snapshot": "2.0.0",
-    "jest-styled-components": "6.3.1",
+    "jest-styled-components": "^7.0.2",
     "mkdirp": "0.5.1",
     "mini-css-extract-plugin": "0.7.0",
     "normalize-path": "3.0.0",
     "react-docgen-typescript-loader": "3.1.0",
     "rxjs": "6.5.2",
     "serve-static": "1.14.1",
-    "styled-components": "^3",
+    "styled-components": "^5.1.0",
     "webpack": "^4.41.5"
   }
 }

x-pack/package.json

@@ -106,7 +106,7 @@
     "@types/redux-actions": "^2.6.1",
     "@types/set-value": "^2.0.0",
     "@types/sinon": "^7.0.13",
-    "@types/styled-components": "^4.4.2",
+    "@types/styled-components": "^5.1.0",
     "@types/supertest": "^2.0.5",
     "@types/tar-fs": "^1.16.1",
     "@types/tinycolor2": "^1.4.1",
@@ -149,7 +149,7 @@
     "hoist-non-react-statics": "^3.3.2",
     "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
-    "jest-styled-components": "^7.0.0",
+    "jest-styled-components": "^7.0.2",
     "jsdom": "^15.2.1",
     "loader-utils": "^1.2.3",
     "madge": "3.4.4",
@@ -351,7 +351,7 @@
     "squel": "^5.13.0",
     "stats-lite": "^2.2.0",
     "style-it": "^2.1.3",
-    "styled-components": "^5.0.0",
+    "styled-components": "^5.1.0",
     "suricata-sid-db": "^1.0.2",
     "tinycolor2": "1.4.1",
     "tinymath": "1.2.1",

x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap

@@ -79,7 +79,7 @@ describe('LinkIcon', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find('.siemLinkIcon').first()).toHaveStyleRule('flex-direction', 'row-reverse');
+    expect(wrapper.find('.siemLinkIcon').at(1)).toHaveStyleRule('flex-direction', 'row-reverse');
   });
 
   test('it positions the icon to the left when iconSide is left (or not provided)', () => {
@@ -91,7 +91,7 @@ describe('LinkIcon', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find('.siemLinkIcon').first()).not.toHaveStyleRule(
+    expect(wrapper.find('.siemLinkIcon').at(1)).not.toHaveStyleRule(
       'flex-direction',
       'row-reverse'
     );