diff --git a/README.md b/README.md
index 4207958fc..a4d38c5de 100644
--- a/README.md
+++ b/README.md
@@ -14,21 +14,31 @@ You can find documentation and examples on our [docs page](https://bigcommerce.g
### Quick start guide
-Add BigDesign and styled-components@4 to your project using `npm`:
+Add BigDesign and styled-components@5 to your project using `npm`:
```
-npm install @bigcommerce/big-design styled-components@4
+npm install @bigcommerce/big-design styled-components@5
```
or with `yarn`:
```
-yarn add @bigcommerce/big-design styled-components@4
+yarn add @bigcommerce/big-design styled-components@5
```
-Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally,
-including a base font family, [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) and [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to your root component.
-Then import any component, such as `Button`, to use it anywhere in your app.
+Add the font as a `` in your `index.html`/`` element.
+
+```html
+
+
+
+
+
+```
+
+Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
+and add [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to
+your root component. Then import any component, such as `Button`, to use it anywhere in your app.
```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';
diff --git a/packages/big-design-icons/README.md b/packages/big-design-icons/README.md
index f7bb8d73f..6ab087185 100644
--- a/packages/big-design-icons/README.md
+++ b/packages/big-design-icons/README.md
@@ -8,16 +8,16 @@ You can find documentation, list of icons, and examples on our [docs page](https
### Quick start guide
-Add BigDesign Icons and styled-components@4 to your project using `npm`:
+Add BigDesign Icons and styled-components@5 to your project using `npm`:
```
-npm install @bigcommerce/big-design-icons styled-components@4
+npm install @bigcommerce/big-design-icons styled-components@5
```
or with `yarn`:
```
-yarn add @bigcommerce/big-design-icons styled-components@4
+yarn add @bigcommerce/big-design-icons styled-components@5
```
Import any icon component and use it anywhere in your app.
diff --git a/packages/big-design-icons/package.json b/packages/big-design-icons/package.json
index 60f8fa6d5..b0728d5da 100644
--- a/packages/big-design-icons/package.json
+++ b/packages/big-design-icons/package.json
@@ -41,7 +41,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
- "styled-components": "^4.3.0"
+ "styled-components": "^5.3.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
@@ -63,8 +63,8 @@
"@svgr/plugin-svgo": "^5.0.1",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
- "@types/styled-components": "^4.1.12",
- "babel-plugin-styled-components": "^1.10.6",
+ "@types/styled-components": "^5.1.11",
+ "babel-plugin-styled-components": "^1.13.2",
"camelcase": "^5.3.1",
"fs-extra": "^8.1.0",
"glob": "^7.1.4",
@@ -76,7 +76,7 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
- "styled-components": "^4.3.0",
+ "styled-components": "^5.3.0",
"typescript": "^4.3.5",
"typescript-styled-plugin": "^0.15.0"
}
diff --git a/packages/big-design-theme/README.md b/packages/big-design-theme/README.md
index 5baeee0e0..52abc33c5 100644
--- a/packages/big-design-theme/README.md
+++ b/packages/big-design-theme/README.md
@@ -17,16 +17,16 @@ This package is only meant to be used directly when more advanced features are n
### Quick start guide
-Add the BigDesign theme and styled-components@4 to your project using `npm`:
+Add the BigDesign theme and styled-components@5 to your project using `npm`:
```
-npm install @bigcommerce/big-design-theme styled-components@4
+npm install @bigcommerce/big-design-theme styled-components@5
```
or with `yarn`:
```
-yarn add @bigcommerce/big-design-theme styled-components@4
+yarn add @bigcommerce/big-design-theme styled-components@5
```
```tsx
diff --git a/packages/big-design-theme/package.json b/packages/big-design-theme/package.json
index e8fa75512..a7150e5cb 100644
--- a/packages/big-design-theme/package.json
+++ b/packages/big-design-theme/package.json
@@ -37,7 +37,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
- "styled-components": "^4.3.0"
+ "styled-components": "^5.3.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
@@ -53,16 +53,16 @@
"@babel/preset-typescript": "^7.12.1",
"@bigcommerce/configs": "^0.15.0-alpha.0",
"@types/jest": "^25.2.1",
- "@types/styled-components": "^4.1.12",
+ "@types/styled-components": "^5.1.11",
"babel-jest": "^25.5.1",
- "babel-plugin-styled-components": "^1.10.6",
+ "babel-plugin-styled-components": "^1.13.2",
"concurrently": "^6.2.0",
"jest": "^25.5.4",
- "jest-styled-components": "^6.3.1",
+ "jest-styled-components": "^7.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
- "styled-components": "^4.3.0",
+ "styled-components": "^5.3.0",
"typescript": "^4.3.5",
"typescript-styled-plugin": "^0.15.0"
}
diff --git a/packages/big-design/README.md b/packages/big-design/README.md
index b356d99f6..59d3780c3 100644
--- a/packages/big-design/README.md
+++ b/packages/big-design/README.md
@@ -8,21 +8,31 @@ You can find documentation and examples on our [docs page](https://bigcommerce.g
### Quick start guide
-Add BigDesign and styled-components@4 to your project using `npm`:
+Add BigDesign and styled-components@5 to your project using `npm`:
```
-npm install @bigcommerce/big-design styled-components@4
+npm install @bigcommerce/big-design styled-components@5
```
or with `yarn`:
```
-yarn add @bigcommerce/big-design styled-components@4
+yarn add @bigcommerce/big-design styled-components@5
```
-Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally,
-including a base font family, [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) and [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to your root component.
-Then import any component, such as `Button`, to use it anywhere in your app.
+Add the font as a `` in your `index.html`/`` element.
+
+```html
+
+
+
+
+
+```
+
+Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
+and add [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to
+your root component. Then import any component, such as `Button`, to use it anywhere in your app.
```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
index d7d03b77d..8586fa027 100644
--- a/packages/big-design/package.json
+++ b/packages/big-design/package.json
@@ -49,7 +49,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
- "styled-components": "^4.3.0"
+ "styled-components": "^5.3.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
@@ -73,17 +73,17 @@
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^17.0.1",
"@types/react-test-renderer": "^17.0.1",
- "@types/styled-components": "^4.1.12",
+ "@types/styled-components": "^5.1.11",
"babel-jest": "^25.5.1",
- "babel-plugin-styled-components": "^1.10.6",
+ "babel-plugin-styled-components": "^1.13.2",
"concurrently": "^6.2.0",
"jest": "^25.5.4",
- "jest-styled-components": "^6.3.1",
+ "jest-styled-components": "^7.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.2",
- "styled-components": "^4.3.0",
+ "styled-components": "^5.3.0",
"typescript": "^4.3.5",
"typescript-styled-plugin": "^0.15.0"
}
diff --git a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
index 4996b4965..bd8d304c0 100644
--- a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
@@ -25,11 +25,25 @@ exports[`render default (success) Alert 1`] = `
grid-area: messages;
}
+.c6 {
+ color: #313440;
+ margin: 0 0 1rem;
+ color: #5E637A;
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.25rem;
+ margin: 0 0 0.75rem;
+}
+
+.c6:last-child {
+ margin-bottom: 0;
+}
+
.c2 {
border-radius: 0.25rem;
box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
- -webkit-animation: eMLfYp .5s ease-in-out;
- animation: eMLfYp .5s ease-in-out;
+ -webkit-animation: jBcSpD .5s ease-in-out;
+ animation: jBcSpD .5s ease-in-out;
background-color: #FFFFFF;
grid-gap: 0.75rem;
max-width: 28.5rem;
@@ -43,22 +57,11 @@ exports[`render default (success) Alert 1`] = `
border-left: 0.25rem solid #2AAB3F;
}
-.c6 {
- color: #313440;
- margin: 0 0 1rem;
- color: #5E637A;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.25rem;
- margin: 0 0 0.75rem;
+.c7 {
color: #313440;
vertical-align: middle;
}
-.c6:last-child {
- margin-bottom: 0;
-}
-