From 6e140e1943f1eaa601422df3b09fb45e26adf1e8 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Tue, 26 Feb 2019 11:25:48 -0600
Subject: [PATCH 1/7] fix(toggle): update color tokens and add check for mini
 version

---
 src/components/toggle/_toggle.scss      | 31 +++++++++++++++++--------
 src/components/toggle/toggle--small.hbs | 13 ++++-------
 src/globals/scss/_theme-tokens.scss     |  3 ---
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index f7637df94d86..c573f59fb8b3 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -251,7 +251,7 @@
       position: absolute;
       display: block;
       content: '';
-      background-color: $ui-03;
+      background-color: $ui-04;
       cursor: pointer;
       box-sizing: border-box;
       height: rem(24px);
@@ -270,7 +270,7 @@
       top: 3px;
       width: rem(18px);
       height: rem(18px);
-      background-color: $ui-02;
+      background-color: $ui-03;
       border-radius: 50%;
       content: '';
       transition: $transition--base $carbon--standard-easing;
@@ -297,6 +297,21 @@
     }
   }
 
+  .#{$prefix}--toggle__check {
+    fill: $ui-03;
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    z-index: 1;
+    transition: $transition--base $carbon--standard-easing;
+    transform: scale(0.2);
+  }
+
+  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
+    fill: $support-02;
+    transform: scale(1) translateX(16px);
+  }
+
   .#{$prefix}--toggle__text--left,
   .#{$prefix}--toggle__text--right {
     @include typescale('zeta');
@@ -325,18 +340,15 @@
 
   .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
     &:before {
-      background-color: $toggle-background-color;
+      background-color: $support-02;
     }
 
     &:after {
+      background-color: $icon-03;
       transform: translateX(24px);
     }
   }
 
-  .#{$prefix}--toggle__check {
-    @include hidden;
-  }
-
   .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
     &:after {
       margin-left: 0px;
@@ -370,12 +382,11 @@
 
   .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
     &:before {
-      background-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
-      border-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
+      background-color: $disabled-01;
     }
 
     &:after {
-      background-color: $disabled;
+      background-color: $disabled-02;
     }
 
     &:before,
diff --git a/src/components/toggle/toggle--small.hbs b/src/components/toggle/toggle--small.hbs
index b6232642c542..e5173f0b4adf 100644
--- a/src/components/toggle/toggle--small.hbs
+++ b/src/components/toggle/toggle--small.hbs
@@ -6,32 +6,29 @@
 -->
 
 <div class="{{@root.prefix}}--form-item">
-  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
+  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle4" type="checkbox"
+    aria-label="Label Name">
   <label class="{{@root.prefix}}--toggle__label" for="toggle4">
     <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance">
-      {{#unless componentsX}}
       <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
       </svg>
-      {{/unless}}
     </span>
     <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
   </label>
 </div>
 
 <div class="{{@root.prefix}}--form-item">
-  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name"
-    disabled>
+  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle5" type="checkbox"
+    aria-label="Label Name" disabled>
   <label class="{{@root.prefix}}--toggle__label" for="toggle5">
     <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
     <span class="{{@root.prefix}}--toggle__appearance">
-      {{#unless componentsX}}
       <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
       </svg>
-      {{/unless}}
     </span>
     <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
   </label>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
index 7f084713c786..0ddd3aa21291 100644
--- a/src/globals/scss/_theme-tokens.scss
+++ b/src/globals/scss/_theme-tokens.scss
@@ -211,9 +211,6 @@
   $tab-text-disabled: $ibm-color__gray-30 !default !global;
   $tab-underline-disabled: 3px solid $ibm-color__gray-10 !default !global;
 
-  // Toggle
-  $toggle-background-color: $ibm-color__green-50 !default !global;
-
   // Skeleton Loading
   $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01 TODO: Define for experimental
 

From ac25588849e46fd5618da72ffa1551f8dff1ca6b Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 13:55:03 -0500
Subject: [PATCH 2/7] fix: update left and right gutter class names to start
 and end

---
 packages/grid/docs/sass.md      | 26 +++++++++++++++++++++++---
 packages/grid/scss/_mixins.scss | 26 +++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/grid/docs/sass.md b/packages/grid/docs/sass.md
index 76c86cbc5e8f..3ff8512e708d 100644
--- a/packages/grid/docs/sass.md
+++ b/packages/grid/docs/sass.md
@@ -297,7 +297,7 @@ Define the properties for a selector assigned to a row in the grid system.
 
 ### ❌carbon--no-gutter [mixin]
 
-Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 classes are useful for dropping the gutter in fluid situations.
 
 <details>
@@ -311,6 +311,17 @@ classes are useful for dropping the gutter in fluid situations.
     padding-right: 0;
   }
 
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -333,14 +344,23 @@ classes are useful for dropping the gutter in fluid situations.
 
 ### ❌carbon--hang [mixin]
 
-Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }
diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/scss/_mixins.scss
index 0b73e3b90982..fdab0c2ca6b3 100644
--- a/packages/grid/scss/_mixins.scss
+++ b/packages/grid/scss/_mixins.scss
@@ -159,7 +159,7 @@
 // No gutter
 // -----------------------------------------------------------------------------
 
-/// Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 /// classes are useful for dropping the gutter in fluid situations.
 /// @access private
 /// @group @carbon/grid
@@ -170,6 +170,17 @@
     padding-right: 0;
   }
 
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -185,12 +196,21 @@
 // Hang
 // -----------------------------------------------------------------------------
 
-/// Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-/// used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 /// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }

From 460278d8c9fb853bc725da135ebcec4e9139bae1 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 13:57:45 -0500
Subject: [PATCH 3/7] chore: delete extra files

---
 html/accordion/accordion--legacy.html         |  57 --
 html/accordion/accordion.html                 |  57 --
 html/breadcrumb/breadcrumb.html               |  18 -
 .../button--danger--primary--small.html       |  45 --
 html/button/button--danger--primary.html      |  45 --
 html/button/button--danger--small.html        |  45 --
 html/button/button--danger.html               |  45 --
 html/button/button--ghost--small.html         |  45 --
 html/button/button--ghost.html                |  45 --
 html/button/button--primary--small.html       |  45 --
 html/button/button--primary.html              |  45 --
 html/button/button--secondary--small.html     |  45 --
 html/button/button--secondary.html            |  45 --
 html/button/button--tertiary--small.html      |  45 --
 html/button/button--tertiary.html             |  45 --
 html/carousel/carousel.html                   |  65 --
 html/checkbox/checkbox.html                   |  49 --
 .../code-snippet--inline-light.html           |  14 -
 html/code-snippet/code-snippet--inline.html   |  14 -
 html/code-snippet/code-snippet--multi.html    |  51 --
 html/code-snippet/code-snippet.html           |  41 --
 html/combo-box/combo-box--disabled.html       |  37 -
 html/combo-box/combo-box.html                 |  36 -
 .../content-switcher--disabled.html           |  21 -
 .../content-switcher--with-icon.html          |  33 -
 html/content-switcher/content-switcher.html   |  21 -
 html/copy-button/copy-button.html             |  14 -
 .../data-table-v2--editable.html              | 105 ---
 .../data-table-v2--expandable.html            | 155 ----
 html/data-table-v2/data-table-v2--small.html  |  76 --
 .../data-table-v2--with-pager.html            | 421 -----------
 html/data-table-v2/data-table-v2.html         | 370 ----------
 html/data-table/data-table--simple.html       | 162 -----
 html/data-table/data-table.html               | 504 -------------
 html/date-picker/date-picker--light.html      |  31 -
 .../date-picker/date-picker--range-light.html |  28 -
 html/date-picker/date-picker--range.html      |  28 -
 .../date-picker--single-light-no-label.html   |  41 --
 .../date-picker--single-light.html            |  43 --
 .../date-picker--single-no-label.html         |  41 --
 html/date-picker/date-picker--single.html     |  43 --
 html/date-picker/date-picker.html             |  31 -
 html/dropdown/dropdown--inline.html           |  38 -
 html/dropdown/dropdown--light.html            |  36 -
 html/dropdown/dropdown--up-light.html         |  36 -
 html/dropdown/dropdown--up.html               |  36 -
 html/dropdown/dropdown.html                   |  36 -
 html/fab/fab.html                             |  14 -
 .../file-uploader--example-upload-states.html |  39 -
 html/file-uploader/file-uploader.html         |  20 -
 html/footer/footer.html                       |  22 -
 html/form/form--light.html                    |  38 -
 html/form/form.html                           |  38 -
 html/grid/grid--16.html                       |  33 -
 html/grid/grid.html                           |  33 -
 html/inline-loading/inline-loading.html       |  23 -
 html/lightbox/lightbox.html                   |  58 --
 html/link/link.html                           |  14 -
 html/list-box/list-box--inline.html           |  35 -
 html/list-box/list-box--light.html            |  35 -
 html/list-box/list-box.html                   |  35 -
 html/list/list--ordered.html                  |  17 -
 html/list/list.html                           |  17 -
 html/loading/loading--small.html              |  14 -
 html/loading/loading--without-overlay.html    |  14 -
 html/loading/loading.html                     |  15 -
 html/modal/modal--danger.html                 |  38 -
 html/modal/modal--input.html                  |  37 -
 html/modal/modal--nofooter.html               |  35 -
 html/modal/modal.html                         |  37 -
 html/multi-select/multi-select--inline.html   |  70 --
 html/multi-select/multi-select.html           |  70 --
 html/notification/inline-notification.html    |  79 ---
 html/notification/toast-notification.html     |  63 --
 html/number-input/number-input--light.html    | 176 -----
 html/number-input/number-input.html           | 176 -----
 html/overflow-menu/overflow-menu--up.html     | 142 ----
 html/overflow-menu/overflow-menu.html         | 142 ----
 .../pagination-nav--default--as-anchor.html   |  85 ---
 .../pagination-nav--default--with-select.html | 129 ----
 html/pagination-nav/pagination-nav.html       |  78 --
 ...ation--v2-disabled-pagination-buttons.html |  49 --
 html/pagination/pagination--v2.html           |  57 --
 html/pagination/pagination.html               |  44 --
 .../progress-indicator--vertical.html         |  53 --
 .../progress-indicator.html                   |  53 --
 html/radio-button/radio-button--vertical.html |  58 --
 html/radio-button/radio-button.html           |  58 --
 html/search/search--extra-large.html          |  24 -
 html/search/search--large-light.html          |  24 -
 html/search/search--large.html                |  24 -
 html/search/search--small-light.html          |  24 -
 html/search/search--small.html                |  24 -
 html/select/select--helpertext.html           |  40 --
 html/select/select--helpertextinline.html     |  40 --
 html/select/select--inline-invalid.html       |  44 --
 html/select/select--inline.html               |  38 -
 html/select/select--invalid.html              |  44 --
 html/select/select--light-invalid.html        |  44 --
 html/select/select--light.html                |  38 -
 html/select/select.html                       |  38 -
 html/skeleton/skeleton.html                   | 159 -----
 html/slider/slider--disabled.html             |  21 -
 html/slider/slider--light.html                |  21 -
 html/slider/slider.html                       |  21 -
 .../structured-list--selection.html           |  75 --
 html/structured-list/structured-list.html     |  32 -
 html/tabs/tabs.html                           |  44 --
 html/tag/tag.html                             |  16 -
 html/text-area/text-area--light.html          |  32 -
 html/text-area/text-area.html                 |  32 -
 html/text-input/text-input--light.html        |  42 --
 .../text-input--password--light.html          |  90 ---
 html/text-input/text-input--password.html     |  90 ---
 html/text-input/text-input.html               |  42 --
 html/tile/tile--clickable.html                |   8 -
 html/tile/tile--expandable.html               |  22 -
 html/tile/tile--grid.html                     | 119 ----
 html/tile/tile--selectable.html               |  19 -
 html/tile/tile.html                           |   8 -
 html/time-picker/time-picker--light.html      |  40 --
 html/time-picker/time-picker.html             |  40 --
 html/toggle/toggle--small.html                |  34 -
 html/toggle/toggle.html                       |  36 -
 html/toolbar/toolbar.html                     | 101 ---
 html/tooltip/tooltip--definition.html         |  16 -
 html/tooltip/tooltip--icon.html               |  14 -
 html/tooltip/tooltip.html                     |  29 -
 .../ui-shell--navigation-with-no-icons.html   | 640 -----------------
 html/ui-shell/ui-shell--side-nav-fixed.html   | 585 ---------------
 html/ui-shell/ui-shell.html                   | 671 ------------------
 html/unified-header/unified-header.html       | 507 -------------
 132 files changed, 9624 deletions(-)
 delete mode 100644 html/accordion/accordion--legacy.html
 delete mode 100644 html/accordion/accordion.html
 delete mode 100644 html/breadcrumb/breadcrumb.html
 delete mode 100644 html/button/button--danger--primary--small.html
 delete mode 100644 html/button/button--danger--primary.html
 delete mode 100644 html/button/button--danger--small.html
 delete mode 100644 html/button/button--danger.html
 delete mode 100644 html/button/button--ghost--small.html
 delete mode 100644 html/button/button--ghost.html
 delete mode 100644 html/button/button--primary--small.html
 delete mode 100644 html/button/button--primary.html
 delete mode 100644 html/button/button--secondary--small.html
 delete mode 100644 html/button/button--secondary.html
 delete mode 100644 html/button/button--tertiary--small.html
 delete mode 100644 html/button/button--tertiary.html
 delete mode 100644 html/carousel/carousel.html
 delete mode 100644 html/checkbox/checkbox.html
 delete mode 100644 html/code-snippet/code-snippet--inline-light.html
 delete mode 100644 html/code-snippet/code-snippet--inline.html
 delete mode 100644 html/code-snippet/code-snippet--multi.html
 delete mode 100644 html/code-snippet/code-snippet.html
 delete mode 100644 html/combo-box/combo-box--disabled.html
 delete mode 100644 html/combo-box/combo-box.html
 delete mode 100644 html/content-switcher/content-switcher--disabled.html
 delete mode 100644 html/content-switcher/content-switcher--with-icon.html
 delete mode 100644 html/content-switcher/content-switcher.html
 delete mode 100644 html/copy-button/copy-button.html
 delete mode 100644 html/data-table-v2/data-table-v2--editable.html
 delete mode 100644 html/data-table-v2/data-table-v2--expandable.html
 delete mode 100644 html/data-table-v2/data-table-v2--small.html
 delete mode 100644 html/data-table-v2/data-table-v2--with-pager.html
 delete mode 100644 html/data-table-v2/data-table-v2.html
 delete mode 100644 html/data-table/data-table--simple.html
 delete mode 100644 html/data-table/data-table.html
 delete mode 100644 html/date-picker/date-picker--light.html
 delete mode 100644 html/date-picker/date-picker--range-light.html
 delete mode 100644 html/date-picker/date-picker--range.html
 delete mode 100644 html/date-picker/date-picker--single-light-no-label.html
 delete mode 100644 html/date-picker/date-picker--single-light.html
 delete mode 100644 html/date-picker/date-picker--single-no-label.html
 delete mode 100644 html/date-picker/date-picker--single.html
 delete mode 100644 html/date-picker/date-picker.html
 delete mode 100644 html/dropdown/dropdown--inline.html
 delete mode 100644 html/dropdown/dropdown--light.html
 delete mode 100644 html/dropdown/dropdown--up-light.html
 delete mode 100644 html/dropdown/dropdown--up.html
 delete mode 100644 html/dropdown/dropdown.html
 delete mode 100644 html/fab/fab.html
 delete mode 100644 html/file-uploader/file-uploader--example-upload-states.html
 delete mode 100644 html/file-uploader/file-uploader.html
 delete mode 100644 html/footer/footer.html
 delete mode 100644 html/form/form--light.html
 delete mode 100644 html/form/form.html
 delete mode 100644 html/grid/grid--16.html
 delete mode 100644 html/grid/grid.html
 delete mode 100644 html/inline-loading/inline-loading.html
 delete mode 100644 html/lightbox/lightbox.html
 delete mode 100644 html/link/link.html
 delete mode 100644 html/list-box/list-box--inline.html
 delete mode 100644 html/list-box/list-box--light.html
 delete mode 100644 html/list-box/list-box.html
 delete mode 100644 html/list/list--ordered.html
 delete mode 100644 html/list/list.html
 delete mode 100644 html/loading/loading--small.html
 delete mode 100644 html/loading/loading--without-overlay.html
 delete mode 100644 html/loading/loading.html
 delete mode 100644 html/modal/modal--danger.html
 delete mode 100644 html/modal/modal--input.html
 delete mode 100644 html/modal/modal--nofooter.html
 delete mode 100644 html/modal/modal.html
 delete mode 100644 html/multi-select/multi-select--inline.html
 delete mode 100644 html/multi-select/multi-select.html
 delete mode 100644 html/notification/inline-notification.html
 delete mode 100644 html/notification/toast-notification.html
 delete mode 100644 html/number-input/number-input--light.html
 delete mode 100644 html/number-input/number-input.html
 delete mode 100644 html/overflow-menu/overflow-menu--up.html
 delete mode 100644 html/overflow-menu/overflow-menu.html
 delete mode 100644 html/pagination-nav/pagination-nav--default--as-anchor.html
 delete mode 100644 html/pagination-nav/pagination-nav--default--with-select.html
 delete mode 100644 html/pagination-nav/pagination-nav.html
 delete mode 100644 html/pagination/pagination--v2-disabled-pagination-buttons.html
 delete mode 100644 html/pagination/pagination--v2.html
 delete mode 100644 html/pagination/pagination.html
 delete mode 100644 html/progress-indicator/progress-indicator--vertical.html
 delete mode 100644 html/progress-indicator/progress-indicator.html
 delete mode 100644 html/radio-button/radio-button--vertical.html
 delete mode 100644 html/radio-button/radio-button.html
 delete mode 100644 html/search/search--extra-large.html
 delete mode 100644 html/search/search--large-light.html
 delete mode 100644 html/search/search--large.html
 delete mode 100644 html/search/search--small-light.html
 delete mode 100644 html/search/search--small.html
 delete mode 100644 html/select/select--helpertext.html
 delete mode 100644 html/select/select--helpertextinline.html
 delete mode 100644 html/select/select--inline-invalid.html
 delete mode 100644 html/select/select--inline.html
 delete mode 100644 html/select/select--invalid.html
 delete mode 100644 html/select/select--light-invalid.html
 delete mode 100644 html/select/select--light.html
 delete mode 100644 html/select/select.html
 delete mode 100644 html/skeleton/skeleton.html
 delete mode 100644 html/slider/slider--disabled.html
 delete mode 100644 html/slider/slider--light.html
 delete mode 100644 html/slider/slider.html
 delete mode 100644 html/structured-list/structured-list--selection.html
 delete mode 100644 html/structured-list/structured-list.html
 delete mode 100644 html/tabs/tabs.html
 delete mode 100644 html/tag/tag.html
 delete mode 100644 html/text-area/text-area--light.html
 delete mode 100644 html/text-area/text-area.html
 delete mode 100644 html/text-input/text-input--light.html
 delete mode 100644 html/text-input/text-input--password--light.html
 delete mode 100644 html/text-input/text-input--password.html
 delete mode 100644 html/text-input/text-input.html
 delete mode 100644 html/tile/tile--clickable.html
 delete mode 100644 html/tile/tile--expandable.html
 delete mode 100644 html/tile/tile--grid.html
 delete mode 100644 html/tile/tile--selectable.html
 delete mode 100644 html/tile/tile.html
 delete mode 100644 html/time-picker/time-picker--light.html
 delete mode 100644 html/time-picker/time-picker.html
 delete mode 100644 html/toggle/toggle--small.html
 delete mode 100644 html/toggle/toggle.html
 delete mode 100644 html/toolbar/toolbar.html
 delete mode 100644 html/tooltip/tooltip--definition.html
 delete mode 100644 html/tooltip/tooltip--icon.html
 delete mode 100644 html/tooltip/tooltip.html
 delete mode 100644 html/ui-shell/ui-shell--navigation-with-no-icons.html
 delete mode 100644 html/ui-shell/ui-shell--side-nav-fixed.html
 delete mode 100644 html/ui-shell/ui-shell.html
 delete mode 100644 html/unified-header/unified-header.html

diff --git a/html/accordion/accordion--legacy.html b/html/accordion/accordion--legacy.html
deleted file mode 100644
index 82a0c54dee2e..000000000000
--- a/html/accordion/accordion--legacy.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-accordion class="bx--accordion">
-    <li tabindex="0" data-accordion-item class="bx--accordion__item">
-      <div class="bx--accordion__heading">
-        <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>
-        <p class="bx--accordion__title">Section 1 title</p>
-      </div>
-      <div class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li tabindex="0" data-accordion-item class="bx--accordion__item">
-      <div class="bx--accordion__heading">
-        <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>
-        <p class="bx--accordion__title">Section 2 title</p>
-      </div>
-      <div class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li tabindex="0" data-accordion-item class="bx--accordion__item">
-      <div class="bx--accordion__heading">
-        <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>
-        <p class="bx--accordion__title">Section 3 title</p>
-      </div>
-      <div class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li tabindex="0" data-accordion-item class="bx--accordion__item">
-      <div class="bx--accordion__heading">
-        <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>
-        <p class="bx--accordion__title">Section 4 title</p>
-      </div>
-      <div class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-</ul>
diff --git a/html/accordion/accordion.html b/html/accordion/accordion.html
deleted file mode 100644
index b16f5aa20f07..000000000000
--- a/html/accordion/accordion.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-accordion class="bx--accordion">
-    <li data-accordion-item class="bx--accordion__item">
-      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
-          <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" />
-          </svg>
-        <div class="bx--accordion__title">Section 1 title</div>
-      </button>
-      <div id="pane1" class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li data-accordion-item class="bx--accordion__item">
-      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
-          <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" />
-          </svg>
-        <div class="bx--accordion__title">Section 2 title</div>
-      </button>
-      <div id="pane2" class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li data-accordion-item class="bx--accordion__item">
-      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
-          <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" />
-          </svg>
-        <div class="bx--accordion__title">Section 3 title</div>
-      </button>
-      <div id="pane3" class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-    <li data-accordion-item class="bx--accordion__item">
-      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
-          <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" />
-          </svg>
-        <div class="bx--accordion__title">Section 4 title</div>
-      </button>
-      <div id="pane4" class="bx--accordion__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-      </div>
-    </li>
-</ul>
diff --git a/html/breadcrumb/breadcrumb.html b/html/breadcrumb/breadcrumb.html
deleted file mode 100644
index cde70ea6a9aa..000000000000
--- a/html/breadcrumb/breadcrumb.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
-    <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 3</a>
-    </div>
-</nav>
diff --git a/html/button/button--danger--primary--small.html b/html/button/button--danger--primary--small.html
deleted file mode 100644
index 9e8531f6e787..000000000000
--- a/html/button/button--danger--primary--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--danger--primary
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--danger--primary.html b/html/button/button--danger--primary.html
deleted file mode 100644
index e57fb9db704c..000000000000
--- a/html/button/button--danger--primary.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--danger--primary
-  "
-   aria-label="danger" 
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-  "
-   aria-label="danger" 
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-  "
-   aria-label="danger" 
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--danger--primary
-  "
-   aria-label="danger" 
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--danger--small.html b/html/button/button--danger--small.html
deleted file mode 100644
index 9ed5fec8709b..000000000000
--- a/html/button/button--danger--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--danger
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--danger
-   bx--btn--sm"
-   aria-label="danger" 
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--danger.html b/html/button/button--danger.html
deleted file mode 100644
index 0630ab8f41b3..000000000000
--- a/html/button/button--danger.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--danger
-  "
-   aria-label="danger" 
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger
-  "
-   aria-label="danger" 
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--danger
-  "
-   aria-label="danger" 
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--danger
-  "
-   aria-label="danger" 
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--ghost--small.html b/html/button/button--ghost--small.html
deleted file mode 100644
index 7c6222f2588f..000000000000
--- a/html/button/button--ghost--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--ghost
-   bx--btn--sm"
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-   bx--btn--sm"
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--ghost.html b/html/button/button--ghost.html
deleted file mode 100644
index e0d5ad28aecd..000000000000
--- a/html/button/button--ghost.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--ghost
-  "
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-  "
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-  "
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--ghost
-  "
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--primary--small.html b/html/button/button--primary--small.html
deleted file mode 100644
index c0f038848344..000000000000
--- a/html/button/button--primary--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--primary
-   bx--btn--sm"
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--primary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--primary
-   bx--btn--sm"
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--primary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--primary.html b/html/button/button--primary.html
deleted file mode 100644
index 78d0cb23d0a0..000000000000
--- a/html/button/button--primary.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--primary
-  "
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--primary
-  "
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--primary
-  "
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--primary
-  "
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--secondary--small.html b/html/button/button--secondary--small.html
deleted file mode 100644
index 25ab1679115a..000000000000
--- a/html/button/button--secondary--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--secondary
-   bx--btn--sm"
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-   bx--btn--sm"
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--secondary.html b/html/button/button--secondary.html
deleted file mode 100644
index ce85c8a5bdc2..000000000000
--- a/html/button/button--secondary.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--secondary
-  "
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-  "
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-  "
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--secondary
-  "
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--tertiary--small.html b/html/button/button--tertiary--small.html
deleted file mode 100644
index b5380f8e4140..000000000000
--- a/html/button/button--tertiary--small.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--tertiary
-   bx--btn--sm"
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-   bx--btn--sm"
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-   bx--btn--sm"
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/button/button--tertiary.html b/html/button/button--tertiary.html
deleted file mode 100644
index 999fd2ae5595..000000000000
--- a/html/button/button--tertiary.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button
-  class="bx--btn bx--btn--tertiary
-  "
-  
-  type="button"
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-  "
-  
-  type="button" disabled
->
-  Button
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-  "
-  
-  type="button"
->
-  With icon
-    <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>
-</button>
-<button
-  class="bx--btn bx--btn--tertiary
-  "
-  
-  type="button" disabled
->
-  With icon
-    <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>
-</button>
diff --git a/html/carousel/carousel.html b/html/carousel/carousel.html
deleted file mode 100644
index 4b07eb794658..000000000000
--- a/html/carousel/carousel.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--type-omega">Carousel Title</div>
-<div class="bx--carousel" data-carousel>
-  <button class="bx--carousel__btn" data-scroll-left>
-    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-    </svg>
-  </button>
-  <div class="bx--carousel-container">
-    <div class="bx--filmstrip" tabindex="-1">
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="0">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;/0">
-        </button>
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="1">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;1">
-        </button>
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="2">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;2">
-        </button>
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="3">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;3">
-        </button>
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="4">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;4">
-        </button>
-        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="5">
-          <img src="http://via.placeholder.com/256x144?text&#x3D;5">
-        </button>
-    </div>
-  </div>
-  <button class="bx--carousel__btn" data-scroll-right>
-    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-    </svg>
-  </button>
-</div>
-
-<div id="carousel-lightbox" class="bx--modal" data-modal>
-  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
-    <div class="bx--lightbox__main">
-      <button class="bx--lightbox__btn" data-scroll-left>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;/0" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;1" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;2" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;3" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;4" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;5" class="bx--lightbox__item">
-      <button class="bx--lightbox__btn" data-scroll-right>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/html/checkbox/checkbox.html b/html/checkbox/checkbox.html
deleted file mode 100644
index 71011e9a3934..000000000000
--- a/html/checkbox/checkbox.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Checkbox (input + label)</legend>
-  <!-- input + label -->
-  <div class="bx--form-item bx--checkbox-wrapper">
-    <input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox" checked>
-    <label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox</label>
-  </div>
-  <!-- input + label indeterminate -->
-  <div class="bx--form-item bx--checkbox-wrapper">
-    <input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed">
-    <label for="bx--checkbox-ind" class="bx--checkbox-label">Indeterminate checkbox</label>
-  </div>
-  <!-- input + label disabled -->
-  <div class="bx--form-item bx--checkbox-wrapper">
-    <input id="bx--checkbox-disabled" class="bx--checkbox" type="checkbox" value="new" name="checkbox" disabled>
-    <label for="bx--checkbox-disabled" class="bx--checkbox-label">Disabled checkbox</label>
-  </div>
-</fieldset>
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Checkbox (input > label)</legend>
-    <!-- label > input -->
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <label for="bx--checkbox-new2" class="bx--checkbox-label">
-        <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" checked>
-        Checkbox
-      </label>
-    </div>
-    <!-- label > input -->
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed">
-        <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed">
-        Indeterminate checkbox
-      </label>
-    </div>
-    <!-- label > input -->
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <label for="bx--checkbox-disabled2" class="bx--checkbox-label">
-        <input id="bx--checkbox-disabled2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" disabled>
-        Disabled checkbox
-      </label>
-    </div>
-</fieldset>
\ No newline at end of file
diff --git a/html/code-snippet/code-snippet--inline-light.html b/html/code-snippet/code-snippet--inline-light.html
deleted file mode 100644
index 3aed645258d7..000000000000
--- a/html/code-snippet/code-snippet--inline-light.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<p>Here is an example of a text that a user would be reading. In this paragraph would be
-  <button data-copy-btn="" class="bx--snippet bx--snippet--inline bx--btn--copy bx--snippet--light"
-    aria-label="Copy code" tabindex="0">
-    <code>inline code</code>
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-  </button>
-  that the user could look at and copy in to their code editor.</p>
diff --git a/html/code-snippet/code-snippet--inline.html b/html/code-snippet/code-snippet--inline.html
deleted file mode 100644
index 4cbaf32a90fe..000000000000
--- a/html/code-snippet/code-snippet--inline.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<p>Here is an example of a text that a user would be reading. In this paragraph would be
-  <button data-copy-btn="" class="bx--snippet bx--snippet--inline bx--btn--copy"
-    aria-label="Copy code" tabindex="0">
-    <code>inline code</code>
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-  </button>
-  that the user could look at and copy in to their code editor.</p>
diff --git a/html/code-snippet/code-snippet--multi.html b/html/code-snippet/code-snippet--multi.html
deleted file mode 100644
index 043486adabe5..000000000000
--- a/html/code-snippet/code-snippet--multi.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<div class="bx--snippet bx--snippet--multi" 
-  data-code-snippet> <div class="bx--snippet-container" aria-label="Code Snippet Text">
-  <pre>
-<code>@mixin grid-container {
-    width: 100%;
-    padding-right: padding(mobile);
-    padding-left: padding(mobile);
-
-    @include breakpoint(bp--xs--major) {
-      padding-right: padding(xs);
-      padding-left: padding(xs);
-    }
-  }
-
-  $z-indexes: (
-    modal : 9000,
-    overlay : 8000,
-    dropdown : 7000,
-    header : 6000,
-    footer : 5000,
-    hidden : - 1,
-    overflowHidden: - 1,
-    floating: 10000
-  );</code>
-    </pre>
-</div>
-<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-  <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" />
-  </svg>
-  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-</button>
-<button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand"
-  type="button">
-  <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
-    more</span>
-  <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" />
-  </svg>
-</button>
-</div>
diff --git a/html/code-snippet/code-snippet.html b/html/code-snippet/code-snippet.html
deleted file mode 100644
index 5dbfe32d9a5e..000000000000
--- a/html/code-snippet/code-snippet.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<div class="bx--snippet bx--snippet--single" > <div class="bx--snippet-container" aria-label="Code Snippet Text">
-  <pre>
-<code>@mixin grid-container {
-    width: 100%;
-    padding-right: padding(mobile);
-    padding-left: padding(mobile);
-
-    @include breakpoint(bp--xs--major) {
-      padding-right: padding(xs);
-      padding-left: padding(xs);
-    }
-  }
-
-  $z-indexes: (
-    modal : 9000,
-    overlay : 8000,
-    dropdown : 7000,
-    header : 6000,
-    footer : 5000,
-    hidden : - 1,
-    overflowHidden: - 1,
-    floating: 10000
-  );</code>
-    </pre>
-</div>
-<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-  <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" />
-  </svg>
-  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-</button>
-</div>
diff --git a/html/combo-box/combo-box--disabled.html b/html/combo-box/combo-box--disabled.html
deleted file mode 100644
index 1e67e76f7cf7..000000000000
--- a/html/combo-box/combo-box--disabled.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--combo-box bx--list-box bx--list-box--disabled">
-  <div role="button" class="bx--list-box__field" aria-label="open menu" aria-expanded="false" aria-haspopup="true"
-     disabled> <input class="bx--text-input" role="combobox" aria-autocomplete="list"
-    aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." 
-    disabled> <div class="bx--list-box__menu-icon">
-      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-  </div>
-</div>
-</div>
-<div class="bx--form-item bx--combo-box bx--list-box bx--list-box--disabled">
-  <div role="button" class="bx--list-box__field" aria-label="close menu" aria-expanded="true" aria-haspopup="true"
-     disabled> <input class="bx--text-input" role="combobox" aria-autocomplete="list"
-    aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..."
-    aria-activedescendant="downshift-1-item-2"  disabled> <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Close menu" name="caret--down" role="img">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-  </div>
-</div>
-<div class="bx--list-box__menu">
-  <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
-  <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-  <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-2">Option 3</div>
-  <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-</div>
-</div>
diff --git a/html/combo-box/combo-box.html b/html/combo-box/combo-box.html
deleted file mode 100644
index 032b3cab5b92..000000000000
--- a/html/combo-box/combo-box.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--combo-box bx--list-box">
-  <div role="button" class="bx--list-box__field" aria-label="open menu" aria-expanded="false" aria-haspopup="true"
-    > <input class="bx--text-input" role="combobox" aria-autocomplete="list"
-    aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." > <div class="bx--list-box__menu-icon">
-      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-  </div>
-</div>
-</div>
-<div class="bx--form-item bx--combo-box bx--list-box">
-  <div role="button" class="bx--list-box__field" aria-label="close menu" aria-expanded="true" aria-haspopup="true"
-    > <input class="bx--text-input" role="combobox" aria-autocomplete="list"
-    aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..."
-    aria-activedescendant="downshift-1-item-2" > <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Close menu" name="caret--down" role="img">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-  </div>
-</div>
-<div class="bx--list-box__menu">
-  <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
-  <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-  <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-2">Option 3</div>
-  <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-</div>
-</div>
diff --git a/html/content-switcher/content-switcher--disabled.html b/html/content-switcher/content-switcher--disabled.html
deleted file mode 100644
index 21bde092505d..000000000000
--- a/html/content-switcher/content-switcher--disabled.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-content-switcher class="bx--content-switcher" role="tablist" aria-label="Demo switch content">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected"
-    data-target=".demo--panel--opt-1" role="tab"  aria-selected="true"   disabled >
-        <span>First section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-2" role="tab"   disabled >
-        <span>Second section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-3" role="tab"   disabled >
-        <span>Third section</span>
-  </button>
-</div>
diff --git a/html/content-switcher/content-switcher--with-icon.html b/html/content-switcher/content-switcher--with-icon.html
deleted file mode 100644
index b1ed66e1d986..000000000000
--- a/html/content-switcher/content-switcher--with-icon.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-content-switcher class="bx--content-switcher" role="tablist" aria-label="Demo switch content">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected"
-    data-target=".demo--panel--opt-1" role="tab"  aria-selected="true"  >
-      <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>
-    <span>First section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-2" role="tab"  >
-      <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>
-    <span>Second section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-3" role="tab"  >
-      <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>
-    <span>Third section</span>
-  </button>
-</div>
diff --git a/html/content-switcher/content-switcher.html b/html/content-switcher/content-switcher.html
deleted file mode 100644
index 92dc3a04af90..000000000000
--- a/html/content-switcher/content-switcher.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-content-switcher class="bx--content-switcher" role="tablist" aria-label="Demo switch content">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected"
-    data-target=".demo--panel--opt-1" role="tab"  aria-selected="true"  >
-        <span>First section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-2" role="tab"  >
-        <span>Second section</span>
-  </button>
-  <button class="bx--content-switcher-btn"
-    data-target=".demo--panel--opt-3" role="tab"  >
-        <span>Third section</span>
-  </button>
-</div>
diff --git a/html/copy-button/copy-button.html b/html/copy-button/copy-button.html
deleted file mode 100644
index e2fa57ed3fc4..000000000000
--- a/html/copy-button/copy-button.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
-  Copy button
-    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
-      <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
-    </svg>
-  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-</button>
diff --git a/html/data-table-v2/data-table-v2--editable.html b/html/data-table-v2/data-table-v2--editable.html
deleted file mode 100644
index 606731081083..000000000000
--- a/html/data-table-v2/data-table-v2--editable.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<table class="bx--data-table-v2 bx--data-table-v2--zebra">
-  <thead>
-    <tr>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Name</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Protocol</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Port</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Rule</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Attached Groups</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Status</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr>
-              <td class="bx--data-table-cell--editable bx--data-table-cell--editing">
-                <div class="bx--data-table__edit-field">
-                  <label class="bx--label" for="edit-cell:row-id-15:name">Edit Name: Load Balancer 3</label>
-                  <input type="text" class="bx--text-input" id="edit-cell:row-id-15:name" value="Load Balancer 3">
-                </div>
-                <div class="bx--data-table__edit-actions">
-                  <button class="bx--btn bx--btn--secondary bx--btn--sm">Cancel</button>
-                  <button class="bx--btn bx--btn--primary bx--btn--sm">Save</button>
-                </div>
-              </td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">3000</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Round Robin</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Kevins VM Groups</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Disabled</span></td>
-      </tr>
-      <tr>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 1</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">443</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Round Robin</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Maureens VM Groups</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Starting</span></td>
-      </tr>
-      <tr>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 2</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">80</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">DNS delegation</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Andrews VM Groups</span></td>
-              <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Active</span></td>
-      </tr>
-  </tbody>
-</table>
-
-</div>
diff --git a/html/data-table-v2/data-table-v2--expandable.html b/html/data-table-v2/data-table-v2--expandable.html
deleted file mode 100644
index 8c397c2e833a..000000000000
--- a/html/data-table-v2/data-table-v2--expandable.html
+++ /dev/null
@@ -1,155 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <section class="bx--table-toolbar">
-
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-            fill-rule="nonzero" />
-        </svg>
-        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
-        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
-        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
-          <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" />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-  </section>
-
-<table class="bx--data-table-v2">
-  <thead>
-    <tr>
-        <th>
-              <span class="bx--table-header-label"></span>
-                              </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Name</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Protocol</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Ports</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Rule</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Attached Groups</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Status</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
-                  <title></title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr class="bx--parent-row-v2" data-parent-row>
-              <td class="bx--table-expand-v2" data-event="expand">
-                <button class="bx--table-expand-v2__button">
-                  <svg class="bx--table-expand-v2__svg" 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" />
-                  </svg>
-                </button>
-              </td>
-              <td>Load Balancer 1</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
-          <td colspan="7">
-            
-      <h4>
-        <strong>Harry Potter</strong>
-      </h4>
-      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-        as they tried to protect him, shortly before attacking Harry.</p>
-    
-          </td>
-        </tr>
-      <tr class="bx--parent-row-v2" data-parent-row>
-              <td class="bx--table-expand-v2" data-event="expand">
-                <button class="bx--table-expand-v2__button">
-                  <svg class="bx--table-expand-v2__svg" 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" />
-                  </svg>
-                </button>
-              </td>
-              <td>Load Balancer 1</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
-          <td colspan="7">
-            
-      <h4>
-        <strong>Harry Potter</strong>
-      </h4>
-      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-        as they tried to protect him, shortly before attacking Harry.</p>
-    
-          </td>
-        </tr>
-  </tbody>
-</table>
-
-</div>
diff --git a/html/data-table-v2/data-table-v2--small.html b/html/data-table-v2/data-table-v2--small.html
deleted file mode 100644
index c091980f1619..000000000000
--- a/html/data-table-v2/data-table-v2--small.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<table class="bx--data-table-v2 bx--data-table-v2--compact">
-  <thead>
-    <tr>
-        <th>
-              <span class="bx--table-header-label">Name</span>
-                              </th>
-        <th>
-              <span class="bx--table-header-label">Protocol</span>
-                              </th>
-        <th>
-              <span class="bx--table-header-label">Port</span>
-                              </th>
-        <th>
-              <span class="bx--table-header-label">Rule</span>
-                              </th>
-        <th>
-              <span class="bx--table-header-label">Attached Groups</span>
-                              </th>
-        <th>
-              <span class="bx--table-header-label">Status</span>
-                              </th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr>
-              <td>Load Balancer 1</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-      <tr>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-      <tr>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-      <tr>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-      <tr>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                  </tr>
-  </tbody>
-</table>
-
-
diff --git a/html/data-table-v2/data-table-v2--with-pager.html b/html/data-table-v2/data-table-v2--with-pager.html
deleted file mode 100644
index 3bd0bae05cae..000000000000
--- a/html/data-table-v2/data-table-v2--with-pager.html
+++ /dev/null
@@ -1,421 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <section class="bx--table-toolbar">
-      <div class="bx--batch-actions" aria-label="Table Action Bar">
-        <div class="bx--action-list">
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-        </div>
-        <div class="bx--batch-summary">
-          <p class="bx--batch-summary__para">
-          <span data-items-selected>3</span> items selected
-        </p>
-          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
-        </div>
-      </div>
-
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-            fill-rule="nonzero" />
-        </svg>
-        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
-        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
-        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
-          <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" />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-      <div class="bx--toolbar-content">
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14"
-    aria-label="Download" alt="Download">
-    <title>Download</title>
-    <path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path>
-    <path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path>
-  </svg>
-
-          </button>
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16"
-    aria-label="Edit" alt="Edit">
-    <title>Edit</title>
-    <path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path>
-  </svg>
-
-          </button>
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15"
-    aria-label="Settings" alt="Settings">
-    <title>Settings</title>
-    <path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path>
-    <path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path>
-  </svg>
-
-          </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
-      </div>
-  </section>
-
-<table class="bx--data-table-v2 bx--data-table-v2--zebra">
-  <thead>
-    <tr>
-        <th>
-            <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
-            <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
-        </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Name</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Protocol</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Port</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Rule</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Attached Groups</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Status</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-        </th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
-                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 1</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
-                <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
-                <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
-                <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
-                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-  </tbody>
-</table>
-
-</div>
-  <div class="bx--pagination" data-pagination>
-    <div class="bx--pagination__left">
-      <span class="bx--pagination__text">Items per page:</span>
-      <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-        <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
-          <option class="bx--select-option" value="10" selected>10</option>
-          <option class="bx--select-option" value="20">20</option>
-          <option class="bx--select-option" value="30">30</option>
-          <option class="bx--select-option" value="40">40</option>
-          <option class="bx--select-option" value="50">50</option>
-        </select>
-        <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>
-      </div>
-      <span class="bx--pagination__text">
-        <span>|&nbsp;</span>
-        <span data-displayed-item-range>1-10</span> of
-        <span data-total-items>40</span> items</span>
-    </div>
-    <div class="bx--pagination__right bx--pagination--inline">
-      <span class="bx--pagination__text">
-        <span data-displayed-page-number>1</span> of
-        <span data-total-pages>4</span> pages</span>
-      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
-          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
-        </svg>
-      </button>
-      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-      <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
-          <option class="bx--select-option" value="1" selected>1</option>
-          <option class="bx--select-option" value="2">2</option>
-          <option class="bx--select-option" value="3">3</option>
-          <option class="bx--select-option" value="4">4</option>
-          <option class="bx--select-option" value="5">5</option>
-        </select>
-        <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>
-      </div>
-      <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-        <svg class="bx--pagination__button-icon" 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" />
-        </svg>
-      </button>
-    </div>
-  </div>
diff --git a/html/data-table-v2/data-table-v2.html b/html/data-table-v2/data-table-v2.html
deleted file mode 100644
index 0d3544b567e4..000000000000
--- a/html/data-table-v2/data-table-v2.html
+++ /dev/null
@@ -1,370 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <section class="bx--table-toolbar">
-      <div class="bx--batch-actions" aria-label="Table Action Bar">
-        <div class="bx--action-list">
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-              Ghost
-              
-  <svg class="bx--btn__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>
-
-            </button>
-        </div>
-        <div class="bx--batch-summary">
-          <p class="bx--batch-summary__para">
-          <span data-items-selected>3</span> items selected
-        </p>
-          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
-        </div>
-      </div>
-
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-            fill-rule="nonzero" />
-        </svg>
-        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
-        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
-        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
-          <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" />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-      <div class="bx--toolbar-content">
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14"
-    aria-label="Download" alt="Download">
-    <title>Download</title>
-    <path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path>
-    <path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path>
-  </svg>
-
-          </button>
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16"
-    aria-label="Edit" alt="Edit">
-    <title>Edit</title>
-    <path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path>
-  </svg>
-
-          </button>
-          <button class="bx--toolbar-action">
-            
-  <svg class="bx--toolbar-action__icon"
-    fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15"
-    aria-label="Settings" alt="Settings">
-    <title>Settings</title>
-    <path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path>
-    <path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path>
-  </svg>
-
-          </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
-      </div>
-  </section>
-
-<table class="bx--data-table-v2 bx--data-table-v2--zebra">
-  <thead>
-    <tr>
-        <th>
-            <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
-            <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
-        </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Name</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Protocol</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Port</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Rule</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Attached Groups</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-              <button class="bx--table-sort-v2" data-event="sort">
-                <span class="bx--table-header-label">Status</span>
-                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
-                  <title>Sort rows by this header in descending order</title>
-                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-                </svg>
-              </button>
-                  </th>
-        <th>
-        </th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
-                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 1</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
-                <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
-                <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
-                <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-      <tr>
-              <td>
-                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
-                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
-              </td>
-              <td>Load Balancer 5</td>
-                          <td>HTTP</td>
-                          <td>80</td>
-                          <td>Round Robin</td>
-                          <td>Maureen&#x27;s VM Groups</td>
-                          <td>Active</td>
-                          <td class="bx--table-overflow">
-                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                  <svg 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" />
-                      <circle cx="1.5" cy="13.5" r="1.5" />
-                    </g>
-                  </svg>
-                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Stop app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Restart app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Rename app</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Edit routes and access, use title when</button>
-                      </li>
-                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                        <button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">Delete app</button>
-                      </li>
-                  </ul>
-                </div>
-              </td>
-      </tr>
-  </tbody>
-</table>
-
-</div>
diff --git a/html/data-table/data-table--simple.html b/html/data-table/data-table--simple.html
deleted file mode 100644
index dfaa87953732..000000000000
--- a/html/data-table/data-table--simple.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--responsive-table-container" data-responsive-table>
-  <table class="bx--responsive-table bx--responsive-table--static-size" data-table>
-    <thead class="bx--table-head">
-      <tr class="bx--table-row">
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>First Name</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>Last Name</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>House</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-      </tr>
-    </thead>
-    <tbody class="bx--table-body">
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Harry</td>
-                              <td>Potter</td>
-                              <td>Gryffindor</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <h4><strong>Harry Potter</strong></h4>
-      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-        as they tried to protect him, shortly before attacking Harry.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Hermoine</td>
-                              <td>Granger</td>
-                              <td>Gryffindor</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <table class="bx--responsive-table bx--responsive-table--static-size">
-        <thead>
-          <tr class="bx--table-row">
-            <th class="bx--table-header">First Name</th>
-            <th class="bx--table-header">Last Name</th>
-            <th class="bx--table-header">House</th>
-            <th class="bx--table-header">Hello</th>
-            <th class="bx--table-header">Column</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Godric</td>
-            <td>Gryffindor</td>
-            <td>Origin</td>
-            <td>Something</td>
-            <td>Hooray</td>
-          </tr>
-          <tr>
-            <td>Salazar</td>
-            <td>Slytherin</td>
-            <td>Origin</td>
-            <td>Something</td>
-            <td>Hooray</td>
-          </tr>
-        </tbody>
-      </table>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Ron</td>
-                              <td>Weasley</td>
-                              <td>Gryffindor</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <img src="https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg" />
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Draco</td>
-                              <td>Malfoy</td>
-                              <td>Slytherin</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <p>Draco Malfoy is in Gryffindor House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Blaise</td>
-                              <td>Zabini</td>
-                              <td>Slytherin</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <p>Blaise Zabini is in Gryffindor House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Cedric</td>
-                              <td>Diggory</td>
-                              <td>Hufflepuff</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <p>Cedric Diggory is in Hufflepuff House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Luna</td>
-                              <td>Lovegood</td>
-                              <td>Ravenclaw</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <p>Luna Lovegood is in Ravenclaw House. She is in her fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td>Cho</td>
-                              <td>Chang</td>
-                              <td>Ravenclaw</td>
-                      </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="3">
-              
-      <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
-    
-            </td>
-          </tr>
-    </tbody>
-  </table>
-</div>
\ No newline at end of file
diff --git a/html/data-table/data-table.html b/html/data-table/data-table.html
deleted file mode 100644
index 9d67028259dd..000000000000
--- a/html/data-table/data-table.html
+++ /dev/null
@@ -1,504 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--responsive-table-container" data-responsive-table>
-  <table class="bx--responsive-table" data-table>
-    <thead class="bx--table-head">
-      <tr class="bx--table-row">
-          <th class="bx--table-header">
-          </th>
-          <th class="bx--table-header bx--table-select">
-              <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox-1">
-              <label for="bx--checkbox-1" class="bx--checkbox-label" aria-label="Label name">
-                <span class="bx--checkbox-appearance">
-                  <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                    <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                  </svg>
-                </span>
-              </label>
-          </th>
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>First Name</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>Last Name</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-          <th class="bx--table-header bx--table-sort" data-event="sort">
-                <span>House</span>
-                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-                  <path d="M10 0L5 5 0 0z"></path>
-                </svg>
-          </th>
-          <th class="bx--table-header">
-          </th>
-      </tr>
-    </thead>
-    <tbody class="bx--table-body">
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-2">
-                  <label for="bx--checkbox-2" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Harry</td>
-                              <td>Potter</td>
-                              <td>Gryffindor</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <h4><strong>Harry Potter</strong></h4>
-      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-        as they tried to protect him, shortly before attacking Harry.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-3">
-                  <label for="bx--checkbox-3" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Hermoine</td>
-                              <td>Granger</td>
-                              <td>Gryffindor</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <table class="bx--responsive-table bx--responsive-table--static-size">
-        <thead>
-          <tr class="bx--table-row">
-            <th class="bx--table-header">First Name</th>
-            <th class="bx--table-header">Last Name</th>
-            <th class="bx--table-header">House</th>
-            <th class="bx--table-header">Hello</th>
-            <th class="bx--table-header">Column</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Godric</td>
-            <td>Gryffindor</td>
-            <td>Origin</td>
-            <td>Something</td>
-            <td>Hooray</td>
-          </tr>
-          <tr>
-            <td>Salazar</td>
-            <td>Slytherin</td>
-            <td>Origin</td>
-            <td>Something</td>
-            <td>Hooray</td>
-          </tr>
-        </tbody>
-      </table>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-4">
-                  <label for="bx--checkbox-4" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Ron</td>
-                              <td>Weasley</td>
-                              <td>Gryffindor</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <img src="https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg" />
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-5">
-                  <label for="bx--checkbox-5" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Draco</td>
-                              <td>Malfoy</td>
-                              <td>Slytherin</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <p>Draco Malfoy is in Gryffindor House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-6">
-                  <label for="bx--checkbox-6" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Blaise</td>
-                              <td>Zabini</td>
-                              <td>Slytherin</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <p>Blaise Zabini is in Gryffindor House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-7">
-                  <label for="bx--checkbox-7" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Cedric</td>
-                              <td>Diggory</td>
-                              <td>Hufflepuff</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <p>Cedric Diggory is in Hufflepuff House. He is in his fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-8">
-                  <label for="bx--checkbox-8" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Luna</td>
-                              <td>Lovegood</td>
-                              <td>Ravenclaw</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <p>Luna Lovegood is in Ravenclaw House. She is in her fifth year.</p>
-    
-            </td>
-          </tr>
-        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-                <td tabindex="0" class="bx--table-expand" data-event="expand">
-                  <svg class="bx--table-expand__svg" 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>
-                </td>
-                <td class="bx--table-select">
-                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-9">
-                  <label for="bx--checkbox-9" class="bx--checkbox-label" aria-label="Label name">
-                    <span class="bx--checkbox-appearance">
-                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-                      </svg>
-                    </span>
-                  </label>
-                </td>
-                <td>Cho</td>
-                              <td>Chang</td>
-                              <td>Ravenclaw</td>
-                              <td class="bx--table-overflow">
-                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-                      <circle cx="2" cy="2" r="2"></circle>
-                      <circle cx="2" cy="10" r="2"></circle>
-                      <circle cx="2" cy="18" r="2"></circle>
-                    </svg>
-                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Restart app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Rename app</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option">
-                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-                        </li>
-                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                          <button class="bx--overflow-menu-options__btn">Delete app</button>
-                        </li>
-                    </ul>
-                  </div>
-                </td>
-        </tr>
-          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-            <td colspan="6">
-              
-      <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
-    
-            </td>
-          </tr>
-    </tbody>
-  </table>
-</div>
\ No newline at end of file
diff --git a/html/date-picker/date-picker--light.html b/html/date-picker/date-picker--light.html
deleted file mode 100644
index c935bc48ed30..000000000000
--- a/html/date-picker/date-picker--light.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic without calendar (mm/yy only) -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--light">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
-      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
-      />
-    </div>
-  </div>
-</div>
-
-<!-- Basic without calendar -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--light">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-6" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--range-light.html b/html/date-picker/date-picker--range-light.html
deleted file mode 100644
index c6109d0362ea..000000000000
--- a/html/date-picker/date-picker--range-light.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Ranged -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="range"
-    class="bx--date-picker bx--date-picker--range bx--date-picker--light">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-1" class="bx--label">Start date label</label>
-      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input-from />
-    </div>
-    <div class="bx--date-picker-container">
-      <label for="date-picker-2" class="bx--label">End date label</label>
-      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input-to />
-    </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-      <path
-        d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-        fill-rule="nonzero" />
-    </svg>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--range.html b/html/date-picker/date-picker--range.html
deleted file mode 100644
index a6ba3f903c0e..000000000000
--- a/html/date-picker/date-picker--range.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Ranged -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="range"
-    class="bx--date-picker bx--date-picker--range">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-1" class="bx--label">Start date label</label>
-      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input-from />
-    </div>
-    <div class="bx--date-picker-container">
-      <label for="date-picker-2" class="bx--label">End date label</label>
-      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input-to />
-    </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-      <path
-        d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-        fill-rule="nonzero" />
-    </svg>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--single-light-no-label.html b/html/date-picker/date-picker--single-light-no-label.html
deleted file mode 100644
index 04020ada7e36..000000000000
--- a/html/date-picker/date-picker--single-light-no-label.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--light bx--date-picker--nolabel">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input />
-    </div>
-  </div>
-</div>
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--light bx--date-picker--nolabel">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"
-        pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--single-light.html b/html/date-picker/date-picker--single-light.html
deleted file mode 100644
index 9fe3669b7025..000000000000
--- a/html/date-picker/date-picker--single-light.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--light">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
-      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input />
-    </div>
-  </div>
-</div>
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--light">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"
-        pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--single-no-label.html b/html/date-picker/date-picker--single-no-label.html
deleted file mode 100644
index 6977802dcf9a..000000000000
--- a/html/date-picker/date-picker--single-no-label.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--nolabel">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input />
-    </div>
-  </div>
-</div>
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single bx--date-picker--nolabel">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"
-        pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker--single.html b/html/date-picker/date-picker--single.html
deleted file mode 100644
index 143ad714afe8..000000000000
--- a/html/date-picker/date-picker--single.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
-      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
-        placeholder="mm/dd/yyyy" data-date-picker-input />
-    </div>
-  </div>
-</div>
-
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single"
-    class="bx--date-picker bx--date-picker--single">
-    <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
-        <path
-          d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
-          fill-rule="nonzero" />
-      </svg>
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"
-        pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/date-picker/date-picker.html b/html/date-picker/date-picker.html
deleted file mode 100644
index e062107b9290..000000000000
--- a/html/date-picker/date-picker.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Basic without calendar (mm/yy only) -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
-      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
-      />
-    </div>
-  </div>
-</div>
-
-<!-- Basic without calendar -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-6" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/dropdown/dropdown--inline.html b/html/dropdown/dropdown--inline.html
deleted file mode 100644
index dbdd79183d0f..000000000000
--- a/html/dropdown/dropdown--inline.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-dropdown data-dropdown-type="inline"  data-value
-  class="bx--dropdown bx--dropdown--inline"
-  tabindex="0">
-  <li class="bx--dropdown-text">
-    
-    <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
-    <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>
-  </li>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<br>
diff --git a/html/dropdown/dropdown--light.html b/html/dropdown/dropdown--light.html
deleted file mode 100644
index cd4084df0374..000000000000
--- a/html/dropdown/dropdown--light.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-dropdown data-value
-  class="bx--dropdown bx--dropdown--light"
-  tabindex="0">
-  <li class="bx--dropdown-text">
-     Dropdown label     <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>
-  </li>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<br>
diff --git a/html/dropdown/dropdown--up-light.html b/html/dropdown/dropdown--up-light.html
deleted file mode 100644
index 57efa0508702..000000000000
--- a/html/dropdown/dropdown--up-light.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-dropdown data-value
-  class="bx--dropdown bx--dropdown--up bx--dropdown--light"
-  tabindex="0">
-  <li class="bx--dropdown-text">
-     Dropdown label     <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>
-  </li>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<br>
diff --git a/html/dropdown/dropdown--up.html b/html/dropdown/dropdown--up.html
deleted file mode 100644
index a5be1358222f..000000000000
--- a/html/dropdown/dropdown--up.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-dropdown data-value
-  class="bx--dropdown bx--dropdown--up"
-  tabindex="0">
-  <li class="bx--dropdown-text">
-     Dropdown label     <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>
-  </li>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<br>
diff --git a/html/dropdown/dropdown.html b/html/dropdown/dropdown.html
deleted file mode 100644
index 9c265cdc6214..000000000000
--- a/html/dropdown/dropdown.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-dropdown data-value
-  class="bx--dropdown"
-  tabindex="0">
-  <li class="bx--dropdown-text">
-     Dropdown label     <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>
-  </li>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<br>
diff --git a/html/fab/fab.html b/html/fab/fab.html
deleted file mode 100644
index de3d8fe13c20..000000000000
--- a/html/fab/fab.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<a href="#" data-fab data-state="open" class="bx--fab" role="button" alt="Show Content">
-  <svg class="bx--fab__svg" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <polygon class="bx--fab__hexagon" fill-rule="evenodd" points="36 0 67.1769145 18 67.1769145 54 36 72 4.82308546 54 4.82308546 18 "></polygon>
-    <path class="bx--fab__plus-icon" stroke-width="1" d="M35.08,34.992 L26.98,34.992 L26.98,36.9 L35.08,36.9 L35.08,45 L36.988,45 L36.988,36.9 L45.088,36.9 L45.088,34.992 L36.988,34.992 L36.988,26.892 L35.08,26.892 L35.08,34.992 Z"></path>
-  </svg>
-  <span class="bx--fab__hidden">show content</span>
-</a>
diff --git a/html/file-uploader/file-uploader--example-upload-states.html b/html/file-uploader/file-uploader--example-upload-states.html
deleted file mode 100644
index 5f2e0e4bed71..000000000000
--- a/html/file-uploader/file-uploader--example-upload-states.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <strong class="bx--label">Account
-    photo</strong>
-  <p class="bx--label-description">only .jpg and .png files. 500kb max file size.</p>
-  <div class="bx--file" data-file>
-    <label for="your-file-importer-id-here"
-      class="bx--file-btn bx--btn bx--btn--primary bx--btn--sm"
-      role="button" tabindex="0">Add file</label>
-    <input type="file" class="bx--file-input" id="your-file-importer-id-here" data-file-uploader
-      data-target="[data-file-container]" multiple />
-    <di data-file-container class="bx--file-container">
-      <div class="bx--file__selected-file">
-        <p class="bx--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
-          sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
-          veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
-        <span data-for="your-file-importer-id-here" class="bx--file__state-container">
-        </span>
-      </div>
-      <div class="bx--file__selected-file--invalid__wrapper">
-        <div class="bx--file__selected-file bx--file__selected-file--invalid" data-invalid>
-          <p class="bx--file-filename">color.jpeg</p>
-          <span data-for="your-file-importer-id-here" class="bx--file__state-container">
-          </span>
-        </div>
-      </div>
-      <div class="bx--file__selected-file">
-        <p class="bx--file-filename">color.jpeg</p>
-        <span data-for="your-file-importer-id-here" class="bx--file__state-container">
-        </span>
-      </div>
-  </div>
-</div>
diff --git a/html/file-uploader/file-uploader.html b/html/file-uploader/file-uploader.html
deleted file mode 100644
index 58768d9acffc..000000000000
--- a/html/file-uploader/file-uploader.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <strong class="bx--label">Account
-    photo</strong>
-  <p class="bx--label-description">only .jpg and .png files. 500kb max file size.</p>
-  <div class="bx--file" data-file>
-    <label for="your-file-importer-id-here"
-      class="bx--file-btn bx--btn bx--btn--primary bx--btn--sm"
-      role="button" tabindex="0">Add file</label>
-    <input type="file" class="bx--file-input" id="your-file-importer-id-here" data-file-uploader
-      data-target="[data-file-container]" multiple />
-    <di data-file-container class="bx--file-container">
-  </div>
-</div>
diff --git a/html/footer/footer.html b/html/footer/footer.html
deleted file mode 100644
index 201239aee6e9..000000000000
--- a/html/footer/footer.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<footer class="bx--footer bx--footer--bottom-fixed" role="contentinfo">
-  <div class="bx--footer-info">
-      <div class="bx--footer-info__item">
-        <p class="bx--footer-label">Need Help?</p>
-        <a class="bx--link" href="#">Contact Bluemix SalesContact Bluemix Sales</a>
-      </div>
-      <div class="bx--footer-info__item">
-        <p class="bx--footer-label">Estimate Monthly Cost</p>
-        <a class="bx--link" href="#">Cost CalculatorContact Bluemix Sales</a>
-      </div>
-  </div>
-  <div class="bx--footer-cta">
-    <button class="bx--btn bx--btn--primary" type="submit">Create</button>
-  </div>
-</footer>
diff --git a/html/form/form--light.html b/html/form/form--light.html
deleted file mode 100644
index e00229d54fa7..000000000000
--- a/html/form/form--light.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-    <input id="text-input-3" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
-    <label for="text-input-3" class="bx--label">Text Input label</label>
-</div>
-<div class="bx--form-item">
-    <textarea id="text-area-2" class="bx--text-area bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-    <label for="text-area-2" class="bx--label">Text Area label</label>
-</div>
-<div class="bx--form-item">
-  <div class="bx--select bx--select--light">
-    <select id="select-id" class="bx--select-input">
-          <option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
-          <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
-          <optgroup class="bx--select-optgroup" label="Category 1">
-              <option class="bx--select-option" value="option1">Option 1</option>
-              <option class="bx--select-option" value="option2">Option 2</option>
-          </optgroup>
-          <optgroup class="bx--select-optgroup" label="Category 2">
-              <option class="bx--select-option" value="option1">Option 1</option>
-              <option class="bx--select-option" value="option2">Option 2</option>
-          </optgroup>
-    </select>
-      <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>
-      <label for="select-id" class="bx--label">Select label</label>
-  </div>
-</div>
-<div class="bx--form-item">
-  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
-</div>
diff --git a/html/form/form.html b/html/form/form.html
deleted file mode 100644
index f5fd7efedb97..000000000000
--- a/html/form/form.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-    <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text">
-    <label for="text-input-3" class="bx--label">Text Input label</label>
-</div>
-<div class="bx--form-item">
-    <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-    <label for="text-area-2" class="bx--label">Text Area label</label>
-</div>
-<div class="bx--form-item">
-  <div class="bx--select">
-    <select id="select-id" class="bx--select-input">
-          <option class="bx--select-option" value="" disabled selected hidden>Choose an option</option>
-          <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
-          <optgroup class="bx--select-optgroup" label="Category 1">
-              <option class="bx--select-option" value="option1">Option 1</option>
-              <option class="bx--select-option" value="option2">Option 2</option>
-          </optgroup>
-          <optgroup class="bx--select-optgroup" label="Category 2">
-              <option class="bx--select-option" value="option1">Option 1</option>
-              <option class="bx--select-option" value="option2">Option 2</option>
-          </optgroup>
-    </select>
-      <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>
-      <label for="select-id" class="bx--label">Select label</label>
-  </div>
-</div>
-<div class="bx--form-item">
-  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
-</div>
diff --git a/html/grid/grid--16.html b/html/grid/grid--16.html
deleted file mode 100644
index 965b471af6ee..000000000000
--- a/html/grid/grid--16.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-xs-12 bx--col-sm-6 indigo">
-      <div class="bx--row">
-        <div class="bx--col-xs-12 bx--col-sm-6">
-          <div class="col-example">
-            <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
-          </div>
-        </div>
-        <div class="bx--col-xs-12 bx--col-sm-6 green">
-          <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
-            the column directly will effect the entire column, as opposed to using a child element in the example to the
-            left). </p>
-        </div>
-      </div>
-
-      <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
-    </div>
-    <div class="bx--col-xs-12 bx--col-sm-6 red">
-      <p>Background color over entire column, not just content space</p>
-    </div>
-    <div class="bx--row">
-      <div class="bx--offset-xs-2 bx--col-xs-10">This content is offset. Offset adds a left-margin for x columns.</div>
-    </div>
-  </div>
-</div>
diff --git a/html/grid/grid.html b/html/grid/grid.html
deleted file mode 100644
index 965b471af6ee..000000000000
--- a/html/grid/grid.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-xs-12 bx--col-sm-6 indigo">
-      <div class="bx--row">
-        <div class="bx--col-xs-12 bx--col-sm-6">
-          <div class="col-example">
-            <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
-          </div>
-        </div>
-        <div class="bx--col-xs-12 bx--col-sm-6 green">
-          <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
-            the column directly will effect the entire column, as opposed to using a child element in the example to the
-            left). </p>
-        </div>
-      </div>
-
-      <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
-    </div>
-    <div class="bx--col-xs-12 bx--col-sm-6 red">
-      <p>Background color over entire column, not just content space</p>
-    </div>
-    <div class="bx--row">
-      <div class="bx--offset-xs-2 bx--col-xs-10">This content is offset. Offset adds a left-margin for x columns.</div>
-    </div>
-  </div>
-</div>
diff --git a/html/inline-loading/inline-loading.html b/html/inline-loading/inline-loading.html
deleted file mode 100644
index a76fb0b402b2..000000000000
--- a/html/inline-loading/inline-loading.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Loading Success State -->
-<div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
-  <div class="bx--inline-loading__animation">
-    <div data-inline-loading-spinner class="bx--loading bx--loading--small">
-      <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-        <circle  cx="0" cy="0" r="37.5" />
-      </svg>
-    </div>
-    <svg data-inline-loading-finished hidden class="bx--inline-loading__checkmark-container bx--inline-loading__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
-      <polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
-    </svg>
-  </div>
-  <p data-inline-loading-text-active class="bx--inline-loading__text">Loading data...</p>
-  <p data-inline-loading-text-finished hidden class="bx--inline-loading__text">Data loaded.</p>
-</div>
-  <button data-inline-loading-demo-button class="bx--btn bx--btn--primary">Toggle state</button>
diff --git a/html/lightbox/lightbox.html b/html/lightbox/lightbox.html
deleted file mode 100644
index 4647918ea339..000000000000
--- a/html/lightbox/lightbox.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#lightbox" data-carousel-item-index="0">Open Lightbox</button>
-
-<div id="lightbox" class="bx--modal" data-modal>
-  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
-    <div class="bx--lightbox__main">
-      <button class="bx--lightbox__btn" data-scroll-left>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;/0" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;1" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;2" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;3" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;4" class="bx--lightbox__item">
-        <img src="http://via.placeholder.com/1056x594?text&#x3D;5" class="bx--lightbox__item">
-      <button class="bx--lightbox__btn" data-scroll-right>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="bx--lightbox__footer">
-      <div class="bx--filmstrip">
-          <button class="bx--carousel__item" data-carousel-item-index="0">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;/0">
-          </button>
-          <button class="bx--carousel__item" data-carousel-item-index="1">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;1">
-          </button>
-          <button class="bx--carousel__item" data-carousel-item-index="2">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;2">
-          </button>
-          <button class="bx--carousel__item" data-carousel-item-index="3">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;3">
-          </button>
-          <button class="bx--carousel__item" data-carousel-item-index="4">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;4">
-          </button>
-          <button class="bx--carousel__item" data-carousel-item-index="5">
-            <img src="http://via.placeholder.com/256x144?text&#x3D;5">
-          </button>
-      </div>
-      <div class="bx--filmstrip-indicator-ctn">
-        <div class="bx--filmstrip-indicator bx--filmstrip-indicator--active"></div>
-        <div class="bx--filmstrip-indicator"></div>
-        <div class="bx--filmstrip-indicator"></div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/html/link/link.html b/html/link/link.html
deleted file mode 100644
index 8651ead090c6..000000000000
--- a/html/link/link.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<a href="#" class="bx--link">Link</a>
-<a class="bx--link">Placeholder link</a>
-<p class="bx--link--disabled">Disabled Link</p>
-<br>
-<a href="#" class="bx--link">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti explicabo
-  nobis consequatur quod qui quam laboriosam placeat repudiandae. Ducimus ea aut omnis asperiores mollitia
-  necessitatibus architecto temporibus provident quo? Repellat!</a>
diff --git a/html/list-box/list-box--inline.html b/html/list-box/list-box--inline.html
deleted file mode 100644
index 8b9c758c6504..000000000000
--- a/html/list-box/list-box--inline.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-          <title>Open menu</title>
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-      <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/html/list-box/list-box--light.html b/html/list-box/list-box--light.html
deleted file mode 100644
index 4eec2f8630d8..000000000000
--- a/html/list-box/list-box--light.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--list-box bx--list-box--light">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-          <title>Open menu</title>
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--list-box bx--list-box--light">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-      <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/html/list-box/list-box.html b/html/list-box/list-box.html
deleted file mode 100644
index 51eca5e0c820..000000000000
--- a/html/list-box/list-box.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-          <title>Open menu</title>
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-      <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
-      <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/html/list/list--ordered.html b/html/list/list--ordered.html
deleted file mode 100644
index 9df5f7c14dbf..000000000000
--- a/html/list/list--ordered.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ol class="bx--list--ordered">
-  <li class="bx--list__item">Ordered List level 1
-    <ol class="bx--list--nested">
-      <li class="bx--list__item">Ordered List level 2</li>
-      <li class="bx--list__item">Ordered List level 2</li>
-    </ol>
-  </li>
-  <li class="bx--list__item">Ordered List level 1</li>
-  <li class="bx--list__item">Ordered List level 1</li>
-</ol>
diff --git a/html/list/list.html b/html/list/list.html
deleted file mode 100644
index 0e425c83c475..000000000000
--- a/html/list/list.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul class="bx--list--unordered">
-  <li class="bx--list__item">Unordered List level 1
-    <ul class="bx--list--nested">
-      <li class="bx--list__item">Unordered List level 2</li>
-      <li class="bx--list__item">Unordered List level 2</li>
-    </ul>
-  </li>
-  <li class="bx--list__item">Unordered List level 1</li>
-  <li class="bx--list__item">Unordered List level 1</li>
-</ul>
diff --git a/html/loading/loading--small.html b/html/loading/loading--small.html
deleted file mode 100644
index f9199209311d..000000000000
--- a/html/loading/loading--small.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<div data-loading class="bx--loading bx--loading--small">
-  <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-    <title>Loading</title>
-    <circle  cx="0" cy="0" r="37.5" />
-  </svg>
-</div>
diff --git a/html/loading/loading--without-overlay.html b/html/loading/loading--without-overlay.html
deleted file mode 100644
index 3a86b6305795..000000000000
--- a/html/loading/loading--without-overlay.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<div data-loading class="bx--loading">
-  <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-    <title>Loading</title>
-    <circle  cx="0" cy="0" r="37.5" />
-  </svg>
-</div>
diff --git a/html/loading/loading.html b/html/loading/loading.html
deleted file mode 100644
index 52b07c353587..000000000000
--- a/html/loading/loading.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--loading-overlay">
-<div data-loading class="bx--loading">
-  <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-    <title>Loading</title>
-    <circle  cx="0" cy="0" r="37.5" />
-  </svg>
-</div>
-</div>
\ No newline at end of file
diff --git a/html/modal/modal--danger.html b/html/modal/modal--danger.html
deleted file mode 100644
index ae29ac64e21a..000000000000
--- a/html/modal/modal--danger.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button class="bx--btn bx--btn--danger--primary" type="button" data-modal-target="#modal-s9b61g0xh3">Show
-  modal</button>
-
-<div data-modal id="modal-s9b61g0xh3" class="bx--modal bx--modal--danger" role="dialog"
-  aria-modal="true" aria-labelledby="modal-s9b61g0xh3-label" aria-describedby="modal-s9b61g0xh3-heading" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta" id="modal-s9b61g0xh3-label">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta" id="modal-s9b61g0xh3-heading">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
-          <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" fill-rule="nonzero"
-            />
-          </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
-        vitae
-        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
-        facilisi.
-        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-    </div>
-
-    <div class="bx--modal-footer">
-      <button class="bx--btn bx--btn--tertiary" type="button" data-modal-close>Secondary button</button>
-      <button class="bx--btn bx--btn--danger--primary" type="button"  aria-label="Danger"
-          data-modal-primary-focus>Primary button</button> </div>  </div>
-        </div>
diff --git a/html/modal/modal--input.html b/html/modal/modal--input.html
deleted file mode 100644
index 83afc5f38382..000000000000
--- a/html/modal/modal--input.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-394xz3blx9r">Show
-  modal</button>
-
-<div data-modal id="modal-394xz3blx9r" class="bx--modal " role="dialog"
-  aria-modal="true" aria-labelledby="modal-394xz3blx9r-label" aria-describedby="modal-394xz3blx9r-heading" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta" id="modal-394xz3blx9r-label">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta" id="modal-394xz3blx9r-heading">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
-          <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" fill-rule="nonzero"
-            />
-          </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <div class="bx--form-item">
-        <label for="text-input-394xz3blx9r" class="bx--label">Text Input label</label>
-        <input id="text-input-394xz3blx9r" type="text" class="bx--text-input" placeholder="Optional placeholder text"
-          data-modal-primary-focus>
-      </div>
-    </div>
-
-    <div class="bx--modal-footer">
-      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
-      <button class="bx--btn bx--btn--primary" type="button"  >Primary button</button> </div>  </div>
-        </div>
diff --git a/html/modal/modal--nofooter.html b/html/modal/modal--nofooter.html
deleted file mode 100644
index 0832744eda05..000000000000
--- a/html/modal/modal--nofooter.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-g79i34o9oji">Show
-  modal</button>
-
-<div data-modal id="modal-g79i34o9oji" class="bx--modal " role="dialog"
-  aria-modal="true" aria-labelledby="modal-g79i34o9oji-label" aria-describedby="modal-g79i34o9oji-heading" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta" id="modal-g79i34o9oji-label">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta" id="modal-g79i34o9oji-heading">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal"  data-modal-primary-focus>
-          <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" fill-rule="nonzero"
-            />
-          </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
-        vitae
-        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
-        facilisi.
-        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-    </div>
-
- </div>
-        </div>
diff --git a/html/modal/modal.html b/html/modal/modal.html
deleted file mode 100644
index 3801e0325f1c..000000000000
--- a/html/modal/modal.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-pzxs7yvmht">Show
-  modal</button>
-
-<div data-modal id="modal-pzxs7yvmht" class="bx--modal " role="dialog"
-  aria-modal="true" aria-labelledby="modal-pzxs7yvmht-label" aria-describedby="modal-pzxs7yvmht-heading" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta" id="modal-pzxs7yvmht-label">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta" id="modal-pzxs7yvmht-heading">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
-          <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" fill-rule="nonzero"
-            />
-          </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
-        vitae
-        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
-        facilisi.
-        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-    </div>
-
-    <div class="bx--modal-footer">
-      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
-      <button class="bx--btn bx--btn--primary" type="button"   data-modal-primary-focus>Primary button</button> </div>  </div>
-        </div>
diff --git a/html/multi-select/multi-select--inline.html b/html/multi-select/multi-select--inline.html
deleted file mode 100644
index b179ec64857a..000000000000
--- a/html/multi-select/multi-select--inline.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--multi-select bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false"
-    aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--multi-select bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true"
-    aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-    </div>
-  </div>
-  <fieldset class="bx--list-box__menu">
-    <legend class="bx--assistive-text">Description of form elements within the fieldset</legend>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 1" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-0" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 1</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 2" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-1" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 2</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 3" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-2" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 3</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 4" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-3" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 4</span>
-        </label>
-      </div>
-    </div>
-  </fieldset>
-</div>
diff --git a/html/multi-select/multi-select.html b/html/multi-select/multi-select.html
deleted file mode 100644
index a519c016c33d..000000000000
--- a/html/multi-select/multi-select.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item bx--multi-select bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false"
-    aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--multi-select bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true"
-    aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
-    </div>
-  </div>
-  <fieldset class="bx--list-box__menu">
-    <legend class="bx--assistive-text">Description of form elements within the fieldset</legend>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 1" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-0" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 1</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 2" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-1" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 2</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 3" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-2" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 3</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label title="Option 4" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-3" value="on">
-          <span class="bx--checkbox-appearance"></span>
-          <span class="bx--checkbox-label-text">Option 4</span>
-        </label>
-      </div>
-    </div>
-  </fieldset>
-</div>
diff --git a/html/notification/inline-notification.html b/html/notification/inline-notification.html
deleted file mode 100644
index 6a7a92fe55ca..000000000000
--- a/html/notification/inline-notification.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert">
-  <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1-3V7H7v6h2zM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
-      </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
-  <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z" fill-rule="evenodd" />
-      </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
-  <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-11.332L6.75 9.21 4.707 7.168 3.293 8.582 6.75 12.04l5.957-5.957-1.414-1.414z"></path>
-      </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
-  <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M.75 16a.75.75 0 0 1-.67-1.085L7.33.415a.75.75 0 0 1 1.34 0l7.25 14.5A.75.75 0 0 1 15.25 16H.75zm6.5-10v5h1.5V6h-1.5zM8 13.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0 1.5z"></path>
-      </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--inline-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
diff --git a/html/notification/toast-notification.html b/html/notification/toast-notification.html
deleted file mode 100644
index 4faca79fc041..000000000000
--- a/html/notification/toast-notification.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-notification class="bx--toast-notification bx--toast-notification--info" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--toast-notification bx--toast-notification--success" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Our goal is to become better at our craft and raise our collective knowledge by sharing experiences, best practices, what we have recently learned or what we are working on.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
-<div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
-      <svg aria-hidden="true" class="bx--toast-notification__close-icon" width="10" height="10" viewBox="0 0 10 10"
-        xmlns="http://www.w3.org/2000/svg">
-        <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"
-          fill-rule="nonzero" />
-      </svg>
-  </button>
-</div>
diff --git a/html/number-input/number-input--light.html b/html/number-input/number-input--light.html
deleted file mode 100644
index c5ddba37e17f..000000000000
--- a/html/number-input/number-input--light.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div data-numberinput class="
-    bx--number
-     bx--number--light 
-  ">
-    <label for="number-input0" class="bx--label">Number input label</label>
-    <div class="bx--number__input-wrapper">
-      <input id="number-input0" type="number" min="0" max="100" value="1">
-      <div class="bx--number__controls">
-        <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-          aria-live="polite" aria-atomic="true">
-          <svg width="10" height="5" viewBox="0 0 10 5">
-            <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-          </svg>
-        </button>
-        <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-          aria-live="polite" aria-atomic="true">
-          <svg width="10" height="5" viewBox="0 0 10 5">
-            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-     bx--number--light 
-  ">
-    <label for="number-input1" class="bx--label">Number input label</label>
-    <input id="number-input1" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-     bx--number--light
-    bx--number--nolabel
-  ">
-    <input id="number-input2" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-numberinput class="
-    bx--number
-     bx--number--light 
-    bx--number--helpertext
-  ">
-    <label for="number-input3" class="bx--label">Number input label</label>
-    <input id="number-input3" type="number" min="0" max="100" value="1">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-     bx--number--light 
-    bx--number--helpertext
-  ">
-    <label for="number-input4" class="bx--label">Number input label</label>
-    <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-     bx--number--light 
-    bx--number--helpertext
-  ">
-    <label for="number-input5" class="bx--label">Number input label</label>
-    <input id="number-input5" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
diff --git a/html/number-input/number-input.html b/html/number-input/number-input.html
deleted file mode 100644
index d428a3feec3a..000000000000
--- a/html/number-input/number-input.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div data-numberinput class="
-    bx--number
-    
-  ">
-    <label for="number-input0" class="bx--label">Number input label</label>
-    <div class="bx--number__input-wrapper">
-      <input id="number-input0" type="number" min="0" max="100" value="1">
-      <div class="bx--number__controls">
-        <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-          aria-live="polite" aria-atomic="true">
-          <svg width="10" height="5" viewBox="0 0 10 5">
-            <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-          </svg>
-        </button>
-        <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-          aria-live="polite" aria-atomic="true">
-          <svg width="10" height="5" viewBox="0 0 10 5">
-            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-    
-  ">
-    <label for="number-input1" class="bx--label">Number input label</label>
-    <input id="number-input1" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-    
-    bx--number--nolabel
-  ">
-    <input id="number-input2" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-numberinput class="
-    bx--number
-    
-    bx--number--helpertext
-  ">
-    <label for="number-input3" class="bx--label">Number input label</label>
-    <input id="number-input3" type="number" min="0" max="100" value="1">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-    
-    bx--number--helpertext
-  ">
-    <label for="number-input4" class="bx--label">Number input label</label>
-    <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div data-invalid data-numberinput class="
-    bx--number
-    
-    bx--number--helpertext
-  ">
-    <label for="number-input5" class="bx--label">Number input label</label>
-    <input id="number-input5" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
-    <div class="bx--number__controls">
-      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
-        </svg>
-      </button>
-      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
-        aria-live="polite" aria-atomic="true">
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="bx--form-requirement">
-      Invalid number
-    </div>
-    <div class="bx--form__helper-text">
-      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-    </div>
-  </div>
-</div>
diff --git a/html/overflow-menu/overflow-menu--up.html b/html/overflow-menu/overflow-menu--up.html
deleted file mode 100644
index efff78f66171..000000000000
--- a/html/overflow-menu/overflow-menu--up.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
-  aria-haspopup="true" aria-expanded="false">
-  <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" />
-      <circle cx="1.5" cy="13.5" r="1.5" />
-    </g>
-  </svg>
-  <ul class="bx--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"
-    data-floating-menu-direction="top">
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
-          data-floating-menu-primary-focus  >An example option that is really long to show what should be done to handle long text</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 2</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 3</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 4</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  "
-      role="presentation"  aria-disabled="true" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"    tabindex="-1"
-        >Disabled</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Danger option</button>
-    </li>
-  </ul>
-</div>
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
-  aria-haspopup="true" aria-expanded="false">
-  <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" />
-      <circle cx="1.5" cy="13.5" r="1.5" />
-    </g>
-  </svg>
-  <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-    data-floating-menu-direction="top" role="menu" aria-label="Overflow">
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
-          data-floating-menu-primary-focus  >An example option that is really long to show what should be done to handle long text</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 2</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 3</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 4</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  "
-      role="presentation"  aria-disabled="true" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"    tabindex="-1"
-        >Disabled</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Danger option</button>
-    </li>
-  </ul>
-</div>
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button" aria-haspopup="true"
-  aria-expanded="false">
-    <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" />
-        <circle cx="1.5" cy="13.5" r="1.5" />
-      </g>
-    </svg>
-  <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" data-floating-menu-direction="top"
-    role="menu" aria-label="Overflow">
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text" 
-         data-floating-menu-primary-focus>An example option that is really long to show what should be done to handle long text</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 2</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 3</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 4</a>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-         tabindex="-1" >Disabled</a>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Danger option</a>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
diff --git a/html/overflow-menu/overflow-menu.html b/html/overflow-menu/overflow-menu.html
deleted file mode 100644
index 21542c2e13ed..000000000000
--- a/html/overflow-menu/overflow-menu.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
-  aria-haspopup="true" aria-expanded="false">
-  <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" />
-      <circle cx="1.5" cy="13.5" r="1.5" />
-    </g>
-  </svg>
-  <ul class="bx--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"
-    data-floating-menu-direction="bottom">
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
-          data-floating-menu-primary-focus  >An example option that is really long to show what should be done to handle long text</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 2</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 3</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 4</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  "
-      role="presentation"  aria-disabled="true" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"    tabindex="-1"
-        >Disabled</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Danger option</button>
-    </li>
-  </ul>
-</div>
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button"
-  aria-haspopup="true" aria-expanded="false">
-  <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" />
-      <circle cx="1.5" cy="13.5" r="1.5" />
-    </g>
-  </svg>
-  <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-    data-floating-menu-direction="bottom" role="menu" aria-label="Overflow">
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
-          data-floating-menu-primary-focus  >An example option that is really long to show what should be done to handle long text</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 2</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 3</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Option 4</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  "
-      role="presentation"  aria-disabled="true" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"    tabindex="-1"
-        >Disabled</button>
-    </li>
-    <li
-      class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger "
-      role="presentation" >
-      <button class="bx--overflow-menu-options__btn" role="menuitem"   >Danger option</button>
-    </li>
-  </ul>
-</div>
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow" class="bx--overflow-menu" role="button" aria-haspopup="true"
-  aria-expanded="false">
-    <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" />
-        <circle cx="1.5" cy="13.5" r="1.5" />
-      </g>
-    </svg>
-  <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1" data-floating-menu-direction="bottom"
-    role="menu" aria-label="Overflow">
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text" 
-         data-floating-menu-primary-focus>An example option that is really long to show what should be done to handle long text</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 2</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 3</a>
-    </li>
-    <li class="bx--overflow-menu-options__option"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Option 4</a>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-         tabindex="-1" >Disabled</a>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"
-      role="presentation">
-      <a href="https://www.ibm.com"  class="bx--overflow-menu-options__btn" role="menuitem" 
-        >Danger option</a>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
diff --git a/html/pagination-nav/pagination-nav--default--as-anchor.html b/html/pagination-nav/pagination-nav--default--as-anchor.html
deleted file mode 100644
index 488ebad5566b..000000000000
--- a/html/pagination-nav/pagination-nav--default--as-anchor.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
-  <ul class="bx--pagination-nav__list">
-      <li class="bx--pagination-nav__list-item">
-          <a
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction bx--pagination-nav__page--disabled"
-            data-page-previous
-            href="javascript:void(0)"
-              aria-disabled="true"
-          >
-          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M0 5l5-5 .7.7L1.4 5l4.3 4.3-.7.7z"></path></svg>
-          </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <a
-              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
-              data-page="1"
-              data-page-button
-              href="javascript:void(0)"
-                data-page-active="true"
-                aria-current="page"
-                aria-disabled="true"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>1
-            </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <a
-              class="bx--pagination-nav__page"
-              data-page="2"
-              data-page-button
-              href="javascript:void(0)"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>2
-            </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <a
-              class="bx--pagination-nav__page"
-              data-page="3"
-              data-page-button
-              href="javascript:void(0)"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>3
-            </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <a
-              class="bx--pagination-nav__page"
-              data-page="4"
-              data-page-button
-              href="javascript:void(0)"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>4
-            </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <a
-              class="bx--pagination-nav__page"
-              data-page="5"
-              data-page-button
-              href="javascript:void(0)"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>5
-            </a>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-          <a
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
-            data-page-next
-            href="javascript:void(0)"
-          >
-          <span class="bx--pagination-nav__accessibility-label">Next page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M6 5l-5 5-.7-.7L4.6 5 .3.7 1 0z"></path></svg>
-          </a>
-      </li>
-  </ul>
-</nav>
diff --git a/html/pagination-nav/pagination-nav--default--with-select.html b/html/pagination-nav/pagination-nav--default--with-select.html
deleted file mode 100644
index 9e640999dfeb..000000000000
--- a/html/pagination-nav/pagination-nav--default--with-select.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
-  <ul class="bx--pagination-nav__list">
-      <li class="bx--pagination-nav__list-item">
-          <button
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction "
-            data-page-previous
-          >
-          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M0 5l5-5 .7.7L1.4 5l4.3 4.3-.7.7z"></path></svg>
-          </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="1"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>1
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="2"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>2
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
-              data-page="3"
-              data-page-button
-                data-page-active="true"
-                aria-current="page"
-                aria-disabled="true"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>3
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="4"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>4
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="5"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>5
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-          <div class="bx--pagination-nav__select">
-            <select
-              class="bx--pagination-nav__page bx--pagination-nav__page--select"
-              data-page-select
-              aria-label="select page number"
-            >
-                <option
-                  value=""
-                    hidden
-                >
-                  
-                </option>
-                <option
-                  value="6"
-                    data-page="6"
-                >
-                  6
-                </option>
-                <option
-                  value="7"
-                    data-page="7"
-                >
-                  7
-                </option>
-                <option
-                  value="8"
-                    data-page="8"
-                >
-                  8
-                </option>
-                <option
-                  value="9"
-                    data-page="9"
-                >
-                  9
-                </option>
-            </select>
-            <div class="bx--pagination-nav__select-icon-wrapper">
-              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__select-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="3" cy="8" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="13" cy="8" r="1"></circle></svg>
-            </div>
-          </div>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="10"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>10
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-          <button
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
-            data-page-next
-          >
-          <span class="bx--pagination-nav__accessibility-label">Next page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M6 5l-5 5-.7-.7L4.6 5 .3.7 1 0z"></path></svg>
-          </button>
-      </li>
-  </ul>
-</nav>
diff --git a/html/pagination-nav/pagination-nav.html b/html/pagination-nav/pagination-nav.html
deleted file mode 100644
index 2a3e230b7ac2..000000000000
--- a/html/pagination-nav/pagination-nav.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
-  <ul class="bx--pagination-nav__list">
-      <li class="bx--pagination-nav__list-item">
-          <button
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction  bx--pagination-nav__page--disabled"
-            data-page-previous
-              aria-disabled="true"
-          >
-          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M0 5l5-5 .7.7L1.4 5l4.3 4.3-.7.7z"></path></svg>
-          </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
-              data-page="1"
-              data-page-button
-                data-page-active="true"
-                aria-current="page"
-                aria-disabled="true"
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>1
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="2"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>2
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="3"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>3
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="4"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>4
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-            <button
-              class="bx--pagination-nav__page"
-              data-page="5"
-              data-page-button
-            >
-            <span class="bx--pagination-nav__accessibility-label">page </span>5
-            </button>
-      </li>
-      <li class="bx--pagination-nav__list-item">
-          <button
-            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
-            data-page-next
-          >
-          <span class="bx--pagination-nav__accessibility-label">Next page </span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M6 5l-5 5-.7-.7L4.6 5 .3.7 1 0z"></path></svg>
-          </button>
-      </li>
-  </ul>
-</nav>
diff --git a/html/pagination/pagination--v2-disabled-pagination-buttons.html b/html/pagination/pagination--v2-disabled-pagination-buttons.html
deleted file mode 100644
index 8d548fb4b864..000000000000
--- a/html/pagination/pagination--v2-disabled-pagination-buttons.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-  <div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" id="select-id-pagination-label" class="bx--pagination__text">Items per page: </label>
-      <select id="select-id-pagination" aria-label="select number of items per page" class="bx--select-input" data-items-per-page>
-          <option class="bx--select-option" value="10">10</option>
-      </select>
-        <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>
-    </div>
-    <span class="bx--pagination__text">
-        <span>|&nbsp;</span>
-      <span data-displayed-item-range>1-10</span> of
-      <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right bx--pagination--inline">
-    <span class="bx--pagination__text">
-      <span data-displayed-page-number>1</span> of
-      <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
-          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"/>
-        </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-      <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" class="bx--visually-hidden">Page number</label>
-        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
-            <option class="bx--select-option" value="1">1</option>
-        </select>
-          <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>
-      </div>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-        <svg class="bx--pagination__button-icon" 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"/>
-        </svg>
-    </button>
-  </div>
-</div>
diff --git a/html/pagination/pagination--v2.html b/html/pagination/pagination--v2.html
deleted file mode 100644
index 438aa6ac1fb3..000000000000
--- a/html/pagination/pagination--v2.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-  <div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" id="select-id-pagination-label" class="bx--pagination__text">Items per page: </label>
-      <select id="select-id-pagination" aria-label="select number of items per page" class="bx--select-input" data-items-per-page>
-          <option class="bx--select-option" value="10">10</option>
-          <option class="bx--select-option" value="20">20</option>
-          <option class="bx--select-option" value="30">30</option>
-          <option class="bx--select-option" value="40">40</option>
-          <option class="bx--select-option" value="50">50</option>
-      </select>
-        <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>
-    </div>
-    <span class="bx--pagination__text">
-        <span>|&nbsp;</span>
-      <span data-displayed-item-range>1-10</span> of
-      <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right bx--pagination--inline">
-    <span class="bx--pagination__text">
-      <span data-displayed-page-number>1</span> of
-      <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
-          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"/>
-        </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-      <div class="bx--select bx--select--inline">
-        <label for="select-id-pagination" class="bx--visually-hidden">Page number</label>
-        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
-            <option class="bx--select-option" value="1">1</option>
-            <option class="bx--select-option" value="2">2</option>
-            <option class="bx--select-option" value="3">3</option>
-            <option class="bx--select-option" value="4">4</option>
-            <option class="bx--select-option" value="5">5</option>
-        </select>
-          <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>
-      </div>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-        <svg class="bx--pagination__button-icon" 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"/>
-        </svg>
-    </button>
-  </div>
-</div>
diff --git a/html/pagination/pagination.html b/html/pagination/pagination.html
deleted file mode 100644
index 9f2c1678d719..000000000000
--- a/html/pagination/pagination.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-  <div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <div class="bx--select">
-      <select id="select-id-pagination" aria-label="select number of items per page" class="bx--select-input" data-items-per-page>
-          <option class="bx--select-option" value="10">10</option>
-          <option class="bx--select-option" value="20">20</option>
-          <option class="bx--select-option" value="30">30</option>
-          <option class="bx--select-option" value="40">40</option>
-          <option class="bx--select-option" value="50">50</option>
-      </select>
-        <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>
-    </div>
-      <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-    <span class="bx--pagination__text">
-      <span data-displayed-item-range>1-10</span> of
-      <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right">
-    <span class="bx--pagination__text">
-      <span data-displayed-page-number>1</span> of
-      <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
-          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"/>
-        </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-      <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-        <svg class="bx--pagination__button-icon" 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"/>
-        </svg>
-    </button>
-  </div>
-</div>
diff --git a/html/progress-indicator/progress-indicator--vertical.html b/html/progress-indicator/progress-indicator--vertical.html
deleted file mode 100644
index fecabc9698cc..000000000000
--- a/html/progress-indicator/progress-indicator--vertical.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-progress data-progress-current class="bx--progress bx--progress--vertical">
-    <li class="bx--progress-step bx--progress-step--complete "  >
-        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path></svg>
-      <p tabindex="0" class="bx--progress-label" >
-          First step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--current "  >
-        <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-            <circle cx="12" cy="12" r="6"></circle>
-        </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Second Step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete "  >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Third Step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete "  data-invalid  >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Fourth step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete  bx--progress-step--disabled "   aria-disabled="true" >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Fifth step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-</ul>
diff --git a/html/progress-indicator/progress-indicator.html b/html/progress-indicator/progress-indicator.html
deleted file mode 100644
index 95c63ea97a7e..000000000000
--- a/html/progress-indicator/progress-indicator.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<ul data-progress data-progress-current class="bx--progress ">
-    <li class="bx--progress-step bx--progress-step--complete "  >
-        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path></svg>
-      <p tabindex="0" class="bx--progress-label" >
-          First step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--current "  >
-        <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-            <circle cx="12" cy="12" r="6"></circle>
-        </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Second Step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete "  >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Third Step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete "  data-invalid  >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Fourth step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-    <li class="bx--progress-step bx--progress-step--incomplete  bx--progress-step--disabled "   aria-disabled="true" >
-          <svg>
-            <circle cx="12" cy="12" r="12"></circle>
-          </svg>
-      <p tabindex="0" class="bx--progress-label" >
-          Fifth step
-      </p>
-      <span class="bx--progress-line"></span>
-    </li>
-</ul>
diff --git a/html/radio-button/radio-button--vertical.html b/html/radio-button/radio-button--vertical.html
deleted file mode 100644
index 2ef4f51110fb..000000000000
--- a/html/radio-button/radio-button--vertical.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Radio Button heading</legend>
-  <div class="bx--form-item">
-    <div class="bx--radio-button-group  bx--radio-button-group--vertical ">
-          <input id="radio-button-1" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
-          <label for="radio-button-1" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-          <input id="radio-button-2" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
-          <label for="radio-button-2" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-          <input id="radio-button-3" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
-          <label for="radio-button-3" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-    </div>
-  </div>
-</fieldset>
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Radio Button heading</legend>
-  <div class="bx--form-item">
-    <div class="bx--radio-button-group">
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-1x" class="bx--radio-button" type="radio" value="red" name="radio-button--vertical" tabindex="0" checked>
-          <label for="radio-button-1x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-2x" class="bx--radio-button" type="radio" value="green" name="radio-button--vertical" tabindex="0">
-          <label for="radio-button-2x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-3x" class="bx--radio-button" type="radio" value="blue" name="radio-button--vertical" tabindex="0" disabled>
-          <label for="radio-button-3x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-    </div>
-  </div>
-</fieldset>
diff --git a/html/radio-button/radio-button.html b/html/radio-button/radio-button.html
deleted file mode 100644
index c35fd25d2dda..000000000000
--- a/html/radio-button/radio-button.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Radio Button heading</legend>
-  <div class="bx--form-item">
-    <div class="bx--radio-button-group ">
-          <input id="radio-button-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
-          <label for="radio-button-1" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-          <input id="radio-button-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
-          <label for="radio-button-2" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-          <input id="radio-button-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
-          <label for="radio-button-3" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Radio Button label
-          </label>
-    </div>
-  </div>
-</fieldset>
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Radio Button heading</legend>
-  <div class="bx--form-item">
-    <div class="bx--radio-button-group">
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-1x" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
-          <label for="radio-button-1x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-2x" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
-          <label for="radio-button-2x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-        <div class="bx--radio-button-wrapper bx--radio-button-wrapper--label-top">
-          <input id="radio-button-3x" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
-          <label for="radio-button-3x" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            <span class="bx--radio-button__label-text">Radio Button label</span>
-          </label>
-        </div>
-    </div>
-  </div>
-</fieldset>
diff --git a/html/search/search--extra-large.html b/html/search/search--extra-large.html
deleted file mode 100644
index 84ae03abcb40..000000000000
--- a/html/search/search--extra-large.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-  <div data-search role="search" class="bx--search bx--search--xl">
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-          fill-rule="nonzero" />
-      </svg>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-      <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" />
-      </svg>
-    </button>
-  </div>
-  
diff --git a/html/search/search--large-light.html b/html/search/search--large-light.html
deleted file mode 100644
index 3c74bdc5eb00..000000000000
--- a/html/search/search--large-light.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-  <div data-search role="search" class="bx--search bx--search--lg bx--search--light">
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-          fill-rule="nonzero" />
-      </svg>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-      <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" />
-      </svg>
-    </button>
-  </div>
-  
diff --git a/html/search/search--large.html b/html/search/search--large.html
deleted file mode 100644
index 8488cd92271e..000000000000
--- a/html/search/search--large.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-  <div data-search role="search" class="bx--search bx--search--lg">
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-          fill-rule="nonzero" />
-      </svg>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-      <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" />
-      </svg>
-    </button>
-  </div>
-  
diff --git a/html/search/search--small-light.html b/html/search/search--small-light.html
deleted file mode 100644
index eb6d06a8dd25..000000000000
--- a/html/search/search--small-light.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div data-search role="search" class="bx--search bx--search--sm bx--search--light">
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-          fill-rule="nonzero" />
-      </svg>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-      <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" />
-      </svg>
-    </button>
-  </div>
-  </div>
diff --git a/html/search/search--small.html b/html/search/search--small.html
deleted file mode 100644
index 1c6bf54b9629..000000000000
--- a/html/search/search--small.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div data-search role="search" class="bx--search bx--search--sm">
-    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-1" placeholder="Search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-          fill-rule="nonzero" />
-      </svg>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-      <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" />
-      </svg>
-    </button>
-  </div>
-  </div>
diff --git a/html/select/select--helpertext.html b/html/select/select--helpertext.html
deleted file mode 100644
index 564cd52cff6b..000000000000
--- a/html/select/select--helpertext.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id" class="bx--label">Select label</label>
-    <div class="bx--form__helper-text">Optional helper text.</div>
-    <select  id="select-id" class="bx--select-input ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <div class="bx--form__helper-text">Optional helper text.</div>
-    <select  id="select-id-disabled" class="bx--select-input " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
diff --git a/html/select/select--helpertextinline.html b/html/select/select--helpertextinline.html
deleted file mode 100644
index da5dc4759fbd..000000000000
--- a/html/select/select--helpertextinline.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  id="select-id" class="bx--select-input ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form__helper-text">Optional helper text.</div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  id="select-id-disabled" class="bx--select-input " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form__helper-text">Optional helper text.</div>
-  </div>
-</div>
diff --git a/html/select/select--inline-invalid.html b/html/select/select--inline-invalid.html
deleted file mode 100644
index 68925be718ed..000000000000
--- a/html/select/select--inline-invalid.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id" class="bx--select-input  bx--select--invalid ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id-disabled" class="bx--select-input  bx--select--invalid " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
diff --git a/html/select/select--inline.html b/html/select/select--inline.html
deleted file mode 100644
index e04357787eac..000000000000
--- a/html/select/select--inline.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  id="select-id" class="bx--select-input ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--inline">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  id="select-id-disabled" class="bx--select-input " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
diff --git a/html/select/select--invalid.html b/html/select/select--invalid.html
deleted file mode 100644
index 4fac049e1e0d..000000000000
--- a/html/select/select--invalid.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id" class="bx--select-input  bx--select--invalid ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id-disabled" class="bx--select-input  bx--select--invalid " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
diff --git a/html/select/select--light-invalid.html b/html/select/select--light-invalid.html
deleted file mode 100644
index bf51530fc972..000000000000
--- a/html/select/select--light-invalid.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--light">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id" class="bx--select-input  bx--select--invalid ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--light">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  data-invalid id="select-id-disabled" class="bx--select-input  bx--select--invalid " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-    <div class="bx--form-requirement">
-      Validation message here
-    </div>
-  </div>
-</div>
diff --git a/html/select/select--light.html b/html/select/select--light.html
deleted file mode 100644
index 6a8275f6c867..000000000000
--- a/html/select/select--light.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--light">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  id="select-id" class="bx--select-input ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select bx--select--light">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  id="select-id-disabled" class="bx--select-input " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
diff --git a/html/select/select.html b/html/select/select.html
deleted file mode 100644
index d6269841d175..000000000000
--- a/html/select/select.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id" class="bx--label">Select label</label>
-    <select  id="select-id" class="bx--select-input ">
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <div
-    class="bx--select">
-    <label for="select-id-disabled" class="bx--label">Select label</label>
-    <select  id="select-id-disabled" class="bx--select-input " disabled>
-
-      <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
-      <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>        <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>        <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1" >Option 1 </option>         <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-    <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>
-  </div>
-</div>
diff --git a/html/skeleton/skeleton.html b/html/skeleton/skeleton.html
deleted file mode 100644
index 58d4c9a50be6..000000000000
--- a/html/skeleton/skeleton.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-
-<p>Skeleton Text</p>
-<div class="bx--skeleton__text"></div>
-<div class="bx--skeleton__text bx--skeleton__heading"></div>
-
-<p>Button</p>
-<button class="bx--skeleton bx--btn" type="button"></button>
-&nbsp;<a class="bx--skeleton bx--btn" href="#" role="button"></a>
-&nbsp;<button class="bx--skeleton bx--btn bx--btn--sm" type="button"></button>
-
-<p>Code Snippet</p>
-<div class="bx--snippet bx--skeleton bx--snippet--single">
-  <div class="bx--snippet-container"><span></span></div>
-</div>
-<div class="bx--snippet bx--skeleton bx--snippet--multi">
-  <div class="bx--snippet-container"><span></span><span></span><span></span></div>
-</div>
-
-<p>Label</p>
-<label class="bx--label bx--skeleton"></label>
-
-<p>Breadcrumb</p>
-<div class="bx--breadcrumb bx--skeleton">
-    <div class="bx--breadcrumb-item">
-      <a href="/#" class="bx--link">&nbsp;</a>
-    </div>
-    <div class="bx--breadcrumb-item">
-      <a href="/#" class="bx--link">&nbsp;</a>
-    </div>
-    <div class="bx--breadcrumb-item">
-      <a href="/#" class="bx--link">&nbsp;</a>
-    </div>
-</div>
-
-<p>Dropdown</p>
-<div class="bx--skeleton bx--dropdown-v2 bx--list-box bx--form-item">
-  <div role="button" class="bx--list-box__field">
-    <span class="bx--list-box__label"></span>
-  </div>
-</div>
-
-<p>Progress Indicator</p>
-<ul class="bx--progress bx--skeleton">
-</ul>
-
-<p>Toggle</p>
-<div class="bx--form-item">
-  <input type="checkbox" class="bx--toggle bx--skeleton" value="on">
-  <label class="bx--toggle__label bx--skeleton">
-    <span class="bx--toggle__text--left"></span><span class="bx--toggle__appearance"></span><span class="bx--toggle__text--right"></span>
-  </label>
-</div>
-
-<p>Small Toggle</p>
-<div class="bx--form-item">
-  <input type="checkbox" class="bx--toggle bx--toggle--small bx--skeleton" value="on">
-  <label class="bx--toggle__label bx--skeleton"><span class="bx--toggle__appearance"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path></svg></span>
-  </label>
-</div>
-
-<p>Slider</p>
-<div class="bx--form-item">
-  <label class="bx--label bx--skeleton"></label>
-  <div class="bx--slider-container bx--skeleton"><span class="bx--slider__range-label"></span>
-    <div class="bx--slider">
-      <div class="bx--slider__track"></div>
-      <div class="bx--slider__filled-track"></div>
-      <div class="bx--slider__thumb"></div>
-    </div><span class="bx--slider__range-label"></span>
-  </div>
-</div>
-
-<p>Tag</p>
-<span class="bx--tag bx--skeleton"></span>
-
-<p>Tabs</p>
-<nav class="bx--tabs bx--skeleton">
-  <div class="bx--tabs-trigger"><a href="javascript:void(0)" class="bx--tabs-trigger-text">&nbsp;</a>
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-  <ul class="bx--tabs__nav bx--tabs__nav--hidden">
-      <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
-      </li>
-      <li class="bx--tabs__nav-item"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
-      </li>
-      <li class="bx--tabs__nav-item bx--tabs__nav-item--selected"><a class="bx--tabs__nav-link" href="javascript:void(0)">&nbsp;</a>
-      </li>
-  </ul>
-</nav>
-
-<p>Icon</p>
-<div class="bx--icon--skeleton"></div>
-
-<p>Select</p>
-<div class="bx--form-item">
-  <label class="bx--label bx--skeleton"></label>
-  <div class="bx--select bx--skeleton">
-    <select class="bx--select-input"></select>
-  </div>
-</div>
-
-<p>Data Table</p>
-<table class="bx--skeleton bx--data-table-v2">
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-      <th></th>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-      <td><span></span></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
diff --git a/html/slider/slider--disabled.html b/html/slider/slider--disabled.html
deleted file mode 100644
index 178365fb9a9d..000000000000
--- a/html/slider/slider--disabled.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div class="bx--slider-container">
-    <label id="slider-input-box_bottom-range-label" class="bx--slider__range-label">0</label>
-    <div class="bx--slider  bx--slider--disabled" data-slider data-slider-input-box="#slider-input-box">
-      <div class="bx--slider__thumb" tabindex="0"></div>
-      <div class="bx--slider__track"></div>
-      <div class="bx--slider__filled-track"></div>
-      <input aria-label="slider" id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="50">
-    </div>
-      <label class="bx--label">Slider label</label>
-    <label id="slider-input-box_top-range-label" class="bx--slider__range-label">100</label>
-    <input id="slider-input-box" aria-labelledby="slider-input-box_bottom-range-label slider-input-box_top-range-label" type="number" class="bx--text-input bx--slider-text-input" placeholder="0" value="50">
-  </div>
-</div>
diff --git a/html/slider/slider--light.html b/html/slider/slider--light.html
deleted file mode 100644
index 708436c7ec45..000000000000
--- a/html/slider/slider--light.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div class="bx--slider-container">
-    <label id="slider-input-box-light_bottom-range-label" class="bx--slider__range-label">0</label>
-    <div class="bx--slider " data-slider data-slider-input-box="#slider-input-box-light">
-      <div class="bx--slider__thumb" tabindex="0"></div>
-      <div class="bx--slider__track"></div>
-      <div class="bx--slider__filled-track"></div>
-      <input aria-label="slider" id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="75">
-    </div>
-      <label class="bx--label">Slider label</label>
-    <label id="slider-input-box-light_top-range-label" class="bx--slider__range-label">100</label>
-    <input id="slider-input-box-light" aria-labelledby="slider-input-box-light_bottom-range-label slider-input-box-light_top-range-label" type="number" class="bx--text-input bx--slider-text-input bx--text-input--light" placeholder="0" value="75">
-  </div>
-</div>
diff --git a/html/slider/slider.html b/html/slider/slider.html
deleted file mode 100644
index b584db7770b4..000000000000
--- a/html/slider/slider.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div class="bx--slider-container">
-    <label id="slider-input-box_bottom-range-label" class="bx--slider__range-label">0</label>
-    <div class="bx--slider " data-slider data-slider-input-box="#slider-input-box">
-      <div class="bx--slider__thumb" tabindex="0"></div>
-      <div class="bx--slider__track"></div>
-      <div class="bx--slider__filled-track"></div>
-      <input aria-label="slider" id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="25">
-    </div>
-      <label class="bx--label">Slider label</label>
-    <label id="slider-input-box_top-range-label" class="bx--slider__range-label">100</label>
-    <input id="slider-input-box" aria-labelledby="slider-input-box_bottom-range-label slider-input-box_top-range-label" type="number" class="bx--text-input bx--slider-text-input" placeholder="0" value="25">
-  </div>
-</div>
diff --git a/html/structured-list/structured-list--selection.html b/html/structured-list/structured-list--selection.html
deleted file mode 100644
index 7f0b69696893..000000000000
--- a/html/structured-list/structured-list--selection.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
-  <div class="bx--structured-list-thead">
-    <div class="bx--structured-list-row bx--structured-list-row--header-row">
-        <div class="bx--structured-list-th"></div>
-        <div class="bx--structured-list-th">Column1</div>
-        <div class="bx--structured-list-th">Column2</div>
-        <div class="bx--structured-list-th">Column3</div>
-    </div>
-  </div>
-  <div class="bx--structured-list-tbody">
-          <label aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
-            <input tabindex="-1" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark" checked />
-            <div class="bx--structured-list-td">
-                <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
-                  <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                    fill-rule="evenodd" />
-                </svg>
-            </div>
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
-              <div class="bx--structured-list-td">Row 1</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </label>
-          <label aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
-            <input tabindex="-1" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant" />
-            <div class="bx--structured-list-td">
-                <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
-                  <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                    fill-rule="evenodd" />
-                </svg>
-            </div>
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
-              <div class="bx--structured-list-td">Row 2</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </label>
-          <label aria-label="block-storage" class="bx--structured-list-row" tabindex="0">
-            <input tabindex="-1" class="bx--structured-list-input" value="block-storage" type="radio" name="services" title="block-storage" />
-            <div class="bx--structured-list-td">
-                <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
-                  <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                    fill-rule="evenodd" />
-                </svg>
-            </div>
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div>
-              <div class="bx--structured-list-td">Row 3</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </label>
-          <label aria-label="open-whisk" class="bx--structured-list-row" tabindex="0">
-            <input tabindex="-1" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
-            <div class="bx--structured-list-td">
-                <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
-                  <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                    fill-rule="evenodd" />
-                </svg>
-            </div>
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 4</div>
-              <div class="bx--structured-list-td">Row 4</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </label>
-  </div>
-</section>
diff --git a/html/structured-list/structured-list.html b/html/structured-list/structured-list.html
deleted file mode 100644
index bcc76249a27b..000000000000
--- a/html/structured-list/structured-list.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<section class="bx--structured-list">
-  <div class="bx--structured-list-thead">
-    <div class="bx--structured-list-row bx--structured-list-row--header-row">
-        <div class="bx--structured-list-th">Column1</div>
-        <div class="bx--structured-list-th">Column2</div>
-        <div class="bx--structured-list-th">Column3</div>
-    </div>
-  </div>
-  <div class="bx--structured-list-tbody">
-          <div class="bx--structured-list-row">
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
-              <div class="bx--structured-list-td">Row 1</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </div>
-          <div class="bx--structured-list-row">
-              <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
-              <div class="bx--structured-list-td">Row 2</div>
-              <div class="bx--structured-list-td">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-    </div>
-          </div>
-  </div>
-</section>
diff --git a/html/tabs/tabs.html b/html/tabs/tabs.html
deleted file mode 100644
index 654ebb8e5c1a..000000000000
--- a/html/tabs/tabs.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<nav data-tabs class="bx--tabs" role="navigation">
-  <div class="bx--tabs-trigger" tabindex="0">
-    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
-      <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>
-  </div>
-  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
-      <li class="bx--tabs__nav-item bx--tabs__nav-item--selected " data-target=".tab-1" role="presentation" >
-        <a tabindex="0" id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab label 1</a>
-      </li>
-      <li class="bx--tabs__nav-item " data-target=".tab-2" role="presentation" >
-        <a tabindex="0" id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2">Tab label 2</a>
-      </li>
-      <li class="bx--tabs__nav-item " data-target=".tab-3" role="presentation" >
-        <a tabindex="0" id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3">Tab label 3</a>
-      </li>
-      <li class="bx--tabs__nav-item  bx--tabs__nav-item--disabled " data-target=".tab-4" role="presentation" >
-        <a tabindex="0" id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4">Tab label 4</a>
-      </li>
-  </ul>
-</nav>
-<!-- The markup below is for demonstration purposes only -->
-<div style="padding: 1rem;">
-    <div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1" aria-hidden="false">
-      <p>Content for first tab goes here.</p>
-    </div>
-    <div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2" aria-hidden="true" hidden>
-      <p>Content for second tab goes here.</p>
-    </div>
-    <div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3" aria-hidden="true" hidden>
-      <p>Content for third tab goes here.</p>
-    </div>
-    <div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4" aria-hidden="true" hidden>
-      <p>Content for fourth tab goes here.</p>
-    </div>
-</div>
diff --git a/html/tag/tag.html b/html/tag/tag.html
deleted file mode 100644
index 1acd4d732236..000000000000
--- a/html/tag/tag.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<span class="bx--tag bx--tag--ibm">IBM</span>
-<span class="bx--tag bx--tag--beta">Beta</span>
-<span class="bx--tag bx--tag--third-party">Third-Party</span>
-<span class="bx--tag bx--tag--local">Local</span>
-<span class="bx--tag bx--tag--dedicated">Dedicated</span>
-<span class="bx--tag bx--tag--custom">Custom</span>
-<span class="bx--tag bx--tag--experimental">Experimental</span>
-<span class="bx--tag bx--tag--community">Community</span>
-<span class="bx--tag bx--tag--private">Private</span>
diff --git a/html/text-area/text-area--light.html b/html/text-area/text-area--light.html
deleted file mode 100644
index 63b7a419a3b2..000000000000
--- a/html/text-area/text-area--light.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <label for="text-area-2" class="bx--label">Text Area label</label>
-  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-3" class="bx--label">Text Area label</label>
-  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-4" class="bx--label">Text Area label</label>
-  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-5" class="bx--label bx--label--disabled">Text Area label</label>
-  <textarea id="text-area-5" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text." disabled></textarea>
-</div>
diff --git a/html/text-area/text-area.html b/html/text-area/text-area.html
deleted file mode 100644
index afaedc0a3b5e..000000000000
--- a/html/text-area/text-area.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <label for="text-area-2" class="bx--label">Text Area label</label>
-  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-3" class="bx--label">Text Area label</label>
-  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-4" class="bx--label">Text Area label</label>
-  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <label for="text-area-5" class="bx--label bx--label--disabled">Text Area label</label>
-  <textarea id="text-area-5" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text." disabled></textarea>
-</div>
diff --git a/html/text-input/text-input--light.html b/html/text-input/text-input--light.html
deleted file mode 100644
index 8c04dd0e7e01..000000000000
--- a/html/text-input/text-input--light.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-3" class="bx--label">Text Input label</label>
-  <input id="text-input-3" type="text" class="bx--text-input bx--text-input--light" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-4" class="bx--label">Text Input label</label>
-  <input data-invalid id="text-input-4" type="text" class="bx--text-input bx--text-input--light"
-    placeholder="Placeholder text">
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-5" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-  <input id="text-input-5" type="text" class="bx--text-input bx--text-input--light" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper" style="width: 320px">
-  <label for="text-input-6" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
-  <input id="text-input-6" type="text" class="bx--text-input bx--text-input--light" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-7" type="text" class="bx--text-input bx--text-input--light" placeholder="Placeholder text"
-    disabled>
-</div>
diff --git a/html/text-input/text-input--password--light.html b/html/text-input/text-input--password--light.html
deleted file mode 100644
index f9d68ce16a16..000000000000
--- a/html/text-input/text-input--password--light.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-3" class="bx--label">Text Input label</label>
-  <input id="text-input-3" type="password" class="bx--text-input  bx--text-input--light"
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="bx--icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="bx--icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-4" class="bx--label">Text Input label</label>
-  <input data-invalid id="text-input-4" type="password" class="bx--text-input  bx--text-input--light"
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-5" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-  <input id="text-input-5" type="password" class="bx--text-input  bx--text-input--light"
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper" style="width: 320px">
-  <label for="text-input-6" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
-  <input id="text-input-6" type="password" class="bx--text-input  bx--text-input--light"
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-7" type="password" class="bx--text-input  bx--text-input--light"
-    placeholder="Placeholder text" data-toggle-password-visibility disabled>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
diff --git a/html/text-input/text-input--password.html b/html/text-input/text-input--password.html
deleted file mode 100644
index d955546f70e9..000000000000
--- a/html/text-input/text-input--password.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-3" class="bx--label">Text Input label</label>
-  <input id="text-input-3" type="password" class="bx--text-input "
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="bx--icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="bx--icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-4" class="bx--label">Text Input label</label>
-  <input data-invalid id="text-input-4" type="password" class="bx--text-input "
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-5" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-  <input id="text-input-5" type="password" class="bx--text-input "
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper" style="width: 320px">
-  <label for="text-input-6" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
-  <input id="text-input-6" type="password" class="bx--text-input "
-    placeholder="Placeholder text" data-toggle-password-visibility>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
-
-<div  data-text-input  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-7" type="password" class="bx--text-input "
-    placeholder="Placeholder text" data-toggle-password-visibility disabled>
-  <button class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom" aria-label="Show password">
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
-        <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
-      </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
-        <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
-      </svg>
-  </button>
-</div>
diff --git a/html/text-input/text-input.html b/html/text-input/text-input.html
deleted file mode 100644
index 549eea4078a3..000000000000
--- a/html/text-input/text-input.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-3" class="bx--label">Text Input label</label>
-  <input id="text-input-3" type="text" class="bx--text-input" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-4" class="bx--label">Text Input label</label>
-  <input data-invalid id="text-input-4" type="text" class="bx--text-input"
-    placeholder="Placeholder text">
-  <div class="bx--form-requirement">
-    Validation message here
-  </div>
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-5" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text goes here
-  </div>
-  <input id="text-input-5" type="text" class="bx--text-input" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper" style="width: 320px">
-  <label for="text-input-6" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
-  <input id="text-input-6" type="text" class="bx--text-input" placeholder="Placeholder text">
-</div>
-
-<div  class="bx--form-item bx--text-input-wrapper">
-  <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-7" type="text" class="bx--text-input" placeholder="Placeholder text"
-    disabled>
-</div>
diff --git a/html/tile/tile--clickable.html b/html/tile/tile--clickable.html
deleted file mode 100644
index 4b1202239cfc..000000000000
--- a/html/tile/tile--clickable.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
diff --git a/html/tile/tile--expandable.html b/html/tile/tile--expandable.html
deleted file mode 100644
index 345d8d1f8606..000000000000
--- a/html/tile/tile--expandable.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
-  <button aria-label="expand menu" class="bx--tile__chevron">
-      <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" />
-      </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>
-  </div>
-</div>
diff --git a/html/tile/tile--grid.html b/html/tile/tile--grid.html
deleted file mode 100644
index 41eef22f8a7d..000000000000
--- a/html/tile/tile--grid.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--grid">
-
-  <div class="bx--tile-container" style="width: 100%">
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-12">
-        <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
-          <button class="bx--tile__chevron">
-            <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" />
-            </svg>
-          </button>
-          <div class="bx--tile-content">
-            <span data-tile-atf class="bx--tile-content__above-the-fold" style="height: 200px">
-              <!-- Above the fold content here -->
-              <h2>Above the fold content here</h2>
-            </span>
-            <span class="bx--tile-content__below-the-fold" style="height: 400px">
-              <!-- Rest of the content here -->
-              <h2>Below the fold content here</h2>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
-        <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile"
-          />
-          <div class="bx--tile__checkmark">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                fill-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="bx--tile-content">
-            <!-- Tile content here -->
-          </div>
-        </label>
-      </div>
-      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
-        <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2"
-          />
-          <div class="bx--tile__checkmark">
-            <svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-                fill-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="bx--tile-content">
-            <!-- Tile content here -->
-          </div>
-        </label>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-8 bx--col-sm-8">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/html/tile/tile--selectable.html b/html/tile/tile--selectable.html
deleted file mode 100644
index 61a9156e2ce0..000000000000
--- a/html/tile/tile--selectable.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-    <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
-  <div class="bx--tile__checkmark">
-      <svg width="16" height="16" viewBox="0 0 16 16">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
-          fill-rule="evenodd" />
-      </svg>
-  </div>
-  <div class="bx--tile-content">
-    <!-- Tile content here -->
-  </div>
-</label>
diff --git a/html/tile/tile.html b/html/tile/tile.html
deleted file mode 100644
index 08b660b9086b..000000000000
--- a/html/tile/tile.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--tile"></div>
diff --git a/html/time-picker/time-picker--light.html b/html/time-picker/time-picker--light.html
deleted file mode 100644
index 1b6690c78d85..000000000000
--- a/html/time-picker/time-picker--light.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div class="bx--time-picker bx--time-picker--light">
-    <div class="bx--time-picker__input">
-      <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
-        placeholder="hh:mm" maxlength="5" />
-      <div class="bx--form-requirement">
-        Invalid time.
-      </div>
-      <label for="time-picker-1" class="bx--label">Select a time</label>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
-      <select id="select-id-1" class="bx--select-input">
-        <option class="bx--select-option" value="AM">AM</option>
-        <option class="bx--select-option" value="PM">PM</option>
-      </select>
-        <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>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-2" class="bx--label bx--visually-hidden">Select time zone</label>
-      <select id="select-id-2" class="bx--select-input">
-        <option class="bx--select-option" value="option-1">Time zone 1</option>
-        <option class="bx--select-option" value="option-2">Time zone 2</option>
-        <option class="bx--select-option" value="option-3">Time zone 3</option>
-      </select>
-        <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>
-    </div>
-  </div>
-</div>
diff --git a/html/time-picker/time-picker.html b/html/time-picker/time-picker.html
deleted file mode 100644
index 3667437ae49d..000000000000
--- a/html/time-picker/time-picker.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <div class="bx--time-picker">
-    <div class="bx--time-picker__input">
-      <label for="time-picker-1" class="bx--label">Select a time</label>
-      <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
-        placeholder="hh:mm" maxlength="5" />
-      <div class="bx--form-requirement">
-        Invalid time.
-      </div>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
-      <select id="select-id-1" class="bx--select-input">
-        <option class="bx--select-option" value="AM">AM</option>
-        <option class="bx--select-option" value="PM">PM</option>
-      </select>
-        <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>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-2" class="bx--label bx--visually-hidden">Select time zone</label>
-      <select id="select-id-2" class="bx--select-input">
-        <option class="bx--select-option" value="option-1">Time zone 1</option>
-        <option class="bx--select-option" value="option-2">Time zone 2</option>
-        <option class="bx--select-option" value="option-3">Time zone 3</option>
-      </select>
-        <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>
-    </div>
-  </div>
-</div>
diff --git a/html/toggle/toggle--small.html b/html/toggle/toggle--small.html
deleted file mode 100644
index b396e6e35243..000000000000
--- a/html/toggle/toggle--small.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <input class="bx--toggle bx--toggle--small" id="toggle4" type="checkbox"
-    aria-label="Label Name">
-  <label class="bx--toggle__label" for="toggle4">
-    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="bx--toggle__appearance">
-      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-      </svg>
-    </span>
-    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
-
-<div class="bx--form-item">
-  <input class="bx--toggle bx--toggle--small" id="toggle5" type="checkbox"
-    aria-label="Label Name" disabled>
-  <label class="bx--toggle__label" for="toggle5">
-    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="bx--toggle__appearance">
-      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-      </svg>
-    </span>
-    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
\ No newline at end of file
diff --git a/html/toggle/toggle.html b/html/toggle/toggle.html
deleted file mode 100644
index c387b6a41409..000000000000
--- a/html/toggle/toggle.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--form-item">
-  <input class="bx--toggle" id="toggle1" type="checkbox">
-  <label class="bx--toggle__label" for="toggle1">
-    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Toggle w/ Label</legend>
-  <div class="bx--form-item">
-    <input class="bx--toggle" id="toggle2" type="checkbox">
-    <label class="bx--toggle__label" for="toggle2">
-    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-  </div>
-</fieldset>
-
-<div class="bx--form-item">
-  <input class="bx--toggle" id="toggle3" type="checkbox" disabled>
-  <label class="bx--toggle__label" for="toggle3">
-    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
diff --git a/html/toolbar/toolbar.html b/html/toolbar/toolbar.html
deleted file mode 100644
index 702349f1e8d9..000000000000
--- a/html/toolbar/toolbar.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--toolbar" data-toolbar>
-  <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
-    <label for="search__input" class="bx--label">Search</label>
-    <input type="text" class="bx--search-input" id="search__input" placeholder="Search">
-    <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-            fill-rule="nonzero" />
-        </svg>
-    </button>
-    <button class="bx--search-close bx--search-close--hidden" title="Clear search
-        input" aria-label="Clear search input">
-        <svg width="16" height="16" viewBox="0 0 16 16">
-          <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
-            fill-rule="evenodd" />
-        </svg>
-    </button>
-  </div>
-  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-      <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="16" height="12" viewBox="0 0 16 12">
-        <g fill-rule="nonzero">
-          <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
-          />
-        </g>
-      </svg>
-    <ul class="bx--overflow-menu-options">
-      <li class="bx--toolbar-menu__title">FILTER BY</li>
-        <li class="bx--toolbar-menu__option">
-          <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox">
-          <label for="filter-option-1" class="bx--checkbox-label">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-            Filter option 1
-          </label>
-        </li>
-        <li class="bx--toolbar-menu__option">
-          <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
-          <label for="filter-option-2" class="bx--checkbox-label">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-            Filter option 2
-          </label>
-        </li>
-        <li class="bx--toolbar-menu__option">
-          <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
-          <label for="filter-option-3" class="bx--checkbox-label">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-            Filter option 3
-          </label>
-        </li>
-    </ul>
-  </div>
-  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
-      </svg>
-    <ul class="bx--overflow-menu-options">
-      <li class="bx--overflow-menu-options__option">
-        <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
-      </li>
-      <hr class="bx--toolbar-menu__divider" />
-      <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
-      <fieldset data-row-height class="bx--radio-button-group">
-        <legend class="bx--visually-hidden">Select table row height</legend>
-          <li class="bx--toolbar-menu__option">
-            <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked>
-            <label for="short-rows" class="bx--radio-button__label">
-              <span class="bx--radio-button__appearance"></span>
-              Short
-            </label>
-          </li>
-          <li class="bx--toolbar-menu__option">
-            <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
-            <label for="tall-rows" class="bx--radio-button__label">
-              <span class="bx--radio-button__appearance"></span>
-              Tall
-            </label>
-          </li>
-      </fieldset>
-    </ul>
-  </div>
-</div>
diff --git a/html/tooltip/tooltip--definition.html b/html/tooltip/tooltip--definition.html
deleted file mode 100644
index 0add5f6acb33..000000000000
--- a/html/tooltip/tooltip--definition.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--tooltip--definition">
-  <button class="bx--tooltip__trigger" type="button" aria-describedby="definition-tooltip">
-    Definition Tooltip
-  </button>
-  <div id="definition-tooltip" role="tooltip" class="bx--tooltip--definition__bottom">
-    <span class="bx--tooltip__caret"></span>
-    <p>Brief description of the dotted, underlined word above.</p>
-  </div>
-</div>
diff --git a/html/tooltip/tooltip--icon.html b/html/tooltip/tooltip--icon.html
deleted file mode 100644
index 0f3026e32fc7..000000000000
--- a/html/tooltip/tooltip--icon.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--tooltip--icon">
-  <button class="bx--tooltip__trigger bx--tooltip--icon__top" aria-label="Filter">
-      <svg width="16" height="12" viewBox="0 0 16 12">
-        <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
-      </svg>
-  </button>
-</div>
diff --git a/html/tooltip/tooltip.html b/html/tooltip/tooltip.html
deleted file mode 100644
index f6b27fa02f42..000000000000
--- a/html/tooltip/tooltip.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div id="tooltip-label" class="bx--tooltip__label" aria-describedby="unique-tooltip">
-  Tooltip label
-  <div tabindex="0" aria-labelledby="tooltip-label" data-tooltip-trigger data-tooltip-target="#unique-tooltip" role="tooltip" class="bx--tooltip__trigger">
-      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <g fill-rule="evenodd">
-          <path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="nonzero" />
-          <path fill-rule="nonzero" d="M9 13H7V7h2z" />
-          <circle cx="8" cy="4" r="1" />
-        </g>
-      </svg>
-  </div>
-</div>
-<div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
-  <span class="bx--tooltip__caret"></span>
-  <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
-    needed
-    please use a modal instead.</p>
-  <div class="bx--tooltip__footer">
-    <a href="#" class="bx--link">Learn More</a>
-    <button class="bx--btn bx--btn--primary" type="button">Create</button>
-  </div>
-</div>
diff --git a/html/ui-shell/ui-shell--navigation-with-no-icons.html b/html/ui-shell/ui-shell--navigation-with-no-icons.html
deleted file mode 100644
index 047ec6fc9f76..000000000000
--- a/html/ui-shell/ui-shell--navigation-with-no-icons.html
+++ /dev/null
@@ -1,640 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<header class="bx--header" role="banner" aria-label="IBM Platform Name" data-header>
-  <a class="bx--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
-  <button class="bx--header__menu-trigger bx--header__action" aria-label="Open menu" title="Open menu"
-    data-navigation-menu-panel-label-expand="Open menu" data-navigation-menu-panel-label-collapse="Close menu"
-    data-navigation-menu-target="#navigation-menu-takm4piyjts">
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 20 20"><path d="M2 15h16v1.2H2zm0-3.8h16v1.2H2zm0-3.7h16v1.2H2zm0-3.7h16V5H2z"></path></svg>
-  </button>
-  <a class="bx--header__name" href="javascript:void(0)" title="">
-    <span class="bx--header__name--prefix">
-      IBM
-      &nbsp;
-    </span>
-    [Platform]
-  </a>
-  <!-- 
-    Copyright IBM Corp. 2016, 2018
-  
-    This source code is licensed under the Apache-2.0 license found in the
-    LICENSE file in the root directory of this source tree.
-  -->
-  
-  <!--
-    We're designating the header navigation as a menubar. As a result, we
-    have each link designated as a menuitem. Links have a tabindex of "0" since
-    Safari does not provide links focus by default.
-  
-    For sub-menus, we are following the guidance specified here:
-    https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#rps_label
-  
-    Most noticeably, the first menuitem in a submenu should receive a tabindex of
-    "0", while the rest should get "-1"
-  -->
-  <nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
-    <ul class="bx--header__menu-bar" role="menubar" aria-label="Platform Name">
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 1
-        </a>
-      </li>
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 2
-        </a>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="true" href="javascript:void(0)" tabindex="0">
-          L1 link 3
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 3">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="false" href="javascript:void(0)" tabindex="0">
-          L1 link 4
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 4">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-  <div class="bx--header__global">
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 1"
-      title="Action 1" data-navigation-menu-panel-label-expand="Action 1"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 2"
-      title="Action 2" data-navigation-menu-panel-label-expand="Action 2"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 3"
-      title="Action 3" data-navigation-menu-panel-label-expand="Action 3"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 4"
-      title="Action 4" data-navigation-menu-panel-label-expand="Action 4"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-  </div>
-</header>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--side-nav" data-side-nav>
-  <nav class="bx--side-nav__navigation" role="navigation" aria-label="Side navigation">
-    <!-- 
-      Copyright IBM Corp. 2016, 2018
-    
-      This source code is licensed under the Apache-2.0 license found in the
-      LICENSE file in the root directory of this source tree.
-    -->
-    
-    <header class="bx--side-nav__header">
-      <div class="bx--side-nav__icon">
-        <svg
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 32 32"
-          aria-hidden="true">
-          <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-        </svg>
-      </div>
-      <div class="bx--side-nav__details">
-        <h2
-          class="bx--side-nav__title"
-          title="[L1 name here]">
-          [L1 name here]
-        </h2>
-        <div class="bx--side-nav__switcher">
-          <label for="side-nav-switcher" class="bx--assistive-text">
-            Switcher
-          </label>
-          <select id="carbon-side-nav-switcher" class="bx--side-nav__select">
-            <option
-              class="bx--side-nav__option"
-              disabled=""
-              hidden=""
-              value=""
-              selected=""
-            >
-              Switcher
-            </option>
-            <option class="bx--side-nav__option" value="Option 1">
-              Option 1
-            </option>
-            <option class="bx--side-nav__option" value="Option 2">
-              Option 2
-            </option>
-            <option class="bx--side-nav__option" value="Option 3">
-              Option 3
-            </option>
-          </select>
-          <div class="bx--side-nav__switcher-chevron">
-            <svg
-              aria-hidden="true"
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 32 32"
-            >
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </header>
-    <ul class="bx--side-nav__items">
-      <li class="bx--side-nav__item">
-        <a class="bx--side-nav__link" href="javascript:void(0)">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">Link</span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <a class="bx--side-nav__link" href="javascript:void(0)" aria-current="page">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">Link - active</span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item">
-        <a class="bx--side-nav__link" href="javascript:void(0)">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">
-            Link with really long text that should wrap
-          </span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <a class="bx--side-nav__link bx--side-nav__link--current" href="javascript:void(0)"
-          aria-current="page">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">
-            Link with really long text that should wrap - active
-          </span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <button class="bx--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
-          <div class="bx--side-nav__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__submenu-title">
-            Category title that is really long and probably should overflow
-          </span>
-          <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </button>
-        <ul class="bx--side-nav__menu" role="menu">
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <!-- 
-      Copyright IBM Corp. 2016, 2018
-    
-      This source code is licensed under the Apache-2.0 license found in the
-      LICENSE file in the root directory of this source tree.
-    -->
-    
-    <footer class="bx--side-nav__footer">
-      <button class="bx--side-nav__toggle" role="button" title="Close the side navigation menu">
-        <div class="bx--side-nav__icon">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--side-nav__icon--collapse bx--side-nav-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--side-nav__icon--expand bx--side-nav-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg>
-        </div>
-        <span class="bx--assistive-text">
-          Toggle the expansion state of the navigation
-        </span>
-      </button>
-    </footer>
-  </nav>
-</aside>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--panel--overlay" id="switcher-1vd7d1bsav" data-product-switcher>
-  <div class="bx--product-switcher">
-    <div class="bx--product-switcher__search">
-      <div class="bx--form-item">
-        <div data-search class="bx--search bx--search--sm bx--search--shell"
-          role="search">
-          <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-          <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search all products"
-            aria-labelledby="search-input-label-2">
-          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-              fill-rule="nonzero" />
-          </svg>
-          <button class="bx--search-close bx--search-close--hidden" title="Clear search input"
-            aria-label="Clear search input">
-            <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" />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p class="bx--product-switcher__subheader">My Products</p>
-    <ul class="bx--product-switcher__product-list">
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product 2</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-
-    <div class="bx--product-switcher__item">
-      <button aria-label="Show All Applications" tabindex="0" class="bx--product-switcher__all-btn">
-        View all products
-      </button>
-    </div>
-  </div>
-</aside>
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--navigation" id="navigation-menu-takm4piyjts"
-   data-navigation-menu>
-   <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          Item link
-        </a>
-      </li>
-    </ul>
-  </div>
- <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item bx--navigation-item--active">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item">
-        <div class="bx--navigation__category bx--navigation__category--expanded">
-            <button class="bx--navigation__category-toggle" aria-haspopup="true" aria-expanded="false"
-              aria-controls="category-1-menu">
-              <div class="bx--navigation__category-title">
-                L1 category
-                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-                </svg>
-              </div>
-            </button>
-            <ul id="category-1-menu" class="bx--navigation__category-items" role="menu">
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item bx--navigation__category-item--active">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-            </ul>
-          </div>
-      </li>
-    </ul>
-  </div>
-</div>
-<div class="bx--content">
-  <h1>Heading</h1>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-</div>
diff --git a/html/ui-shell/ui-shell--side-nav-fixed.html b/html/ui-shell/ui-shell--side-nav-fixed.html
deleted file mode 100644
index 94768385a9c9..000000000000
--- a/html/ui-shell/ui-shell--side-nav-fixed.html
+++ /dev/null
@@ -1,585 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<header class="bx--header" role="banner" aria-label="IBM Platform Name" data-header>
-  <a class="bx--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
-  <button class="bx--header__menu-trigger bx--header__action" aria-label="Open menu" title="Open menu"
-    data-navigation-menu-panel-label-expand="Open menu" data-navigation-menu-panel-label-collapse="Close menu"
-    data-navigation-menu-target="#navigation-menu-59mszlm8ign">
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 20 20"><path d="M2 15h16v1.2H2zm0-3.8h16v1.2H2zm0-3.7h16v1.2H2zm0-3.7h16V5H2z"></path></svg>
-  </button>
-  <a class="bx--header__name" href="javascript:void(0)" title="">
-    <span class="bx--header__name--prefix">
-      IBM
-      &nbsp;
-    </span>
-    [Platform]
-  </a>
-  <!-- 
-    Copyright IBM Corp. 2016, 2018
-  
-    This source code is licensed under the Apache-2.0 license found in the
-    LICENSE file in the root directory of this source tree.
-  -->
-  
-  <!--
-    We're designating the header navigation as a menubar. As a result, we
-    have each link designated as a menuitem. Links have a tabindex of "0" since
-    Safari does not provide links focus by default.
-  
-    For sub-menus, we are following the guidance specified here:
-    https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#rps_label
-  
-    Most noticeably, the first menuitem in a submenu should receive a tabindex of
-    "0", while the rest should get "-1"
-  -->
-  <nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
-    <ul class="bx--header__menu-bar" role="menubar" aria-label="Platform Name">
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 1
-        </a>
-      </li>
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 2
-        </a>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="true" href="javascript:void(0)" tabindex="0">
-          L1 link 3
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 3">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="false" href="javascript:void(0)" tabindex="0">
-          L1 link 4
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 4">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-  <div class="bx--header__global">
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 1"
-      title="Action 1" data-navigation-menu-panel-label-expand="Action 1"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 2"
-      title="Action 2" data-navigation-menu-panel-label-expand="Action 2"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 3"
-      title="Action 3" data-navigation-menu-panel-label-expand="Action 3"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 4"
-      title="Action 4" data-navigation-menu-panel-label-expand="Action 4"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-  </div>
-</header>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--side-nav bx--side-nav--fixed" data-side-nav>
-  <nav class="bx--side-nav__navigation" role="navigation" aria-label="Side navigation">
-    <ul class="bx--side-nav__items">
-      <li class="bx--side-nav__item">
-        <a class="bx--side-nav__link" href="javascript:void(0)">
-          <span class="bx--side-nav__link-text">Link</span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <a class="bx--side-nav__link bx--side-nav__link--current" href="javascript:void(0)"
-          aria-current="page">
-          <span class="bx--side-nav__link-text">
-            Link with really long text that should wrap - active
-          </span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item">
-        <button class="bx--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="false">
-          <span class="bx--side-nav__submenu-title">
-            Category title that is really long and probably should overflow
-          </span>
-          <div
-            class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </button>
-        <ul class="bx--side-nav__menu" role="menu" hidden="">
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              Link
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              Link
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="menuitem">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              Link
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <button class="bx--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="true">
-          <span class="bx--side-nav__submenu-title">
-            Category title that is really long and probably should overflow
-          </span>
-          <div
-            class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </button>
-        <ul class="bx--side-nav__menu" role="menu">
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-</aside>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--panel--overlay" id="switcher-1vd7d1bsav" data-product-switcher>
-  <div class="bx--product-switcher">
-    <div class="bx--product-switcher__search">
-      <div class="bx--form-item">
-        <div data-search class="bx--search bx--search--sm bx--search--shell"
-          role="search">
-          <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-          <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search all products"
-            aria-labelledby="search-input-label-2">
-          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-              fill-rule="nonzero" />
-          </svg>
-          <button class="bx--search-close bx--search-close--hidden" title="Clear search input"
-            aria-label="Clear search input">
-            <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" />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p class="bx--product-switcher__subheader">My Products</p>
-    <ul class="bx--product-switcher__product-list">
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product 2</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-
-    <div class="bx--product-switcher__item">
-      <button aria-label="Show All Applications" tabindex="0" class="bx--product-switcher__all-btn">
-        View all products
-      </button>
-    </div>
-  </div>
-</aside>
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--navigation" id="navigation-menu-59mszlm8ign"
-   hidden data-navigation-menu>
-   <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-    </ul>
-  </div>
- <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item bx--navigation-item--active bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-          <div class="bx--navigation__category">
-            <button class="bx--navigation__category-toggle" aria-haspopup="true" aria-expanded="false"
-              aria-controls="category-1-menu">
-              <div class="bx--navigation-icon">
-
-                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-                </svg>
-              </div>
-              <div class="bx--navigation__category-title">
-                L1 category
-                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-                </svg>
-              </div>
-            </button>
-            <ul id="category-1-menu" class="bx--navigation__category-items" role="menu">
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item bx--navigation__category-item--active">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-            </ul>
-          </div>
-      </li>
-    </ul>
-  </div>
-</div>
-<div class="bx--content">
-  <h1>Heading</h1>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-</div>
diff --git a/html/ui-shell/ui-shell.html b/html/ui-shell/ui-shell.html
deleted file mode 100644
index dc1909e77892..000000000000
--- a/html/ui-shell/ui-shell.html
+++ /dev/null
@@ -1,671 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<header class="bx--header" role="banner" aria-label="IBM Platform Name" data-header>
-  <a class="bx--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
-  <button class="bx--header__menu-trigger bx--header__action" aria-label="Open menu" title="Open menu"
-    data-navigation-menu-panel-label-expand="Open menu" data-navigation-menu-panel-label-collapse="Close menu"
-    data-navigation-menu-target="#navigation-menu-59mszlm8ign">
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 20 20"><path d="M2 15h16v1.2H2zm0-3.8h16v1.2H2zm0-3.7h16v1.2H2zm0-3.7h16V5H2z"></path></svg>
-  </button>
-  <a class="bx--header__name" href="javascript:void(0)" title="">
-    <span class="bx--header__name--prefix">
-      IBM
-      &nbsp;
-    </span>
-    [Platform]
-  </a>
-  <!-- 
-    Copyright IBM Corp. 2016, 2018
-  
-    This source code is licensed under the Apache-2.0 license found in the
-    LICENSE file in the root directory of this source tree.
-  -->
-  
-  <!--
-    We're designating the header navigation as a menubar. As a result, we
-    have each link designated as a menuitem. Links have a tabindex of "0" since
-    Safari does not provide links focus by default.
-  
-    For sub-menus, we are following the guidance specified here:
-    https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#rps_label
-  
-    Most noticeably, the first menuitem in a submenu should receive a tabindex of
-    "0", while the rest should get "-1"
-  -->
-  <nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
-    <ul class="bx--header__menu-bar" role="menubar" aria-label="Platform Name">
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 1
-        </a>
-      </li>
-      <li>
-        <a class="bx--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
-          L1 link 2
-        </a>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="true" href="javascript:void(0)" tabindex="0">
-          L1 link 3
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 3">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li class="bx--header__submenu" data-header-submenu>
-        <a class="bx--header__menu-item bx--header__menu-title" role="menuitem" aria-haspopup="true"
-          aria-expanded="false" href="javascript:void(0)" tabindex="0">
-          L1 link 4
-          <svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
-            <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
-          </svg>
-        </a>
-        <ul class="bx--header__menu" role="menu" aria-label="L1 link 4">
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 1
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Link 2
-              </span>
-            </a>
-          </li>
-          <li role="none">
-            <a class="bx--header__menu-item" role="menuitem" href="javascript:void(0)" tabindex="-1">
-              <span class="bx--text-truncate--end">
-                Ipsum architecto voluptatem
-              </span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-  <div class="bx--header__global">
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 1"
-      title="Action 1" data-navigation-menu-panel-label-expand="Action 1"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 2"
-      title="Action 2" data-navigation-menu-panel-label-expand="Action 2"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 3"
-      title="Action 3" data-navigation-menu-panel-label-expand="Action 3"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-    <button class="bx--header__menu-trigger bx--header__action" aria-label="Action 4"
-      title="Action 4" data-navigation-menu-panel-label-expand="Action 4"
-      data-navigation-menu-panel-label-collapse="Close menu" data-product-switcher-target="#switcher-1vd7d1bsav">
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M8.24 25.14L7 26.67a13.79 13.79 0 0 0 4.18 2.44l.69-1.87a12 12 0 0 1-3.63-2.1zM4.19 18l-2 .41A14.09 14.09 0 0 0 3.86 23l1.73-1a12.44 12.44 0 0 1-1.4-4zm7.63-13.24l-.69-1.87A13.79 13.79 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a14.37 14.37 0 0 0-1.64 4.59l2 .34A12.05 12.05 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z"></path></svg>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--navigation-menu-panel-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-    </button>
-  </div>
-</header>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--side-nav" data-side-nav>
-  <nav class="bx--side-nav__navigation" role="navigation" aria-label="Side navigation">
-    <!-- 
-      Copyright IBM Corp. 2016, 2018
-    
-      This source code is licensed under the Apache-2.0 license found in the
-      LICENSE file in the root directory of this source tree.
-    -->
-    
-    <header class="bx--side-nav__header">
-      <div class="bx--side-nav__icon">
-        <svg
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 32 32"
-          aria-hidden="true">
-          <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-        </svg>
-      </div>
-      <div class="bx--side-nav__details">
-        <h2
-          class="bx--side-nav__title"
-          title="[L1 name here]">
-          [L1 name here]
-        </h2>
-        <div class="bx--side-nav__switcher">
-          <label for="side-nav-switcher" class="bx--assistive-text">
-            Switcher
-          </label>
-          <select id="carbon-side-nav-switcher" class="bx--side-nav__select">
-            <option
-              class="bx--side-nav__option"
-              disabled=""
-              hidden=""
-              value=""
-              selected=""
-            >
-              Switcher
-            </option>
-            <option class="bx--side-nav__option" value="Option 1">
-              Option 1
-            </option>
-            <option class="bx--side-nav__option" value="Option 2">
-              Option 2
-            </option>
-            <option class="bx--side-nav__option" value="Option 3">
-              Option 3
-            </option>
-          </select>
-          <div class="bx--side-nav__switcher-chevron">
-            <svg
-              aria-hidden="true"
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 32 32"
-            >
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </header>
-    <ul class="bx--side-nav__items">
-      <li class="bx--side-nav__item">
-        <a class="bx--side-nav__link" href="javascript:void(0)">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">Link</span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <a class="bx--side-nav__link" href="javascript:void(0)" aria-current="page">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">Link - active</span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item">
-        <a class="bx--side-nav__link" href="javascript:void(0)">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">
-            Link with really long text that should wrap
-          </span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <a class="bx--side-nav__link bx--side-nav__link--current" href="javascript:void(0)"
-          aria-current="page">
-          <div class="bx--side-nav__icon bx--side-nav__icon--small">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__link-text">
-            Link with really long text that should wrap - active
-          </span>
-        </a>
-      </li>
-      <li class="bx--side-nav__item bx--side-nav__item--active">
-        <button class="bx--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
-          <div class="bx--side-nav__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--side-nav__submenu-title">
-            Category title that is really long and probably should overflow
-          </span>
-          <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-            </svg>
-          </div>
-        </button>
-        <ul class="bx--side-nav__menu" role="menu">
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">
-                Link with really long text that probably should be truncated
-              </span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-          <li class="bx--side-nav__menu-item" role="none">
-            <a class="bx--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
-              <span class="bx--side-nav__link-text">Link</span>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <!-- 
-      Copyright IBM Corp. 2016, 2018
-    
-      This source code is licensed under the Apache-2.0 license found in the
-      LICENSE file in the root directory of this source tree.
-    -->
-    
-    <footer class="bx--side-nav__footer">
-      <button class="bx--side-nav__toggle" role="button" title="Close the side navigation menu">
-        <div class="bx--side-nav__icon">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--side-nav__icon--collapse bx--side-nav-collapse-icon" width="20" height="20" viewBox="0 0 32 32"><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>
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bx--side-nav__icon--expand bx--side-nav-expand-icon" width="20" height="20" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg>
-        </div>
-        <span class="bx--assistive-text">
-          Toggle the expansion state of the navigation
-        </span>
-      </button>
-    </footer>
-  </nav>
-</aside>
-<!--
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<aside class="bx--panel--overlay" id="switcher-1vd7d1bsav" data-product-switcher>
-  <div class="bx--product-switcher">
-    <div class="bx--product-switcher__search">
-      <div class="bx--form-item">
-        <div data-search class="bx--search bx--search--sm bx--search--shell"
-          role="search">
-          <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
-          <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search all products"
-            aria-labelledby="search-input-label-2">
-          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
-            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-              fill-rule="nonzero" />
-          </svg>
-          <button class="bx--search-close bx--search-close--hidden" title="Clear search input"
-            aria-label="Clear search input">
-            <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" />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p class="bx--product-switcher__subheader">My Products</p>
-    <ul class="bx--product-switcher__product-list">
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-      <li class="bx--product-list__item">
-        <a class="bx--product-link" tabindex="0" href="javascript:void(0)">
-          <div class="bx--product-switcher__icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          <span class="bx--product-link__name">My Product 2</span>
-        </a>
-        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-          <svg width="3" height="15" viewBox="0 0 3 15">
-            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
-          </svg>
-          <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
-            data-floating-menu-direction="bottom">
-            <li class="bx--overflow-menu-options__option bx--overflow__item">
-              <button class="bx--overflow-menu-options__btn" title="Option 1"
-                data-floating-menu-primary-focus>Option 1</button>
-            </li>
-            <li class="bx--overflow-menu-options__option">
-              <button class="bx--overflow-menu-options__btn">Option 2</button>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-
-    <div class="bx--product-switcher__item">
-      <button aria-label="Show All Applications" tabindex="0" class="bx--product-switcher__all-btn">
-        View all products
-      </button>
-    </div>
-  </div>
-</aside>
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="bx--navigation" id="navigation-menu-59mszlm8ign"
-   hidden data-navigation-menu>
-   <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-    </ul>
-  </div>
- <div class="bx--navigation-section">
-    <ul class="bx--navigation-items">
-      <li class="bx--navigation-item bx--navigation-item--active bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-        <a class="bx--navigation-link" href="javascript:void(0)">
-          <div class="bx--navigation-icon">
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-            </svg>
-          </div>
-          Item link
-        </a>
-      </li>
-      <li class="bx--navigation-item bx--navigation-item--icon">
-          <div class="bx--navigation__category">
-            <button class="bx--navigation__category-toggle" aria-haspopup="true" aria-expanded="false"
-              aria-controls="category-1-menu">
-              <div class="bx--navigation-icon">
-
-                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-                </svg>
-              </div>
-              <div class="bx--navigation__category-title">
-                L1 category
-                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
-                </svg>
-              </div>
-            </button>
-            <ul id="category-1-menu" class="bx--navigation__category-items" role="menu">
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item bx--navigation__category-item--active">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-              <li class="bx--navigation__category-item">
-                <a class="bx--navigation-link" href="javascript:void(0)" role="menuitem">
-                  Nested link
-                </a>
-              </li>
-            </ul>
-          </div>
-      </li>
-    </ul>
-  </div>
-</div>
-<div class="bx--content">
-  <h1>Heading</h1>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-  <h2>Sub-section</h2>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <p>
-    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
-    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
-  </p>
-  <h3>Tertiary section</h3>
-  <p>
-    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
-    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
-  </p>
-</div>
diff --git a/html/unified-header/unified-header.html b/html/unified-header/unified-header.html
deleted file mode 100644
index 9014be935543..000000000000
--- a/html/unified-header/unified-header.html
+++ /dev/null
@@ -1,507 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!-- Unified Header -->
-<div data-unified-header class="bx--unified-header bx--unified-header--apps" tabindex="0">
-
-  <!-- Super Global Header -->
-  <nav role="navigation" class="bx--top-nav" aria-label="Top Header">
-      <ul role="menubar" class="bx--top-nav__left-container" aria-hidden="false">
-        <li role="menuitem" class="bx--top-nav__left-container__item">
-          <a class="bx--top-nav__left-container__link" href="#" tabindex="0">
-            <svg class="bx--top-nav__left-container__link--icon">
-              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--header--help"></use>
-            </svg>
-            Docs
-          </a>
-        </li>
-      </ul>
-      <ul role="menubar" class="bx--top-nav__right-container">
-        <li data-trial class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li class="bx--dropdown-text">29 Trial Days Remaining</li>
-            <svg class="bx--dropdown__arrow">
-              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-            </svg>
-            <li>
-              <ul class="bx--dropdown-list">
-                <li class="bx--dropdown__trial-content">
-                  <p class="bx--dropdown__trial-content--desc">Keep your account going by adding your credit card. Don’t worry. We won’t charge you unless you go over your free monthly allowance.</p>
-                  <button class='bx--btn' type='button'>Add credit card</button>
-                  <a href="#" class="bx--link">Apply promo code</a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li data-credit class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li class="bx--dropdown-text">$132 Credit Expires 12/6</li>
-            <li>
-              <svg class="bx--dropdown__arrow">
-                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-              </svg>
-            </li>
-            <li>
-              <ul class="bx--dropdown-list">
-                <li class="bx--dropdown-item bx--dropdown__credit-content">
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Initial Credit Value</p>
-                    <p class="bx--dropdown__credit-content--desc">$200</p>
-                  </div>
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Expires</p>
-                    <p class="bx--dropdown__credit-content--desc">12/25/2016</p>
-                  </div>
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Spend Rate</p>
-                    <p class="bx--dropdown__credit-content--desc">$1.33/day</p>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li role="menuitem" class="bx--top-nav__right-container__item">
-          <ul role="menu" data-profile-switcher class="bx--account-switcher">
-            <li tabindex="0" data-profile-switcher-toggle class="bx--account-switcher__toggle">
-              <p data-switcher-account-sl class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-account class="bx--account-switcher__toggle--text"></p>
-              <p class="bx--account-switcher__toggle--text">|</p>
-              <p data-switcher-region class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-org class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-space class="bx--account-switcher__toggle--text"></p>
-            </li>
-            <li role="menuitem" data-switcher-menu class="bx--account-switcher__menu__container">
-              <ul role="menu" class="bx--account-switcher__menu">
-                <li role="menuitem" class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Account</p>
-                  <ul role="menu" data-dropdown data-value="Logans_account_123456789_1234" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-account class="bx--dropdown-text">Logans_account_123456789_1234</li>
-                    <li>
-                      <svg class="bx--dropdown__arrow">
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                      </svg>
-                    </li>
-                    <li aria-haspopup="true" class="bx--dropdown--scroll">
-                      <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">TJs_accoqwejqwhekjqwgehgunt_54321</span></li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
-                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
-                            <span data-dropdown-account-sl-linked>sl123456</span>
-                              <svg class="bx--account-switcher__linked-icon">
-                                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
-                              </svg>
-                            <span data-dropdown-account-linked>Logans_account_123456789_1234</span>
-                          </span>
-                        </li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
-                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
-                            <span data-dropdown-account-sl-linked>s7777</span>
-                            <svg class="bx--account-switcher__linked-icon">
-                              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
-                            </svg>
-                            <span data-dropdown-account-linked>TJs_account_123456789_1234</span>
-                          </span>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Region</p>
-                  <ul data-dropdown data-value="US South" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-region class="bx--dropdown-text">US South</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">US South</span></li>
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Sydney</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">United Kingdom</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Organization</p>
-                  <ul data-dropdown data-value="Organization 1" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-org class="bx--dropdown-text">Organization 1</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization q2332434341sddsf2</span></li>
-                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 3</span></li>
-                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 4</span></li>
-                        <li data-option data-value="router" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 5</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Space</p>
-                  <ul data-dropdown data-value="Space 2" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-space class="bx--dropdown-text">Space 2</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Dev</span></li>
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 2</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 3</span></li>
-                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 4</span></li>
-                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 5</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <a href="#" class="bx--link">Manage Organizations</a>
-                  <a href="#" class="bx--link">Create A Space</a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li data-top-nav-profile-image class="bx--dropdown-text--profile-image">
-              <div class="profile-image">
-                <svg class="bx--dropdown__profile-dropdown--picture">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
-                </svg>
-              </div>
-            </li>
-            <li class="bx--dropdown__profile-dropdown">
-              <ul class="bx--dropdown-list">
-                <li data-option data-value="all" class="bx--dropdown-item">
-                  <svg class="bx--dropdown__profile-dropdown--picture">
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
-                  </svg>
-                  <div class="bx--dropdown__profile-dropdown--information">
-                    <p>Erlich Bachman Erlich Bachman</p>
-                    <div class="bx--dropdown__profile-dropdown__container">
-                      <a class="bx--link" href="javascript:void(0)">Profile</a>
-                      <p>|</p>
-                      <a class="bx--link" href="javascript:void(0)">Log Out</a>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
-  <!-- End Super Global Header -->
-
-  <!-- Global Header -->
-  <header role="banner" class="bx--global-header">
-    <div class="bx--global-header__left-container">
-      <div class="bx--left-nav__trigger bx--left-nav__trigger--apps" data-left-nav-toggle="open" tabindex="0">
-        <div class="bx--left-nav__trigger--btn">
-          <span></span>
-        </div>
-      </div>
-      <div class="bx--global-header__left-nav bx--left-nav--active" data-left-nav-container aria-expanded="false">
-        <div class="bx--left-nav__close-row"></div>
-        <div data-left-nav-current-section="apps" class="bx--left-nav__header">
-          <svg data-left-nav-current-section-icon="apps" class="bx--left-nav__header--taxonomy-icon">
-            <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-          </svg>
-          <a data-left-nav-current-section-title tabindex="0" class="bx--left-nav__header--title">Apps</a>
-        </div>
-        <nav class="bx--left-nav" data-left-nav role="navigation" aria-label="Left Navigation">
-          <ul data-left-nav-sections class="bx--left-nav__sections">
-            <li data-left-nav-section="services" class="bx--left-nav__section bx--left-nav__section--services">
-              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
-                <svg data-left-nav-section-icon="services" class="bx--left-nav__section--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                <span data-left-nav-section-link class="bx--left-nav__section--link">Services</span>
-              </a>
-            </li>
-            <li data-left-nav-section="infrastructure" class="bx--left-nav__section bx--left-nav__section--infrastructure" tabindex="0">
-              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
-                <svg data-left-nav-section-icon="infrastructure" class="bx--left-nav__section--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                <span data-left-nav-section-link class="bx--left-nav__section--link">Infrastructure</span>
-              </a>
-            </li>
-          </ul>
-          <!-- APPLICATIONS MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav" data-left-nav-list="apps" aria-hidden="false">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END APPLICATIONS MENU -->
-
-          <!-- SERVICES MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="services" aria-hidden="true">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END SERVICES MENU -->
-
-          <!-- INFRASTRUCTURE MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="infrastructure" aria-hidden="true">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END INFRASTRUCTURE MENU -->
-
-        </nav>
-      </div>
-
-
-    <div class="bx--global-header__title">
-      <a href="#" class="bx--global-header__title--logo" tabindex="0">
-        <img class="bx--logo__image" src="/globals/assets/bluemix-logo.svg"></img>
-        <h1 class="bx--logo__text">
-          IBM <span class="bx--logo__text--bold">Bluemix</span>
-        </h1>
-      </a>
-      <h4 class="bx--global-header__title--current-page">Apps</h4>
-    </div>
-    </div>
-
-    <!-- Global Header - Right Nav -->
-    <div class="bx--global-header__right-container">
-    <ul data-global-header-menu role="menubar" class="bx--global-header__menu" aria-hidden="false">
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Catalog</a>
-      </li>
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Support</a>
-      </li>
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <ul role="menu" data-dropdown data-dropdown-type="navigation" class="bx--dropdown" tabindex="0">
-          <li class="bx--dropdown-text">Account</li>
-          <li aria-haspopup="true">
-            <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Make A Payment</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Sales</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Billing</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Users</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">VPN Access</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Manage</a></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    </div>
-  </header>
-  <!-- End Global Header -->
-
-</div>
-<!-- End Unified Header -->

From 20d9760b910a1627094675ca6e659c68662c5323 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 13:58:39 -0500
Subject: [PATCH 4/7] chore: delete extra files

---
 scss/components/accordion/_accordion.scss     | 308 ------
 scss/components/breadcrumb/_breadcrumb.scss   | 128 ---
 scss/components/button/_button.scss           | 315 ------
 scss/components/button/_mixins.scss           | 173 ----
 scss/components/carousel/_carousel.scss       | 101 --
 scss/components/checkbox/_checkbox.scss       | 349 -------
 .../code-snippet/_code-snippet.scss           | 596 ------------
 scss/components/code-snippet/_mixins.scss     |  28 -
 scss/components/combo-box/_combo-box.scss     |  44 -
 .../content-switcher/_content-switcher.scss   | 218 -----
 scss/components/copy-button/_copy-button.scss |  73 --
 .../data-table-v2/_data-table-v2-action.scss  | 184 ----
 .../data-table-v2/_data-table-v2-core.scss    | 172 ----
 .../_data-table-v2-expandable.scss            | 108 ---
 .../_data-table-v2-inline-edit-cell.scss      | 363 -------
 .../_data-table-v2-inline-edit.scss           |  78 --
 .../_data-table-v2-skeleton.scss              |  54 --
 .../data-table-v2/_data-table-v2-sort.scss    |  68 --
 .../data-table-v2/_data-table-v2.scss         |  13 -
 scss/components/data-table/_data-table.scss   | 257 -----
 scss/components/date-picker/_date-picker.scss | 914 ------------------
 scss/components/date-picker/_flatpickr.scss   | 835 ----------------
 scss/components/dropdown/_dropdown.scss       | 507 ----------
 scss/components/fab/_fab.scss                 |  69 --
 .../file-uploader/_file-uploader.scss         | 235 -----
 scss/components/footer/_footer.scss           |  71 --
 scss/components/form/_form.scss               | 202 ----
 .../inline-loading/_inline-loading.scss       | 149 ---
 .../components/inline-loading/_keyframes.scss |  12 -
 .../interior-left-nav/interior-left-nav.scss  | 387 --------
 scss/components/lightbox/_lightbox.scss       |  70 --
 scss/components/link/_link.scss               | 113 ---
 scss/components/list-box/_list-box.scss       | 628 ------------
 scss/components/list/_list.scss               | 126 ---
 scss/components/loading/_keyframes.scss       |  48 -
 scss/components/loading/_loading.scss         | 132 ---
 scss/components/loading/_mixins.scss          |  41 -
 scss/components/loading/_vars.scss            |   9 -
 scss/components/modal/_mixins.scss            |  16 -
 scss/components/modal/_modal.scss             | 300 ------
 .../multi-select/_multi-select.scss           |  25 -
 .../notification/_inline-notification.scss    | 224 -----
 scss/components/notification/_mixins.scss     |  37 -
 .../notification/_toast-notification.scss     | 211 ----
 .../number-input/_number-input.scss           | 369 -------
 .../overflow-menu/_overflow-menu.scss         | 395 --------
 .../pagination-nav/_pagination-nav.scss       | 226 -----
 scss/components/pagination/_pagination.scss   | 364 -------
 .../_progress-indicator.scss                  | 400 --------
 .../radio-button/_radio-button.scss           | 241 -----
 scss/components/search/_search.scss           | 336 -------
 scss/components/select/_select.scss           | 417 --------
 scss/components/skeleton/_skeleton-icon.scss  |  19 -
 .../skeleton/_skeleton-placeholder.scss       |  18 -
 scss/components/skeleton/_skeleton-text.scss  |  23 -
 scss/components/skeleton/_skeleton.scss       |  10 -
 scss/components/slider/_slider.scss           | 342 -------
 scss/components/structured-list/_mixins.scss  |  86 --
 .../structured-list/_structured-list.scss     | 354 -------
 scss/components/tabs/_tabs.scss               | 523 ----------
 scss/components/tag/_mixins.scss              |  16 -
 scss/components/tag/_tag.scss                 | 159 ---
 scss/components/text-area/_text-area.scss     | 187 ----
 scss/components/text-input/_text-input.scss   | 240 -----
 scss/components/tile/_tile.scss               | 330 -------
 scss/components/time-picker/_time-picker.scss | 204 ----
 scss/components/toggle/_toggle.scss           | 415 --------
 scss/components/toolbar/_toolbar.scss         | 148 ---
 scss/components/tooltip/_tooltip.scss         | 696 -------------
 scss/components/ui-shell/_content.scss        |  35 -
 scss/components/ui-shell/_functions.scss      |  15 -
 scss/components/ui-shell/_header.scss         | 248 -----
 .../components/ui-shell/_navigation-menu.scss | 210 ----
 .../ui-shell/_product-switcher.scss           | 185 ----
 scss/components/ui-shell/_side-nav.scss       | 433 ---------
 scss/components/ui-shell/_theme.scss          |  80 --
 scss/components/ui-shell/_ui-shell.scss       |  15 -
 scss/components/ui-shell/_variables.scss      |  11 -
 .../unified-header/_account-switcher.scss     | 312 ------
 .../unified-header/_global-header.scss        | 245 -----
 .../unified-header/_left-nav-trigger.scss     | 231 -----
 scss/components/unified-header/_left-nav.scss | 617 ------------
 scss/components/unified-header/_mixins.scss   |  40 -
 scss/components/unified-header/_topnav.scss   | 437 ---------
 .../unified-header/_unified-header.scss       |  38 -
 scss/globals/grid/_experimental.scss          |  69 --
 scss/globals/grid/_grid.scss                  |  20 -
 scss/globals/grid/classic/_classic.scss       | 145 ---
 scss/globals/scss/_colors.scss                |  72 --
 scss/globals/scss/_css--body.scss             |  27 -
 scss/globals/scss/_css--font-face.scss        |  86 --
 scss/globals/scss/_css--helpers.scss          |  41 -
 scss/globals/scss/_css--plex-core.scss        |  77 --
 scss/globals/scss/_css--reset.scss            | 193 ----
 scss/globals/scss/_css--typography.scss       | 131 ---
 scss/globals/scss/_feature-flags.scss         |  76 --
 scss/globals/scss/_functions.scss             |  16 -
 scss/globals/scss/_helper-classes.scss        |  28 -
 scss/globals/scss/_helper-mixins.scss         | 228 -----
 scss/globals/scss/_import-once.scss           |  23 -
 scss/globals/scss/_layer.scss                 |  52 -
 scss/globals/scss/_layout.scss                | 114 ---
 scss/globals/scss/_mixins.scss                |  15 -
 scss/globals/scss/_motion.scss                |  75 --
 scss/globals/scss/_spacing.scss               |  58 --
 scss/globals/scss/_theme-tokens.scss          | 236 -----
 scss/globals/scss/_theme.scss                 |  10 -
 scss/globals/scss/_typography.scss            | 107 --
 scss/globals/scss/_vars.scss                  |  14 -
 scss/globals/scss/styles.scss                 | 132 ---
 .../vendor/@carbon/colors/scss/colors.scss    |  15 -
 .../vendor/@carbon/colors/scss/mixins.scss    | 696 -------------
 .../@carbon/elements/scss/colors/colors.scss  |   8 -
 .../@carbon/elements/scss/colors/mixins.scss  | 589 -----------
 .../@carbon/elements/scss/elements.scss       |   9 -
 .../vendor/@carbon/elements/scss/grid/12.scss |  51 -
 .../@carbon/elements/scss/grid/_col.scss      | 124 ---
 .../elements/scss/grid/_container.scss        |  59 --
 .../@carbon/elements/scss/grid/_prefix.scss   |   8 -
 .../@carbon/elements/scss/grid/_row.scss      |  21 -
 .../elements/scss/grid/aspect-ratio.scss      |  45 -
 .../@carbon/elements/scss/grid/grid.scss      |  35 -
 .../scss/import-once/import-once.scss         |  25 -
 .../vendor/@carbon/elements/scss/index.scss   |   7 -
 .../elements/scss/layout/_breakpoint.scss     | 168 ----
 .../elements/scss/layout/_convert.scss        |  23 -
 .../elements/scss/layout/_key-height.scss     |  87 --
 .../elements/scss/layout/_mini-unit.scss      |  18 -
 .../elements/scss/layout/_spacing.scss        |  39 -
 .../elements/scss/layout/_utilities.scss      |  39 -
 .../@carbon/elements/scss/layout/layout.scss  |  12 -
 .../@carbon/elements/scss/motion/motion.scss  |  48 -
 .../@carbon/elements/scss/themes/g10.scss     |   4 -
 .../@carbon/elements/scss/themes/g100.scss    |   4 -
 .../@carbon/elements/scss/themes/g90.scss     |   4 -
 .../@carbon/elements/scss/themes/mixins.scss  | 210 ----
 .../@carbon/elements/scss/themes/themes.scss  |   4 -
 .../@carbon/elements/scss/themes/white.scss   |   4 -
 .../@carbon/elements/scss/type/_classes.scss  |  38 -
 .../elements/scss/type/_font-family.scss      |  50 -
 .../@carbon/elements/scss/type/_prefix.scss   |   8 -
 .../@carbon/elements/scss/type/_reset.scss    |  30 -
 .../@carbon/elements/scss/type/_scale.scss    |  45 -
 .../@carbon/elements/scss/type/_styles.scss   | 537 ----------
 .../elements/scss/type/font-face/_mono.scss   | 329 -------
 .../elements/scss/type/font-face/_sans.scss   | 329 -------
 .../elements/scss/type/font-face/_serif.scss  | 329 -------
 .../@carbon/elements/scss/type/type.scss      |  11 -
 .../scss/vendor/@carbon/grid/scss/12.scss     |  51 -
 .../scss/vendor/@carbon/grid/scss/_col.scss   | 124 ---
 .../vendor/@carbon/grid/scss/_container.scss  |  59 --
 .../vendor/@carbon/grid/scss/_prefix.scss     |   8 -
 .../scss/vendor/@carbon/grid/scss/_row.scss   |  21 -
 .../@carbon/grid/scss/aspect-ratio.scss       |  45 -
 .../scss/vendor/@carbon/grid/scss/grid.scss   |  35 -
 .../@carbon/import-once/scss/import-once.scss |  25 -
 .../@carbon/layout/scss/_breakpoint.scss      | 168 ----
 .../vendor/@carbon/layout/scss/_convert.scss  |  23 -
 .../@carbon/layout/scss/_key-height.scss      |  87 --
 .../@carbon/layout/scss/_mini-unit.scss       |  18 -
 .../vendor/@carbon/layout/scss/_spacing.scss  |  39 -
 .../@carbon/layout/scss/_utilities.scss       |  39 -
 .../vendor/@carbon/layout/scss/layout.scss    |  12 -
 .../vendor/@carbon/motion/scss/motion.scss    |  48 -
 .../scss/vendor/@carbon/themes/scss/g10.scss  |   4 -
 .../scss/vendor/@carbon/themes/scss/g100.scss |   4 -
 .../scss/vendor/@carbon/themes/scss/g90.scss  |   4 -
 .../vendor/@carbon/themes/scss/mixins.scss    | 210 ----
 .../vendor/@carbon/themes/scss/themes.scss    |   4 -
 .../vendor/@carbon/themes/scss/white.scss     |   4 -
 .../vendor/@carbon/type/scss/_classes.scss    |  38 -
 .../@carbon/type/scss/_font-family.scss       |  50 -
 .../vendor/@carbon/type/scss/_prefix.scss     |   8 -
 .../scss/vendor/@carbon/type/scss/_reset.scss |  30 -
 .../scss/vendor/@carbon/type/scss/_scale.scss |  45 -
 .../vendor/@carbon/type/scss/_styles.scss     | 537 ----------
 .../@carbon/type/scss/font-face/_mono.scss    | 329 -------
 .../@carbon/type/scss/font-face/_sans.scss    | 329 -------
 .../@carbon/type/scss/font-face/_serif.scss   | 329 -------
 .../scss/vendor/@carbon/type/scss/type.scss   |  11 -
 src/components/toggle/_toggle.scss            | 415 --------
 src/components/toggle/toggle--small.hbs       |  34 -
 src/globals/scss/_theme-tokens.scss           | 236 -----
 183 files changed, 28191 deletions(-)
 delete mode 100644 scss/components/accordion/_accordion.scss
 delete mode 100644 scss/components/breadcrumb/_breadcrumb.scss
 delete mode 100644 scss/components/button/_button.scss
 delete mode 100644 scss/components/button/_mixins.scss
 delete mode 100644 scss/components/carousel/_carousel.scss
 delete mode 100644 scss/components/checkbox/_checkbox.scss
 delete mode 100644 scss/components/code-snippet/_code-snippet.scss
 delete mode 100644 scss/components/code-snippet/_mixins.scss
 delete mode 100644 scss/components/combo-box/_combo-box.scss
 delete mode 100644 scss/components/content-switcher/_content-switcher.scss
 delete mode 100644 scss/components/copy-button/_copy-button.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-action.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-core.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-expandable.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-inline-edit.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-skeleton.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2-sort.scss
 delete mode 100644 scss/components/data-table-v2/_data-table-v2.scss
 delete mode 100644 scss/components/data-table/_data-table.scss
 delete mode 100644 scss/components/date-picker/_date-picker.scss
 delete mode 100644 scss/components/date-picker/_flatpickr.scss
 delete mode 100644 scss/components/dropdown/_dropdown.scss
 delete mode 100644 scss/components/fab/_fab.scss
 delete mode 100644 scss/components/file-uploader/_file-uploader.scss
 delete mode 100644 scss/components/footer/_footer.scss
 delete mode 100644 scss/components/form/_form.scss
 delete mode 100644 scss/components/inline-loading/_inline-loading.scss
 delete mode 100644 scss/components/inline-loading/_keyframes.scss
 delete mode 100644 scss/components/interior-left-nav/interior-left-nav.scss
 delete mode 100644 scss/components/lightbox/_lightbox.scss
 delete mode 100644 scss/components/link/_link.scss
 delete mode 100644 scss/components/list-box/_list-box.scss
 delete mode 100644 scss/components/list/_list.scss
 delete mode 100644 scss/components/loading/_keyframes.scss
 delete mode 100644 scss/components/loading/_loading.scss
 delete mode 100644 scss/components/loading/_mixins.scss
 delete mode 100644 scss/components/loading/_vars.scss
 delete mode 100644 scss/components/modal/_mixins.scss
 delete mode 100644 scss/components/modal/_modal.scss
 delete mode 100644 scss/components/multi-select/_multi-select.scss
 delete mode 100644 scss/components/notification/_inline-notification.scss
 delete mode 100644 scss/components/notification/_mixins.scss
 delete mode 100644 scss/components/notification/_toast-notification.scss
 delete mode 100644 scss/components/number-input/_number-input.scss
 delete mode 100644 scss/components/overflow-menu/_overflow-menu.scss
 delete mode 100644 scss/components/pagination-nav/_pagination-nav.scss
 delete mode 100644 scss/components/pagination/_pagination.scss
 delete mode 100644 scss/components/progress-indicator/_progress-indicator.scss
 delete mode 100644 scss/components/radio-button/_radio-button.scss
 delete mode 100644 scss/components/search/_search.scss
 delete mode 100644 scss/components/select/_select.scss
 delete mode 100644 scss/components/skeleton/_skeleton-icon.scss
 delete mode 100644 scss/components/skeleton/_skeleton-placeholder.scss
 delete mode 100644 scss/components/skeleton/_skeleton-text.scss
 delete mode 100644 scss/components/skeleton/_skeleton.scss
 delete mode 100644 scss/components/slider/_slider.scss
 delete mode 100644 scss/components/structured-list/_mixins.scss
 delete mode 100644 scss/components/structured-list/_structured-list.scss
 delete mode 100644 scss/components/tabs/_tabs.scss
 delete mode 100644 scss/components/tag/_mixins.scss
 delete mode 100644 scss/components/tag/_tag.scss
 delete mode 100644 scss/components/text-area/_text-area.scss
 delete mode 100644 scss/components/text-input/_text-input.scss
 delete mode 100644 scss/components/tile/_tile.scss
 delete mode 100644 scss/components/time-picker/_time-picker.scss
 delete mode 100644 scss/components/toggle/_toggle.scss
 delete mode 100644 scss/components/toolbar/_toolbar.scss
 delete mode 100644 scss/components/tooltip/_tooltip.scss
 delete mode 100644 scss/components/ui-shell/_content.scss
 delete mode 100644 scss/components/ui-shell/_functions.scss
 delete mode 100644 scss/components/ui-shell/_header.scss
 delete mode 100644 scss/components/ui-shell/_navigation-menu.scss
 delete mode 100644 scss/components/ui-shell/_product-switcher.scss
 delete mode 100644 scss/components/ui-shell/_side-nav.scss
 delete mode 100644 scss/components/ui-shell/_theme.scss
 delete mode 100644 scss/components/ui-shell/_ui-shell.scss
 delete mode 100644 scss/components/ui-shell/_variables.scss
 delete mode 100644 scss/components/unified-header/_account-switcher.scss
 delete mode 100644 scss/components/unified-header/_global-header.scss
 delete mode 100644 scss/components/unified-header/_left-nav-trigger.scss
 delete mode 100644 scss/components/unified-header/_left-nav.scss
 delete mode 100644 scss/components/unified-header/_mixins.scss
 delete mode 100644 scss/components/unified-header/_topnav.scss
 delete mode 100644 scss/components/unified-header/_unified-header.scss
 delete mode 100644 scss/globals/grid/_experimental.scss
 delete mode 100644 scss/globals/grid/_grid.scss
 delete mode 100644 scss/globals/grid/classic/_classic.scss
 delete mode 100644 scss/globals/scss/_colors.scss
 delete mode 100644 scss/globals/scss/_css--body.scss
 delete mode 100644 scss/globals/scss/_css--font-face.scss
 delete mode 100644 scss/globals/scss/_css--helpers.scss
 delete mode 100644 scss/globals/scss/_css--plex-core.scss
 delete mode 100644 scss/globals/scss/_css--reset.scss
 delete mode 100644 scss/globals/scss/_css--typography.scss
 delete mode 100644 scss/globals/scss/_feature-flags.scss
 delete mode 100644 scss/globals/scss/_functions.scss
 delete mode 100644 scss/globals/scss/_helper-classes.scss
 delete mode 100644 scss/globals/scss/_helper-mixins.scss
 delete mode 100644 scss/globals/scss/_import-once.scss
 delete mode 100644 scss/globals/scss/_layer.scss
 delete mode 100644 scss/globals/scss/_layout.scss
 delete mode 100644 scss/globals/scss/_mixins.scss
 delete mode 100644 scss/globals/scss/_motion.scss
 delete mode 100644 scss/globals/scss/_spacing.scss
 delete mode 100644 scss/globals/scss/_theme-tokens.scss
 delete mode 100644 scss/globals/scss/_theme.scss
 delete mode 100644 scss/globals/scss/_typography.scss
 delete mode 100644 scss/globals/scss/_vars.scss
 delete mode 100644 scss/globals/scss/styles.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/colors/scss/colors.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/colors/scss/mixins.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/elements.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/index.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/g10.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/g100.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/g90.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/themes/white.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/elements/scss/type/type.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/12.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/_col.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/_container.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/_prefix.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/_row.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/grid/scss/grid.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/import-once/scss/import-once.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_convert.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/_utilities.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/layout/scss/layout.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/motion/scss/motion.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/g10.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/g100.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/g90.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/mixins.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/themes.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/themes/scss/white.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_classes.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_font-family.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_prefix.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_reset.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_scale.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/_styles.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
 delete mode 100644 scss/globals/scss/vendor/@carbon/type/scss/type.scss
 delete mode 100644 src/components/toggle/_toggle.scss
 delete mode 100644 src/components/toggle/toggle--small.hbs
 delete mode 100644 src/globals/scss/_theme-tokens.scss

diff --git a/scss/components/accordion/_accordion.scss b/scss/components/accordion/_accordion.scss
deleted file mode 100644
index 2c6b7f3b64b9..000000000000
--- a/scss/components/accordion/_accordion.scss
+++ /dev/null
@@ -1,308 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-
-@mixin accordion {
-  .#{$prefix}--accordion {
-    @include reset;
-    @include font-family;
-    list-style: none;
-    width: 100%;
-  }
-
-  .#{$prefix}--accordion__item {
-    transition: all $transition--base $carbon--standard-easing;
-    border-top: 1px solid $ui-03;
-    overflow: hidden;
-
-    &:focus {
-      outline: none;
-
-      .#{$prefix}--accordion__arrow {
-        @include focus-outline('border');
-        overflow: visible; // safari fix
-        outline-offset: -0.5px; // safari fix
-      }
-    }
-
-    &:last-child {
-      border-bottom: 1px solid $ui-03;
-    }
-  }
-
-  .#{$prefix}--accordion__heading {
-    @include button-reset;
-    color: $text-01;
-    display: flex;
-    align-items: center;
-    justify-content: $accordion-justify-content;
-    flex-direction: $accordion-flex-direction;
-    cursor: pointer;
-    padding: $spacing-xs 0;
-
-    // new version of markup uses focus on the heading,
-    // not the list element itself
-    &:focus {
-      outline: none;
-
-      .#{$prefix}--accordion__arrow {
-        @include focus-outline('border');
-        overflow: visible; // safari fix
-        outline-offset: -0.5px; // safari fix
-      }
-    }
-  }
-
-  .#{$prefix}--accordion__arrow {
-    transition: all $transition--base $carbon--standard-easing;
-    height: 1.25rem;
-    width: 1.25rem;
-    padding: $spacing-2xs $spacing-3xs $spacing-2xs $spacing-2xs;
-    margin: $accordion-arrow-margin;
-    fill: $ui-05;
-    transform: rotate(0) /*rtl:rotate(180deg)*/;
-  }
-
-  .#{$prefix}--accordion__title {
-    @include typescale('epsilon');
-    @include line-height('body');
-    margin: $accordion-title-margin;
-    font-weight: 400;
-    text-align: left;
-  }
-
-  .#{$prefix}--accordion__content {
-    transition: all $transition--expansion $carbon--ease-out;
-    padding: $accordion-content-padding;
-    height: 0;
-    visibility: hidden;
-    opacity: 0;
-
-    p {
-      @include typescale('zeta');
-    }
-  }
-
-  .#{$prefix}--accordion__item--active {
-    overflow: visible;
-
-    > .#{$prefix}--accordion__content {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-lg;
-      height: auto;
-      visibility: visible;
-      opacity: 1;
-      transition: all $transition--expansion $carbon--ease-in;
-    }
-
-    > .#{$prefix}--accordion__heading > .#{$prefix}--accordion__arrow {
-      /*rtl:ignore*/
-      transform: rotate(90deg);
-      fill: $brand-01;
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
-    cursor: default;
-  }
-
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
-    pointer-events: none;
-    fill: $ui-05;
-    cursor: default;
-
-    &:hover,
-    &:focus,
-    &:active {
-      border: none;
-      outline: none;
-      cursor: default;
-    }
-  }
-
-  .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
-    border: none;
-    outline: none;
-    cursor: default;
-  }
-
-  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
-    margin-bottom: 0;
-  }
-}
-
-@mixin accordion--x {
-  .#{$prefix}--accordion {
-    @include reset;
-
-    list-style: none;
-    width: 100%;
-  }
-
-  .#{$prefix}--accordion__item {
-    transition: all $transition--base $carbon--standard-easing;
-    border-top: 1px solid $ui-03;
-    overflow: visible;
-
-    &:last-child {
-      border-bottom: 1px solid $ui-03;
-    }
-  }
-
-  .#{$prefix}--accordion__heading {
-    @include button-reset;
-    color: $text-01;
-    display: flex;
-    align-items: center;
-    justify-content: $accordion-justify-content;
-    cursor: pointer;
-    padding: rem(6px) 0;
-    flex-direction: $accordion-flex-direction;
-    position: relative;
-    width: 100%;
-    margin: 0;
-    transition: background-color motion(standard, productive) 100ms;
-
-    &:hover:before,
-    &:focus:before {
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: 0;
-      width: 100%;
-      height: calc(100% + 2px);
-    }
-
-    &:hover:before {
-      background-color: $hover-ui;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus:before {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--accordion__arrow {
-    @include focus-outline('reset');
-    // Without flex basis and flex shrink being set here, our icon width can go
-    // <16px and cause the icon to render in the incorrect artboard size
-    flex: 0 0 1rem;
-    width: 1rem;
-    height: 1rem;
-    margin: $accordion-arrow-margin;
-    fill: $ui-05;
-    // TODO: RTL rotate(180deg);
-    transform: rotate(90deg);
-    transition: all $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--accordion__title {
-    @include type-style('body-long-01');
-
-    margin: $accordion-title-margin;
-    width: 100%;
-    text-align: left;
-    z-index: 0;
-  }
-
-  .#{$prefix}--accordion__content {
-    // Transition property for when the accordion closes
-    transition: height motion(standard, productive) 120ms, padding motion(standard, productive) 120ms;
-    padding-left: $spacing-md;
-    padding-right: 25%;
-    height: 0;
-    visibility: hidden;
-    opacity: 0;
-
-    @include max-breakpoint('bp--xs--major') {
-      padding-right: $spacing-3xl;
-    }
-
-    p {
-      @include type-style('body-long-01');
-      height: 0;
-      transition: height motion(standard, productive) 120ms;
-    }
-  }
-
-  .#{$prefix}--accordion__item--active {
-    overflow: visible;
-
-    .#{$prefix}--accordion__content {
-      padding-bottom: $spacing-lg;
-      padding-top: $spacing-xs;
-      height: auto;
-      visibility: visible;
-      opacity: 1;
-      // Transition property for when the accordion opens
-      transition: height motion(entrance, productive) 120ms, padding-top motion(entrance, productive) 120ms,
-        padding-bottom motion(entrance, productive) 120ms;
-
-      p {
-        @include type-style('body-long-01');
-        height: auto;
-        transition: height motion(entrance, productive) 120ms;
-      }
-    }
-
-    .#{$prefix}--accordion__arrow {
-      /*rtl:ignore*/
-      transform: rotate(-90deg);
-      fill: $ui-05;
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
-    cursor: default;
-  }
-
-  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
-    pointer-events: none;
-    fill: $ui-05;
-    cursor: default;
-
-    &:hover,
-    &:focus,
-    &:active {
-      border: none;
-      outline: none;
-      cursor: default;
-    }
-  }
-
-  .#{$prefix}--skeleton .#{$prefix}--accordion__heading:focus .#{$prefix}--accordion__arrow {
-    border: none;
-    outline: none;
-    cursor: default;
-  }
-
-  .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {
-    margin-bottom: 0;
-  }
-}
-
-@include exports('accordion') {
-  @if feature-flag-enabled('components-x') {
-    @include accordion--x;
-  } @else {
-    @include accordion;
-  }
-}
diff --git a/scss/components/breadcrumb/_breadcrumb.scss b/scss/components/breadcrumb/_breadcrumb.scss
deleted file mode 100644
index 1aa1004266e0..000000000000
--- a/scss/components/breadcrumb/_breadcrumb.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/css--typography';
-@import '../link/link';
-
-@mixin breadcrumb {
-  .#{$prefix}--breadcrumb {
-    @include typescale('zeta');
-    @include font-family;
-    display: inline;
-
-    @include breakpoint(bp--xs--major) {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-
-  .#{$prefix}--breadcrumb-item {
-    margin-right: $spacing-md;
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--breadcrumb-item::after {
-    content: '/';
-    margin-left: $spacing-md;
-    color: $text-02;
-  }
-
-  .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
-    content: '';
-  }
-
-  .#{$prefix}--breadcrumb-item:last-child {
-    margin-right: 0;
-
-    &::after {
-      margin-right: 0;
-    }
-  }
-
-  .#{$prefix}--breadcrumb .#{$prefix}--link {
-    white-space: nowrap;
-    font-weight: 400;
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-
-    &:hover,
-    &:focus {
-      outline: none;
-      color: $hover-primary-text;
-      border-bottom: 1px solid $hover-primary-text;
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
-    @include skeleton;
-    width: rem(100px);
-    height: 1rem;
-  }
-}
-
-@mixin breadcrumb-experimental {
-  .#{$prefix}--breadcrumb {
-    @include typescale('zeta');
-    @include font-family;
-    display: inline;
-
-    @include breakpoint(bp--xs--major) {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-
-  .#{$prefix}--breadcrumb-item {
-    margin-right: $spacing-xs;
-    display: flex;
-    align-items: center;
-    line-height: 1.25; //needed for correct spacing for underline hover
-  }
-
-  .#{$prefix}--breadcrumb-item::after {
-    content: '/';
-    margin-left: $spacing-xs;
-    color: $text-02;
-  }
-
-  .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
-    content: '';
-  }
-
-  .#{$prefix}--breadcrumb-item:last-child {
-    margin-right: 0;
-
-    &::after {
-      margin-right: 0;
-    }
-  }
-
-  .#{$prefix}--breadcrumb .#{$prefix}--link {
-    white-space: nowrap;
-  }
-
-  // Skeleton State
-  .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
-    @include skeleton;
-    width: rem(100px);
-    height: 1rem;
-  }
-}
-
-@include exports('breadcrumb') {
-  @if feature-flag-enabled('components-x') {
-    @include breadcrumb-experimental;
-  } @else {
-    @include breadcrumb;
-  }
-}
diff --git a/scss/components/button/_button.scss b/scss/components/button/_button.scss
deleted file mode 100644
index 296cc57ca236..000000000000
--- a/scss/components/button/_button.scss
+++ /dev/null
@@ -1,315 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import 'mixins';
-@import '../../globals/scss/css--reset';
-
-@mixin button {
-  // <button> elements cannot be used as flex containers
-  button.#{$prefix}--btn {
-    display: inline-block;
-  }
-
-  // Reset intrisic padding in Firefox (see #731)
-  button.#{$prefix}--btn::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  // Vertically center icon inside <button>
-  button.#{$prefix}--btn .#{$prefix}--btn__icon {
-    position: relative;
-    vertical-align: middle;
-    top: -1px;
-
-    // Targets IE10+ browsers: Reset <svg> position for vertical centering
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      top: 0;
-    }
-  }
-
-  .#{$prefix}--btn {
-    @include button-base;
-  }
-
-  .#{$prefix}--btn--primary {
-    @include button-theme($brand-01, transparent, $inverse-01, $hover-primary, $ui-01);
-  }
-
-  .#{$prefix}--btn--secondary {
-    @include button-theme(transparent, $brand-01, $brand-01, $hover-secondary, $brand-01);
-
-    &:hover,
-    &:focus {
-      color: $inverse-01;
-    }
-
-    &:active {
-      color: $brand-01;
-    }
-
-    &:hover > .#{$prefix}--btn__icon,
-    &:focus > .#{$prefix}--btn__icon {
-      fill: $inverse-01;
-    }
-
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--btn--tertiary {
-    @include button-theme(transparent, $ui-05, $ui-05, $ui-05, $ui-05);
-
-    &:hover,
-    &:focus {
-      color: $inverse-01;
-    }
-
-    &:active {
-      color: $ui-05;
-    }
-
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $ui-05;
-    }
-
-    &:hover > .#{$prefix}--btn__icon,
-    &:focus > .#{$prefix}--btn__icon {
-      fill: $inverse-01;
-    }
-  }
-
-  .#{$prefix}--btn--ghost {
-    @include button-theme(transparent, transparent, $brand-01, $brand-01, $brand-01);
-
-    &:hover,
-    &:focus {
-      color: $inverse-01;
-
-      .#{$prefix}--btn__icon {
-        fill: $inverse-01;
-      }
-    }
-
-    &:active {
-      color: $ui-05;
-    }
-
-    .#{$prefix}--btn__icon {
-      margin-left: $spacing-xs;
-    }
-
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $brand-01;
-
-      .#{$prefix}--btn__icon {
-        fill: $brand-01;
-      }
-    }
-  }
-
-  .#{$prefix}--btn--danger {
-    @include button-theme(transparent, $support-01, $support-01, $support-01, $support-01);
-
-    &:hover {
-      color: $inverse-01;
-      border: $button-border-width solid transparent;
-    }
-
-    &:focus {
-      color: $inverse-01;
-    }
-
-    &:active {
-      color: $support-01;
-    }
-
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $support-01;
-      border: $button-border-width solid $support-01;
-    }
-
-    &:hover > .#{$prefix}--btn__icon,
-    &:focus > .#{$prefix}--btn__icon {
-      fill: $inverse-01;
-    }
-  }
-
-  .#{$prefix}--btn--danger--primary {
-    @include button-theme($support-01, transparent, $inverse-01, darken($support-01, 10%), $ui-01);
-
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $ui-01;
-      border: $button-border-width solid $support-01;
-    }
-  }
-
-  .#{$prefix}--btn--sm {
-    @include letter-spacing;
-    height: 2rem;
-    padding: $button-padding-sm;
-  }
-
-  .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
-  .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger--primary {
-    margin-left: $spacing-md;
-  }
-
-  // Skeleton State
-  .#{$prefix}--btn.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(150px);
-  }
-}
-
-@mixin button--x {
-  // <button> elements cannot be used as flex containers
-  button.#{$prefix}--btn {
-    display: inline-block;
-
-    &:disabled > .#{$prefix}--btn__icon {
-      fill: $ui-04;
-    }
-  }
-
-  // Reset intrisic padding in Firefox (see #731)
-  button.#{$prefix}--btn::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  .#{$prefix}--btn {
-    @include button-base--x;
-  }
-
-  .#{$prefix}--btn--primary {
-    @include button-theme--x($interactive-01, transparent, $text-04, #0353e9, $text-04, $interactive-02);
-  }
-
-  .#{$prefix}--btn--secondary {
-    @include button-theme--x(
-      $ibm-colors__gray-80,
-      $ibm-colors__gray-80,
-      $text-04,
-      $ibm-colors__gray-70,
-      $text-04,
-      $ibm-colors__gray-60
-    );
-
-    &:hover,
-    &:focus {
-      color: $inverse-01;
-    }
-  }
-
-  .#{$prefix}--btn--tertiary {
-    @include button-theme--x(transparent, $interactive-01, $interactive-01, #0353e9, $interactive-01, $interactive-02);
-    position: relative;
-
-    &:hover {
-      color: $inverse-01;
-    }
-
-    &:disabled,
-    &:hover:disabled,
-    &:focus:disabled {
-      background: transparent;
-      color: $disabled;
-
-      & > .#{$prefix}--btn__icon {
-        fill: $disabled;
-      }
-    }
-
-    &:hover > .#{$prefix}--btn__icon {
-      fill: $inverse-01;
-    }
-  }
-
-  .#{$prefix}--btn--ghost {
-    @include button-theme--x(
-      transparent,
-      transparent,
-      $interactive-03,
-      $ibm-colors__gray-10,
-      $interactive-03,
-      $ibm-colors__blue-70
-    );
-
-    &:hover,
-    &:active {
-      color: $ibm-colors__blue-70;
-
-      .#{$prefix}--btn__icon {
-        fill: $ibm-colors__blue-70;
-      }
-    }
-
-    &:active {
-      background-color: $active-ui;
-    }
-
-    .#{$prefix}--btn__icon {
-      margin-left: $spacing-xs;
-    }
-
-    &:disabled,
-    &:hover:disabled,
-    &:focus:disabled {
-      color: $disabled;
-      background: transparent;
-      border-color: transparent;
-
-      .#{$prefix}--btn__icon {
-        fill: $disabled;
-      }
-    }
-  }
-
-  .#{$prefix}--btn--danger {
-    @include button-theme--x($support-01, $support-01, $text-04, $hover-danger, $text-04, $active-danger);
-
-    &:hover {
-      border: $button-border-width solid transparent;
-    }
-  }
-
-  .#{$prefix}--btn--sm {
-    @include letter-spacing;
-    height: rem(32px);
-    padding: $button-padding-sm;
-  }
-
-  .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
-  .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger {
-    margin-left: $spacing-md;
-  }
-
-  // Skeleton State
-  .#{$prefix}--btn.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(150px);
-  }
-}
-
-@include exports('button') {
-  @if feature-flag-enabled('components-x') {
-    @include button--x;
-  } @else {
-    @include button;
-  }
-}
diff --git a/scss/components/button/_mixins.scss b/scss/components/button/_mixins.scss
deleted file mode 100644
index ad32967f0a1d..000000000000
--- a/scss/components/button/_mixins.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/typography';
-
-@mixin button-base {
-  @include reset;
-  @include font-family;
-  @include font-smoothing;
-  @include letter-spacing;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: $button-font-size;
-  font-weight: $button-font-weight;
-  height: rem($button-height);
-  padding: $button-padding;
-  border-radius: $button-border-radius;
-  text-align: center;
-  text-decoration: none;
-  transition-duration: $transition--base;
-  transition-timing-function: ease-in;
-  white-space: nowrap;
-  line-height: 16px;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--btn__icon {
-    width: rem(16px);
-    height: rem(16px);
-    margin-left: 0.5rem;
-    transition-duration: $transition--base;
-    transition-timing-function: ease-in;
-  }
-}
-
-@mixin button-theme($bg-color, $border-color, $font-color, $hover-bg-color, $icon-color) {
-  background-color: $bg-color;
-  border-width: $button-border-width;
-  border-style: solid;
-  border-color: $border-color;
-  color: $font-color;
-
-  &:focus,
-  &:hover {
-    background-color: $hover-bg-color;
-  }
-
-  &:focus {
-    border: $button-border-width solid $ui-02;
-    outline: $button-border-width solid $hover-bg-color;
-  }
-
-  &:disabled:hover,
-  &:disabled:focus {
-    background-color: $bg-color;
-  }
-
-  &:active {
-    background-color: darken($bg-color, 20%);
-  }
-
-  .#{$prefix}--btn__icon {
-    fill: $icon-color;
-  }
-}
-
-@mixin button-base--x {
-  @include reset;
-  @include type-style('body-short-01');
-
-  cursor: pointer;
-  flex-shrink: 0;
-  height: rem($button-height);
-  padding: $button-padding;
-  border-radius: $button-border-radius;
-  text-align: left;
-  text-decoration: none;
-  transition-duration: $transition--base;
-  transition-timing-function: ease-in;
-  outline: $button-outline-width solid transparent;
-  position: relative;
-  max-width: rem(320px);
-  min-width: rem(80px);
-
-  &:disabled {
-    cursor: not-allowed;
-    color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
-  }
-
-  .#{$prefix}--btn__icon {
-    width: rem(16px);
-    height: rem(16px);
-    transition-duration: $transition--base;
-    transition-timing-function: ease-in;
-    position: absolute;
-    right: rem(16px);
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-@mixin button-theme--x($bg-color, $border-color, $font-color, $hover-bg-color, $icon-color, $active-color) {
-  background-color: $bg-color;
-  border-width: $button-border-width;
-  border-style: solid;
-  border-color: $border-color;
-  color: $font-color;
-
-  &:hover {
-    background-color: $hover-bg-color;
-  }
-
-  &::before,
-  &::after {
-    box-sizing: border-box;
-    position: absolute;
-    content: '';
-    transition-duration: $transition--base;
-    transition-timing-function: ease-in;
-  }
-
-  &::before {
-    top: calc(-#{$button-border-width} + #{$button-outline-width});
-    left: -$button-border-width + $button-outline-width;
-    width: calc(100% + (2 * #{$button-border-width}) - (2 * #{$button-outline-width}));
-    height: calc(100% + (2 * #{$button-border-width}) - (2 * #{$button-outline-width}));
-    border: 1px solid transparent;
-  }
-
-  &:focus::before {
-    border-color: $ui-02;
-  }
-
-  &::after {
-    top: -#{$button-border-width};
-    left: -#{$button-border-width};
-    height: calc(100% + 2 * #{$button-border-width});
-    width: calc(100% + 2 * #{$button-border-width});
-    border: $button-outline-width solid transparent;
-  }
-
-  &:focus::after {
-    border-color: $focus;
-  }
-
-  &:disabled:hover,
-  &:disabled:focus {
-    color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
-    text-decoration: none;
-  }
-
-  &:active {
-    background-color: $active-color;
-  }
-
-  .#{$prefix}--btn__icon {
-    fill: $icon-color;
-  }
-}
diff --git a/scss/components/carousel/_carousel.scss b/scss/components/carousel/_carousel.scss
deleted file mode 100644
index e332e504c70a..000000000000
--- a/scss/components/carousel/_carousel.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-
-@mixin carousel {
-  @include deprecate(
-    'The `carousel` component in `carbon-components` has been deprecated. ' + 'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--carousel {
-      display: flex;
-      align-items: center;
-    }
-    .#{$prefix}--carousel-container {
-      max-width: rem(810px);
-      overflow: hidden;
-      padding: 0 1px;
-    }
-    .#{$prefix}--filmstrip {
-      display: flex;
-      justify-content: space-between;
-      transition: transform 100ms $carbon--ease-in;
-      padding: rem(24px) 0;
-      width: auto;
-    }
-    .#{$prefix}--filmstrip-btn {
-      @include button-reset;
-      height: rem(20px);
-      width: rem(20px);
-      margin-bottom: 1rem;
-      margin-right: rem(3px);
-      margin-left: rem(3px);
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      &:focus {
-        @include focus-outline;
-      }
-    }
-
-    .#{$prefix}--carousel__btn {
-      @include button-reset(false);
-      cursor: pointer;
-      padding: 0;
-
-      &:first-child {
-        margin-right: 1.25rem;
-      }
-
-      &:last-child {
-        margin-left: 1.25rem;
-      }
-
-      &:focus {
-        @include focus-outline;
-      }
-
-      &:last-of-type {
-        transform: rotate(180deg);
-      }
-
-      svg {
-        height: rem(24px);
-        width: rem(16px);
-        fill: $brand-01;
-      }
-    }
-    .#{$prefix}--carousel__item {
-      @include button-reset;
-      padding: 0;
-      line-height: 0;
-      margin-right: rem(20px);
-      cursor: pointer;
-
-      &:hover,
-      &:focus {
-        @include focus-outline;
-      }
-    }
-    .#{$prefix}--carousel__item--active {
-      @include focus-outline;
-    }
-  }
-}
-
-@include exports('carousel') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include carousel;
-  }
-}
diff --git a/scss/components/checkbox/_checkbox.scss b/scss/components/checkbox/_checkbox.scss
deleted file mode 100644
index 8f6bfba88a83..000000000000
--- a/scss/components/checkbox/_checkbox.scss
+++ /dev/null
@@ -1,349 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-@import '../../globals/scss/css--reset';
-
-@mixin checkbox {
-  .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-bottom: $spacing-md;
-
-    &:first-of-type {
-      margin-top: $spacing-xs;
-    }
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
-  .#{$prefix}--checkbox {
-    @include hidden;
-  }
-
-  .#{$prefix}--checkbox-label {
-    @include reset;
-    @include font-family;
-    @include font-smoothing;
-    @include typescale('zeta');
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    padding-left: $spacing-lg;
-    min-height: rem(16px);
-  }
-
-  .#{$prefix}--checkbox-label::before {
-    box-sizing: border-box;
-    content: '';
-    position: absolute;
-    left: 0;
-    top: calc(50% - 9px);
-    height: rem(18px);
-    width: rem(18px);
-    border: $checkbox-border-width solid $ui-05;
-    background-color: $ui-01;
-  }
-
-  // Checkmark
-  .#{$prefix}--checkbox-label::after {
-    box-sizing: border-box;
-    content: '';
-    width: 9px;
-    height: 5px;
-    background: none;
-    /*rtl:ignore*/
-    border-left: 1px solid $inverse-01;
-    border-bottom: 1px solid $inverse-01;
-    /*rtl:ignore*/
-    transform: scale(0) rotate(-45deg);
-    position: absolute;
-    left: rem(5px);
-    top: 50%;
-    margin-top: rem(-3px);
-  }
-
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before {
-    background-color: $brand-01;
-    border-color: $brand-01;
-  }
-
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    opacity: 1;
-    /*rtl:ignore*/
-    transform: scale(1) rotate(-45deg);
-  }
-
-  .#{$prefix}--checkbox:not(:checked) + .#{$prefix}--checkbox-label::after {
-    opacity: 0;
-    /*rtl:ignore*/
-    transform: scale(0) rotate(-45deg);
-  }
-
-  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label__focus::before {
-    @include focus-outline('blurred');
-  }
-
-  // Indeterminate dash
-  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::after {
-    transform: scale(1) rotate(0deg);
-    /*rtl:ignore*/
-    border-left: 0 solid $inverse-01;
-    border-bottom: 2px solid $inverse-01;
-    opacity: 1;
-    width: rem(10px);
-    margin-top: rem(-4px);
-    left: rem(4px);
-  }
-
-  //Disabled
-  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
-  .#{$prefix}--checkbox:disabled ~ .#{$prefix}--checkbox-label-text,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--checkbox-appearance {
-    position: absolute;
-    left: 0;
-    top: calc(50% - 9px);
-    display: inline-block;
-    height: rem(18px);
-    width: rem(18px);
-    margin-right: $spacing-xs;
-    background-color: $ui-01;
-    border: $checkbox-border-width solid $ui-05;
-    min-width: rem(18px);
-  }
-
-  // Backwards compatibilty for old checkbox html using .#{$prefix}--checkbox-appearance
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label .#{$prefix}--checkbox-appearance {
-    top: rem(-1px);
-  }
-
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-appearance,
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label .#{$prefix}--checkbox-appearance {
-    display: flex;
-    align-items: baseline;
-    background-color: $brand-01;
-    border-color: $brand-01;
-  }
-
-  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label .#{$prefix}--checkbox-appearance,
-  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-appearance {
-    @include focus-outline('blurred');
-  }
-
-  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-appearance {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--checkbox-checkmark {
-    display: none;
-    fill: $inverse-01;
-    width: 100%;
-    height: 100%;
-  }
-
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-appearance .#{$prefix}--checkbox-checkmark,
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label .#{$prefix}--checkbox-appearance .#{$prefix}--checkbox-checkmark {
-    display: block;
-
-    @-moz-document url-prefix() {
-      & {
-        stroke: $brand-01;
-      }
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--checkbox-label.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(100px);
-    height: rem(18px);
-
-    &:after,
-    &:before {
-      border: none;
-    }
-  }
-}
-
-@mixin checkbox--x {
-  // Spacing between checkboxes
-  .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-bottom: rem(6px);
-  }
-
-  // Spacing above collection of checkboxes
-  .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type {
-    margin-top: rem(3px);
-  }
-
-  // Spacing below collection of checkboxes
-  .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
-    margin-bottom: rem(3px);
-  }
-
-  // Visually, we'll hide the checkbox input and create our own styled version
-  // to match the specs.
-  .#{$prefix}--checkbox {
-    @include hidden;
-  }
-
-  // The label corresponds to the content inside of the `label` tag. Since we're
-  // creating our own checkbox style, we'll need to position this in order to
-  // accomodate the spacing needed for the checkbox.
-  .#{$prefix}--checkbox-label {
-    @include reset;
-    @include type-style('body-short-01');
-
-    line-height: 1.5rem;
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    padding-left: rem(26px); //width of checkbox 16px + 10px of padding
-    min-height: rem(24px);
-    user-select: none;
-  }
-
-  // Spacing for presentational checkbox
-  .#{$prefix}--checkbox-label::before {
-    box-sizing: border-box;
-    content: '';
-
-    // According to the spec, we'll want the bounding box for our checkbox to
-    // be 16px. The border size will be what will be updated during the
-    // different checkbox states.
-    width: rem(16px);
-    height: rem(16px);
-    margin: rem(2px);
-
-    // We need to position the pseudo-element absolutely in the space that we've
-    // created with the padding from the label itself. We position only with
-    // `top` since we don't want the checkbox to be centered vertically with the
-    // text overflows.
-    position: absolute;
-    left: 0;
-    top: rem(2px);
-
-    // Checkboxes with a background color look visually off against a parent container.
-    background-color: transparent;
-    border: 1px solid $ui-05;
-    border-radius: 2px;
-  }
-
-  // Create the appearance of the check in the `after` pseudo-element
-  .#{$prefix}--checkbox-label::after {
-    content: '';
-    position: absolute;
-    left: rem(6px);
-    top: rem(8px);
-    width: rem(7px);
-    height: rem(3px);
-    background: none;
-    border-left: 2px solid $ui-02;
-    border-bottom: 2px solid $ui-02;
-    transform: scale(0) rotate(-45deg);
-    transform-origin: bottom right;
-    margin-top: rem(-3px);
-  }
-
-  //----------------------------------------------
-  // Checked
-  // ---------------------------------------------
-
-  // Update properties for checked checkbox
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before {
-    background-color: $text-01;
-    border-color: $text-01;
-    border-width: 1px;
-  }
-
-  // Display the check
-  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg);
-  }
-
-  // Indeterminate symbol
-  .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::after {
-    transform: scale(1) rotate(0deg);
-    border-left: 0 solid $inverse-01;
-    border-bottom: 1.5px solid $inverse-01;
-    width: rem(8px);
-    top: rem(11px);
-  }
-
-  //----------------------------------------------
-  // Focus
-  // ---------------------------------------------
-
-  // Unchecked
-  .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label__focus::before,
-  // Checked
-  .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before,
-  // Indeterminate
-  .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
-    // We can't use outline here because of the rounded corners so have to increase the width/height to fake an outline.
-    border-color: $interactive-01;
-    border-width: 3px;
-    width: rem(20px);
-    height: rem(20px);
-    left: -2px;
-    top: 0;
-  }
-
-  //----------------------------------------------
-  // Disabled
-  // ---------------------------------------------
-
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
-  }
-
-  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] {
-    cursor: not-allowed;
-    color: $text-03;
-  }
-
-  .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label::before,
-  .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true']::before {
-    border-color: $text-03;
-  }
-}
-
-@include exports('checkbox') {
-  @if feature-flag-enabled('components-x') {
-    @include checkbox--x;
-  } @else {
-    @include checkbox;
-  }
-}
diff --git a/scss/components/code-snippet/_code-snippet.scss b/scss/components/code-snippet/_code-snippet.scss
deleted file mode 100644
index 29113974971a..000000000000
--- a/scss/components/code-snippet/_code-snippet.scss
+++ /dev/null
@@ -1,596 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import 'mixins';
-
-@mixin snippet {
-  .#{$prefix}--snippet code {
-    font-family: $font-family-mono;
-  }
-
-  // Inline Code Snippet
-  .#{$prefix}--snippet--inline {
-    @include reset;
-    position: relative;
-    display: inline;
-    padding: 0;
-    background: transparent;
-    font-size: inherit;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    background-color: $field-01;
-    color: $text-01;
-    font-size: 85%;
-    cursor: pointer;
-
-    &:hover {
-      background-color: darken($field-01, 10%);
-    }
-
-    &:focus {
-      @include focus-outline;
-      outline: none;
-      border: 1px solid $brand-01;
-    }
-  }
-
-  .#{$prefix}--snippet--inline code {
-    padding: rem(1px) $spacing-xs;
-  }
-
-  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
-    background-color: $field-02;
-
-    &:hover {
-      background-color: rgba($brand-02, 0.1);
-    }
-  }
-
-  // Single Line Snippet
-  .#{$prefix}--snippet--single {
-    @include bx--snippet;
-    height: rem(56px);
-    padding: 0 $spacing-2xl 0 $spacing-md;
-  }
-
-  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
-    display: flex;
-    align-items: center;
-    height: 130%;
-    overflow-x: scroll;
-    position: relative;
-    padding-bottom: $spacing-md;
-  }
-
-  .#{$prefix}--snippet--single pre {
-    white-space: nowrap;
-  }
-
-  // Multi Line Snippet
-  .#{$prefix}--snippet--multi {
-    @include bx--snippet;
-    padding: $spacing-md $spacing-3xl $spacing-xl $spacing-lg;
-  }
-
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
-    overflow: hidden;
-    position: relative;
-    max-height: rem(238px);
-    min-height: rem(56px);
-    transition: all $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--snippet--expand.#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
-    max-height: rem(1500px);
-  }
-
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    white-space: pre-wrap;
-  }
-
-  .#{$prefix}--snippet__icon {
-    fill: $brand-01;
-    height: rem(24px);
-    width: rem(18px);
-    transition: all $transition--base $carbon--standard-easing;
-
-    &:hover {
-      fill: $hover-primary;
-    }
-  }
-
-  .#{$prefix}--snippet-button {
-    @include reset;
-    cursor: pointer;
-    position: absolute;
-    top: 0.675rem;
-    right: 0.5rem;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    padding: 0;
-    height: rem(32px);
-    width: rem(32px);
-    overflow: visible;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--snippet .#{$prefix}--btn--copy__feedback {
-    @include font-family;
-    z-index: z('overlay');
-    font-weight: 400;
-    left: inherit;
-    top: 0.75rem;
-    right: 1.25rem;
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
-
-  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    top: rem(25px);
-    left: 1rem;
-    right: auto;
-  }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-    left: 50%;
-  }
-
-  // Show more / less button
-  .#{$prefix}--snippet-btn--expand {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-  }
-
-  .#{$prefix}--snippet-btn--expand--hide .#{$prefix}--snippet-btn--expand {
-    display: none;
-  }
-
-  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    fill: $brand-01;
-    margin-left: $spacing-2xs;
-    transform: rotate(0deg);
-    transition: $transition--base;
-  }
-
-  .#{$prefix}--snippet-btn--expand:hover .#{$prefix}--icon-chevron--down,
-  .#{$prefix}--snippet-btn--expand:focus .#{$prefix}--icon-chevron--down {
-    fill: $inverse-01;
-  }
-
-  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    transform: rotate(180deg);
-  }
-
-  // Skeleton
-
-  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton span {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-    margin-top: 0.5rem;
-
-    &:first-child {
-      margin: 0;
-    }
-
-    &:nth-child(2) {
-      width: 85%;
-    }
-
-    &:nth-child(3) {
-      width: 95%;
-    }
-  }
-
-  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    padding-bottom: 0;
-  }
-
-  /*
-    Deprecated class names will be removed in v10.x
-  */
-
-  .#{$prefix}--snippet--terminal {
-    @include bx--snippet;
-    height: rem(56px);
-    padding: 0 $spacing-2xl 0 $spacing-md;
-  }
-
-  .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container {
-    display: flex;
-    align-items: center;
-    height: 130%;
-    white-space: nowrap;
-    overflow-x: scroll;
-    position: relative;
-    padding-bottom: $spacing-md;
-  }
-
-  .#{$prefix}--snippet--code {
-    @include bx--snippet;
-    padding: $spacing-md $spacing-3xl $spacing-md $spacing-lg;
-  }
-
-  .#{$prefix}--snippet--code .#{$prefix}--snippet-container {
-    overflow: hidden;
-    position: relative;
-    max-height: rem(254px);
-    min-height: rem(56px);
-    transition: all $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--snippet--expand.#{$prefix}--snippet--code .#{$prefix}--snippet-container {
-    max-height: rem(1500px);
-  }
-
-  .#{$prefix}--snippet--code .#{$prefix}--snippet-container pre {
-    white-space: pre-wrap;
-  }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
-}
-
-@mixin snippet--x {
-  .#{$prefix}--snippet code {
-    font-family: $font-family-mono;
-  }
-
-  // Inline Code Snippet
-  .#{$prefix}--snippet--inline {
-    @include reset;
-    // Note: originally this inline snippet inherited font-size, we might need
-    // a more flexible strategy than explicitly setting font-size with this
-    // type style
-    @include type-style('code-01');
-
-    position: relative;
-    display: inline;
-    padding: 0;
-    border: 2px solid transparent;
-    border-radius: 4px;
-    background-color: $ui-01;
-    color: $text-01;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $ui-03;
-    }
-
-    &:active {
-      background-color: $copy-active;
-    }
-
-    &:focus {
-      outline: none;
-      border: 2px solid $interactive-01;
-    }
-  }
-
-  .#{$prefix}--snippet--inline code {
-    padding: 0 $spacing-xs;
-  }
-
-  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
-    background-color: $field-02;
-
-    &:hover {
-      background-color: rgba($interactive-02, 0.1);
-    }
-  }
-
-  // Single Line Snippet
-  .#{$prefix}--snippet--single {
-    @include bx--snippet--x;
-    border: none;
-    max-width: rem(760px);
-    min-width: rem(320px);
-    height: $spacing-2xl;
-    padding: 0 56px 0 $spacing-md;
-  }
-
-  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
-    display: flex;
-    align-items: center;
-    overflow-x: scroll;
-    position: relative;
-    padding: 0 0 $spacing-md 0;
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet--single pre {
-    white-space: nowrap;
-  }
-
-  // Multi Line Snippet
-  .#{$prefix}--snippet--multi {
-    @include bx--snippet--x;
-    border: none;
-    padding: $spacing-md;
-    min-width: rem(320px);
-    max-width: 100%;
-  }
-
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
-    overflow: hidden;
-    position: relative;
-    max-height: rem(238px);
-    min-height: rem(56px);
-    transition: all $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--snippet--expand.#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
-    max-height: rem(1500px);
-  }
-
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    white-space: pre-wrap;
-  }
-
-  //Copy Button
-  .#{$prefix}--snippet__icon {
-    fill: $icon-01;
-    height: rem(16px);
-    width: rem(16px);
-    transition: all $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--snippet-button {
-    @include reset;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    padding: 0;
-    height: $spacing-2xl;
-    width: $spacing-2xl;
-    overflow: visible;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    height: $spacing-xl;
-    width: $spacing-xl;
-    top: $spacing-xs;
-    right: $spacing-xs;
-  }
-
-  .#{$prefix}--snippet-button:hover {
-    background: $hover-ui;
-  }
-
-  .#{$prefix}--snippet-button:active {
-    background-color: $copy-active;
-  }
-
-  .#{$prefix}--btn--copy__feedback {
-    @include font-family;
-    z-index: z('overlay');
-    font-weight: 400;
-    left: inherit;
-    top: 0.75rem;
-    right: 1.25rem;
-  }
-
-  .#{$prefix}--btn--copy__feedback:before,
-  .#{$prefix}--btn--copy__feedback:after {
-    background: $copy-btn-feedback;
-  }
-
-  .#{$prefix}--btn--copy__feedback:after {
-    border: none;
-  }
-
-  // Show more / less button
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-    display: inline-flex;
-    align-items: center;
-    position: absolute;
-    right: $spacing-xs;
-    bottom: $spacing-xs;
-    padding: $spacing-xs;
-    padding-left: $spacing-md;
-    color: $text-01;
-  }
-
-  .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
-    display: none;
-  }
-
-  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    fill: $text-01;
-    margin-left: $spacing-xs;
-    margin-bottom: rem(1px);
-    transform: rotate(0deg);
-    transition: $transition--base;
-  }
-
-  .#{$prefix}--snippet-btn--expand:hover {
-    background: $hover-ui;
-    color: $text-01;
-  }
-
-  .#{$prefix}--snippet-btn--expand:active {
-    background-color: $copy-active;
-  }
-
-  .#{$prefix}--snippet-btn--expand:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
-    transform: rotate(180deg);
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
-
-  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    top: rem(25px);
-    left: 1rem;
-    right: auto;
-  }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-    left: 50%;
-  }
-
-  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton span {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-    margin-top: 0.5rem;
-
-    &:first-child {
-      margin: 0;
-    }
-
-    &:nth-child(2) {
-      width: 85%;
-    }
-
-    &:nth-child(3) {
-      width: 95%;
-    }
-  }
-
-  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    padding-bottom: 0;
-  }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
-}
-
-@include exports('snippet') {
-  @if feature-flag-enabled('components-x') {
-    @include snippet--x;
-  } @else {
-    @include snippet;
-  }
-}
diff --git a/scss/components/code-snippet/_mixins.scss b/scss/components/code-snippet/_mixins.scss
deleted file mode 100644
index d6460b5e85bd..000000000000
--- a/scss/components/code-snippet/_mixins.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/typography';
-
-@mixin bx--snippet {
-  @include typescale('omega');
-  line-height: 1.45;
-  background: $snippet-background-color;
-  border: 1px solid $snippet-border-color;
-  font-family: $font-family-mono;
-  position: relative;
-  max-width: rem(600px);
-  width: 100%;
-}
-
-@mixin bx--snippet--x {
-  @include type-style('code-01');
-  background: $snippet-background-color;
-  border: 1px solid $snippet-border-color;
-  position: relative;
-  max-width: rem(600px);
-  width: 100%;
-}
diff --git a/scss/components/combo-box/_combo-box.scss b/scss/components/combo-box/_combo-box.scss
deleted file mode 100644
index 0be441d98a59..000000000000
--- a/scss/components/combo-box/_combo-box.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// ComboBox
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../list-box/list-box';
-
-@mixin combo-box {
-  .#{$prefix}--combo-box > .#{$prefix}--list-box__field {
-    padding: 0;
-  }
-}
-
-@mixin combo-box--x {
-  .#{$prefix}--combo-box > .#{$prefix}--list-box__field[disabled] > .#{$prefix}--list-box__menu-icon,
-  .#{$prefix}--combo-box > .#{$prefix}--list-box__field[disabled] > .#{$prefix}--list-box__menu-icon--open {
-    display: none;
-  }
-
-  .#{$prefix}--combo-box > .#{$prefix}--list-box__field {
-    padding: 0;
-  }
-
-  .#{$prefix}--combo-box.#{$prefix}--list-box {
-    border-bottom: none;
-  }
-}
-
-@include exports('combo-box') {
-  @if feature-flag-enabled('components-x') {
-    @include combo-box--x;
-  } @else {
-    @include combo-box;
-  }
-}
diff --git a/scss/components/content-switcher/_content-switcher.scss b/scss/components/content-switcher/_content-switcher.scss
deleted file mode 100644
index 5d946ac0ec38..000000000000
--- a/scss/components/content-switcher/_content-switcher.scss
+++ /dev/null
@@ -1,218 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/import-once';
-
-@mixin content-switcher {
-  .#{$prefix}--content-switcher {
-    @include font-family;
-    display: flex;
-    height: rem(40px);
-  }
-
-  .#{$prefix}--content-switcher-btn {
-    @include reset;
-    @include font-smoothing;
-    @include typescale('zeta');
-    @include font-family;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-    padding: 0 $spacing-xl;
-    margin: 0;
-    text-decoration: none;
-    border: 1px solid $brand-01;
-    color: $brand-01;
-
-    &:focus {
-      outline: 1px solid transparent;
-      background-color: $hover-primary;
-      z-index: 2;
-      border-color: $hover-primary;
-      text-decoration: underline;
-      color: $inverse-01;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover,
-    &:active {
-      background-color: $hover-primary;
-      border-color: $hover-primary;
-      color: $inverse-01;
-    }
-  }
-
-  .#{$prefix}--content-switcher__icon {
-    margin-right: $spacing-xs;
-    fill: currentColor;
-    // need to color any child path or g
-    * {
-      fill: currentColor;
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn:not(:last-of-type) {
-    border-right: none;
-  }
-
-  .#{$prefix}--content-switcher-btn:not(:first-of-type) {
-    border-left: $content-switcher-option-border;
-
-    &:hover {
-      border-left-color: $hover-primary;
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn:first-of-type {
-    border-bottom-left-radius: $content-switcher-border-radius;
-    border-top-left-radius: $content-switcher-border-radius;
-
-    &:hover {
-      border-color: $hover-primary;
-    }
-
-    &:focus {
-      z-index: 0;
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn:last-of-type {
-    border-top-right-radius: $content-switcher-border-radius;
-    border-bottom-right-radius: $content-switcher-border-radius;
-
-    &:hover {
-      border-color: $hover-primary;
-    }
-
-    &:focus {
-      z-index: 0;
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
-    background-color: $brand-01;
-    color: $inverse-01;
-    font-weight: 400;
-    outline: 1px solid transparent;
-
-    &:hover,
-    &:focus {
-      border-color: $hover-primary;
-      background-color: $hover-primary;
-    }
-  }
-}
-
-@mixin content-switcher--x {
-  .#{$prefix}--content-switcher {
-    display: flex;
-    height: rem(32px);
-  }
-
-  .#{$prefix}--content-switcher-btn {
-    @include reset;
-    @include type-style('body-short-01');
-    @include focus-outline('reset');
-
-    background-color: $ui-01;
-    display: flex;
-    align-items: center;
-    padding: $spacing-xs $spacing-xl;
-    margin: 0;
-    text-decoration: none;
-    border: none;
-    color: $text-02;
-    transition: all $transition--base $carbon--standard-easing;
-    position: relative;
-
-    &:focus {
-      @include focus-outline('outline');
-      color: $text-01;
-      z-index: 3;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover,
-    &:active {
-      background-color: $hover-ui;
-      color: $text-01;
-      z-index: 3;
-    }
-
-    &:disabled {
-      color: $ui-03;
-
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn:not(:last-of-type)::after {
-    content: '';
-    display: block;
-    height: rem(16px);
-    width: rem(1px);
-    background-color: $content-switcher-divider;
-    position: absolute;
-    z-index: 2;
-    right: rem(-1px);
-  }
-
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::after,
-  .#{$prefix}--content-switcher-btn:focus::after,
-  .#{$prefix}--content-switcher-btn:hover::after {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--content-switcher__icon {
-    fill: $text-02;
-    transition: fill $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--content-switcher__icon + span {
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
-  .#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon {
-    fill: $text-01;
-  }
-
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
-    background-color: $ui-05;
-    color: $inverse-01;
-    z-index: 3;
-
-    // TODO: replace with new disabled color token when finalized
-    &:disabled {
-      background-color: $ibm-colors__gray-30;
-    }
-  }
-
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected .#{$prefix}--content-switcher__icon {
-    fill: $inverse-01;
-  }
-}
-
-@include exports('content-switcher') {
-  @if feature-flag-enabled('components-x') {
-    @include content-switcher--x;
-  } @else {
-    @include content-switcher;
-  }
-}
diff --git a/scss/components/copy-button/_copy-button.scss b/scss/components/copy-button/_copy-button.scss
deleted file mode 100644
index 6fdd1f9ba532..000000000000
--- a/scss/components/copy-button/_copy-button.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../button/button';
-
-@include exports('copy-button') {
-  .#{$prefix}--btn--copy {
-    position: relative;
-    overflow: visible;
-
-    .#{$prefix}--btn__icon {
-      margin-left: rem(5px);
-    }
-  }
-
-  .#{$prefix}--btn--copy__feedback {
-    position: absolute;
-    display: none;
-    top: 1.2rem;
-    left: 50%;
-
-    &:focus {
-      border: 2px solid red;
-    }
-
-    &:before {
-      @include layer('overlay');
-      @include typescale('omega');
-      top: 1.1rem;
-      padding: $spacing-2xs;
-      color: $inverse-01;
-      content: attr(data-feedback);
-      transform: translateX(-50%);
-      white-space: nowrap;
-      pointer-events: none;
-      border-radius: 4px;
-      font-weight: 400;
-      z-index: 2;
-    }
-
-    &:after {
-      top: 0.85rem;
-      width: 0.6rem;
-      height: 0.6rem;
-      left: -0.3rem;
-      border-right: 1px solid $inverse-02;
-      border-bottom: 1px solid $inverse-02;
-      content: '';
-      transform: rotate(-135deg);
-      z-index: 1;
-    }
-
-    &:before,
-    &:after {
-      position: absolute;
-      display: block;
-      background: $inverse-02;
-    }
-
-    &--displayed {
-      display: inline-flex;
-    }
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-action.scss b/scss/components/data-table-v2/_data-table-v2-action.scss
deleted file mode 100644
index a3c5baabf1fb..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-action.scss
+++ /dev/null
@@ -1,184 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-action') {
-  .#{$prefix}--table-toolbar {
-    display: flex;
-    padding-top: $spacing-xs;
-    padding-bottom: $spacing-xs;
-    width: 100%;
-    position: relative;
-
-    .#{$prefix}--search-input {
-      position: relative;
-
-      &:focus {
-        box-shadow: inset 0px 0px 0px 1px $brand-01;
-        outline: 0;
-      }
-    }
-  }
-
-  .#{$prefix}--toolbar-content {
-    display: flex;
-    margin-left: auto;
-  }
-
-  .#{$prefix}--toolbar-action {
-    @include button-reset;
-    cursor: pointer;
-    padding-left: $spacing-sm;
-    padding-right: $spacing-sm;
-
-    &:hover {
-      > .#{$prefix}--toolbar-action__icon {
-        fill: $hover-secondary;
-      }
-    }
-
-    &:focus {
-      @include focus-outline;
-      > .#{$prefix}--toolbar-action__icon {
-        fill: $hover-secondary;
-      }
-    }
-
-    &:active {
-      > .#{$prefix}--toolbar-action__icon {
-        fill: $hover-secondary;
-      }
-    }
-
-    &:last-of-type {
-      padding-right: 0;
-    }
-
-    ~ .#{$prefix}--btn {
-      margin-left: $spacing-sm;
-      margin-right: $spacing-sm;
-    }
-  }
-
-  .#{$prefix}--toolbar-action__icon {
-    height: rem(16px);
-    width: auto;
-    max-width: 16px;
-    fill: $ui-05;
-    transition: $transition--base;
-  }
-
-  .#{$prefix}--batch-actions {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    opacity: 0;
-    left: 0;
-    top: 0;
-    padding-left: $spacing-lg;
-    padding-right: $spacing-lg;
-    width: 100%;
-    height: 100%;
-    z-index: z('header');
-    background-color: transparent;
-    transition: opacity 200ms $carbon--standard-easing, background-color 200ms $carbon--standard-easing;
-    pointer-events: none;
-    visibility: hidden;
-
-    &:focus {
-      @include focus-outline;
-    }
-
-    .#{$prefix}--btn {
-      color: $ui-01;
-    }
-
-    .#{$prefix}--btn__icon {
-      fill: $ui-01;
-    }
-
-    .#{$prefix}--btn--ghost {
-      &:hover,
-      &:focus {
-        background-color: $ui-01;
-        color: $brand-01;
-
-        .#{$prefix}--btn__icon {
-          fill: $brand-01;
-        }
-      }
-
-      &:focus {
-        border: 2px solid $brand-01;
-        outline: 2px solid $ui-02;
-      }
-    }
-  }
-
-  .#{$prefix}--batch-actions--active {
-    visibility: visible;
-    background-color: $brand-01;
-    pointer-events: all;
-    transition: opacity 200ms cubic-bezier(0.5, 0, 0.1, 1), background-color 200ms cubic-bezier(0.5, 0, 0.1, 1);
-    opacity: 1;
-  }
-
-  .#{$prefix}--action-list {
-    margin-left: -0.5rem;
-  }
-
-  .#{$prefix}--action-icons {
-    margin-left: auto;
-    svg {
-      padding: 0 $spacing-sm;
-      fill: $ui-01;
-      height: rem(16px);
-      width: auto;
-    }
-  }
-
-  .#{$prefix}--batch-summary {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    color: $ui-01;
-  }
-
-  .#{$prefix}--batch-summary__para {
-    @include typescale('zeta');
-    margin-right: $spacing-lg;
-  }
-
-  .#{$prefix}--batch-summary__cancel {
-    @include button-reset(auto);
-    @include typescale('zeta');
-    color: $ui-01;
-    border-bottom: 1px solid transparent;
-    font-weight: 600;
-    cursor: pointer;
-    transition: border $transition--base $carbon--standard-easing;
-
-    &:hover,
-    &:focus {
-      border-bottom: 1px solid $ui-01;
-    }
-  }
-
-  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container,
-  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content {
-    opacity: 1;
-    transition: opacity $transition--base;
-  }
-
-  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
-  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
-    opacity: 0;
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-core.scss b/scss/components/data-table-v2/_data-table-v2-core.scss
deleted file mode 100644
index 1367d8d05cd9..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-core.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-core') {
-  .#{$prefix}--data-table-v2-container {
-    width: 100%;
-    min-width: rem(500px);
-    overflow-x: auto;
-    padding-top: $spacing-3xs; // allow space for focus styles
-  }
-
-  .#{$prefix}--data-table-v2 {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    border-bottom: 1px solid $ui-03;
-
-    @if feature-flag-enabled('breaking-changes-x') {
-      min-width: rem(500px);
-    }
-
-    thead {
-      @include typescale('zeta');
-      background-color: $ui-02;
-      font-weight: 700;
-      border-right: 1px solid $ui-03;
-    }
-
-    tbody {
-      @include typescale('zeta');
-      background-color: $ui-01;
-      border-right: 1px solid $ui-03;
-    }
-
-    tr {
-      height: rem(48px);
-
-      &:hover {
-        td {
-          background-color: rgba($brand-02, 0.1);
-          border-top: 1px solid $brand-01;
-          border-bottom: 1px solid $brand-01;
-
-          &:first-of-type {
-            border-left: 1px solid $brand-01;
-          }
-
-          &:last-of-type {
-            border-right: 1px solid $brand-01;
-          }
-        }
-
-        .#{$prefix}--overflow-menu {
-          opacity: 1;
-        }
-      }
-    }
-
-    th {
-      border-top: 1px solid $ui-03;
-    }
-
-    th,
-    td {
-      @include typescale('zeta');
-      border-top: 1px solid $ui-03;
-      padding-left: $spacing-sm;
-      vertical-align: middle;
-      text-align: left;
-      color: $text-01;
-
-      &:first-of-type {
-        padding-left: rem(24px);
-        border-left: 1px solid $ui-03;
-      }
-
-      &:last-of-type {
-        padding-right: $spacing-lg;
-      }
-    }
-
-    // Overrrides
-    .#{$prefix}--checkbox-label {
-      padding-left: rem(28px);
-    }
-
-    .#{$prefix}--overflow-menu {
-      opacity: 0;
-
-      &:focus {
-        outline: 0;
-        opacity: 1;
-        box-shadow: none;
-
-        .#{$prefix}--overflow-menu__icon {
-          box-shadow: inset 0px 0px 0px 1px $brand-01;
-        }
-      }
-    }
-
-    .#{$prefix}--overflow-menu__icon {
-      transform: rotate(90deg);
-    }
-  }
-
-  // Options
-
-  .#{$prefix}--data-table-v2-header {
-    margin-bottom: $spacing-xs;
-    color: $text-01;
-  }
-
-  .#{$prefix}--data-table-v2--zebra {
-    tbody tr:nth-child(even) {
-      background-color: $ui-02;
-    }
-  }
-
-  .#{$prefix}--data-table-v2--no-border {
-    & {
-      border-bottom-color: transparent;
-    }
-
-    thead,
-    tbody {
-      border-right-color: transparent;
-    }
-
-    th,
-    td {
-      &:first-of-type {
-        border-left-color: transparent;
-      }
-    }
-  }
-
-  .#{$prefix}--data-table-v2--compact {
-    tbody tr {
-      height: rem(24px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--short {
-    tbody tr {
-      height: rem(32px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--tall {
-    tbody tr {
-      height: rem(64px);
-    }
-  }
-
-  .#{$prefix}--data-table-v2--static {
-    width: auto;
-  }
-
-  .#{$prefix}--data-table-v2--zebra tbody tr.#{$prefix}--data-table-v2--selected,
-  tbody tr.#{$prefix}--data-table-v2--selected {
-    background-color: rgba($brand-02, 0.1);
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-expandable.scss b/scss/components/data-table-v2/_data-table-v2-expandable.scss
deleted file mode 100644
index c26fac3fde8d..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-expandable.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-expandable') {
-  tr.#{$prefix}--expandable-row-v2 {
-    // hide on init
-    &.#{$prefix}--expandable-row--hidden-v2 {
-      display: none;
-    }
-
-    > td:first-of-type {
-      position: relative;
-
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 2px;
-        background-color: $brand-01;
-      }
-    }
-
-    + tr[data-child-row] {
-      td {
-        border-top: 0;
-        padding-bottom: $spacing-xs;
-      }
-    }
-
-    &:hover {
-      > td {
-        background-color: $hover-row;
-      }
-
-      > td:first-of-type {
-        border-left: 1px solid transparent;
-      }
-
-      > td:last-of-type {
-        border-right: 1px solid $brand-01;
-      }
-
-      &[data-parent-row] > td {
-        border-bottom: 0;
-      }
-
-      + tr[data-child-row] {
-        > td {
-          background-color: $hover-row;
-          border-bottom: 1px solid $brand-01;
-          border-right: 1px solid $brand-01;
-        }
-      }
-    }
-  }
-
-  tr.#{$prefix}--expandable-row--hover-v2 {
-    > td {
-      background-color: $hover-row;
-      border-top: 1px solid $brand-01;
-    }
-
-    > td:last-of-type {
-      border-right: 1px solid $brand-01;
-    }
-  }
-
-  .#{$prefix}--table-expand-v2 {
-    width: 2.5rem;
-  }
-
-  .#{$prefix}--table-expand-v2[data-previous-value='collapsed'] .#{$prefix}--table-expand-v2__svg {
-    transform: rotate(90deg);
-    transition: transform 200ms $carbon--standard-easing;
-  }
-
-  .#{$prefix}--table-expand-v2__button {
-    @include button-reset(false);
-
-    &:focus {
-      outline: 1px solid transparent;
-
-      svg {
-        box-shadow: inset 0px 0px 0px 1px $brand-01;
-      }
-    }
-  }
-
-  .#{$prefix}--table-expand-v2__svg {
-    fill: $ui-05;
-    transform: rotate(0deg);
-    transition: transform 200ms $carbon--standard-easing;
-    height: 16px;
-    width: auto;
-    max-width: 16px;
-    padding: $spacing-3xs;
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-inline-edit-cell.scss b/scss/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
deleted file mode 100644
index 5f60b723fe8c..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
+++ /dev/null
@@ -1,363 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/vars';
-
-@mixin assistive-text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-  visibility: visible;
-  white-space: nowrap;
-}
-
-@include exports('data-table-v2-inline-edit-cell') {
-  // Spacing for cells that are the first in their row
-  $spacing--columns--first: 1.5rem;
-  // Spacing before columns in cell
-  $spacing--columns--before: 0.75rem;
-  // Spacing for activity areas in a cell, namely status and actions
-  $spacing--cell--activity: 3.5rem;
-  // Offset used on input nodes to offer space to activity indicators such that
-  // the input doesn't overlap with the status
-  $spacing--cell--status: 2rem;
-
-  //----------------------------------------------------------------------------
-  // Table
-  //----------------------------------------------------------------------------
-
-  // Reset hover styles while editing
-  .#{$prefix}--data-table--editing tr:hover td {
-    background-color: inherit;
-    border-top: 1px solid $ui-04;
-    border-bottom: 1px solid $ui-04;
-  }
-
-  .#{$prefix}--data-table--editing tr:hover td:first-of-type {
-    border-left: 1px solid $ui-04;
-  }
-
-  .#{$prefix}--data-table--editing tr:hover td:last-of-type {
-    border-right: 1px solid $ui-04;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit
-  //----------------------------------------------------------------------------
-
-  // Buffer is created on the right-hand side so that status indicators have the
-  // appropriate space to display.
-  .#{$prefix}--data-table-cell--editable {
-    position: relative;
-    padding-right: $spacing--cell--activity;
-  }
-
-  td.#{$prefix}--data-table-cell--editable:last-of-type {
-    // Reset the styles inherited from data-table-v2 for padding-right styles
-    // but adding our manual offset plus the spacing used before columns to get
-    // a similar look for when an editable cell is in the middle of a table.
-    padding-right: #{$spacing--cell--activity + $spacing--columns--before};
-  }
-
-  // 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 {
-    margin-right: $spacing--columns--before;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Content
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table-cell__content {
-    position: relative;
-    z-index: 1000;
-    // Set line-height to match that within inputs
-    line-height: normal;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Activity
-  //----------------------------------------------------------------------------
-
-  // Styles used for getting 100% width and height on an descendant of a table
-  // cell. Display is used for alignment of most items to the end of the cell
-  .#{$prefix}--data-table-cell__activity {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 1rem;
-    bottom: 0;
-    left: 0;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Trigger
-  //----------------------------------------------------------------------------
-
-  .#{$prefix}--data-table-cell__edit {
-    @include button-reset(false);
-    opacity: 0;
-  }
-
-  .#{$prefix}--data-table-cell__edit:focus,
-  .#{$prefix}--data-table-cell--editable:hover .#{$prefix}--data-table-cell__edit {
-    opacity: 1;
-  }
-
-  .#{$prefix}--data-table-cell__icon--edit {
-    fill: $ui-05;
-  }
-
-  .#{$prefix}--data-table-cell__edit:active > .#{$prefix}--data-table-cell__icon--edit {
-    fill: $brand-01;
-  }
-
-  .#{$prefix}--data-table-cell__edit:focus {
-    outline: 1px solid $brand-01;
-    outline-offset: 2px;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Fields // Inputs
-  //----------------------------------------------------------------------------
-
-  .#{$prefix}--data-table__edit-field {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 100;
-  }
-
-  .#{$prefix}--data-table__edit-field > label.#{$prefix}--label {
-    @include assistive-text();
-  }
-
-  // Spacing resets on inputs
-
-  // All inputs should span as much height and width as possible, but should
-  // still buffer the right hand side with some padding to allow space for
-  // status indicators to render without clipping the input content
-  .#{$prefix}--data-table__edit-field > input {
-    min-height: 100%;
-    min-width: 100%;
-    padding: 0 $spacing--cell--status 0 0;
-  }
-
-  // Set the default padding on the left-hand side of the input to match what is
-  // given by the default table class. Visually this makes it look like the
-  // content is aligned with the other cells in the table.
-  td.#{$prefix}--data-table-cell--editable input {
-    padding-left: $spacing--columns--before;
-  }
-
-  // Substitute the left-hand padding for the padding specified on the first td
-  // of each row
-  td.#{$prefix}--data-table-cell--editable:first-of-type input {
-    padding-left: $spacing--columns--first;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Actions
-  //----------------------------------------------------------------------------
-
-  // Spacing that should exist around, and in-between, elements in the action
-  // bar
-  $spacing--cell-actions: 0.5rem;
-  $size--edit-actions--height: 3rem;
-
-  .#{$prefix}--data-table__edit-actions {
-    @include layer('overlay');
-
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    top: $size--edit-actions--height;
-    right: 0;
-    bottom: 0;
-    height: $size--edit-actions--height;
-    background-color: $inverse-01;
-    padding: $spacing--cell-actions;
-    z-index: z('overlay');
-  }
-
-  // Undo default margin-left from btn classes
-  .#{$prefix}--data-table__edit-actions .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
-    margin-left: $spacing--cell-actions;
-  }
-
-  //----------------------------------------------------------------------------
-  // Cell Edit - Status
-  //----------------------------------------------------------------------------
-
-  // Containing node
-  .#{$prefix}--data-table__edit-status {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    // Value should be 0.5rem, but doing so will cause the loading box to clip
-    // the bounding box of the last cells in a row. This will cause the
-    // overflow-x scrollbar to behave erratically as it constantly shifts to
-    // adjust to the new width of the table
-    right: 1rem;
-    bottom: 0;
-    left: 0;
-  }
-
-  // Status - Saving -----------------------------------------------------------
-
-  .#{$prefix}--data-table-cell--saving {
-    cursor: not-allowed;
-  }
-
-  // Cell should go to 25% opacity when saving
-  .#{$prefix}--data-table-cell--saving input {
-    background-color: inherit;
-    opacity: 0.25;
-  }
-
-  // Manually center the loading indicator given the offset of its bounding box
-  .#{$prefix}--data-table-cell--saving .#{$prefix}--loading {
-    position: relative;
-    left: rem(7px);
-  }
-
-  // Status - Success ----------------------------------------------------------
-  .#{$prefix}--data-table__icon--success {
-    fill: $support-02;
-  }
-
-  // Status - Error ------------------------------------------------------------
-
-  .#{$prefix}--data-table__status--error {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    fill: $support-01;
-    width: 100%;
-    height: 100%;
-  }
-
-  .#{$prefix}--data-table__edit-field--error {
-    border-bottom: 2px solid $support-01;
-  }
-
-  .#{$prefix}--data-table__status--error {
-    position: relative;
-  }
-
-  .#{$prefix}--data-table__error-text {
-    @include layer('overlay');
-
-    position: absolute;
-    top: rem(-1px);
-    right: -1rem;
-    color: $support-01;
-    // TODO: sync with caption sizes
-    font-size: rem(12px);
-    background-color: $inverse-01;
-    padding: 1rem;
-    transform: translateY(-100%);
-    border: 1px solid $ui-03;
-    z-index: 1000;
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-  }
-
-  .#{$prefix}--data-table__error-text::after {
-    content: '';
-    position: absolute;
-    // Manually offset and center triangle
-    right: 1rem;
-    // TODO: shift down half of height
-    bottom: -7px;
-    width: rem(10px);
-    height: rem(10px);
-    background-color: $inverse-01;
-    border: 1px solid $ui-03;
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-    transform: rotate(45deg);
-    z-index: 10;
-    opacity: 0;
-  }
-
-  .#{$prefix}--data-table__icon--error {
-    z-index: 1000;
-  }
-
-  .#{$prefix}--data-table__status--error {
-    // Specify outline on child SVG node instead
-    outline: none;
-  }
-
-  .#{$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 {
-    border-right-color: $brand-01;
-    border-bottom-color: $brand-01;
-  }
-
-  // Visually show the error message
-
-  // Display the text area itself on hover
-  .#{$prefix}--data-table__icon--error:hover
-    ~ .#{$prefix}--data-table__error-text,
-
-    /* Display text area triangle on hover*/
-  .#{$prefix}--data-table__icon--error:hover
-    ~ .#{$prefix}--data-table__error-text::after,
-
-    /* Display text area on focus*/
-  .#{$prefix}--data-table__status--error:focus
-    > .#{$prefix}--data-table__error-text,
-
-    /* Display text area triangle on focus*/
-  .#{$prefix}--data-table__status--error:focus
-    > .#{$prefix}--data-table__error-text::after,
-
-  /* Display when user is typing in edit field*/
-  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
-  .#{$prefix}--data-table__edit-status .#{$prefix}--data-table__error-text,
-
-  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
-  .#{$prefix}--data-table__edit-status
-  .#{$prefix}--data-table__error-text::after {
-    opacity: 1;
-  }
-
-  //----------------------------------------------------------------------------
-  // Browser Quirks
-  //----------------------------------------------------------------------------
-
-  // IE11 - cells are not going full height. Set min-height to compensate
-  .#{$prefix}--data-table__edit-field,
-  .#{$prefix}--data-table-cell__activity,
-  .#{$prefix}--data-table__edit-status {
-    min-height: 3rem;
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-inline-edit.scss b/scss/components/data-table-v2/_data-table-v2-inline-edit.scss
deleted file mode 100644
index ef83c5a289a9..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-inline-edit.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-inline-edit') {
-  .#{$prefix}--inline-edit-label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &:hover {
-      .#{$prefix}--inline-edit-label__icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  .#{$prefix}--inline-edit-label--inactive {
-    display: none;
-  }
-
-  .#{$prefix}--inline-edit-label__action {
-    @include button-reset(false);
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:focus {
-      @include focus-outline;
-      padding: $spacing-3xs;
-
-      .#{$prefix}--inline-edit-label__icon {
-        width: auto;
-        opacity: 1;
-      }
-    }
-  }
-
-  .#{$prefix}--inline-edit-label__icon {
-    fill: $ui-05;
-    opacity: 0;
-  }
-
-  .#{$prefix}--inline-edit-input {
-    display: none;
-  }
-
-  .#{$prefix}--inline-edit-input--active {
-    display: block;
-    margin-left: rem(-12px);
-
-    input {
-      padding-left: $spacing-sm;
-    }
-  }
-
-  .#{$prefix}--data-table-v2--short {
-    input {
-      height: rem(32px);
-    }
-
-    select {
-      padding: 0.45rem 2.75rem 0.45rem $spacing-md;
-    }
-
-    .#{$prefix}--select__arrow {
-      top: 0.875rem;
-    }
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-skeleton.scss b/scss/components/data-table-v2/_data-table-v2-skeleton.scss
deleted file mode 100644
index f4183646ae13..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-skeleton.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-skeleton') {
-  .#{$prefix}--data-table-v2.#{$prefix}--skeleton {
-    th {
-      border-bottom: 1px solid $brand-01;
-
-      &:nth-child(3n + 1) {
-        width: 10%;
-      }
-
-      &:nth-child(3n + 2) {
-        width: 30%;
-      }
-
-      &:nth-child(3n + 3) {
-        width: 15%;
-      }
-    }
-
-    th span,
-    td span {
-      @include skeleton;
-      width: 75%;
-      height: 1rem;
-      display: block;
-    }
-
-    tr:hover {
-      td {
-        border-color: $ui-03;
-        background: transparent;
-
-        &:first-of-type,
-        &:last-of-type {
-          border-color: $ui-03;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 {
-    pointer-events: none;
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2-sort.scss b/scss/components/data-table-v2/_data-table-v2-sort.scss
deleted file mode 100644
index b3047e322d06..000000000000
--- a/scss/components/data-table-v2/_data-table-v2-sort.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('data-table-v2-sort') {
-  .#{$prefix}--table-sort-v2--ascending {
-    .#{$prefix}--table-sort-v2__icon {
-      transform: rotate(180deg);
-      transition: transform 200ms $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--table-sort-v2--active {
-    .#{$prefix}--table-sort-v2__icon {
-      opacity: 1;
-    }
-  }
-
-  .#{$prefix}--data-table-v2 th {
-    &:hover {
-      .#{$prefix}--table-sort-v2__icon {
-        opacity: 1;
-      }
-    }
-  }
-
-  .#{$prefix}--table-sort-v2 {
-    @include button-reset(false);
-    position: relative;
-    font: inherit;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    color: $text-01;
-
-    &:focus {
-      outline: 0;
-
-      svg {
-        opacity: 1;
-        outline: 1px solid $brand-01;
-        fill: $brand-01;
-        outline-offset: -0.5px; // safari fix
-      }
-    }
-  }
-
-  .#{$prefix}--table-sort-v2__icon {
-    position: relative;
-    left: 2px;
-    transition: transform 200ms $carbon--standard-easing;
-    transform: rotate(0);
-    opacity: 0;
-    fill: $ui-05;
-    height: rem(9px);
-    padding: $spacing-3xs;
-    width: auto;
-    min-width: 14px;
-  }
-}
diff --git a/scss/components/data-table-v2/_data-table-v2.scss b/scss/components/data-table-v2/_data-table-v2.scss
deleted file mode 100644
index 012c5609d245..000000000000
--- a/scss/components/data-table-v2/_data-table-v2.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'data-table-v2-action';
-@import 'data-table-v2-core';
-@import 'data-table-v2-expandable';
-@import 'data-table-v2-sort';
-@import 'data-table-v2-inline-edit';
-@import 'data-table-v2-skeleton';
diff --git a/scss/components/data-table/_data-table.scss b/scss/components/data-table/_data-table.scss
deleted file mode 100644
index f722e5551ae6..000000000000
--- a/scss/components/data-table/_data-table.scss
+++ /dev/null
@@ -1,257 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../checkbox/checkbox';
-@import '../../globals/scss/import-once';
-@import '../../components/overflow-menu/overflow-menu';
-
-@mixin data-table {
-  @include deprecate(
-    'The `data-table` component in `carbon-components` has been deprecated. ' + 'It will be removed in the next major release. ' +
-      'If you still need this component, please use the `data-table-v2` component.'
-  ) {
-    .#{$prefix}--responsive-table-container {
-      @include reset;
-      @include font-family;
-      overflow-x: auto;
-      overflow-y: hidden;
-      width: 99.9%;
-    }
-
-    .#{$prefix}--responsive-table {
-      @include reset;
-      background-color: $ui-01;
-      width: 100%;
-      min-width: 500px;
-      border-collapse: collapse;
-      border-spacing: 0;
-      border: 2px solid $ui-03;
-
-      td {
-        @include reset;
-        @include typescale('zeta');
-        padding: 0 rem(6px);
-        vertical-align: middle;
-        color: $text-01;
-      }
-
-      td p {
-        @include typescale('zeta');
-      }
-
-      th {
-        @include reset;
-        @include typescale('omega');
-        padding: rem(9px) rem(6px);
-        vertical-align: middle;
-        font-weight: 600;
-        color: $text-01;
-
-        &:focus {
-          outline: 1px solid transparent;
-
-          span {
-            @include focus-outline('border');
-          }
-        }
-      }
-
-      table {
-        @include reset;
-      }
-
-      &--tall {
-        td,
-        th {
-          padding-top: rem(15px);
-          padding-bottom: rem(15px);
-        }
-      }
-
-      &--static-size {
-        @include reset;
-        border-collapse: collapse;
-        width: auto;
-        border: 2px solid $ui-03;
-
-        tr td:first-child,
-        tr th:first-child {
-          padding-left: 1.5rem;
-        }
-      }
-    }
-
-    .#{$prefix}--responsive-table--tall {
-      td,
-      th {
-        padding-top: rem(10px);
-        padding-bottom: rem(10px);
-      }
-    }
-
-    .#{$prefix}--table-row {
-      @include reset;
-      height: $data-table-row-height;
-      padding-left: 1rem;
-    }
-
-    .#{$prefix}--table-head .#{$prefix}--table-row {
-      border-bottom: $data-table-heading-border-bottom;
-      height: rem(32px);
-    }
-
-    .#{$prefix}--table-header {
-      @include reset;
-      @include typescale('omega');
-      font-weight: 600;
-      text-align: left;
-      text-transform: $data-table-heading-transform;
-      height: rem(40px);
-    }
-
-    // zebra stripes
-    .#{$prefix}--table-body {
-      > .#{$prefix}--parent-row,
-      > .#{$prefix}--parent-row {
-        background-color: $ui-01;
-
-        & + .#{$prefix}--expandable-row {
-          background-color: $ui-01;
-        }
-
-        &--even {
-          background-color: $ui-02;
-
-          & + .#{$prefix}--expandable-row {
-            background-color: $ui-02;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--table-body .#{$prefix}--table-row {
-      border: 1px solid transparent;
-
-      &:first-child:hover,
-      &:first-child:focus {
-        border-left: 2px solid $brand-02;
-        outline: 1px solid $brand-02;
-      }
-
-      &:not(:first-child):hover,
-      &:not(:first-child):focus {
-        border-left: 2px solid $brand-02;
-        outline: 1px solid $brand-02;
-      }
-    }
-
-    // expandable styles
-    .#{$prefix}--expandable-row {
-      > td {
-        border-left: 4px solid $brand-01;
-        padding: 2rem;
-      }
-
-      &--hidden {
-        visibility: hidden;
-      }
-    }
-
-    // actions
-    .#{$prefix}--table-expand {
-      padding-left: rem(8px);
-      padding-right: rem(12px);
-      text-align: center;
-      width: rem(20px);
-      cursor: pointer;
-
-      &:focus {
-        outline: 1px solid transparent;
-
-        svg {
-          @include focus-outline('border');
-        }
-      }
-    }
-
-    .#{$prefix}--table-expand__svg {
-      fill: $ui-05;
-      transform: rotate(0deg);
-      transition: transform 200ms $carbon--standard-easing;
-      width: 12px;
-      height: 12px;
-      margin-left: rem(7px);
-      margin-right: rem(2px);
-
-      @media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
-        margin-top: 2px;
-      }
-    }
-
-    .#{$prefix}--table-expand[data-previous-value='collapsed'] .#{$prefix}--table-expand__svg {
-      transform: rotate(90deg);
-      transition: transform 200ms $carbon--standard-easing;
-    }
-
-    [data-event='sort'] {
-      cursor: pointer;
-    }
-
-    .#{$prefix}--table-sort__svg {
-      fill: $ui-05;
-      width: 8px;
-      height: 8px;
-      transform: rotate(0deg);
-      transition: transform 200ms $carbon--standard-easing;
-    }
-
-    .#{$prefix}--table-sort--ascending .#{$prefix}--table-sort__svg {
-      transform: rotate(180deg);
-      transition: transform 200ms $carbon--standard-easing;
-    }
-
-    .#{$prefix}--table-select {
-      @include reset;
-      width: rem(30px);
-      text-align: center;
-      padding-left: 0;
-      padding-right: 0;
-
-      .#{$prefix}--checkbox-label {
-        display: inline-flex;
-        margin: 0;
-
-        @media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {
-          margin-top: 2px;
-        }
-      }
-
-      .#{$prefix}--checkbox-appearance {
-        margin: 0;
-      }
-    }
-
-    .#{$prefix}--table-overflow {
-      width: rem(40px);
-      text-align: center;
-
-      .#{$prefix}--overflow-menu {
-        padding: 0;
-      }
-    }
-  }
-}
-
-@include exports('data-table') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include data-table;
-  }
-}
diff --git a/scss/components/date-picker/_date-picker.scss b/scss/components/date-picker/_date-picker.scss
deleted file mode 100644
index 6e9e72f6172c..000000000000
--- a/scss/components/date-picker/_date-picker.scss
+++ /dev/null
@@ -1,914 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/layer';
-@import '../form/form';
-@import 'flatpickr.scss';
-
-@mixin date-picker {
-  .#{$prefix}--date-picker {
-    display: flex;
-  }
-
-  .#{$prefix}--date-picker--light .#{$prefix}--date-picker__input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--date-picker ~ .#{$prefix}--label {
-    order: 1;
-  }
-
-  .#{$prefix}--date-picker-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--simple {
-    .#{$prefix}--date-picker__input {
-      width: 7.125rem;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--simple.#{$prefix}--date-picker--short {
-    .#{$prefix}--date-picker__input {
-      width: 5.7rem;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--single {
-    .#{$prefix}--date-picker__input {
-      width: 9rem;
-    }
-  }
-
-  .#{$prefix}--date-picker__input {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    display: block;
-    position: relative;
-    height: rem(40px);
-    max-width: 9rem;
-    padding: 0 $spacing-md;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 2;
-    color: $text-01;
-    border-bottom: 1px solid transparent;
-
-    &:focus,
-    &.#{$prefix}--focused {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      box-shadow: 0 2px 0 0 $support-01;
-    }
-
-    &[data-invalid]:focus + .#{$prefix}--label {
-      color: $support-01;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-      overflow: visible;
-
-      &::before {
-        display: none;
-      }
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:disabled:hover {
-      border: 1px solid transparent;
-    }
-
-    &::placeholder {
-      color: $text-02;
-    }
-  }
-
-  .#{$prefix}--date-picker__icon {
-    position: absolute;
-    top: 2.25rem;
-    left: 1rem;
-    fill: $brand-01;
-    cursor: pointer;
-    z-index: 1;
-
-    &:hover {
-      fill: $hover-primary;
-    }
-  }
-
-  .#{$prefix}--date-picker--nolabel .#{$prefix}--date-picker__icon {
-    top: rem(14px);
-  }
-
-  .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
-    padding-left: $spacing-3xl;
-  }
-
-  .#{$prefix}--date-picker--range {
-    display: flex;
-    position: relative;
-  }
-
-  .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
-    margin-right: $spacing-xs;
-  }
-
-  .#{$prefix}--date-picker--range .#{$prefix}--date-picker__icon {
-    top: initial;
-    right: -1.75rem;
-    bottom: 0.6rem;
-    left: auto;
-  }
-
-  .#{$prefix}--date-picker--range .#{$prefix}--label,
-  .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
-    width: 7.075rem;
-  }
-
-  .#{$prefix}--date-picker__calendar.flatpickr-calendar.open {
-    @include layer('pop-out');
-    background-color: $ui-01;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: $spacing-md $spacing-md $spacing-2xs;
-    width: rem(285px) !important;
-    height: rem(262px);
-    border-radius: 0;
-    border: none;
-    overflow: hidden;
-    margin-top: 1px;
-
-    &:before,
-    &:after {
-      display: none;
-    }
-
-    &:focus {
-      outline: 1px solid $brand-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month,
-  .flatpickr-month {
-    width: 100%;
-    margin-bottom: $spacing-2xs;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-prev-month,
-  .#{$prefix}--date-picker__month .flatpickr-next-month,
-  .flatpickr-month .flatpickr-prev-month,
-  .flatpickr-month .flatpickr-next-month {
-    padding: 0;
-    line-height: rem(20px);
-    fill: $text-01;
-
-    &:hover svg {
-      fill: $hover-secondary;
-    }
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month,
-  .flatpickr-month .flatpickr-current-month {
-    @include typescale('omega');
-    text-transform: uppercase;
-    padding: 0;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month svg,
-  .flatpickr-month .flatpickr-current-month svg {
-    fill: $text-01;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month .cur-month,
-  .flatpickr-month .flatpickr-current-month .cur-month {
-    margin-right: 0.25rem;
-    color: $text-01;
-  }
-
-  .numInputWrapper,
-  .flatpickr-current-month .numInputWrapper {
-    min-width: rem(38px);
-    width: rem(38px);
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper .numInput,
-  .flatpickr-month .numInputWrapper .numInput {
-    font-weight: 600;
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    border-radius: 0;
-    min-width: rem(38px);
-    width: rem(38px);
-    padding: $spacing-2xs;
-
-    &:focus {
-      outline: 1px solid $brand-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowUp,
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowDown,
-  .flatpickr-month .numInputWrapper span.arrowUp,
-  .flatpickr-month .numInputWrapper span.arrowDown {
-    left: 2.6rem;
-    border: none;
-    width: rem(12px);
-
-    &:hover {
-      background: none;
-
-      &:after {
-        border-bottom-color: $brand-02;
-        border-top-color: $brand-02;
-      }
-    }
-
-    &:after {
-      border-bottom-color: $brand-01;
-      border-top-color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowUp,
-  .flatpickr-month .numInputWrapper span.arrowUp {
-    top: 1px;
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowDown,
-  .flatpickr-month .numInputWrapper span.arrowDown {
-    top: 9px;
-  }
-
-  span.#{$prefix}--date-picker__weekday,
-  span.flatpickr-weekday {
-    @include typescale('omega');
-    font-weight: 600;
-    color: $text-01;
-  }
-
-  .#{$prefix}--date-picker__day,
-  .flatpickr-day {
-    @include typescale('omega');
-    height: rem(25px);
-    width: 1.8rem;
-    line-height: rem(25px);
-    flex-basis: 1.8rem;
-    max-width: 1.8rem;
-    margin: rem(0.5px) 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: $text-01;
-    border-radius: 0;
-    border: 2px solid transparent;
-
-    &:hover {
-      background: $hover-row;
-    }
-
-    &:focus {
-      outline: none;
-      background: $ui-03;
-    }
-  }
-
-  .#{$prefix}--date-picker__days .nextMonthDay,
-  .#{$prefix}--date-picker__days .prevMonthDay {
-    opacity: 0.5;
-    color: $ui-05;
-  }
-
-  .#{$prefix}--date-picker__day.today,
-  .flatpickr-day.today {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 90%;
-      left: 50%;
-      transform: translateX(-50%);
-      height: 3px;
-      width: 3px;
-      border-radius: 50%;
-      background: $brand-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.today.no-border,
-  .flatpickr-day.today.no-border {
-    border: none;
-  }
-
-  .#{$prefix}--date-picker__day.today.selected {
-    border: 2px solid $brand-01;
-    &::after {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.disabled,
-  .flatpickr-day.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: $ui-05;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.inRange,
-  .flatpickr-day.inRange {
-    background: $ui-02;
-    box-shadow: -6px 0 0 $ui-02, 6px 0 0 $ui-02;
-  }
-
-  .#{$prefix}--date-picker__day.selected,
-  .flatpickr-day.selected {
-    border: 2px solid $brand-01;
-    background: $ui-01;
-  }
-
-  .#{$prefix}--date-picker__day.startRange.selected,
-  .flatpickr-day.startRange.selected {
-    box-shadow: none;
-    z-index: 2;
-  }
-
-  .#{$prefix}--date-picker__day.endRange.inRange,
-  .flatpickr-day.endRange.inRange {
-    background: $ui-01;
-    color: $text-01;
-    border: 2px solid $brand-01;
-    z-index: 3;
-    box-shadow: none;
-  }
-
-  .#{$prefix}--date-picker__day.endRange.inRange.selected,
-  .flatpickr-day.endRange.inRange.selected {
-    box-shadow: none;
-    border: 2px solid $brand-01;
-    background: $ui-01;
-  }
-
-  .#{$prefix}--date-picker__day.startRange.inRange:not(.selected),
-  .flatpickr-day.startRange.inRange:not(.selected) {
-    box-shadow: none;
-    background: $ui-01;
-    border: 2px solid $brand-01;
-    z-index: 3;
-  }
-
-  .#{$prefix}--date-picker__days,
-  .dayContainer {
-    width: rem(225px);
-    min-width: rem(225px);
-    max-width: rem(225px);
-    height: rem(164px);
-  }
-
-  .flatpickr-innerContainer,
-  .flatpickr-rContainer {
-    width: rem(225px);
-    height: rem(200px);
-  }
-
-  .#{$prefix}--date-picker__weekdays,
-  .flatpickr-weekdays,
-  .flatpickr-weekdaycontainer {
-    width: rem(225px);
-    margin-bottom: $spacing-2xs;
-  }
-
-  .flatpickr-weekdaycontainer {
-    display: flex;
-  }
-
-  .flatpickr-months {
-    display: flex;
-    width: 100%;
-    position: relative;
-  }
-
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    padding-top: 5px;
-  }
-
-  .flatpickr-prev-month:hover svg,
-  .flatpickr-next-month:hover svg {
-    fill: $brand-01;
-  }
-
-  .flatpickr-next-month.disabled,
-  .flatpickr-prev-month.disabled {
-    svg {
-      fill: $ui-05;
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:hover {
-      svg {
-        fill: $ui-05;
-      }
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--date-picker.#{$prefix}--skeleton input,
-  .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-
-    &::-webkit-input-placeholder {
-      color: transparent;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(14px);
-  }
-}
-
-@mixin date-picker--x {
-  .#{$prefix}--date-picker {
-    display: flex;
-  }
-
-  .#{$prefix}--date-picker--light .#{$prefix}--date-picker__input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--date-picker ~ .#{$prefix}--label {
-    order: 1;
-  }
-
-  .#{$prefix}--date-picker-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .#{$prefix}--date-picker-input__wrapper {
-    display: flex;
-    align-items: center;
-
-    ~ .#{$prefix}--form-requirement {
-      max-height: rem(200px);
-      display: block;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-      overflow: visible;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--simple {
-    .#{$prefix}--date-picker__input {
-      width: 7.25rem;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--simple.#{$prefix}--date-picker--short {
-    .#{$prefix}--date-picker__input {
-      width: 5.7rem;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--date-picker--single {
-    .#{$prefix}--date-picker-container {
-      max-width: rem(288px);
-    }
-
-    .#{$prefix}--date-picker__input {
-      width: rem(288px);
-    }
-  }
-
-  .#{$prefix}--date-picker__input {
-    @include reset;
-    @include type-style('body-short-01');
-    @include focus-outline('reset');
-
-    display: block;
-    position: relative;
-    height: rem(40px);
-    max-width: rem(288px);
-    padding: 0 $spacing-md;
-    background-color: $field-01;
-    border: none;
-    color: $text-01;
-    border-bottom: 1px solid $ui-04;
-    transition: $transition--base all;
-
-    &:focus,
-    &.#{$prefix}--focused {
-      @include focus-outline('outline');
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      @include focus-outline('invalid');
-    }
-
-    &:disabled {
-      color: $disabled;
-      background-color: $disabled-background-color;
-      border-bottom: 1px solid transparent;
-      cursor: not-allowed;
-    }
-
-    &:disabled:hover {
-      border-bottom: 1px solid transparent;
-    }
-
-    &::placeholder {
-      @include placeholder-colors;
-    }
-  }
-
-  .#{$prefix}--date-picker__icon {
-    position: absolute;
-    right: 1rem;
-    fill: $ui-05;
-    cursor: pointer;
-    z-index: 1;
-  }
-
-  .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
-    padding-right: $spacing-3xl;
-  }
-
-  .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
-    margin-right: rem(1px);
-  }
-
-  .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container,
-  .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
-    width: rem(143.5px);
-  }
-
-  .#{$prefix}--date-picker__calendar,
-  .flatpickr-calendar.open {
-    @include layer('pop-out');
-    background-color: $ui-01;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: $spacing-2xs $spacing-2xs $spacing-xs $spacing-2xs;
-    width: rem(288px) !important;
-    height: rem(336px);
-    border-radius: 0;
-    border: none;
-    overflow: hidden;
-    margin-top: -2px;
-
-    &:before,
-    &:after {
-      display: none;
-    }
-
-    &:focus {
-      outline: 1px solid $interactive-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month,
-  .flatpickr-month {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: rem(40px);
-    margin-bottom: $spacing-2xs;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-prev-month,
-  .#{$prefix}--date-picker__month .flatpickr-next-month,
-  .flatpickr-month .flatpickr-prev-month,
-  .flatpickr-month .flatpickr-next-month {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    height: rem(40px);
-    width: rem(40px);
-    padding: 0;
-    fill: $text-01;
-    transition: background-color $transition--base;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .flatpickr-current-month .numInputWrapper {
-    width: 7ch;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month,
-  .flatpickr-month .flatpickr-current-month {
-    @include typescale('zeta');
-    padding: 0;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month svg,
-  .flatpickr-month .flatpickr-current-month svg {
-    fill: $text-01;
-  }
-
-  .#{$prefix}--date-picker__month .flatpickr-current-month .cur-month,
-  .flatpickr-month .flatpickr-current-month .cur-month {
-    margin-right: $spacing-2xs;
-    color: $text-01;
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper .numInput,
-  .flatpickr-month .numInputWrapper .numInput {
-    font-weight: 600;
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    border-radius: 0;
-    padding: $spacing-2xs;
-
-    &:focus {
-      outline: 1px solid $interactive-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowUp,
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowDown,
-  .flatpickr-month .numInputWrapper span.arrowUp,
-  .flatpickr-month .numInputWrapper span.arrowDown {
-    left: 2.6rem;
-    border: none;
-    width: rem(12px);
-
-    &:hover {
-      background: none;
-
-      &:after {
-        border-bottom-color: $interactive-02;
-        border-top-color: $interactive-02;
-      }
-    }
-
-    &:after {
-      border-bottom-color: $interactive-01;
-      border-top-color: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowUp,
-  .flatpickr-month .numInputWrapper span.arrowUp {
-    top: 4px;
-  }
-
-  .#{$prefix}--date-picker__month .numInputWrapper span.arrowDown,
-  .flatpickr-month .numInputWrapper span.arrowDown {
-    top: 11px;
-  }
-
-  span.#{$prefix}--date-picker__weekday,
-  span.flatpickr-weekday {
-    @include typescale('zeta');
-    color: $text-01;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--date-picker__day,
-  .flatpickr-day {
-    @include typescale('zeta');
-    @include focus-outline('reset');
-    height: rem(40px);
-    width: rem(40px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: $text-01;
-    border-radius: 0;
-    border: none;
-    transition: all $transition--base;
-
-    &:hover {
-      background: $hover-ui;
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--date-picker__days .nextMonthDay,
-  .#{$prefix}--date-picker__days .prevMonthDay {
-    color: $text-02;
-  }
-
-  .#{$prefix}--date-picker__day.today,
-  .flatpickr-day.today {
-    position: relative;
-    color: $interactive-01;
-
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      bottom: rem(7px);
-      left: 50%;
-      transform: translateX(-50%);
-      height: rem(4px);
-      width: rem(4px);
-      background: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.today.no-border,
-  .flatpickr-day.today.no-border {
-    border: none;
-  }
-
-  .#{$prefix}--date-picker__day.today.selected {
-    border: 2px solid $interactive-01;
-    &::after {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.disabled,
-  .flatpickr-day.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: $ui-05;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  .#{$prefix}--date-picker__day.inRange,
-  .flatpickr-day.inRange {
-    background: $date-picker-in-range-background-color;
-    color: $text-01;
-  }
-
-  .#{$prefix}--date-picker__day.selected,
-  .flatpickr-day.selected {
-    color: $inverse-01;
-    background: $interactive-01;
-  }
-
-  .#{$prefix}--date-picker__day.startRange.selected,
-  .flatpickr-day.startRange.selected {
-    box-shadow: none;
-    z-index: 2;
-  }
-
-  .#{$prefix}--date-picker__day.endRange.inRange,
-  .flatpickr-day.endRange.inRange {
-    @include focus-outline('outline');
-    background: $ui-01;
-    z-index: 3;
-  }
-
-  .#{$prefix}--date-picker__day.endRange.inRange.selected,
-  .flatpickr-day.endRange.inRange.selected {
-    color: $inverse-01;
-    background: $interactive-01;
-  }
-
-  .#{$prefix}--date-picker__day.startRange.inRange:not(.selected),
-  .flatpickr-day.startRange.inRange:not(.selected) {
-    @include focus-outline('outline');
-    background: $ui-01;
-    z-index: 3;
-  }
-
-  .#{$prefix}--date-picker__days,
-  .dayContainer {
-    width: 100%;
-    min-width: 100%;
-    height: rem(246px);
-  }
-
-  .flatpickr-innerContainer,
-  .flatpickr-rContainer {
-    width: 100%;
-    height: rem(336px);
-  }
-
-  .#{$prefix}--date-picker__weekdays,
-  .flatpickr-weekdays,
-  .flatpickr-weekdaycontainer {
-    width: 100%;
-  }
-
-  .flatpickr-weekdays {
-    height: rem(40px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .flatpickr-weekdaycontainer {
-    display: flex;
-  }
-
-  .flatpickr-months {
-    display: flex;
-    width: 100%;
-    position: relative;
-  }
-
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    padding-top: 12px;
-  }
-
-  .flatpickr-prev-month:hover svg,
-  .flatpickr-next-month:hover svg {
-    fill: $text-01;
-  }
-
-  .flatpickr-next-month.disabled,
-  .flatpickr-prev-month.disabled {
-    svg {
-      fill: $ui-05;
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:hover {
-      svg {
-        fill: $ui-05;
-      }
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--date-picker.#{$prefix}--skeleton input,
-  .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-
-    &::-webkit-input-placeholder {
-      color: transparent;
-    }
-  }
-
-  .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(14px);
-  }
-}
-
-@include exports('date-picker') {
-  @if feature-flag-enabled('components-x') {
-    @include date-picker--x;
-  } @else {
-    @include date-picker;
-  }
-}
diff --git a/scss/components/date-picker/_flatpickr.scss b/scss/components/date-picker/_flatpickr.scss
deleted file mode 100644
index b57b11fa3e01..000000000000
--- a/scss/components/date-picker/_flatpickr.scss
+++ /dev/null
@@ -1,835 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/typography';
-
-.flatpickr-calendar {
-  background: transparent;
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  text-align: center;
-  padding: 0;
-  animation: none;
-  direction: ltr;
-  border: 0;
-  font-size: 14px;
-  line-height: 24px;
-  border-radius: 5px;
-  position: absolute;
-  width: 315px;
-  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);
-}
-
-.flatpickr-calendar.open,
-.flatpickr-calendar.inline {
-  opacity: 1;
-  visibility: visible;
-  overflow: visible;
-  max-height: 640px;
-}
-
-.flatpickr-calendar.open {
-  display: inline-block;
-  z-index: 99999;
-}
-
-.flatpickr-calendar.animate.open {
-  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
-  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.flatpickr-calendar.inline {
-  display: block;
-  position: relative;
-  top: 2px;
-}
-
-.flatpickr-calendar.static {
-  position: absolute;
-  top: calc(100% + 2px);
-}
-
-.flatpickr-calendar.static.open {
-  z-index: 999;
-  display: block;
-}
-
-.flatpickr-calendar.hasWeeks {
-  width: auto;
-}
-
-.flatpickr-calendar .hasWeeks .dayContainer,
-.flatpickr-calendar .hasTime .dayContainer {
-  border-bottom: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.flatpickr-calendar .hasWeeks .dayContainer {
-  border-left: 0;
-}
-.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
-  height: 40px;
-  border-top: 1px solid #e6e6e6;
-}
-.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
-  height: auto;
-}
-.flatpickr-calendar:before,
-.flatpickr-calendar:after {
-  position: absolute;
-  display: block;
-  pointer-events: none;
-  border: solid transparent;
-  content: '';
-  height: 0;
-  width: 0;
-  left: 22px;
-}
-.flatpickr-calendar.rightMost:before,
-.flatpickr-calendar.rightMost:after {
-  left: auto;
-  right: 22px;
-}
-.flatpickr-calendar:before {
-  border-width: 5px;
-  margin: 0 -5px;
-}
-.flatpickr-calendar:after {
-  border-width: 4px;
-  margin: 0 -4px;
-}
-.flatpickr-calendar.arrowTop:before,
-.flatpickr-calendar.arrowTop:after {
-  bottom: 100%;
-}
-.flatpickr-calendar.arrowTop:before {
-  border-bottom-color: #e6e6e6;
-}
-.flatpickr-calendar.arrowTop:after {
-  border-bottom-color: #fff;
-}
-.flatpickr-calendar.arrowBottom:before,
-.flatpickr-calendar.arrowBottom:after {
-  top: 100%;
-}
-.flatpickr-calendar.arrowBottom:before {
-  border-top-color: #e6e6e6;
-}
-.flatpickr-calendar.arrowBottom:after {
-  border-top-color: #fff;
-}
-.flatpickr-calendar:focus {
-  outline: 0;
-}
-.flatpickr-wrapper {
-  position: relative;
-  display: inline-block;
-}
-.flatpickr-month {
-  background: transparent;
-  color: rgba(0, 0, 0, 0.9);
-  fill: rgba(0, 0, 0, 0.9);
-  height: 28px;
-  line-height: 1;
-  text-align: center;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: hidden;
-}
-.flatpickr-prev-month,
-.flatpickr-next-month {
-  text-decoration: none;
-  cursor: pointer;
-  position: absolute;
-  top: 0px;
-  line-height: 16px;
-  height: 28px;
-  padding: 10px calc(3.57% - 1.5px);
-  z-index: 3;
-}
-.flatpickr-prev-month i,
-.flatpickr-next-month i {
-  position: relative;
-}
-.flatpickr-prev-month.flatpickr-prev-month,
-.flatpickr-next-month.flatpickr-prev-month {
-  /*
-        /*rtl:begin:ignore*/
-  /*
-        */
-  left: 0;
-  /*
-        /*rtl:end:ignore*/
-  /*
-        */
-}
-/*
-        /*rtl:begin:ignore*/
-/*
-        /*rtl:end:ignore*/
-.flatpickr-prev-month.flatpickr-next-month,
-.flatpickr-next-month.flatpickr-next-month {
-  /*
-        /*rtl:begin:ignore*/
-  /*
-        */
-  right: 0;
-  /*
-        /*rtl:end:ignore*/
-  /*
-        */
-}
-/*
-        /*rtl:begin:ignore*/
-/*
-        /*rtl:end:ignore*/
-.flatpickr-prev-month:hover,
-.flatpickr-next-month:hover {
-  color: #959ea9;
-}
-.flatpickr-prev-month:hover svg,
-.flatpickr-next-month:hover svg {
-  fill: #f64747;
-}
-.flatpickr-prev-month svg,
-.flatpickr-next-month svg {
-  width: 14px;
-}
-.flatpickr-prev-month svg path,
-.flatpickr-next-month svg path {
-  transition: fill 0.1s;
-  fill: inherit;
-}
-.numInputWrapper {
-  position: relative;
-  height: auto;
-}
-.numInputWrapper input,
-.numInputWrapper span {
-  display: inline-block;
-}
-.numInputWrapper input {
-  width: 100%;
-}
-.numInputWrapper span {
-  position: absolute;
-  right: 0;
-  width: 14px;
-  padding: 0 4px 0 2px;
-  height: 50%;
-  line-height: 50%;
-  opacity: 0;
-  cursor: pointer;
-  border: 1px solid rgba(57, 57, 57, 0.05);
-  box-sizing: border-box;
-}
-.numInputWrapper span:hover {
-  background: rgba(0, 0, 0, 0.1);
-}
-.numInputWrapper span:active {
-  background: rgba(0, 0, 0, 0.2);
-}
-.numInputWrapper span:after {
-  display: block;
-  content: '';
-  position: absolute;
-  top: 33%;
-}
-.numInputWrapper span.arrowUp {
-  top: 0;
-  border-bottom: 0;
-}
-.numInputWrapper span.arrowUp:after {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
-}
-.numInputWrapper span.arrowDown {
-  top: 50%;
-}
-.numInputWrapper span.arrowDown:after {
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid rgba(57, 57, 57, 0.6);
-}
-.numInputWrapper span svg {
-  width: inherit;
-  height: auto;
-}
-.numInputWrapper span svg path {
-  fill: rgba(0, 0, 0, 0.5);
-}
-.numInputWrapper:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-.numInputWrapper:hover span {
-  opacity: 1;
-}
-.flatpickr-current-month {
-  @include type-style('heading-01');
-
-  color: inherit;
-  position: absolute;
-  width: 75%;
-  left: 12.5%;
-  padding: 6.16px 0 0 0;
-  height: 28px;
-  display: inline-block;
-  text-align: center;
-  -webkit-transform: translate3d(0px, 0px, 0px);
-  transform: translate3d(0px, 0px, 0px);
-}
-.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);
-}
-.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);
-}
-.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);
-}
-.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);
-}
-.flatpickr-current-month span.cur-month {
-  font-family: inherit;
-  font-weight: 600;
-  color: inherit;
-  display: inline-block;
-  margin-left: 0.5ch;
-  padding: 0;
-}
-.flatpickr-current-month span.cur-month:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-.flatpickr-current-month .numInputWrapper {
-  width: 6ch;
-  width: 7ch\0;
-  display: inline-block;
-}
-.flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: rgba(0, 0, 0, 0.9);
-}
-.flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: rgba(0, 0, 0, 0.9);
-}
-.flatpickr-current-month input.cur-year {
-  background: transparent;
-  box-sizing: border-box;
-  color: inherit;
-  cursor: default;
-  padding: 0 0 0 0.5ch;
-  margin: 0;
-  display: inline-block;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: 300;
-  line-height: inherit;
-  height: auto;
-  border: 0;
-  border-radius: 0;
-  vertical-align: baseline;
-}
-.flatpickr-current-month input.cur-year:focus {
-  outline: 0;
-}
-.flatpickr-current-month input.cur-year[disabled],
-.flatpickr-current-month input.cur-year[disabled]:hover {
-  font-size: 100%;
-  color: rgba(0, 0, 0, 0.5);
-  background: transparent;
-  pointer-events: none;
-}
-.flatpickr-weekdays {
-  background: transparent;
-  text-align: center;
-  overflow: hidden;
-  width: 315px;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 28px;
-}
-span.flatpickr-weekday {
-  @include type-style('body-short-01');
-
-  cursor: default;
-  background: transparent;
-  color: rgba(0, 0, 0, 0.54);
-  margin: 0;
-  text-align: center;
-  display: block;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-.dayContainer,
-.flatpickr-weeks {
-  padding: 1px 0 0 0;
-}
-.flatpickr-days {
-  position: relative;
-  overflow: hidden;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 315px;
-}
-.flatpickr-days:focus {
-  outline: 0;
-}
-.dayContainer {
-  padding: 0;
-  outline: 0;
-  text-align: left;
-  width: 315px;
-  min-width: 315px;
-  max-width: 315px;
-  box-sizing: border-box;
-  display: inline-block;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-around;
-  justify-content: space-around;
-  -webkit-transform: translate3d(0px, 0px, 0px);
-  transform: translate3d(0px, 0px, 0px);
-  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);
-}
-.flatpickr-calendar.animate .dayContainer.slideLeft,
-.flatpickr-calendar.animate .dayContainer.slideLeftNew {
-  -webkit-transform: translate3d(-100%, 0px, 0px);
-  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);
-}
-.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-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);
-}
-.flatpickr-day {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 150px;
-  box-sizing: border-box;
-  color: #393939;
-  cursor: pointer;
-  font-weight: 400;
-  width: 14.2857143%;
-  -webkit-flex-basis: 14.2857143%;
-  -ms-flex-preferred-size: 14.2857143%;
-  flex-basis: 14.2857143%;
-  max-width: 40px;
-  height: 40px;
-  line-height: 40px;
-  margin: 0;
-  display: inline-block;
-  position: relative;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-align: center;
-}
-// .flatpickr-day.inRange,
-// .flatpickr-day.prevMonthDay.inRange,
-// .flatpickr-day.nextMonthDay.inRange,
-// .flatpickr-day.today.inRange,
-// .flatpickr-day.prevMonthDay.today.inRange,
-// .flatpickr-day.nextMonthDay.today.inRange,
-// .flatpickr-day:hover,
-// .flatpickr-day.prevMonthDay:hover,
-// .flatpickr-day.nextMonthDay:hover,
-// .flatpickr-day:focus,
-// .flatpickr-day.prevMonthDay:focus,
-// .flatpickr-day.nextMonthDay:focus {
-//   cursor: pointer;
-//   outline: 0;
-//   background: #e6e6e6;
-//   border-color: #e6e6e6;
-// }
-// .flatpickr-day.today {
-//   border-color: #959ea9;
-// }
-// .flatpickr-day.today:hover,
-// .flatpickr-day.today:focus {
-//   border-color: #959ea9;
-//   background: #959ea9;
-//   color: #fff;
-// }
-// .flatpickr-day.selected,
-// .flatpickr-day.startRange,
-// .flatpickr-day.endRange,
-// .flatpickr-day.selected.inRange,
-// .flatpickr-day.startRange.inRange,
-// .flatpickr-day.endRange.inRange,
-// .flatpickr-day.selected:focus,
-// .flatpickr-day.startRange:focus,
-// .flatpickr-day.endRange:focus,
-// .flatpickr-day.selected:hover,
-// .flatpickr-day.startRange:hover,
-// .flatpickr-day.endRange:hover,
-// .flatpickr-day.selected.prevMonthDay,
-// .flatpickr-day.startRange.prevMonthDay,
-// .flatpickr-day.endRange.prevMonthDay,
-// .flatpickr-day.selected.nextMonthDay,
-// .flatpickr-day.startRange.nextMonthDay,
-// .flatpickr-day.endRange.nextMonthDay {
-//   background: #569ff7;
-//   box-shadow: none;
-//   color: #fff;
-//   border-color: #569ff7;
-// }
-// .flatpickr-day.selected.startRange,
-// .flatpickr-day.startRange.startRange,
-// .flatpickr-day.endRange.startRange {
-//   border-radius: 50px 0 0 50px;
-// }
-// .flatpickr-day.selected.endRange,
-// .flatpickr-day.startRange.endRange,
-// .flatpickr-day.endRange.endRange {
-//   border-radius: 0 50px 50px 0;
-// }
-// .flatpickr-day.selected.startRange + .endRange,
-// .flatpickr-day.startRange.startRange + .endRange,
-// .flatpickr-day.endRange.startRange + .endRange {
-//   box-shadow: -10px 0 0 #569ff7;
-// }
-// .flatpickr-day.selected.startRange.endRange,
-// .flatpickr-day.startRange.startRange.endRange,
-// .flatpickr-day.endRange.startRange.endRange {
-//   border-radius: 50px;
-// }
-// .flatpickr-day.inRange {
-//   border-radius: 0;
-//   box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
-// }
-// .flatpickr-day.disabled,
-// .flatpickr-day.disabled:hover {
-//   pointer-events: none;
-// }
-// .flatpickr-day.disabled,
-// .flatpickr-day.disabled:hover,
-// .flatpickr-day.prevMonthDay,
-// .flatpickr-day.nextMonthDay,
-// .flatpickr-day.notAllowed,
-// .flatpickr-day.notAllowed.prevMonthDay,
-// .flatpickr-day.notAllowed.nextMonthDay {
-//   color: rgba(57,57,57,0.3);
-//   background: transparent;
-//   border-color: transparent;
-//   cursor: default;
-// }
-.flatpickr-day.week.selected {
-  border-radius: 0;
-  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
-}
-// .rangeMode .flatpickr-day {
-//   margin-top: 1px;
-// }
-.flatpickr-weekwrapper {
-  display: inline-block;
-  float: left;
-}
-.flatpickr-weekwrapper .flatpickr-weeks {
-  padding: 0 12px;
-  box-shadow: 1px 0 0 #e6e6e6;
-}
-.flatpickr-weekwrapper .flatpickr-weekday {
-  float: none;
-  width: 100%;
-  line-height: 28px;
-}
-.flatpickr-weekwrapper span.flatpickr-day {
-  display: block;
-  width: 100%;
-  max-width: none;
-}
-.flatpickr-innerContainer {
-  display: block;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.flatpickr-rContainer {
-  display: inline-block;
-  padding: 0;
-  box-sizing: border-box;
-}
-.flatpickr-time {
-  text-align: center;
-  outline: 0;
-  display: block;
-  height: 0;
-  line-height: 40px;
-  max-height: 40px;
-  box-sizing: border-box;
-  overflow: hidden;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-.flatpickr-time:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-.flatpickr-time .numInputWrapper {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  width: 40%;
-  height: 40px;
-  float: left;
-}
-.flatpickr-time .numInputWrapper span.arrowUp:after {
-  border-bottom-color: #393939;
-}
-.flatpickr-time .numInputWrapper span.arrowDown:after {
-  border-top-color: #393939;
-}
-.flatpickr-time.hasSeconds .numInputWrapper {
-  width: 26%;
-}
-.flatpickr-time.time24hr .numInputWrapper {
-  width: 49%;
-}
-.flatpickr-time input {
-  background: transparent;
-  box-shadow: none;
-  border: 0;
-  border-radius: 0;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-  height: inherit;
-  line-height: inherit;
-  cursor: pointer;
-  color: #393939;
-  font-size: 14px;
-  position: relative;
-  box-sizing: border-box;
-}
-.flatpickr-time input.flatpickr-hour {
-  font-weight: bold;
-}
-.flatpickr-time input.flatpickr-minute,
-.flatpickr-time input.flatpickr-second {
-  font-weight: 400;
-}
-.flatpickr-time input:focus {
-  outline: 0;
-  border: 0;
-}
-.flatpickr-time .flatpickr-time-separator,
-.flatpickr-time .flatpickr-am-pm {
-  height: inherit;
-  display: inline-block;
-  float: left;
-  line-height: inherit;
-  color: #393939;
-  font-weight: bold;
-  width: 2%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  -ms-grid-row-align: center;
-  align-self: center;
-}
-.flatpickr-time .flatpickr-am-pm {
-  outline: 0;
-  width: 18%;
-  cursor: pointer;
-  text-align: center;
-  font-weight: 400;
-}
-.flatpickr-time .flatpickr-am-pm:hover,
-.flatpickr-time .flatpickr-am-pm:focus {
-  background: #f0f0f0;
-}
-.flatpickr-input[readonly] {
-  cursor: pointer;
-}
-@-webkit-keyframes fpFadeInDown {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes fpFadeInDown {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes fpSlideLeft {
-  from {
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    transform: translate3d(0px, 0px, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(-100%, 0px, 0px);
-    transform: translate3d(-100%, 0px, 0px);
-  }
-}
-@keyframes fpSlideLeft {
-  from {
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    transform: translate3d(0px, 0px, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(-100%, 0px, 0px);
-    transform: translate3d(-100%, 0px, 0px);
-  }
-}
-@-webkit-keyframes fpSlideLeftNew {
-  from {
-    -webkit-transform: translate3d(100%, 0px, 0px);
-    transform: translate3d(100%, 0px, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    transform: translate3d(0px, 0px, 0px);
-  }
-}
-@keyframes fpSlideLeftNew {
-  from {
-    -webkit-transform: translate3d(100%, 0px, 0px);
-    transform: translate3d(100%, 0px, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    transform: translate3d(0px, 0px, 0px);
-  }
-}
-@-webkit-keyframes fpSlideRight {
-  from {
-    -webkit-transform: translate3d(0, 0, 0px);
-    transform: translate3d(0, 0, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(100%, 0px, 0px);
-    transform: translate3d(100%, 0px, 0px);
-  }
-}
-@keyframes fpSlideRight {
-  from {
-    -webkit-transform: translate3d(0, 0, 0px);
-    transform: translate3d(0, 0, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(100%, 0px, 0px);
-    transform: translate3d(100%, 0px, 0px);
-  }
-}
-@-webkit-keyframes fpSlideRightNew {
-  from {
-    -webkit-transform: translate3d(-100%, 0, 0px);
-    transform: translate3d(-100%, 0, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0px);
-    transform: translate3d(0, 0, 0px);
-  }
-}
-@keyframes fpSlideRightNew {
-  from {
-    -webkit-transform: translate3d(-100%, 0, 0px);
-    transform: translate3d(-100%, 0, 0px);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0px);
-    transform: translate3d(0, 0, 0px);
-  }
-}
-@-webkit-keyframes fpFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fpFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fpFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fpFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
diff --git a/scss/components/dropdown/_dropdown.scss b/scss/components/dropdown/_dropdown.scss
deleted file mode 100644
index 5467fa905cd7..000000000000
--- a/scss/components/dropdown/_dropdown.scss
+++ /dev/null
@@ -1,507 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Dropdown
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/layout';
-
-@mixin dropdown {
-  .#{$prefix}--dropdown {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    position: relative;
-    list-style: none;
-    display: block;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 1;
-    width: 100%;
-    height: rem(40px);
-    cursor: pointer;
-    color: $text-01;
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &.#{$prefix}--dropdown--open:focus {
-      outline: 1px solid transparent;
-      box-shadow: none;
-    }
-
-    .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-      @include layer('overlay');
-    }
-  }
-
-  .#{$prefix}--dropdown--light {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--dropdown--up {
-    .#{$prefix}--dropdown-list {
-      bottom: 2.5rem;
-    }
-  }
-
-  .#{$prefix}--dropdown__arrow {
-    fill: $brand-01;
-    position: absolute;
-    right: 1rem;
-    top: 1.175rem;
-    width: rem(10px);
-    height: rem(5px);
-    pointer-events: none;
-    transition: transform $transition--expansion $carbon--standard-easing;
-    transform-origin: 50% 45%;
-  }
-
-  .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
-    color: $text-01;
-  }
-
-  .#{$prefix}--dropdown-text {
-    height: rem(40px);
-    padding-top: rem(13px);
-    padding-bottom: rem(13px);
-    padding-left: $spacing-md;
-    padding-right: $spacing-2xl;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: $input-border;
-  }
-
-  .#{$prefix}--dropdown-list {
-    @include reset;
-    @include layer('overlay');
-    @include typescale('zeta');
-    background-color: $ui-01;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    list-style: none;
-    position: absolute;
-    z-index: z('dropdown');
-    max-height: 0;
-    transition: max-height $transition--expansion $carbon--ease-out;
-    overflow: hidden;
-  }
-
-  .#{$prefix}--dropdown-item {
-    transition: opacity $transition--expansion $carbon--ease-out;
-    opacity: 0;
-  }
-
-  .#{$prefix}--dropdown-link {
-    display: block;
-    color: currentColor;
-    text-decoration: none;
-    font-weight: normal;
-    padding: $spacing-md $spacing-lg $spacing-md $spacing-md;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    &:hover,
-    &:focus {
-      background-color: $hover-row;
-      outline: 1px solid transparent;
-      text-decoration: underline;
-      color: $text-01;
-    }
-  }
-
-  .#{$prefix}--dropdown--selected {
-    display: none;
-  }
-
-  .#{$prefix}--dropdown--open {
-    .#{$prefix}--dropdown__arrow {
-      transform: rotate(-180deg);
-    }
-
-    .#{$prefix}--dropdown-list {
-      max-height: 15rem;
-
-      &:hover {
-        overflow: auto;
-      }
-    }
-
-    .#{$prefix}--dropdown-item {
-      opacity: 1;
-    }
-  }
-
-  .#{$prefix}--dropdown--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--dropdown--auto-width {
-    width: auto;
-    max-width: rem(400px);
-  }
-
-  .#{$prefix}--dropdown--inline {
-    background-color: transparent;
-    box-shadow: none;
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:focus .#{$prefix}--dropdown-text {
-      @include focus-outline('border');
-    }
-
-    &[data-value=''] .#{$prefix}--dropdown-text {
-      color: $brand-01;
-    }
-
-    .#{$prefix}--dropdown-text {
-      display: inline-block;
-      padding-right: 1.5rem;
-      overflow: visible;
-      color: $brand-01;
-    }
-
-    .#{$prefix}--dropdown-text:hover {
-      background-color: $field-01;
-    }
-
-    &.#{$prefix}--dropdown--open:focus {
-      box-shadow: none;
-    }
-
-    &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list {
-      @include layer('overlay');
-    }
-
-    &.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-text {
-      outline: none;
-    }
-
-    .#{$prefix}--dropdown__arrow {
-      position: relative;
-      top: -2px;
-      left: 8px;
-      right: 0;
-      bottom: 0;
-    }
-
-    .#{$prefix}--dropdown-link {
-      font-weight: normal;
-    }
-
-    .#{$prefix}--dropdown-link:hover {
-      background-color: $field-01;
-      color: $text-01;
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--dropdown-v2.#{$prefix}--skeleton,
-  .#{$prefix}--dropdown.#{$prefix}--skeleton {
-    @include skeleton;
-  }
-}
-
-@mixin dropdown--x {
-  .#{$prefix}--dropdown {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    @include focus-outline('reset');
-    position: relative;
-    list-style: none;
-    display: block;
-    background-color: $field-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    width: 100%;
-    height: rem(40px);
-    cursor: pointer;
-    color: $text-01;
-    outline: 2px solid transparent;
-    transition: $transition--base all;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--dropdown[data-invalid] {
-    @include focus-outline('invalid');
-
-    + .#{$prefix}--form-requirement {
-      display: inline-block;
-      max-height: rem(200px);
-      color: $support-01;
-    }
-  }
-
-  .#{$prefix}--dropdown__invalid {
-    position: absolute;
-    top: 50%;
-    right: rem(34px);
-    fill: $support-01;
-    transform: translateY(-50%);
-  }
-
-  .#{$prefix}--dropdown--open {
-    background-color: $hover-ui;
-  }
-
-  .#{$prefix}--dropdown--open:focus {
-    outline: 1px solid transparent;
-    box-shadow: none;
-  }
-
-  .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-    @include layer('overlay');
-  }
-
-  .#{$prefix}--dropdown--light {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list {
-    bottom: 2rem;
-  }
-
-  .#{$prefix}--dropdown__arrow {
-    fill: $ui-05;
-    position: absolute;
-    right: 1rem;
-    top: rem(17px);
-    width: rem(10px);
-    height: rem(6px);
-    pointer-events: none;
-    transition: transform $transition--expansion $carbon--standard-easing;
-    transform-origin: 50% 45%;
-  }
-
-  .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
-    color: $text-01;
-  }
-
-  .#{$prefix}--dropdown-text {
-    display: flex;
-    align-items: center;
-    height: rem(40px);
-    padding-top: rem(12px);
-    padding-bottom: rem(12px);
-    padding-left: rem(16px);
-    padding-right: rem(42px); // 2rem + SVG width
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .#{$prefix}--dropdown-list {
-    @include reset;
-    @include layer('overlay');
-    @include typescale('zeta');
-    background-color: $ui-01;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    list-style: none;
-    position: absolute;
-    z-index: z('dropdown');
-    max-height: 0;
-    transition: max-height $transition--expansion cubic-bezier(0, 0, 0.38, 0.9);
-    overflow: hidden;
-  }
-
-  .#{$prefix}--dropdown-item {
-    transition: opacity $transition--expansion cubic-bezier(0, 0, 0.38, 0.9), background-color $transition--base;
-    opacity: 0;
-    margin-top: -1px;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-
-    &:active {
-      background-color: $active-ui;
-    }
-
-    &:first-of-type {
-      padding-top: 3px;
-    }
-  }
-
-  .#{$prefix}--dropdown-item:last-of-type .#{$prefix}--dropdown-link {
-    border-bottom: none;
-    margin-bottom: 2px;
-  }
-
-  .#{$prefix}--dropdown-link {
-    @include focus-outline('reset');
-    display: block;
-    color: currentColor;
-    text-decoration: none;
-    font-weight: normal;
-    line-height: rem(16px);
-    padding: rem(11px) 0;
-    margin: 0 rem(16px);
-    border: 1px solid transparent;
-    border-bottom: 1px solid $ui-03;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    &:focus {
-      @include focus-outline('outline');
-      margin: 0;
-      padding: rem(11px) rem(16px);
-    }
-
-    &:hover {
-      color: $text-01;
-      border-bottom-color: transparent;
-    }
-  }
-
-  .#{$prefix}--dropdown-item:hover .#{$prefix}--dropdown-link {
-    border-bottom-color: $hover-ui;
-  }
-
-  .#{$prefix}--dropdown--selected {
-    display: none;
-  }
-
-  .#{$prefix}--dropdown--open .#{$prefix}--dropdown__arrow {
-    transform: rotate(-180deg);
-  }
-
-  .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-    max-height: 15rem;
-
-    &:hover {
-      overflow: auto;
-    }
-  }
-
-  .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item {
-    opacity: 1;
-  }
-
-  .#{$prefix}--dropdown--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--dropdown--auto-width {
-    width: auto;
-    max-width: rem(400px);
-  }
-
-  .#{$prefix}--dropdown--inline {
-    border-bottom-color: transparent;
-    background-color: transparent;
-    box-shadow: none;
-    transition-property: none;
-    width: initial;
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid .#{$prefix}--dropdown-text__inner {
-    margin-right: rem(20px);
-  }
-
-  .#{$prefix}--dropdown--inline:focus .#{$prefix}--dropdown-text {
-    outline: 2px solid $interactive-01;
-  }
-
-  .#{$prefix}--dropdown--inline[data-value=''] .#{$prefix}--dropdown-text {
-    color: $text-01;
-  }
-
-  .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
-    display: inline-block;
-    padding-right: 1.5rem;
-    overflow: visible;
-    color: $text-01;
-  }
-
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus {
-    box-shadow: none;
-  }
-
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-list {
-    @include layer('overlay');
-  }
-
-  .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus .#{$prefix}--dropdown-text {
-    outline: none;
-  }
-
-  .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-item:first-of-type {
-    padding-top: 3px;
-  }
-
-  .#{$prefix}--dropdown--inline .#{$prefix}--dropdown__arrow {
-    position: relative;
-    top: -2px;
-    left: 8px;
-    right: 0;
-    bottom: 0;
-  }
-
-  .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link {
-    font-weight: normal;
-  }
-
-  // Skeleton State
-  .#{$prefix}--dropdown-v2.#{$prefix}--skeleton,
-  .#{$prefix}--dropdown.#{$prefix}--skeleton {
-    @include skeleton;
-  }
-}
-
-@include exports('dropdown') {
-  @if feature-flag-enabled('components-x') {
-    @include dropdown--x;
-  } @else {
-    @include dropdown;
-  }
-}
diff --git a/scss/components/fab/_fab.scss b/scss/components/fab/_fab.scss
deleted file mode 100644
index f872d8bc38bc..000000000000
--- a/scss/components/fab/_fab.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-
-@mixin fab {
-  @include deprecate(
-    'The `fab` component in `carbon-components` has been deprecated. ' + 'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--fab {
-      @include reset;
-      @include rotate(0, $transition--base);
-      display: inline-block;
-      width: rem(72px);
-      height: rem(72px);
-      text-decoration: none;
-      filter: drop-shadow(0px 3px 3px 0 $box-shadow);
-
-      &__hidden {
-        @include hidden;
-        color: $color__white;
-      }
-
-      // Styles for "Open" state
-      &__svg {
-        width: 100%;
-
-        .#{$prefix}--fab__hexagon {
-          transition: fill $transition--base;
-          fill: $color__blue-40;
-        }
-
-        .#{$prefix}--fab__plus-icon {
-          @include rotate(0, $transition--base);
-          fill: $color__white;
-        }
-      }
-
-      // Styles for "Closed" state
-      &[data-state='closed'] {
-        @include rotate(90deg, $transition--base);
-
-        .#{$prefix}--fab__hexagon {
-          transition: fill $transition--base;
-          fill: $color__navy-gray-5;
-        }
-
-        .#{$prefix}--fab__plus-icon {
-          @include rotate(-45deg, $transition--base);
-        }
-      }
-    }
-  }
-}
-
-@include exports('fab') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include fab;
-  }
-}
diff --git a/scss/components/file-uploader/_file-uploader.scss b/scss/components/file-uploader/_file-uploader.scss
deleted file mode 100644
index 83a770a2a6c4..000000000000
--- a/scss/components/file-uploader/_file-uploader.scss
+++ /dev/null
@@ -1,235 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--typography';
-@import '../button/button';
-@import '../form/form';
-@import '../loading/loading';
-@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';
-
-@mixin file-uploader {
-  .#{$prefix}--file {
-    width: 100%;
-  }
-
-  .#{$prefix}--file-input {
-    @include hidden;
-  }
-
-  .#{$prefix}--file-btn {
-    display: inline-flex;
-    margin: 0;
-  }
-
-  .#{$prefix}--label-description {
-    @include reset;
-    @include typescale('zeta');
-    @include line-height('body');
-    color: $text-02;
-    margin-bottom: $spacing-lg;
-  }
-
-  .#{$prefix}--file-container {
-    display: block;
-    width: 100%;
-    margin-top: $spacing-lg;
-  }
-
-  .#{$prefix}--file__selected-file {
-    @include text-overflow(300px);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: rem(30px);
-    background-color: $field-02;
-    border: 1px solid $ui-03;
-    padding: 0 $spacing-md;
-    margin-bottom: $spacing-md;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .#{$prefix}--file-filename {
-    @include typescale('omega');
-    @include text-overflow(100%);
-    display: inline-flex;
-    align-items: center;
-    color: $text-01;
-    margin-right: $spacing-md;
-    height: 1.875rem;
-    /*rtl:ignore*/
-    direction: ltr;
-    justify-content: flex-start; /*rtl:{flex-end}*/
-  }
-
-  .#{$prefix}--file__state-container {
-    display: flex;
-    align-items: center;
-
-    .#{$prefix}--loading {
-      width: 1rem;
-      height: 1rem;
-      margin-right: $spacing-xs;
-    }
-
-    .#{$prefix}--loading__svg {
-      stroke: $ui-05;
-    }
-  }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-close,
-  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    width: 1rem;
-    height: 1rem;
-    fill: $text-01;
-    cursor: pointer;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-close {
-    fill: $ui-05;
-  }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    fill: $support-02;
-  }
-}
-
-@mixin file-uploader--x {
-  .#{$prefix}--file {
-    width: 100%;
-  }
-
-  .#{$prefix}--file--invalid {
-    margin-right: $spacing-xs;
-    fill: $support-01;
-  }
-
-  // TODO: sync with type
-  .#{$prefix}--file--label {
-    @include reset;
-    @include type-style('heading-01');
-
-    color: $text-01;
-    margin-bottom: $spacing-xs;
-  }
-
-  .#{$prefix}--file-input {
-    @include hidden;
-  }
-
-  .#{$prefix}--file-btn {
-    display: inline-flex;
-    margin: 0;
-    padding-right: rem(64px);
-  }
-
-  .#{$prefix}--label-description {
-    @include reset;
-    @include type-style('body-short-01');
-
-    color: $text-02;
-    margin-bottom: $spacing-md;
-  }
-
-  .#{$prefix}--file-container {
-    display: block;
-    width: 100%;
-    margin-top: $spacing-lg;
-  }
-
-  .#{$prefix}--file__selected-file {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: rem(32px);
-    max-width: rem(300px);
-    margin-bottom: $spacing-xs;
-    padding: 0 $spacing-xs 0 $spacing-md;
-    background-color: $field-01;
-    overflow: hidden;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .#{$prefix}--inline-loading__animation,
-    .#{$prefix}--loading {
-      right: -0.25rem; // offset for loading svg container
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-  }
-
-  .#{$prefix}--file__selected-file--invalid {
-    @include focus-outline('invalid');
-    margin-bottom: $spacing-2xs;
-  }
-
-  .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
-    display: block;
-    max-height: rem(200px);
-    color: $support-01;
-    font-weight: 400;
-    margin: 0 0 $spacing-xs 0;
-    overflow: visible;
-  }
-
-  .#{$prefix}--file-filename {
-    @include type-style('body-short-01');
-    @include text-overflow(300px);
-    display: inline-block;
-    align-items: center;
-    color: $text-01;
-    margin-right: $spacing-md;
-    /*rtl:ignore*/
-    direction: ltr;
-    justify-content: flex-start; /*rtl:{flex-end}*/
-  }
-
-  .#{$prefix}--file__state-container {
-    display: flex;
-    align-items: center;
-
-    .#{$prefix}--loading__svg {
-      stroke: $ui-05;
-    }
-  }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    fill: $support-02;
-    cursor: pointer;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-close {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-  }
-}
-
-@include exports('file-uploader') {
-  @if feature-flag-enabled('components-x') {
-    @include file-uploader--x;
-  } @else {
-    @include file-uploader;
-  }
-}
diff --git a/scss/components/footer/_footer.scss b/scss/components/footer/_footer.scss
deleted file mode 100644
index 6cba3adbcfef..000000000000
--- a/scss/components/footer/_footer.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Footer
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../button/button';
-@import '../link/link';
-
-.#{$prefix}--footer--bottom-fixed {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-}
-
-.#{$prefix}--footer {
-  @include reset;
-  @include font-family;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  border-top: 2px solid $brand-01;
-  background-color: $ui-01;
-  min-height: 3.5rem;
-  z-index: z('footer');
-  padding: rem(20px) 5%;
-  width: 100%;
-}
-
-.#{$prefix}--footer-info {
-  display: flex;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
-}
-
-.#{$prefix}--footer-info__item {
-  @include typescale('delta');
-  @include line-height('body');
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  margin-right: rem(64px);
-}
-
-.#{$prefix}--footer-info__item > .#{$prefix}--link {
-  font-weight: 600;
-}
-
-.#{$prefix}--footer-info__item > .#{$prefix}--footer-label {
-  @include typescale('zeta');
-  @include line-height('body');
-  margin: 0;
-
-  @media screen and (max-width: 600px) {
-    display: none;
-  }
-}
-
-.#{$prefix}--footer-cta {
-  margin-left: auto;
-}
diff --git a/scss/components/form/_form.scss b/scss/components/form/_form.scss
deleted file mode 100644
index a9511e308f63..000000000000
--- a/scss/components/form/_form.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/import-once';
-
-@mixin form {
-  .#{$prefix}--fieldset {
-    @include reset;
-    margin-bottom: $spacing-xl;
-  }
-
-  .#{$prefix}--form-item {
-    @include font-family;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-items: flex-start;
-  }
-
-  .#{$prefix}--form-item--light input,
-  .#{$prefix}--form-item--light input[type='number'] {
-    background: $field-02 !important;
-  }
-
-  .#{$prefix}--label {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    color: $text-01;
-    font-weight: $input-label-weight;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: $spacing-xs;
-  }
-
-  .#{$prefix}--label--with-helper {
-    margin-bottom: 0;
-  }
-
-  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
-    @include typescale('zeta');
-  }
-
-  .#{$prefix}--label--disabled {
-    opacity: 0.5;
-  }
-
-  // Skeleton State
-  .#{$prefix}--label.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(14px);
-  }
-
-  input[data-invalid],
-  textarea[data-invalid],
-  select[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
-    box-shadow: 0 2px 0px 0px $support-01;
-
-    ~ .#{$prefix}--form-requirement {
-      max-height: rem(200px);
-      display: block;
-    }
-  }
-
-  // Fix for red ring when input is marked required in Firefox, refs #744
-  input:not(output):not([data-invalid]):-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  .#{$prefix}--form-requirement {
-    @include reset;
-    @include typescale('omega');
-    margin: $spacing-sm 0 0;
-    max-height: 0;
-    overflow: hidden;
-    font-weight: 600;
-    line-height: 1.5;
-    display: none;
-
-    &::before {
-      content: '*';
-      display: inline-block;
-      color: $support-01;
-    }
-  }
-
-  .#{$prefix}--form__helper-text {
-    @include typescale('omega');
-    color: $text-02;
-    order: 1;
-    line-height: 1.5;
-    z-index: 0;
-    max-height: 3rem;
-    opacity: 1;
-    margin-bottom: $spacing-xs;
-  }
-}
-
-@mixin form--x {
-  .#{$prefix}--fieldset {
-    @include reset;
-    margin-bottom: $spacing-xl;
-  }
-
-  .#{$prefix}--form-item {
-    @include font-family;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-items: flex-start;
-  }
-
-  .#{$prefix}--label {
-    @include reset;
-    @include type-style('label-01');
-
-    color: $text-02;
-    font-weight: $input-label-weight;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: $spacing-xs;
-    line-height: rem(16px);
-  }
-
-  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
-    @include typescale('zeta');
-  }
-
-  .#{$prefix}--label--disabled {
-    color: $disabled-02;
-    cursor: not-allowed;
-  }
-
-  // Skeleton State
-  .#{$prefix}--label.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(14px);
-  }
-
-  input[type='number'] {
-    font-family: $font-family-mono;
-  }
-
-  input[data-invalid],
-  textarea[data-invalid],
-  select[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
-    outline: 2px solid $support-01;
-    outline-offset: -2px;
-
-    ~ .#{$prefix}--form-requirement {
-      max-height: rem(200px);
-      display: block;
-      color: $support-01;
-    }
-  }
-
-  // Fix for red ring when input is marked required in Firefox, refs #744
-  input:not(output):not([data-invalid]):-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  .#{$prefix}--form-requirement {
-    @include reset;
-    @include type-style('label-01');
-    margin: $spacing-2xs 0 0;
-    max-height: 0;
-    overflow: hidden;
-    line-height: 1.5;
-    display: none;
-  }
-
-  .#{$prefix}--form__helper-text {
-    @include typescale('omega');
-    font-style: italic;
-    color: $text-02;
-    line-height: 1.5;
-    z-index: 0;
-    opacity: 1;
-    max-width: 75%;
-    margin-bottom: $spacing-xs;
-  }
-}
-
-@include exports('form') {
-  @if feature-flag-enabled('components-x') {
-    @include form--x;
-  } @else {
-    @include form;
-  }
-}
diff --git a/scss/components/inline-loading/_inline-loading.scss b/scss/components/inline-loading/_inline-loading.scss
deleted file mode 100644
index a62c8f3f9d13..000000000000
--- a/scss/components/inline-loading/_inline-loading.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/import-once';
-@import 'keyframes';
-
-@mixin inline-loading {
-  .#{$prefix}--inline-loading {
-    display: flex;
-    width: 100%;
-    align-items: center;
-  }
-
-  .#{$prefix}--inline-loading__text {
-    @include typescale('zeta');
-  }
-
-  .#{$prefix}--inline-loading__animation {
-    position: relative;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .#{$prefix}--inline-loading__checkmark-container {
-    width: 0.75rem;
-    position: absolute;
-    top: 0.75rem;
-
-    &[hidden] {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--inline-loading__checkmark {
-    fill: none;
-    stroke: $brand-01;
-    transform-origin: 50% 50%;
-    stroke-width: 2.1;
-    stroke-dasharray: 12;
-    stroke-dashoffset: 12;
-    animation-name: stroke;
-    animation-duration: 0.25s;
-    animation-fill-mode: forwards;
-  }
-
-  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
-    stroke: $brand-01;
-  }
-  /* If IE11 Don't show check animation */
-  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-    .#{$prefix}--inline-loading__checkmark-container {
-      top: 1px;
-      right: 0.5rem;
-    }
-
-    .#{$prefix}--inline-loading__checkmark {
-      animation: none;
-      stroke-dashoffset: 0;
-      stroke-dasharray: 0;
-    }
-  }
-}
-
-@mixin inline-loading--x {
-  .#{$prefix}--inline-loading {
-    display: flex;
-    width: 100%;
-    align-items: center;
-
-    .#{$prefix}--loading__svg circle {
-      stroke-width: 10;
-    }
-
-    .#{$prefix}--loading__stroke {
-      stroke-dashoffset: 75;
-    }
-  }
-
-  .#{$prefix}--inline-loading__text {
-    @include type-style('body-short-01');
-    color: $text-02;
-  }
-
-  .#{$prefix}--inline-loading__animation {
-    position: relative;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .#{$prefix}--inline-loading__checkmark-container {
-    width: 0.75rem;
-    position: absolute;
-    top: 0.75rem;
-
-    &[hidden] {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--inline-loading__checkmark {
-    fill: none;
-    stroke: $interactive-01;
-    transform-origin: 50% 50%;
-    stroke-width: 2.1;
-    stroke-dasharray: 12;
-    stroke-dashoffset: 12;
-    animation-name: stroke;
-    animation-duration: 0.25s;
-    animation-fill-mode: forwards;
-  }
-
-  .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg {
-    stroke: $interactive-01;
-  }
-  /* If IE11 Don't show check animation */
-  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-    .#{$prefix}--inline-loading__checkmark-container {
-      top: 1px;
-      right: 0.5rem;
-    }
-
-    .#{$prefix}--inline-loading__checkmark {
-      animation: none;
-      stroke-dashoffset: 0;
-      stroke-dasharray: 0;
-    }
-  }
-}
-
-@include exports('inline-loading') {
-  @if feature-flag-enabled('components-x') {
-    @include inline-loading--x;
-  } @else {
-    @include inline-loading;
-  }
-}
diff --git a/scss/components/inline-loading/_keyframes.scss b/scss/components/inline-loading/_keyframes.scss
deleted file mode 100644
index 43c3fc2a708b..000000000000
--- a/scss/components/inline-loading/_keyframes.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
diff --git a/scss/components/interior-left-nav/interior-left-nav.scss b/scss/components/interior-left-nav/interior-left-nav.scss
deleted file mode 100644
index 313721f0dee4..000000000000
--- a/scss/components/interior-left-nav/interior-left-nav.scss
+++ /dev/null
@@ -1,387 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Interior Left Nav
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-
-@mixin interior-left-nav {
-  @include deprecate(
-    'The `interior-left-nav` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release. ' +
-      'If you still need this component, please use the `carbon-addons-cloud` package.'
-  ) {
-    .#{$prefix}--interior-left-nav {
-      @include reset;
-      @include font-family;
-      width: rem(250px);
-      position: fixed;
-      top: rem(90px);
-      height: 100%;
-      background-color: $color__white;
-      border-right: 1px solid $color__gray-1;
-
-      &--v6 {
-        top: rem(50px);
-      }
-
-      .left-nav-list {
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        background-color: $color__white;
-        padding-top: 1.5rem;
-        overflow: auto;
-
-        &__item {
-          cursor: pointer;
-          width: 100%;
-          padding: 0;
-
-          &:focus {
-            outline: 1px solid transparent;
-
-            &:not(.left-nav-list__item--has-children) {
-              background-color: $color__gray-2;
-            }
-
-            .left-nav-list__item-link {
-              color: $color__blue-51;
-              text-decoration: underline;
-            }
-
-            .left-nav-list--nested .left-nav-list__item-link {
-              color: $color__blue-90;
-              text-decoration: none;
-            }
-          }
-
-          &--active {
-            & > .left-nav-list__item-link {
-              background-color: $color__gray-2;
-              color: $color__blue-51;
-              font-weight: 600;
-            }
-          }
-
-          &-link {
-            @include typescale('zeta');
-            color: $color__blue-90;
-            font-weight: 400;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            text-decoration: none;
-            transition: background-color $transition--base;
-            padding: 0.75rem 1.5rem 0.75rem rem(59px);
-          }
-
-          &-icon {
-            display: flex;
-
-            .#{$prefix}--interior-left-nav__icon {
-              fill: $color__blue-51;
-              width: rem(8px);
-              height: rem(8px);
-              transition: $transition--base;
-            }
-          }
-
-          &--expanded {
-            .left-nav-list--nested {
-              max-height: 20rem;
-              transition: $transition--expansion $carbon--ease-in;
-              overflow: inherit;
-              opacity: 1;
-
-              .left-nav-list__item {
-                opacity: 1;
-              }
-            }
-
-            & > .left-nav-list__item-link {
-              color: $color__blue-51;
-            }
-
-            .left-nav-list__item-icon .#{$prefix}--interior-left-nav__icon {
-              transform: rotate(180deg);
-            }
-          }
-
-          &:not(.left-nav-list__item--has-children):hover {
-            & > .left-nav-list__item-link {
-              background-color: $color__gray-2;
-              color: $color__blue-51;
-            }
-          }
-        }
-
-        &__item--has-children {
-          .left-nav-list__item-link {
-            padding-right: 1.5rem;
-          }
-
-          &:hover {
-            > .left-nav-list__item-link {
-              color: $color__blue-51;
-            }
-          }
-        }
-      }
-
-      .left-nav-list--nested {
-        max-height: 0;
-        overflow: hidden;
-        transition: $transition--expansion $carbon--ease-out;
-        padding: 0;
-        opacity: 0;
-
-        .left-nav-list__item {
-          width: 100%;
-          position: relative;
-          padding: 0;
-          transition: $transition--base;
-          opacity: 0;
-
-          &-link {
-            @include typescale('zeta');
-            color: $color__blue-90;
-            padding: 0.75rem 1.35rem 0.75rem 4.5rem;
-            font-weight: 400;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            &:focus {
-              outline: 1px solid transparent;
-              background-color: $color__gray-2;
-              color: $color__blue-51;
-              text-decoration: underline;
-            }
-          }
-
-          &:hover {
-            outline: none;
-          }
-
-          &--active {
-            color: $color__blue-51;
-            background-color: $color__gray-2;
-
-            & > .left-nav-list__item-link {
-              font-weight: 600;
-              color: $color__blue-51;
-            }
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--interior-left-nav--collapseable {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      width: rem(200px);
-      padding-top: rem(20px);
-      transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
-
-      ul,
-      li,
-      hr,
-      .#{$prefix}--interior-left-nav-collapse__target {
-        opacity: 1;
-      }
-
-      .left-nav-list,
-      .left-nav-list__item-link {
-        background-color: inherit;
-      }
-
-      .left-nav-list__item--expanded > .left-nav-list {
-        padding-top: rem(6px);
-        padding-bottom: rem(6px);
-      }
-
-      .left-nav-list__item--expanded > .left-nav-list__item-link {
-        color: $color__blue-90;
-      }
-
-      .left-nav-line {
-        margin: rem(24px) rem(20px);
-        border: 1px solid $color__gray-1;
-      }
-
-      .left-nav-list {
-        padding-top: 0;
-
-        @include light-ui {
-          background-color: inherit;
-        }
-      }
-
-      .left-nav-list__item--active > .left-nav-list__item-link {
-        position: relative;
-        background-color: transparent;
-
-        &:before {
-          top: 0;
-          position: absolute;
-          background-color: $color__blue-51;
-          height: 100%;
-          left: 0;
-          width: 4px;
-          content: '';
-        }
-      }
-
-      .left-nav-list__item {
-        margin-bottom: rem(5px);
-      }
-
-      .left-nav-list__item-link,
-      .left-nav-list--nested .left-nav-list__item-link {
-        padding: rem(9px) rem(20px);
-      }
-
-      .left-nav-list--nested .left-nav-list__item-link {
-        @include typescale('omega');
-        padding-left: rem(40px);
-      }
-
-      .#{$prefix}--interior-left-nav-collapse {
-        cursor: pointer;
-        background-color: rgba($color__blue-51, 0.1);
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-top: auto;
-        margin-bottom: rem(90px);
-        padding: rem(14px) rem(16px);
-
-        &--v6 {
-          margin-bottom: rem(50px);
-        }
-
-        &:hover,
-        &:focus {
-          background-color: rgba($color__blue-51, 0.3);
-        }
-      }
-
-      .#{$prefix}--interior-left-nav-collapse__target {
-        margin-left: rem(10px);
-        margin-right: rem(10px);
-      }
-
-      .#{$prefix}--interior-left-nav-collapse__link {
-        @include typescale('zeta');
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        padding: 0.25rem;
-
-        &:focus {
-          @include focus-outline('border');
-        }
-      }
-
-      .#{$prefix}--interior-left-nav-collapse__arrow {
-        transform: rotate(0);
-        fill: $color__blue-51;
-        height: 12px;
-        width: 12px;
-      }
-    }
-
-    .#{$prefix}--interior-left-nav--collapsing,
-    .#{$prefix}--interior-left-nav--collapsed {
-      width: rem(48px);
-      transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
-      cursor: pointer;
-      background-color: rgba($color__blue-51, 0.1);
-
-      &:hover,
-      &:focus {
-        background-color: rgba($color__blue-51, 0.3);
-      }
-
-      ul,
-      li,
-      hr,
-      .#{$prefix}--interior-left-nav-collapse__target {
-        opacity: 0;
-        transition: opacity 300ms $carbon--standard-easing;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .#{$prefix}--interior-left-nav-collapse {
-        background-color: transparent;
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-
-      .#{$prefix}--interior-left-nav-collapse__arrow {
-        transform: rotate(180deg);
-        transition: transform 300ms $carbon--standard-easing;
-      }
-    }
-
-    .#{$prefix}--interior-left-nav--collapsed {
-      ul,
-      li,
-      hr,
-      .#{$prefix}--interior-left-nav-collapse__target {
-        display: none;
-      }
-
-      .#{$prefix}--interior-left-nav-collapse {
-        justify-content: center;
-        padding-left: 0;
-        padding-right: 0;
-      }
-    }
-
-    .#{$prefix}--interior-left-nav--expanding {
-      width: rem(200px);
-      transition: width 300ms $carbon--standard-easing;
-      background-color: #fff;
-
-      ul,
-      li,
-      hr,
-      .#{$prefix}--interior-left-nav-collapse__target {
-        opacity: 1;
-        transition: opacity $transition--expansion $carbon--standard-easing;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .#{$prefix}--interior-left-nav-collapse__arrow {
-        transform: rotate(0deg);
-        transition: transform 300ms $carbon--standard-easing;
-      }
-    }
-  }
-}
-
-@include exports('interior-left-nav') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include interior-left-nav;
-  }
-}
diff --git a/scss/components/lightbox/_lightbox.scss b/scss/components/lightbox/_lightbox.scss
deleted file mode 100644
index df3f5b7d19f9..000000000000
--- a/scss/components/lightbox/_lightbox.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/layer';
-
-@mixin lightbox {
-  @include deprecate(
-    'The `lightbox` component in `carbon-components` has been deprecated. ' + 'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--lightbox {
-      width: rem(1056px);
-      @include layer('pop-out');
-    }
-    .#{$prefix}--lightbox__main {
-      position: relative;
-    }
-    .#{$prefix}--lightbox__btn {
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-      position: absolute;
-      top: 50%;
-
-      &:first-of-type {
-        left: rem(-32px);
-      }
-
-      &:last-of-type {
-        right: rem(-32px);
-        transform: rotate(180deg);
-      }
-
-      &:focus {
-        @include focus-outline;
-      }
-
-      svg {
-        height: rem(24px);
-        fill: $ui-05;
-      }
-    }
-    .#{$prefix}--lightbox__item {
-      display: none;
-      width: 100%;
-    }
-    .#{$prefix}--lightbox__item--shown {
-      display: block;
-    }
-
-    .#{$prefix}--lightbox__footer {
-      background: $ui-01;
-      overflow: hidden;
-    }
-  }
-}
-
-@include exports('lightbox') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include lightbox;
-  }
-}
diff --git a/scss/components/link/_link.scss b/scss/components/link/_link.scss
deleted file mode 100644
index ac3ae86aa177..000000000000
--- a/scss/components/link/_link.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Link
-//-----------------------------
-
-@import '../../globals/scss/colors';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/theme';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-
-@mixin link {
-  .#{$prefix}--link {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    @include font-smoothing;
-    font-weight: 600;
-    color: $brand-01;
-    text-decoration: underline;
-    transition: $transition--base;
-
-    &:visited {
-      color: $brand-01;
-    }
-
-    &:active,
-    &:hover,
-    &:focus {
-      color: $hover-primary-text;
-    }
-
-    &:focus {
-      @include focus-outline('border');
-    }
-
-    &[aria-disabled='true'] {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-}
-
-@mixin link--x {
-  .#{$prefix}--link {
-    @include reset;
-    @include type-style('body-short-01');
-    color: $interactive-01;
-    text-decoration: none;
-
-    &:hover {
-      color: $interactive-01;
-      box-shadow: 0 1px currentColor;
-    }
-
-    &:active,
-    &:active:visited {
-      color: $text-01;
-      box-shadow: 0 1px currentColor;
-    }
-
-    &:focus {
-      color: $interactive-01;
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
-
-    &:not([href]) {
-      color: $disabled-02;
-      cursor: not-allowed;
-      pointer-events: none;
-      touch-action: none;
-
-      &:hover {
-        box-shadow: none;
-      }
-    }
-
-    &:visited {
-      color: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--link--visited {
-    color: $visited-link;
-  }
-
-  .#{$prefix}--link--disabled {
-    @include reset;
-    @include type-style('body-short-01');
-    @include font-smoothing;
-    display: inline;
-    color: $disabled-02;
-    font-weight: 400;
-  }
-}
-
-@include exports('link') {
-  @if feature-flag-enabled('components-x') {
-    @include link--x;
-  } @else {
-    @include link;
-  }
-}
diff --git a/scss/components/list-box/_list-box.scss b/scss/components/list-box/_list-box.scss
deleted file mode 100644
index 4ca6caf1fbc5..000000000000
--- a/scss/components/list-box/_list-box.scss
+++ /dev/null
@@ -1,628 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// List Box
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--helpers';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-
-$list-box-width: 100%;
-$list-box-height: rem(40px);
-$list-box-inline-height: rem(32px);
-$list-box-menu-width: rem(300px);
-
-@mixin listbox {
-  // The overall container element for a `list-box`. Has two variants,
-  // `disabled` and `inline`.
-  .#{$prefix}--list-box {
-    position: relative;
-    width: $list-box-width;
-    height: $list-box-height;
-    max-height: $list-box-height;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 1;
-    cursor: pointer;
-    color: $text-01;
-  }
-
-  // invalid states
-  .#{$prefix}--list-box[data-invalid],
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus {
-    box-shadow: 0 2px 0 0 $support-01;
-  }
-
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus .#{$prefix}--list-box__label {
-    color: $support-01;
-  }
-
-  .#{$prefix}--list-box ~ .#{$prefix}--form-requirement {
-    order: 3;
-    color: $support-01;
-    font-weight: 400;
-    margin-top: $spacing-2xs;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  // Light variation for 'list-box'
-  .#{$prefix}--list-box--light {
-    background-color: $field-02;
-  }
-
-  // Disabled state for a `list-box`
-  .#{$prefix}--list-box--disabled {
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--list-box--disabled,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item--highlighted {
-    background-color: transparent;
-    text-decoration: none;
-  }
-
-  // Inline variant for a `list-box`
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
-    background-color: inherit;
-    width: auto;
-    height: $list-box-inline-height;
-    box-shadow: none;
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
-    color: $brand-01;
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
-    padding: 0 0 0 rem(10px);
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
-    position: static;
-    padding: 0 $spacing-xs;
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__menu {
-    top: $list-box-inline-height;
-    width: $list-box-menu-width;
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'] ~ .#{$prefix}--list-box__menu {
-    outline: 1px solid $brand-01;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'],
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline > .#{$prefix}--list-box__field:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-  // The field we use for input, showing selection, etc.
-  .#{$prefix}--list-box__field {
-    @include button-reset;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 2rem 0 1rem;
-    cursor: pointer;
-  }
-
-  .#{$prefix}--list-box__field:focus,
-  .#{$prefix}--list-box__field[aria-expanded='true'] {
-    outline: none;
-    box-shadow: 0 2px 0 0 $brand-01;
-  }
-
-  .#{$prefix}--list-box__field[disabled] {
-    outline: none;
-    opacity: 0.5;
-  }
-
-  // Label for a `list-box__field`
-  .#{$prefix}--list-box__label {
-    @include typescale('zeta');
-
-    color: $text-01;
-    font-weight: 600;
-    user-select: none;
-  }
-
-  // Menu status inside of a `list-box__field`
-  .#{$prefix}--list-box__menu-icon {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    padding: 0 1rem;
-    transition: transform 200ms $carbon--standard-easing;
-    cursor: pointer;
-  }
-
-  .#{$prefix}--list-box__menu-icon > svg {
-    fill: $brand-01;
-    height: 100%;
-  }
-
-  .#{$prefix}--list-box__menu-icon--open {
-    transform: rotate(180deg);
-  }
-
-  // Selection indicator for a `list-box__field`
-  .#{$prefix}--list-box__selection {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: rem(26px);
-    bottom: 0;
-    height: rem(40px);
-    padding: 0 1rem;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 200ms $carbon--standard-easing;
-  }
-
-  .#{$prefix}--list-box__selection > svg {
-    fill: $ui-05;
-    height: 100%;
-  }
-
-  .#{$prefix}--list-box__selection:focus {
-    outline: 1px solid $brand-01;
-  }
-
-  // Modifier for a selection to show that multiple selections have been made
-  .#{$prefix}--list-box__selection--multi {
-    @include typescale('omega');
-
-    position: static;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    background-color: $brand-01;
-    height: rem(18px);
-    color: white;
-    line-height: 0;
-    padding: rem(5px);
-    margin-right: rem(10px);
-    border-radius: rem(13px);
-  }
-
-  .#{$prefix}--list-box__selection--multi > svg {
-    fill: white;
-    width: 0.5rem;
-    height: 0.5rem;
-    margin-left: rem(5px);
-  }
-
-  .#{$prefix}--list-box__selection--multi:focus,
-  .#{$prefix}--list-box__selection--multi:hover {
-    background-color: $hover-primary;
-    outline: none;
-  }
-
-  // Descendant of a `list-box` that displays a list of options to select
-  .#{$prefix}--list-box__menu {
-    @include box-shadow();
-
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: $list-box-height;
-    width: $list-box-width;
-    background-color: $ui-01;
-    max-height: rem(120px);
-    overflow-y: auto;
-    z-index: z('dropdown');
-  }
-
-  // Descendant of a `list-box__menu` that represents a selection for a control
-  .#{$prefix}--list-box__menu-item {
-    @include typescale('zeta');
-
-    display: flex;
-    align-items: center;
-    height: rem(40px);
-    padding: 0 1rem;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .#{$prefix}--list-box__menu-item:hover,
-  .#{$prefix}--list-box__menu-item--highlighted {
-    background-color: $hover-row;
-    outline: 1px solid transparent;
-    text-decoration: underline;
-    color: $text-01;
-  }
-
-  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
-    width: 100%;
-  }
-
-  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  // Tweaks for descendants
-
-  // In multi-select scenarios, we need to target checkbox inputs
-  .#{$prefix}--list-box__menu-item > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin: 0;
-    width: 100%;
-  }
-
-  // When handling input, we need to target nodes that specifically opt-in to
-  // the `combobox` role in order to make sure the text input is styled
-  // correctly.
-  .#{$prefix}--list-box input[role='combobox'] {
-    background-color: inherit;
-    font-weight: 600;
-    outline-offset: 0;
-    min-width: 0;
-  }
-
-  .#{$prefix}--list-box input[role='combobox']::placeholder {
-    @include placeholder-colors;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--list-box--disabled input[role='combobox'] {
-    opacity: 1;
-  }
-}
-
-@mixin listbox--x {
-  // The overall container element for a `list-box`. Has two variants,
-  // `disabled` and `inline`.
-  .#{$prefix}--list-box {
-    position: relative;
-    width: $list-box-width;
-    height: rem(40px);
-    max-height: rem(40px);
-    background-color: $field-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    order: 1;
-    cursor: pointer;
-    color: $text-01;
-    transition: all $transition--expansion $carbon--standard-easing;
-
-    &:hover {
-      background-color: $ui-03;
-    }
-  }
-
-  .#{$prefix}--list-box .#{$prefix}--text-input {
-    height: 100%;
-  }
-
-  // invalid states
-  .#{$prefix}--list-box[data-invalid],
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus {
-    box-shadow: 0 2px 0 0 $support-01;
-  }
-
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus .#{$prefix}--list-box__label {
-    color: $support-01;
-  }
-
-  .#{$prefix}--list-box ~ .#{$prefix}--form-requirement {
-    order: 3;
-    color: $support-01;
-    font-weight: 400;
-    margin-top: $spacing-2xs;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  // Light variation for 'list-box'
-  .#{$prefix}--list-box--light {
-    background-color: $field-02;
-  }
-
-  // Disabled state for a `list-box`
-  .#{$prefix}--list-box--disabled {
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--list-box--disabled,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item--highlighted {
-    background-color: transparent;
-    text-decoration: none;
-  }
-
-  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover {
-    cursor: not-allowed;
-  }
-
-  // Inline variant for a `list-box`
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
-    background-color: inherit;
-    width: auto;
-    height: $list-box-inline-height;
-    box-shadow: none;
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
-    color: $text-01;
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
-    padding: 0 0 0 rem(10px);
-  }
-
-  .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
-    position: static;
-    padding: 0 $spacing-xs;
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__menu {
-    top: $list-box-inline-height;
-    width: $list-box-menu-width;
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'] ~ .#{$prefix}--list-box__menu {
-    outline: 1px solid $interactive-01;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'],
-  .#{$prefix}--list-box.#{$prefix}--list-box--inline > .#{$prefix}--list-box__field:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-  // The field we use for input, showing selection, etc.
-  .#{$prefix}--list-box__field {
-    @include button-reset;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: rem(40px);
-    padding: 0 2rem 0 1rem;
-    cursor: pointer;
-    outline: none;
-  }
-
-  .#{$prefix}--list-box__field:focus,
-  .#{$prefix}--list-box__field[aria-expanded='true'] {
-    background: $ui-03;
-  }
-
-  .#{$prefix}--list-box__field[disabled] {
-    outline: none;
-    opacity: 0.5;
-  }
-
-  // Label for a `list-box__field`
-  .#{$prefix}--list-box__label {
-    @include typescale('zeta');
-
-    color: $text-01;
-    font-weight: 600;
-    user-select: none;
-  }
-
-  // Menu status inside of a `list-box__field`
-  .#{$prefix}--list-box__menu-icon {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    padding: 0 1rem;
-    transition: transform 200ms $carbon--standard-easing;
-    cursor: pointer;
-  }
-
-  .#{$prefix}--list-box__menu-icon > svg {
-    fill: $ui-05;
-    height: 100%;
-  }
-
-  .#{$prefix}--list-box__menu-icon--open {
-    transform: rotate(180deg);
-  }
-
-  // Selection indicator for a `list-box__field`
-  .#{$prefix}--list-box__selection {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: rem(26px);
-    bottom: 0;
-    height: rem(40px);
-    padding: 0 1rem;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 200ms $carbon--standard-easing;
-  }
-
-  .#{$prefix}--list-box__selection > svg {
-    fill: $ui-05;
-    height: 100%;
-  }
-
-  .#{$prefix}--list-box__selection:focus {
-    outline: 1px solid $interactive-01;
-  }
-
-  // Modifier for a selection to show that multiple selections have been made
-  .#{$prefix}--list-box__selection--multi {
-    @include typescale('omega');
-
-    position: static;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0;
-    background-color: $interactive-01;
-    height: rem(24px);
-    width: rem(42px);
-    color: white;
-    line-height: 0;
-    padding: 0.5rem;
-    margin-right: rem(10px);
-    border-radius: rem(12px);
-  }
-
-  .#{$prefix}--list-box__selection--multi > svg {
-    fill: white;
-    width: 0.5rem;
-    height: 0.5rem;
-    margin-left: rem(5px);
-  }
-
-  .#{$prefix}--list-box__selection--multi:focus,
-  .#{$prefix}--list-box__selection--multi:hover {
-    outline: none;
-  }
-
-  // Descendant of a `list-box` that displays a list of options to select
-  .#{$prefix}--list-box__menu {
-    @include box-shadow();
-
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: rem(40px);
-    width: $list-box-width;
-    background-color: $ui-01;
-    max-height: rem(120px);
-    overflow-y: auto;
-    z-index: z('dropdown');
-  }
-
-  // Descendant of a `list-box__menu` that represents a selection for a control
-  .#{$prefix}--list-box__menu-item {
-    @include typescale('zeta');
-
-    display: flex;
-    align-items: center;
-    height: rem(40px);
-    margin-top: -1px;
-    padding: 0 1rem;
-    cursor: pointer;
-    user-select: none;
-    border-bottom: 1px solid $ui-03;
-    position: relative;
-
-    &::before,
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      height: calc(100% + 1px);
-      width: 1rem;
-      background-color: $ui-01;
-    }
-
-    &::before {
-      left: 0;
-    }
-
-    &::after {
-      right: 0;
-    }
-
-    &:last-of-type {
-      border-bottom: 1px solid $ui-01;
-    }
-
-    &:last-of-type:hover {
-      border-bottom: 1px solid $ui-03;
-    }
-  }
-
-  .#{$prefix}--list-box__menu-item:hover,
-  .#{$prefix}--list-box__menu-item--highlighted {
-    background-color: $ui-03;
-    color: $text-01;
-    border-bottom: 1px solid $ui-01;
-
-    &::before,
-    &::after {
-      background-color: $ui-03;
-    }
-  }
-
-  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
-    width: 100%;
-  }
-
-  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  // Tweaks for descendants
-
-  // In multi-select scenarios, we need to target checkbox inputs
-  .#{$prefix}--list-box__menu-item > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin: 0;
-    width: 100%;
-  }
-
-  // When handling input, we need to target nodes that specifically opt-in to
-  // the `combobox` role in order to make sure the text input is styled
-  // correctly.
-  .#{$prefix}--list-box input[role='combobox'] {
-    background-color: inherit;
-    font-weight: 600;
-    outline-offset: -1px;
-    min-width: 0;
-  }
-
-  .#{$prefix}--list-box input[role='combobox']::placeholder {
-    color: $text-01;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--list-box--disabled input[role='combobox'] {
-    opacity: 1;
-  }
-}
-
-@include exports('list-box') {
-  @if feature-flag-enabled('components-x') {
-    @include listbox--x;
-  } @else {
-    @include listbox;
-  }
-}
diff --git a/scss/components/list/_list.scss b/scss/components/list/_list.scss
deleted file mode 100644
index 51402d2984f5..000000000000
--- a/scss/components/list/_list.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// List
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-
-@mixin lists {
-  .#{$prefix}--list--nested,
-  .#{$prefix}--list--unordered,
-  .#{$prefix}--list--ordered {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    @include font-smoothing;
-    margin-left: $spacing-xl;
-    line-height: 1.5;
-  }
-
-  .#{$prefix}--list--unordered,
-  .#{$prefix}--list--ordered {
-    padding: $spacing-md;
-  }
-
-  .#{$prefix}--list__item {
-    font-weight: 600;
-    padding-left: $spacing-2xs;
-    color: $text-01;
-  }
-
-  .#{$prefix}--list--unordered > .#{$prefix}--list__item {
-    list-style-type: disc;
-  }
-
-  .#{$prefix}--list--ordered > .#{$prefix}--list__item {
-    list-style-type: decimal;
-  }
-
-  .#{$prefix}--list--nested {
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--list--nested > .#{$prefix}--list__item {
-    list-style-type: none;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
-    content: '-';
-    padding-right: $spacing-2xs;
-  }
-}
-
-@mixin lists--x {
-  .#{$prefix}--list--nested,
-  .#{$prefix}--list--unordered,
-  .#{$prefix}--list--ordered {
-    @include reset;
-    @include type-style('body-short-01');
-
-    counter-reset: list-item;
-  }
-
-  .#{$prefix}--list__item {
-    font-weight: 400;
-    color: $text-01;
-    list-style-type: none;
-    counter-increment: list-item;
-  }
-
-  .#{$prefix}--list--nested {
-    margin-bottom: rem(4px);
-    margin-left: $spacing-xl;
-  }
-
-  .#{$prefix}--list--unordered > .#{$prefix}--list__item:before,
-  .#{$prefix}--list--ordered > .#{$prefix}--list__item:before {
-    display: inline-block;
-    margin-right: $spacing-xs;
-    margin-bottom: rem(4px);
-  }
-
-  .#{$prefix}--list--unordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before,
-  .#{$prefix}--list--ordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
-    margin-right: $spacing-xs;
-    display: inline-block;
-  }
-
-  .#{$prefix}--list--unordered > .#{$prefix}--list__item:before {
-    content: '\002013';
-  }
-
-  .#{$prefix}--list--unordered .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
-    content: '\0025AA';
-  }
-
-  .#{$prefix}--list--ordered > .#{$prefix}--list__item:before {
-    content: counter(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 {
-    content: counter(sub-list-item, lower-alpha) '.';
-    width: 0.6rem;
-  }
-}
-
-@include exports('lists') {
-  @if feature-flag-enabled('components-x') {
-    @include lists--x;
-  } @else {
-    @include lists;
-  }
-}
diff --git a/scss/components/loading/_keyframes.scss b/scss/components/loading/_keyframes.scss
deleted file mode 100644
index fa1c5c12520b..000000000000
--- a/scss/components/loading/_keyframes.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate-end-p1 {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate-end-p2 {
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-
-/* Stroke animations */
-@keyframes init-stroke {
-  0% {
-    stroke-dashoffset: 240;
-  }
-  100% {
-    stroke-dashoffset: $loading__gap;
-  }
-}
-
-@keyframes stroke-end {
-  0% {
-    stroke-dashoffset: $loading__gap;
-  }
-  100% {
-    stroke-dashoffset: 240;
-  }
-}
diff --git a/scss/components/loading/_loading.scss b/scss/components/loading/_loading.scss
deleted file mode 100644
index bb7cf893352f..000000000000
--- a/scss/components/loading/_loading.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/import-once';
-@import 'keyframes';
-@import 'mixins';
-@import 'vars';
-
-@mixin loading {
-  .#{$prefix}--loading {
-    @include reset;
-    @include animation__loading--spin;
-    width: $loading__size;
-    height: $loading__size;
-  }
-
-  // Animation (Spin by default)
-  .#{$prefix}--loading__svg {
-    fill: transparent;
-    stroke: $brand-03;
-    stroke-width: 7;
-    stroke-linecap: butt;
-    stroke-dasharray: 240;
-    stroke-dashoffset: $loading__gap;
-  }
-
-  .#{$prefix}--loading--stop {
-    @include animation__loading--stop;
-  }
-
-  .#{$prefix}--loading--small {
-    width: 2rem;
-    height: 2rem;
-
-    .#{$prefix}--loading__svg {
-      stroke: $ui-05;
-    }
-  }
-
-  .#{$prefix}--loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background-color: rgba($ui-01, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 2000ms $carbon--standard-easing;
-    z-index: z('overlay');
-  }
-
-  .#{$prefix}--loading-overlay--stop {
-    display: none;
-  }
-}
-
-@mixin loading--x {
-  .#{$prefix}--loading {
-    @include reset;
-    @include animation__loading--spin;
-    width: $loading__size;
-    height: $loading__size;
-  }
-
-  // Animation (Spin by default)
-  .#{$prefix}--loading__svg {
-    fill: transparent;
-  }
-
-  .#{$prefix}--loading__svg circle {
-    stroke-width: 8;
-    stroke-linecap: butt;
-    stroke-dasharray: 240;
-  }
-
-  .#{$prefix}--loading__stroke {
-    stroke: $interactive-01;
-    stroke-dashoffset: $loading__gap;
-  }
-
-  .#{$prefix}--loading--stop {
-    @include animation__loading--stop;
-  }
-
-  .#{$prefix}--loading--small {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .#{$prefix}--loading--small .#{$prefix}--loading__svg {
-    stroke: $interactive-01;
-  }
-
-  .#{$prefix}--loading__background {
-    stroke: $ui-03;
-    stroke-dashoffset: 0;
-  }
-
-  .#{$prefix}--loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background-color: rgba($ui-02, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 2000ms $carbon--standard-easing;
-    z-index: z('overlay');
-  }
-
-  .#{$prefix}--loading-overlay--stop {
-    display: none;
-  }
-}
-
-@include exports('loading') {
-  @if feature-flag-enabled('components-x') {
-    @include loading--x;
-  } @else {
-    @include loading;
-  }
-}
diff --git a/scss/components/loading/_mixins.scss b/scss/components/loading/_mixins.scss
deleted file mode 100644
index 251cd70a61ea..000000000000
--- a/scss/components/loading/_mixins.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-------------------------
-// Animations - Loading
-//-------------------------
-@import '../../globals/scss/vars';
-
-@mixin animation__loading--spin {
-  // Animate the container
-  animation-name: rotate;
-  animation-duration: 690ms;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-
-  // Animate the stroke
-  svg circle {
-    animation-name: init-stroke;
-    animation-duration: 10ms;
-    animation-timing-function: $carbon--standard-easing;
-  }
-}
-
-@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;
-
-  // Animate the stroke
-  & svg circle {
-    animation-name: stroke-end;
-    animation-duration: 700ms;
-    animation-timing-function: $carbon--ease-out;
-    animation-delay: 700ms;
-    animation-fill-mode: forwards;
-  }
-}
diff --git a/scss/components/loading/_vars.scss b/scss/components/loading/_vars.scss
deleted file mode 100644
index 90fae47cb0be..000000000000
--- a/scss/components/loading/_vars.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$loading__gap: 40;
-$loading__size: 10.5rem;
diff --git a/scss/components/modal/_mixins.scss b/scss/components/modal/_mixins.scss
deleted file mode 100644
index e83297a51f21..000000000000
--- a/scss/components/modal/_mixins.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//----------------------------------------------
-// Modal
-// ---------------------------------------------
-
-@mixin modal--color($color) {
-  .#{$prefix}--modal-container {
-    border-top-color: $color;
-  }
-}
diff --git a/scss/components/modal/_modal.scss b/scss/components/modal/_modal.scss
deleted file mode 100644
index c79c7dec6f7d..000000000000
--- a/scss/components/modal/_modal.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Modals
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import 'mixins';
-
-@import '../button/button';
-
-@mixin modal {
-  .#{$prefix}--modal {
-    @include reset;
-    @include font-family;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: z('hidden');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    content: '';
-    opacity: 0;
-    background-color: rgba($ui-03, 0.5);
-    transition: opacity 200ms, z-index 0s 200ms, visibility 0s 200ms;
-    visibility: hidden;
-
-    &.is-visible {
-      z-index: z('modal');
-      opacity: 1;
-      transition: opacity 200ms;
-      visibility: visible;
-    }
-  }
-
-  .#{$prefix}--modal--danger {
-    @include modal--color($support-01);
-  }
-
-  .#{$prefix}--modal-container {
-    @include reset;
-    @include layer('pop-out');
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    background-color: $ui-01;
-    border-top: $modal-border-top;
-    min-width: 100%;
-    max-height: 100%;
-    height: 100%;
-    padding: $spacing-xl 3% 0rem 3%;
-
-    @media (min-width: 600px) {
-      height: auto;
-      min-width: 500px;
-      max-width: 75%;
-      max-height: 90%;
-      padding: $spacing-2xl $spacing-3xl 0 $spacing-3xl;
-    }
-
-    @media (min-width: 1024px) {
-      max-width: 50%;
-      max-height: 80%;
-    }
-  }
-
-  .#{$prefix}--modal-header {
-    margin-bottom: $spacing-lg;
-  }
-
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-footer {
-    flex-shrink: 0;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include reset;
-    @include typescale('omega');
-    @include letter-spacing;
-    color: $text-01;
-    font-weight: 600;
-    text-transform: uppercase;
-    margin-bottom: $spacing-xs;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include reset;
-    @include typescale('beta');
-    font-weight: 300;
-    color: $text-02;
-  }
-
-  .#{$prefix}--modal-content {
-    overflow-y: auto;
-    margin-bottom: $spacing-3xl;
-    color: $text-01;
-    font-weight: 400;
-
-    > * {
-      @include reset;
-    }
-  }
-
-  .#{$prefix}--modal-footer {
-    margin-top: auto;
-    display: flex;
-    justify-content: flex-end;
-    background-color: $modal-footer-background-color;
-    margin-left: rem(-24px);
-    margin-right: rem(-24px);
-    padding: $spacing-xl $spacing-xl;
-
-    @media (min-width: 600px) {
-      margin-left: rem(-48px);
-      margin-right: rem(-48px);
-      padding: $spacing-xl $spacing-3xl;
-    }
-  }
-
-  .#{$prefix}--modal-close {
-    position: absolute;
-    top: rem(16px);
-    right: rem(16px);
-    padding: 0;
-    overflow: hidden;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    padding: 0.25rem 0.25rem 0.125rem;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--modal-close__icon {
-    fill: $ui-05;
-  }
-}
-
-@mixin modal--x {
-  .#{$prefix}--modal {
-    @include font-family;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: z('hidden');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    content: '';
-    opacity: 0;
-    background-color: $overlay-01;
-    transition: opacity 200ms, z-index 0s 200ms, visibility 0s 200ms;
-    visibility: hidden;
-
-    &.is-visible {
-      z-index: z('modal');
-      opacity: 1;
-      transition: opacity 200ms;
-      visibility: visible;
-    }
-  }
-
-  .#{$prefix}--modal--danger {
-    @include modal--color($support-01);
-  }
-
-  .#{$prefix}--modal-container {
-    @include layer('pop-out');
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    background-color: $ui-01;
-    width: 100%;
-    max-height: 100%;
-    height: 100%;
-
-    @include breakpoint(md) {
-      height: auto;
-      min-width: 500px;
-      max-width: 50%;
-      max-height: 90%;
-    }
-
-    @include breakpoint(lg) {
-      max-height: 80%;
-    }
-  }
-
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-content {
-    width: 75%;
-    padding-left: 1rem;
-  }
-
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-footer {
-    flex-shrink: 0;
-  }
-
-  .#{$prefix}--modal-header {
-    padding-top: 1rem;
-    margin-bottom: $spacing-xs;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include type-style('label-01');
-
-    color: $text-02;
-    margin-bottom: $spacing-2xs;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-01;
-  }
-
-  .#{$prefix}--modal-content {
-    @include type-style('body-long-01');
-
-    overflow-y: auto;
-    margin-bottom: $spacing-3xl;
-    color: $text-01;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--modal-content > * {
-    @include type-style('body-long-01');
-  }
-
-  .#{$prefix}--modal-footer {
-    display: flex;
-    margin-top: auto;
-    height: 4rem;
-    background-color: $modal-footer-background-color;
-
-    button.#{$prefix}--btn {
-      max-width: none;
-      width: 50%;
-      height: 4rem;
-      margin: 0;
-      padding-top: 1rem;
-      padding-bottom: 2rem;
-    }
-  }
-
-  .#{$prefix}--modal-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 3rem;
-    width: 3rem;
-    padding: rem(12px);
-    border: 2px solid transparent;
-    overflow: hidden;
-    cursor: pointer;
-    background-color: transparent;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--modal-close__icon {
-    fill: $icon-01;
-    height: rem(20px);
-    width: rem(20px);
-  }
-}
-
-@include exports('modal') {
-  @if feature-flag-enabled('components-x') {
-    @include modal--x;
-  } @else {
-    @include modal;
-  }
-}
diff --git a/scss/components/multi-select/_multi-select.scss b/scss/components/multi-select/_multi-select.scss
deleted file mode 100644
index 85de4d046f8b..000000000000
--- a/scss/components/multi-select/_multi-select.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// List Box
-//-----------------------------
-
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-@import '../list-box/list-box';
-
-@include exports('multi-select') {
-  .#{$prefix}--multi-select.#{$prefix}--combo-box > .#{$prefix}--list-box__field {
-    padding: 0 1rem;
-  }
-
-  .#{$prefix}--multi-select.#{$prefix}--combo-box input[role='combobox'] {
-    padding: 0;
-    outline: none;
-  }
-}
diff --git a/scss/components/notification/_inline-notification.scss b/scss/components/notification/_inline-notification.scss
deleted file mode 100644
index 3648cfae9c9c..000000000000
--- a/scss/components/notification/_inline-notification.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Notifications
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import 'mixins';
-
-@mixin inline-notifications {
-  .#{$prefix}--inline-notification {
-    @include reset;
-    @include font-family;
-    @include font-smoothing;
-    @include typescale('zeta');
-    display: flex;
-    justify-content: space-between;
-    background-color: transparent;
-    padding: $spacing-sm $spacing-md;
-    min-height: rem(40px);
-    color: $text-02;
-    margin-top: $spacing-md;
-    margin-bottom: $spacing-md;
-  }
-
-  .#{$prefix}--inline-notification--error {
-    @include inline-notification--color($support-01);
-  }
-
-  .#{$prefix}--inline-notification--success {
-    @include inline-notification--color($support-02);
-  }
-
-  .#{$prefix}--inline-notification--info {
-    @include inline-notification--color($support-04);
-  }
-
-  .#{$prefix}--inline-notification--warning {
-    @include inline-notification--color($support-03);
-  }
-
-  .#{$prefix}--inline-notification__details {
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--inline-notification__icon {
-    height: 16px;
-    width: 16px;
-    min-width: 22px;
-  }
-
-  .#{$prefix}--inline-notification__text-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 $spacing-md;
-
-    @media (max-width: 640px) {
-      flex-direction: column;
-      width: 100%;
-    }
-  }
-
-  .#{$prefix}--inline-notification__title {
-    @include typescale('zeta');
-    color: $text-01;
-    font-weight: 600;
-    margin: 0 $spacing-2xs 0 0;
-    line-height: 1.125;
-  }
-
-  .#{$prefix}--inline-notification__subtitle {
-    @include typescale('zeta');
-    line-height: 1.125;
-  }
-
-  .#{$prefix}--inline-notification__close-button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    height: 16px;
-    width: 12px;
-    position: relative;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--inline-notification__close-icon {
-    height: 10px;
-    width: 10px;
-    fill: $ui-05;
-    position: absolute;
-    top: 3px;
-    right: 1px;
-  }
-}
-
-@mixin inline-notifications--x {
-  .#{$prefix}--inline-notification {
-    @include reset;
-
-    display: flex;
-    justify-content: space-between;
-    height: auto;
-    min-height: rem(48px);
-    min-width: rem(288px);
-    max-width: rem(288px);
-    color: $text-01;
-    margin-top: $spacing-md;
-    margin-bottom: $spacing-md;
-
-    @include breakpoint(md) {
-      max-width: rem(608px);
-    }
-
-    @include breakpoint(lg) {
-      max-width: rem(736px);
-    }
-
-    @include breakpoint(max) {
-      max-width: rem(832px);
-    }
-  }
-
-  .#{$prefix}--inline-notification--error {
-    @include notification--experimental($support-01, $notification-error-background-color);
-  }
-
-  .#{$prefix}--inline-notification--success {
-    @include notification--experimental($support-02, $notification-success-background-color);
-  }
-
-  .#{$prefix}--inline-notification--info {
-    @include notification--experimental($support-04, $notification-info-background-color);
-  }
-
-  .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
-    display: none;
-  }
-
-  .#{$prefix}--inline-notification--warning {
-    @include notification--experimental($support-03, $notification-warning-background-color);
-  }
-
-  .#{$prefix}--inline-notification__details {
-    display: flex;
-    margin: 0 $spacing-md;
-  }
-
-  .#{$prefix}--inline-notification__icon {
-    height: 1rem;
-    width: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-right: $spacing-md;
-    margin-top: rem(14px);
-  }
-
-  .#{$prefix}--inline-notification__text-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: $spacing-sm 0;
-    max-width: 75%;
-  }
-
-  .#{$prefix}--inline-notification__title {
-    @include type-style('heading-01');
-
-    margin: 0 $spacing-2xs 0 0;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--inline-notification__subtitle {
-    @include type-style('body-short-01');
-
-    word-break: break-word;
-  }
-
-  .#{$prefix}--inline-notification__close-button {
-    @include focus-outline('reset');
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    height: rem(48px);
-    width: rem(48px);
-    min-width: rem(48px);
-    max-width: rem(48px);
-    transition: outline $transition--base, background-color $transition--base;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    .#{$prefix}--inline-notification__close-icon {
-      height: 1rem;
-      width: 1rem;
-      fill: $ui-05;
-    }
-  }
-}
-
-@include exports('inline-notifications') {
-  @if feature-flag-enabled('components-x') {
-    @include inline-notifications--x;
-  } @else {
-    @include inline-notifications;
-  }
-}
diff --git a/scss/components/notification/_mixins.scss b/scss/components/notification/_mixins.scss
deleted file mode 100644
index 68c6adf67249..000000000000
--- a/scss/components/notification/_mixins.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//----------------------------------------------
-// Inline Notification
-// ---------------------------------------------
-
-@mixin inline-notification--color($color) {
-  border: 1px solid $color;
-  border-left: 6px solid $color;
-
-  .#{$prefix}--inline-notification__icon {
-    fill: $color;
-  }
-}
-
-//----------------------------------------------
-// Toast Notification
-// ---------------------------------------------
-
-@mixin notification--color($color) {
-  border-left: 6px solid $color;
-}
-
-@mixin notification--experimental($color, $background-color) {
-  border-left: 3px solid $color;
-  background: $background-color;
-
-  .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--toast-notification__icon {
-    fill: $color;
-  }
-}
diff --git a/scss/components/notification/_toast-notification.scss b/scss/components/notification/_toast-notification.scss
deleted file mode 100644
index 6f3953820f8d..000000000000
--- a/scss/components/notification/_toast-notification.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Notifications
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import 'mixins';
-
-@mixin toast-notifications {
-  .#{$prefix}--toast-notification {
-    @include reset;
-    @include font-family;
-    @include font-smoothing;
-    @include layer('overlay');
-    display: flex;
-    justify-content: space-between;
-    width: 16.875rem;
-    padding: $spacing-md $spacing-md $spacing-xs $spacing-md;
-    background-color: $ui-01;
-    color: $text-01;
-    margin-top: $spacing-xs;
-    margin-bottom: $spacing-xs;
-    margin-right: $spacing-md;
-
-    &:first-child {
-      margin-top: $spacing-md;
-    }
-  }
-
-  .#{$prefix}--toast-notification--error {
-    @include notification--color($support-01);
-  }
-
-  .#{$prefix}--toast-notification--success {
-    @include notification--color($support-02);
-  }
-
-  .#{$prefix}--toast-notification--info {
-    @include notification--color($support-04);
-  }
-
-  .#{$prefix}--toast-notification--warning {
-    @include notification--color($support-03);
-  }
-
-  .#{$prefix}--toast-notification__close-button {
-    background-color: $ui-01;
-    border: none;
-    cursor: pointer;
-    margin: 0;
-    width: 12px;
-    height: 12px;
-    position: relative;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--toast-notification__close-icon,
-  .#{$prefix}--toast-notification__icon {
-    height: 1rem;
-    width: 1rem;
-    height: 10px;
-    width: 10px;
-    fill: $ui-05;
-    position: absolute;
-    top: 1px;
-    right: 1px;
-  }
-
-  .#{$prefix}--toast-notification__title {
-    @include typescale('zeta');
-    @include letter-spacing;
-    font-weight: 600;
-    line-height: 1;
-    padding-bottom: $spacing-3xs;
-  }
-
-  .#{$prefix}--toast-notification__subtitle {
-    @include typescale('omega');
-    color: $text-02;
-    margin-top: 0;
-    margin-bottom: $spacing-md;
-    line-height: 1.2;
-  }
-
-  .#{$prefix}--toast-notification__caption {
-    @include typescale('omega');
-    color: $text-02;
-    line-height: 1;
-  }
-}
-
-@mixin toast-notifications--x {
-  .#{$prefix}--toast-notification {
-    @include reset;
-
-    display: flex;
-    width: rem(288px);
-    height: auto;
-    padding-left: $spacing-md;
-    color: $text-01;
-    margin-top: $spacing-xs;
-    margin-bottom: $spacing-xs;
-    margin-right: $spacing-md;
-
-    &:first-child {
-      margin-top: $spacing-md;
-    }
-
-    @include breakpoint(max) {
-      width: rem(352px);
-    }
-  }
-
-  .#{$prefix}--toast-notification--error {
-    @include notification--experimental($support-01, $notification-error-background-color);
-  }
-
-  .#{$prefix}--toast-notification--success {
-    @include notification--experimental($support-02, $notification-success-background-color);
-  }
-
-  .#{$prefix}--toast-notification--info {
-    @include notification--experimental($support-04, $notification-info-background-color);
-  }
-
-  .#{$prefix}--toast-notification--warning {
-    @include notification--experimental($support-03, $notification-warning-background-color);
-  }
-
-  .#{$prefix}--toast-notification__icon {
-    height: 1rem;
-    width: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-right: $spacing-md;
-    margin-top: $spacing-md;
-  }
-
-  .#{$prefix}--toast-notification__details {
-    margin-right: $spacing-md;
-  }
-
-  .#{$prefix}--toast-notification__close-button {
-    @include focus-outline('reset');
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    margin-left: auto;
-    padding: 0;
-    height: rem(48px);
-    width: rem(48px);
-    min-height: rem(48px);
-    min-width: rem(48px);
-    transition: outline $transition--base, background-color $transition--base;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    .#{$prefix}--toast-notification__close-icon {
-      height: 1rem;
-      width: 1rem;
-      fill: $ui-05;
-    }
-  }
-
-  .#{$prefix}--toast-notification__title {
-    @include type-style('heading-01');
-
-    font-weight: 600;
-    margin-top: 1rem;
-  }
-
-  .#{$prefix}--toast-notification__subtitle {
-    @include type-style('body-short-01');
-
-    color: $text-01;
-    margin-top: 0;
-    margin-bottom: $spacing-lg;
-  }
-
-  .#{$prefix}--toast-notification__caption {
-    @include type-style('body-short-01');
-
-    color: $text-01;
-    margin-bottom: $spacing-md;
-  }
-}
-
-@include exports('toast-notifications') {
-  @if feature-flag-enabled('components-x') {
-    @include toast-notifications--x;
-  } @else {
-    @include toast-notifications;
-  }
-}
diff --git a/scss/components/number-input/_number-input.scss b/scss/components/number-input/_number-input.scss
deleted file mode 100644
index a9fece907355..000000000000
--- a/scss/components/number-input/_number-input.scss
+++ /dev/null
@@ -1,369 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../form/form';
-
-@mixin number-input {
-  .#{$prefix}--number {
-    @include reset;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .#{$prefix}--number input[type='number'] {
-    @include typescale('zeta');
-    @include font-family;
-    box-sizing: border-box;
-    display: inline-flex;
-    width: 100%;
-    min-width: 9.375rem;
-    padding-left: $spacing-md;
-    padding-right: $spacing-xl;
-    font-weight: 300;
-    height: rem(40px);
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 2;
-    border-radius: 0;
-    border-bottom: 1px solid transparent;
-
-    & ~ .#{$prefix}--label {
-      order: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:disabled ~ .#{$prefix}--number__controls {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-      overflow: visible;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--number input[type='number'] {
-    appearance: textfield; // Firefox: Hide spinner (up and down buttons)
-
-    &::-ms-clear {
-      display: none; // IE: Hide "clear-field" `x` button on input field
-    }
-
-    &::-webkit-inner-spin-button {
-      appearance: none; // Safari: Hide number spinner
-    }
-  }
-
-  .#{$prefix}--number__controls {
-    @include reset;
-    position: absolute;
-    left: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    right: 0.5rem;
-    top: 2rem;
-  }
-
-  .#{$prefix}--number__control-btn {
-    @include button-reset;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: rem(20px);
-    height: rem(10px);
-
-    &:focus {
-      @include focus-outline;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover svg {
-      fill: $hover-primary;
-    }
-  }
-
-  .#{$prefix}--number__controls svg {
-    fill: $brand-01;
-
-    // Hover styles for use with old HTML w/o button
-    &:hover {
-      cursor: pointer;
-      fill: $hover-primary;
-    }
-  }
-
-  .#{$prefix}--number[data-invalid] {
-    .#{$prefix}--form-requirement {
-      display: inline-block;
-      max-height: rem(200px);
-    }
-
-    input[type='number'],
-    input[type='number']:focus {
-      outline: none;
-      box-shadow: 0 2px 0px 0px $support-01;
-    }
-
-    input[type='number']:focus ~ .#{$prefix}--label {
-      color: $support-01;
-    }
-  }
-
-  .#{$prefix}--number--nolabel .#{$prefix}--number__controls {
-    top: 0.625rem;
-  }
-
-  .#{$prefix}--number--helpertext .#{$prefix}--number__controls {
-    top: 2.25rem;
-  }
-
-  .#{$prefix}--number--helpertext:not([data-invalid]) .#{$prefix}--number__controls {
-    top: auto;
-    bottom: 0.625rem;
-  }
-
-  .#{$prefix}--number--helpertext[data-invalid] .#{$prefix}--number__controls {
-    top: auto;
-    bottom: 2rem;
-  }
-
-  .#{$prefix}--number--light input[type='number'] {
-    background: $field-02;
-  }
-
-  // Skeleton State
-  .#{$prefix}--number.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-    height: 2.5rem;
-
-    input[type='number'] {
-      display: none;
-    }
-  }
-}
-
-@mixin number-input--x {
-  .#{$prefix}--number {
-    @include reset;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .#{$prefix}--number input[type='number'] {
-    @include typescale('zeta');
-    @include focus-outline('reset');
-    font-family: $font-family-mono;
-    box-sizing: border-box;
-    display: inline-flex;
-    width: 100%;
-    min-width: 9.375rem;
-    padding-left: $spacing-md;
-    padding-right: $spacing-xl;
-    font-weight: 300;
-    height: rem(40px);
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    border-radius: 0;
-    border-bottom: 1px solid $ui-04;
-    transition: all $transition--base;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: $disabled-background-color;
-      color: $disabled;
-    }
-
-    &:disabled ~ .#{$prefix}--number__controls {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    &:disabled ~ .#{$prefix}--number__controls svg {
-      fill: $disabled;
-    }
-  }
-
-  .#{$prefix}--number input[type='number'] {
-    appearance: textfield; // Firefox: Hide spinner (up and down buttons)
-
-    &::-ms-clear {
-      display: none; // IE: Hide "clear-field" `x` button on input field
-    }
-
-    &::-webkit-inner-spin-button {
-      appearance: none; // Safari: Hide number spinner
-    }
-  }
-
-  .#{$prefix}--number__input-wrapper {
-    display: flex;
-    align-items: center;
-
-    ~ .#{$prefix}--form-requirement {
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-      overflow: visible;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--number__controls {
-    @include reset;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    right: 0.4rem;
-  }
-
-  .#{$prefix}--number__control-btn {
-    @include button-reset;
-    color: $icon-01;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: rem(20px);
-    height: rem(10px);
-
-    svg {
-      fill: currentColor;
-    }
-
-    &:focus {
-      @include focus-outline;
-      color: $interactive-01;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover {
-      color: $icon-01;
-    }
-  }
-
-  .#{$prefix}--number[data-invalid] {
-    .#{$prefix}--form-requirement {
-      display: inline-block;
-      max-height: rem(200px);
-    }
-
-    input[type='number'] {
-      @include focus-outline('invalid');
-    }
-  }
-
-  .#{$prefix}--number__invalid {
-    position: absolute;
-    right: 2rem;
-    fill: $support-01;
-  }
-
-  .#{$prefix}--number--light input[type='number'] {
-    background: $field-02;
-  }
-
-  .#{$prefix}--number--mobile {
-    min-width: rem(144px);
-    width: auto;
-
-    .#{$prefix}--number__control-btn {
-      width: rem(40px);
-      height: rem(40px);
-      background-color: $field-01;
-
-      &:hover,
-      &:focus {
-        background-color: $hover-ui;
-      }
-
-      &:focus {
-        outline-width: 2px;
-        outline-offset: -2px;
-      }
-    }
-
-    input[type='number'] {
-      min-width: rem(64px);
-      width: auto;
-      margin: 0;
-      border-right: 1px solid $ui-03;
-      border-left: 1px solid $ui-03;
-      padding: 0;
-      text-align: center;
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--number.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-    height: 2.5rem;
-
-    input[type='number'] {
-      display: none;
-    }
-  }
-}
-
-@include exports('number-input') {
-  @if feature-flag-enabled('components-x') {
-    @include number-input--x;
-  } @else {
-    @include number-input;
-  }
-}
diff --git a/scss/components/overflow-menu/_overflow-menu.scss b/scss/components/overflow-menu/_overflow-menu.scss
deleted file mode 100644
index 3275c04d1e22..000000000000
--- a/scss/components/overflow-menu/_overflow-menu.scss
+++ /dev/null
@@ -1,395 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Overflow Menu
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-
-@mixin overflow-menu {
-  .#{$prefix}--overflow-menu {
-    @include reset;
-    position: relative;
-    width: rem(20px);
-    height: rem(38px);
-    cursor: pointer;
-
-    &:focus {
-      outline: 1px solid transparent;
-      box-shadow: 0 0 0 1px $brand-01;
-    }
-  }
-
-  .#{$prefix}--overflow-menu__icon {
-    width: 100%;
-    height: 100%;
-    padding: 0.5rem;
-    fill: $ui-05;
-
-    &:hover,
-    &:focus {
-      fill: $hover-secondary;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options {
-    @include reset;
-    @include layer('overlay');
-    display: none;
-    flex-direction: column;
-    align-items: flex-start;
-    position: absolute;
-    z-index: z('floating');
-    background-color: $inverse-01;
-    border: 1px solid $ui-03;
-    width: 11.25rem;
-    list-style: none;
-    margin-top: $spacing-2xs;
-    padding: $spacing-2xs 0 $spacing-xs;
-    left: -20px;
-  }
-
-  .#{$prefix}--overflow-menu-options--open {
-    display: flex;
-  }
-
-  .#{$prefix}--overflow-menu-options {
-    &:before {
-      content: '';
-      position: absolute;
-      display: block;
-      width: rem(8px);
-      height: rem(8px);
-      z-index: -1;
-      transform: rotate(45deg);
-      background-color: $inverse-01;
-      border-top: 1px solid $ui-03;
-      border-left: 1px solid $ui-03;
-      top: -5px;
-      left: 24px;
-    }
-
-    &[data-floating-menu-direction='top']:before {
-      transform: rotate(225deg);
-      top: auto;
-      bottom: -5px;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options__option {
-    @include reset;
-    display: flex;
-    background-color: transparent;
-    align-items: center;
-    width: 100%;
-    padding: 0;
-  }
-
-  .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--overflow-menu-options__btn {
-    @include reset;
-    @include typescale('zeta');
-    @include font-family;
-    font-weight: 400;
-    width: 100%;
-    height: 100%;
-    border: none;
-    display: inline-block;
-    background-color: transparent;
-    text-align: left;
-    padding: $spacing-xs $spacing-md;
-    cursor: pointer;
-    color: $text-01;
-    max-width: 11.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:focus {
-      outline: 1px solid transparent;
-      text-decoration: underline;
-      background-color: $hover-row;
-      text-decoration: underline;
-    }
-
-    .#{$prefix}--overflow-menu-options__option--danger & {
-      &:focus {
-        outline: 1px solid transparent;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options__option:hover {
-    background-color: $hover-row;
-  }
-
-  .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn {
-    text-decoration: none;
-    background-color: $hover-row;
-    text-decoration: none;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--danger {
-    border-top: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--danger {
-    .#{$prefix}--overflow-menu-options__btn {
-      &:hover,
-      &:focus {
-        color: $inverse-01;
-        background-color: $support-01;
-      }
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options__option--disabled:hover {
-    background-color: $ui-01;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--disabled .#{$prefix}--overflow-menu-options__btn {
-    color: $text-01;
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--disabled:hover .#{$prefix}--overflow-menu-options__btn {
-    color: $text-01;
-    opacity: 0.5;
-    background-color: $ui-01;
-
-    &:active,
-    &:focus {
-      background-color: $ui-01;
-      pointer-events: none;
-    }
-  }
-
-  .#{$prefix}--overflow-menu--flip {
-    left: -140px;
-
-    &:before {
-      left: 145px;
-    }
-  }
-}
-
-@mixin overflow-menu--x {
-  .#{$prefix}--overflow-menu {
-    @include reset;
-    @include focus-outline('reset');
-    position: relative;
-    width: rem(32px);
-    height: rem(32px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: outline $transition--base, background-color $transition--base;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
-    background-color: $ui-01;
-    transition: none;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
-  }
-
-  .#{$prefix}--overflow-menu__icon {
-    height: rem(16px);
-    width: rem(16px);
-    fill: $ui-05;
-  }
-
-  .#{$prefix}--overflow-menu-options {
-    @include reset;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
-    display: none;
-    flex-direction: column;
-    align-items: flex-start;
-    position: absolute;
-    z-index: z('floating');
-    background-color: $ui-01;
-    width: 11.25rem;
-    list-style: none;
-    top: 32px;
-    left: 0;
-
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      background-color: $ui-01;
-      transition: background-color $transition--base;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-    top: rem(-3px);
-    left: 0;
-    width: rem(32px);
-    height: rem(3px);
-  }
-
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
-    bottom: rem(-6px);
-    left: 0;
-    width: rem(32px);
-    height: rem(6px);
-  }
-
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
-    right: rem(-6px);
-    top: 0;
-    height: rem(32px);
-    width: rem(6px);
-  }
-
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    top: 0;
-    left: rem(-6px);
-    height: rem(32px);
-    width: rem(6px);
-  }
-
-  .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after,
-  .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
-    left: auto;
-    right: 0;
-  }
-
-  .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after,
-  .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    top: auto;
-    bottom: 0;
-  }
-
-  .#{$prefix}--overflow-menu-options--open {
-    display: flex;
-  }
-
-  .#{$prefix}--overflow-menu-options__option {
-    @include reset;
-    display: flex;
-    background-color: transparent;
-    align-items: center;
-    width: 100%;
-    height: rem(32px);
-    padding: 0;
-    transition: background-color $transition--base;
-  }
-
-  .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $ui-03;
-  }
-
-  a.#{$prefix}--overflow-menu-options__btn::before {
-    content: '';
-    height: 100%;
-    vertical-align: middle;
-    display: inline-block;
-  }
-
-  .#{$prefix}--overflow-menu-options__btn {
-    @include reset;
-    @include typescale('zeta');
-    @include font-family;
-    @include focus-outline('reset');
-    font-weight: 400;
-    width: 100%;
-    height: 100%;
-    border: none;
-    display: inline-block;
-    background-color: transparent;
-    text-align: left;
-    padding: 0 $spacing-md;
-    cursor: pointer;
-    color: $text-02;
-    max-width: 11.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: outline $transition--base, background-color $transition--base, color $transition--base;
-
-    &:hover {
-      color: $text-01;
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &::-moz-focus-inner {
-      border: none;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options__option:hover {
-    background-color: $hover-ui;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--danger {
-    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 {
-    color: $inverse-01;
-    background-color: $support-01;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--disabled:hover {
-    background-color: $ui-01;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--overflow-menu-options__option--disabled .#{$prefix}--overflow-menu-options__btn {
-    color: $disabled;
-    pointer-events: none;
-
-    &:hover,
-    &:active,
-    &:focus {
-      @include focus-outline('reset');
-      background-color: $ui-01;
-    }
-  }
-
-  .#{$prefix}--overflow-menu--flip {
-    left: -140px;
-
-    &:before {
-      left: 145px;
-    }
-  }
-}
-
-@include exports('overflow-menu') {
-  @if feature-flag-enabled('components-x') {
-    @include overflow-menu--x;
-  } @else {
-    @include overflow-menu;
-  }
-}
diff --git a/scss/components/pagination-nav/_pagination-nav.scss b/scss/components/pagination-nav/_pagination-nav.scss
deleted file mode 100644
index 0572f3985371..000000000000
--- a/scss/components/pagination-nav/_pagination-nav.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Pagination Nav
-//-----------------------------
-
-@import '../../globals/scss/colors';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/theme';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-
-@mixin pseudo-underline() {
-  @if feature-flag-enabled('components-x') {
-    &:not(.#{$prefix}--pagination-nav__page--direction) {
-      &::after {
-        background-color: $interactive-01;
-        bottom: 0;
-        content: '';
-        display: block;
-        height: $spacing-2xs;
-        left: 50%;
-        position: absolute;
-        opacity: 0;
-        transition: left $transition--expansion $carbon--ease-out, width $transition--expansion $carbon--ease-out;
-        width: 0;
-      }
-    }
-
-    .#{$prefix}--pagination-nav__page--active + &::after,
-    &.#{$prefix}--pagination-nav__page--active::after {
-      left: calc(50% - #{$spacing-md/2});
-      opacity: 1;
-      width: $spacing-md;
-    }
-  }
-}
-
-@mixin pagination-nav-base(
-  $text-color: $text-02,
-  $text-color-active: $text-02,
-  $background-color-hover: $hover-ui,
-  $background-color-active: initial,
-  $font-weight: 400,
-  $item-padding: 0,
-  $button-min-width: $spacing-3xl,
-  $button-padding: 1.0625rem $spacing-2xs,
-  $button-direction-size: $spacing-3xl
-) {
-  .#{$prefix}--pagination-nav {
-    @include reset;
-    @include font-family;
-    @include font-smoothing;
-    @include typescale('zeta');
-    line-height: 0;
-  }
-
-  .#{$prefix}--pagination-nav__list {
-    align-items: center;
-    display: flex;
-    list-style: none;
-  }
-
-  .#{$prefix}--pagination-nav__list-item {
-    padding: $item-padding;
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-
-  .#{$prefix}--pagination-nav__page {
-    @include typescale('zeta');
-    @include button-reset($width: false);
-    border-radius: 0;
-    color: $text-color;
-    display: block;
-    font-weight: $font-weight;
-    line-height: 1;
-    min-width: $button-min-width;
-    outline: 0;
-    padding: $button-padding;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    transition: background-color, color;
-    transition-duration: $transition--base;
-    transition-timing-function: ease-in-out;
-    user-select: none;
-
-    &:hover {
-      background-color: $background-color-hover;
-      color: $text-color;
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:disabled,
-    &.#{$prefix}--pagination-nav__page--disabled {
-      background: none;
-      color: rgba($text-color, 0.5);
-      outline: none;
-      pointer-events: none;
-    }
-
-    @include pseudo-underline();
-
-    &.#{$prefix}--pagination-nav__page--active {
-      background-color: $background-color-active;
-      color: $text-color-active;
-      font-weight: 600;
-      outline: none;
-    }
-
-    .#{$prefix}--pagination-nav__icon {
-      fill: currentColor;
-      pointer-events: none;
-    }
-  }
-
-  .#{$prefix}--pagination-nav__page--direction {
-    align-items: center;
-    display: flex;
-    height: $button-direction-size;
-    justify-content: center;
-    line-height: 0;
-    width: $button-direction-size;
-  }
-
-  .#{$prefix}--pagination-nav__select {
-    position: relative;
-  }
-
-  .#{$prefix}--pagination-nav__page--select {
-    appearance: none;
-    max-height: $button-min-width;
-    text-indent: calc(50% - 4.5px);
-    // Override some Firefox user-agent styles
-    @-moz-document url-prefix() {
-      text-indent: 0;
-    }
-  }
-
-  .#{$prefix}--pagination-nav__select-icon-wrapper {
-    height: 100%;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
-
-    @include pseudo-underline();
-
-    .#{$prefix}--pagination-nav__page--active + & {
-      .#{$prefix}--pagination-nav__select-icon {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--pagination-nav__select-icon {
-    left: calc(50% - #{$spacing-md/2});
-    pointer-events: none;
-    position: absolute;
-    top: calc(50% - #{$spacing-md/2});
-  }
-
-  .#{$prefix}--pagination-nav__accessibility-label {
-    @include hidden();
-  }
-
-  @content;
-}
-
-@mixin pagination-nav {
-  @include pagination-nav-base(
-    $text-color: $ui-05,
-    $text-color-active: $color__white,
-    $background-color-hover: $hover-row,
-    $background-color-active: $brand-01,
-    $font-weight: 600,
-    $item-padding: 0 $spacing-xs,
-    $button-min-width: $spacing-lg,
-    $button-padding: 0.3125rem $spacing-2xs,
-    $button-direction-size: $spacing-lg
-  );
-
-  .#{$prefix}--pagination-nav__list-item {
-    &:first-child {
-      .#{$prefix}--pagination-nav__page--direction {
-        margin-right: $spacing-xs;
-      }
-    }
-
-    &:last-child {
-      .#{$prefix}--pagination-nav__page--direction {
-        margin-left: $spacing-xs;
-      }
-    }
-  }
-}
-
-@mixin pagination-nav--x {
-  @include pagination-nav-base();
-}
-
-@include exports('pagination-nav') {
-  @if feature-flag-enabled('components-x') {
-    @include pagination-nav--x;
-  } @else {
-    @include pagination-nav;
-  }
-}
diff --git a/scss/components/pagination/_pagination.scss b/scss/components/pagination/_pagination.scss
deleted file mode 100644
index bbdcc975a014..000000000000
--- a/scss/components/pagination/_pagination.scss
+++ /dev/null
@@ -1,364 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$css--helpers: true;
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/css--helpers';
-@import '../../globals/scss/import-once';
-@import '../select/select';
-@import '../text-input/text-input';
-
-@mixin pagination {
-  .#{$prefix}--data-table-v2-container + .#{$prefix}--pagination {
-    border-top: 0;
-  }
-
-  .#{$prefix}--pagination {
-    @include reset;
-    @include font-family;
-    width: 100%;
-    background-color: $ui-01;
-    padding: $spacing-xs $spacing-md;
-    display: flex;
-    align-items: center;
-    border: 1px solid $ui-03;
-    height: rem(40px);
-
-    .#{$prefix}--form-item {
-      flex: auto;
-    }
-  }
-
-  .#{$prefix}--pagination__left {
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--pagination__right {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-  }
-
-  .#{$prefix}--pagination__text {
-    @include typescale('omega');
-    color: $text-02;
-    display: none;
-    padding-right: $spacing-2xs;
-
-    @include breakpoint('530px') {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--pagination__button-icon {
-    height: rem(12px);
-    width: rem(12px);
-    fill: $ui-05;
-    pointer-events: none;
-    transition: $transition--base;
-    margin-top: $spacing-3xs;
-  }
-
-  .#{$prefix}--pagination__button {
-    @include reset;
-    border: none;
-    background: none;
-    cursor: pointer;
-
-    &:hover {
-      .#{$prefix}--pagination__button-icon {
-        fill: $hover-secondary;
-      }
-    }
-
-    &:focus {
-      @include focus-outline('border');
-    }
-
-    &:disabled:hover {
-      cursor: default;
-
-      .#{$prefix}--pagination__button-icon {
-        fill: $ui-05;
-      }
-    }
-  }
-
-  .#{$prefix}--pagination__button--backward {
-    margin-left: $spacing-md;
-    margin-right: $spacing-lg;
-  }
-
-  .#{$prefix}--pagination__button--forward {
-    margin-left: $spacing-lg;
-  }
-
-  .#{$prefix}--pagination__button--no-index {
-    border-right: 0;
-    margin-right: 1px;
-  }
-
-  .#{$prefix}--pagination {
-    .#{$prefix}--select {
-      margin-right: $spacing-xs;
-    }
-
-    .#{$prefix}--select--inline {
-      margin-right: 0;
-      width: auto;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .#{$prefix}--select-input {
-      height: rem(24px);
-      width: auto;
-      padding: 0 1.25rem 0 0;
-      margin: 0;
-      font-weight: 600;
-      text-align-last: center;
-      box-shadow: none;
-
-      &:focus {
-        @include focus-outline('border');
-      }
-    }
-
-    .#{$prefix}--select .#{$prefix}--select-input ~ .#{$prefix}--select__arrow {
-      right: 0.3rem;
-      top: 0.625rem;
-    }
-
-    .#{$prefix}--text-input {
-      background-color: $field-01;
-      height: rem(24px);
-      min-width: rem(24px);
-      width: rem(24px);
-      padding: 0;
-      margin: 0;
-      font-weight: 600;
-      text-align: center;
-      box-shadow: none;
-      order: 0;
-
-      &:focus {
-        @include focus-outline('border');
-      }
-    }
-  }
-
-  .#{$prefix}--pagination--inline {
-    height: 42px;
-    margin-top: -0.5rem;
-    margin-bottom: -0.5rem;
-    margin-right: -1rem;
-
-    .#{$prefix}--pagination__button {
-      height: rem(40px);
-      border-left: 1px solid $ui-03;
-      border-right: 1px solid $ui-03;
-      margin: 0;
-    }
-
-    .#{$prefix}--pagination__button--forward {
-      border-right: 0;
-      padding: 0 $spacing-md;
-      margin-left: $spacing-md;
-    }
-
-    .#{$prefix}--pagination__button--backward {
-      margin: 0 $spacing-md;
-      padding: 0 $spacing-md;
-    }
-
-    .#{$prefix}--select__arrow {
-      right: 0;
-      top: 0.6rem;
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text {
-    margin-right: 1rem;
-    margin-bottom: 0;
-  }
-}
-
-@mixin pagination--x {
-  .#{$prefix}--data-table-v2-container + .#{$prefix}--pagination {
-    border-top: 0;
-  }
-
-  .#{$prefix}--pagination {
-    @include reset;
-    @include font-family;
-    width: 100%;
-    background-color: $ui-01;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top: $spacing-4xs solid $ui-03;
-    height: rem(48px);
-
-    .#{$prefix}--select {
-      height: 100%;
-      align-items: center;
-      grid-template-columns: auto 0;
-    }
-
-    .#{$prefix}--select-input {
-      width: auto;
-      min-width: auto;
-      height: auto;
-      padding: 0 1.5rem 0 0.5rem;
-      // TODO: @include type-style('body-short-01');
-      font-size: rem(12px);
-      font-weight: regular;
-      line-height: rem(18px);
-      letter-spacing: 0.16px;
-    }
-
-    .#{$prefix}--select__arrow {
-      position: relative;
-      top: auto;
-      right: 1.1rem;
-      bottom: auto;
-    }
-
-    .#{$prefix}--select__item-count {
-      border-right: $spacing-4xs solid $ui-03;
-      padding-right: 0.5rem;
-    }
-
-    .#{$prefix}--select__page-number {
-      border-left: $spacing-4xs solid $ui-03;
-      padding-left: 0.5rem;
-    }
-  }
-
-  .#{$prefix}--pagination__left,
-  .#{$prefix}--pagination__right {
-    display: flex;
-    height: 100%;
-    align-items: center;
-  }
-
-  .#{$prefix}--pagination__left > .#{$prefix}--form-item,
-  .#{$prefix}--pagination__right > .#{$prefix}--form-item {
-    height: 100%;
-  }
-
-  .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
-    margin-right: rem(1px);
-  }
-
-  .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
-    margin-right: 1rem;
-    margin-left: rem(1px);
-  }
-
-  .#{$prefix}--pagination__left {
-    padding: 0 $spacing-md;
-  }
-
-  .#{$prefix}--pagination__text {
-    // TODO: @include type-style('body-short-01');
-    font-size: rem(12px);
-    font-weight: regular;
-    line-height: rem(18px);
-    letter-spacing: 0.16px;
-    color: $text-01;
-    display: none;
-
-    @include breakpoint('530px') {
-      display: inline-block;
-    }
-  }
-
-  span.#{$prefix}--pagination__text {
-    margin-left: $spacing-md;
-    color: $text-02;
-  }
-
-  .#{$prefix}--pagination__button {
-    @include reset;
-    border: none;
-    background: none;
-    cursor: pointer;
-    height: 100%;
-    margin: 0;
-    padding: 0 rem(14px);
-    border-left: $spacing-4xs solid $ui-03;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    fill: $ui-05;
-
-    &:hover {
-      fill: $hover-secondary;
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:disabled:hover {
-      cursor: default;
-      fill: $ui-05;
-    }
-  }
-
-  .#{$prefix}--pagination__button--no-index {
-    fill: $disabled-02;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--pagination--inline {
-    height: rem(42px);
-    margin-top: -0.5rem;
-    margin-bottom: -0.5rem;
-    margin-right: -1rem;
-
-    .#{$prefix}--pagination__button {
-      height: rem(40px);
-      border-left: $spacing-4xs solid $ui-03;
-      border-right: $spacing-4xs solid $ui-03;
-      margin: 0;
-    }
-
-    .#{$prefix}--pagination__button--forward {
-      border-right: 0;
-      padding: 0 $spacing-md;
-      margin-left: $spacing-md;
-    }
-
-    .#{$prefix}--pagination__button--backward {
-      margin: 0 $spacing-md;
-      padding: 0 $spacing-md;
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text {
-    margin-right: 1rem;
-    margin-bottom: 0;
-  }
-}
-
-@include exports('pagination') {
-  @if feature-flag-enabled('components-x') {
-    @include pagination--x;
-  } @else {
-    @include pagination;
-  }
-}
diff --git a/scss/components/progress-indicator/_progress-indicator.scss b/scss/components/progress-indicator/_progress-indicator.scss
deleted file mode 100644
index fba60872863b..000000000000
--- a/scss/components/progress-indicator/_progress-indicator.scss
+++ /dev/null
@@ -1,400 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-
-@mixin progress-indicator {
-  .#{$prefix}--progress {
-    @include reset;
-    @include font-family;
-    display: flex;
-    list-style: none;
-  }
-
-  .#{$prefix}--progress-step {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 7rem;
-    transition: $transition--base all $carbon--standard-easing;
-    overflow: visible;
-
-    &:first-child .#{$prefix}--progress-line {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--progress-line {
-    position: absolute;
-    top: $progress-indicator-line-offset;
-    right: 100%;
-    height: 1px;
-    width: calc(100% - 24px);
-    border: $progress-indicator-bar-width;
-  }
-
-  .#{$prefix}--progress-step svg {
-    position: relative;
-    z-index: 1;
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    margin-bottom: $spacing-xs;
-    fill: $brand-01;
-  }
-
-  .#{$prefix}--progress-label {
-    line-height: 1;
-    width: 75%;
-  }
-
-  .#{$prefix}--progress-step--current {
-    circle:first-child {
-      stroke: $brand-01;
-      stroke-width: $progress-indicator-stroke-width;
-      fill: transparent;
-    }
-
-    .#{$prefix}--progress-label {
-      @include font-smoothing;
-      color: $brand-01;
-      font-weight: 600;
-    }
-    .#{$prefix}--progress-line {
-      background-color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--progress-step--incomplete {
-    circle {
-      stroke: $ui-04;
-      stroke-width: $progress-indicator-stroke-width;
-      fill: transparent;
-    }
-
-    .#{$prefix}--progress-label {
-      color: $text-02;
-    }
-
-    .#{$prefix}--progress-line {
-      background-color: $ui-04;
-    }
-  }
-
-  .#{$prefix}--progress-step--complete {
-    circle {
-      stroke: $brand-01;
-      stroke-width: $progress-indicator-stroke-width;
-      fill: transparent;
-    }
-
-    polygon {
-      fill: $brand-01;
-    }
-
-    .#{$prefix}--progress-label {
-      @include font-smoothing;
-      color: $brand-01;
-      font-weight: 600;
-    }
-    .#{$prefix}--progress-line {
-      background-color: $brand-01;
-    }
-  }
-
-  // Skeleton State
-  .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
-    @include skeleton;
-    height: rem(12px);
-    width: rem(40px);
-  }
-
-  // Vertical variant
-  .#{$prefix}--progress--vertical {
-    display: block;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
-    display: list-item;
-    min-height: 6rem;
-
-    svg {
-      display: inline-block;
-    }
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
-    display: inline-block;
-    width: auto;
-    vertical-align: top;
-    margin-top: 0.26rem;
-    margin-left: 0.5rem;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
-    top: 22px;
-    left: 0.69rem;
-    height: calc(100% - 22px);
-    width: 1px;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step:first-child .#{$prefix}--progress-line {
-    display: block;
-  }
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step:last-child .#{$prefix}--progress-line {
-    display: none;
-  }
-}
-
-@mixin progress-indicator--x {
-  .#{$prefix}--progress {
-    @include reset;
-    @include font-family;
-    display: flex;
-    list-style: none;
-  }
-
-  .#{$prefix}--progress-step {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    flex: 1;
-    min-width: 7rem;
-    width: rem(128px);
-    transition: $transition--base all $carbon--standard-easing;
-    overflow: visible;
-
-    > .#{$prefix}--tooltip__label {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--progress-line {
-    position: absolute;
-    height: 1px;
-    width: rem(128px);
-    border: $progress-indicator-bar-width;
-  }
-
-  .#{$prefix}--progress-step svg {
-    position: relative;
-    z-index: 1;
-    width: $spacing-md;
-    height: $spacing-md;
-    border-radius: 50%;
-    margin: 9px $spacing-xs 0 0;
-    fill: $interactive-01;
-  }
-
-  .#{$prefix}--progress-label {
-    line-height: 1.45;
-    max-width: rem(88px);
-    margin: $spacing-xs 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    @include font-size('14');
-
-    &::before {
-      content: '';
-      display: block;
-    }
-  }
-
-  .#{$prefix}--progress-label:hover {
-    color: $interactive-01;
-    cursor: pointer;
-    box-shadow: 0 1px $interactive-01;
-  }
-
-  .#{$prefix}--progress-label:focus {
-    outline: 2px solid $interactive-01;
-  }
-
-  .#{$prefix}--progress-label:active {
-    box-shadow: 0 1px $ui-05;
-  }
-
-  //OVERFLOW STYLING
-  .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip,
-  .#{$prefix}--progress-label-overflow:focus ~ .#{$prefix}--tooltip {
-    visibility: visible;
-  }
-
-  .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {
-    margin-left: rem(10px);
-  }
-
-  .#{$prefix}--tooltip__text {
-    padding: 0;
-    margin: 0;
-    font-weight: normal;
-  }
-
-  //single line tooltip
-  .#{$prefix}--progress-step .#{$prefix}--tooltip {
-    min-width: rem(115px);
-    width: rem(125px);
-    min-height: $spacing-lg;
-    height: $spacing-lg;
-    margin-left: rem(22px);
-    margin-top: rem(40px);
-    padding: 3px $spacing-md;
-    display: block;
-    visibility: hidden;
-  }
-
-  //multiline tooltip
-  .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
-    width: rem(150px);
-    height: auto;
-    padding: $spacing-md;
-    padding-bottom: $spacing-lg;
-  }
-
-  //OPTIONAL HELPER TEXT STYLING
-  .#{$prefix}--progress-optional {
-    position: absolute;
-    margin-left: $spacing-lg;
-    margin-top: rem(28px);
-    @include font-size('12');
-    color: $text-02;
-  }
-
-  //CURRENT STYLING
-  .#{$prefix}--progress-step--current {
-    .#{$prefix}--progress-line {
-      background-color: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--progress-step--current svg {
-    width: 14px;
-    height: 14px;
-    fill: $interactive-01;
-    margin-top: rem(9.5px);
-  }
-
-  //INCOMPLETE STYLING
-  .#{$prefix}--progress-step--incomplete {
-    svg {
-      fill: $ui-05;
-    }
-
-    .#{$prefix}--progress-line {
-      background-color: $ui-03;
-    }
-  }
-
-  //COMPLETED STYLING
-  .#{$prefix}--progress-step--complete {
-    .#{$prefix}--progress-line {
-      background-color: $interactive-01;
-    }
-  }
-
-  //DISABLED STYLING
-  .#{$prefix}--progress-step--disabled {
-    cursor: not-allowed;
-
-    svg {
-      fill: $disabled;
-      cursor: not-allowed;
-    }
-
-    .#{$prefix}--progress-label,
-    .#{$prefix}--progress-label:hover {
-      color: $disabled;
-      cursor: not-allowed;
-      box-shadow: none;
-    }
-
-    .#{$prefix}--progress-label:focus,
-    .#{$prefix}--progress-label:active {
-      outline: none;
-      box-shadow: none;
-    }
-
-    .#{$prefix}--progress-line {
-      cursor: not-allowed;
-    }
-
-    .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip--definition .#{$prefix}--tooltip--definition__bottom {
-      display: none;
-    }
-  }
-
-  //ERROR STYLING
-  .#{$prefix}--progress__warning > path {
-    fill: $support-01;
-  }
-
-  // Skeleton State
-  .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
-    @include skeleton;
-    height: rem(12px);
-    width: rem(40px);
-  }
-
-  .#{$prefix}--progress--vertical {
-    display: block;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
-    display: list-item;
-    min-height: 6rem;
-    width: initial;
-    min-width: initial;
-
-    svg {
-      display: inline-block;
-      margin: 0.1rem 0.5rem;
-    }
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step--current svg {
-    margin-left: 0.563rem;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
-    display: inline-block;
-    width: initial;
-    max-width: none;
-    vertical-align: top;
-    margin: 0;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
-    margin-top: 0.5rem;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
-    margin-top: initial;
-    position: initial;
-    margin-left: 2.25rem;
-  }
-
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 1px;
-  }
-}
-
-@include exports('progress-indicator') {
-  @if feature-flag-enabled('components-x') {
-    @include progress-indicator--x;
-  } @else {
-    @include progress-indicator;
-  }
-}
diff --git a/scss/components/radio-button/_radio-button.scss b/scss/components/radio-button/_radio-button.scss
deleted file mode 100644
index f4cf5b5af4fb..000000000000
--- a/scss/components/radio-button/_radio-button.scss
+++ /dev/null
@@ -1,241 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Radio
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-@import '../../globals/scss/css--reset';
-
-@mixin radio-button {
-  .#{$prefix}--radio-button-group {
-    display: flex;
-    align-items: center;
-    margin-top: $spacing-xs;
-  }
-
-  .#{$prefix}--radio-button {
-    @include hidden;
-    visibility: unset;
-  }
-
-  .#{$prefix}--radio-button__label {
-    @include typescale('zeta');
-    @include font-family;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-right: $spacing-md;
-  }
-
-  .#{$prefix}--radio-button__appearance {
-    @include reset;
-    background-color: $inverse-01;
-    border-radius: 50%;
-    border: $radio-border-width solid $ui-05;
-    flex-shrink: 0;
-    height: rem(18px);
-    width: rem(18px);
-    margin-right: $spacing-xs;
-  }
-
-  .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-color: $brand-01;
-
-    &:before {
-      content: '';
-      display: inline-block;
-      position: relative;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
-      background-color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
-    @include focus-outline('blurred');
-  }
-
-  // Skeleton State
-  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(100px);
-    height: rem(18px);
-  }
-
-  .#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance {
-    display: none;
-  }
-
-  .#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0px;
-  }
-
-  .#{$prefix}--radio-button-wrapper + .#{$prefix}--radio-button-wrapper {
-    margin-left: 20px;
-  }
-
-  .#{$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 {
-    flex-direction: row-reverse;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label {
-    flex-direction: column-reverse;
-    text-align: center;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__appearance {
-    margin: 0;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label-text {
-    margin-bottom: 5px;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__label {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__label-text {
-    margin-top: 5px;
-  }
-
-  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__appearance {
-    margin: 0;
-  }
-}
-
-@mixin radio-button--experimental {
-  .#{$prefix}--radio-button-group {
-    display: flex;
-    align-items: center;
-    margin-top: $spacing-xs;
-  }
-
-  // vertical radio button
-  .#{$prefix}--radio-button-group--vertical {
-    flex-direction: column;
-
-    .#{$prefix}--radio-button__label {
-      margin-right: 0;
-    }
-
-    .#{$prefix}--radio-button__label:not(:last-of-type) {
-      margin-bottom: $spacing-xs;
-    }
-  }
-
-  .#{$prefix}--radio-button {
-    @include hidden;
-    visibility: unset;
-  }
-
-  .#{$prefix}--radio-button__label {
-    @include typescale('zeta');
-    @include font-family;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-right: $spacing-md;
-  }
-
-  .#{$prefix}--radio-button__appearance {
-    @include reset;
-    background-color: $inverse-01;
-    border-radius: 50%;
-    border: $radio-border-width solid $ui-05;
-    flex-shrink: 0;
-    height: rem(18px);
-    width: rem(18px);
-    margin-right: $spacing-xs;
-  }
-
-  .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-color: $ui-05;
-
-    &:before {
-      content: '';
-      display: inline-block;
-      position: relative;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
-      background-color: $ui-05;
-    }
-  }
-
-  .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
-    border-color: transparent;
-  }
-
-  // Disabled
-
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
-  }
-
-  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
-    color: $disabled;
-    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 {
-    border-color: $disabled;
-  }
-
-  // Focus
-
-  .#{$prefix}--radio-button:focus + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {
-    @include focus-outline('blurred');
-  }
-
-  // Skeleton State
-  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
-    @include skeleton;
-    width: rem(100px);
-    height: rem(18px);
-  }
-
-  .#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance {
-    display: none;
-  }
-}
-
-@include exports('radio-button') {
-  @if feature-flag-enabled('components-x') {
-    @include radio-button--experimental;
-  } @else {
-    @include radio-button;
-  }
-}
diff --git a/scss/components/search/_search.scss b/scss/components/search/_search.scss
deleted file mode 100644
index 62652d236f77..000000000000
--- a/scss/components/search/_search.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Search
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-
-@mixin search {
-  .#{$prefix}--search {
-    display: flex;
-    position: relative;
-    width: 100%;
-  }
-
-  .#{$prefix}--search .#{$prefix}--label {
-    @include hidden;
-  }
-
-  .#{$prefix}--search-input {
-    @include reset;
-    @include font-family;
-    appearance: none;
-    border: none;
-    background-color: $field-01;
-    color: $text-01;
-    font-weight: 600;
-    padding: 0 $spacing-2xl;
-    text-overflow: ellipsis;
-    width: 100%;
-    order: 1;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus ~ .#{$prefix}--search-magnifier {
-      fill: $brand-01;
-    }
-
-    &::placeholder {
-      color: $text-02;
-      font-weight: 400;
-    }
-
-    &::-ms-clear {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--search--light .#{$prefix}--search-input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--search--sm .#{$prefix}--search-input {
-    @include typescale('zeta');
-    height: rem(32px);
-  }
-
-  .#{$prefix}--search--lg .#{$prefix}--search-input {
-    @include typescale('zeta');
-    height: rem(40px);
-  }
-
-  .#{$prefix}--search-magnifier,
-  .#{$prefix}--search-close {
-    position: absolute;
-    height: 1rem;
-    width: 1rem;
-    top: calc(50% - 0.5rem);
-    // Ensure clear icon is rendered in Firefox (#1127)
-    z-index: 1;
-  }
-
-  .#{$prefix}--search-magnifier {
-    left: 0.75rem;
-    fill: $ui-05;
-    z-index: 2;
-  }
-
-  .#{$prefix}--search-close {
-    @include button-reset(false);
-
-    transition: opacity $transition--base;
-    fill: $ui-05;
-    cursor: pointer;
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .#{$prefix}--search-close:focus {
-    outline: 1px solid $brand-01;
-    outline-offset: 2px;
-  }
-
-  .#{$prefix}--search-close {
-    right: 0.75rem;
-  }
-
-  .#{$prefix}--search--lg .#{$prefix}--search-close {
-    right: rem(12px);
-  }
-
-  .#{$prefix}--search-button {
-    @include reset;
-    border: 0;
-    transition: $transition--base;
-    height: rem(40px);
-    width: rem(40px);
-    min-width: rem(40px);
-    margin-left: $spacing-2xs;
-    background-color: $ui-01;
-    position: relative;
-    padding: 0;
-    outline: 1px solid transparent;
-    order: 2;
-  }
-
-  .#{$prefix}--search-button svg {
-    position: relative;
-    top: -1px;
-    box-sizing: border-box;
-    vertical-align: middle;
-    transition: $transition--base;
-    fill: $hover-primary;
-    height: 1rem;
-    width: 1rem;
-  }
-
-  .#{$prefix}--search-button:hover,
-  .#{$prefix}--search-button:focus {
-    cursor: pointer;
-    background-color: $brand-01;
-    outline: 1px solid transparent;
-  }
-
-  .#{$prefix}--search-button:hover svg,
-  .#{$prefix}--search-button:focus svg {
-    fill: $ui-01;
-  }
-
-  .#{$prefix}--search-close--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .#{$prefix}--search-view--hidden {
-    display: none;
-  }
-
-  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
-  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
-    @include skeleton;
-    width: 100%;
-
-    &::placeholder {
-      color: transparent;
-    }
-  }
-}
-
-@mixin search--x {
-  .#{$prefix}--search {
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-  }
-
-  .#{$prefix}--search .#{$prefix}--label {
-    @include hidden;
-  }
-
-  .#{$prefix}--search-input {
-    @include reset;
-    @include font-family;
-    @include focus-outline('reset');
-    appearance: none;
-    border: none;
-    background-color: $field-01;
-    color: $text-01;
-    padding: 0 $spacing-2xl;
-    text-overflow: ellipsis;
-    width: 100%;
-    order: 1;
-    transition: background-color $transition--base, outline $transition--base;
-    border-bottom: 1px solid $ui-04;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &::placeholder {
-      color: $text-03;
-      font-weight: 400;
-    }
-
-    &::-ms-clear {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--search-input[disabled] {
-    color: $disabled;
-    background-color: $disabled-background-color;
-    border-bottom: 1px solid transparent;
-    cursor: not-allowed;
-
-    &::placeholder {
-      color: $disabled;
-      font-weight: 400;
-    }
-  }
-
-  .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier {
-    fill: $disabled;
-  }
-
-  .#{$prefix}--search--light .#{$prefix}--search-input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--search--sm .#{$prefix}--search-input {
-    @include typescale('zeta');
-    height: rem(32px);
-  }
-
-  .#{$prefix}--search--lg .#{$prefix}--search-input {
-    @include typescale('epsilon');
-    height: rem(40px);
-  }
-
-  .#{$prefix}--search--xl .#{$prefix}--search-input {
-    @include typescale('epsilon');
-    height: rem(48px);
-    padding: 0 rem(64px) 0 rem(48px);
-  }
-
-  .#{$prefix}--search-magnifier {
-    left: 0.75rem;
-    z-index: 2;
-    position: absolute;
-    height: rem(16px);
-    width: rem(16px);
-    top: 50%;
-    transform: translateY(-50%);
-    // Ensure clear icon is rendered in Firefox (#1127)
-    fill: $text-02;
-  }
-
-  .#{$prefix}--search--xl .#{$prefix}--search-magnifier {
-    height: rem(20px);
-    width: rem(20px);
-    left: rem(24px);
-    transform: translate(-50%, -50%);
-  }
-
-  .#{$prefix}--search-close {
-    @include button-reset(false);
-    @include focus-outline('reset');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity $transition--base, outline $transition--base, background-color $transition--base,
-      border-color $transition--base;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-    visibility: visible;
-    opacity: 1;
-    position: absolute;
-    height: rem(40px);
-    width: rem(40px);
-    right: 0;
-    fill: $icon-01;
-
-    &:hover {
-      background-color: $hover-ui;
-      border-bottom: 1px solid $ui-04;
-    }
-  }
-
-  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  .#{$prefix}--search--sm .#{$prefix}--search-close {
-    height: rem(32px);
-    width: rem(32px);
-  }
-
-  .#{$prefix}--search--xl .#{$prefix}--search-close {
-    height: rem(48px);
-    width: rem(48px);
-  }
-
-  .#{$prefix}--search-close:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--search-close--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
-  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
-    @include skeleton;
-    width: 100%;
-
-    &::placeholder {
-      color: transparent;
-    }
-  }
-}
-
-@include exports('search') {
-  @if feature-flag-enabled('components-x') {
-    @include search--x;
-  } @else {
-    @include search;
-  }
-}
diff --git a/scss/components/select/_select.scss b/scss/components/select/_select.scss
deleted file mode 100644
index fb3dc864ed36..000000000000
--- a/scss/components/select/_select.scss
+++ /dev/null
@@ -1,417 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Select
-//-----------------------------
-
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-
-@mixin select {
-  .#{$prefix}--select {
-    @include reset;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .#{$prefix}--select-input {
-    @include font-family;
-    @include typescale('zeta');
-    height: rem(40px);
-    appearance: none;
-    display: block;
-    width: 100%;
-    padding: 0 $spacing-2xl 0 $spacing-md;
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 2;
-    border-radius: 0;
-    cursor: pointer;
-    border-bottom: 1px solid transparent;
-
-    // Hide default select arrow in IE10+
-    &::-ms-expand {
-      display: none;
-    }
-
-    & ~ .#{$prefix}--label {
-      order: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      box-shadow: 0 2px 0 0 $support-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &[data-invalid]:focus ~ .#{$prefix}--label {
-      color: $support-01;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--select--light .#{$prefix}--select-input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--select__arrow {
-    fill: $brand-01;
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    width: rem(10px);
-    height: rem(5px);
-    pointer-events: none;
-  }
-
-  &[data-invalid] ~ .#{$prefix}--select__arrow {
-    bottom: 2.25rem;
-  }
-
-  .#{$prefix}--select-optgroup,
-  .#{$prefix}--select-option {
-    color: $text-01; // For the options to show in IE11
-  }
-
-  .#{$prefix}--select-option[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  // Override some Firefox user-agent styles
-  @-moz-document url-prefix() {
-    .#{$prefix}--select-option {
-      background-color: $ui-01;
-      color: $text-01;
-    }
-
-    .#{$prefix}--select-optgroup {
-      color: $text-01;
-    }
-  }
-
-  .#{$prefix}--select--inline {
-    display: grid;
-    grid-template-columns: auto auto;
-
-    // Targets IE10+ browsers: Display grid auto not supported
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .#{$prefix}--label {
-      white-space: nowrap;
-      margin: 0 $spacing-xs 0 0;
-      font-weight: 400;
-      align-self: center;
-    }
-
-    .#{$prefix}--select-input {
-      background-color: transparent;
-      color: $brand-01;
-      font-weight: 600;
-      box-shadow: none;
-
-      &:hover {
-        background-color: $color__white;
-      }
-
-      &:focus {
-        @include focus-outline('border');
-      }
-
-      ~ .#{$prefix}--select__arrow {
-        bottom: auto;
-        top: 1rem;
-      }
-
-      &[data-invalid] {
-        color: $text-01;
-        outline-offset: 2px;
-
-        &:focus {
-          outline: 1px solid $support-01;
-          box-shadow: none;
-        }
-      }
-
-      &:disabled ~ * {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      ~ .#{$prefix}--form-requirement {
-        grid-column-start: 2;
-
-        // Targets IE10+ browsers: Display grid auto not supported
-        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-          position: absolute;
-          bottom: -1.5rem;
-        }
-      }
-    }
-  }
-
-  //Skeleton State
-  .#{$prefix}--select.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
-    display: none;
-  }
-}
-
-@mixin select--x {
-  .#{$prefix}--select {
-    @include reset;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .#{$prefix}--select-input__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--select-input {
-    @include font-family;
-    @include typescale('zeta');
-    @include focus-outline('reset');
-    height: rem(40px);
-    appearance: none;
-    display: block;
-    width: rem(224px);
-    min-width: rem(128px);
-    max-width: rem(448px);
-    padding: 0 rem(34px) 0 $spacing-md; // 1.5rem + chevron width
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    border-radius: 0;
-    cursor: pointer;
-    transition: outline $transition--base, background-color $transition--base;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-
-    // Hide default select arrow in IE10+
-    &::-ms-expand {
-      display: none;
-    }
-
-    // Select text renders a little high on Firefox
-    @-moz-document url-prefix() {
-      padding-top: rem(4px);
-    }
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background: $disabled-background-color;
-      color: $disabled;
-      border-bottom: 1px solid $disabled-background-color;
-    }
-  }
-
-  .#{$prefix}--select--invalid {
-    padding-right: rem(58px); // 1rem + chevron width + invalid icon width
-  }
-
-  .#{$prefix}--select--invalid,
-  .#{$prefix}--select--invalid:focus {
-    @include focus-outline('invalid');
-  }
-
-  .#{$prefix}--form-requirement {
-    display: block;
-    color: $support-01;
-    font-weight: 400;
-    overflow: visible;
-  }
-
-  .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
-    fill: $disabled;
-  }
-
-  .#{$prefix}--select--light .#{$prefix}--select-input {
-    background: $field-02;
-  }
-
-  .#{$prefix}--select__arrow {
-    fill: $ui-05;
-    position: absolute;
-    right: 1rem;
-    pointer-events: none;
-  }
-
-  .#{$prefix}--select__disabled-icon,
-  .#{$prefix}--select--invalid ~ .#{$prefix}--select__invalid-icon {
-    position: absolute;
-    right: rem(34px); // 1.5rem + chevron width
-  }
-
-  .#{$prefix}--select--invalid ~ .#{$prefix}--select__invalid-icon {
-    fill: $support-01;
-  }
-
-  .#{$prefix}--select-optgroup,
-  .#{$prefix}--select-option {
-    color: $text-01; // For the options to show in IE11
-  }
-
-  .#{$prefix}--select-option[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  // Override some Firefox user-agent styles
-  @-moz-document url-prefix() {
-    .#{$prefix}--select-option {
-      background-color: $ui-01;
-      color: $text-01;
-    }
-
-    .#{$prefix}--select-optgroup {
-      color: $text-01;
-    }
-  }
-
-  .#{$prefix}--select--inline {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
-    margin-bottom: 0;
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--label {
-    @include typescale('zeta');
-    white-space: nowrap;
-    margin: 0 $spacing-xs 0 0;
-    align-self: center;
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select-input {
-    background-color: transparent;
-    color: $text-01;
-    border-bottom: none;
-    padding-left: $spacing-xs;
-
-    @-moz-document url-prefix() {
-      padding-top: 0;
-    }
-
-    &:hover {
-      background-color: $ui-01;
-    }
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select__arrow {
-    bottom: auto;
-    top: 1.125rem;
-    right: $spacing-xs;
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select--invalid ~ .#{$prefix}--select__invalid-icon {
-    right: rem(24px);
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select--invalid ~ .#{$prefix}--select__disabled-icon {
-    right: rem(48px);
-  }
-
-  .#{$prefix}--select--inline[data-invalid] {
-    @include focus-outline('invalid');
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
-    color: $disabled;
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    ~ * {
-      cursor: not-allowed;
-    }
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--form-requirement {
-    max-height: initial;
-    margin: 0 0 0 $spacing-xs;
-  }
-
-  .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
-    cursor: not-allowed;
-  }
-
-  //Skeleton State
-  .#{$prefix}--select.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
-    display: none;
-  }
-}
-
-@include exports('select') {
-  @if feature-flag-enabled('components-x') {
-    @include select--x;
-  } @else {
-    @include select;
-  }
-}
diff --git a/scss/components/skeleton/_skeleton-icon.scss b/scss/components/skeleton/_skeleton-icon.scss
deleted file mode 100644
index ef40d535ee42..000000000000
--- a/scss/components/skeleton/_skeleton-icon.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('skeleton-icon') {
-  .#{$prefix}--icon--skeleton {
-    @include skeleton;
-    display: inline-block;
-    width: rem(16px);
-    height: rem(16px);
-  }
-}
diff --git a/scss/components/skeleton/_skeleton-placeholder.scss b/scss/components/skeleton/_skeleton-placeholder.scss
deleted file mode 100644
index 43c1290f14ec..000000000000
--- a/scss/components/skeleton/_skeleton-placeholder.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('skeleton-placeholder') {
-  .#{$prefix}--skeleton__placeholder {
-    @include skeleton;
-    height: rem(100px);
-    width: rem(100px);
-  }
-}
diff --git a/scss/components/skeleton/_skeleton-text.scss b/scss/components/skeleton/_skeleton-text.scss
deleted file mode 100644
index 0a176d9eed49..000000000000
--- a/scss/components/skeleton/_skeleton-text.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-
-@include exports('skeleton-text') {
-  .#{$prefix}--skeleton__text {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    margin-bottom: $spacing-xs;
-  }
-
-  .#{$prefix}--skeleton__heading {
-    height: 1.5rem;
-  }
-}
diff --git a/scss/components/skeleton/_skeleton.scss b/scss/components/skeleton/_skeleton.scss
deleted file mode 100644
index c841d7e76c42..000000000000
--- a/scss/components/skeleton/_skeleton.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'skeleton-text';
-@import 'skeleton-icon';
-@import 'skeleton-placeholder';
diff --git a/scss/components/slider/_slider.scss b/scss/components/slider/_slider.scss
deleted file mode 100644
index 89e9cab804a8..000000000000
--- a/scss/components/slider/_slider.scss
+++ /dev/null
@@ -1,342 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Slider
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-@import '../text-input/text-input';
-
-@mixin slider {
-  .#{$prefix}--slider-container {
-    display: flex;
-    align-items: center;
-    user-select: none;
-  }
-
-  .#{$prefix}--slider {
-    position: relative;
-    width: 100%;
-    margin: 0 $spacing-md;
-    max-width: rem(640px);
-    min-width: rem(200px);
-    order: 1;
-  }
-
-  .#{$prefix}--slider__range-label:first-of-type {
-    order: 0;
-  }
-
-  .#{$prefix}--slider-text-input {
-    order: 3;
-  }
-
-  .#{$prefix}--slider--disabled {
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
-    &:hover {
-      transform: translate(-50%, -50%);
-    }
-    &:focus {
-      box-shadow: none;
-      outline: none;
-    }
-    &:active {
-      background: $hover-secondary;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .#{$prefix}--slider__range-label {
-    @include typescale('zeta');
-    color: $text-02;
-
-    &:last-of-type {
-      margin-right: $spacing-md;
-      order: 2;
-    }
-  }
-
-  .#{$prefix}--slider__track {
-    position: absolute;
-    width: 100%;
-    height: rem(4px);
-    background: $ui-04;
-    cursor: pointer;
-    transform: translate(0%, -50%);
-  }
-
-  .#{$prefix}--slider__filled-track {
-    position: absolute;
-    width: 100%;
-    height: rem(4px);
-    background: $brand-01;
-    transform-origin: left;
-    pointer-events: none;
-    transform: translate(0%, -50%);
-  }
-
-  .#{$prefix}--slider__thumb {
-    position: absolute;
-    height: rem(24px);
-    width: rem(24px);
-    background: $brand-01;
-    border-radius: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-    transition: transform 100ms $carbon--standard-easing, background 100ms $carbon--standard-easing;
-    cursor: pointer;
-    outline: none;
-    z-index: 2;
-
-    &--clicked {
-      transition: left $transition--base $carbon--standard-easing;
-    }
-
-    &:hover {
-      transform: translate(-50%, -50%) scale(1.05);
-    }
-    &:focus {
-      @include focus-outline('blurred');
-    }
-    &:active {
-      background: darken($brand-01, 5%);
-      transform: translate(-50%, -50%) scale(1.25);
-    }
-  }
-
-  .#{$prefix}--slider__input {
-    display: none;
-  }
-
-  .#{$prefix}--slider-text-input,
-  .#{$prefix}-slider-text-input {
-    width: rem(60px);
-    min-width: rem(60px);
-    height: 2rem;
-    padding: 0;
-    text-align: center;
-    font-weight: 600;
-    -moz-appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      display: none;
-    }
-  }
-
-  // Skeleton state
-  .#{$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 {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb {
-    left: 50%;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-@mixin slider--x {
-  .#{$prefix}--slider-container {
-    display: flex;
-    align-items: center;
-    user-select: none;
-  }
-
-  .#{$prefix}--slider {
-    position: relative;
-    width: 100%;
-    margin: 0 $spacing-md;
-    max-width: rem(640px);
-    min-width: rem(200px);
-  }
-
-  .#{$prefix}--slider__range-label {
-    @include typescale('zeta');
-    font-family: $font-family-mono;
-    color: $text-01;
-
-    &:last-of-type {
-      margin-right: $spacing-md;
-    }
-  }
-
-  .#{$prefix}--slider__track {
-    position: absolute;
-    width: 100%;
-    height: rem(2px);
-    background: $ui-03;
-    cursor: pointer;
-    transform: translate(0%, -50%);
-  }
-
-  .#{$prefix}--slider__track:before {
-    content: '';
-    position: absolute;
-    display: inline-block;
-    height: rem(4px);
-    width: rem(2px);
-    left: 50%;
-    transform: translate(-50%, 0);
-    top: rem(-5px);
-    background: $ui-03;
-  }
-
-  .#{$prefix}--slider__filled-track {
-    position: absolute;
-    width: 100%;
-    height: rem(2px);
-    background: $ui-05;
-    transform-origin: left;
-    pointer-events: none;
-    transform: translate(0%, -50%);
-    transition: background $transition--base;
-  }
-
-  .#{$prefix}--slider__thumb {
-    position: absolute;
-    height: rem(14px);
-    width: rem(14px);
-    background: $ui-05;
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    top: 0;
-    transform: translate(-50%, -50%);
-    transition: transform $transition--base $carbon--standard-easing, background $transition--base $carbon--standard-easing,
-      box-shadow $transition--base $carbon--standard-easing;
-    cursor: pointer;
-    outline: none;
-    z-index: 3;
-
-    &:hover {
-      // 20px / 14px = 1.4285714286
-      transform: translate(-50%, -50%) scale(1.4285714286);
-    }
-
-    &:focus {
-      // 20px / 14px = 1.4285714286
-      transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01, inset 0 0 0 3px $ui-01;
-      background-color: $interactive-01;
-    }
-
-    &:active {
-      transform: translate(-50%, -50%) scale(1.4285714286);
-      box-shadow: inset 0 0 0 2px $interactive-01;
-    }
-  }
-
-  .#{$prefix}--slider__input {
-    display: none;
-  }
-
-  .#{$prefix}--slider-text-input,
-  .#{$prefix}-slider-text-input {
-    width: rem(64px);
-    height: rem(40px);
-    padding: 0;
-    text-align: center;
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive-01;
-  }
-
-  // Disabled state
-  .#{$prefix}--label--disabled ~ .#{$prefix}--slider-container > .#{$prefix}--slider__range-label {
-    color: $disabled-02;
-  }
-
-  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
-    background-color: $ui-03;
-
-    &:hover {
-      transform: translate(-50%, -50%);
-      cursor: not-allowed;
-    }
-
-    &:focus {
-      box-shadow: none;
-      outline: none;
-      background-color: $ui-03;
-      transform: translate(-50%, -50%);
-    }
-
-    &:active {
-      background: $ui-03;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .#{$prefix}--slider--disabled .#{$prefix}--slider__track,
-  .#{$prefix}--slider--disabled .#{$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}--slider-text-input {
-    background-color: $disabled-01;
-    color: $disabled-02;
-    transition: none;
-
-    &:active,
-    &:focus,
-    &:hover {
-      outline: none;
-      color: $disabled-02;
-    }
-  }
-
-  // Skeleton state
-  .#{$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 {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb {
-    left: 50%;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-@include exports('slider') {
-  @if feature-flag-enabled('components-x') {
-    @include slider--x;
-  } @else {
-    @include slider;
-  }
-}
diff --git a/scss/components/structured-list/_mixins.scss b/scss/components/structured-list/_mixins.scss
deleted file mode 100644
index eece1b0a1dd8..000000000000
--- a/scss/components/structured-list/_mixins.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Used only for .#{prefix}--structured-list--condensed
-@mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
-  padding-left: 0;
-}
-
-// Used only for [data-structured-list]
-@mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-left: $padding / 2;
-  padding-right: $padding / 2;
-
-  // Controls gutter sizes for check
-  &:first-child {
-    padding-left: $padding / 2;
-    padding-right: $padding / 4;
-  }
-
-  &:last-child {
-    padding-right: $padding;
-  }
-}
-
-// Used only for normal structured-list
-@mixin padding-td($padding: $structured-list-padding) {
-  padding-left: 0;
-  padding-right: $padding;
-  padding-top: $spacing-md;
-  padding-bottom: $spacing-md;
-
-  &:last-child {
-    padding-right: $padding;
-  }
-}
-
-// Used only for normal structured-list
-@mixin padding-th($padding: $structured-list-padding) {
-  padding-left: 0;
-  padding-right: $padding;
-  padding-top: $spacing-md;
-  padding-bottom: $spacing-md;
-
-  &:last-child {
-    padding-right: 0;
-  }
-}
-
-// Used only for experimental .#{prefix}--structured-list--condensed
-@mixin padding-td--condensed--x($padding: $structured-list-padding) {
-  padding: $padding / 4;
-  padding-left: 0;
-}
-
-// Used only for experimental [data-structured-list]
-@mixin padding--data-structured-list--x($padding: $structured-list-padding) {
-  padding-left: $padding / 2;
-  padding-right: $padding / 2;
-
-  // Controls gutter sizes for check
-  &:first-child {
-    padding-left: $padding / 2;
-    padding-right: $padding / 2;
-  }
-}
-
-// Used only for experimental normal structured-list
-@mixin padding-th--x($padding: $structured-list-padding) {
-  padding-left: $spacing-md;
-  padding-right: $spacing-md;
-  padding-top: $spacing-md;
-  padding-bottom: $spacing-xs;
-}
-
-// Used only for experimental normal structured-list
-@mixin padding-td--x($padding: $structured-list-padding) {
-  padding-top: $spacing-md;
-  padding-right: $spacing-md;
-  padding-bottom: $spacing-lg;
-  padding-left: $spacing-md;
-}
diff --git a/scss/components/structured-list/_structured-list.scss b/scss/components/structured-list/_structured-list.scss
deleted file mode 100644
index 7d27847910ca..000000000000
--- a/scss/components/structured-list/_structured-list.scss
+++ /dev/null
@@ -1,354 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/import-once';
-@import 'mixins';
-
-@mixin structured-list {
-  .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-td,
-  .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
-    @include padding--data-structured-list;
-  }
-
-  // Deprecated
-  [data-structured-list] .#{$prefix}--structured-list-td,
-  [data-structured-list] .#{$prefix}--structured-list-th {
-    @include padding--data-structured-list;
-  }
-
-  .#{$prefix}--structured-list-input {
-    display: none;
-
-    &:checked + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-svg,
-    &:checked + .#{$prefix}--structured-list-td .#{$prefix}--structured-list-svg {
-      fill: $brand-02;
-    }
-  }
-
-  .#{$prefix}--structured-list {
-    @include reset;
-    @include font-family;
-    display: table;
-    overflow-x: auto;
-    overflow-y: hidden;
-    width: 100%;
-    min-width: 500px;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin-bottom: 5rem;
-    background-color: transparent;
-
-    &.#{$prefix}--structured-list--border {
-      border: 1px solid $ui-03;
-      background-color: $ui-01;
-    }
-
-    &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
-    &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-th {
-      @include padding-td--condensed;
-    }
-  }
-
-  .#{$prefix}--structured-list-row {
-    display: table-row;
-    border-bottom: 1px solid $ui-03;
-    transition: $transition--base $carbon--standard-easing;
-
-    // Deprecated
-    [data-structured-list] &:hover:not(.#{$prefix}--structured-list-row--header-row) {
-      background-color: $hover-row;
-      cursor: pointer;
-    }
-
-    &.#{$prefix}--structured-list-row--selected {
-      background-color: $hover-row;
-    }
-
-    &.#{$prefix}--structured-list-row--header-row {
-      border-bottom: 2px solid $brand-01;
-      cursor: inherit;
-    }
-
-    &:focus:not(.#{$prefix}--structured-list-row--header-row) {
-      @include focus-outline('border');
-    }
-
-    &:hover .#{$prefix}--structured-list-svg {
-      fill: $hover-row;
-    }
-  }
-
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row) {
-    background-color: $hover-row;
-    cursor: pointer;
-  }
-
-  .#{$prefix}--structured-list-thead {
-    display: table-header-group;
-    vertical-align: middle;
-  }
-
-  .#{$prefix}--structured-list-th {
-    @include reset;
-    @include padding-th;
-    @include typescale('omega');
-    display: table-cell;
-    font-weight: 600;
-    height: rem(40px);
-    text-align: left;
-    text-transform: $structured-list-text-transform;
-    vertical-align: bottom;
-  }
-
-  .#{$prefix}--structured-list-tbody {
-    display: table-row-group;
-    vertical-align: middle;
-  }
-
-  .#{$prefix}--structured-list-td {
-    @include reset;
-    @include typescale('zeta');
-    @include line-height('body');
-    @include padding-td;
-    position: relative;
-    display: table-cell;
-  }
-
-  .#{$prefix}--structured-list-th,
-  .#{$prefix}--structured-list-td {
-    color: $text-01;
-  }
-
-  .#{$prefix}--structured-list-content--nowrap {
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--structured-list-svg {
-    display: inline-block;
-    fill: transparent;
-    vertical-align: middle;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  // Skeleton State
-  .#{$prefix}--structured-list.#{$prefix}--skeleton {
-    .#{$prefix}--structured-list-th {
-      &:first-child {
-        width: 8%;
-      }
-
-      &:nth-child(3n + 2) {
-        width: 30%;
-      }
-
-      &:nth-child(3n + 3) {
-        width: 15%;
-      }
-    }
-
-    .#{$prefix}--structured-list-th span {
-      @include skeleton;
-      width: 75%;
-      height: 1rem;
-      display: block;
-    }
-  }
-
-  .#{$prefix}--structured-list.#{$prefix}--structured-list--border.#{$prefix}--skeleton {
-    .#{$prefix}--structured-list-th:first-child {
-      width: 5%;
-
-      span {
-        display: none;
-      }
-    }
-  }
-
-  // Deprecated class
-  .#{$prefix}--structured-list-content {
-    @include typescale('zeta');
-  }
-}
-
-@mixin structured-list--x {
-  .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-td,
-  .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
-    @include padding--data-structured-list--x;
-  }
-
-  .#{$prefix}--structured-list-input {
-    display: none;
-  }
-
-  .#{$prefix}--structured-list {
-    @include reset;
-    @include font-family;
-    display: table;
-    overflow-x: auto;
-    overflow-y: hidden;
-    width: 100%;
-    min-width: 500px;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin-bottom: 5rem;
-    background-color: transparent;
-
-    &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
-    &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-th {
-      @include padding-td--condensed--x;
-    }
-  }
-
-  .#{$prefix}--structured-list-row {
-    display: table-row;
-    border-bottom: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    background-color: $ui_01;
-    cursor: pointer;
-    border-bottom: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
-    background-color: $ui-03;
-  }
-
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--header-row {
-    border-bottom: 1px solid $ui-03;
-    cursor: inherit;
-  }
-
-  .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
-    @include focus-outline('outline');
-  }
-
-  .#{$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 {
-    color: $text-01;
-  }
-
-  .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
-    > .#{$prefix}--structured-list-td {
-    border-top: 1px solid $ui-01;
-  }
-
-  .#{$prefix}--structured-list-thead {
-    display: table-header-group;
-    vertical-align: middle;
-  }
-
-  .#{$prefix}--structured-list-th {
-    @include reset;
-    @include padding-th--x;
-    @include typescale('zeta');
-    display: table-cell;
-    font-weight: 600;
-    height: rem(40px);
-    text-align: left;
-    text-transform: $structured-list-text-transform;
-    vertical-align: bottom;
-  }
-
-  .#{$prefix}--structured-list-tbody {
-    display: table-row-group;
-    vertical-align: middle;
-  }
-
-  .#{$prefix}--structured-list-td {
-    @include reset;
-    @include typescale('zeta');
-    @include line-height('body');
-    @include padding-td--x;
-    position: relative;
-    display: table-cell;
-  }
-
-  .#{$prefix}--structured-list-th {
-    color: $text-01;
-  }
-  .#{$prefix}--structured-list-td {
-    color: $text-02;
-  }
-
-  .#{$prefix}--structured-list-content--nowrap {
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--structured-list-svg {
-    display: inline-block;
-    fill: transparent;
-    vertical-align: middle;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--structured-list-row:hover .#{$prefix}--structured-list-svg {
-    fill: $ibm-colors__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 {
-    fill: $text-01;
-  }
-
-  // Skeleton State
-  .#{$prefix}--structured-list.#{$prefix}--skeleton {
-    .#{$prefix}--structured-list-th {
-      &:first-child {
-        width: 8%;
-      }
-
-      &:nth-child(3n + 2) {
-        width: 30%;
-      }
-
-      &:nth-child(3n + 3) {
-        width: 15%;
-      }
-    }
-
-    .#{$prefix}--structured-list-th span {
-      @include skeleton;
-      width: 75%;
-      height: 1rem;
-      display: block;
-    }
-  }
-
-  .#{$prefix}--structured-list.#{$prefix}--skeleton .#{$prefix}--structured-list-th span {
-    @include skeleton;
-    width: 75%;
-    height: 1rem;
-    display: block;
-  }
-
-  .#{$prefix}--structured-list.#{$prefix}--structured-list--border.#{$prefix}--skeleton
-    .#{$prefix}--structured-list-th:first-child {
-    width: 5%;
-
-    span {
-      display: none;
-    }
-  }
-}
-
-@include exports('structured-list') {
-  @if feature-flag-enabled('components-x') {
-    @include structured-list--x;
-  } @else {
-    @include structured-list;
-  }
-}
diff --git a/scss/components/tabs/_tabs.scss b/scss/components/tabs/_tabs.scss
deleted file mode 100644
index b9c10d80b193..000000000000
--- a/scss/components/tabs/_tabs.scss
+++ /dev/null
@@ -1,523 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Tabs
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--typography';
-
-@mixin tabs {
-  .#{$prefix}--tabs {
-    @include typescale('zeta');
-    @include font-smoothing;
-    @include font-family;
-    color: $text-01;
-    font-weight: 600;
-    height: auto;
-    width: 100%;
-    position: relative;
-
-    @include breakpoint(bp--sm--major) {
-      background: none;
-      min-height: rem(49px);
-    }
-  }
-
-  .#{$prefix}--tabs-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 $spacing-md;
-    height: rem(40px);
-    cursor: pointer;
-    background-color: $field-01;
-    box-shadow: 0 1px 0 0 $ui-05;
-
-    svg {
-      width: rem(10px);
-      height: rem(5px);
-      fill: $brand-01;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    @include breakpoint(bp--sm--major) {
-      display: none;
-    }
-  }
-
-  // There is only a difference in tab color when in mobile/dropdown view
-  .#{$prefix}--tabs--light.#{$prefix}--tabs-trigger {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--tabs-trigger-text {
-    text-decoration: none;
-    font-weight: 600;
-    color: $text-01;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--tabs__nav {
-    @include layer('overlay');
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    width: 100%;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    z-index: z('dropdown');
-    background: $ui-01;
-
-    @include breakpoint(bp--sm--major) {
-      @include typescale('epsilon');
-      flex-direction: row;
-      margin-right: $spacing-md;
-      margin-left: $spacing-md;
-      background: none;
-      box-shadow: none;
-      z-index: auto;
-    }
-
-    @include breakpoint(bp--lg--major) {
-      margin-left: 0;
-    }
-  }
-
-  .#{$prefix}--tabs__nav--hidden {
-    display: none;
-
-    @include breakpoint(bp--sm--major) {
-      display: flex;
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item {
-    @include typescale('zeta');
-    background-color: $ui-01;
-    padding: 0;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      background-color: $hover-row;
-
-      @include breakpoint(bp--sm--major) {
-        outline: 1px solid transparent;
-        background: transparent;
-      }
-    }
-
-    @include breakpoint(bp--sm--major) {
-      background: transparent;
-      padding: $spacing-sm 0 $spacing-sm;
-
-      & + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(48px);
-      }
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item--selected {
-    border: none;
-
-    @include breakpoint(bp--sm--major) {
-      border-bottom: 2px solid $brand-01;
-
-      .#{$prefix}--tabs__nav-link {
-        color: $brand-01;
-
-        &:focus {
-          color: $brand-01;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
-    color: $text-01;
-
-    @include breakpoint(bp--sm--major) {
-      color: $hover-secondary;
-    }
-  }
-
-  .#{$prefix}--tabs__nav-link {
-    display: inline-block;
-    color: $text-01;
-    text-decoration: none;
-    padding: $spacing-md;
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &:focus,
-    &:active {
-      outline: 1px solid transparent;
-      background-color: $brand-01;
-      color: $inverse-01;
-    }
-
-    @include breakpoint(bp--sm--major) {
-      padding: 0 $spacing-3xs;
-      width: auto;
-
-      &:hover {
-        color: $brand-01;
-      }
-
-      &:focus,
-      &:active {
-        background-color: transparent;
-        color: $text-01;
-        outline: 1px solid transparent;
-        box-shadow: 0 0 0 1px $brand-01;
-      }
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--tabs.#{$prefix}--skeleton {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(12px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
-    @include skeleton;
-    width: rem(100px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
-    @include hidden;
-  }
-}
-
-@mixin tabs--x {
-  .#{$prefix}--tabs {
-    @include typescale('zeta');
-    @include font-family;
-    color: $text-01;
-    height: auto;
-    width: 100%;
-    position: relative;
-    @include breakpoint(bp--sm--major) {
-      background: none;
-      min-height: rem(48px);
-    }
-  }
-
-  .#{$prefix}--tabs-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 $spacing-md;
-    height: rem(40px);
-    cursor: pointer;
-    color: $text-01;
-    outline: 2px solid transparent;
-    border-bottom: 1px solid $ui-04;
-    background-color: $field-01;
-    @include breakpoint(bp--sm--major) {
-      display: none;
-    }
-  }
-
-  .#{$prefix}--tabs-trigger:focus,
-  .#{$prefix}--tabs-trigger:active {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--tabs-trigger svg {
-    width: rem(12px);
-    height: rem(7px);
-    fill: $ui-05;
-    transition: transform $transition--expansion $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tabs-trigger--open:focus,
-  .#{$prefix}--tabs-trigger--open:active {
-    @include focus-outline('reset');
-    transition: outline $transition--expansion $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tabs-trigger--open {
-    background: $ui-03;
-  }
-
-  .#{$prefix}--tabs-trigger--open svg {
-    @include rotate(-180deg, $transition--expansion, 50% 45%);
-  }
-
-  // There is only a difference in tab color when in mobile/dropdown view
-  .#{$prefix}--tabs--light.#{$prefix}--tabs-trigger {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--tabs-trigger-text {
-    text-decoration: none;
-    padding-top: 2px;
-    color: $text-01;
-    font-weight: 400;
-  }
-
-  .#{$prefix}--tabs-trigger-text:hover {
-    color: $text-01;
-  }
-
-  .#{$prefix}--tabs-trigger-text:focus {
-    outline: none;
-  }
-
-  .#{$prefix}--tabs__nav {
-    @include layer('overlay');
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    z-index: z('dropdown');
-    background: $ui-01;
-    @include breakpoint(bp--sm--major) {
-      @include typescale('epsilon');
-      flex-direction: row;
-      margin-right: $spacing-md;
-      margin-left: $spacing-md;
-      background: none;
-      box-shadow: none;
-      z-index: auto;
-    }
-    @include breakpoint(bp--lg--major) {
-      margin-left: 0;
-    }
-
-    @include max-breakpoint(bp--sm--major) {
-      transition: max-height $transition--expansion $carbon--standard-easing;
-      max-height: 600px;
-      width: 100%;
-      padding-top: $spacing-4xs;
-    }
-  }
-
-  .#{$prefix}--tabs__nav--hidden {
-    @include breakpoint(bp--sm--major) {
-      display: flex;
-    }
-    @include max-breakpoint(bp--sm--major) {
-      transition: max-height $transition--expansion $carbon--standard-easing;
-      overflow: hidden;
-      max-height: 0;
-    }
-  }
-
-  //-----------------------------
-  // Item
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item {
-    @include typescale('zeta');
-    background-color: $ui-01;
-    padding: 0;
-    cursor: pointer;
-    width: 100%;
-    @include breakpoint(bp--sm--major) {
-      background: transparent;
-      & + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(2px);
-      }
-    }
-    @include max-breakpoint(bp--sm--major) {
-      height: rem(40px);
-    }
-  }
-
-  //-----------------------------
-  // Item Hover
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected) {
-    @include breakpoint(bp--sm--major) {
-      background: transparent;
-    }
-  }
-
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    @include max-breakpoint(bp--sm--major) {
-      background-color: $hover-ui;
-      box-shadow: 0 -1px 0 $hover-ui;
-    }
-  }
-
-  //---------------------------------------------
-  // Item Disabled
-  //---------------------------------------------
-  .#{$prefix}--tabs__nav-item--disabled,
-  .#{$prefix}--tabs__nav-item--disabled:hover {
-    cursor: not-allowed;
-  }
-
-  //-----------------------------
-  // Item Selected
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) {
-    border: none;
-    @include breakpoint(bp--sm--major) {
-      .#{$prefix}--tabs__nav-link {
-        color: $text-01;
-        font-weight: 600;
-        border-bottom: 3px solid $interactive-01;
-      }
-
-      .#{$prefix}--tabs__nav-link:focus,
-      .#{$prefix}--tabs__nav-link:active {
-        color: $text-01;
-        font-weight: 600;
-      }
-    }
-    @include max-breakpoint(bp--sm--major) {
-      display: none;
-    }
-  }
-
-  //-----------------------------
-  // Link
-  //-----------------------------
-  a.#{$prefix}--tabs__nav-link {
-    display: inline-block;
-    color: $text-02;
-    text-decoration: none;
-    font-weight: 400;
-    padding: $spacing-xs $spacing-md;
-    width: rem(160px);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    @include breakpoint(bp--sm--major) {
-      border-bottom: $tab-underline-color;
-      padding: $spacing-xs $spacing-md;
-    }
-    @include max-breakpoint(bp--sm--major) {
-      height: rem(40px);
-      width: calc(100% - 32px);
-      margin: 0 $spacing-md;
-      padding: $spacing-sm 0;
-      line-height: rem(16px);
-      color: $text-02;
-      border-bottom: 1px solid $ui-03;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      &:hover {
-        color: $text-01;
-        border-bottom: 1px solid transparent;
-      }
-      &:focus,
-      &:active {
-        width: 100%;
-        margin: 0;
-        padding-left: 16px;
-        outline: 2px solid $interactive-01;
-        outline-offset: -2px;
-      }
-    }
-  }
-
-  //-----------------------------
-  //  Link Hover
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
-    .#{$prefix}--tabs__nav-link {
-    color: $text-01;
-    @include breakpoint(bp--sm--major) {
-      color: $text-01;
-      border-bottom: $tab-underline-color-hover;
-    }
-  }
-
-  //-----------------------------
-  //  Link Disabled
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
-    color: $tab-text-disabled;
-    border-bottom: $tab-underline-disabled;
-  }
-
-  .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
-    cursor: no-drop;
-    border-bottom: $tab-underline-disabled;
-  }
-
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus,
-  .#{$prefix}--tabs__nav-item--disabled a.#{$prefix}--tabs__nav-link:active {
-    outline: none;
-    border-bottom: $tab-underline-disabled;
-  }
-
-  //-----------------------------
-  //  Link Focus
-  //-----------------------------
-  .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
-    .#{$prefix}--tabs__nav-link:focus,
-  .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
-    a.#{$prefix}--tabs__nav-link:active {
-    color: $text-02;
-  }
-
-  .#{$prefix}--tabs__nav-link:focus,
-  .#{$prefix}--tabs__nav-link:active {
-    @include breakpoint(bp--sm--major) {
-      outline: 2px solid $interactive-01;
-      outline-offset: -2px;
-    }
-  }
-
-  //-----------------------------
-  // Skeleton state
-  //-----------------------------
-  .#{$prefix}--tabs.#{$prefix}--skeleton {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
-    @include skeleton;
-    width: rem(75px);
-    height: rem(12px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
-    @include skeleton;
-    width: rem(100px);
-  }
-
-  .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {
-    @include hidden;
-  }
-}
-
-@include exports('tabs') {
-  @if feature-flag-enabled('components-x') {
-    @include tabs--x;
-  } @else {
-    @include tabs;
-  }
-}
diff --git a/scss/components/tag/_mixins.scss b/scss/components/tag/_mixins.scss
deleted file mode 100644
index 1aab21d9b44f..000000000000
--- a/scss/components/tag/_mixins.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin tag-theme($bg-color, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-}
-
-@mixin tag-theme--x($bg-color, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-}
diff --git a/scss/components/tag/_tag.scss b/scss/components/tag/_tag.scss
deleted file mode 100644
index f31c39562929..000000000000
--- a/scss/components/tag/_tag.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import 'mixins';
-
-@mixin tags {
-  .#{$prefix}--tag {
-    @include font-family;
-    @include typescale('omega');
-    display: inline-flex;
-    align-items: center;
-    padding: 0 $spacing-xs;
-    height: 1.25rem;
-    margin: $spacing-3xs;
-    border-radius: rem(15px);
-
-    &:not(:first-child) {
-      margin-left: 0;
-    }
-  }
-
-  .#{$prefix}--tag--ibm {
-    @include tag-theme($color__blue-10, $color__blue-60);
-  }
-
-  .#{$prefix}--tag--beta {
-    @include tag-theme($color__gray-1, $color__navy-gray-4);
-  }
-
-  .#{$prefix}--tag--third-party {
-    @include tag-theme($color__teal-10, $color__teal-60);
-  }
-
-  .#{$prefix}--tag--local,
-  .#{$prefix}--tag--dedicated,
-  .#{$prefix}--tag--custom {
-    @include tag-theme($color__purple-10, $color__purple-60);
-  }
-
-  .#{$prefix}--tag--experimental {
-    @include tag-theme($color__orange-10, $color__orange-60);
-  }
-
-  .#{$prefix}--tag--community {
-    @include tag-theme($color__green-10, $color__green-60);
-  }
-
-  .#{$prefix}--tag--private {
-    @include tag-theme($color__yellow-10, $color__yellow-60);
-  }
-
-  // Skeleton state
-  .#{$prefix}--tag.#{$prefix}--skeleton {
-    @include tag-theme($color__gray-1, $color__navy-gray-4);
-    width: rem(60px);
-
-    &:after {
-      @include skeleton;
-      content: '';
-      height: rem(6px);
-      width: 100%;
-    }
-  }
-}
-
-@mixin tags--x {
-  .#{$prefix}--tag {
-    @include font-family;
-    @include typescale('omega');
-    display: inline-flex;
-    align-items: center;
-    padding: 0 $spacing-xs;
-    height: 1.5rem;
-    margin: $spacing-2xs;
-    border-radius: rem(15px);
-
-    &:not(:first-child) {
-      margin-left: 0;
-    }
-
-    &--basic,
-    &.#{$prefix}--skeleton {
-      @include tag-theme--x($bg-color: $ui-03, $text-color: $text-01);
-    }
-  }
-
-  .#{$prefix}--tag--red {
-    @include tag-theme--x($ibm-colors__red-20, $ibm-colors__red-70);
-  }
-
-  .#{$prefix}--tag--magenta {
-    @include tag-theme--x($ibm-colors__magenta-20, $ibm-colors__magenta-70);
-  }
-
-  .#{$prefix}--tag--purple {
-    @include tag-theme--x($ibm-colors__purple-20, $ibm-colors__purple-70);
-  }
-
-  .#{$prefix}--tag--blue {
-    @include tag-theme--x($ibm-colors__blue-20, $ibm-colors__blue-70);
-  }
-
-  .#{$prefix}--tag--cyan {
-    @include tag-theme--x($ibm-colors__cyan-20, $ibm-colors__cyan-70);
-  }
-
-  .#{$prefix}--tag--teal {
-    @include tag-theme--x($ibm-colors__teal-20, $ibm-colors__teal-70);
-  }
-
-  .#{$prefix}--tag--green {
-    @include tag-theme--x($ibm-colors__green-20, $ibm-colors__green-70);
-  }
-
-  .#{$prefix}--tag--cool-gray {
-    @include tag-theme--x($ibm-colors__cool-gray-20, $ibm-colors__cool-gray-100);
-  }
-
-  .#{$prefix}--tag--warm-gray {
-    @include tag-theme--x($ibm-colors__warm-gray-20, $ibm-colors__warm-gray-100);
-  }
-
-  .#{$prefix}--tag--disabled {
-    @include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-30);
-
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-
-  // Skeleton state
-  .#{$prefix}--tag.#{$prefix}--skeleton {
-    width: rem(60px);
-
-    &:after {
-      @include skeleton;
-      content: '';
-      height: rem(6px);
-      width: 100%;
-    }
-  }
-}
-
-@include exports('tags') {
-  @if feature-flag-enabled('components-x') {
-    @include tags--x;
-  } @else {
-    @include tags;
-  }
-}
diff --git a/scss/components/text-area/_text-area.scss b/scss/components/text-area/_text-area.scss
deleted file mode 100644
index 0f10bc6a6fd0..000000000000
--- a/scss/components/text-area/_text-area.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Text area
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-
-@mixin text-area {
-  .#{$prefix}--text-area {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    width: 100%;
-    min-width: 10rem;
-    padding: $spacing-md;
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 2;
-    resize: vertical;
-    border-bottom: 1px solid transparent;
-
-    & ~ .#{$prefix}--label {
-      order: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &::placeholder {
-      @include placeholder-colors;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:disabled:hover {
-      border: $input-border;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      box-shadow: 0 2px 0 0 $support-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &[data-invalid]:focus + .#{$prefix}--label {
-      color: $support-01;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--text-area--light {
-    background: $field-02;
-  }
-
-  // Skeleton State
-  #{$prefix}--text-area.#{$prefix}--skeleton {
-    @include skeleton;
-    height: rem(100px);
-
-    &::-webkit-input-placeholder {
-      color: transparent;
-    }
-  }
-}
-
-@mixin text-area--x {
-  .#{$prefix}--text-area {
-    @include reset;
-    @include type-style('body-long-01');
-    @include focus-outline('reset');
-
-    background-color: $field-01;
-    width: 100%;
-    min-width: 10rem;
-    min-height: rem(40px);
-    padding: rem(11px) $spacing-md;
-    color: $text-01;
-    order: 3;
-    resize: vertical;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    transition: $transition--base all;
-
-    & ~ .#{$prefix}--form__helper-text {
-      margin-top: 0;
-      order: 2;
-      font-style: italic;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 4;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  .#{$prefix}--text-area:focus,
-  .#{$prefix}--text-area:active {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--text-area::-webkit-input-placeholder {
-    @include placeholder-colors;
-    @include font-family;
-  }
-
-  .#{$prefix}--text-area--light {
-    background-color: $field-02;
-  }
-
-  //-----------------------------
-  // Disabled
-  //-----------------------------
-  .#{$prefix}--text-area:disabled {
-    cursor: not-allowed;
-    outline: none;
-    background-color: $disabled-background-color;
-    border-bottom: 1px solid transparent;
-  }
-
-  .#{$prefix}--text-area:disabled::-webkit-input-placeholder {
-    color: $disabled;
-  }
-
-  //-----------------------------
-  // Error
-  //-----------------------------
-  .#{$prefix}--text-area[data-invalid],
-  .#{$prefix}--text-area:invalid {
-    @include focus-outline('invalid');
-    box-shadow: none;
-  }
-
-  // Skeleton State
-  #{$prefix}--text-area.#{$prefix}--skeleton {
-    @include skeleton;
-    height: rem(100px);
-
-    &::-webkit-input-placeholder {
-      color: transparent;
-    }
-  }
-}
-
-@include exports('text-area') {
-  @if feature-flag-enabled('components-x') {
-    @include text-area--x;
-  } @else {
-    @include text-area;
-  }
-}
diff --git a/scss/components/text-input/_text-input.scss b/scss/components/text-input/_text-input.scss
deleted file mode 100644
index e9c8e4ae2560..000000000000
--- a/scss/components/text-input/_text-input.scss
+++ /dev/null
@@ -1,240 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Text
-//-----------------------------
-@import '../../globals/scss/vars';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-
-@mixin text-input {
-  .#{$prefix}--text-input {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    display: block;
-    width: 100%;
-    height: rem(40px);
-    min-width: rem(300px);
-    padding: 0 $spacing-md;
-    color: $text-01;
-    background-color: $field-01;
-    border: none;
-    box-shadow: 0 1px 0 0 $ui-05;
-    order: 2;
-    border-bottom: 1px solid transparent;
-
-    & ~ .#{$prefix}--label {
-      order: 1;
-    }
-
-    &::placeholder {
-      @include placeholder-colors;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      box-shadow: 0 2px 0 0 $support-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &[data-invalid]:focus + .#{$prefix}--label {
-      color: $support-01;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &:disabled:hover {
-      border: none;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $spacing-2xs;
-
-      &::before {
-        display: none;
-      }
-    }
-
-    &-wrapper svg[hidden] {
-      display: none;
-    }
-
-    &[data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility {
-      top: rem(-28px);
-      right: rem(12px);
-      display: flex;
-      justify-content: center;
-      align-self: flex-end;
-      align-items: center;
-      order: 3;
-      height: rem(16px);
-      width: rem(16px);
-      padding: 0;
-      margin-bottom: -1rem;
-      border: 0;
-      background: none;
-      cursor: pointer;
-      outline: inherit;
-
-      svg {
-        fill: $brand-01;
-
-        &:hover {
-          fill: $hover-primary;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--text-input--light {
-    background-color: $field-02;
-  }
-
-  // Skeleton State
-  .#{$prefix}--text-input.#{$prefix}--skeleton {
-    @include skeleton;
-    width: 100%;
-
-    &::-webkit-input-placeholder {
-      color: transparent;
-    }
-  }
-}
-
-// TODO update font styles to element tokens
-@mixin text-input--x {
-  .#{$prefix}--text-input {
-    @include reset;
-    @include type-style('body-short-01');
-    @include focus-outline('reset');
-    background-color: $field-01;
-    width: 100%;
-    height: rem(40px);
-    padding: 0 $spacing-xl 0 $spacing-md;
-    color: $text-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    transition: $transition--base all;
-
-    &:focus,
-    &:active {
-      @include focus-outline('outline');
-    }
-
-    &-wrapper svg[hidden] {
-      display: none;
-    }
-
-    &[type='text'] + .#{$prefix}--text-input--password__visibility,
-    &[type='password'] + .#{$prefix}--text-input--password__visibility {
-      top: rem(-28px);
-      right: rem(12px);
-      display: flex;
-      justify-content: center;
-      align-self: flex-end;
-      align-items: center;
-      height: rem(16px);
-      width: rem(16px);
-      padding: 0;
-      margin-bottom: -1rem;
-      border: 0;
-      background: none;
-      cursor: pointer;
-      outline: inherit;
-
-      svg {
-        fill: $brand-01;
-
-        &:hover {
-          fill: $hover-primary;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--text-input::-webkit-input-placeholder {
-    @include placeholder-colors;
-  }
-
-  //-----------------------------
-  // Disabled & Error icon spacing
-  //-----------------------------
-  .#{$prefix}--text-input:disabled,
-  .#{$prefix}--text-input[data-invalid],
-  .#{$prefix}--text-input:invalid,
-  .#{$prefix}--text-input[data-loading] {
-    padding-right: rem(40px);
-    background-repeat: no-repeat;
-    background-position: right 8px bottom 50%;
-  }
-
-  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility svg {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility,
-  .#{$prefix}--text-input[data-invalid] + .#{$prefix}--text-input--password__visibility,
-  .#{$prefix}--text-input:invalid + .#{$prefix}--text-input--password__visibility,
-  .#{$prefix}--text-input[data-loading] + .#{$prefix}--text-input--password__visibility {
-    right: rem(32px);
-  }
-
-  //-----------------------------
-  // Disabled
-  //-----------------------------
-  .#{$prefix}--text-input:disabled {
-    cursor: not-allowed;
-    // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE
-    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e");
-    outline: none;
-    background-color: $disabled-01;
-    border-bottom: 1px solid transparent;
-  }
-
-  .#{$prefix}--text-input:disabled::-webkit-input-placeholder {
-    color: $disabled-03;
-  }
-
-  //-----------------------------
-  // Error
-  //-----------------------------
-  .#{$prefix}--text-input[data-invalid],
-  .#{$prefix}--text-input:invalid {
-    @include focus-outline('invalid');
-    box-shadow: none;
-    // THIS SHOULD BE MOVED TO AN INLINE SVG IN THE HTML IN NEXT MAJOR RELEASE
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--warning--filled' fill='%23da1e28'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm-1 6h2v11h-2zm1 17a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25z'/%3e%3c/svg%3e ");
-  }
-}
-
-@include exports('text-input') {
-  @if feature-flag-enabled('components-x') {
-    @include text-input--x;
-  } @else {
-    @include text-input;
-  }
-}
diff --git a/scss/components/tile/_tile.scss b/scss/components/tile/_tile.scss
deleted file mode 100644
index 5adf4df3752c..000000000000
--- a/scss/components/tile/_tile.scss
+++ /dev/null
@@ -1,330 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Tiles
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-
-@mixin tile {
-  .#{$prefix}--tile {
-    @include layer('raised');
-    display: block;
-    min-width: 8rem;
-    min-height: 4rem;
-    background-color: $ui-01;
-    border: 1px solid $ui-03;
-    position: relative;
-    padding: $spacing-md;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--selectable,
-  .#{$prefix}--tile--expandable {
-    transition: $transition--base $carbon--standard-easing;
-    cursor: pointer;
-
-    &:hover {
-      border: 1px solid $ui-04;
-    }
-
-    &:hover,
-    &:focus {
-      .#{$prefix}--tile__checkmark {
-        opacity: 1;
-      }
-
-      .#{$prefix}--tile__chevron svg {
-        fill: $brand-01;
-      }
-    }
-  }
-
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--expandable {
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--tile--selectable {
-    padding-right: $spacing-3xl;
-  }
-
-  .#{$prefix}--tile--selectable:focus {
-    outline: none;
-    border: 1px solid $brand-01;
-  }
-
-  .#{$prefix}--tile--is-clicked {
-    @include layer('flat');
-    border: 1px solid $ui-04;
-  }
-
-  .#{$prefix}--tile__checkmark,
-  .#{$prefix}--tile__chevron {
-    position: absolute;
-    transition: $transition--base $carbon--standard-easing;
-    border: none;
-    background: transparent;
-
-    &:focus {
-      @include focus-outline;
-    }
-  }
-
-  .#{$prefix}--tile__checkmark {
-    height: 1rem;
-    top: 1rem;
-    right: 1rem;
-    opacity: 0;
-
-    svg {
-      border-radius: 50%;
-      background-color: rgba($ui-01, 0.25);
-      fill: rgba($brand-01, 0.25);
-    }
-  }
-
-  .#{$prefix}--tile__chevron {
-    position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
-    height: 1rem;
-
-    svg {
-      transform-origin: center;
-      transition: $transition--base $carbon--standard-easing;
-      fill: $ui-05;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .#{$prefix}--tile--expandable {
-    overflow: hidden;
-    cursor: default;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tile-content__above-the-fold {
-    display: block;
-  }
-
-  .#{$prefix}--tile-content__below-the-fold {
-    display: block;
-    opacity: 0;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tile--is-expanded {
-    overflow: visible;
-    transition: $transition--base $carbon--standard-easing;
-
-    .#{$prefix}--tile__chevron svg {
-      transform: rotate(-180deg);
-    }
-
-    .#{$prefix}--tile-content__below-the-fold {
-      opacity: 1;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--tile--is-selected,
-  .#{$prefix}--tile--is-selected:hover,
-  .#{$prefix}--tile--is-selected:focus {
-    border: 1px solid $brand-01;
-    outline: none;
-  }
-
-  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
-    opacity: 1;
-
-    svg {
-      fill: $brand-01;
-    }
-  }
-
-  .#{$prefix}--tile-input:checked {
-    & + .#{$prefix}--tile__checkmark {
-      opacity: 1;
-    }
-
-    & + .#{$prefix}--tile__checkmark svg {
-      fill: $brand-01;
-      background-color: $ui-01;
-    }
-  }
-
-  .#{$prefix}--tile-content {
-    width: 100%;
-    height: 100%;
-  }
-
-  .#{$prefix}--tile-input {
-    display: none;
-  }
-}
-
-@mixin tile--x {
-  .#{$prefix}--tile {
-    display: block;
-    min-width: 8rem;
-    min-height: 4rem;
-    background-color: $ui-01;
-    position: relative;
-    padding: $spacing-md;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--selectable,
-  .#{$prefix}--tile--expandable {
-    transition: $transition--base $carbon--standard-easing;
-    cursor: pointer;
-
-    &:hover {
-      background: $hover-ui;
-    }
-
-    &:hover,
-    &:focus {
-      .#{$prefix}--tile__checkmark {
-        opacity: 1;
-      }
-    }
-  }
-
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--expandable {
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--tile--selectable {
-    padding-right: $spacing-3xl;
-  }
-
-  .#{$prefix}--tile__checkmark,
-  .#{$prefix}--tile__chevron {
-    position: absolute;
-    transition: $transition--base $carbon--standard-easing;
-    border: none;
-    background: transparent;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--tile__checkmark {
-    height: 1rem;
-    top: 1rem;
-    right: 1rem;
-    opacity: 0;
-
-    svg {
-      border-radius: 50%;
-      fill: $ui-04;
-    }
-  }
-
-  .#{$prefix}--tile__chevron {
-    position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
-    height: 1rem;
-
-    svg {
-      transform-origin: center;
-      transition: $transition--base $carbon--standard-easing;
-      fill: $ui-05;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .#{$prefix}--tile--expandable {
-    overflow: hidden;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tile-content__above-the-fold {
-    display: block;
-  }
-
-  .#{$prefix}--tile-content__below-the-fold {
-    display: block;
-    opacity: 0;
-    transition: $transition--base $carbon--standard-easing;
-  }
-
-  .#{$prefix}--tile--is-expanded {
-    overflow: visible;
-    transition: $transition--base $carbon--standard-easing;
-
-    .#{$prefix}--tile__chevron svg {
-      transform: rotate(-180deg);
-    }
-
-    .#{$prefix}--tile-content__below-the-fold {
-      opacity: 1;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--tile--is-selected {
-    outline: 1px solid $ui-04;
-    outline-offset: -1px;
-  }
-
-  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
-    opacity: 1;
-  }
-
-  .#{$prefix}--tile-input:checked + .#{$prefix}--tile > .#{$prefix}--tile__checkmark svg {
-    fill: $ui-05;
-  }
-
-  .#{$prefix}--tile-content {
-    width: 100%;
-    height: 100%;
-  }
-
-  .#{$prefix}--tile-input {
-    @include hidden;
-  }
-}
-
-@include exports('tile') {
-  @if feature-flag-enabled('components-x') {
-    @include tile--x;
-  } @else {
-    @include tile;
-  }
-}
diff --git a/scss/components/time-picker/_time-picker.scss b/scss/components/time-picker/_time-picker.scss
deleted file mode 100644
index 6a07363d0d91..000000000000
--- a/scss/components/time-picker/_time-picker.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Time Picker
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/import-once';
-
-@mixin time-picker {
-  .#{$prefix}--time-picker {
-    display: flex;
-    align-items: flex-end;
-
-    .#{$prefix}--label {
-      order: 1;
-    }
-  }
-
-  .#{$prefix}--time-picker__input {
-    display: flex;
-    flex-direction: column;
-    border-bottom: 1px solid transparent;
-  }
-
-  .#{$prefix}--time-picker .#{$prefix}--select-input {
-    padding-right: $spacing-xl;
-  }
-
-  .#{$prefix}--time-picker .#{$prefix}--select__arrow {
-    right: 0.875rem;
-  }
-
-  .#{$prefix}--time-picker__input-field {
-    @include reset;
-    @include font-family;
-    @include typescale('zeta');
-    display: flex;
-    align-items: center;
-    background-color: $field-01;
-    border: none;
-    width: 4.875rem;
-    color: $text-01;
-    height: rem(40px);
-    padding: 0 $spacing-md;
-    order: 2;
-    box-shadow: 0 1px 0 0 $ui-05;
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 2px 0 0 $brand-01;
-    }
-
-    &:focus ~ .#{$prefix}--label {
-      color: $brand-01;
-    }
-
-    &::placeholder {
-      color: $text-02;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      box-shadow: 0 2px 0 0 $support-01;
-    }
-
-    &[data-invalid]:focus ~ .#{$prefix}--label {
-      color: $support-01;
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: 0;
-      max-height: 0;
-
-      &::before {
-        display: none;
-      }
-    }
-
-    &[data-invalid] ~ .#{$prefix}--form-requirement {
-      overflow: visible;
-      max-height: 0;
-      margin-top: $spacing-2xs;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .#{$prefix}--time-picker--light .#{$prefix}--time-picker__input-field {
-    background: $field-02;
-  }
-}
-
-@mixin time-picker--x {
-  .#{$prefix}--time-picker {
-    display: flex;
-    align-items: flex-end;
-
-    .#{$prefix}--label {
-      @include typescale('omega');
-      order: 1;
-    }
-  }
-
-  .#{$prefix}--time-picker__select:not(:last-of-type) {
-    margin: 0 $spacing-3xs;
-  }
-
-  .#{$prefix}--time-picker__input {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .#{$prefix}--time-picker .#{$prefix}--select-input {
-    padding-right: rem(42px); // 2rem + SVG width
-    min-width: auto;
-    width: auto;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--time-picker__input-field {
-    @include reset;
-    @include typescale('zeta');
-    @include focus-outline('reset');
-    font-family: $font-family-mono;
-    display: flex;
-    align-items: center;
-    background-color: $field-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
-    width: 4.875rem;
-    color: $text-01;
-    height: rem(40px);
-    padding: 0 $spacing-md;
-    order: 2;
-    transition: outline $transition--base;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &::placeholder {
-      color: $text-03;
-    }
-
-    &[data-invalid],
-    &[data-invalid]:focus {
-      @include focus-outline('invalid');
-    }
-
-    & ~ .#{$prefix}--form-requirement {
-      order: 3;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: 0;
-      max-height: 0;
-
-      &::before {
-        display: none;
-      }
-    }
-
-    &[data-invalid] ~ .#{$prefix}--form-requirement {
-      overflow: visible;
-      max-height: 0;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .#{$prefix}--time-picker--light {
-    .#{$prefix}--time-picker__input-field,
-    .#{$prefix}--select-input {
-      background: $field-02;
-    }
-  }
-}
-
-@include exports('time-picker') {
-  @if feature-flag-enabled('components-x') {
-    @include time-picker--x;
-  } @else {
-    @include time-picker;
-  }
-}
diff --git a/scss/components/toggle/_toggle.scss b/scss/components/toggle/_toggle.scss
deleted file mode 100644
index c573f59fb8b3..000000000000
--- a/scss/components/toggle/_toggle.scss
+++ /dev/null
@@ -1,415 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Toggle
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-
-@mixin toggle {
-  .#{$prefix}--toggle {
-    @include hidden;
-  }
-
-  .#{$prefix}--toggle__label {
-    @include font-family;
-    position: relative;
-    display: flex;
-    align-items: center;
-    transition: $transition--base $carbon--standard-easing;
-    cursor: pointer;
-    margin: $spacing-md 0;
-    color: $text-01;
-  }
-
-  .#{$prefix}--toggle__appearance {
-    position: relative;
-    width: rem(48px);
-
-    &:before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: 100%;
-      height: rem(4px);
-      top: -2px;
-      background-color: $ui-04;
-      transition: $transition--base $carbon--standard-easing;
-      cursor: pointer;
-    }
-
-    &:after {
-      box-sizing: border-box;
-      position: absolute;
-      display: block;
-      border: 2px solid $ui-04;
-      cursor: pointer;
-      top: -12px;
-      width: rem(24px);
-      height: rem(24px);
-      background-color: $ui-01;
-      border-radius: 50%;
-      content: '';
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label {
-    width: rem(32px);
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    width: rem(32px);
-    height: rem(16px);
-
-    &:before {
-      box-sizing: border-box;
-      height: rem(16px);
-      width: rem(32px);
-      border-radius: 0.9375rem;
-      background-color: transparent;
-      border: 2px solid $ui-04;
-      top: 0;
-    }
-
-    &:after {
-      width: rem(10px);
-      height: rem(10px);
-      background-color: $ui-04;
-      border: none;
-      top: 3px;
-      left: 3px;
-    }
-  }
-
-  .#{$prefix}--toggle__check {
-    fill: $ui-04;
-    position: absolute;
-    left: 6px;
-    top: 6px;
-    z-index: 1;
-    transition: $transition--base $carbon--standard-easing;
-    transform: scale(0.2);
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
-    fill: $brand-01;
-    transform: scale(1) translateX(16px);
-  }
-
-  .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle__text--right {
-    @include typescale('zeta');
-    position: relative;
-    color: $text-01;
-  }
-
-  .#{$prefix}--toggle__text--left {
-    margin-right: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle__text--right {
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $brand-01;
-    }
-
-    &:after {
-      transform: translateX(24px);
-      background-color: $brand-01;
-      box-shadow: none;
-      border-color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $brand-01;
-      border-color: $brand-01;
-    }
-
-    &:after {
-      background-color: $ui-01;
-      border-color: $ui-01;
-      margin-left: 0px;
-      transform: translateX(17px);
-    }
-  }
-
-  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      outline: 1px solid transparent;
-    }
-
-    .#{$prefix}--toggle__appearance:after {
-      @include focus-outline('blurred');
-    }
-  }
-
-  .#{$prefix}--toggle--small:focus + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      @include focus-outline('blurred');
-    }
-
-    .#{$prefix}--toggle__appearance:after {
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before,
-    &:after {
-      cursor: not-allowed;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  // Hide labels for small toggle for default theme
-  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right {
-    @include hidden;
-  }
-
-  // Skeleton state
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label {
-    cursor: default;
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance {
-    &:before,
-    &:after {
-      background-color: $brand-01;
-      border-color: $brand-01;
-      cursor: default;
-    }
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right {
-    @include skeleton;
-    width: rem(20px);
-    height: rem(12px);
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance {
-    &:before {
-      background: transparent;
-      border-color: $ui-05;
-    }
-
-    &:after {
-      background-color: $ui-05;
-      border: none;
-    }
-  }
-}
-
-@mixin toggle--x {
-  .#{$prefix}--toggle {
-    @include hidden;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--toggle__label {
-    @include type-style('label-01');
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin: $spacing-xs 0;
-  }
-
-  .#{$prefix}--toggle__appearance {
-    position: relative;
-    width: rem(48px);
-    height: rem(24px);
-
-    // Toggle background oval
-    &:before {
-      position: absolute;
-      display: block;
-      content: '';
-      background-color: $ui-04;
-      cursor: pointer;
-      box-sizing: border-box;
-      height: rem(24px);
-      width: rem(48px);
-      border-radius: rem(15px);
-      top: 0;
-    }
-
-    // Toggle circle
-    &:after {
-      box-sizing: border-box;
-      position: absolute;
-      display: block;
-      cursor: pointer;
-      left: 3px;
-      top: 3px;
-      width: rem(18px);
-      height: rem(18px);
-      background-color: $ui-03;
-      border-radius: 50%;
-      content: '';
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    width: rem(32px);
-    height: rem(16px);
-
-    &:before {
-      box-sizing: border-box;
-      height: rem(16px);
-      width: rem(32px);
-      border-radius: 0.9375rem;
-      top: 0;
-    }
-
-    &:after {
-      width: rem(10px);
-      height: rem(10px);
-      top: 3px;
-      left: 3px;
-    }
-  }
-
-  .#{$prefix}--toggle__check {
-    fill: $ui-03;
-    position: absolute;
-    left: 6px;
-    top: 6px;
-    z-index: 1;
-    transition: $transition--base $carbon--standard-easing;
-    transform: scale(0.2);
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
-    fill: $support-02;
-    transform: scale(1) translateX(16px);
-  }
-
-  .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle__text--right {
-    @include typescale('zeta');
-    position: relative;
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle__text--left {
-    position: absolute;
-    left: rem(48px);
-  }
-
-  .#{$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 {
-    visibility: hidden;
-  }
-
-  .#{$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 {
-    &:before {
-      background-color: $support-02;
-    }
-
-    &:after {
-      background-color: $icon-03;
-      transform: translateX(24px);
-    }
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:after {
-      margin-left: 0px;
-      transform: translateX(17px);
-    }
-  }
-
-  //----------------------------------------------
-  // Focus
-  // ---------------------------------------------
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      transition: box-shadow $transition--base;
-      box-shadow: 0 0 0 2px transparent;
-    }
-  }
-  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle:active + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      box-shadow: 0 0 0 2px $focus;
-    }
-  }
-
-  //----------------------------------------------
-  // Disabled
-  // ---------------------------------------------
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $disabled-01;
-    }
-
-    &:after {
-      background-color: $disabled-02;
-    }
-
-    &:before,
-    &:after {
-      cursor: not-allowed;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$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 {
-    box-shadow: none;
-  }
-}
-
-@include exports('toggle') {
-  @if feature-flag-enabled('components-x') {
-    @include toggle--x;
-  } @else {
-    @include toggle;
-  }
-}
diff --git a/scss/components/toolbar/_toolbar.scss b/scss/components/toolbar/_toolbar.scss
deleted file mode 100644
index 3fb1b9148648..000000000000
--- a/scss/components/toolbar/_toolbar.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$css--helpers: true;
-
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/css--helpers';
-@import '../button/button';
-@import '../checkbox/checkbox';
-@import '../radio-button/radio-button';
-@import '../form/form';
-@import '../overflow-menu/overflow-menu';
-@import '../search/search';
-
-@mixin toolbar {
-  .#{$prefix}--toolbar {
-    @include font-family;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    margin: 1rem 0;
-
-    > div {
-      margin: 0 rem(4px);
-    }
-
-    .#{$prefix}--search-input {
-      height: rem(32px);
-      background-color: transparent;
-      outline: none;
-    }
-
-    .#{$prefix}--search-close {
-      display: none;
-    }
-
-    .#{$prefix}--overflow-menu__icon {
-      fill: $text-02;
-      transition: fill 50ms $carbon--standard-easing;
-    }
-
-    .#{$prefix}--search-magnifier {
-      fill: $text-02;
-      transform: scale(1.15);
-      transition: all 175ms $carbon--standard-easing;
-      top: rem(8px);
-      left: rem(6px);
-      cursor: pointer;
-    }
-
-    fieldset {
-      border: 0;
-      padding: 0;
-    }
-
-    .#{$prefix}--toolbar-search--active {
-      width: rem(250px);
-
-      .#{$prefix}--search-magnifier {
-        transform: scale(1);
-        top: rem(9px);
-      }
-
-      .#{$prefix}--search-input {
-        background-color: $field-02;
-      }
-
-      .#{$prefix}--search-close {
-        display: block;
-      }
-    }
-
-    .#{$prefix}--checkbox-label {
-      margin-bottom: 0;
-    }
-
-    .#{$prefix}--overflow-menu--open > .#{$prefix}--overflow-menu__icon {
-      fill: $brand-01;
-    }
-  }
-
-  .#{$prefix}--toolbar-search {
-    width: 1.8rem;
-    transition: all 175ms $carbon--standard-easing;
-  }
-
-  .#{$prefix}--toolbar-search__btn {
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: transparent;
-    border: 0;
-    height: rem(32px);
-    width: rem(32px);
-
-    &:focus {
-      @include focus-outline;
-    }
-  }
-
-  .#{$prefix}--toolbar-filter-icon {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .#{$prefix}--toolbar-menu__title {
-    @include typescale('omega');
-    @include letter-spacing;
-    font-weight: 600;
-    padding: 0.5rem 1.25rem;
-  }
-
-  .#{$prefix}--toolbar-menu__option {
-    padding: 0.5rem 1.25rem;
-  }
-
-  .#{$prefix}--toolbar-menu__divider {
-    width: 100%;
-    border: 0;
-    border-top: 1px solid $ui-03;
-  }
-
-  .#{$prefix}--radio-button-group {
-    border: none;
-  }
-}
-
-@mixin toolbar--x {
-  @include toolbar;
-  .#{$prefix}--toolbar-search:not(.#{$prefix}--toolbar-search--active) .#{$prefix}--search-input {
-    border-bottom: none;
-  }
-}
-
-@include exports('toolbar') {
-  @if feature-flag-enabled('components-x') {
-    @include toolbar--x;
-  } @else {
-    @include toolbar;
-  }
-}
diff --git a/scss/components/tooltip/_tooltip.scss b/scss/components/tooltip/_tooltip.scss
deleted file mode 100644
index a9aa9293d79d..000000000000
--- a/scss/components/tooltip/_tooltip.scss
+++ /dev/null
@@ -1,696 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-
-@mixin tooltip {
-  .#{$prefix}--tooltip--icon {
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--tooltip__label {
-    @include font-family;
-    @include typescale('epsilon');
-    display: inline-flex;
-    align-items: center;
-    color: $text-01;
-    font-weight: normal;
-    margin-bottom: $spacing-xs;
-
-    .#{$prefix}--tooltip__trigger {
-      margin-left: $spacing-xs;
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger {
-    @include button-reset($width: false);
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: 1rem;
-
-    &:focus {
-      @include focus-outline('border');
-      fill: $hover-primary;
-    }
-
-    path,
-    polygon,
-    circle {
-      fill: $brand-01;
-    }
-
-    &:hover,
-    &:focus {
-      color: $text-01;
-      path,
-      polygon,
-      circle {
-        fill: $hover-primary;
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip__label--bold {
-    font-weight: 600;
-  }
-
-  .#{$prefix}--tooltip {
-    @include layer('overlay');
-    @include reset;
-    position: absolute;
-    display: none;
-    max-width: rem(240px);
-    background: $ui-01;
-    margin-top: $spacing-2xs;
-    padding: $spacing-md;
-    border: 1px solid $ui-03;
-    border-radius: rem(4px);
-    z-index: z('floating');
-    word-wrap: break-word;
-    color: $text-01;
-
-    p {
-      @include font-family;
-      @include typescale('zeta');
-    }
-
-    .#{$prefix}--tooltip__footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-      margin-top: 1rem;
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      background: $ui-01;
-      left: 0;
-      top: rem(-5px);
-      right: 0;
-      transform: rotate(-135deg);
-      width: 0.6rem;
-      height: 0.6rem;
-      border-right: 1px solid $ui-03;
-      border-bottom: 1px solid $ui-03;
-      margin: 0 auto;
-      content: '';
-    }
-
-    &[data-floating-menu-direction='left'] {
-      .#{$prefix}--tooltip__caret {
-        left: auto;
-        top: 50%;
-        right: rem(-5px);
-        transform: rotate(-45deg) translate(50%, -50%);
-      }
-    }
-
-    &[data-floating-menu-direction='top'] {
-      .#{$prefix}--tooltip__caret {
-        top: auto;
-        bottom: rem(-6px);
-        transform: rotate(45deg);
-      }
-    }
-
-    &[data-floating-menu-direction='right'] {
-      .#{$prefix}--tooltip__caret {
-        left: rem(-5px);
-        top: 50%;
-        right: auto;
-        transform: rotate(135deg) translate(-50%, 50%);
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip--shown {
-    display: block;
-  }
-
-  // Tooltip Definition
-  // Definition CSS only tooltip
-  .#{$prefix}--tooltip--definition {
-    @include font-family;
-    @include reset;
-    @include typescale('delta');
-
-    position: relative;
-
-    .#{$prefix}--tooltip__trigger {
-      display: inline-flex;
-      position: relative;
-      border-bottom: 2px dotted $ui-04;
-
-      &:hover {
-        border-bottom: 2px dotted $hover-primary;
-        cursor: pointer;
-
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-
-      &:focus {
-        @include focus-outline('border');
-
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip--definition__bottom,
-  .#{$prefix}--tooltip--definition__top {
-    @include layer('overlay');
-    position: absolute;
-    z-index: 1;
-    display: none;
-    background: $inverse-02;
-    max-width: rem(176px);
-    margin-top: $spacing-sm;
-    padding: $spacing-xs;
-    border-radius: rem(4px);
-    pointer-events: none;
-    cursor: pointer;
-
-    p {
-      @include font-family;
-      @include typescale('omega');
-      color: $inverse-01;
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      right: 0;
-      left: 0;
-      width: 0.6rem;
-      height: 0.6rem;
-      background: $inverse-02;
-      margin-left: $spacing-lg;
-    }
-  }
-
-  // Tooltip Definition caret - bottom position
-  .#{$prefix}--tooltip--definition__bottom {
-    .#{$prefix}--tooltip__caret {
-      top: -0.2rem;
-      transform: rotate(-135deg);
-    }
-  }
-
-  // Tooltip Definition caret - top position
-  .#{$prefix}--tooltip--definition__top {
-    transform: translateY(-100%);
-    margin-top: rem(-32px);
-
-    .#{$prefix}--tooltip__caret {
-      bottom: -0.2rem;
-      transform: rotate(45deg);
-    }
-  }
-
-  // Tooltip Icon
-  // Icon CSS only tooltip
-  .#{$prefix}--tooltip--icon__top,
-  .#{$prefix}--tooltip--icon__bottom {
-    @include font-family;
-    @include reset;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    overflow: visible;
-
-    path {
-      fill: $brand-01;
-    }
-
-    // Tooltip - renders as a combo of :before and :after elements
-    &:before,
-    &:after {
-      @include font-family;
-      position: absolute;
-      display: none;
-      background-color: $inverse-02;
-    }
-
-    &:before {
-      right: 0;
-      left: 0;
-      width: 0.6rem;
-      height: 0.6rem;
-      margin: 0 auto;
-      content: '';
-      margin-top: 1px;
-      margin-left: 50%;
-    }
-
-    &:after {
-      @include typescale('omega');
-      @include layer('overlay');
-      max-width: rem(176px);
-      margin-left: 50%;
-      padding: $spacing-2xs;
-      border-radius: 4px;
-      color: $inverse-01;
-      font-weight: 400;
-      content: attr(aria-label);
-      transform: translateX(-50%);
-      white-space: nowrap;
-      pointer-events: none;
-      margin-left: 50%;
-    }
-
-    &:hover,
-    &:focus {
-      path {
-        fill: $hover-primary;
-      }
-
-      &:before,
-      &:after {
-        position: absolute;
-        display: block;
-      }
-    }
-
-    &:focus {
-      outline: 1px solid transparent;
-
-      svg {
-        @include focus-outline('border');
-      }
-    }
-  }
-
-  // Tooltip Icon caret - top position
-  .#{$prefix}--tooltip--icon__top {
-    &:before {
-      top: 0;
-      transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);
-    }
-
-    &:after {
-      top: 0;
-      transform: translate(-50%, calc(-100% - 10px));
-    }
-  }
-
-  // Tooltip Icon caret - bottom position
-  .#{$prefix}--tooltip--icon__bottom {
-    &:before {
-      bottom: 0;
-      transform: translate(-50%, calc(100% + 10px)) rotate(135deg);
-    }
-
-    &:after {
-      bottom: 0;
-      transform: translate(-50%, calc(100% + 10px));
-    }
-  }
-
-  // Tooltip position - icon only
-  .#{$prefix}--tooltip--icon {
-    .#{$prefix}--tooltip__trigger {
-      svg {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-@mixin tooltip--x {
-  .#{$prefix}--tooltip--icon {
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--tooltip__label {
-    @include type-style('body-short-01');
-
-    display: inline-flex;
-    align-items: center;
-    color: $text-01;
-    margin-bottom: $spacing-xs;
-
-    .#{$prefix}--tooltip__trigger {
-      margin-left: $spacing-xs;
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger {
-    @include button-reset($width: false);
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: 1rem;
-
-    &:focus {
-      @include focus-outline('border');
-      fill: $hover-primary;
-    }
-
-    path,
-    polygon,
-    circle {
-      fill: $ui-05;
-    }
-
-    &:hover,
-    &:focus {
-      color: $text-01;
-      path,
-      polygon,
-      circle {
-        fill: $ui-05;
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip__label--bold {
-    font-weight: 600;
-  }
-
-  .#{$prefix}--tooltip {
-    @include layer('overlay');
-    @include reset;
-    position: absolute;
-    display: none;
-    min-width: rem(208px);
-    max-width: rem(288px);
-    // Need to add new UI color -- IBM Color Gray 80
-    background: $tooltip-background-color;
-    margin-top: $spacing-2xs;
-    padding: 1rem;
-    border-radius: rem(2px);
-    z-index: z('floating');
-    word-wrap: break-word;
-    // Need to change inverse color to Gray--10 across the board?
-    color: $ui-01;
-
-    p {
-      @include font-family;
-      @include typescale('zeta');
-    }
-
-    // Need to change HTML to use small button, not override regular button styles
-    button {
-      height: auto;
-      padding: $button-padding-sm;
-      padding-right: rem(32px);
-    }
-
-    .#{$prefix}--link {
-      // Need to add new link / UI color -- IBM Color Blue 40
-      color: $link-inverse-color;
-      font-size: rem(14px);
-
-      &:active {
-        color: $ui-01;
-      }
-
-      &:vistited {
-        color: $link-inverse-color;
-      }
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      // Need to add new UI color -- IBM Color Gray 80
-      background: $tooltip-background-color;
-      left: 0;
-      top: rem(-4px);
-      right: 0;
-      transform: rotate(-135deg);
-      width: 0.6rem;
-      height: 0.6rem;
-      margin: 0 auto;
-      content: '';
-    }
-
-    .#{$prefix}--tooltip__footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 1rem;
-    }
-
-    &[data-floating-menu-direction='left'] {
-      .#{$prefix}--tooltip__caret {
-        left: auto;
-        top: 50%;
-        right: rem(-5px);
-        transform: rotate(-45deg) translate(50%, -50%);
-      }
-    }
-
-    &[data-floating-menu-direction='top'] {
-      .#{$prefix}--tooltip__caret {
-        top: auto;
-        bottom: rem(-6px);
-        transform: rotate(45deg);
-      }
-    }
-
-    &[data-floating-menu-direction='right'] {
-      .#{$prefix}--tooltip__caret {
-        left: rem(-5px);
-        top: 50%;
-        right: auto;
-        transform: rotate(135deg) translate(-50%, 50%);
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip--shown {
-    display: block;
-  }
-
-  // Tooltip Definition
-  // Definition CSS only tooltip
-  .#{$prefix}--tooltip--definition {
-    @include font-family;
-    @include reset;
-    position: relative;
-
-    .#{$prefix}--tooltip__trigger {
-      @include typescale('zeta');
-      display: inline-flex;
-      position: relative;
-      border-bottom: 1px dotted $interactive-01;
-      color: $text-01;
-
-      &:hover {
-        cursor: pointer;
-
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-
-      &:focus {
-        @include focus-outline('border');
-
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip--definition__bottom,
-  .#{$prefix}--tooltip--definition__top {
-    @include layer('overlay');
-    position: absolute;
-    z-index: 1;
-    display: none;
-    // Need to add new UI color -- IBM Color Gray 80
-    background: $tooltip-background-color;
-    width: 100vw;
-    min-width: rem(208px);
-    max-width: rem(288px);
-    margin-top: $spacing-sm;
-    padding: $spacing-xs;
-    border-radius: rem(2px);
-    pointer-events: none;
-    cursor: pointer;
-
-    p {
-      @include font-family;
-      @include typescale('zeta');
-      // Need to change inverse color to Gray--10 across the board?
-      color: $ui-01;
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      right: 0;
-      left: 0;
-      width: 0.6rem;
-      height: 0.6rem;
-      // Need to add new UI color -- IBM Color Gray 80
-      background: $tooltip-background-color;
-      margin-left: $spacing-md;
-    }
-  }
-
-  // Tooltip Definition caret - bottom position
-  .#{$prefix}--tooltip--definition__bottom {
-    padding: 1rem 1rem 1.5rem;
-    min-height: rem(76px);
-
-    .#{$prefix}--tooltip__caret {
-      top: -0.2rem;
-      transform: rotate(-135deg);
-    }
-  }
-
-  // Tooltip Definition caret - top position
-  .#{$prefix}--tooltip--definition__top {
-    transform: translateY(-100%);
-    margin-top: rem(-32px);
-
-    .#{$prefix}--tooltip__caret {
-      bottom: -0.2rem;
-      transform: rotate(45deg);
-    }
-  }
-
-  // Tooltip Icon
-  // Icon CSS only tooltip
-  .#{$prefix}--tooltip--icon__top,
-  .#{$prefix}--tooltip--icon__bottom {
-    @include font-family;
-    @include reset;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    overflow: visible;
-
-    path {
-      fill: $ui-05;
-    }
-
-    // Tooltip - renders as a combo of :before and :after elements
-    &:before,
-    &:after {
-      @include font-family;
-      position: absolute;
-      display: none;
-      // Need to add new UI color -- IBM Color Gray 80
-      background-color: $tooltip-background-color;
-    }
-
-    &:before {
-      right: 0;
-      left: 0;
-      width: 0.6rem;
-      height: 0.6rem;
-      margin: 0 auto;
-      content: '';
-      margin-top: 1px;
-      margin-left: 50%;
-    }
-
-    &:after {
-      @include typescale('zeta');
-      @include layer('overlay');
-      min-width: rem(32px);
-      max-width: rem(208px);
-      height: rem(32px);
-      margin-left: 50%;
-      padding: 0 1rem;
-      border-radius: rem(2px);
-      // Need to change inverse color to Gray--10 across the board?
-      color: $ui-01;
-      font-weight: 400;
-      content: attr(aria-label);
-      transform: translateX(-50%);
-      white-space: nowrap;
-      pointer-events: none;
-      margin-left: 50%;
-    }
-
-    &:hover,
-    &:focus {
-      path {
-        fill: $ui-05;
-      }
-
-      &:before,
-      &:after {
-        position: absolute;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &:focus {
-      outline: 1px solid transparent;
-
-      svg {
-        @include focus-outline('border');
-      }
-    }
-  }
-
-  // Tooltip Icon caret - top position
-  .#{$prefix}--tooltip--icon__top {
-    &:before {
-      top: 1px;
-      transform: translate(-50%, calc(-100% - 12px)) rotate(45deg);
-    }
-
-    &:after {
-      top: 0;
-      transform: translate(-50%, calc(-100% - 12px));
-    }
-  }
-
-  // Tooltip Icon caret - bottom position
-  .#{$prefix}--tooltip--icon__bottom {
-    &:before {
-      bottom: 0;
-      transform: translate(-50%, calc(100% + 10px)) rotate(135deg);
-    }
-
-    &:after {
-      bottom: 0;
-      transform: translate(-50%, calc(100% + 10px));
-    }
-  }
-
-  // Tooltip position - icon only
-  .#{$prefix}--tooltip--icon {
-    .#{$prefix}--tooltip__trigger {
-      svg {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-@include exports('tooltip') {
-  @if feature-flag-enabled('components-x') {
-    @include tooltip--x;
-  } @else {
-    @include tooltip;
-  }
-}
diff --git a/scss/components/ui-shell/_content.scss b/scss/components/ui-shell/_content.scss
deleted file mode 100644
index 6f4ee798af67..000000000000
--- a/scss/components/ui-shell/_content.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vars';
-@import 'functions';
-
-@mixin carbon-content {
-  .#{$prefix}--content {
-    transform: translate3d(0, 0, 0);
-    will-change: margin-left;
-  }
-
-  .#{$prefix}--header ~ .#{$prefix}--content {
-    margin-top: mini-units(6);
-  }
-
-  .#{$prefix}--side-nav ~ .#{$prefix}--content {
-    margin-left: mini-units(6);
-  }
-
-  .#{$prefix}--side-nav.#{$prefix}--side-nav--expanded ~ .#{$prefix}--content {
-    margin-left: mini-units(32);
-  }
-}
-
-@include exports('carbon-content') {
-  @if feature-flag-enabled('ui-shell') {
-    @include carbon-content;
-  }
-}
diff --git a/scss/components/ui-shell/_functions.scss b/scss/components/ui-shell/_functions.scss
deleted file mode 100644
index 22000f8817df..000000000000
--- a/scss/components/ui-shell/_functions.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'variables';
-
-/// Get a `rem` value based for a number of mini-units.
-/// @param {number} $count
-/// @returns {rem}
-@function mini-units($count) {
-  @return $unit * $count;
-}
diff --git a/scss/components/ui-shell/_header.scss b/scss/components/ui-shell/_header.scss
deleted file mode 100644
index b37fad1baf72..000000000000
--- a/scss/components/ui-shell/_header.scss
+++ /dev/null
@@ -1,248 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/functions';
-@import '../../globals/scss/helper-classes';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import 'theme';
-@import 'functions';
-
-@mixin carbon-header {
-  .#{$prefix}--header {
-    display: flex;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: mini-units(6);
-    background-color: $shell-header-bg-01;
-    color: $shell-header-text-01;
-    z-index: z('header');
-  }
-
-  .#{$prefix}--header__action {
-    @include button-reset();
-    width: mini-units(6);
-    height: mini-units(6);
-    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 {
-    display: none;
-  }
-
-  .#{$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 {
-    display: none;
-  }
-
-  .#{$prefix}--header__action--active > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
-    display: inline;
-  }
-
-  .#{$prefix}--header__action:hover {
-    background-color: #333333;
-  }
-
-  .#{$prefix}--header__action--active,
-  .#{$prefix}--header__action--active:hover {
-    background-color: $shell-brand-01;
-  }
-
-  .#{$prefix}--header__action--active,
-  .#{$prefix}--header__action:focus {
-    border-color: $shell-brand-01;
-    outline: none;
-  }
-
-  .#{$prefix}--header__action > svg {
-    fill: $shell-header-icon-01;
-  }
-
-  //--------------------------------------------------------------------------
-  // Header - Name
-  //--------------------------------------------------------------------------
-  a.#{$prefix}--header__name {
-    @include typescale('zeta');
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 mini-units(2);
-    text-decoration: none;
-    font-weight: 600;
-    letter-spacing: 0.1px;
-    line-height: 20px;
-    user-select: none;
-  }
-
-  .#{$prefix}--header__name--prefix {
-    font-weight: 400;
-  }
-
-  a.#{$prefix}--header__name,
-  a.#{$prefix}--header__name:hover {
-    color: $shell-header-text-01;
-  }
-
-  a.#{$prefix}--header__name:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 4px $shell-brand-01;
-  }
-
-  //--------------------------------------------------------------------------
-  // Header - Navigation
-  //--------------------------------------------------------------------------
-  .#{$prefix}--header__nav {
-    height: 100%;
-  }
-
-  .#{$prefix}--header__menu-bar[role='menubar'] {
-    display: flex;
-    margin-left: mini-units(1);
-    height: 100%;
-  }
-
-  a.#{$prefix}--header__menu-item[role='menuitem'] {
-    display: flex;
-    align-items: center;
-    color: $shell-header-text-01;
-    padding: 0 mini-units(2);
-    // Used for links that are directly in the menubar to span the full height
-    height: 100%;
-    // Text styles
-    font-size: rem(14px);
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: rem(18px);
-    // Reset link styles and make sure the text isn't selectable
-    text-decoration: none;
-    user-select: none;
-    // Used for focus styles
-    border: 4px solid transparent;
-  }
-
-  a.#{$prefix}--header__menu-item[role='menuitem']:hover {
-    background-color: #333333;
-  }
-
-  .#{$prefix}--header__action:active,
-  a.#{$prefix}--header__menu-item[role='menuitem']:active {
-    background-color: $ibm-colors__gray-80;
-  }
-
-  a.#{$prefix}--header__menu-item[role='menuitem']:focus {
-    border-color: $ibm-colors__blue-60;
-    outline: none;
-  }
-
-  .#{$prefix}--header__submenu {
-    position: relative;
-  }
-
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-haspopup='true'] {
-    position: relative;
-  }
-
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
-    background-color: $ibm-colors__gray-80;
-    // Note: needs to be higher than menu. Adding 1 here instead of moving to
-    // the next level.
-    z-index: #{z('header') + 1};
-  }
-
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] > .#{$prefix}--header__menu-arrow {
-    transform: rotate(180deg);
-  }
-
-  .#{$prefix}--header__menu[role='menu'] {
-    display: none;
-  }
-
-  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] + .#{$prefix}--header__menu {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    width: mini-units(25);
-    flex-direction: column;
-    transform: translateY(100%);
-    background-color: $ibm-colors__gray-80;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
-    z-index: z('header');
-  }
-
-  .#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
-    height: mini-units(6);
-  }
-
-  .#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem']:hover {
-    background-color: #4c4c4c;
-    color: #fff;
-  }
-
-  .#{$prefix}--header__menu-arrow {
-    fill: $ibm-colors__gray-10;
-    margin-left: mini-units(1);
-  }
-
-  //--------------------------------------------------------------------------
-  // Header - Global
-  //--------------------------------------------------------------------------
-  .#{$prefix}--header__global {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1 1 0%;
-    height: 100%;
-  }
-
-  //--------------------------------------------------------------------------
-  // Header - Skip to content
-  //--------------------------------------------------------------------------
-  .#{$prefix}--skip-to-content {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-    visibility: visible;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--skip-to-content:focus {
-    display: flex;
-    align-items: center;
-    top: 0;
-    left: 0;
-    width: auto;
-    height: 3rem;
-    clip: auto;
-    border: 4px solid $ibm-colors__blue-60;
-    z-index: 9999;
-    background-color: $shell-header-bg-01;
-    color: $shell-header-text-01;
-    outline: none;
-    padding: 0 1rem;
-  }
-}
-
-@include exports('carbon-header') {
-  @if feature-flag-enabled('ui-shell') {
-    @include carbon-header;
-  }
-}
diff --git a/scss/components/ui-shell/_navigation-menu.scss b/scss/components/ui-shell/_navigation-menu.scss
deleted file mode 100644
index 5215777a9ebc..000000000000
--- a/scss/components/ui-shell/_navigation-menu.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/css--helpers';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/vars';
-@import 'functions';
-
-@mixin carbon-navigation {
-  //----------------------------------------------------------------------------
-  // Navigation
-  //----------------------------------------------------------------------------
-  .#{$prefix}--navigation {
-    position: fixed;
-    top: mini-units(6);
-    bottom: 0;
-    left: 0;
-    background-color: $ibm-colors__gray-90;
-    width: mini-units(32);
-    z-index: z('dropdown');
-    box-shadow: 0 mini-units(1) mini-units(2) 0 rgba(0, 0, 0, 0.25);
-    color: $ibm-colors__gray-10;
-  }
-
-  .#{$prefix}--navigation--right {
-    left: auto;
-    right: 0;
-  }
-
-  .#{$prefix}--navigation svg {
-    fill: $ibm-colors__gray-10;
-  }
-
-  //----------------------------------------------------------------------------
-  // Nav Section
-  //----------------------------------------------------------------------------
-  .#{$prefix}--navigation-section:not(:last-child)::after {
-    display: block;
-    content: '';
-    height: 1px;
-    background-color: $ibm-colors__gray-80;
-    margin: 0 mini-units(2);
-  }
-
-  //----------------------------------------------------------------------------
-  // Nav Item
-  //----------------------------------------------------------------------------
-  .#{$prefix}--navigation-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--navigation-item--active > a.#{$prefix}--navigation-link {
-    color: $ibm-colors__white;
-    font-weight: 600;
-  }
-
-  .#{$prefix}--navigation-item--active::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 4px;
-    background-color: $ibm-colors__blue-60;
-  }
-
-  //----------------------------------------------------------------------------
-  // Nav Link
-  //----------------------------------------------------------------------------
-  a.#{$prefix}--navigation-link {
-    display: flex;
-    align-items: center;
-    color: $ibm-colors__gray-10;
-    text-decoration: none;
-    font-size: rem(14px);
-    font-weight: 400;
-    width: 100%;
-    min-height: mini-units(5);
-    padding-left: mini-units(2);
-  }
-
-  a.#{$prefix}--navigation-link:hover {
-    background-color: #333333;
-    color: $ibm-colors__white;
-  }
-
-  a.#{$prefix}--navigation-link:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
-    outline-offset: rem(-3px);
-  }
-
-  .#{$prefix}--navigation-item--icon > a.#{$prefix}--navigation-link {
-    padding-left: 0;
-  }
-
-  //----------------------------------------------------------------------------
-  // Nav Category
-  //----------------------------------------------------------------------------
-  .#{$prefix}--navigation__category {
-    width: 100%;
-  }
-
-  .#{$prefix}--navigation__category-toggle {
-    @include button-reset($width: true);
-
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--navigation__category-toggle:hover {
-    background-color: #333333;
-  }
-
-  .#{$prefix}--navigation__category-toggle:focus {
-    outline: rem(3px) solid $ibm-colors__blue-60;
-    outline-offset: rem(-3px);
-  }
-
-  .#{$prefix}--navigation__category-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: mini-units(2);
-    width: 100%;
-    color: $ibm-colors__gray-10;
-    font-size: rem(14px);
-    font-weight: 400;
-    min-height: mini-units(5);
-    padding-left: mini-units(2);
-  }
-
-  .#{$prefix}--navigation-item--icon .#{$prefix}--navigation__category-title {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--navigation__category-items {
-    display: none;
-    visibility: hidden;
-  }
-
-  .#{$prefix}--navigation__category-item > a.#{$prefix}--navigation-link {
-    display: flex;
-    align-items: center;
-    min-height: mini-units(4);
-    padding-left: mini-units(4);
-  }
-
-  .#{$prefix}--navigation__category-item {
-    position: relative;
-  }
-
-  .#{$prefix}--navigation-item--icon .#{$prefix}--navigation__category-item > a.#{$prefix}--navigation-link {
-    padding-left: mini-units(7);
-  }
-
-  .#{$prefix}--navigation__category-item--active::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 4px;
-    background-color: $ibm-colors__blue-60;
-  }
-
-  .#{$prefix}--navigation__category-item--active > a.#{$prefix}--navigation-link {
-    font-weight: 600;
-    color: $ibm-colors__white;
-  }
-
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title {
-    font-weight: 600;
-  }
-
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title > svg {
-    transform: rotate(180deg);
-  }
-
-  .#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-items {
-    display: block;
-    visibility: inherit;
-  }
-
-  //----------------------------------------------------------------------------
-  // Nav Icon
-  //----------------------------------------------------------------------------
-  .#{$prefix}--navigation-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: mini-units(6);
-    min-width: mini-units(6);
-    height: mini-units(5);
-    margin-right: mini-units(1);
-  }
-}
-
-@include exports('carbon-navigation') {
-  @if feature-flag-enabled('ui-shell') {
-    @include carbon-navigation;
-  }
-}
diff --git a/scss/components/ui-shell/_product-switcher.scss b/scss/components/ui-shell/_product-switcher.scss
deleted file mode 100644
index 2c337974ee50..000000000000
--- a/scss/components/ui-shell/_product-switcher.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/typography';
-@import 'theme';
-@import 'functions';
-
-@mixin product-switcher {
-  //--------------------------------------------------------------------------
-  // Global Panel
-  //--------------------------------------------------------------------------
-  .#{$prefix}--panel--overlay {
-    position: fixed;
-    top: mini-units(6);
-    right: 0;
-    bottom: 0;
-    width: mini-units(32);
-    will-change: transform;
-    transform: translate3d(100%, 0, 0);
-    padding: 1rem 0;
-    overflow-y: auto;
-    z-index: 1000;
-    background-color: $shell-header-bg-02;
-    height: 100%;
-    overflow-x: hidden;
-    transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
-  }
-
-  .#{$prefix}--panel--expanded {
-    box-shadow: 0 8px 16px 0 rgba($shell-ui-03, 0.25);
-    transform: translate3d(0, 0, 0);
-  }
-
-  //--------------------------------------------------------------------------
-  // Switcher - Search
-  //--------------------------------------------------------------------------
-  .#{$prefix}--product-switcher__search {
-    padding: 0 mini-units(2);
-    margin-bottom: mini-units(3);
-  }
-
-  .#{$prefix}--search--shell input {
-    background-color: $shell-header-bg-05;
-  }
-
-  //--------------------------------------------------------------------------
-  // Switcher - Buttons
-  //--------------------------------------------------------------------------
-  .#{$prefix}--product-switcher__subheader,
-  .#{$prefix}--product-switcher__all-btn {
-    @include typescale('omega');
-    padding: mini-units(1);
-    color: $shell-header-text-03;
-  }
-
-  .#{$prefix}--product-switcher__subheader {
-    padding-left: mini-units(7);
-  }
-
-  .#{$prefix}--product-switcher__all-btn {
-    padding-left: mini-units(7);
-  }
-
-  .#{$prefix}--product-switcher__all-btn,
-  .#{$prefix}--product-switcher__back-btn {
-    display: inline-block;
-    background: transparent;
-    width: 100%;
-    border: none;
-    color: $shell-header-link;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .#{$prefix}--product-switcher__all-btn:hover,
-  .#{$prefix}--product-switcher__back-btn:hover {
-    text-decoration: underline;
-  }
-
-  .#{$prefix}--product-switcher__all-btn:focus,
-  .#{$prefix}--product-switcher__back-btn:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 3px $shell-header-link;
-  }
-
-  .#{$prefix}--product-switcher__back-btn {
-    display: flex;
-    align-items: center;
-    @include typescale('omega');
-    padding: mini-units(1) mini-units(2);
-  }
-
-  .#{$prefix}--product-switcher__back-arrow {
-    fill: $shell-header-link;
-    margin-right: mini-units(2);
-  }
-
-  //--------------------------------------------------------------------------
-  // Switcher - Product List
-  //--------------------------------------------------------------------------
-  .#{$prefix}--product-list__item {
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .#{$prefix}--product-list__item:hover {
-    background: $shell-header-bg-03;
-  }
-
-  .#{$prefix}--product-link {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    padding: mini-units(1) mini-units(2);
-    text-decoration: none;
-  }
-
-  .#{$prefix}--product-link:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 3px $shell-header-link;
-  }
-
-  .#{$prefix}--product-switcher__icon {
-    margin-right: mini-units(2);
-  }
-
-  .#{$prefix}--product-link__name {
-    @include typescale('zeta');
-    margin-left: 0.25rem;
-    font-weight: 400;
-    color: $shell-header-text-02;
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    width: mini-units(5);
-
-    &.#{$prefix}--overflow-menu--open {
-      display: flex;
-    }
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu > svg {
-    fill: $shell-header-text-02;
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:hover {
-    background: $shell-header-bg-04;
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:hover > svg {
-    fill: $shell-header-text-02;
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:focus {
-    display: flex;
-    outline: none;
-    box-shadow: inset 0 0 0 3px $shell-header-link;
-  }
-
-  .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu-options__option:hover {
-    background: $shell-header-bg-03;
-  }
-
-  .#{$prefix}--product-list__item:hover .#{$prefix}--overflow-menu {
-    display: flex;
-  }
-}
-
-@include exports('product-switcher') {
-  @if feature-flag-enabled('ui-shell') {
-    @include product-switcher;
-  }
-}
diff --git a/scss/components/ui-shell/_side-nav.scss b/scss/components/ui-shell/_side-nav.scss
deleted file mode 100644
index 51b17707579a..000000000000
--- a/scss/components/ui-shell/_side-nav.scss
+++ /dev/null
@@ -1,433 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/css--helpers';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/layout';
-@import '../../globals/scss/vars';
-@import 'functions';
-@import 'theme';
-
-/// Adds experimental focus styles to a particular selector.
-/// @example
-///    .my-custom-selector:focus {
-///      @include experimental-focus();
-///    }
-@mixin experimental-focus() {
-  outline: 4px solid $shell-side-nav-accent-01;
-  outline-offset: -4px;
-}
-
-/// Helper to add in text overflow styles to a particular node. Useful if we
-/// don't want to have display-inline: block from the text helper classes
-/// @example
-///    .my-custom-selector {
-///      @include text-overflow();
-///    }
-@mixin text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/// Helper for handling selectors for the expansion state of the side-nav.
-/// This helper makes it easier to write code for children that need to respond
-/// to whether the side-nav is open, or closed. For convenience, we also
-/// optionally set properties for opacity and visibility to help with the
-/// transition animation.
-/// @param {boolean} $opacity
-/// @param {boolean} $visibility
-/// @content
-@mixin expanded($opacity: false, $visibility: false) {
-  @if $opacity == true {
-    opacity: 0;
-  }
-
-  @if $visibility == true {
-    visibility: hidden;
-  }
-
-  .#{$prefix}--side-nav:hover &,
-  // Include the fixed variant here so components can render in both expandable
-  // and fixed side navs
-  .#{$prefix}--side-nav--fixed &,
-  .#{$prefix}--side-nav--expanded & {
-    @if $visibility == true {
-      visibility: visible;
-    }
-    @if $opacity == true {
-      opacity: 1;
-    }
-    @content;
-  }
-}
-
-@mixin carbon-side-nav {
-  //----------------------------------------------------------------------------
-  // Side-nav > Panel
-  //----------------------------------------------------------------------------
-  // Used for rendering the actual side rail. There are two states that we have
-  // to style for, namely for when the rail is collapsed and expanded. When
-  // collapsed, the rail is intended to expand on hover. When expanded, it
-  // should have the same dimensions as when expanded on hover.
-  .#{$prefix}--side-nav {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: mini-units(6);
-    max-width: mini-units(32);
-    color: $shell-side-nav-text-01;
-    background-color: $shell-side-nav-bg-01;
-    will-change: width;
-    // TODO: sync with motion work
-    transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
-    // Useful to toggle this property to see what's going on when not expanded
-    overflow: hidden;
-    // Separates out the panel from the header of the same color
-    border-top: 1px solid $ibm-colors__gray-80;
-    z-index: z('header');
-  }
-
-  .#{$prefix}--side-nav:not(.#{$prefix}--side-nav--fixed):hover,
-  .#{$prefix}--side-nav--expanded {
-    width: mini-units(32);
-  }
-
-  // When used alongside the header, we update the `top` positioning so that we
-  // can fit both widgets on the same page without overlapping.
-  .#{$prefix}--header ~ .#{$prefix}--side-nav {
-    top: mini-units(6);
-  }
-
-  .#{$prefix}--side-nav--fixed {
-    width: mini-units(26);
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__navigation {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > Header
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__header {
-    display: flex;
-    border-bottom: 1px solid $ibm-colors__gray-80;
-    width: 100%;
-    height: mini-units(6);
-    max-width: 100%;
-
-    @include expanded() {
-      height: auto;
-    }
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > Header > Details
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__details {
-    display: flex;
-    flex-direction: column;
-    padding-right: mini-units(2);
-    // Necessary for text truncation in title
-    // https://css-tricks.com/flexbox-truncated-text/#article-header-id-3
-    flex: 1;
-    min-width: 0;
-
-    @include expanded($opacity: true, $visibility: true);
-  }
-
-  .#{$prefix}--side-nav__title {
-    @include text-overflow();
-
-    // TODO: sync with type styles
-    font-size: rem(14px);
-    font-weight: 600;
-    letter-spacing: 0.1px;
-    margin-top: mini-units(2);
-    user-select: none;
-  }
-
-  // Sync up between our title and select field to get position logic for
-  // text
-  .#{$prefix}--side-nav__title,
-  .#{$prefix}--side-nav__select {
-    padding-left: mini-units(1);
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > Header > Switcher
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__switcher {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .#{$prefix}--side-nav__switcher-chevron {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: mini-units(1);
-    bottom: 0;
-    fill: $shell-side-nav-icon-01;
-  }
-
-  .#{$prefix}--side-nav__select {
-    @include font-family();
-    appearance: none;
-    flex: 1 1 0%;
-    background-color: $shell-header-bg-01;
-    color: $shell-header-text-01;
-    height: 100%;
-    border: none;
-    border-radius: 0;
-    cursor: pointer;
-    font-size: rem(12px);
-    height: mini-units(4);
-    // Flex bug, used to have the select node respect the width if a child has a
-    // value that is longer than the width of the select
-    min-width: 0;
-    // Buffer the right hand side of select so text doesn't overlay the chevron
-    padding-right: mini-units(4);
-  }
-
-  .#{$prefix}--side-nav__select:focus {
-    @include experimental-focus();
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > Footer
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__footer {
-    flex: 0 0 rem(48px);
-    width: 100%;
-    background-color: $shell-side-nav-bg-02;
-  }
-
-  .#{$prefix}--side-nav__toggle {
-    @include button-reset($width: true);
-    height: 100%;
-    text-align: left;
-  }
-
-  .#{$prefix}--side-nav__toggle:hover {
-    background-color: $shell-side-nav-bg-03;
-  }
-
-  .#{$prefix}--side-nav__toggle:focus {
-    @include experimental-focus();
-  }
-
-  .#{$prefix}--side-nav__toggle:active {
-    background-color: $shell-side-nav-accent-01;
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > Item(s)
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__items {
-    flex: 1 1 0%;
-    overflow: hidden;
-
-    @include expanded() {
-      overflow-y: auto;
-    }
-  }
-
-  // Force all of our side navigation items to be the same dimensions. When our
-  // menu expands, we can undo the forced dimensions.
-  .#{$prefix}--side-nav__item {
-    width: mini-units(6);
-    height: mini-units(6);
-    overflow: hidden;
-
-    @include expanded() {
-      width: auto;
-      height: auto;
-    }
-  }
-
-  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover {
-    // TODO: sync color
-    background-color: #333333;
-  }
-
-  .#{$prefix}--side-nav__item--active {
-    // TODO: sync color
-    background-color: #3d3d3d;
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Navigation > {Menu,Submenu}
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
-    @include button-reset($width: true);
-
-    display: flex;
-    align-items: center;
-    color: $shell-side-nav-text-01;
-    // TODO: sync type
-    font-size: rem(14px);
-    line-height: rem(20px);
-    height: mini-units(6);
-    user-select: none;
-  }
-
-  .#{$prefix}--side-nav__submenu:focus {
-    @include experimental-focus();
-  }
-
-  .#{$prefix}--side-nav__submenu-title {
-    @include text-overflow();
-  }
-
-  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__submenu-chevron {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    padding-right: mini-units(2);
-  }
-
-  .#{$prefix}--side-nav__submenu[aria-expanded='true'] .#{$prefix}--side-nav__submenu-chevron > svg {
-    transform: rotate(180deg);
-  }
-
-  .#{$prefix}--side-nav__menu[role='menu'] {
-    display: block;
-    visibility: hidden;
-    max-height: 0;
-    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'] {
-    max-height: 1500px;
-    visibility: inherit;
-    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'] {
-    height: mini-units(4);
-    min-height: mini-units(4);
-    padding-left: mini-units(7);
-  }
-
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover {
-    // TODO: sync with color
-    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'] {
-    background-color: $ibm-colors__gray-70;
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Link
-  //----------------------------------------------------------------------------
-  a.#{$prefix}--side-nav__link {
-    position: relative;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    min-height: mini-units(6);
-    padding-right: mini-units(2);
-    font-weight: 400;
-  }
-
-  .#{$prefix}--side-nav__submenu > .#{$prefix}--side-nav__icon,
-  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__icon {
-    margin-right: mini-units(1);
-  }
-
-  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text {
-    @include text-overflow();
-    color: $shell-side-nav-text-01;
-    font-size: rem(14px);
-    letter-spacing: 0.1px;
-    line-height: rem(20px);
-    user-select: none;
-  }
-
-  a.#{$prefix}--side-nav__link:focus {
-    @include experimental-focus();
-  }
-
-  a.#{$prefix}--side-nav__link[aria-current='page'],
-  a.#{$prefix}--side-nav__link--current {
-    font-weight: 600;
-  }
-
-  a.#{$prefix}--side-nav__link[aria-current='page']::before,
-  a.#{$prefix}--side-nav__link--current::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 4px;
-    background-color: $shell-side-nav-accent-01;
-  }
-
-  //----------------------------------------------------------------------------
-  // Side-nav > Icons
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: mini-units(6);
-    height: mini-units(6);
-    // Helpful in flex containers so the icon does not have less than the
-    // expected width
-    flex: 0 0 mini-units(6);
-  }
-
-  .#{$prefix}--side-nav__icon > svg {
-    fill: $shell-side-nav-icon-01;
-  }
-
-  .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
-    display: none;
-  }
-
-  .#{$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 {
-    display: block;
-  }
-
-  //----------------------------------------------------------------------------
-  // Variants - Fixed
-  //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
-  .#{$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 {
-    padding-left: mini-units(4);
-  }
-}
-
-@include exports('carbon-side-nav') {
-  @if feature-flag-enabled('ui-shell') {
-    @include carbon-side-nav;
-  }
-}
diff --git a/scss/components/ui-shell/_theme.scss b/scss/components/ui-shell/_theme.scss
deleted file mode 100644
index 3ee746a1281c..000000000000
--- a/scss/components/ui-shell/_theme.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/colors';
-
-// Header bar background
-$shell-header-bg-01: #252525;
-
-// Header-panel background
-$shell-header-bg-02: #f3f3f3;
-
-// Panel item hover
-$shell-header-bg-03: #dcdcdc;
-
-// Panel overflow hover
-$shell-header-bg-04: #bebebe;
-
-// Panel input background
-$shell-header-bg-05: #fff;
-
-// Header Nav Link hober
-$shell-header-bg-06: #4c4c4c;
-
-// Primary text in header-panel, Item text
-$shell-header-text-01: #f3f3f3;
-
-// Secondary text in header-panel, Item text
-$shell-header-text-02: #171717;
-
-// Secondary text in header-panel, Category label
-$shell-header-text-03: #8c8c8c;
-
-// Header bar icons
-$shell-header-icon-01: #f3f3f3;
-
-// Icons in header panel
-$shell-header-icon-02: #252525;
-
-// Item link
-$shell-header-link: #0062ff;
-
-// Header icon selected state background
-$shell-header-icon-selected: #0062ff;
-
-// Side-nav panel background
-$shell-side-nav-bg-01: $ibm-colors__gray-90;
-
-// Selected category background
-// Select L2 flatted item background
-// Item hover background
-// Footer-bar background
-$shell-side-nav-bg-02: $ibm-colors__gray-80;
-
-// Selected L2 nested item
-$shell-side-nav-bg-03: $ibm-colors__gray-70;
-
-// Primary text in side-nav
-// L2 Flatten item text
-// L2 Nested item text
-// L1 title text
-$shell-side-nav-text-01: $ibm-colors__gray-10;
-
-// Secondary text in side nav
-// L2 Category label
-$shell-side-nav-text-02: $ibm-colors__gray-30;
-
-// side-nav icon color
-$shell-side-nav-icon-01: $ibm-colors__gray-10;
-
-// item highlight bar
-$shell-side-nav-accent-01: $ibm-colors__blue-60;
-
-// Temporary token
-$shell-brand-01: #0062ff;
-$shell-ui-02: #3d3d3d;
-$shell-ui-03: #000;
diff --git a/scss/components/ui-shell/_ui-shell.scss b/scss/components/ui-shell/_ui-shell.scss
deleted file mode 100644
index fb357ed66be1..000000000000
--- a/scss/components/ui-shell/_ui-shell.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'theme';
-@import 'variables';
-@import 'functions';
-@import 'header';
-@import 'product-switcher';
-@import 'side-nav';
-@import 'navigation-menu';
-@import 'content';
diff --git a/scss/components/ui-shell/_variables.scss b/scss/components/ui-shell/_variables.scss
deleted file mode 100644
index 15117dfabe92..000000000000
--- a/scss/components/ui-shell/_variables.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Use rem here to accomodate zoom behavior
-// Reference:
-// https://github.com/IBM/carbon-components/pull/1032#discussion_r210418579
-$unit: 0.5rem;
diff --git a/scss/components/unified-header/_account-switcher.scss b/scss/components/unified-header/_account-switcher.scss
deleted file mode 100644
index ef14aecc51cc..000000000000
--- a/scss/components/unified-header/_account-switcher.scss
+++ /dev/null
@@ -1,312 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-
-@mixin account-switcher {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--account-switcher {
-      @include reset;
-      list-style: none;
-      position: relative;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      min-width: rem(350px);
-    }
-
-    .#{$prefix}--account-switcher__linked-icon {
-      fill: $inverse-01;
-      height: 1rem;
-      width: 1rem;
-      margin: 0 0.5rem;
-      transform: rotate(45deg);
-    }
-
-    .#{$prefix}--account-switcher__toggle {
-      z-index: 9000;
-      height: rem(36px);
-      width: auto;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: $inverse-01;
-      padding: 0 1rem;
-      background-color: $nav-01;
-      cursor: pointer;
-
-      &:focus,
-      &:hover {
-        outline: 0;
-        background-color: $color__navy-gray-3; // anna
-
-        .#{$prefix}--account-switcher__toggle--text {
-          color: $color__blue-30; // anna
-        }
-
-        svg {
-          fill: $color__blue-30; // anna
-        }
-      }
-    }
-
-    .#{$prefix}--account-switcher__toggle--hidden {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text {
-      @include typescale('legal');
-      @include letter-spacing;
-      overflow: hidden;
-      display: inline-flex;
-      white-space: nowrap;
-      padding-right: 0.5rem;
-      font-weight: 300;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text[data-switcher-account-sl],
-    .#{$prefix}--account-switcher__toggle--text[data-switcher-account] {
-      @include font-smoothing;
-      font-weight: 600;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text[data-switcher-account] {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text[data-switcher-account] .#{$prefix}--account-switcher__linked-icon {
-      margin-right: 0;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text > [data-dropdown-account-linked] {
-      margin-left: 0.5rem;
-      margin-right: 0;
-    }
-
-    .#{$prefix}--account-switcher__toggle--text:last-child {
-      padding-right: 0;
-    }
-
-    .#{$prefix}--account-switcher__menu {
-      @include reset;
-      list-style: none;
-    }
-
-    .#{$prefix}--account-switcher__menu__container {
-      @include box-shadow('large');
-      transition: $transition--base all $carbon--standard-easing;
-      position: absolute;
-      width: auto;
-      min-width: rem(350px);
-      height: auto;
-      background-color: $color__navy-gray-3; // anna
-      visibility: hidden;
-      opacity: 0;
-      top: 100%;
-      right: 0;
-      transform: translateY(-10%);
-      color: $inverse-01;
-      z-index: 8000;
-    }
-
-    .#{$prefix}--account-switcher--open {
-      color: $color__blue-30; // anna
-
-      .#{$prefix}--account-switcher__toggle {
-        color: $color__blue-30; // anna
-        background-color: $color__navy-gray-3; // anna
-      }
-
-      .#{$prefix}--account-switcher__linked-icon {
-        fill: $color__blue-30; // anna
-      }
-
-      .#{$prefix}--account-switcher__menu__container {
-        visibility: visible;
-        max-height: rem(2000px);
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item {
-      height: auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      padding: 1rem;
-
-      &:first-child {
-        border-bottom: 1px solid $color__navy-gray-5; // anna
-      }
-
-      &:nth-child(n + 2) {
-        padding: 1rem 1rem 0;
-      }
-
-      &:last-child {
-        display: flex;
-        margin-left: auto;
-        justify-content: flex-start;
-        max-width: 75%;
-        padding: 0.75rem 0 1rem 1.5rem;
-
-        a {
-          @include typescale('legal');
-          padding-right: 1rem;
-          color: $color__blue-30; // anna
-
-          &:visited {
-            color: $color__blue-30; // anna
-          }
-
-          &:hover {
-            color: $color__blue-40; // anna
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item--title {
-      @include typescale('zeta');
-      @include font-smoothing;
-      font-weight: 600;
-      height: 44px;
-      min-width: 100px;
-      display: flex;
-      align-items: center;
-      flex: 1;
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown {
-      @include typescale('zeta');
-      flex: 3;
-      background-color: $color__navy-gray-5; // anna
-      display: block;
-      flex-direction: column;
-      min-width: 200px;
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
-      color: $color__white; // anna
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown--scroll {
-      max-height: 180px;
-      overflow-y: auto;
-
-      &::-webkit-scrollbar {
-        background: $color__navy-gray-4; // anna
-        width: 0.5rem;
-        height: 0.5rem;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: $color__navy-gray-7; // anna
-        border-radius: 10px;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: $color__navy-gray-8; // anna
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown li {
-      @include font-smoothing;
-      font-weight: 400;
-      max-width: 400px;
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown__arrow {
-      fill: $color__blue-30; // anna
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown-text {
-      padding-right: 2rem;
-      align-self: flex-start;
-      background-color: $color__navy-gray-5; // anna
-
-      .#{$prefix}--account-switcher__linked-icon {
-        fill: $color__white; // anna
-        vertical-align: middle;
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown-list {
-      position: relative;
-      transform: translateY(-10px);
-      max-height: 0;
-      height: auto;
-      width: 100%;
-      top: 0;
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown-item {
-      background-color: $color__navy-gray-3; // anna
-
-      > .#{$prefix}--dropdown-link:hover,
-      .#{$prefix}--dropdown-link:focus {
-        background-color: $color__blue-30; // anna
-        color: $color__blue-90; // anna
-
-        svg {
-          fill: $color__blue-90; // anna
-        }
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown-link {
-      height: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-
-      span {
-        pointer-events: none;
-      }
-
-      svg {
-        fill: $color__white; // anna
-        pointer-events: none;
-        vertical-align: middle;
-      }
-    }
-
-    .#{$prefix}--account-switcher__menu__item .#{$prefix}--dropdown--open {
-      .#{$prefix}--dropdown-text {
-        color: $color__white; // anna
-      }
-
-      .#{$prefix}--dropdown-list {
-        display: flex;
-        flex-direction: column;
-        max-height: 2000px;
-        z-index: 10;
-      }
-
-      .#{$prefix}--dropdown-item {
-        background-color: $color__navy-gray-4; // anna
-      }
-    }
-  }
-}
-
-@include exports('account-switcher') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include account-switcher;
-  }
-}
diff --git a/scss/components/unified-header/_global-header.scss b/scss/components/unified-header/_global-header.scss
deleted file mode 100644
index b1b4ff5c0c9a..000000000000
--- a/scss/components/unified-header/_global-header.scss
+++ /dev/null
@@ -1,245 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-
-@mixin global-header {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--global-header {
-      @include layer('sticky-nav');
-      @include font-family;
-      width: 100%;
-      position: fixed;
-      top: rem(36px);
-      left: 0;
-      display: flex;
-      justify-content: space-between;
-      height: rem(50px);
-      line-height: 1.5;
-      background-color: $nav-02;
-      z-index: 9000;
-    }
-
-    .#{$prefix}--global-header__title {
-      display: flex;
-      align-items: center;
-    }
-
-    .#{$prefix}--global-header__title--logo {
-      display: flex;
-      align-items: center;
-      padding: 0 rem(8px);
-      text-decoration: none;
-      color: $color__white; // anna
-      position: relative;
-
-      &:hover,
-      &:focus {
-        .#{$prefix}--logo__text {
-          color: $color__blue-20; // anna
-        }
-      }
-    }
-
-    .#{$prefix}--global-header__title--current-page {
-      @include font-smoothing;
-      display: flex;
-      align-items: center;
-      font-weight: 400;
-      font-size: 1.125rem;
-      line-height: inherit;
-      color: $color__blue-30; // anna
-
-      .#{$prefix}--unified-header--apps & {
-        color: $nav-05;
-      }
-
-      .#{$prefix}--unified-header--infrastructure & {
-        color: $nav-07;
-      }
-
-      .#{$prefix}--unified-header--services & {
-        color: $nav-03;
-      }
-    }
-
-    .#{$prefix}--global-header .#{$prefix}--logo__image {
-      cursor: pointer;
-      position: relative;
-      margin-right: 1.125rem;
-    }
-
-    .#{$prefix}--global-header .#{$prefix}--logo__text {
-      @include typescale('delta');
-      @include font-smoothing;
-      font-weight: 400;
-      cursor: pointer;
-      text-decoration: none;
-      color: $color__white; // anna
-
-      &--bold {
-        font-weight: 600;
-      }
-    }
-
-    .#{$prefix}--global-header__left-container {
-      display: flex;
-      align-items: center;
-    }
-
-    .#{$prefix}--global-header__right-container {
-      display: flex;
-      align-items: center;
-      padding-right: 1%;
-      background-color: $nav-02;
-    }
-
-    .#{$prefix}--global-header__menu {
-      @include reset;
-      list-style: none;
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .#{$prefix}--global-header__menu__item {
-      @include reset;
-      width: 100%;
-      flex: 0 1 100px;
-
-      &:focus {
-        outline: 0;
-        background-color: $color__navy-gray-3; // anna
-        color: $color__blue-30; // anna
-      }
-
-      &:last-child {
-        & .#{$prefix}--dropdown-list {
-          right: 0;
-        }
-      }
-    }
-
-    .#{$prefix}--global-header__menu__item--link {
-      @include reset;
-      @include font-smoothing;
-      @include typescale('zeta');
-      font-weight: 600;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: rem(50px);
-      text-decoration: none;
-      background-color: $nav-02;
-      color: $color__white; // anna
-      padding: 0 1rem;
-
-      &:hover {
-        color: $color__blue-30; // anna
-      }
-
-      &:focus {
-        outline: 0;
-        background-color: $color__navy-gray-3; // anna
-        color: $color__blue-30; // anna
-      }
-    }
-
-    .#{$prefix}--global-header__menu__item .#{$prefix}--dropdown {
-      height: rem(50px);
-      background-color: transparent;
-
-      &:focus {
-        outline: 0;
-        background-color: $color__navy-gray-3; // anna
-
-        .#{$prefix}--dropdown__menu-text {
-          color: $color__blue-30; // anna
-        }
-
-        .#{$prefix}--dropdown__menu-text,
-        .#{$prefix}--dropdown__list {
-          outline: 0;
-        }
-      }
-    }
-
-    .#{$prefix}--global-header__menu .#{$prefix}--dropdown-text {
-      @include font-smoothing;
-      display: flex;
-      justify-content: center;
-      padding-top: 0;
-      padding-right: 1rem;
-      padding-bottom: 0;
-      align-items: center;
-      height: 100%;
-      z-index: 1000;
-      color: $color__white; // anna
-
-      &:hover {
-        color: $color__blue-30; // anna
-      }
-    }
-
-    .#{$prefix}--global-header__menu .#{$prefix}--dropdown-list {
-      transition: $transition--base all $carbon--standard-easing;
-      transform: translateY(-150%);
-      opacity: 0;
-      visibility: hidden;
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      top: 100%;
-      width: auto;
-      z-index: -1;
-      padding-bottom: 0.5rem;
-    }
-
-    .#{$prefix}--global-header__menu .#{$prefix}--dropdown-item {
-      min-width: 200px;
-      width: 100%;
-    }
-
-    .#{$prefix}--global-header__menu .#{$prefix}--dropdown-link {
-      padding: 0.5rem 0.75rem;
-      color: $color__white; // anna
-
-      &:hover {
-        color: $color__blue-90; // anna
-        background-color: $color__blue-30; // anna
-      }
-    }
-
-    .#{$prefix}--global-header__menu .#{$prefix}--dropdown--open {
-      .#{$prefix}--dropdown-text {
-        background-color: $color__navy-gray-3; // anna
-        color: $color__blue-30; // anna
-      }
-
-      .#{$prefix}--dropdown-list {
-        transform: translateY(0);
-        opacity: 1;
-        visibility: visible;
-        background-color: $color__navy-gray-3; // anna
-      }
-    }
-  }
-}
-
-@include exports('global-header') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include global-header;
-  }
-}
diff --git a/scss/components/unified-header/_left-nav-trigger.scss b/scss/components/unified-header/_left-nav-trigger.scss
deleted file mode 100644
index 3d49b7cbb3f7..000000000000
--- a/scss/components/unified-header/_left-nav-trigger.scss
+++ /dev/null
@@ -1,231 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import 'mixins';
-
-@mixin left-nav-trigger {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--left-nav__trigger {
-      @include reset;
-      width: rem(60px);
-      height: rem(50px);
-      position: relative;
-      transition: $transition--base $carbon--standard-easing;
-      cursor: pointer;
-      z-index: 9999;
-
-      &:focus {
-        outline: 0;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $color__blue-30;
-
-        span,
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--btn {
-      @include reset;
-      position: absolute;
-      top: 1.5rem;
-      left: rem(20px);
-      width: 100%;
-      transition: $transition--base $carbon--standard-easing;
-      display: flex;
-
-      span,
-      span:before,
-      span:after {
-        @include reset;
-        height: rem(2px);
-        width: rem(20px);
-        cursor: pointer;
-        position: absolute;
-        display: block;
-        content: '';
-        transition: all $transition--base ease;
-      }
-
-      span:before {
-        top: rem(-6px);
-      }
-
-      span:after {
-        bottom: rem(-6px);
-      }
-
-      .#{$prefix}--left-nav__trigger--active & {
-        left: rem(18px);
-
-        span:before,
-        span:after {
-          top: 0;
-          width: rem(25.46px);
-        }
-
-        span:before {
-          transform: rotate(45deg);
-        }
-
-        span:after {
-          transform: rotate(-45deg);
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--apps {
-      span,
-      span:before,
-      span:after {
-        background: $nav-05;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-06;
-
-        span,
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--apps.#{$prefix}--left-nav__trigger--active {
-      span {
-        background: transparent;
-      }
-
-      span:before,
-      span:after {
-        background: $nav-06;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-06;
-
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--services {
-      span,
-      span:before,
-      span:after {
-        background: $nav-03;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-04;
-
-        span,
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--services.#{$prefix}--left-nav__trigger--active {
-      span {
-        background: transparent;
-      }
-
-      span:before,
-      span:after {
-        background: $nav-04;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-04;
-
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--infrastructure {
-      span,
-      span:before,
-      span:after {
-        background: $nav-07;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-08;
-
-        span,
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__trigger--infrastructure.#{$prefix}--left-nav__trigger--active {
-      span {
-        background: transparent;
-      }
-
-      span:before,
-      span:after {
-        background: $nav-08;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: $nav-08;
-
-        span:before,
-        span:after {
-          background: $color__white;
-        }
-      }
-    }
-  }
-}
-
-@include exports('left-nav-trigger') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include left-nav-trigger;
-  }
-}
diff --git a/scss/components/unified-header/_left-nav.scss b/scss/components/unified-header/_left-nav.scss
deleted file mode 100644
index 081c3a7b9ed2..000000000000
--- a/scss/components/unified-header/_left-nav.scss
+++ /dev/null
@@ -1,617 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/css--reset';
-@import '../../globals/scss/css--typography';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/vars';
-@import 'mixins';
-
-@mixin left-nav {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--global-header__left-nav {
-      @include layer('temporary-nav');
-      @include reset;
-      position: fixed;
-      z-index: 9000;
-      width: rem(250px);
-      top: rem(36px);
-      left: 0;
-      height: 100%;
-      transform: translate3d(-100%, 0, 0);
-      transition: 300ms $carbon--standard-easing;
-      box-shadow: none;
-      visibility: hidden;
-    }
-
-    .#{$prefix}--global-header__left-nav.#{$prefix}--left-nav--active {
-      transform: translate3d(0, 0, 0);
-      box-shadow: 0px 1px 15px 2px rgba(0, 0, 0, 0.1);
-      visibility: visible;
-    }
-
-    .#{$prefix}--left-nav {
-      @include reset;
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: $ui-01;
-      padding: 0 0 4rem 0;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
-    .#{$prefix}--left-nav__close-row {
-      @include reset;
-      height: rem(50px);
-      width: 100%;
-      background-color: $ui-01;
-    }
-
-    .#{$prefix}--left-nav__header {
-      @include reset;
-      align-items: center;
-      height: rem(50px);
-      cursor: pointer;
-      position: relative;
-      display: flex;
-      background-color: $nav-01;
-      justify-content: space-between;
-      top: 0;
-      left: 0;
-      width: 100%;
-      padding: 1.125rem rem(20px);
-
-      &[data-left-nav-current-section='apps'] {
-        background-color: $nav-06;
-      }
-
-      &[data-left-nav-current-section='infrastructure'] {
-        background-color: $nav-08;
-      }
-
-      &[data-left-nav-current-section='services'] {
-        background-color: $nav-04;
-      }
-    }
-
-    .#{$prefix}--left-nav__header--title {
-      @include typescale('epsilon');
-      @include font-smoothing;
-      color: $inverse-01;
-      font-weight: 600;
-      margin-right: auto;
-    }
-
-    .#{$prefix}--left-nav__header--taxonomy-icon {
-      width: rem(24px);
-      height: rem(24px);
-      fill: $inverse-01;
-      margin-right: 1rem;
-    }
-
-    .#{$prefix}--left-nav__header--close-icon {
-      width: rem(14px);
-      height: rem(14px);
-      display: block;
-      fill: $inverse-01;
-    }
-
-    .#{$prefix}--left-nav__sections {
-      @include reset;
-      list-style: none;
-      padding: 0 0 1rem;
-      width: 100%;
-      z-index: 8000;
-      position: relative;
-      border-bottom: 1px solid $ui-04;
-      background-color: $color__white;
-    }
-
-    .#{$prefix}--left-nav__section {
-      @include reset;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      transition: $transition--base $carbon--standard-easing;
-      background-color: $ui-01;
-
-      &:hover {
-        &[data-left-nav-section='apps'] {
-          background-color: $nav-06;
-        }
-
-        &[data-left-nav-section='services'] {
-          background-color: $nav-04;
-        }
-
-        &[data-left-nav-section='infrastructure'] {
-          background-color: $color__blue-50;
-        }
-
-        .#{$prefix}--left-nav__section--link {
-          @include font-smoothing;
-          font-weight: 600;
-          color: $inverse-01;
-        }
-
-        .#{$prefix}--left-nav__section--taxonomy-icon {
-          fill: $inverse-01;
-        }
-      }
-    }
-
-    .#{$prefix}--left-nav__section--active {
-      justify-content: flex-start;
-      align-items: center;
-      cursor: pointer;
-      position: relative;
-      display: flex;
-      background-color: $ui-01;
-      top: 0;
-      left: 0;
-      width: 100%;
-      padding: 0.8rem 0;
-
-      &[data-left-nav-section='apps'] {
-        background-color: $nav-06;
-      }
-
-      &[data-left-nav-section='infrastructure'] {
-        background-color: $nav-08;
-      }
-
-      &[data-left-nav-section='services'] {
-        background-color: $nav-04;
-      }
-    }
-
-    .#{$prefix}--left-nav__section--transition {
-      @extend .#{$prefix}--left-nav__section--active;
-      position: absolute;
-      z-index: 9999;
-      transition: all 0.3s $carbon--ease-out;
-
-      &--50 {
-        transform: translateY(100px);
-      }
-
-      &--100 {
-        transform: translateY(150px);
-      }
-
-      &--0 {
-        transform: translateY(50px);
-      }
-
-      .#{$prefix}--left-nav__section--taxonomy-icon {
-        fill: $inverse-01;
-      }
-    }
-
-    .#{$prefix}--left-nav__section--taxonomy-icon {
-      width: rem(24px);
-      height: rem(24px);
-      fill: $text-01;
-      margin-right: 1rem;
-    }
-
-    .#{$prefix}--left-nav__section--anchor {
-      @include reset;
-      display: flex;
-      width: 100%;
-      padding: 0 1.25rem;
-      align-items: center;
-      text-decoration: none;
-    }
-
-    .#{$prefix}--left-nav__section--link {
-      @include reset;
-      @include typescale('epsilon');
-      display: flex;
-      align-items: center;
-      color: $text-01;
-      height: rem(50px);
-    }
-
-    // MAIN NAV
-    .#{$prefix}--left-nav__main-nav {
-      @include reset;
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 5rem;
-      margin-top: 0;
-      transition: all 250ms $carbon--ease-out;
-      padding-top: 1rem;
-      background-color: $inverse-01;
-    }
-
-    .#{$prefix}--left-nav__main-nav--hidden {
-      display: none;
-    }
-
-    .#{$prefix}--left-nav__main-nav--top {
-      margin-top: -100vh;
-    }
-
-    .#{$prefix}--main-nav__parent-item {
-      @include reset;
-      opacity: 1;
-      transition: opacity 200ms $carbon--standard-easing;
-      cursor: pointer;
-      width: 100%;
-      padding: 0;
-      margin-bottom: 0.25rem;
-      background-color: $ui-01;
-    }
-
-    .#{$prefix}--main-nav__parent-item--fade {
-      opacity: 0;
-    }
-
-    .#{$prefix}--main-nav__parent-item--hidden {
-      display: none;
-    }
-
-    .#{$prefix}--main-nav__parent-item--expanded {
-      .#{$prefix}--parent-item__link--down-icon svg {
-        transform: rotate(180deg);
-      }
-    }
-
-    .#{$prefix}--parent-item__link {
-      @include reset;
-      @include typescale('zeta');
-      font-weight: 400;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      text-decoration: none;
-      padding: 0.5rem rem(20px);
-      transition: background-color $transition--base $carbon--standard-easing;
-      color: $text-01;
-
-      .#{$prefix}--parent-item__link--taxonomy-icon {
-        width: rem(24px);
-        height: rem(24px);
-        transition: $transition--base $carbon--standard-easing;
-        margin-right: 1rem;
-        fill: $text-01;
-      }
-
-      .#{$prefix}--parent-item__link--down-icon {
-        display: flex;
-        margin-left: auto;
-
-        svg {
-          width: rem(10px);
-          height: rem(10px);
-          transition: $transition--base $carbon--standard-easing;
-          fill: $text-01;
-        }
-      }
-
-      &:hover {
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-          color: $nav-06;
-
-          .#{$prefix}--parent-item__link--taxonomy-icon,
-          .#{$prefix}--parent-item__link--down-icon svg {
-            fill: $nav-06;
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & {
-          color: $nav-04;
-
-          .#{$prefix}--parent-item__link--taxonomy-icon,
-          .#{$prefix}--parent-item__link--down-icon svg {
-            fill: $nav-04;
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & {
-          color: $nav-08;
-
-          .#{$prefix}--parent-item__link--taxonomy-icon,
-          .#{$prefix}--parent-item__link--down-icon svg {
-            fill: $nav-08;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--main-nav__parent-item.#{$prefix}--active-list-item {
-      .#{$prefix}--parent-item__link {
-        color: $inverse-01;
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-          background-color: $nav-06;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon,
-            .#{$prefix}--parent-item__link--down-icon svg {
-              fill: $inverse-01;
-            }
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & {
-          background-color: $nav-04;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon,
-            .#{$prefix}--parent-item__link--down-icon svg {
-              fill: $inverse-01;
-            }
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & {
-          background-color: $nav-08;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon,
-            .#{$prefix}--parent-item__link--down-icon svg {
-              fill: $inverse-01;
-            }
-          }
-        }
-      }
-
-      .#{$prefix}--parent-item__link--taxonomy-icon {
-        fill: $inverse-01;
-      }
-
-      .#{$prefix}--parent-item__link--down-icon svg {
-        fill: $inverse-01;
-      }
-
-      &:hover {
-        color: $inverse-01;
-      }
-    }
-
-    .#{$prefix}--main-nav__nested-list {
-      @include reset;
-      @include list;
-      list-style: none;
-      max-height: 0;
-      transition: 300ms $carbon--standard-easing;
-      padding: 0;
-      opacity: 0;
-      overflow: hidden;
-      margin-bottom: 0;
-    }
-
-    .#{$prefix}--main-nav__parent-item--expanded .#{$prefix}--main-nav__nested-list {
-      max-height: 20rem;
-      transition: 300ms $carbon--standard-easing;
-      opacity: 1;
-      margin-top: 0.5rem;
-      overflow: visible;
-
-      .#{$prefix}--nested-list__item {
-        opacity: 1;
-      }
-    }
-
-    .#{$prefix}--nested-list__item {
-      width: 100%;
-      position: static;
-      margin-bottom: 0.25rem;
-      padding: 0;
-      transition: $transition--base;
-      opacity: 0;
-    }
-
-    .#{$prefix}--nested-list__item--link {
-      @include typescale('zeta');
-      color: $text-01;
-      padding: 0.5rem 1.35rem 0.5rem 2rem;
-      font-weight: 400;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      text-decoration: none;
-      position: relative;
-      margin-right: auto;
-
-      &:hover {
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-          color: $nav-06;
-
-          .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-            fill: $nav-06;
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & {
-          color: $nav-04;
-
-          .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-            fill: $nav-04;
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & {
-          color: $nav-08;
-
-          .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-            fill: $nav-08;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--nested-list__item--icon svg {
-      width: rem(10px);
-      height: rem(10px);
-      fill: $text-01;
-    }
-
-    .#{$prefix}--nested-list__item.#{$prefix}--active-list-item {
-      .#{$prefix}--nested-list__item--link {
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-          background-color: $nav-06;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon {
-              fill: $inverse-01;
-            }
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & {
-          background-color: $nav-04;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon {
-              fill: $inverse-01;
-            }
-          }
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & {
-          background-color: $nav-08;
-
-          &:hover {
-            color: $inverse-01;
-
-            .#{$prefix}--parent-item__link--taxonomy-icon {
-              fill: $inverse-01;
-            }
-          }
-        }
-      }
-
-      .#{$prefix}--nested-list__item--icon svg {
-        fill: $text-01;
-      }
-    }
-
-    .#{$prefix}--nested-list__flyout-menu {
-      @include layer('overlay');
-      display: none;
-      min-width: auto;
-      white-space: nowrap;
-      outline: none;
-      position: absolute;
-      z-index: 9999;
-      color: $inverse-01;
-
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 120%;
-        height: 120%;
-        top: -3rem;
-        left: 0;
-        padding: 2rem;
-        z-index: -1;
-      }
-    }
-
-    .#{$prefix}--nested-list__flyout-menu--displayed {
-      @include reset;
-      display: block;
-      border-left: 1px solid $ui-04;
-    }
-
-    .#{$prefix}--flyout-menu__item--link {
-      @include typescale('zeta');
-      padding: 0 1.75rem 0 1rem;
-      color: $text-01;
-      text-decoration: none;
-    }
-
-    .#{$prefix}--flyout-menu__item {
-      @include reset;
-      background-color: $ui-01;
-      margin: 0;
-      height: rem(37px);
-      display: flex;
-      align-items: center;
-
-      &:hover {
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & .#{$prefix}--flyout-menu__item--link {
-          color: $nav-06;
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & .#{$prefix}--flyout-menu__item--link {
-          color: $nav-04;
-        }
-
-        .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & .#{$prefix}--flyout-menu__item--link {
-          color: $nav-08;
-        }
-      }
-    }
-
-    .#{$prefix}--flyout-menu__item.#{$prefix}--active-list-item {
-      .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-        background-color: $nav-06;
-
-        & .#{$prefix}--flyout-menu__item--link {
-          color: $inverse-01;
-
-          &:hover {
-            color: $inverse-01;
-          }
-        }
-      }
-
-      .#{$prefix}--left-nav__main-nav[data-left-nav-list='services'] & {
-        background-color: $nav-04;
-
-        & .#{$prefix}--flyout-menu__item--link {
-          color: $inverse-01;
-
-          &:hover {
-            color: $inverse-01;
-          }
-        }
-      }
-
-      .#{$prefix}--left-nav__main-nav[data-left-nav-list='infrastructure'] & {
-        background-color: $nav-08;
-
-        & .#{$prefix}--flyout-menu__item--link {
-          color: $inverse-01;
-
-          &:hover {
-            color: $inverse-01;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include exports('left-nav') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include left-nav;
-  }
-}
diff --git a/scss/components/unified-header/_mixins.scss b/scss/components/unified-header/_mixins.scss
deleted file mode 100644
index e94de7e101e1..000000000000
--- a/scss/components/unified-header/_mixins.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin list {
-  display: flex;
-  flex-direction: column;
-  margin-top: 0;
-}
-
-@mixin link-style {
-  &:hover {
-    .#{$prefix}--left-nav__main-nav[data-left-nav-list='apps'] & {
-      color: $nav-06;
-
-      .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-        fill: $nav-06;
-      }
-    }
-
-    .#{$prefix}--left-nav__main-nav[data-left-nav-list='Services'] & {
-      color: $nav-04;
-
-      .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-        fill: $nav-04;
-      }
-    }
-
-    .#{$prefix}--left-nav__main-nav[data-left-nav-list='Infrastructure'] & {
-      color: $nav-08;
-
-      .#{$prefix}--left-nav-list__item-link--taxonomy-icon {
-        fill: $nav-08;
-      }
-    }
-  }
-}
diff --git a/scss/components/unified-header/_topnav.scss b/scss/components/unified-header/_topnav.scss
deleted file mode 100644
index d5914b4ad62b..000000000000
--- a/scss/components/unified-header/_topnav.scss
+++ /dev/null
@@ -1,437 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import 'mixins';
-
-@mixin topnav {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--top-nav {
-      @include reset;
-      @include font-family;
-      display: flex;
-      justify-content: space-between;
-      background-color: $nav-01;
-      width: 100%;
-      height: rem(36px);
-      padding: 0 1rem;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9500;
-    }
-
-    .#{$prefix}--top-nav__left-container,
-    .#{$prefix}--top-nav__right-container {
-      @include reset;
-      list-style: none;
-      display: flex;
-      align-items: center;
-      min-width: 50%;
-    }
-
-    .#{$prefix}--top-nav__left-container,
-    .#{$prefix}--top-nav__right-container {
-      .#{$prefix}--dropdown {
-        @include typescale('omega');
-        list-style: none;
-        background-color: $nav-01;
-        color: $inverse-01;
-        height: 100%;
-        display: flex;
-        align-items: center;
-      }
-
-      .#{$prefix}--dropdown__arrow {
-        fill: $inverse-01;
-        right: 0.75rem;
-        width: rem(12px);
-        height: rem(24px);
-      }
-
-      .#{$prefix}--dropdown-text {
-        @include font-smoothing;
-        max-width: rem(200px);
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        font-weight: 600;
-      }
-
-      .#{$prefix}--dropdown-list {
-        width: auto;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        background-color: $color__navy-gray-3; // anna
-        transition: $transition--base all $carbon--standard-easing;
-        display: flex;
-        flex-direction: column;
-        opacity: 0;
-        visibility: hidden;
-        transform: translateY(-50%);
-        z-index: -1;
-      }
-
-      .#{$prefix}--dropdown-item {
-        min-width: rem(170px);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        &:hover {
-          background-color: $color__blue-30; // anna
-          color: $text-01;
-        }
-      }
-
-      .#{$prefix}--dropdown-link {
-        color: $inverse-01;
-      }
-    }
-
-    .#{$prefix}--top-nav__left-container,
-    .#{$prefix}--top-nav__right-container {
-      .#{$prefix}--dropdown--open {
-        background-color: $color__navy-gray-3; // anna
-      }
-
-      .#{$prefix}--dropdown--open .#{$prefix}--dropdown-text {
-        color: $color__blue-30; // anna
-      }
-
-      .#{$prefix}--dropdown--open .#{$prefix}--dropdown__arrow {
-        fill: $color__blue-30; // anna
-      }
-
-      .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-        transform: translateY(0);
-        opacity: 1;
-        visibility: visible;
-        background-color: $color__navy-gray-3; // anna
-      }
-    }
-
-    .#{$prefix}--top-nav__left-container__link {
-      @include typescale('legal');
-      @include font-smoothing;
-      display: flex;
-      justify-content: flex-start;
-      background-color: $nav-01;
-      align-items: flex-start;
-      text-decoration: none;
-      color: $inverse-01;
-      font-weight: 600;
-      margin-right: 1rem;
-
-      &:hover,
-      &:focus {
-        color: $color__blue-30; // anna
-
-        .#{$prefix}--top-nav__left-container__link--icon {
-          fill: $color__blue-30; // anna
-        }
-      }
-    }
-
-    .#{$prefix}--top-nav__left-container__link--icon {
-      width: 0.675rem;
-      height: 0.7rem;
-      fill: $inverse-01;
-      margin-right: 0.3rem;
-    }
-
-    .#{$prefix}--top-nav__left-container__item {
-      &:focus {
-        outline: 0;
-      }
-    }
-
-    .#{$prefix}--top-nav__left-container {
-      .#{$prefix}--dropdown {
-        &:focus,
-        &:hover {
-          outline: 0;
-
-          .#{$prefix}--dropdown__arrow use {
-            fill: $color__blue-30; // anna
-          }
-
-          .#{$prefix}--dropdown-text {
-            background-color: $color__navy-gray-3; // anna
-            color: $color__blue-30; // anna
-          }
-        }
-      }
-
-      .#{$prefix}--dropdown-list {
-        padding-bottom: 0.5rem;
-      }
-
-      .#{$prefix}--dropdown__arrow {
-        top: 0.3rem;
-        left: 0.75rem;
-        opacity: 0;
-        transform: rotate(0);
-        animation: $transition--base cubic-bezier(0.64, 0.57, 0.67, 1.53) 650ms 1 normal forwards fade;
-      }
-
-      .#{$prefix}--dropdown-text {
-        animation: $transition--base cubic-bezier(0.6, 0.22, 0.38, 2.03) 1 normal forwards pop-in;
-        opacity: 0;
-        transform: scale(0.5);
-        padding: 0.725rem 1rem 0.725rem 2rem;
-      }
-
-      .#{$prefix}--dropdown-link {
-        padding: 0.6rem 0.75rem;
-
-        &:hover,
-        &:focus {
-          background-color: $color__blue-30; // anna
-          color: $color__blue-90; // anna
-        }
-      }
-    }
-
-    .#{$prefix}--top-nav__right-container {
-      justify-content: flex-end;
-    }
-
-    .#{$prefix}--top-nav__right-container__item[data-trial],
-    .#{$prefix}--top-nav__right-container__item[data-credit] {
-      .#{$prefix}--dropdown-text {
-        padding: 0.75rem 2rem 0.75rem 1rem;
-        color: $inverse-01;
-      }
-
-      .#{$prefix}--dropdown-list {
-        left: initial;
-        outline: 0;
-        right: 0;
-        min-width: rem(325px);
-        transform: translateY(-10%);
-      }
-
-      .#{$prefix}--dropdown__arrow {
-        top: 0.5rem;
-      }
-
-      .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-        transform: translateY(0);
-      }
-
-      .#{$prefix}--dropdown--open .#{$prefix}--dropdown-text {
-        color: $color__blue-30; // anna
-      }
-
-      .#{$prefix}--dropdown:hover,
-      .#{$prefix}--dropdown:focus {
-        outline: 0;
-        background-color: $color__navy-gray-3; // anna
-
-        .#{$prefix}--dropdown-text {
-          color: $color__blue-30; // anna
-        }
-
-        .#{$prefix}--dropdown__arrow use {
-          fill: $color__blue-30; // anna
-        }
-      }
-
-      .#{$prefix}--dropdown__trial-content,
-      .#{$prefix}--dropdown__credit-content {
-        cursor: auto;
-        display: flex;
-        flex-direction: column;
-        padding: 1rem;
-
-        &:focus,
-        &:hover {
-          outline: 0;
-          background-color: initial;
-          color: $inverse-01;
-        }
-      }
-
-      .#{$prefix}--dropdown__trial-content--desc,
-      .#{$prefix}--dropdown__credit-content--desc {
-        margin-bottom: 1rem;
-      }
-
-      .#{$prefix}--dropdown__trial-content .#{$prefix}--link,
-      .#{$prefix}--dropdown__credit-content .#{$prefix}--link {
-        @include typescale('legal');
-        color: $color__blue-30; // anna
-        margin-top: 1rem;
-        text-align: center;
-      }
-
-      .#{$prefix}--dropdown__trial-content--desc {
-        @include typescale('omega');
-      }
-
-      .#{$prefix}--dropdown__credit-content div {
-        .#{$prefix}--dropdown__credit-content--heading {
-          @include font-smoothing;
-          @include typescale('omega');
-          font-weight: 600;
-        }
-
-        .#{$prefix}--dropdown__credit-content--desc {
-          @include typescale('zeta');
-        }
-
-        &:last-child {
-          .#{$prefix}--dropdown__credit-content--desc {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--top-nav__right-container__item:last-child {
-      .#{$prefix}--dropdown {
-        &:focus,
-        &:hover {
-          background-color: $color__navy-gray-3; // anna
-          outline: 0;
-        }
-      }
-
-      .#{$prefix}--dropdown__arrow {
-        transform-origin: 50% 40%;
-
-        use {
-          fill: $color__blue-30; // anna
-        }
-      }
-
-      .#{$prefix}--dropdown-text--profile-image {
-        height: rem(36px);
-        width: rem(36px);
-        min-height: rem(36px);
-        min-width: rem(36px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0rem 1rem;
-      }
-
-      .#{$prefix}--dropdown-text--profile-image .profile-image {
-        display: flex;
-        align-items: center;
-        border-radius: 50%;
-        overflow: hidden;
-
-        svg,
-        img {
-          fill: $inverse-01;
-          max-height: 1.5rem;
-          max-width: 1.5rem;
-        }
-      }
-
-      .#{$prefix}--dropdown-list {
-        right: 0;
-        left: inherit;
-        padding: 1rem;
-        min-width: 225px;
-      }
-
-      .#{$prefix}--dropdown-item {
-        display: flex;
-        justify-content: space-between;
-
-        svg {
-          min-height: 3rem;
-          min-width: 3rem;
-        }
-
-        &:hover {
-          background-color: inherit;
-          color: inherit;
-        }
-      }
-    }
-
-    .#{$prefix}--top-nav__right-container__item[data-credit] .#{$prefix}--dropdown-list {
-      min-width: 0;
-      width: 100%;
-    }
-
-    .#{$prefix}--dropdown__profile-dropdown--picture {
-      max-width: 3rem;
-      max-height: 3rem;
-      border-radius: 50%;
-      width: 100%;
-      fill: $inverse-01;
-    }
-
-    .#{$prefix}--dropdown__profile-dropdown--information {
-      margin-left: 1rem;
-
-      p {
-        @include font-smoothing;
-        @include typescale('zeta');
-        font-weight: 600;
-      }
-    }
-
-    .#{$prefix}--dropdown__profile-dropdown__container {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      a {
-        @include typescale('omega');
-        color: $color__blue-30; // anna
-
-        &:hover {
-          color: $color__blue-20; // anna
-        }
-      }
-
-      p {
-        padding: 0 0.5rem;
-      }
-    }
-
-    @keyframes pop-in {
-      100% {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-
-    @keyframes fade {
-      100% {
-        opacity: 1;
-      }
-    }
-
-    @for $i from 1 to 4 {
-      .#{$prefix}--top-nav__left-container--item:nth-child(#{$i}) {
-        .#{$prefix}--dropdown-text {
-          animation-delay: ($i * 100ms) + 100ms;
-        }
-      }
-    }
-  }
-}
-
-@include exports('topnav') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include topnav;
-  }
-}
diff --git a/scss/components/unified-header/_unified-header.scss b/scss/components/unified-header/_unified-header.scss
deleted file mode 100644
index 2ab85c3bc5c8..000000000000
--- a/scss/components/unified-header/_unified-header.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/functions';
-@import '../../globals/scss/layer';
-@import '../../globals/scss/import-once';
-@import '../../globals/scss/css--reset';
-@import 'mixins';
-@import 'left-nav-trigger';
-@import 'global-header';
-@import 'topnav';
-@import 'left-nav';
-@import 'account-switcher';
-
-@mixin unified-header {
-  @include deprecate(
-    'The `unified-header` component in `carbon-components` has been deprecated. ' +
-      'It will be removed in the next major release.'
-  ) {
-    .#{$prefix}--unified-header {
-      @include reset;
-      position: fixed;
-      z-index: z('header');
-    }
-  }
-}
-
-@include exports('unified-header') {
-  @if not(feature-flag-enabled('breaking-changes-x')) {
-    @include unified-header;
-  }
-}
diff --git a/scss/globals/grid/_experimental.scss b/scss/globals/grid/_experimental.scss
deleted file mode 100644
index 5a16533a24b6..000000000000
--- a/scss/globals/grid/_experimental.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../scss/functions';
-@import '../scss/vendor/@carbon/elements/scss/layout/convert';
-
-@if not(feature-flag-enabled('grid-columns-16')) {
-  $carbon--grid-breakpoints: (
-    sm: (
-      columns: 4,
-      margin: 0,
-      width: carbon--rem(320px),
-    ),
-    md: (
-      columns: 8,
-      margin: carbon--rem(16px),
-      width: carbon--rem(672px),
-    ),
-    lg: (
-      columns: 12,
-      margin: carbon--rem(12px),
-      width: carbon--rem(1056px),
-    ),
-    xlg: (
-      columns: 12,
-      margin: carbon--rem(12px),
-      width: carbon--rem(1312px),
-    ),
-    max: (
-      columns: 12,
-      margin: carbon--rem(16px),
-      width: carbon--rem(1584px),
-    ),
-  ) !global;
-}
-
-@import '../scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '../scss/vendor/@carbon/elements/scss/grid/container';
-@import '../scss/vendor/@carbon/elements/scss/grid/row';
-@import '../scss/vendor/@carbon/elements/scss/grid/col';
-
-@mixin grid--x {
-  // Fluid variant of the grid.
-  .#{$prefix}--fluid-grid {
-    @include carbon--make-container();
-  }
-
-  // Default container class for a grid. Includes max-width for all breakpoints
-  .#{$prefix}--grid {
-    @include carbon--make-container();
-    @include carbon--make-container-max-widths();
-  }
-
-  .#{$prefix}--grid--full-width {
-    @include carbon--largest-breakpoint() {
-      max-width: 100%;
-    }
-  }
-
-  .#{$prefix}--row {
-    @include carbon--make-row();
-  }
-
-  @include carbon--make-grid-columns($carbon--grid-breakpoints, $carbon--grid-gutter);
-}
diff --git a/scss/globals/grid/_grid.scss b/scss/globals/grid/_grid.scss
deleted file mode 100644
index 6ab887dc29ae..000000000000
--- a/scss/globals/grid/_grid.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../scss/feature-flags';
-@import '../scss/functions';
-@import '../scss/mixins';
-@import './classic/classic';
-@import './experimental';
-
-@include exports('grid') {
-  @if feature-flag-enabled('grid') {
-    @include grid--x;
-  } @else {
-    @include grid;
-  }
-}
diff --git a/scss/globals/grid/classic/_classic.scss b/scss/globals/grid/classic/_classic.scss
deleted file mode 100644
index d8e5c41b41c1..000000000000
--- a/scss/globals/grid/classic/_classic.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../scss/vars';
-
-$max-width: 1600px;
-$columns: 12;
-
-$grid-breakpoints: (
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1600px,
-);
-$gutter-breakpoints: (
-  xs: 5px,
-  sm: 10px,
-);
-$grid-gutter-breakpoints: (
-  xs: 3%,
-  sm: 5%,
-);
-
-@mixin grid {
-  .#{$prefix}--grid {
-    margin-left: grid-gutter('xs');
-    margin-right: grid-gutter('xs');
-    padding-left: gutter('xs');
-    padding-right: gutter('xs');
-
-    @media (min-width: breakpoint('sm')) {
-      margin-left: grid-gutter('sm');
-      margin-right: grid-gutter('sm');
-      padding-left: gutter('sm');
-      padding-right: gutter('sm');
-    }
-
-    @media (min-width: breakpoint('xxl')) {
-      margin: 0 auto;
-    }
-
-    &.max {
-      max-width: $max-width;
-    }
-  }
-
-  .#{$prefix}--row {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 gutter('xs') * -1;
-
-    @media (min-width: breakpoint('sm')) {
-      margin: 0 gutter('sm') * -1;
-    }
-  }
-
-  [class*='#{$prefix}--col'] {
-    position: relative;
-    width: 100%;
-    padding: 0 gutter('xs');
-
-    @media (min-width: breakpoint('sm')) {
-      padding: 0 gutter('sm');
-    }
-  }
-
-  @for $i from 1 through $columns {
-    .#{$prefix}--col-xs-#{$i} {
-      flex: 0 0 (100% * $i / $columns);
-      max-width: (100% * $i / $columns);
-    }
-
-    .#{$prefix}--offset-xs-#{$i} {
-      margin-left: (100% * $i / $columns);
-    }
-  }
-
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @media (min-width: breakpoint($breakpoint)) {
-      .#{$prefix}--col-#{$breakpoint}-auto {
-        flex: 0 0 auto;
-        width: auto;
-      }
-
-      @for $i from 1 through $columns {
-        .#{$prefix}--col-#{$breakpoint}-#{$i} {
-          flex: 0 0 (100% * $i / $columns);
-          max-width: (100% * $i / $columns);
-        }
-
-        .#{$prefix}--offset-#{$breakpoint}-#{$i} {
-          margin-left: (100% * $i / $columns);
-        }
-      }
-    }
-  }
-
-  // deprecated
-  $gutter-size: 10px;
-
-  .#{$prefix}--col-xs,
-  .#{$prefix}--col-sm,
-  .#{$prefix}--col-md,
-  .#{$prefix}--col-lg {
-    flex-basis: 0;
-    flex: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-}
-
-// map functions
-@function breakpoint($breakpoint) {
-  @if map-has-key($grid-breakpoints, $breakpoint) {
-    @return map-get($grid-breakpoints, $breakpoint);
-  } @else {
-    @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
-  }
-}
-
-@function gutter($breakpoint) {
-  @if map-has-key($gutter-breakpoints, $breakpoint) {
-    @return map-get($gutter-breakpoints, $breakpoint);
-  } @else {
-    @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
-  }
-}
-
-@function grid-gutter($breakpoint) {
-  @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
-    @return map-get($grid-gutter-breakpoints, $breakpoint);
-  } @else {
-    @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
-  }
-}
-
-@mixin column-size($col-num) {
-  flex: 0 0 (100% * $col-num / $columns);
-  max-width: (100% * $col-num / $columns);
-}
diff --git a/scss/globals/scss/_colors.scss b/scss/globals/scss/_colors.scss
deleted file mode 100644
index 22f572034c87..000000000000
--- a/scss/globals/scss/_colors.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//--------------------
-// EXPERIMENTAL COLORS
-//--------------------
-@import './vendor/@carbon/colors/scss/colors';
-
-//--------------------
-// CLASSIC COLORS
-//--------------------
-
-// UI Color Scheme
-$color__blue-20: #7cc7ff !default;
-$color__blue-30: #5aaafa !default;
-$color__blue-40: #5596e6 !default;
-$color__blue-50: #4178be !default;
-$color__blue-90: #152935 !default;
-$color__navy-gray-1: #0f212e !default;
-$color__navy-gray-2: #20343e !default;
-$color__navy-gray-3: #2d3f49 !default;
-$color__navy-gray-4: #394b54 !default;
-$color__navy-gray-5: #42535c !default;
-$color__navy-gray-6: #5a6872 !default;
-$color__navy-gray-7: #8c9ba5 !default;
-$color__navy-gray-8: #dfe6eb !default;
-$color__navy-gray-9: #eff2f5 !default;
-$color__white: #fff !default;
-
-// Light UI Color Scheme
-$color__blue-51: #3d70b2 !default;
-$color__gray-1: #dfe3e6 !default;
-$color__gray-2: #f0f3f6 !default;
-$color__gray-3: #f5f7fa !default;
-
-// Accent Colors
-$color__blue-10: #c0e6ff !default;
-$color__blue-60: #325c80 !default;
-$color__teal-10: #a7fae6 !default;
-$color__teal-20: #6eedd8 !default;
-$color__teal-30: #41d6c3 !default;
-$color__teal-40: #00b4a0 !default;
-$color__teal-50: #008571 !default;
-$color__teal-60: #006d5d !default;
-$color__green-10: #c8f08f !default;
-$color__green-20: #b4e051 !default;
-$color__green-30: #8cd211 !default;
-$color__green-40: #5aa700 !default;
-$color__green-50: #4b8400 !default;
-$color__green-60: #2d660a !default;
-$color__yellow-10: #fde876 !default;
-$color__yellow-20: #fdd600 !default;
-$color__yellow-30: #efc100 !default;
-$color__yellow-60: #735f00 !default;
-$color__orange-10: #ffd4a0 !default;
-$color__orange-20: #ffa573 !default;
-$color__orange-30: #ff7832 !default;
-$color__orange-60: #a53725 !default;
-$color__red-10: #ffd2dd !default;
-$color__red-30: #ff7d87 !default;
-$color__red-40: #ff5050 !default;
-$color__red-50: #e71d32 !default;
-$color__red-60: #ad1625 !default;
-$color__purple-10: #eed2ff !default;
-$color__purple-20: #d7aaff !default;
-$color__purple-30: #ba8ff7 !default;
-$color__purple-40: #af6ee8 !default;
-$color__purple-60: #734098 !default;
diff --git a/scss/globals/scss/_css--body.scss b/scss/globals/scss/_css--body.scss
deleted file mode 100644
index e2423005436b..000000000000
--- a/scss/globals/scss/_css--body.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-@import 'typography';
-@import 'css--reset';
-@import 'import-once';
-
-@mixin css-body {
-  body {
-    @include reset;
-    @include font-family;
-    color: $text-01;
-    background-color: $ui-02;
-    line-height: 1;
-  }
-}
-
-@include exports('css--body') {
-  @if global-variable-exists('css--body') == false or $css--body == true {
-    @include css-body;
-  }
-}
diff --git a/scss/globals/scss/_css--font-face.scss b/scss/globals/scss/_css--font-face.scss
deleted file mode 100644
index ae2ebd7e2b4e..000000000000
--- a/scss/globals/scss/_css--font-face.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !default;
-
-@import 'import-once';
-@import 'css--plex-core';
-@import 'helper-mixins';
-@import 'feature-flags';
-@import './vendor/@carbon/elements/scss/type/font-face/mono';
-@import './vendor/@carbon/elements/scss/type/font-face/sans';
-
-@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 check-default-font-path {
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: normal;
-        font-weight: 300;
-        src: url('#{$font-path}/helvetica-neue-light.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-light.woff') format('woff');
-      }
-
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: italic;
-        font-weight: 300;
-        src: url('#{$font-path}/helvetica-neue-light-italic.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-light-italic.woff') format('woff');
-      }
-
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: normal;
-        font-weight: 400;
-        src: url('#{$font-path}/helvetica-neue-roman.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-roman.woff') format('woff');
-      }
-
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: italic;
-        font-weight: 400;
-        src: url('#{$font-path}/helvetica-neue-roman-italic.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-roman-italic.woff') format('woff');
-      }
-
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: normal;
-        font-weight: 700;
-        src: url('#{$font-path}/helvetica-neue-bold.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-bold.woff') format('woff');
-      }
-
-      @font-face {
-        font-family: 'IBM Helvetica';
-        font-style: italic;
-        font-weight: 700;
-        src: url('#{$font-path}/helvetica-neue-bold-italic.woff2') format('woff2'),
-          url('#{$font-path}/helvetica-neue-bold-italic.woff') format('woff');
-      }
-    }
-  }
-}
-
-@include exports('css--font-face') {
-  @if not global-variable-exists('css--font-face') or $css--font-face == true {
-    @if global-variable-exists('css--plex') and $css--plex == true {
-      @if feature-flag-enabled('components-x') {
-        @include carbon--font-face-mono();
-        @include carbon--font-face-sans();
-      } @else {
-        @include plex-font-face;
-      }
-    } @else {
-      @include helvetica-font-face;
-    }
-  }
-}
diff --git a/scss/globals/scss/_css--helpers.scss b/scss/globals/scss/_css--helpers.scss
deleted file mode 100644
index 3ad38781b4e9..000000000000
--- a/scss/globals/scss/_css--helpers.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-@import 'css--reset';
-@import 'typography';
-@import 'import-once';
-
-@mixin css-helpers {
-  .#{$prefix}--assistive-text,
-  .#{$prefix}--visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-    visibility: visible;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--body {
-    @include reset;
-    @include font-family;
-    color: $text-01;
-    background-color: $ui-02;
-    line-height: 1;
-  }
-}
-
-@include exports('css--helpers') {
-  @if global-variable-exists('css--helpers') == false or $css--helpers == true {
-    @include css-helpers;
-  }
-}
diff --git a/scss/globals/scss/_css--plex-core.scss b/scss/globals/scss/_css--plex-core.scss
deleted file mode 100644
index 097f523a8008..000000000000
--- a/scss/globals/scss/_css--plex-core.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$font-path: 'https://unpkg.com/carbon-components@latest/src/globals/fonts' !default;
-
-@import 'import-once';
-
-$unicodes: (
-  Pi:
-    'U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC',
-  Latin3: 'U+0102-0103, U+1EA0-1EF9, U+20AB',
-  Latin2: 'U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02',
-  Latin1: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02',
-);
-
-$families: (
-  'Mono': unquote("'ibm-plex-mono'"),
-  'Sans': unquote("'ibm-plex-sans'"),
-);
-
-$fallbacks: (
-  '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"),
-);
-
-$weights: (
-  'Light': (
-    font-style: normal,
-    font-weight: 300,
-  ),
-  'Regular': (
-    font-style: normal,
-    font-weight: 400,
-  ),
-  'SemiBold': (
-    font-style: normal,
-    font-weight: 600,
-  ),
-) !default;
-
-@mixin check-default-font-path {
-  @if (str-index($font-path, 'https://unpkg.com/') == 1) {
-    @warn 'The default font path (#{$font-path}) should be used only for demonstration/evaluation purposes. For production applications, please host fonts in your own CDN and change `$font-path` accordingly.';
-    @content;
-  } @else {
-    @content;
-  }
-}
-
-@mixin plex-font-face {
-  @include check-default-font-path {
-    @each $family, $name in $families {
-      @each $weight, $styles in $weights {
-        @font-face {
-          font-family: $name;
-          font-style: map-get($styles, 'font-style');
-          font-weight: map-get($styles, 'font-weight');
-          src: url('#{$font-path}/IBMPlex#{$family}-#{$weight}.woff') format('woff');
-        }
-
-        @each $unicode, $range in $unicodes {
-          @font-face {
-            font-family: $name;
-            font-style: map-get($styles, 'font-style');
-            font-weight: map-get($styles, 'font-weight');
-            src: url('#{$font-path}/IBMPlex#{$family}-#{$weight}-#{$unicode}.woff2') format('woff2');
-            unicode-range: map-get($unicodes, $unicode);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/scss/globals/scss/_css--reset.scss b/scss/globals/scss/_css--reset.scss
deleted file mode 100644
index 468af620203d..000000000000
--- a/scss/globals/scss/_css--reset.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'functions';
-@import 'import-once';
-@import './vendor/@carbon/elements/scss/type/reset';
-
-@mixin reset {
-  @if global-variable-exists(css--reset) == false or $css--reset == false {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font-family: inherit;
-    vertical-align: baseline;
-
-    & > *,
-    & > *:before,
-    & > *:after {
-      box-sizing: inherit;
-    }
-  }
-}
-
-@include exports('css--reset') {
-  @if global-variable-exists(css--reset) == false or $css--reset == true {
-    @if feature-flag-enabled('components-x') {
-      @include carbon--type-reset;
-    }
-
-    // http://cssreset.com/scripts/eric-meyer-reset-css/
-    html,
-    body,
-    div,
-    span,
-    applet,
-    object,
-    iframe,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    blockquote,
-    pre,
-    a,
-    abbr,
-    acronym,
-    address,
-    big,
-    cite,
-    code,
-    del,
-    dfn,
-    em,
-    img,
-    ins,
-    kbd,
-    q,
-    s,
-    samp,
-    small,
-    strike,
-    strong,
-    sub,
-    sup,
-    tt,
-    var,
-    b,
-    u,
-    i,
-    center,
-    dl,
-    dt,
-    dd,
-    ol,
-    ul,
-    li,
-    fieldset,
-    form,
-    label,
-    legend,
-    table,
-    caption,
-    tbody,
-    tfoot,
-    thead,
-    tr,
-    th,
-    td,
-    article,
-    aside,
-    canvas,
-    details,
-    embed,
-    figure,
-    figcaption,
-    footer,
-    header,
-    hgroup,
-    menu,
-    nav,
-    output,
-    ruby,
-    section,
-    summary,
-    time,
-    mark,
-    audio,
-    video {
-      margin: 0;
-      padding: 0;
-      border: 0;
-      font-size: 100%;
-      font: inherit;
-      vertical-align: baseline;
-    }
-
-    // Chrome 62 fix
-    button,
-    input[type='button'],
-    input[type='submit'],
-    input[type='reset'],
-    input[type='file'] {
-      border-radius: 0;
-    }
-
-    input[type='text']::-ms-clear {
-      display: none;
-    }
-
-    /* HTML5 display-role reset for older browsers */
-    article,
-    aside,
-    details,
-    figcaption,
-    figure,
-    footer,
-    header,
-    hgroup,
-    menu,
-    nav,
-    section {
-      display: block;
-    }
-
-    body {
-      line-height: 1;
-    }
-
-    sup {
-      vertical-align: super;
-    }
-
-    sub {
-      vertical-align: sub;
-    }
-
-    ol,
-    ul {
-      list-style: none;
-    }
-
-    blockquote,
-    q {
-      quotes: none;
-    }
-
-    blockquote:before,
-    blockquote:after,
-    q:before,
-    q:after {
-      content: '';
-      content: none;
-    }
-
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-}
diff --git a/scss/globals/scss/_css--typography.scss b/scss/globals/scss/_css--typography.scss
deleted file mode 100644
index a45b8dfff48c..000000000000
--- a/scss/globals/scss/_css--typography.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-@import 'typography';
-@import 'css--reset';
-@import 'import-once';
-
-@mixin typography {
-  // really big
-  .#{$prefix}--type-giga {
-    @include typescale('giga');
-    @include reset;
-    @include line-height('heading');
-    font-weight: 300;
-  }
-
-  .#{$prefix}--type-mega {
-    @include typescale('mega');
-    @include reset;
-    @include line-height('heading');
-    font-weight: 300;
-  }
-
-  // really small
-  .#{$prefix}--type-omega {
-    @include typescale('omega');
-    @include reset;
-    @include line-height('heading');
-    font-weight: 600;
-  }
-
-  .#{$prefix}--type-caption {
-    @include typescale('caption');
-    @include reset;
-    @include line-height('body');
-    font-weight: 400;
-  }
-
-  .#{$prefix}--type-legal {
-    @include typescale('legal');
-    @include reset;
-    @include line-height('body');
-    font-weight: 400;
-  }
-
-  .#{$prefix}--type-caps {
-    text-transform: uppercase;
-  }
-
-  strong,
-  .#{$prefix}--type-strong {
-    @include reset;
-    font-weight: 700;
-  }
-
-  p {
-    @include reset;
-    @include typescale('p');
-    @include line-height('body');
-    font-weight: 400;
-  }
-
-  em {
-    @include reset;
-    font-style: italic;
-  }
-
-  a {
-    @include reset;
-    color: $brand-01;
-  }
-
-  h1,
-  .#{$prefix}--type-alpha {
-    @include reset;
-    @include typescale('alpha');
-    @include line-height('heading');
-    font-weight: 300;
-  }
-
-  h2,
-  .#{$prefix}--type-beta {
-    @include reset;
-    @include typescale('beta');
-    @include line-height('heading');
-    font-weight: 300;
-  }
-
-  h3,
-  .#{$prefix}--type-gamma {
-    @include reset;
-    @include typescale('gamma');
-    @include line-height('heading');
-    font-weight: 300;
-  }
-
-  h4,
-  .#{$prefix}--type-delta {
-    @include reset;
-    @include typescale('delta');
-    @include line-height('heading');
-    font-weight: 600;
-  }
-
-  h5,
-  .#{$prefix}--type-epsilon {
-    @include reset;
-    @include typescale('epsilon');
-    @include line-height('heading');
-    font-weight: 600;
-  }
-
-  h6,
-  .#{$prefix}--type-zeta {
-    @include reset;
-    @include typescale('zeta');
-    @include line-height('heading');
-    font-weight: 600;
-  }
-}
-
-@include exports('css--typography') {
-  @if global-variable-exists('css--typography') == false or $css--typography == true {
-    @include typography;
-  }
-}
diff --git a/scss/globals/scss/_feature-flags.scss b/scss/globals/scss/_feature-flags.scss
deleted file mode 100644
index 23b9032d4e17..000000000000
--- a/scss/globals/scss/_feature-flags.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-------------------------
-// 🎌 Feature Flags
-//-------------------------
-
-// Initialize our feature flag map with default values
-$feature-flags: () !default;
-
-// Default feature flag values
-$default-feature-flags: (
-  components-x: false,
-  breaking-changes-x: false,
-  ui-shell: false,
-  grid: false,
-  grid-columns-16: false,
-  grid--fallback: false,
-);
-
-$did-warn-diverged-feature-flags: false !default !global;
-
-/// Look for user-defined feature flags that are different from default ones,
-/// and warn them before merging them.
-/// @param {Map} $dst - The feature flags to merge to (default feature flags).
-/// @param {Map} $src - The feature flags to merge from (user-defined feature flags).
-/// @returns {Map} - The result of `map-merge($dst, $src)`.
-@function merge-feature-flags($dst, $src) {
-  @if (not $did-warn-diverged-feature-flags) {
-    $diverged: ();
-
-    @each $name, $value in $src {
-      @if (map-has-key($dst, $name) == true and map-get($dst, $name) != $value) {
-        $diverged: append($diverged, $name);
-      }
-    }
-
-    @if (length($diverged) > 0) {
-      @warn 'Usage of non-default feature flags was found: #{$diverged}. ' +
-        'Feature/code under non-default feature flags are either experimental, deprecated, or support for edge cases. ' +
-        'They are subject to change any time. Use them at your own risk.';
-      $did-warn-diverged-feature-flags: true !global;
-    }
-  }
-
-  @return map-merge($dst, $src);
-}
-
-$feature-flags: merge-feature-flags($default-feature-flags, $feature-flags);
-
-@if map-get($feature-flags, grid) != true {
-  // We supported a flag for experimental grid in the past that we want to keep
-  // supporting till our next major release. These two @if statements will assign
-  // these values over into the map if they are defined.
-  @if global-variable-exists(css--use-experimental-grid) == true {
-    $feature-flags: map-merge(
-      $feature-flags,
-      (
-        grid: $css--use-experimental-grid,
-      )
-    );
-  }
-
-  @if global-variable-exists(css--use-experimental-grid-fallback) == true {
-    $feature-flags: map-merge(
-      $feature-flags,
-      (
-        grid--fallback: $css--use-experimental-grid-fallback,
-      )
-    );
-  }
-}
diff --git a/scss/globals/scss/_functions.scss b/scss/globals/scss/_functions.scss
deleted file mode 100644
index de425d05a284..000000000000
--- a/scss/globals/scss/_functions.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'feature-flags';
-
-//Used for enabling features
-@function feature-flag-enabled($feature) {
-  @if global-variable-exists(feature-flags) == true and map-get($feature-flags, $feature) == true {
-    @return true;
-  }
-  @return false;
-}
diff --git a/scss/globals/scss/_helper-classes.scss b/scss/globals/scss/_helper-classes.scss
deleted file mode 100644
index 6829aef06003..000000000000
--- a/scss/globals/scss/_helper-classes.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-@import 'import-once';
-
-@include exports('helper-classes') {
-  .#{$prefix}--text-truncate--end {
-    width: 100%;
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .#{$prefix}--text-truncate--front {
-    width: 100%;
-    display: inline-block;
-    direction: rtl;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-}
diff --git a/scss/globals/scss/_helper-mixins.scss b/scss/globals/scss/_helper-mixins.scss
deleted file mode 100644
index 1dc95d167ce7..000000000000
--- a/scss/globals/scss/_helper-mixins.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//----------------------------------------------
-// Mixins
-// ---------------------------------------------
-//
-//   Category             ||  Description
-//   ===========================================
-//   Misc                 ||  General helper @mixins
-//   Deprecated           ||  Not used anymore
-//   ===========================================
-
-//----------------------------------------------
-// Misc
-// ---------------------------------------------
-
-@import 'vars';
-@import 'css--reset';
-@import 'typography';
-@import 'import-once';
-
-@mixin text-overflow($width: false) {
-  display: block;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  // apply a width if width parameter exists
-  @if ($width) {
-    width: $width;
-  }
-}
-
-@mixin placeholder-colors {
-  color: $text-03;
-}
-
-@mixin box-shadow($size: 'small') {
-  // Large - For dropdowns
-  @if ($size == 'large') {
-    box-shadow: 6px 6px 6px 0 $box-shadow;
-  }
-
-  @if ($size == 'small') {
-    box-shadow: 0px 3px 3px 0 $box-shadow;
-  }
-}
-
-@mixin focus-outline($type: 'border') {
-  @if ($type == 'border') {
-    outline: 1px solid $brand-01;
-  }
-
-  @if ($type == 'blurred') {
-    box-shadow: 0 0 0 3px $focus;
-    outline: 1px solid transparent;
-  }
-
-  @if ($type == 'outline') {
-    outline: 2px solid $brand-01;
-    outline-offset: -2px;
-  }
-
-  @if ($type == 'invalid') {
-    outline: 2px solid $support-01;
-    outline-offset: -2px;
-  }
-
-  @if ($type == 'reset') {
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-  }
-}
-
-@mixin rotate($deg, $speed, $origin: center) {
-  transform: rotate($deg);
-  transition: transform $speed;
-  transform-origin: $origin;
-}
-
-@mixin hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-  visibility: visible;
-  white-space: nowrap;
-}
-
-@mixin button-reset($width: true) {
-  @include reset;
-  @include font-family;
-  @include font-smoothing;
-  @include letter-spacing;
-  display: inline-block;
-  background: none;
-  appearance: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-
-  @if ($width == true) {
-    width: 100%;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-}
-
-/**
- * Generic `deprecate` mixin that is being used to indicate that a component is
- * no longer going to be present in the next major release of Carbon.
- */
-@mixin deprecate($reason) {
-  $deprecations--entry: false !default;
-
-  @if ($deprecations--entry == true) {
-    $deprecations--reasons: append($deprecations--reasons, $reason) !global;
-    @content;
-  } @else {
-    @warn 'Deprecated code was found, this code will be removed before the next release of Carbon. REASON: #{$reason}';
-    @content;
-  }
-}
-
-// 💀 Skeleton loading animation
-
-@mixin skeleton {
-  position: relative;
-  border: none;
-  padding: 0;
-  box-shadow: none;
-  pointer-events: none;
-  background: $skeleton;
-
-  &:hover,
-  &:focus,
-  &:active {
-    border: none;
-    outline: none;
-    cursor: default;
-  }
-
-  &:before {
-    content: '';
-    width: 0%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0.3;
-    background: $skeleton;
-    animation: 3000ms ease-in-out skeleton infinite;
-  }
-}
-
-@include exports('skeleton') {
-  @keyframes skeleton {
-    0% {
-      width: 0%;
-      left: 0;
-      right: auto;
-      opacity: 0.3;
-    }
-    20% {
-      width: 100%;
-      left: 0;
-      right: auto;
-      opacity: 1;
-    }
-    28% {
-      width: 100%;
-      left: auto;
-      right: 0;
-    }
-    51% {
-      width: 0%;
-      left: auto;
-      right: 0;
-    }
-    58% {
-      width: 0%;
-      left: auto;
-      right: 0;
-    }
-    82% {
-      width: 100%;
-      left: auto;
-      right: 0;
-    }
-    83% {
-      width: 100%;
-      left: 0;
-      right: auto;
-    }
-    96% {
-      width: 0%;
-      left: 0;
-      right: auto;
-    }
-    100% {
-      width: 0%;
-      left: 0;
-      right: auto;
-      opacity: 0.3;
-    }
-  }
-}
-
-//----------------------------------------------
-// Deprecated
-// ---------------------------------------------
-
-@mixin light-ui {
-  .#{$prefix}--global-light-ui & {
-    @content;
-  }
-}
diff --git a/scss/globals/scss/_import-once.scss b/scss/globals/scss/_import-once.scss
deleted file mode 100644
index 1363dcf39330..000000000000
--- a/scss/globals/scss/_import-once.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$imported-modules: () !default;
-
-/// Module export mixin
-/// This mixin helps making sure a module is imported once and only once.
-/// @access public
-/// @param {String} $name - Name of exported module
-/// @param {Bool} $warn [true] - Warn when module has been already imported
-/// @require $imported-modules
-@mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
-    $imported-modules: append($imported-modules, $name) !global;
-    @content;
-  } @else if $warn == true {
-    @warn 'Module `#{$name}` has already been imported.';
-  }
-}
diff --git a/scss/globals/scss/_layer.scss b/scss/globals/scss/_layer.scss
deleted file mode 100644
index 28a883528fa7..000000000000
--- a/scss/globals/scss/_layer.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-------------------------------------------
-// 📑 Layer
-// ------------------------------------------
-//
-//   Layer                 ||  Elevation
-//   ==========================================
-//   0 - Base              ||  0
-//   1 - Flat              ||  1
-//   2 - Raised            ||  2
-//   3 - Overlay           ||  8
-//   4 - Pop-out           ||  24
-//   ==========================================
-//   Custom: Left Nav      ||  16
-//   Custom: Global Header ||  12
-//
-
-// Box shadow variables
-$box-shadow: rgba(0, 0, 0, 0.1);
-$box-shadow--raised: 0 1px 2px 0 $box-shadow;
-$box-shadow--overlay: 0 4px 8px 0 $box-shadow;
-$box-shadow--sticky-nav: 0 6px 12px 0 $box-shadow;
-$box-shadow--temporary-nav: 0 8px 16px 0 $box-shadow;
-$box-shadow--pop-out: 0 12px 24px 0 $box-shadow;
-
-// Layer box-shadow map
-$layer-shadows: (
-  base: none,
-  flat: none,
-  raised: $box-shadow--raised,
-  overlay: $box-shadow--overlay,
-  pop-out: $box-shadow--pop-out,
-  temporary-nav: $box-shadow--temporary-nav,
-  sticky-nav: $box-shadow--sticky-nav,
-);
-
-// Layer mixin
-@mixin layer($layer) {
-  @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 {
-      @warn '#{$layer} is not a valid layer.';
-    }
-  }
-}
diff --git a/scss/globals/scss/_layout.scss b/scss/globals/scss/_layout.scss
deleted file mode 100644
index 19d1fda9592f..000000000000
--- a/scss/globals/scss/_layout.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'helper-classes';
-
-$breakpoints: (
-  bp--xs--major: 500px,
-  bp--sm--major: 768px,
-  bp--md--major: 992px,
-  bp--lg--major: 1200px,
-  sm: 320px,
-  md: 672px,
-  lg: 1056px,
-  xlg: 1312px,
-  max: 1584px,
-);
-
-$padding: (
-  'mobile': 3%,
-  'xs': 5%,
-);
-
-@function padding($value) {
-  @if map-has-key($padding, $value) {
-    @return map-get($padding, $value);
-  } @else {
-    @warn 'padding: could not find #{$value} in $padding map. Please make sure it is defined';
-  }
-}
-
-//-------------------------------------
-// @mixin: breakpoint($size)
-//-------------------------------------
-// usage:
-// @include breakpoint(bp--md--major) {
-//    - styles here --
-// }
-//-------------------------------------
-
-@mixin breakpoint($size) {
-  @if map-has-key($breakpoints, $size) {
-    @media screen and (min-width: map-get($breakpoints, $size)) {
-      @content;
-    }
-  } @else {
-    @media (min-width: $size) {
-      @content;
-    }
-  }
-}
-
-@mixin max-breakpoint($size) {
-  @if map-has-key($breakpoints, $size) {
-    @media screen and (max-width: map-get($breakpoints, $size)) {
-      @content;
-    }
-  } @else {
-    @media (max-width: $size) {
-      @content;
-    }
-  }
-}
-
-//-------------------------------------
-// @mixin: grid-container
-//-------------------------------------
-// usage:
-// .some-container {
-//   @include grid-container;
-// }
-//-------------------------------------
-
-@mixin grid-container {
-  width: 100%;
-  padding-right: padding(mobile);
-  padding-left: padding(mobile);
-
-  @include breakpoint(bp--xs--major) {
-    padding-right: padding(xs);
-    padding-left: padding(xs);
-  }
-}
-
-$z-indexes: (
-  modal: 9000,
-  overlay: 8000,
-  dropdown: 7000,
-  header: 6000,
-  footer: 5000,
-  hidden: - 1,
-  overflowHidden: - 1,
-  floating: 10000,
-);
-
-//-------------------------------------
-// @function: z($layer)
-//-------------------------------------
-// usage:
-// .modal {
-//   z-index: z('modal');
-// }
-//-------------------------------------
-
-@function z($layer) {
-  @if not map-has-key($z-indexes, $layer) {
-    @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
-  }
-
-  @return map-get($z-indexes, $layer);
-}
diff --git a/scss/globals/scss/_mixins.scss b/scss/globals/scss/_mixins.scss
deleted file mode 100644
index 727da5a7a4e2..000000000000
--- a/scss/globals/scss/_mixins.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'helper-mixins';
-@import '../../components/button/mixins';
-@import '../../components/loading/mixins';
-@import '../../components/notification/mixins';
-@import '../../components/tag/mixins';
-@import '../../components/unified-header/mixins';
-@import '../../components/structured-list/mixins';
-@import '../../components/modal/mixins';
diff --git a/scss/globals/scss/_motion.scss b/scss/globals/scss/_motion.scss
deleted file mode 100644
index 470e3eaabcb5..000000000000
--- a/scss/globals/scss/_motion.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import './vendor/@carbon/elements/scss/motion/motion';
-
-/// Used primarily for removing elements from the screen.
-/// @access public
-$carbon--ease-in: cubic-bezier(0.25, 0, 1, 1);
-
-/// Used for adding elements to the screen or changing on-screen states at a users's input.
-/// @access public
-$carbon--ease-out: cubic-bezier(0, 0, 0.25, 1);
-
-/// Used for the majority of animations.
-/// @access public
-$carbon--standard-easing: cubic-bezier(0.5, 0, 0.1, 1);
-
-/// Base transition duration
-/// @access public
-$transition--base: 250ms;
-
-/// Expansion duration
-/// @access public
-$transition--expansion: 300ms;
-
-// ☠️ Deprecated
-
-/// Default ease-in for components
-/// @access public
-/// @deprecated Updated to `$carbon--ease-in`
-$bx--ease-in: $carbon--ease-in;
-
-/// Default ease-out for components
-/// @access public
-/// @deprecated Updated to `$carbon--ease-out`
-$bx--ease-out: $carbon--ease-out;
-
-/// Standard easing for components
-/// @access public
-/// @deprecated Updated to `$carbon--standard-easing`
-$bx--standard-easing: $carbon--standard-easing;
-
-@if feature-flag-enabled('components-x') {
-  $carbon--ease-in: cubic-bezier(0.2, 0, 1, 0.9);
-  $carbon--ease-out: cubic-bezier(0, 0, 0.38, 0.9);
-  $carbon--standard-easing: cubic-bezier(0.2, 0.2, 0.38, 0.9);
-  $transition--base: 100ms;
-  $transition--expansion: 150ms;
-}
-
-/// Get the transition-timing-function for a given easing and motion mode.
-/// Easings that are currently supported include: standard, entrance, and exit.
-/// We also offer two modes: productive and expressive.
-/// @access public
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-/// @return {cubic-bezier}
-@function motion($name, $mode: productive, $easings: $carbon--easings) {
-  @return carbon--motion($name, $mode, $easings);
-}
-
-/// Get the transition-timing-function for a given easing and motion mode.
-/// Easings that are currently supported include: standard, entrance, and exit.
-/// We also offer two modes: productive and expressive.
-/// @access public
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-/// @return {cubic-bezier}
-@mixin motion($name, $mode) {
-  @include carbon--motion($name, $mode);
-}
diff --git a/scss/globals/scss/_spacing.scss b/scss/globals/scss/_spacing.scss
deleted file mode 100644
index 37735948ec58..000000000000
--- a/scss/globals/scss/_spacing.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-------------------------------------------
-// 🌌 Spacing
-// ------------------------------------------
-//
-//   Size in px based on 16px base
-//
-//   Spacing Scale
-//   ==========================================
-//   4xs  ||  1px
-//   3xs  ||  2px
-//   2xs  ||  4px
-//   xs   ||  8px
-//   sm   ||  12px
-//   md   ||  16px
-//   lg   ||  24px
-//   xl   ||  32px
-//   2xl  ||  40px
-//   3xl  ||  48px
-//   ==========================================
-//
-//   Layout Scale
-//   ==========================================
-//   2xs  ||  16px
-//   xs   ||  24px
-//   sm   ||  32px
-//   md   ||  48px
-//   lg   ||  64px
-//   xl   ||  96px
-//   2xl  ||  160px
-//   ==========================================
-
-$spacing-baseline: 1rem !default;
-
-$spacing-4xs: $spacing-baseline * 0.0625 !default;
-$spacing-3xs: $spacing-baseline * 0.125 !default;
-$spacing-2xs: $spacing-baseline * 0.25 !default;
-$spacing-xs: $spacing-baseline * 0.5 !default;
-$spacing-sm: $spacing-baseline * 0.75 !default;
-$spacing-md: $spacing-baseline !default;
-$spacing-lg: $spacing-baseline * 1.5 !default;
-$spacing-xl: $spacing-baseline * 2 !default;
-$spacing-2xl: $spacing-baseline * 2.5 !default;
-$spacing-3xl: $spacing-baseline * 3 !default;
-
-$layout-2xs: $spacing-baseline !default;
-$layout-xs: $spacing-baseline * 1.5 !default;
-$layout-sm: $spacing-baseline * 2 !default;
-$layout-md: $spacing-baseline * 3 !default;
-$layout-lg: $spacing-baseline * 4 !default;
-$layout-xl: $spacing-baseline * 6 !default;
-$layout-2xl: $spacing-baseline * 10 !default;
diff --git a/scss/globals/scss/_theme-tokens.scss b/scss/globals/scss/_theme-tokens.scss
deleted file mode 100644
index 0ddd3aa21291..000000000000
--- a/scss/globals/scss/_theme-tokens.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'feature-flags';
-@import 'import-once';
-@import 'functions';
-@import 'colors';
-@import 'spacing';
-@import './vendor/@carbon/elements/scss/themes/mixins';
-
-@mixin theme() {
-  // Color Theme Variables
-  $brand-01: $color__blue-51 !default !global;
-  $brand-02: $color__blue-40 !default !global;
-  $brand-03: $color__teal-20 !default !global;
-  $inverse-01: $color__white !default !global;
-  $inverse-02: #272d33 !default !global;
-  $ui-01: $color__white !default !global;
-  $ui-02: #f4f7fb !default !global;
-  $ui-03: $color__gray-1 !default !global;
-  $ui-04: #8897a2 !default !global;
-  $ui-05: $color__navy-gray-6 !default !global;
-  $text-01: $color__blue-90 !default !global;
-  $text-02: $color__navy-gray-6 !default !global;
-  $text-03: #cdd1d4 !default !global;
-  $field-01: #f4f7fb !default !global;
-  $field-02: $color__white !default !global;
-  $support-01: #e0182d !default !global;
-  $support-02: $color__green-40 !default !global;
-  $support-03: $color__yellow-30 !default !global;
-  $support-04: $color__blue-30 !default !global;
-  $nav-01: $color__navy-gray-1 !default !global;
-  $nav-02: $color__blue-90 !default !global;
-  $nav-03: $color__purple-30 !default !global;
-  $nav-04: $color__purple-60 !default !global;
-  $nav-05: $color__teal-40 !default !global;
-  $nav-06: $color__teal-50 !default !global;
-  $nav-07: $color__blue-30 !default !global;
-  $nav-08: $color__blue-51 !default !global;
-
-  $hover-primary: darken($brand-01, 10%) !default !global;
-  $hover-primary-text: darken($brand-01, 15%) !default !global;
-  $hover-danger: darken($support-01, 10%) !default !global;
-  $hover-secondary: $brand-01 !default !global;
-  $hover-row: rgba($brand-02, 0.1) !default !global;
-
-  // Global
-  $input-border: 1px solid transparent !default !global;
-  $input-label-weight: 600 !default !global;
-  $focus: $color__blue-20 !default !global;
-
-  // Button Theme Variables
-  $button-font-weight: 600 !default !global;
-  $button-font-size: 0.875rem !default !global;
-  $button-border-radius: 0 !default !global;
-  $button-height: 40px !default !global;
-  $button-padding: 0 $spacing-md !default !global;
-  $button-padding-sm: 0 $spacing-xs !default !global;
-  $button-border-width: 2px !default !global;
-  $button-outline-width: 1px !default !global;
-
-  // Accordion (Reverse)
-  $accordion-flex-direction: row !default !global;
-  $accordion-justify-content: flex-start !default !global;
-  $accordion-arrow-margin: 0 0 0 $spacing-2xs !default !global;
-  $accordion-title-margin: 0 0 0 $spacing-md !default !global;
-  $accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default !global;
-
-  // Card
-  $card-text-align: center !default !global;
-  $card-flex-align: center !default !global;
-
-  // Checkbox
-  $checkbox-border-width: 2px !default !global;
-
-  // Code Snippet
-  $snippet-background-color: $ui-01 !default !global;
-  $snippet-border-color: $ui-03 !default !global;
-
-  // Content Switcher
-  $content-switcher-border-radius: 8px !default !global;
-  $content-switcher-option-border: 1px solid $brand-01 !default !global;
-
-  // Data Table
-  $data-table-heading-transform: uppercase !default !global;
-  $data-table-heading-border-bottom: 1px solid $brand-01 !default !global;
-  $data-table-row-height: 2rem !default !global;
-
-  // Modal
-  $modal-border-top: $brand-01 4px solid !default !global;
-  $modal-footer-background-color: $ui-02 !default !global;
-
-  // Progress Indicator
-  $progress-indicator-bar-width: 1px inset transparent !default !global;
-  $progress-indicator-stroke-width: 5 !default !global;
-  $progress-indicator-line-offset: 0.625rem !default !global;
-
-  // Radio Button
-  $radio-border-width: 2px !default !global;
-
-  // Structured Theme Variables
-  $structured-list-padding: 2rem !default !global;
-  $structured-list-text-transform: none !default !global;
-
-  // Skeleton Loading
-  $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01
-}
-
-// Light Experimental Theme
-@mixin theme--experimental() {
-  // Can include various themes here from `@carbon/themes`, including: white,
-  // g10, g90, and g100
-  @include carbon--theme-white();
-
-  $edited: true !default !global;
-  $use-layer: true !default !global;
-
-  // Global
-  $input-border: 1px solid transparent !default !global;
-  $input-label-weight: 400 !default !global;
-  $disabled: $disabled-02 !default !global;
-  $disabled-background-color: $disabled-01 !default !global;
-  $focus: $ibm-color__blue-60 !default !global;
-
-  // Link
-  $link-visited: $ibm-color__purple-60 !default !global;
-  $link-inverse-color: #6ea6ff !default !global;
-
-  // Tooltip
-  $tooltip-background-color: #3d3d3d !default !global;
-
-  // Button Theme Variables
-  $button-font-weight: 400 !default !global;
-  $button-font-size: 0.875rem !default !global;
-  $button-border-radius: 0 !default !global;
-  $button-height: 48px !default !global;
-  $button-padding: 0.875rem 4rem 0.875rem 1rem !default !global;
-  $button-padding-sm: 0.375rem 4rem 0.375rem 1rem !default !global;
-  $button-padding-lg: $spacing-sm !default !global;
-  $button-border-width: 1px !default !global;
-  $button-outline-width: 3px !default !global;
-  $button-outline-offset: -5px !default !global;
-  $button-outline: 1px solid $ibm-color__white-0 !default !global;
-
-  // Accordion (Reverse)
-  $accordion-flex-direction: row-reverse !default !global;
-  $accordion-justify-content: flex-start !default !global;
-  $accordion-arrow-margin: 0 $spacing-md 0 0 !default !global;
-  $accordion-title-margin: 0 0 0 $spacing-md !default !global;
-  $accordion-content-padding: 0 0 0 $spacing-md !default !global;
-
-  // Card
-  $card-text-align: center !default !global;
-  $card-flex-align: center !default !global;
-
-  // Checkbox
-  $checkbox-border-width: 2px !default !global;
-
-  // Code Snippet
-  $snippet-background-color: $ui-01 !default !global; // TODO: Define for experimental
-  $snippet-border-color: $ui-03 !default !global; // TODO: Define for experimental
-
-  // Content Switcher
-  $content-switcher-border-radius: 0px !default !global;
-  $content-switcher-option-border: 1px solid $brand-01 !default !global;
-  $content-switcher-divider: $ui-03 !default !global;
-
-  // Data Table
-  $data-table-heading-transform: uppercase !default !global;
-  $data-table-heading-border-bottom: 1px solid $brand-01 !default !global;
-  $data-table-row-height: 2rem !default !global;
-
-  // Date Picker
-  $date-picker-in-range-background-color: $ibm-color__blue-20 !default !global;
-
-  // Modal
-  $modal-border-top: $brand-01 4px solid !default !global;
-  $modal-footer-background-color: $ui-03 !default !global;
-
-  // Notification
-  $notification-info-background-color: $ibm-color__blue-10 !default !global;
-  $notification-error-background-color: $ibm-color__red-10 !default !global;
-  $notification-warning-background-color: rgba(#fdd13a, 0.15) !default !global;
-  $notification-success-background-color: $ibm-color__green-10 !default !global;
-
-  // Progress Indicator
-  $progress-indicator-bar-width: 1px inset transparent !default !global;
-  $progress-indicator-stroke-width: 5 !default !global;
-  $progress-indicator-line-offset: 0.625rem !default !global;
-
-  //Code Snippet
-  $copy-active: $active-ui !default !global;
-  $copy-btn-feedback: $ibm-colors__gray-80 !default !global;
-
-  // Radio Button
-  $radio-border-width: 1px !default !global;
-
-  // Structured Theme Variables
-  $structured-list-padding: 2rem !default !global;
-  $structured-list-text-transform: none !default !global;
-
-  // Slider
-
-  //Tab
-  $tab-underline-color: 3px solid $ibm-color__gray-30 !default !global;
-  $tab-underline-color-hover: 3px solid $ibm-color__gray-60 !default !global;
-  $tab-text-disabled: $ibm-color__gray-30 !default !global;
-  $tab-underline-disabled: 3px solid $ibm-color__gray-10 !default !global;
-
-  // Skeleton Loading
-  $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01 TODO: Define for experimental
-
-  // ☠️ Deprecated
-  $hover-field: $hover-ui !default !global;
-  $active-01: $active-ui !default !global;
-  $nav-01: $color__navy-gray-1 !default !global;
-  $nav-02: $color__blue-90 !default !global;
-  $nav-03: $color__purple-30 !default !global;
-  $nav-04: $color__purple-60 !default !global;
-  $nav-05: $color__teal-40 !default !global;
-  $nav-06: $color__teal-50 !default !global;
-  $nav-07: $color__blue-30 !default !global;
-  $nav-08: $color__blue-51 !default !global;
-}
-
-@include exports('theme') {
-  @if feature-flag-enabled('components-x') {
-    @include theme--experimental;
-  } @else {
-    @include theme;
-  }
-}
diff --git a/scss/globals/scss/_theme.scss b/scss/globals/scss/_theme.scss
deleted file mode 100644
index 9332c30bc637..000000000000
--- a/scss/globals/scss/_theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'helper-mixins';
-@import 'functions';
-@import 'theme-tokens';
diff --git a/scss/globals/scss/_typography.scss b/scss/globals/scss/_typography.scss
deleted file mode 100644
index 532e27afe029..000000000000
--- a/scss/globals/scss/_typography.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'vars';
-
-$font-family-mono: 'ibm-plex-mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace !default;
-$font-family-sans-serif: 'ibm-plex-sans', Helvetica Neue, Arial, sans-serif !default;
-$font-family-serif: 'ibm-plex-serif', 'Georgia', Times, serif !default;
-$font-family-helvetica: 'IBM Helvetica', Helvetica Neue, HelveticaNeue, Helvetica, sans-serif !default;
-
-$base-font-size: 16px !default; // Default, Use with em() and rem() functions
-
-$typescale-map: (
-  'giga': 4.75rem,
-  'mega': 3.375rem,
-  'alpha': 2.25rem,
-  'beta': 1.75rem,
-  'gamma': 1.25rem,
-  'delta': 1.125rem,
-  'epsilon': 1rem,
-  'zeta': 0.875rem,
-  'omega': 0.75rem,
-  'caption': 0.75rem,
-  'legal': 0.6875rem,
-  'p': 1rem,
-);
-
-@mixin typescale($size) {
-  @if map-has-key($typescale-map, $size) {
-    font-size: map-get($typescale-map, $size);
-  } @else {
-    @warn 'This is not a step of the Carbon Type Scale!';
-  }
-}
-
-@function rem($px) {
-  @return ($px / $base-font-size) * 1rem;
-}
-
-@function em($px) {
-  @return ($px / $base-font-size) * 1em;
-}
-
-@mixin helvetica {
-  font-family: $font-family-helvetica;
-}
-
-@mixin font-family {
-  @if global-variable-exists('css--plex') and $css--plex == true {
-    font-family: $font-family-sans-serif;
-  } @else {
-    font-family: $font-family-helvetica;
-  }
-}
-
-// There are two line heights to choose from. One for headings and one for body text
-@mixin line-height($el) {
-  @if $el == 'heading' {
-    line-height: 1.25;
-  } @else if $el == 'body' {
-    line-height: 1.5;
-  } @else {
-    @warn 'Invalid argument used for @mixin line-height($el) . Please use 'heading' or 'body'.';
-  }
-}
-
-// Only applied to bold weight text
-@mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@mixin letter-spacing {
-  letter-spacing: 0;
-}
-
-$font-size-map: (
-  '76': 4.75rem,
-  '54': 3.375rem,
-  '36': 2.25rem,
-  '28': 1.75rem,
-  '20': 1.25rem,
-  '18': 1.125rem,
-  '16': 1rem,
-  '14': 0.875rem,
-  '12': 0.75rem,
-  '11': 0.6875rem,
-);
-
-@mixin font-size($size) {
-  @if map-has-key($font-size-map, $size) {
-    font-size: map-get($font-size-map, $size);
-  } @else {
-    @warn 'This is not a step of the Carbon Type Scale! Valid sizes are 11, 12, 14, 16, 18, 20, 28, 36, 54, and 76';
-  }
-}
-
-// 🔬 Experimental
-@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';
-
-@mixin type-style($name, $fluid: false) {
-  @include carbon--type-style($name, $fluid);
-}
diff --git a/scss/globals/scss/_vars.scss b/scss/globals/scss/_vars.scss
deleted file mode 100644
index 6b8c66f79adb..000000000000
--- a/scss/globals/scss/_vars.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'colors';
-@import 'spacing';
-@import 'theme-tokens';
-@import 'functions';
-@import 'motion';
-
-$prefix: 'bx' !default;
diff --git a/scss/globals/scss/styles.scss b/scss/globals/scss/styles.scss
deleted file mode 100644
index eedc72e071ee..000000000000
--- a/scss/globals/scss/styles.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-------------------------
-// 🌍 Global
-//-------------------------
-
-$css--font-face: true !default;
-$css--helpers: true !default;
-$css--body: true !default;
-$css--use-layer: true !default;
-$css--reset: true !default;
-$css--typography: true !default;
-$css--plex: true !default;
-// TODO: remove in next major release. Synced in `feature-flags` as an adapter
-// in the interim
-$css--use-experimental-grid: false !default;
-$css--use-experimental-grid-fallback: false !default;
-
-@import 'feature-flags';
-@import 'vars';
-@import 'colors';
-@import 'theme';
-@import 'mixins';
-@import 'layout';
-@import 'layer';
-@import 'spacing';
-@import 'typography';
-@import 'import-once';
-@import 'css--reset';
-@import 'css--font-face';
-@import 'css--helpers';
-@import 'css--body';
-@import 'css--typography';
-@import '../grid/grid';
-
-//-------------------------
-// ☠️  Manage deprecations
-//-------------------------
-
-/**
- * We flag this variable as true if someone uses the globals/scss/styles.scss
- * entry-point. This allows us to collect all the messages and display them at
- * the end of the file instead of bringing it up per-component.
- *
- * If a consumer instead gets the components by importing the partial directly,
- * this variable _will not_ be set to true, so the deprecation message will be
- * displayed after the @import.
- */
-$deprecations--entry: true;
-// Collect all deprecation reasons into this list throughout the import cycle.
-$deprecations--reasons: ();
-// This message will be prepended to any deprecation notice
-$deprecations--message: 'Deprecated code was found, this code will be removed before the next release of Carbon.';
-
-//-------------------------
-// 🍕 Components
-//-------------------------
-
-@import '../../components/button/button';
-@import '../../components/copy-button/copy-button';
-@import '../../components/file-uploader/file-uploader';
-@import '../../components/checkbox/checkbox';
-@import '../../components/combo-box/combo-box';
-@import '../../components/radio-button/radio-button';
-@import '../../components/toggle/toggle';
-@import '../../components/search/search';
-@import '../../components/select/select';
-@import '../../components/text-input/text-input';
-@import '../../components/text-area/text-area';
-@import '../../components/number-input/number-input';
-@import '../../components/form/form';
-@import '../../components/link/link';
-@import '../../components/list-box/list-box';
-@import '../../components/list/list';
-@import '../../components/data-table/data-table';
-@import '../../components/data-table-v2/data-table-v2';
-@import '../../components/structured-list/structured-list';
-@import '../../components/code-snippet/code-snippet';
-@import '../../components/overflow-menu/overflow-menu';
-@import '../../components/content-switcher/content-switcher';
-@import '../../components/date-picker/date-picker';
-@import '../../components/dropdown/dropdown';
-@import '../../components/loading/loading';
-@import '../../components/modal/modal';
-@import '../../components/multi-select/multi-select';
-@import '../../components/notification/inline-notification';
-@import '../../components/notification/toast-notification';
-@import '../../components/tooltip/tooltip';
-@import '../../components/tabs/tabs';
-@import '../../components/tag/tag';
-@import '../../components/unified-header/unified-header';
-@import '../../components/pagination/pagination';
-@import '../../components/accordion/accordion';
-@import '../../components/progress-indicator/progress-indicator';
-@import '../../components/breadcrumb/breadcrumb';
-@import '../../components/toolbar/toolbar';
-@import '../../components/time-picker/time-picker';
-@import '../../components/slider/slider';
-@import '../../components/tile/tile';
-@import '../../components/lightbox/lightbox';
-@import '../../components/carousel/carousel';
-@import '../../components/skeleton/skeleton';
-@import '../../components/inline-loading/inline-loading';
-@import '../../components/pagination-nav/pagination-nav';
-
-//-------------------------------------
-// 🔬 Experimental
-//-------------------------------------
-@import '../../components/ui-shell/ui-shell';
-
-//-------------------------------------
-// 🙈 Hidden (Not exposed on website)
-//-------------------------------------
-@import '../../components/footer/footer';
-@import '../../components/fab/fab';
-
-// Cycle through all the deprecation reasons, if any exist, that have been
-// accumulated through the @import process.
-@if (length($deprecations--reasons) > 0) {
-  $deprecations--message: '';
-  @each $reason in $deprecations--reasons {
-    $deprecations--message: '#{$deprecations--message}
-REASON: #{$reason}';
-  }
-
-  @warn $deprecations--message;
-}
diff --git a/scss/globals/scss/vendor/@carbon/colors/scss/colors.scss b/scss/globals/scss/vendor/@carbon/colors/scss/colors.scss
deleted file mode 100644
index 9af9903de51e..000000000000
--- a/scss/globals/scss/vendor/@carbon/colors/scss/colors.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Code generated by @carbon/colors. DO NOT EDIT.
-
-@import './mixins';
-
-// Deprecated ☠️
-@include ibm--colors();
-// Preferred
-@include carbon--colors();
diff --git a/scss/globals/scss/vendor/@carbon/colors/scss/mixins.scss b/scss/globals/scss/vendor/@carbon/colors/scss/mixins.scss
deleted file mode 100644
index 506eaabdf980..000000000000
--- a/scss/globals/scss/vendor/@carbon/colors/scss/mixins.scss
+++ /dev/null
@@ -1,696 +0,0 @@
-// Code generated by @carbon/colors. DO NOT EDIT.
-
-// Deprecated ☠️
-@mixin ibm--colors {
-  $ibm-color__black-100: #000000 !default !global;
-  $ibm-color__blue-10: #edf4ff !default !global;
-  $ibm-color__blue-20: #c9deff !default !global;
-  $ibm-color__blue-30: #97c1ff !default !global;
-  $ibm-color__blue-40: #6ea6ff !default !global;
-  $ibm-color__blue-50: #408bfc !default !global;
-  $ibm-color__blue-60: #0062ff !default !global;
-  $ibm-color__blue-70: #054ada !default !global;
-  $ibm-color__blue-80: #0530ad !default !global;
-  $ibm-color__blue-90: #061f80 !default !global;
-  $ibm-color__blue-100: #051243 !default !global;
-  $ibm-color__cool-gray-10: #f2f4f8 !default !global;
-  $ibm-color__cool-gray-20: #d5d9e0 !default !global;
-  $ibm-color__cool-gray-30: #b9bfc7 !default !global;
-  $ibm-color__cool-gray-40: #9fa5ad !default !global;
-  $ibm-color__cool-gray-50: #868d95 !default !global;
-  $ibm-color__cool-gray-60: #697077 !default !global;
-  $ibm-color__cool-gray-70: #50565b !default !global;
-  $ibm-color__cool-gray-80: #373d42 !default !global;
-  $ibm-color__cool-gray-90: #242a2e !default !global;
-  $ibm-color__cool-gray-100: #13171a !default !global;
-  $ibm-color__cyan-10: #e3f6ff !default !global;
-  $ibm-color__cyan-20: #b3e6ff !default !global;
-  $ibm-color__cyan-30: #6ccaff !default !global;
-  $ibm-color__cyan-40: #30b0ff !default !global;
-  $ibm-color__cyan-50: #1191e6 !default !global;
-  $ibm-color__cyan-60: #0072c3 !default !global;
-  $ibm-color__cyan-70: #0058a1 !default !global;
-  $ibm-color__cyan-80: #003d73 !default !global;
-  $ibm-color__cyan-90: #002b50 !default !global;
-  $ibm-color__cyan-100: #07192b !default !global;
-  $ibm-color__gray-10: #f3f3f3 !default !global;
-  $ibm-color__gray-20: #dcdcdc !default !global;
-  $ibm-color__gray-30: #bebebe !default !global;
-  $ibm-color__gray-40: #a4a4a4 !default !global;
-  $ibm-color__gray-50: #8c8c8c !default !global;
-  $ibm-color__gray-60: #6f6f6f !default !global;
-  $ibm-color__gray-70: #565656 !default !global;
-  $ibm-color__gray-80: #3d3d3d !default !global;
-  $ibm-color__gray-90: #282828 !default !global;
-  $ibm-color__gray-100: #171717 !default !global;
-  $ibm-color__green-10: #dafbe4 !default !global;
-  $ibm-color__green-20: #9deeb2 !default !global;
-  $ibm-color__green-30: #56d679 !default !global;
-  $ibm-color__green-40: #3dbb61 !default !global;
-  $ibm-color__green-50: #24a148 !default !global;
-  $ibm-color__green-60: #198038 !default !global;
-  $ibm-color__green-70: #10642a !default !global;
-  $ibm-color__green-80: #054719 !default !global;
-  $ibm-color__green-90: #01330f !default !global;
-  $ibm-color__green-100: #081b09 !default !global;
-  $ibm-color__magenta-10: #fff0f6 !default !global;
-  $ibm-color__magenta-20: #ffcfe1 !default !global;
-  $ibm-color__magenta-30: #ffa0c2 !default !global;
-  $ibm-color__magenta-40: #fa75a6 !default !global;
-  $ibm-color__magenta-50: #ee538b !default !global;
-  $ibm-color__magenta-60: #d12765 !default !global;
-  $ibm-color__magenta-70: #a11950 !default !global;
-  $ibm-color__magenta-80: #760a3a !default !global;
-  $ibm-color__magenta-90: #57002b !default !global;
-  $ibm-color__magenta-100: #2a0a16 !default !global;
-  $ibm-color__orange-40: #fc7b1e !default !global;
-  $ibm-color__purple-10: #f7f1ff !default !global;
-  $ibm-color__purple-20: #e6d6ff !default !global;
-  $ibm-color__purple-30: #d0b0ff !default !global;
-  $ibm-color__purple-40: #bb8eff !default !global;
-  $ibm-color__purple-50: #a66efa !default !global;
-  $ibm-color__purple-60: #8a3ffc !default !global;
-  $ibm-color__purple-70: #6e32c9 !default !global;
-  $ibm-color__purple-80: #4f2196 !default !global;
-  $ibm-color__purple-90: #38146b !default !global;
-  $ibm-color__purple-100: #1e1033 !default !global;
-  $ibm-color__red-10: #fff0f1 !default !global;
-  $ibm-color__red-20: #fcd0d3 !default !global;
-  $ibm-color__red-30: #ffa4a9 !default !global;
-  $ibm-color__red-40: #ff767c !default !global;
-  $ibm-color__red-50: #fb4b53 !default !global;
-  $ibm-color__red-60: #da1e28 !default !global;
-  $ibm-color__red-70: #a51920 !default !global;
-  $ibm-color__red-80: #750e13 !default !global;
-  $ibm-color__red-90: #570408 !default !global;
-  $ibm-color__red-100: #2c080a !default !global;
-  $ibm-color__teal-10: #dbfbfb !default !global;
-  $ibm-color__teal-20: #92eeee !default !global;
-  $ibm-color__teal-30: #20d5d2 !default !global;
-  $ibm-color__teal-40: #00bab6 !default !global;
-  $ibm-color__teal-50: #009c98 !default !global;
-  $ibm-color__teal-60: #007d79 !default !global;
-  $ibm-color__teal-70: #006161 !default !global;
-  $ibm-color__teal-80: #004548 !default !global;
-  $ibm-color__teal-90: #003137 !default !global;
-  $ibm-color__teal-100: #081a1c !default !global;
-  $ibm-color__warm-gray-10: #f7f3f1 !default !global;
-  $ibm-color__warm-gray-20: #e0dbda !default !global;
-  $ibm-color__warm-gray-30: #c1bcbb !default !global;
-  $ibm-color__warm-gray-40: #a7a2a2 !default !global;
-  $ibm-color__warm-gray-50: #8f8b8b !default !global;
-  $ibm-color__warm-gray-60: #726e6e !default !global;
-  $ibm-color__warm-gray-70: #595555 !default !global;
-  $ibm-color__warm-gray-80: #403c3c !default !global;
-  $ibm-color__warm-gray-90: #2b2828 !default !global;
-  $ibm-color__warm-gray-100: #1a1717 !default !global;
-  $ibm-color__white-0: #ffffff !default !global;
-  $ibm-color__yellow-20: #fdd13a !default !global;
-
-  $ibm-colors__black: #000000 !default !global;
-  $ibm-colors__black-100: #000000 !default !global;
-  $ibm-colors__blue-10: #edf4ff !default !global;
-  $ibm-colors__blue-20: #c9deff !default !global;
-  $ibm-colors__blue-30: #97c1ff !default !global;
-  $ibm-colors__blue-40: #6ea6ff !default !global;
-  $ibm-colors__blue-50: #408bfc !default !global;
-  $ibm-colors__blue-60: #0062ff !default !global;
-  $ibm-colors__blue-70: #054ada !default !global;
-  $ibm-colors__blue-80: #0530ad !default !global;
-  $ibm-colors__blue-90: #061f80 !default !global;
-  $ibm-colors__blue-100: #051243 !default !global;
-  $ibm-colors__cool-gray-10: #f2f4f8 !default !global;
-  $ibm-colors__cool-gray-20: #d5d9e0 !default !global;
-  $ibm-colors__cool-gray-30: #b9bfc7 !default !global;
-  $ibm-colors__cool-gray-40: #9fa5ad !default !global;
-  $ibm-colors__cool-gray-50: #868d95 !default !global;
-  $ibm-colors__cool-gray-60: #697077 !default !global;
-  $ibm-colors__cool-gray-70: #50565b !default !global;
-  $ibm-colors__cool-gray-80: #373d42 !default !global;
-  $ibm-colors__cool-gray-90: #242a2e !default !global;
-  $ibm-colors__cool-gray-100: #13171a !default !global;
-  $ibm-colors__cyan-10: #e3f6ff !default !global;
-  $ibm-colors__cyan-20: #b3e6ff !default !global;
-  $ibm-colors__cyan-30: #6ccaff !default !global;
-  $ibm-colors__cyan-40: #30b0ff !default !global;
-  $ibm-colors__cyan-50: #1191e6 !default !global;
-  $ibm-colors__cyan-60: #0072c3 !default !global;
-  $ibm-colors__cyan-70: #0058a1 !default !global;
-  $ibm-colors__cyan-80: #003d73 !default !global;
-  $ibm-colors__cyan-90: #002b50 !default !global;
-  $ibm-colors__cyan-100: #07192b !default !global;
-  $ibm-colors__gray-10: #f3f3f3 !default !global;
-  $ibm-colors__gray-20: #dcdcdc !default !global;
-  $ibm-colors__gray-30: #bebebe !default !global;
-  $ibm-colors__gray-40: #a4a4a4 !default !global;
-  $ibm-colors__gray-50: #8c8c8c !default !global;
-  $ibm-colors__gray-60: #6f6f6f !default !global;
-  $ibm-colors__gray-70: #565656 !default !global;
-  $ibm-colors__gray-80: #3d3d3d !default !global;
-  $ibm-colors__gray-90: #282828 !default !global;
-  $ibm-colors__gray-100: #171717 !default !global;
-  $ibm-colors__green-10: #dafbe4 !default !global;
-  $ibm-colors__green-20: #9deeb2 !default !global;
-  $ibm-colors__green-30: #56d679 !default !global;
-  $ibm-colors__green-40: #3dbb61 !default !global;
-  $ibm-colors__green-50: #24a148 !default !global;
-  $ibm-colors__green-60: #198038 !default !global;
-  $ibm-colors__green-70: #10642a !default !global;
-  $ibm-colors__green-80: #054719 !default !global;
-  $ibm-colors__green-90: #01330f !default !global;
-  $ibm-colors__green-100: #081b09 !default !global;
-  $ibm-colors__magenta-10: #fff0f6 !default !global;
-  $ibm-colors__magenta-20: #ffcfe1 !default !global;
-  $ibm-colors__magenta-30: #ffa0c2 !default !global;
-  $ibm-colors__magenta-40: #fa75a6 !default !global;
-  $ibm-colors__magenta-50: #ee538b !default !global;
-  $ibm-colors__magenta-60: #d12765 !default !global;
-  $ibm-colors__magenta-70: #a11950 !default !global;
-  $ibm-colors__magenta-80: #760a3a !default !global;
-  $ibm-colors__magenta-90: #57002b !default !global;
-  $ibm-colors__magenta-100: #2a0a16 !default !global;
-  $ibm-colors__orange-40: #fc7b1e !default !global;
-  $ibm-colors__purple-10: #f7f1ff !default !global;
-  $ibm-colors__purple-20: #e6d6ff !default !global;
-  $ibm-colors__purple-30: #d0b0ff !default !global;
-  $ibm-colors__purple-40: #bb8eff !default !global;
-  $ibm-colors__purple-50: #a66efa !default !global;
-  $ibm-colors__purple-60: #8a3ffc !default !global;
-  $ibm-colors__purple-70: #6e32c9 !default !global;
-  $ibm-colors__purple-80: #4f2196 !default !global;
-  $ibm-colors__purple-90: #38146b !default !global;
-  $ibm-colors__purple-100: #1e1033 !default !global;
-  $ibm-colors__red-10: #fff0f1 !default !global;
-  $ibm-colors__red-20: #fcd0d3 !default !global;
-  $ibm-colors__red-30: #ffa4a9 !default !global;
-  $ibm-colors__red-40: #ff767c !default !global;
-  $ibm-colors__red-50: #fb4b53 !default !global;
-  $ibm-colors__red-60: #da1e28 !default !global;
-  $ibm-colors__red-70: #a51920 !default !global;
-  $ibm-colors__red-80: #750e13 !default !global;
-  $ibm-colors__red-90: #570408 !default !global;
-  $ibm-colors__red-100: #2c080a !default !global;
-  $ibm-colors__teal-10: #dbfbfb !default !global;
-  $ibm-colors__teal-20: #92eeee !default !global;
-  $ibm-colors__teal-30: #20d5d2 !default !global;
-  $ibm-colors__teal-40: #00bab6 !default !global;
-  $ibm-colors__teal-50: #009c98 !default !global;
-  $ibm-colors__teal-60: #007d79 !default !global;
-  $ibm-colors__teal-70: #006161 !default !global;
-  $ibm-colors__teal-80: #004548 !default !global;
-  $ibm-colors__teal-90: #003137 !default !global;
-  $ibm-colors__teal-100: #081a1c !default !global;
-  $ibm-colors__warm-gray-10: #f7f3f1 !default !global;
-  $ibm-colors__warm-gray-20: #e0dbda !default !global;
-  $ibm-colors__warm-gray-30: #c1bcbb !default !global;
-  $ibm-colors__warm-gray-40: #a7a2a2 !default !global;
-  $ibm-colors__warm-gray-50: #8f8b8b !default !global;
-  $ibm-colors__warm-gray-60: #726e6e !default !global;
-  $ibm-colors__warm-gray-70: #595555 !default !global;
-  $ibm-colors__warm-gray-80: #403c3c !default !global;
-  $ibm-colors__warm-gray-90: #2b2828 !default !global;
-  $ibm-colors__warm-gray-100: #1a1717 !default !global;
-  $ibm-colors__white: #ffffff !default !global;
-  $ibm-colors__white-0: #ffffff !default !global;
-  $ibm-colors__yellow-20: #fdd13a !default !global;
-
-  $ibm-color-map: (
-    'black': (
-      100: #000000,
-    ),
-    'blue': (
-      10: #edf4ff,
-      20: #c9deff,
-      30: #97c1ff,
-      40: #6ea6ff,
-      50: #408bfc,
-      60: #0062ff,
-      70: #054ada,
-      80: #0530ad,
-      90: #061f80,
-      100: #051243,
-    ),
-    'coolGray': (
-      10: #f2f4f8,
-      20: #d5d9e0,
-      30: #b9bfc7,
-      40: #9fa5ad,
-      50: #868d95,
-      60: #697077,
-      70: #50565b,
-      80: #373d42,
-      90: #242a2e,
-      100: #13171a,
-    ),
-    'cyan': (
-      10: #e3f6ff,
-      20: #b3e6ff,
-      30: #6ccaff,
-      40: #30b0ff,
-      50: #1191e6,
-      60: #0072c3,
-      70: #0058a1,
-      80: #003d73,
-      90: #002b50,
-      100: #07192b,
-    ),
-    'gray': (
-      10: #f3f3f3,
-      20: #dcdcdc,
-      30: #bebebe,
-      40: #a4a4a4,
-      50: #8c8c8c,
-      60: #6f6f6f,
-      70: #565656,
-      80: #3d3d3d,
-      90: #282828,
-      100: #171717,
-    ),
-    'green': (
-      10: #dafbe4,
-      20: #9deeb2,
-      30: #56d679,
-      40: #3dbb61,
-      50: #24a148,
-      60: #198038,
-      70: #10642a,
-      80: #054719,
-      90: #01330f,
-      100: #081b09,
-    ),
-    'magenta': (
-      10: #fff0f6,
-      20: #ffcfe1,
-      30: #ffa0c2,
-      40: #fa75a6,
-      50: #ee538b,
-      60: #d12765,
-      70: #a11950,
-      80: #760a3a,
-      90: #57002b,
-      100: #2a0a16,
-    ),
-    'orange': (
-      40: #fc7b1e,
-    ),
-    'purple': (
-      10: #f7f1ff,
-      20: #e6d6ff,
-      30: #d0b0ff,
-      40: #bb8eff,
-      50: #a66efa,
-      60: #8a3ffc,
-      70: #6e32c9,
-      80: #4f2196,
-      90: #38146b,
-      100: #1e1033,
-    ),
-    'red': (
-      10: #fff0f1,
-      20: #fcd0d3,
-      30: #ffa4a9,
-      40: #ff767c,
-      50: #fb4b53,
-      60: #da1e28,
-      70: #a51920,
-      80: #750e13,
-      90: #570408,
-      100: #2c080a,
-    ),
-    'teal': (
-      10: #dbfbfb,
-      20: #92eeee,
-      30: #20d5d2,
-      40: #00bab6,
-      50: #009c98,
-      60: #007d79,
-      70: #006161,
-      80: #004548,
-      90: #003137,
-      100: #081a1c,
-    ),
-    'warmGray': (
-      10: #f7f3f1,
-      20: #e0dbda,
-      30: #c1bcbb,
-      40: #a7a2a2,
-      50: #8f8b8b,
-      60: #726e6e,
-      70: #595555,
-      80: #403c3c,
-      90: #2b2828,
-      100: #1a1717,
-    ),
-    'white': (
-      0: #ffffff,
-    ),
-    'yellow': (
-      20: #fdd13a,
-    ),
-  ) !default !global;
-}
-
-@mixin carbon--colors {
-  $carbon--black-100: #000000 !default !global;
-  $carbon--blue-10: #edf4ff !default !global;
-  $carbon--blue-20: #c9deff !default !global;
-  $carbon--blue-30: #97c1ff !default !global;
-  $carbon--blue-40: #6ea6ff !default !global;
-  $carbon--blue-50: #408bfc !default !global;
-  $carbon--blue-60: #0062ff !default !global;
-  $carbon--blue-70: #054ada !default !global;
-  $carbon--blue-80: #0530ad !default !global;
-  $carbon--blue-90: #061f80 !default !global;
-  $carbon--blue-100: #051243 !default !global;
-  $carbon--cool-gray-10: #f2f4f8 !default !global;
-  $carbon--cool-gray-20: #d5d9e0 !default !global;
-  $carbon--cool-gray-30: #b9bfc7 !default !global;
-  $carbon--cool-gray-40: #9fa5ad !default !global;
-  $carbon--cool-gray-50: #868d95 !default !global;
-  $carbon--cool-gray-60: #697077 !default !global;
-  $carbon--cool-gray-70: #50565b !default !global;
-  $carbon--cool-gray-80: #373d42 !default !global;
-  $carbon--cool-gray-90: #242a2e !default !global;
-  $carbon--cool-gray-100: #13171a !default !global;
-  $carbon--cyan-10: #e3f6ff !default !global;
-  $carbon--cyan-20: #b3e6ff !default !global;
-  $carbon--cyan-30: #6ccaff !default !global;
-  $carbon--cyan-40: #30b0ff !default !global;
-  $carbon--cyan-50: #1191e6 !default !global;
-  $carbon--cyan-60: #0072c3 !default !global;
-  $carbon--cyan-70: #0058a1 !default !global;
-  $carbon--cyan-80: #003d73 !default !global;
-  $carbon--cyan-90: #002b50 !default !global;
-  $carbon--cyan-100: #07192b !default !global;
-  $carbon--gray-10: #f3f3f3 !default !global;
-  $carbon--gray-20: #dcdcdc !default !global;
-  $carbon--gray-30: #bebebe !default !global;
-  $carbon--gray-40: #a4a4a4 !default !global;
-  $carbon--gray-50: #8c8c8c !default !global;
-  $carbon--gray-60: #6f6f6f !default !global;
-  $carbon--gray-70: #565656 !default !global;
-  $carbon--gray-80: #3d3d3d !default !global;
-  $carbon--gray-90: #282828 !default !global;
-  $carbon--gray-100: #171717 !default !global;
-  $carbon--green-10: #dafbe4 !default !global;
-  $carbon--green-20: #9deeb2 !default !global;
-  $carbon--green-30: #56d679 !default !global;
-  $carbon--green-40: #3dbb61 !default !global;
-  $carbon--green-50: #24a148 !default !global;
-  $carbon--green-60: #198038 !default !global;
-  $carbon--green-70: #10642a !default !global;
-  $carbon--green-80: #054719 !default !global;
-  $carbon--green-90: #01330f !default !global;
-  $carbon--green-100: #081b09 !default !global;
-  $carbon--magenta-10: #fff0f6 !default !global;
-  $carbon--magenta-20: #ffcfe1 !default !global;
-  $carbon--magenta-30: #ffa0c2 !default !global;
-  $carbon--magenta-40: #fa75a6 !default !global;
-  $carbon--magenta-50: #ee538b !default !global;
-  $carbon--magenta-60: #d12765 !default !global;
-  $carbon--magenta-70: #a11950 !default !global;
-  $carbon--magenta-80: #760a3a !default !global;
-  $carbon--magenta-90: #57002b !default !global;
-  $carbon--magenta-100: #2a0a16 !default !global;
-  $carbon--orange-40: #fc7b1e !default !global;
-  $carbon--purple-10: #f7f1ff !default !global;
-  $carbon--purple-20: #e6d6ff !default !global;
-  $carbon--purple-30: #d0b0ff !default !global;
-  $carbon--purple-40: #bb8eff !default !global;
-  $carbon--purple-50: #a66efa !default !global;
-  $carbon--purple-60: #8a3ffc !default !global;
-  $carbon--purple-70: #6e32c9 !default !global;
-  $carbon--purple-80: #4f2196 !default !global;
-  $carbon--purple-90: #38146b !default !global;
-  $carbon--purple-100: #1e1033 !default !global;
-  $carbon--red-10: #fff0f1 !default !global;
-  $carbon--red-20: #fcd0d3 !default !global;
-  $carbon--red-30: #ffa4a9 !default !global;
-  $carbon--red-40: #ff767c !default !global;
-  $carbon--red-50: #fb4b53 !default !global;
-  $carbon--red-60: #da1e28 !default !global;
-  $carbon--red-70: #a51920 !default !global;
-  $carbon--red-80: #750e13 !default !global;
-  $carbon--red-90: #570408 !default !global;
-  $carbon--red-100: #2c080a !default !global;
-  $carbon--teal-10: #dbfbfb !default !global;
-  $carbon--teal-20: #92eeee !default !global;
-  $carbon--teal-30: #20d5d2 !default !global;
-  $carbon--teal-40: #00bab6 !default !global;
-  $carbon--teal-50: #009c98 !default !global;
-  $carbon--teal-60: #007d79 !default !global;
-  $carbon--teal-70: #006161 !default !global;
-  $carbon--teal-80: #004548 !default !global;
-  $carbon--teal-90: #003137 !default !global;
-  $carbon--teal-100: #081a1c !default !global;
-  $carbon--warm-gray-10: #f7f3f1 !default !global;
-  $carbon--warm-gray-20: #e0dbda !default !global;
-  $carbon--warm-gray-30: #c1bcbb !default !global;
-  $carbon--warm-gray-40: #a7a2a2 !default !global;
-  $carbon--warm-gray-50: #8f8b8b !default !global;
-  $carbon--warm-gray-60: #726e6e !default !global;
-  $carbon--warm-gray-70: #595555 !default !global;
-  $carbon--warm-gray-80: #403c3c !default !global;
-  $carbon--warm-gray-90: #2b2828 !default !global;
-  $carbon--warm-gray-100: #1a1717 !default !global;
-  $carbon--white-0: #ffffff !default !global;
-  $carbon--yellow-20: #fdd13a !default !global;
-  $black-100: #000000 !default !global;
-  $blue-10: #edf4ff !default !global;
-  $blue-20: #c9deff !default !global;
-  $blue-30: #97c1ff !default !global;
-  $blue-40: #6ea6ff !default !global;
-  $blue-50: #408bfc !default !global;
-  $blue-60: #0062ff !default !global;
-  $blue-70: #054ada !default !global;
-  $blue-80: #0530ad !default !global;
-  $blue-90: #061f80 !default !global;
-  $blue-100: #051243 !default !global;
-  $cool-gray-10: #f2f4f8 !default !global;
-  $cool-gray-20: #d5d9e0 !default !global;
-  $cool-gray-30: #b9bfc7 !default !global;
-  $cool-gray-40: #9fa5ad !default !global;
-  $cool-gray-50: #868d95 !default !global;
-  $cool-gray-60: #697077 !default !global;
-  $cool-gray-70: #50565b !default !global;
-  $cool-gray-80: #373d42 !default !global;
-  $cool-gray-90: #242a2e !default !global;
-  $cool-gray-100: #13171a !default !global;
-  $cyan-10: #e3f6ff !default !global;
-  $cyan-20: #b3e6ff !default !global;
-  $cyan-30: #6ccaff !default !global;
-  $cyan-40: #30b0ff !default !global;
-  $cyan-50: #1191e6 !default !global;
-  $cyan-60: #0072c3 !default !global;
-  $cyan-70: #0058a1 !default !global;
-  $cyan-80: #003d73 !default !global;
-  $cyan-90: #002b50 !default !global;
-  $cyan-100: #07192b !default !global;
-  $gray-10: #f3f3f3 !default !global;
-  $gray-20: #dcdcdc !default !global;
-  $gray-30: #bebebe !default !global;
-  $gray-40: #a4a4a4 !default !global;
-  $gray-50: #8c8c8c !default !global;
-  $gray-60: #6f6f6f !default !global;
-  $gray-70: #565656 !default !global;
-  $gray-80: #3d3d3d !default !global;
-  $gray-90: #282828 !default !global;
-  $gray-100: #171717 !default !global;
-  $green-10: #dafbe4 !default !global;
-  $green-20: #9deeb2 !default !global;
-  $green-30: #56d679 !default !global;
-  $green-40: #3dbb61 !default !global;
-  $green-50: #24a148 !default !global;
-  $green-60: #198038 !default !global;
-  $green-70: #10642a !default !global;
-  $green-80: #054719 !default !global;
-  $green-90: #01330f !default !global;
-  $green-100: #081b09 !default !global;
-  $magenta-10: #fff0f6 !default !global;
-  $magenta-20: #ffcfe1 !default !global;
-  $magenta-30: #ffa0c2 !default !global;
-  $magenta-40: #fa75a6 !default !global;
-  $magenta-50: #ee538b !default !global;
-  $magenta-60: #d12765 !default !global;
-  $magenta-70: #a11950 !default !global;
-  $magenta-80: #760a3a !default !global;
-  $magenta-90: #57002b !default !global;
-  $magenta-100: #2a0a16 !default !global;
-  $orange-40: #fc7b1e !default !global;
-  $purple-10: #f7f1ff !default !global;
-  $purple-20: #e6d6ff !default !global;
-  $purple-30: #d0b0ff !default !global;
-  $purple-40: #bb8eff !default !global;
-  $purple-50: #a66efa !default !global;
-  $purple-60: #8a3ffc !default !global;
-  $purple-70: #6e32c9 !default !global;
-  $purple-80: #4f2196 !default !global;
-  $purple-90: #38146b !default !global;
-  $purple-100: #1e1033 !default !global;
-  $red-10: #fff0f1 !default !global;
-  $red-20: #fcd0d3 !default !global;
-  $red-30: #ffa4a9 !default !global;
-  $red-40: #ff767c !default !global;
-  $red-50: #fb4b53 !default !global;
-  $red-60: #da1e28 !default !global;
-  $red-70: #a51920 !default !global;
-  $red-80: #750e13 !default !global;
-  $red-90: #570408 !default !global;
-  $red-100: #2c080a !default !global;
-  $teal-10: #dbfbfb !default !global;
-  $teal-20: #92eeee !default !global;
-  $teal-30: #20d5d2 !default !global;
-  $teal-40: #00bab6 !default !global;
-  $teal-50: #009c98 !default !global;
-  $teal-60: #007d79 !default !global;
-  $teal-70: #006161 !default !global;
-  $teal-80: #004548 !default !global;
-  $teal-90: #003137 !default !global;
-  $teal-100: #081a1c !default !global;
-  $warm-gray-10: #f7f3f1 !default !global;
-  $warm-gray-20: #e0dbda !default !global;
-  $warm-gray-30: #c1bcbb !default !global;
-  $warm-gray-40: #a7a2a2 !default !global;
-  $warm-gray-50: #8f8b8b !default !global;
-  $warm-gray-60: #726e6e !default !global;
-  $warm-gray-70: #595555 !default !global;
-  $warm-gray-80: #403c3c !default !global;
-  $warm-gray-90: #2b2828 !default !global;
-  $warm-gray-100: #1a1717 !default !global;
-  $white-0: #ffffff !default !global;
-  $yellow-20: #fdd13a !default !global;
-  $carbon--colors: (
-    'black': (
-      100: #000000,
-    ),
-    'blue': (
-      10: #edf4ff,
-      20: #c9deff,
-      30: #97c1ff,
-      40: #6ea6ff,
-      50: #408bfc,
-      60: #0062ff,
-      70: #054ada,
-      80: #0530ad,
-      90: #061f80,
-      100: #051243,
-    ),
-    'coolGray': (
-      10: #f2f4f8,
-      20: #d5d9e0,
-      30: #b9bfc7,
-      40: #9fa5ad,
-      50: #868d95,
-      60: #697077,
-      70: #50565b,
-      80: #373d42,
-      90: #242a2e,
-      100: #13171a,
-    ),
-    'cyan': (
-      10: #e3f6ff,
-      20: #b3e6ff,
-      30: #6ccaff,
-      40: #30b0ff,
-      50: #1191e6,
-      60: #0072c3,
-      70: #0058a1,
-      80: #003d73,
-      90: #002b50,
-      100: #07192b,
-    ),
-    'gray': (
-      10: #f3f3f3,
-      20: #dcdcdc,
-      30: #bebebe,
-      40: #a4a4a4,
-      50: #8c8c8c,
-      60: #6f6f6f,
-      70: #565656,
-      80: #3d3d3d,
-      90: #282828,
-      100: #171717,
-    ),
-    'green': (
-      10: #dafbe4,
-      20: #9deeb2,
-      30: #56d679,
-      40: #3dbb61,
-      50: #24a148,
-      60: #198038,
-      70: #10642a,
-      80: #054719,
-      90: #01330f,
-      100: #081b09,
-    ),
-    'magenta': (
-      10: #fff0f6,
-      20: #ffcfe1,
-      30: #ffa0c2,
-      40: #fa75a6,
-      50: #ee538b,
-      60: #d12765,
-      70: #a11950,
-      80: #760a3a,
-      90: #57002b,
-      100: #2a0a16,
-    ),
-    'orange': (
-      40: #fc7b1e,
-    ),
-    'purple': (
-      10: #f7f1ff,
-      20: #e6d6ff,
-      30: #d0b0ff,
-      40: #bb8eff,
-      50: #a66efa,
-      60: #8a3ffc,
-      70: #6e32c9,
-      80: #4f2196,
-      90: #38146b,
-      100: #1e1033,
-    ),
-    'red': (
-      10: #fff0f1,
-      20: #fcd0d3,
-      30: #ffa4a9,
-      40: #ff767c,
-      50: #fb4b53,
-      60: #da1e28,
-      70: #a51920,
-      80: #750e13,
-      90: #570408,
-      100: #2c080a,
-    ),
-    'teal': (
-      10: #dbfbfb,
-      20: #92eeee,
-      30: #20d5d2,
-      40: #00bab6,
-      50: #009c98,
-      60: #007d79,
-      70: #006161,
-      80: #004548,
-      90: #003137,
-      100: #081a1c,
-    ),
-    'warmGray': (
-      10: #f7f3f1,
-      20: #e0dbda,
-      30: #c1bcbb,
-      40: #a7a2a2,
-      50: #8f8b8b,
-      60: #726e6e,
-      70: #595555,
-      80: #403c3c,
-      90: #2b2828,
-      100: #1a1717,
-    ),
-    'white': (
-      0: #ffffff,
-    ),
-    'yellow': (
-      20: #fdd13a,
-    ),
-  ) !default !global;
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss b/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss
deleted file mode 100644
index 00961a325f26..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Code generated by @carbon/colors. DO NOT EDIT.
-
-@import './mixins';
-
-// Deprecated ☠️
-@include ibm--colors();
-// Preferred
-@include carbon--colors();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss b/scss/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss
deleted file mode 100644
index 44925ebd7782..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss
+++ /dev/null
@@ -1,589 +0,0 @@
-// Code generated by @carbon/colors. DO NOT EDIT.
-
-// Deprecated ☠️
-@mixin ibm--colors {
-  $ibm-color__black-100: #000000 !default !global;
-  $ibm-color__blue-10: #edf4ff !default !global;
-  $ibm-color__blue-20: #c9deff !default !global;
-  $ibm-color__blue-30: #97c1ff !default !global;
-  $ibm-color__blue-40: #6ea6ff !default !global;
-  $ibm-color__blue-50: #408bfc !default !global;
-  $ibm-color__blue-60: #0062ff !default !global;
-  $ibm-color__blue-70: #054ada !default !global;
-  $ibm-color__blue-80: #0530ad !default !global;
-  $ibm-color__blue-90: #061f80 !default !global;
-  $ibm-color__blue-100: #051243 !default !global;
-  $ibm-color__cool-gray-10: #f2f4f8 !default !global;
-  $ibm-color__cool-gray-20: #d5d9e0 !default !global;
-  $ibm-color__cool-gray-30: #b9bfc7 !default !global;
-  $ibm-color__cool-gray-40: #9fa5ad !default !global;
-  $ibm-color__cool-gray-50: #868d95 !default !global;
-  $ibm-color__cool-gray-60: #697077 !default !global;
-  $ibm-color__cool-gray-70: #50565b !default !global;
-  $ibm-color__cool-gray-80: #373d42 !default !global;
-  $ibm-color__cool-gray-90: #242a2e !default !global;
-  $ibm-color__cool-gray-100: #13171a !default !global;
-  $ibm-color__cyan-10: #e3f6ff !default !global;
-  $ibm-color__cyan-20: #b3e6ff !default !global;
-  $ibm-color__cyan-30: #6ccaff !default !global;
-  $ibm-color__cyan-40: #30b0ff !default !global;
-  $ibm-color__cyan-50: #1191e6 !default !global;
-  $ibm-color__cyan-60: #0072c3 !default !global;
-  $ibm-color__cyan-70: #0058a1 !default !global;
-  $ibm-color__cyan-80: #003d73 !default !global;
-  $ibm-color__cyan-90: #002b50 !default !global;
-  $ibm-color__cyan-100: #07192b !default !global;
-  $ibm-color__gray-10: #f3f3f3 !default !global;
-  $ibm-color__gray-20: #dcdcdc !default !global;
-  $ibm-color__gray-30: #bebebe !default !global;
-  $ibm-color__gray-40: #a4a4a4 !default !global;
-  $ibm-color__gray-50: #8c8c8c !default !global;
-  $ibm-color__gray-60: #6f6f6f !default !global;
-  $ibm-color__gray-70: #565656 !default !global;
-  $ibm-color__gray-80: #3d3d3d !default !global;
-  $ibm-color__gray-90: #282828 !default !global;
-  $ibm-color__gray-100: #171717 !default !global;
-  $ibm-color__green-10: #dafbe4 !default !global;
-  $ibm-color__green-20: #9deeb2 !default !global;
-  $ibm-color__green-30: #56d679 !default !global;
-  $ibm-color__green-40: #3dbb61 !default !global;
-  $ibm-color__green-50: #24a148 !default !global;
-  $ibm-color__green-60: #198038 !default !global;
-  $ibm-color__green-70: #10642a !default !global;
-  $ibm-color__green-80: #054719 !default !global;
-  $ibm-color__green-90: #01330f !default !global;
-  $ibm-color__green-100: #081b09 !default !global;
-  $ibm-color__magenta-10: #fff0f6 !default !global;
-  $ibm-color__magenta-20: #ffcfe1 !default !global;
-  $ibm-color__magenta-30: #ffa0c2 !default !global;
-  $ibm-color__magenta-40: #fa75a6 !default !global;
-  $ibm-color__magenta-50: #ee538b !default !global;
-  $ibm-color__magenta-60: #d12765 !default !global;
-  $ibm-color__magenta-70: #a11950 !default !global;
-  $ibm-color__magenta-80: #760a3a !default !global;
-  $ibm-color__magenta-90: #57002b !default !global;
-  $ibm-color__magenta-100: #2a0a16 !default !global;
-  $ibm-color__orange-40: #fc7b1e !default !global;
-  $ibm-color__purple-10: #f7f1ff !default !global;
-  $ibm-color__purple-20: #e6d6ff !default !global;
-  $ibm-color__purple-30: #d0b0ff !default !global;
-  $ibm-color__purple-40: #bb8eff !default !global;
-  $ibm-color__purple-50: #a66efa !default !global;
-  $ibm-color__purple-60: #8a3ffc !default !global;
-  $ibm-color__purple-70: #6e32c9 !default !global;
-  $ibm-color__purple-80: #4f2196 !default !global;
-  $ibm-color__purple-90: #38146b !default !global;
-  $ibm-color__purple-100: #1e1033 !default !global;
-  $ibm-color__red-10: #fff0f1 !default !global;
-  $ibm-color__red-20: #fcd0d3 !default !global;
-  $ibm-color__red-30: #ffa4a9 !default !global;
-  $ibm-color__red-40: #ff767c !default !global;
-  $ibm-color__red-50: #fb4b53 !default !global;
-  $ibm-color__red-60: #da1e28 !default !global;
-  $ibm-color__red-70: #a51920 !default !global;
-  $ibm-color__red-80: #750e13 !default !global;
-  $ibm-color__red-90: #570408 !default !global;
-  $ibm-color__red-100: #2c080a !default !global;
-  $ibm-color__teal-10: #dbfbfb !default !global;
-  $ibm-color__teal-20: #92eeee !default !global;
-  $ibm-color__teal-30: #20d5d2 !default !global;
-  $ibm-color__teal-40: #00bab6 !default !global;
-  $ibm-color__teal-50: #009c98 !default !global;
-  $ibm-color__teal-60: #007d79 !default !global;
-  $ibm-color__teal-70: #006161 !default !global;
-  $ibm-color__teal-80: #004548 !default !global;
-  $ibm-color__teal-90: #003137 !default !global;
-  $ibm-color__teal-100: #081a1c !default !global;
-  $ibm-color__warm-gray-10: #f7f3f1 !default !global;
-  $ibm-color__warm-gray-20: #e0dbda !default !global;
-  $ibm-color__warm-gray-30: #c1bcbb !default !global;
-  $ibm-color__warm-gray-40: #a7a2a2 !default !global;
-  $ibm-color__warm-gray-50: #8f8b8b !default !global;
-  $ibm-color__warm-gray-60: #726e6e !default !global;
-  $ibm-color__warm-gray-70: #595555 !default !global;
-  $ibm-color__warm-gray-80: #403c3c !default !global;
-  $ibm-color__warm-gray-90: #2b2828 !default !global;
-  $ibm-color__warm-gray-100: #1a1717 !default !global;
-  $ibm-color__white-0: #ffffff !default !global;
-  $ibm-color__yellow-20: #fdd13a !default !global;
-
-  $ibm-color-map: (
-    'black': (
-      100: #000000,
-    ),
-    'blue': (
-      10: #edf4ff,
-      20: #c9deff,
-      30: #97c1ff,
-      40: #6ea6ff,
-      50: #408bfc,
-      60: #0062ff,
-      70: #054ada,
-      80: #0530ad,
-      90: #061f80,
-      100: #051243,
-    ),
-    'coolGray': (
-      10: #f2f4f8,
-      20: #d5d9e0,
-      30: #b9bfc7,
-      40: #9fa5ad,
-      50: #868d95,
-      60: #697077,
-      70: #50565b,
-      80: #373d42,
-      90: #242a2e,
-      100: #13171a,
-    ),
-    'cyan': (
-      10: #e3f6ff,
-      20: #b3e6ff,
-      30: #6ccaff,
-      40: #30b0ff,
-      50: #1191e6,
-      60: #0072c3,
-      70: #0058a1,
-      80: #003d73,
-      90: #002b50,
-      100: #07192b,
-    ),
-    'gray': (
-      10: #f3f3f3,
-      20: #dcdcdc,
-      30: #bebebe,
-      40: #a4a4a4,
-      50: #8c8c8c,
-      60: #6f6f6f,
-      70: #565656,
-      80: #3d3d3d,
-      90: #282828,
-      100: #171717,
-    ),
-    'green': (
-      10: #dafbe4,
-      20: #9deeb2,
-      30: #56d679,
-      40: #3dbb61,
-      50: #24a148,
-      60: #198038,
-      70: #10642a,
-      80: #054719,
-      90: #01330f,
-      100: #081b09,
-    ),
-    'magenta': (
-      10: #fff0f6,
-      20: #ffcfe1,
-      30: #ffa0c2,
-      40: #fa75a6,
-      50: #ee538b,
-      60: #d12765,
-      70: #a11950,
-      80: #760a3a,
-      90: #57002b,
-      100: #2a0a16,
-    ),
-    'orange': (
-      40: #fc7b1e,
-    ),
-    'purple': (
-      10: #f7f1ff,
-      20: #e6d6ff,
-      30: #d0b0ff,
-      40: #bb8eff,
-      50: #a66efa,
-      60: #8a3ffc,
-      70: #6e32c9,
-      80: #4f2196,
-      90: #38146b,
-      100: #1e1033,
-    ),
-    'red': (
-      10: #fff0f1,
-      20: #fcd0d3,
-      30: #ffa4a9,
-      40: #ff767c,
-      50: #fb4b53,
-      60: #da1e28,
-      70: #a51920,
-      80: #750e13,
-      90: #570408,
-      100: #2c080a,
-    ),
-    'teal': (
-      10: #dbfbfb,
-      20: #92eeee,
-      30: #20d5d2,
-      40: #00bab6,
-      50: #009c98,
-      60: #007d79,
-      70: #006161,
-      80: #004548,
-      90: #003137,
-      100: #081a1c,
-    ),
-    'warmGray': (
-      10: #f7f3f1,
-      20: #e0dbda,
-      30: #c1bcbb,
-      40: #a7a2a2,
-      50: #8f8b8b,
-      60: #726e6e,
-      70: #595555,
-      80: #403c3c,
-      90: #2b2828,
-      100: #1a1717,
-    ),
-    'white': (
-      0: #ffffff,
-    ),
-    'yellow': (
-      20: #fdd13a,
-    ),
-  ) !default !global;
-}
-
-@mixin carbon--colors {
-  $carbon--black-100: #000000 !default !global;
-  $carbon--blue-10: #edf4ff !default !global;
-  $carbon--blue-20: #c9deff !default !global;
-  $carbon--blue-30: #97c1ff !default !global;
-  $carbon--blue-40: #6ea6ff !default !global;
-  $carbon--blue-50: #408bfc !default !global;
-  $carbon--blue-60: #0062ff !default !global;
-  $carbon--blue-70: #054ada !default !global;
-  $carbon--blue-80: #0530ad !default !global;
-  $carbon--blue-90: #061f80 !default !global;
-  $carbon--blue-100: #051243 !default !global;
-  $carbon--cool-gray-10: #f2f4f8 !default !global;
-  $carbon--cool-gray-20: #d5d9e0 !default !global;
-  $carbon--cool-gray-30: #b9bfc7 !default !global;
-  $carbon--cool-gray-40: #9fa5ad !default !global;
-  $carbon--cool-gray-50: #868d95 !default !global;
-  $carbon--cool-gray-60: #697077 !default !global;
-  $carbon--cool-gray-70: #50565b !default !global;
-  $carbon--cool-gray-80: #373d42 !default !global;
-  $carbon--cool-gray-90: #242a2e !default !global;
-  $carbon--cool-gray-100: #13171a !default !global;
-  $carbon--cyan-10: #e3f6ff !default !global;
-  $carbon--cyan-20: #b3e6ff !default !global;
-  $carbon--cyan-30: #6ccaff !default !global;
-  $carbon--cyan-40: #30b0ff !default !global;
-  $carbon--cyan-50: #1191e6 !default !global;
-  $carbon--cyan-60: #0072c3 !default !global;
-  $carbon--cyan-70: #0058a1 !default !global;
-  $carbon--cyan-80: #003d73 !default !global;
-  $carbon--cyan-90: #002b50 !default !global;
-  $carbon--cyan-100: #07192b !default !global;
-  $carbon--gray-10: #f3f3f3 !default !global;
-  $carbon--gray-20: #dcdcdc !default !global;
-  $carbon--gray-30: #bebebe !default !global;
-  $carbon--gray-40: #a4a4a4 !default !global;
-  $carbon--gray-50: #8c8c8c !default !global;
-  $carbon--gray-60: #6f6f6f !default !global;
-  $carbon--gray-70: #565656 !default !global;
-  $carbon--gray-80: #3d3d3d !default !global;
-  $carbon--gray-90: #282828 !default !global;
-  $carbon--gray-100: #171717 !default !global;
-  $carbon--green-10: #dafbe4 !default !global;
-  $carbon--green-20: #9deeb2 !default !global;
-  $carbon--green-30: #56d679 !default !global;
-  $carbon--green-40: #3dbb61 !default !global;
-  $carbon--green-50: #24a148 !default !global;
-  $carbon--green-60: #198038 !default !global;
-  $carbon--green-70: #10642a !default !global;
-  $carbon--green-80: #054719 !default !global;
-  $carbon--green-90: #01330f !default !global;
-  $carbon--green-100: #081b09 !default !global;
-  $carbon--magenta-10: #fff0f6 !default !global;
-  $carbon--magenta-20: #ffcfe1 !default !global;
-  $carbon--magenta-30: #ffa0c2 !default !global;
-  $carbon--magenta-40: #fa75a6 !default !global;
-  $carbon--magenta-50: #ee538b !default !global;
-  $carbon--magenta-60: #d12765 !default !global;
-  $carbon--magenta-70: #a11950 !default !global;
-  $carbon--magenta-80: #760a3a !default !global;
-  $carbon--magenta-90: #57002b !default !global;
-  $carbon--magenta-100: #2a0a16 !default !global;
-  $carbon--orange-40: #fc7b1e !default !global;
-  $carbon--purple-10: #f7f1ff !default !global;
-  $carbon--purple-20: #e6d6ff !default !global;
-  $carbon--purple-30: #d0b0ff !default !global;
-  $carbon--purple-40: #bb8eff !default !global;
-  $carbon--purple-50: #a66efa !default !global;
-  $carbon--purple-60: #8a3ffc !default !global;
-  $carbon--purple-70: #6e32c9 !default !global;
-  $carbon--purple-80: #4f2196 !default !global;
-  $carbon--purple-90: #38146b !default !global;
-  $carbon--purple-100: #1e1033 !default !global;
-  $carbon--red-10: #fff0f1 !default !global;
-  $carbon--red-20: #fcd0d3 !default !global;
-  $carbon--red-30: #ffa4a9 !default !global;
-  $carbon--red-40: #ff767c !default !global;
-  $carbon--red-50: #fb4b53 !default !global;
-  $carbon--red-60: #da1e28 !default !global;
-  $carbon--red-70: #a51920 !default !global;
-  $carbon--red-80: #750e13 !default !global;
-  $carbon--red-90: #570408 !default !global;
-  $carbon--red-100: #2c080a !default !global;
-  $carbon--teal-10: #dbfbfb !default !global;
-  $carbon--teal-20: #92eeee !default !global;
-  $carbon--teal-30: #20d5d2 !default !global;
-  $carbon--teal-40: #00bab6 !default !global;
-  $carbon--teal-50: #009c98 !default !global;
-  $carbon--teal-60: #007d79 !default !global;
-  $carbon--teal-70: #006161 !default !global;
-  $carbon--teal-80: #004548 !default !global;
-  $carbon--teal-90: #003137 !default !global;
-  $carbon--teal-100: #081a1c !default !global;
-  $carbon--warm-gray-10: #f7f3f1 !default !global;
-  $carbon--warm-gray-20: #e0dbda !default !global;
-  $carbon--warm-gray-30: #c1bcbb !default !global;
-  $carbon--warm-gray-40: #a7a2a2 !default !global;
-  $carbon--warm-gray-50: #8f8b8b !default !global;
-  $carbon--warm-gray-60: #726e6e !default !global;
-  $carbon--warm-gray-70: #595555 !default !global;
-  $carbon--warm-gray-80: #403c3c !default !global;
-  $carbon--warm-gray-90: #2b2828 !default !global;
-  $carbon--warm-gray-100: #1a1717 !default !global;
-  $carbon--white-0: #ffffff !default !global;
-  $carbon--yellow-20: #fdd13a !default !global;
-  $black-100: #000000 !default !global;
-  $blue-10: #edf4ff !default !global;
-  $blue-20: #c9deff !default !global;
-  $blue-30: #97c1ff !default !global;
-  $blue-40: #6ea6ff !default !global;
-  $blue-50: #408bfc !default !global;
-  $blue-60: #0062ff !default !global;
-  $blue-70: #054ada !default !global;
-  $blue-80: #0530ad !default !global;
-  $blue-90: #061f80 !default !global;
-  $blue-100: #051243 !default !global;
-  $cool-gray-10: #f2f4f8 !default !global;
-  $cool-gray-20: #d5d9e0 !default !global;
-  $cool-gray-30: #b9bfc7 !default !global;
-  $cool-gray-40: #9fa5ad !default !global;
-  $cool-gray-50: #868d95 !default !global;
-  $cool-gray-60: #697077 !default !global;
-  $cool-gray-70: #50565b !default !global;
-  $cool-gray-80: #373d42 !default !global;
-  $cool-gray-90: #242a2e !default !global;
-  $cool-gray-100: #13171a !default !global;
-  $cyan-10: #e3f6ff !default !global;
-  $cyan-20: #b3e6ff !default !global;
-  $cyan-30: #6ccaff !default !global;
-  $cyan-40: #30b0ff !default !global;
-  $cyan-50: #1191e6 !default !global;
-  $cyan-60: #0072c3 !default !global;
-  $cyan-70: #0058a1 !default !global;
-  $cyan-80: #003d73 !default !global;
-  $cyan-90: #002b50 !default !global;
-  $cyan-100: #07192b !default !global;
-  $gray-10: #f3f3f3 !default !global;
-  $gray-20: #dcdcdc !default !global;
-  $gray-30: #bebebe !default !global;
-  $gray-40: #a4a4a4 !default !global;
-  $gray-50: #8c8c8c !default !global;
-  $gray-60: #6f6f6f !default !global;
-  $gray-70: #565656 !default !global;
-  $gray-80: #3d3d3d !default !global;
-  $gray-90: #282828 !default !global;
-  $gray-100: #171717 !default !global;
-  $green-10: #dafbe4 !default !global;
-  $green-20: #9deeb2 !default !global;
-  $green-30: #56d679 !default !global;
-  $green-40: #3dbb61 !default !global;
-  $green-50: #24a148 !default !global;
-  $green-60: #198038 !default !global;
-  $green-70: #10642a !default !global;
-  $green-80: #054719 !default !global;
-  $green-90: #01330f !default !global;
-  $green-100: #081b09 !default !global;
-  $magenta-10: #fff0f6 !default !global;
-  $magenta-20: #ffcfe1 !default !global;
-  $magenta-30: #ffa0c2 !default !global;
-  $magenta-40: #fa75a6 !default !global;
-  $magenta-50: #ee538b !default !global;
-  $magenta-60: #d12765 !default !global;
-  $magenta-70: #a11950 !default !global;
-  $magenta-80: #760a3a !default !global;
-  $magenta-90: #57002b !default !global;
-  $magenta-100: #2a0a16 !default !global;
-  $orange-40: #fc7b1e !default !global;
-  $purple-10: #f7f1ff !default !global;
-  $purple-20: #e6d6ff !default !global;
-  $purple-30: #d0b0ff !default !global;
-  $purple-40: #bb8eff !default !global;
-  $purple-50: #a66efa !default !global;
-  $purple-60: #8a3ffc !default !global;
-  $purple-70: #6e32c9 !default !global;
-  $purple-80: #4f2196 !default !global;
-  $purple-90: #38146b !default !global;
-  $purple-100: #1e1033 !default !global;
-  $red-10: #fff0f1 !default !global;
-  $red-20: #fcd0d3 !default !global;
-  $red-30: #ffa4a9 !default !global;
-  $red-40: #ff767c !default !global;
-  $red-50: #fb4b53 !default !global;
-  $red-60: #da1e28 !default !global;
-  $red-70: #a51920 !default !global;
-  $red-80: #750e13 !default !global;
-  $red-90: #570408 !default !global;
-  $red-100: #2c080a !default !global;
-  $teal-10: #dbfbfb !default !global;
-  $teal-20: #92eeee !default !global;
-  $teal-30: #20d5d2 !default !global;
-  $teal-40: #00bab6 !default !global;
-  $teal-50: #009c98 !default !global;
-  $teal-60: #007d79 !default !global;
-  $teal-70: #006161 !default !global;
-  $teal-80: #004548 !default !global;
-  $teal-90: #003137 !default !global;
-  $teal-100: #081a1c !default !global;
-  $warm-gray-10: #f7f3f1 !default !global;
-  $warm-gray-20: #e0dbda !default !global;
-  $warm-gray-30: #c1bcbb !default !global;
-  $warm-gray-40: #a7a2a2 !default !global;
-  $warm-gray-50: #8f8b8b !default !global;
-  $warm-gray-60: #726e6e !default !global;
-  $warm-gray-70: #595555 !default !global;
-  $warm-gray-80: #403c3c !default !global;
-  $warm-gray-90: #2b2828 !default !global;
-  $warm-gray-100: #1a1717 !default !global;
-  $white-0: #ffffff !default !global;
-  $yellow-20: #fdd13a !default !global;
-  $carbon--colors: (
-    'black': (
-      100: #000000,
-    ),
-    'blue': (
-      10: #edf4ff,
-      20: #c9deff,
-      30: #97c1ff,
-      40: #6ea6ff,
-      50: #408bfc,
-      60: #0062ff,
-      70: #054ada,
-      80: #0530ad,
-      90: #061f80,
-      100: #051243,
-    ),
-    'coolGray': (
-      10: #f2f4f8,
-      20: #d5d9e0,
-      30: #b9bfc7,
-      40: #9fa5ad,
-      50: #868d95,
-      60: #697077,
-      70: #50565b,
-      80: #373d42,
-      90: #242a2e,
-      100: #13171a,
-    ),
-    'cyan': (
-      10: #e3f6ff,
-      20: #b3e6ff,
-      30: #6ccaff,
-      40: #30b0ff,
-      50: #1191e6,
-      60: #0072c3,
-      70: #0058a1,
-      80: #003d73,
-      90: #002b50,
-      100: #07192b,
-    ),
-    'gray': (
-      10: #f3f3f3,
-      20: #dcdcdc,
-      30: #bebebe,
-      40: #a4a4a4,
-      50: #8c8c8c,
-      60: #6f6f6f,
-      70: #565656,
-      80: #3d3d3d,
-      90: #282828,
-      100: #171717,
-    ),
-    'green': (
-      10: #dafbe4,
-      20: #9deeb2,
-      30: #56d679,
-      40: #3dbb61,
-      50: #24a148,
-      60: #198038,
-      70: #10642a,
-      80: #054719,
-      90: #01330f,
-      100: #081b09,
-    ),
-    'magenta': (
-      10: #fff0f6,
-      20: #ffcfe1,
-      30: #ffa0c2,
-      40: #fa75a6,
-      50: #ee538b,
-      60: #d12765,
-      70: #a11950,
-      80: #760a3a,
-      90: #57002b,
-      100: #2a0a16,
-    ),
-    'orange': (
-      40: #fc7b1e,
-    ),
-    'purple': (
-      10: #f7f1ff,
-      20: #e6d6ff,
-      30: #d0b0ff,
-      40: #bb8eff,
-      50: #a66efa,
-      60: #8a3ffc,
-      70: #6e32c9,
-      80: #4f2196,
-      90: #38146b,
-      100: #1e1033,
-    ),
-    'red': (
-      10: #fff0f1,
-      20: #fcd0d3,
-      30: #ffa4a9,
-      40: #ff767c,
-      50: #fb4b53,
-      60: #da1e28,
-      70: #a51920,
-      80: #750e13,
-      90: #570408,
-      100: #2c080a,
-    ),
-    'teal': (
-      10: #dbfbfb,
-      20: #92eeee,
-      30: #20d5d2,
-      40: #00bab6,
-      50: #009c98,
-      60: #007d79,
-      70: #006161,
-      80: #004548,
-      90: #003137,
-      100: #081a1c,
-    ),
-    'warmGray': (
-      10: #f7f3f1,
-      20: #e0dbda,
-      30: #c1bcbb,
-      40: #a7a2a2,
-      50: #8f8b8b,
-      60: #726e6e,
-      70: #595555,
-      80: #403c3c,
-      90: #2b2828,
-      100: #1a1717,
-    ),
-    'white': (
-      0: #ffffff,
-    ),
-    'yellow': (
-      20: #fdd13a,
-    ),
-  ) !default !global;
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/elements.scss b/scss/globals/scss/vendor/@carbon/elements/scss/elements.scss
deleted file mode 100644
index ceeb84dd9711..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/elements.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// The files below are generated using the `yarn build` stage for this
-// package
-@import './import-once/import-once';
-@import './colors/colors';
-@import './themes/themes';
-@import './layout/layout';
-@import './grid/grid';
-@import './type/type';
-@import './motion/motion';
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/12.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
deleted file mode 100644
index 982a6f5512c7..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/12.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../layout/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
-
-$breakpoints: map-merge(
-  (
-    sm: (
-      columns: 12,
-    ),
-    md: (
-      columns: 12,
-    ),
-    lg: (
-      columns: 12,
-    ),
-    xlg: (
-      columns: 12,
-    ),
-    max: (
-      columns: 12,
-    ),
-  ),
-  $carbon--grid-breakpoints
-);
-
-// Default container class for a grid. Includes max-width for each breakpoint
-.#{$prefix}--grid {
-  @include carbon--make-container($breakpoints);
-  @include carbon--make-container-max-widths($breakpoints);
-}
-
-// Fluid variant of the grid. Will not set max-width for breakpoints and will
-// full-bleed across the page.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container($breakpoints);
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($breakpoints, $carbon--grid-gutter);
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
deleted file mode 100644
index c70747e7708a..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_col.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Column helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-@import 'prefix';
-
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter) {
-  // 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.
-  width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
-
-  // Support the padding use-case for each columns. Idea is that each child in a
-  // cell selector should have the default padding applied.
-  .#{$prefix}--grid--padding & > * {
-    padding: $carbon--grid-cell-padding;
-  }
-
-  // When in a bleed grid, we collapse all gutters so each column is flat with
-  // the each other.
-  .#{$prefix}--grid--bleed & {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
-  // side.
-  .#{$prefix}--grid--condensed & {
-    padding-right: 1px;
-    padding-left: 1px;
-  }
-
-  .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-left: 0;
-  }
-
-  [dir='rtl'] .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-right: 0;
-    padding-left: initial;
-  }
-}
-
-@mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
-}
-
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready();
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: carbon--breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
-
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready();
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready();
-    }
-
-    @include carbon--breakpoint($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .#{$prefix}--col,
-      .#{$prefix}--col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-      }
-
-      .#{$prefix}--col--auto,
-      .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
-        width: auto;
-        // Reset earlier grid tiers
-        max-width: 100%;
-      }
-
-      @for $i from 1 through $columns {
-        .#{$prefix}--col#{$infix}-#{$i} {
-          @include carbon--make-col($i, $columns);
-        }
-      }
-
-      @for $i from 0 through ($columns - 1) {
-        @if not($infix == '') {
-          .#{$prefix}--offset#{$infix}-#{$i} {
-            @include carbon--make-col-offset($i, $columns);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
deleted file mode 100644
index e6635ad45368..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_container.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Container helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-@import '../layout/utilities';
-
-/// Create the container for a grid. Will cause full-bleed for the grid unless
-/// max-width properties are added with `make-container-max-widths`
-@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
-
-  @include carbon--set-largest-breakpoint();
-
-  @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
-    $margin: map-get($value, margin);
-
-    @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
-      @if $prev-margin != $margin {
-        @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
-          padding-right: #{($carbon--grid-gutter / 2) + $margin};
-        }
-      }
-    } @else {
-      @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
-        padding-right: #{($carbon--grid-gutter / 2) + $margin};
-      }
-    }
-  }
-}
-
-// gets the last breakpoint width, and sets it to a max-width
-@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
-
-  max-width: map-get($largest-breakpoint, 'width');
-}
-
-/// Add in the max-widths for each breakpoint to the container
-@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/scss/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss
deleted file mode 100644
index 49c713944099..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$prefix: 'bx' !default;
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
deleted file mode 100644
index 4e069516fab5..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/_row.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Row helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '../layout/breakpoint';
-
-/// Used to build a row inside of a grid
-@mixin carbon--make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $carbon--grid-gutter / 2;
-  margin-left: -1 * $carbon--grid-gutter / 2;
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
deleted file mode 100644
index bddfc4230dc1..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/aspect-ratio.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../import-once/import-once';
-@import 'prefix';
-
-// Inspired by:
-// https://github.com/tachyons-css/tachyons-aspect-ratios/blob/fdccef8d0d534a7faddde4cb5754ffb6d1c36b16/src/tachyons-aspect-ratios.css#L11-L22
-@include exports('@carbon/grid/aspect-ratio.scss') {
-  .#{$prefix}--aspect-ratio {
-    height: 0;
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio--object {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-
-  .#{$prefix}--aspect-ratio--16x9 {
-    padding-bottom: 56.25%;
-  }
-
-  .#{$prefix}--aspect-ratio--2x1 {
-    padding-bottom: 50%;
-  }
-
-  .#{$prefix}--aspect-ratio--4x3 {
-    padding-bottom: 75%;
-  }
-
-  .#{$prefix}--aspect-ratio--1x1 {
-    padding-bottom: 100%;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss b/scss/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
deleted file mode 100644
index 1d3ac3f990a6..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../layout/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
-
-// Fluid variant of the grid.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container();
-}
-
-// Default container class for a grid. Includes max-width for all breakpoints
-.#{$prefix}--grid {
-  @include carbon--make-container();
-  @include carbon--make-container-max-widths();
-}
-
-.#{$prefix}--grid--full-width {
-  @include carbon--largest-breakpoint() {
-    max-width: 100%;
-  }
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($carbon--grid-breakpoints, $carbon--grid-gutter);
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss b/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss
deleted file mode 100644
index b47a41edcd49..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Used from carbon-components:
-// https://github.com/IBM/carbon-components/blob/7fd0895c2061db5a90ff6c8a933a20dd83d6d790/src/globals/scss/_import-once.scss#L1-L16
-$imported-modules: () !default;
-
-/// Module export mixin
-/// This mixin helps making sure a module is imported once and only once.
-/// @access public
-/// @param {String} $name - Name of exported module
-/// @param {Bool} $error [false] - Error when a module has been already imported
-/// @require $imported-modules
-@mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
-    $imported-modules: append($imported-modules, $name) !global;
-    @content;
-  } @else if $warn == true {
-    @warn 'Module `#{$name}` has already been imported.';
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/index.scss b/scss/globals/scss/vendor/@carbon/elements/scss/index.scss
deleted file mode 100644
index c32c551fdb17..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '@carbon/import-once/scss/import-once';
-@import '@carbon/colors/scss/colors';
-@import '@carbon/themes/scss/themes';
-@import '@carbon/layout/scss/layout';
-@import '@carbon/grid/scss/grid';
-@import '@carbon/type/scss/type';
-@import '@carbon/motion/scss/motion';
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
deleted file mode 100644
index d28e7b08c140..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-@import 'convert';
-@import 'utilities';
-
-$carbon--grid-cell-padding: carbon--rem(16px);
-$carbon--grid-gutter: carbon--rem(32px);
-
-// Initial map of our breakpoints and their values
-$carbon--grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: carbon--rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1584px),
-  ),
-) !default;
-
-/// Get the value of the next breakpoint, or null for the last breakpoint.
-/// @param {String} $name - the name of the brekapoint
-/// @param {Map} $breakpoints - a map of breakpoints where the key is the name
-/// of the breakpoint and the value is the values for the breakpoint
-/// @param {List} $breakpoint-names - a list of names from the $breakpoints map
-/// @returns {String}
-@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);
-  }
-  @return null;
-}
-
-@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);
-  }
-  @return null;
-}
-
-/// Check to see if the given breakpoint name
-@function carbon--is-smallest-breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @return index(map-keys($breakpoints), $name) == 1;
-}
-
-/// returns the largest breakpoint name
-/// @param {string} $breakpoint
-/// @content
-@function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) {
-  $total-breakpoints: length($breakpoints);
-  @return carbon--key-by-index($breakpoints, $total-breakpoints);
-}
-
-/// 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`
-/// @param {String} $name - the name of the breakpoint
-/// @returns {String}
-@function carbon--breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-
-/// Generate a media query up to the width of the given breakpoint name
-/// @param {string} $name
-/// @content
-@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-
-  @if map-has-key($breakpoints, $name) {
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the maximum width of the given styles
-/// @param {string} $name
-/// @content
-@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-  @if map-has-key($breakpoints, $name) {
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (max-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the range between the lower and upper
-/// breakpoints.
-/// @param {string} $lower
-/// @param {string} $upper
-/// @content
-@mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) {
-  $min: map-get($breakpoints, $lower);
-  $max: map-get($breakpoints, $upper);
-
-  @if $min and $max {
-    @media (min-width: map-get($min, width)) and (max-width: map-get($map, width)) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include carbon--breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include carbon--breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
-  }
-}
-
-/// generate media query for the largest breakpoint
-/// @param {string} $breakpoint
-/// @content
-@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
-    @content;
-  }
-}
-
-/// Generate a media query for a given breakpoint
-/// @param {string} $breakpoint
-/// @content
-@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss
deleted file mode 100644
index bdb7a4644cb4..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Default, Use with carbon--em() and carbon--rem() functions
-$carbon--base-font-size: 16px !default;
-
-/// Convert a given px unit to a rem unit
-/// @param {px} $px
-/// @return {rem}
-@function carbon--rem($px) {
-  @return ($px / $carbon--base-font-size) * 1rem;
-}
-
-/// Convert a given px unit to a em unit
-/// @param {px} $px
-/// @return {em}
-@function carbon--em($px) {
-  @return ($px / $carbon--base-font-size) * 1em;
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
deleted file mode 100644
index fae59085f4b3..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'breakpoint';
-@import 'utilities';
-
-/// Get the column width for a given breakpoint. Useful for figuring out key
-/// heights
-/// @param {string} $breakpoint
-/// @return rem
-@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);
-    $margin: map-get($values, margin);
-    $columns: map-get($values, columns);
-
-    @return ($width - (2 * $margin)) / $columns;
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
-
-$carbon--key-height-scales: (
-  sm: (
-    carbon--get-column-width(sm),
-    carbon--get-column-width(sm) * 2,
-    carbon--get-column-width(sm) * 3,
-    carbon--get-column-width(sm) * 4,
-    carbon--get-column-width(sm) * 5,
-    carbon--get-column-width(sm) * 6,
-  ),
-  md: (
-    carbon--get-column-width(md),
-    carbon--get-column-width(md) * 2,
-    carbon--get-column-width(md) * 3,
-    carbon--get-column-width(md) * 4,
-    carbon--get-column-width(md) * 5,
-    carbon--get-column-width(md) * 6,
-  ),
-  lg: (
-    carbon--get-column-width(lg),
-    carbon--get-column-width(lg) * 2,
-    carbon--get-column-width(lg) * 3,
-    carbon--get-column-width(lg) * 4,
-    carbon--get-column-width(lg) * 5,
-    carbon--get-column-width(lg) * 6,
-    carbon--get-column-width(lg) * 7,
-    carbon--get-column-width(lg) * 8,
-  ),
-  xlg: (
-    carbon--get-column-width(xlg),
-    carbon--get-column-width(xlg) * 2,
-    carbon--get-column-width(xlg) * 3,
-    carbon--get-column-width(xlg) * 4,
-    carbon--get-column-width(xlg) * 5,
-    carbon--get-column-width(xlg) * 6,
-    carbon--get-column-width(xlg) * 7,
-    carbon--get-column-width(xlg) * 8,
-  ),
-  max: (
-    carbon--get-column-width(max),
-    carbon--get-column-width(max) * 2,
-    carbon--get-column-width(max) * 3,
-    carbon--get-column-width(max) * 4,
-    carbon--get-column-width(max) * 5,
-    carbon--get-column-width(max) * 6,
-    carbon--get-column-width(max) * 7,
-    carbon--get-column-width(max) * 8,
-  ),
-);
-
-/// Get the value of a key height step at a given breakpoint
-/// @param {string} $breakpoint
-/// @param {number} $step
-/// @return rem
-@function carbon--key-height($breakpoint, $step) {
-  @if map-has-key($carbon--key-height-scales, $breakpoint) {
-    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss
deleted file mode 100644
index 6534a16a3207..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'convert';
-
-// Default mini-unit value
-$carbon--mini-unit-size: 8px !default;
-
-/// Get the value of the corresponding number of units
-/// @param {number} $count the number of units to get the value for
-/// @return rem
-@function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
deleted file mode 100644
index 63450abbc058..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'mini-unit';
-
-// fixed spacing
-// Supports 0, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px
-$carbon--fixed-spacing-scale: (
-  0,
-  carbon--mini-units(0.25),
-  carbon--mini-units(0.5),
-  carbon--mini-units(1),
-  carbon--mini-units(1.5),
-  carbon--mini-units(2),
-  carbon--mini-units(3),
-  carbon--mini-units(4),
-  carbon--mini-units(6),
-  carbon--mini-units(8),
-  carbon--mini-units(10),
-  carbon--mini-units(12)
-);
-
-// fluid spacing
-$carbon--fluid-spacing-scale: (0, 2vw, 5vw, 10vw);
-
-/// Get the value of the spacing scale at the given step. The first step is
-/// surprisingly 0, even though lists in sass start at 1. This is because we
-/// want to make accesses to the 0 value more natural, in addition to mirroring
-/// how this would be called in other programming languages
-//  $step: integer
-//  $fluid: boolean
-@function carbon--spacing($step, $fluid: false) {
-  $scale: if($fluid, $carbon--fluid-spacing-scale, $carbon--fixed-spacing-scale);
-  @return nth($scale, $step + 1);
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss
deleted file mode 100644
index f980b566128f..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Map deep get
-/// @author Hugo Giraudel
-/// @access public
-/// @param {Map} $map - Map
-/// @param {Arglist} $keys - Key chain
-/// @return {*} - Desired value
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-
-/// Key by Index
-/// provide a $map, and $index, and get back the relevant
-/// key value.
-/// @param {Map} $map - Map
-/// @param {Integer} $index - Key chain
-/// @return {String} - Desired value
-@function carbon--key-by-index($map, $index) {
-  $keys: map-keys($map);
-  @return nth($keys, $index);
-}
-
-/// Last Map Item
-/// Pass in a map, and get the last one in the list back.
-/// @param {Map} $map - Map
-/// @return {*} - Desired value
-@function last-map-item($map) {
-  $total-length: length($map);
-  @return map-get($map, carbon--key-by-index($map, $total-length));
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss b/scss/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss
deleted file mode 100644
index acc1f1e8f702..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'convert';
-@import 'breakpoint';
-@import 'mini-unit';
-@import 'spacing';
-@import 'key-height';
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss b/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss
deleted file mode 100644
index 83efb88069e9..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Common easings for components in the Carbon Design System
-$carbon--easings: (
-  standard: (
-    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
-  ),
-  entrance: (
-    productive: cubic-bezier(0, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0, 0, 0.3, 1),
-  ),
-  exit: (
-    productive: cubic-bezier(0.2, 0, 1, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 1, 1),
-  ),
-);
-
-/// Get the transition-timing-function for a given easing and motion mode.
-/// Easings that are currently supported include: standard, entrance, and exit.
-/// We also offer two modes: productive and expressive.
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-/// @return {cubic-bezier}
-@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) {
-  @if map-has-key($easings, $name) {
-    $easing: map-get($easings, $name);
-    @if map-has-key($easing, $mode) {
-      @return map-get($easing, $mode);
-    } @else {
-      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
-    }
-  } @else {
-    @error 'Unable to find an easing named #{$name} in our supported easings.';
-  }
-}
-
-/// Set the transition-timing-function for a given easing and motion mode.
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-@mixin carbon--motion($name, $mode) {
-  transition-timing-function: carbon--motion($name, $mode);
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g10.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/g10.scss
deleted file mode 100644
index e44cbf5922db..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g10.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g10();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g100.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/g100.scss
deleted file mode 100644
index 96c343a76e61..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g100.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g100();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g90.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/g90.scss
deleted file mode 100644
index af838c5572f5..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/g90.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g90();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
deleted file mode 100644
index 46c695dfd90d..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-
-@mixin carbon--theme-white {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #171717 !default !global;
-  $interactive-03: #0062ff !default !global;
-  $ui-background: #ffffff !default !global;
-  $ui-01: #f3f3f3 !default !global;
-  $ui-02: #ffffff !default !global;
-  $ui-03: #dcdcdc !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #171717 !default !global;
-  $text-01: #171717 !default !global;
-  $text-02: #565656 !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #171717 !default !global;
-  $icon-02: #565656 !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #f3f3f3 !default !global;
-  $field-02: #ffffff !default !global;
-  $inverse-01: #ffffff !default !global;
-  $inverse-02: #3d3d3d !default !global;
-  $support-01: #da1e28 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #054ada !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.5) !default !global;
-  $focus: #0062ff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #4c4c4c !default !global;
-  $active-secondary: #6f6f6f !default !global;
-  $hover-tertiary: #0353e9 !default !global;
-  $active-tertiary: #0530ad !default !global;
-  $hover-ui: #e5e5e5 !default !global;
-  $active-ui: #bebebe !default !global;
-  $selected-ui: #dcdcdc !default !global;
-  $hover-selected-ui: #cacaca !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #e5e5e5 !default !global;
-  $visited-link: #8a3ffc !default !global;
-  $disabled-01: #f3f3f3 !default !global;
-  $disabled-02: #bebebe !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #c9deff !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #171717 !default !global;
-  $brand-03: #0062ff !default !global;
-  $active-01: #bebebe !default !global;
-  $hover-field: #e5e5e5 !default !global;
-}
-@mixin carbon--theme-g10 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #171717 !default !global;
-  $interactive-03: #0062ff !default !global;
-  $ui-background: #f3f3f3 !default !global;
-  $ui-01: #ffffff !default !global;
-  $ui-02: #f3f3f3 !default !global;
-  $ui-03: #dcdcdc !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #171717 !default !global;
-  $text-01: #171717 !default !global;
-  $text-02: #565656 !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #171717 !default !global;
-  $icon-02: #565656 !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #ffffff !default !global;
-  $field-02: #f3f3f3 !default !global;
-  $inverse-01: #ffffff !default !global;
-  $inverse-02: #3d3d3d !default !global;
-  $support-01: #da1e28 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #054ada !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.5) !default !global;
-  $focus: #0062ff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #4c4c4c !default !global;
-  $active-secondary: #6f6f6f !default !global;
-  $hover-tertiary: #0353e9 !default !global;
-  $active-tertiary: #0530ad !default !global;
-  $hover-ui: #e5e5e5 !default !global;
-  $active-ui: #bebebe !default !global;
-  $selected-ui: #dcdcdc !default !global;
-  $hover-selected-ui: #cacaca !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #e5e5e5 !default !global;
-  $visited-link: #8a3ffc !default !global;
-  $disabled-01: #ffffff !default !global;
-  $disabled-02: #bebebe !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #c9deff !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #171717 !default !global;
-  $brand-03: #0062ff !default !global;
-  $active-01: #bebebe !default !global;
-  $hover-field: #e5e5e5 !default !global;
-}
-@mixin carbon--theme-g90 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #6f6f6f !default !global;
-  $interactive-03: #ffffff !default !global;
-  $ui-background: #282828 !default !global;
-  $ui-01: #3d3d3d !default !global;
-  $ui-02: #565656 !default !global;
-  $ui-03: #565656 !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #f3f3f3 !default !global;
-  $text-01: #f3f3f3 !default !global;
-  $text-02: #bebebe !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #f3f3f3 !default !global;
-  $icon-02: #bebebe !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #3d3d3d !default !global;
-  $field-02: #565656 !default !global;
-  $inverse-01: #171717 !default !global;
-  $inverse-02: #f3f3f3 !default !global;
-  $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #408bfc !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
-  $focus: #ffffff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #606060 !default !global;
-  $active-secondary: #3d3d3d !default !global;
-  $hover-tertiary: #f3f3f3 !default !global;
-  $active-tertiary: #bebebe !default !global;
-  $hover-ui: #353535 !default !global;
-  $active-ui: #6f6f6f !default !global;
-  $selected-ui: #565656 !default !global;
-  $hover-selected-ui: #656565 !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #4c4c4c !default !global;
-  $visited-link: #bb8eff !default !global;
-  $disabled-01: #3d3d3d !default !global;
-  $disabled-02: #565656 !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #061f80 !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #6f6f6f !default !global;
-  $brand-03: #ffffff !default !global;
-  $active-01: #6f6f6f !default !global;
-  $hover-field: #353535 !default !global;
-}
-@mixin carbon--theme-g100 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #6f6f6f !default !global;
-  $interactive-03: #ffffff !default !global;
-  $ui-background: #171717 !default !global;
-  $ui-01: #282828 !default !global;
-  $ui-02: #3d3d3d !default !global;
-  $ui-03: #3d3d3d !default !global;
-  $ui-04: #6f6f6f !default !global;
-  $ui-05: #f3f3f3 !default !global;
-  $text-01: #f3f3f3 !default !global;
-  $text-02: #bebebe !default !global;
-  $text-03: #6f6f6f !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #f3f3f3 !default !global;
-  $icon-02: #bebebe !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #282828 !default !global;
-  $field-02: #3d3d3d !default !global;
-  $inverse-01: #171717 !default !global;
-  $inverse-02: #f3f3f3 !default !global;
-  $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #408bfc !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
-  $focus: #ffffff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #606060 !default !global;
-  $active-secondary: #3d3d3d !default !global;
-  $hover-tertiary: #f3f3f3 !default !global;
-  $active-tertiary: #bebebe !default !global;
-  $hover-ui: #353535 !default !global;
-  $active-ui: #565656 !default !global;
-  $selected-ui: #3d3d3d !default !global;
-  $hover-selected-ui: #4c4c4c !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #353535 !default !global;
-  $visited-link: #bb8eff !default !global;
-  $disabled-01: #282828 !default !global;
-  $disabled-02: #3d3d3d !default !global;
-  $disabled-03: #6f6f6f !default !global;
-  $highlight: #061f80 !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #6f6f6f !default !global;
-  $brand-03: #ffffff !default !global;
-  $active-01: #565656 !default !global;
-  $hover-field: #353535 !default !global;
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss
deleted file mode 100644
index f34de6be6b92..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-white();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/themes/white.scss b/scss/globals/scss/vendor/@carbon/elements/scss/themes/white.scss
deleted file mode 100644
index f34de6be6b92..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/themes/white.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-white();
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss
deleted file mode 100644
index 1094e3695bb8..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'prefix';
-@import 'styles';
-@import 'font-family';
-
-@mixin carbon--type-classes {
-  // Font families
-  @each $name, $value in $carbon--font-families {
-    .#{$prefix}--type-#{$name} {
-      font-family: $value;
-    }
-  }
-
-  // Font weights
-  @each $name, $value in $carbon--font-weights {
-    .#{$prefix}--type-#{$name} {
-      font-weight: $value;
-    }
-  }
-
-  // Font styles
-  .#{$prefix}--type-italic {
-    font-style: italic;
-  }
-
-  // Type styles
-  @each $name, $value in $tokens {
-    .#{$prefix}--type-#{$name} {
-      @include carbon--type-style($name, map-has-key($value, breakpoints));
-    }
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
deleted file mode 100644
index 3d6ae124b6c9..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
-/// 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"),
-  '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"),
-  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
-);
-
-/// Get the font-family for an IBM Plex font.
-/// @param {String} $name
-/// @return {String}
-@function carbon--font-family($name) {
-  @return map-get($carbon--font-families, $name);
-}
-
-/// Include the `font-family` definition for the given name in your selector.
-/// @param {String} $name
-@mixin carbon--font-family($name) {
-  font-family: carbon--font-family($name);
-}
-
-/// Suggested font weights to be used in product.
-$carbon--font-weights: (
-  'light': 300,
-  'regular': 400,
-  'semibold': 600,
-);
-
-/// Retrieve the font-weight value for a given name
-/// @param {String} $weight
-/// @return {Number}
-@function carbon--font-weight($weight) {
-  @return map-get($carbon--font-weights, $weight);
-}
-
-/// Set the `font-weight` property with the value for a given name
-/// @param {String} $weight
-@mixin carbon--font-weight($weight) {
-  font-weight: carbon--font-weight($weight);
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss
deleted file mode 100644
index 49c713944099..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$prefix: 'bx' !default;
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss
deleted file mode 100644
index b0a8d6601f27..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../layout/convert';
-@import 'font-family';
-
-/// Include a type reset that individuals can use in their projects for
-/// consistent rendering
-@mixin carbon--type-reset() {
-  html {
-    font-size: $carbon--base-font-size;
-  }
-
-  body {
-    @include carbon--font-family('sans');
-    @include carbon--font-weight('regular');
-
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
deleted file mode 100644
index b458dddd0248..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../layout/convert';
-
-/// Compute the type size for the given type scale step
-/// @param {Number} $step
-/// @return {px}
-@function carbon--get-type-size($step) {
-  @if $step == 1 {
-    @return 12px;
-  }
-  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
-  @return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
-}
-
-/// Our type scale. Follows a custom formula for determining each step size.
-/// 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)));
-}
-
-/// Get the value of a specific step in the typescale
-/// @param {Number} $step
-/// @return {rem}
-@function carbon--type-scale($step) {
-  @return nth($carbon--type-scale, $step);
-}
-
-/// Set the font-size value of a selector with the value at the given $step
-/// @param {Number} $step
-@mixin carbon--type-scale($step) {
-  font-size: carbon--type-scale($step);
-}
-
-/// Alias of `type-scale` mixin.
-/// @param {Number} $step
-@mixin carbon--font-size($step) {
-  font-size: carbon--type-scale($step);
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
deleted file mode 100644
index f0881add4916..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss
+++ /dev/null
@@ -1,537 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../layout/breakpoint';
-@import 'font-family';
-@import 'scale';
-
-$caption-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$label-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$helper-text-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-style: italic,
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$body-short-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-long-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(20px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-short-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(22px),
-  letter-spacing: 0,
-) !default;
-
-$body-long-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(24px),
-  letter-spacing: 0,
-) !default;
-
-$code-01: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$code-02: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(20px),
-  letter-spacing: 0.32px,
-) !default;
-
-$heading-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$heading-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(22px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(26px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(36px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-05: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(40px),
-  letter-spacing: 0,
-) !default;
-
-$expressive-heading-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: carbon--type-scale(5),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: carbon--type-scale(6),
-    ),
-  ),
-) !default;
-
-$expressive-heading-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 129%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: carbon--type-scale(7),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-    ),
-  ),
-) !default;
-
-$expressive-heading-05: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(13),
-    ),
-  ),
-) !default;
-
-$expressive-paragraph-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(6),
-  font-weight: carbon--font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    lg: (
-      font-size: carbon--type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-);
-
-$quotation-01: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(5),
-    ),
-    lg: (
-      font-size: carbon--type-scale(6),
-      line-height: 125%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-) !default;
-
-$quotation-02: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(13),
-    ),
-  ),
-) !default;
-
-$display-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(10),
-    ),
-    lg: (
-      font-size: carbon--type-scale(12),
-    ),
-    xlg: (
-      font-size: carbon--type-scale(13),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(10),
-    ),
-    lg: (
-      font-size: carbon--type-scale(12),
-    ),
-    xlg: (
-      font-size: carbon--type-scale(13),
-      line-height: 116%,
-    ),
-    max: (
-      font-size: carbon--type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: carbon--type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-
-$display-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: carbon--type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-
-// prettier-ignore
-$tokens: (
-  // Universal tokens
-  caption-01: $caption-01,
-  label-01: $label-01,
-
-  helper-text-01: $helper-text-01,
-
-  body-short-01: $body-short-01,
-  body-short-02: $body-short-02,
-
-  body-long-01: $body-long-01,
-  body-long-02: $body-long-02,
-
-  code-01: $code-01,
-  code-02: $code-02,
-
-  heading-01: $heading-01,
-  heading-02: $heading-02,
-
-  // Product layout, fixed
-  productive-heading-03: $productive-heading-03,
-  productive-heading-04: $productive-heading-04,
-  productive-heading-05: $productive-heading-05,
-
-  // Editorial layout, fluid
-  expressive-paragraph-01: $expressive-paragraph-01,
-  expressive-heading-03: $expressive-heading-03,
-  expressive-heading-04: $expressive-heading-04,
-  expressive-heading-05: $expressive-heading-05,
-
-  quotation-01: $quotation-01,
-  quotation-02: $quotation-02,
-
-  display-01: $display-01,
-  display-02: $display-02,
-  display-03: $display-03,
-  display-04: $display-04,
-);
-
-@mixin properties($map) {
-  @each $name, $value in $map {
-    #{$name}: $value;
-  }
-}
-
-@function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
-}
-
-/// 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.
-///
-/// 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/
-///
-/// @param {Map} $type-styles - the value of a given type token
-/// @param {?Map} $breakpoints - custom breakpoints to use
-@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) {
-  // Include the initial styles for the given token by default without any
-  // media query guard. This includes `font-size` as a fallback in the case
-  // that a browser does not support `calc()`
-  @include properties(map-remove($type-styles, breakpoints));
-  // We also need to include the `sm` styles by default since they don't
-  // appear in the fluid styles for tokens
-  @include fluid-type-size($type-styles, sm, $breakpoints);
-
-  // Finally, we need to go through all the breakpoints defined in the type
-  // token and apply the properties and fluid type size for that given
-  // breakpoint
-  @each $name, $values in map-get($type-styles, breakpoints) {
-    @include carbon--breakpoint($name) {
-      @include properties($values);
-      @include fluid-type-size($type-styles, $name, $breakpoints);
-    }
-  }
-}
-
-/// Computes the fluid `font-size` for a given type style and breakpoint
-/// @param {Map} $type-styles - the styles for a given token
-/// @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) {
-  // Get the information about the breakpoint we're currently working in. Useful
-  // for getting initial width information
-  $breakpoint: map-get($breakpoints, $name);
-
-  // Our fluid styles are captured under the 'breakpoints' property in our type
-  // styles map. These define what values to treat as `max-` variables below
-  $fluid-sizes: map-get($type-styles, breakpoints);
-  $fluid-breakpoint: ();
-  // Special case for `sm` because the styles for small are on the type style
-  // directly
-  @if $name == sm {
-    $fluid-breakpoint: map-remove($type-styles, breakpoints);
-  } @else {
-    $fluid-breakpoint: map-get($fluid-sizes, $name);
-  }
-
-  // Initialize our font-sizes to the default size for the type style
-  $max-font-size: map-get($type-styles, font-size);
-  $min-font-size: map-get($type-styles, font-size);
-  @if map-has-key($fluid-breakpoint, font-size) {
-    $min-font-size: map-get($fluid-breakpoint, font-size);
-  }
-
-  // Initialize our min and max width to the width of the current breakpoint
-  $max-vw: map-get($breakpoint, width);
-  $min-vw: map-get($breakpoint, width);
-
-  // We can use `breakpoint-next` to see if there is another breakpoint we can
-  // use to update `max-font-size` and `max-vw` with larger values
-  $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints);
-  $next-fluid-breakpoint-name: null;
-
-  // We need to figure out what the next available fluid breakpoint is for our
-  // given $type-styles. In this loop we try and iterate through breakpoints
-  // until we either manually set $next-breakpoint-available to null or
-  // `breakpoint-next` returns null.
-  @while $next-breakpoint-available {
-    @if map-has-key($fluid-sizes, $next-breakpoint-available) {
-      $next-fluid-breakpoint-name: $next-breakpoint-available;
-      $next-breakpoint-available: null;
-    } @else {
-      $next-breakpoint-available: carbon--breakpoint-next($next-breakpoint-available, $breakpoints);
-    }
-  }
-
-  // If we have found the next available fluid breakpoint name, then we know
-  // that we have values that we can use to set max-font-size and max-vw as both
-  // 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-vw: map-get($next-fluid-breakpoint, width);
-
-    // prettier-ignore
-    font-size: calc(#{$min-font-size} +
-      #{strip-unit($max-font-size - $min-font-size)} *
-      ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
-    );
-  } @else {
-    // Otherwise, just default to setting the font size found from the type
-    // style or the given fluid breakpoint in the type style
-    font-size: $min-font-size;
-  }
-}
-
-/// 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.
-/// @param {String} $name - the name of the token to get the styles for
-/// @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) {
-  @if not map-has-key($tokens, $name) {
-    @error 'Unable to find a token with the name: `#{$name}`';
-  }
-
-  $token: map-get($tokens, $name);
-
-  // If $fluid is set to true and the token has breakpoints defined for fluid
-  // styles, delegate to the fluid-type helper for the given token
-  @if $fluid == true and map-has-key($token, 'breakpoints') {
-    @include fluid-type($token, $breakpoints);
-  } @else {
-    // Otherwise, we just include all the property declarations directly on the
-    // selector
-    @include properties(map-remove($token, 'breakpoints'));
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
deleted file mode 100644
index babbb69c084d..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-mono {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-kVkqdyU8n1ioa0XdgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1ioa2ndgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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-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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
deleted file mode 100644
index ac5a00c71842..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-sans {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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/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;
-  }
-  /* cyrillic-ext */
-  @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/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 {
-    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/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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 {
-    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/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 {
-    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/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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 {
-    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/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 {
-    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/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
deleted file mode 100644
index 26e3e752f267..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-serif {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-o3m1bpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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-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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-SIwq1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-SI7q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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_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 {
-    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_yIwq1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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_yI7q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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_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 {
-    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_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/scss/globals/scss/vendor/@carbon/elements/scss/type/type.scss b/scss/globals/scss/vendor/@carbon/elements/scss/type/type.scss
deleted file mode 100644
index b74cae208596..000000000000
--- a/scss/globals/scss/vendor/@carbon/elements/scss/type/type.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'font-family';
-@import 'reset';
-@import 'scale';
-@import 'styles';
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/12.scss b/scss/globals/scss/vendor/@carbon/grid/scss/12.scss
deleted file mode 100644
index ccb83bb3a93c..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/12.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
-
-$breakpoints: map-merge(
-  (
-    sm: (
-      columns: 12,
-    ),
-    md: (
-      columns: 12,
-    ),
-    lg: (
-      columns: 12,
-    ),
-    xlg: (
-      columns: 12,
-    ),
-    max: (
-      columns: 12,
-    ),
-  ),
-  $carbon--grid-breakpoints
-);
-
-// Default container class for a grid. Includes max-width for each breakpoint
-.#{$prefix}--grid {
-  @include carbon--make-container($breakpoints);
-  @include carbon--make-container-max-widths($breakpoints);
-}
-
-// Fluid variant of the grid. Will not set max-width for breakpoints and will
-// full-bleed across the page.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container($breakpoints);
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($breakpoints, $carbon--grid-gutter);
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/_col.scss b/scss/globals/scss/vendor/@carbon/grid/scss/_col.scss
deleted file mode 100644
index 0e88a734fc24..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/_col.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Column helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-
-@mixin carbon--make-col-ready($gutter: $carbon--grid-gutter) {
-  // 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.
-  width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
-
-  // Support the padding use-case for each columns. Idea is that each child in a
-  // cell selector should have the default padding applied.
-  .#{$prefix}--grid--padding & > * {
-    padding: $carbon--grid-cell-padding;
-  }
-
-  // When in a bleed grid, we collapse all gutters so each column is flat with
-  // the each other.
-  .#{$prefix}--grid--bleed & {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
-  // side.
-  .#{$prefix}--grid--condensed & {
-    padding-right: 1px;
-    padding-left: 1px;
-  }
-
-  .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-left: 0;
-  }
-
-  [dir='rtl'] .#{$prefix}--grid--padding.#{$prefix}--grid--hang & {
-    padding-right: 0;
-    padding-left: initial;
-  }
-}
-
-@mixin carbon--make-col($span, $columns) {
-  flex: 0 0 percentage($span / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($span / $columns);
-}
-
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
-  @if $offset == 0 {
-    margin-left: 0;
-  } @else {
-    margin-left: percentage($offset);
-  }
-}
-
-@mixin carbon--make-grid-columns($breakpoints: $carbon--grid-breakpoints, $gutter: $carbon--grid-gutter) {
-  .#{$prefix}--col {
-    @include carbon--make-col-ready();
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: carbon--breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
-
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .#{$prefix}--col#{$infix}-#{$i} {
-        @include carbon--make-col-ready();
-      }
-    }
-
-    .#{$prefix}--col#{$infix},
-    .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready();
-    }
-
-    @include carbon--breakpoint($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .#{$prefix}--col,
-      .#{$prefix}--col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-      }
-
-      .#{$prefix}--col--auto,
-      .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
-        width: auto;
-        // Reset earlier grid tiers
-        max-width: 100%;
-      }
-
-      @for $i from 1 through $columns {
-        .#{$prefix}--col#{$infix}-#{$i} {
-          @include carbon--make-col($i, $columns);
-        }
-      }
-
-      @for $i from 0 through ($columns - 1) {
-        @if not($infix == '') {
-          .#{$prefix}--offset#{$infix}-#{$i} {
-            @include carbon--make-col-offset($i, $columns);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/_container.scss b/scss/globals/scss/vendor/@carbon/grid/scss/_container.scss
deleted file mode 100644
index 91870acd02f1..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/_container.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Container helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-@import '@carbon/layout/scss/utilities';
-
-/// Create the container for a grid. Will cause full-bleed for the grid unless
-/// max-width properties are added with `make-container-max-widths`
-@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
-
-  @include carbon--set-largest-breakpoint();
-
-  @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
-    $margin: map-get($value, margin);
-
-    @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
-      @if $prev-margin != $margin {
-        @include carbon--breakpoint($name) {
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
-          padding-right: #{($carbon--grid-gutter / 2) + $margin};
-        }
-      }
-    } @else {
-      @include carbon--breakpoint($name) {
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
-        padding-right: #{($carbon--grid-gutter / 2) + $margin};
-      }
-    }
-  }
-}
-
-// gets the last breakpoint width, and sets it to a max-width
-@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
-
-  max-width: map-get($largest-breakpoint, 'width');
-}
-
-/// Add in the max-widths for each breakpoint to the container
-@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/scss/globals/scss/vendor/@carbon/grid/scss/_prefix.scss b/scss/globals/scss/vendor/@carbon/grid/scss/_prefix.scss
deleted file mode 100644
index 49c713944099..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/_prefix.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$prefix: 'bx' !default;
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/_row.scss b/scss/globals/scss/vendor/@carbon/grid/scss/_row.scss
deleted file mode 100644
index ae4900dfff94..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/_row.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/**
- * Row helpers for @carbon/grid. Heavily inspired by, or derived from,
- * bootstrap:
- * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
- */
-@import '@carbon/layout/scss/breakpoint';
-
-/// Used to build a row inside of a grid
-@mixin carbon--make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -1 * $carbon--grid-gutter / 2;
-  margin-left: -1 * $carbon--grid-gutter / 2;
-}
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss b/scss/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss
deleted file mode 100644
index f7fab758ad90..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/aspect-ratio.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/import-once/scss/import-once';
-@import 'prefix';
-
-// Inspired by:
-// https://github.com/tachyons-css/tachyons-aspect-ratios/blob/fdccef8d0d534a7faddde4cb5754ffb6d1c36b16/src/tachyons-aspect-ratios.css#L11-L22
-@include exports('@carbon/grid/aspect-ratio.scss') {
-  .#{$prefix}--aspect-ratio {
-    height: 0;
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio--object {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-  }
-
-  .#{$prefix}--aspect-ratio--16x9 {
-    padding-bottom: 56.25%;
-  }
-
-  .#{$prefix}--aspect-ratio--2x1 {
-    padding-bottom: 50%;
-  }
-
-  .#{$prefix}--aspect-ratio--4x3 {
-    padding-bottom: 75%;
-  }
-
-  .#{$prefix}--aspect-ratio--1x1 {
-    padding-bottom: 100%;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/grid/scss/grid.scss b/scss/globals/scss/vendor/@carbon/grid/scss/grid.scss
deleted file mode 100644
index 513b9c9b508b..000000000000
--- a/scss/globals/scss/vendor/@carbon/grid/scss/grid.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/layout/scss/breakpoint';
-@import 'prefix';
-@import 'container';
-@import 'row';
-@import 'col';
-
-// Fluid variant of the grid.
-.#{$prefix}--fluid-grid {
-  @include carbon--make-container();
-}
-
-// Default container class for a grid. Includes max-width for all breakpoints
-.#{$prefix}--grid {
-  @include carbon--make-container();
-  @include carbon--make-container-max-widths();
-}
-
-.#{$prefix}--grid--full-width {
-  @include carbon--largest-breakpoint() {
-    max-width: 100%;
-  }
-}
-
-.#{$prefix}--row {
-  @include carbon--make-row();
-}
-
-@include carbon--make-grid-columns($carbon--grid-breakpoints, $carbon--grid-gutter);
diff --git a/scss/globals/scss/vendor/@carbon/import-once/scss/import-once.scss b/scss/globals/scss/vendor/@carbon/import-once/scss/import-once.scss
deleted file mode 100644
index b47a41edcd49..000000000000
--- a/scss/globals/scss/vendor/@carbon/import-once/scss/import-once.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Used from carbon-components:
-// https://github.com/IBM/carbon-components/blob/7fd0895c2061db5a90ff6c8a933a20dd83d6d790/src/globals/scss/_import-once.scss#L1-L16
-$imported-modules: () !default;
-
-/// Module export mixin
-/// This mixin helps making sure a module is imported once and only once.
-/// @access public
-/// @param {String} $name - Name of exported module
-/// @param {Bool} $error [false] - Error when a module has been already imported
-/// @require $imported-modules
-@mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
-    $imported-modules: append($imported-modules, $name) !global;
-    @content;
-  } @else if $warn == true {
-    @warn 'Module `#{$name}` has already been imported.';
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
deleted file mode 100644
index d28e7b08c140..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-@import 'convert';
-@import 'utilities';
-
-$carbon--grid-cell-padding: carbon--rem(16px);
-$carbon--grid-gutter: carbon--rem(32px);
-
-// Initial map of our breakpoints and their values
-$carbon--grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: carbon--rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1584px),
-  ),
-) !default;
-
-/// Get the value of the next breakpoint, or null for the last breakpoint.
-/// @param {String} $name - the name of the brekapoint
-/// @param {Map} $breakpoints - a map of breakpoints where the key is the name
-/// of the breakpoint and the value is the values for the breakpoint
-/// @param {List} $breakpoint-names - a list of names from the $breakpoints map
-/// @returns {String}
-@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);
-  }
-  @return null;
-}
-
-@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);
-  }
-  @return null;
-}
-
-/// Check to see if the given breakpoint name
-@function carbon--is-smallest-breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @return index(map-keys($breakpoints), $name) == 1;
-}
-
-/// returns the largest breakpoint name
-/// @param {string} $breakpoint
-/// @content
-@function carbon--largest-breakpoint-name($breakpoints: $carbon--grid-breakpoints) {
-  $total-breakpoints: length($breakpoints);
-  @return carbon--key-by-index($breakpoints, $total-breakpoints);
-}
-
-/// 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`
-/// @param {String} $name - the name of the breakpoint
-/// @returns {String}
-@function carbon--breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-
-/// Generate a media query up to the width of the given breakpoint name
-/// @param {string} $name
-/// @content
-@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-
-  @if map-has-key($breakpoints, $name) {
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the maximum width of the given styles
-/// @param {string} $name
-/// @content
-@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
-  $breakpoint: map-get($breakpoints, $name);
-  $width: map-get($breakpoint, width);
-  @if map-has-key($breakpoints, $name) {
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (max-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the range between the lower and upper
-/// breakpoints.
-/// @param {string} $lower
-/// @param {string} $upper
-/// @content
-@mixin carbon--breakpoint-between($lower, $upper, $breakpoints: $carbon--grid-breakpoints) {
-  $min: map-get($breakpoints, $lower);
-  $max: map-get($breakpoints, $upper);
-
-  @if $min and $max {
-    @media (min-width: map-get($min, width)) and (max-width: map-get($map, width)) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include carbon--breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include carbon--breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
-  }
-}
-
-/// generate media query for the largest breakpoint
-/// @param {string} $breakpoint
-/// @content
-@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
-    @content;
-  }
-}
-
-/// Generate a media query for a given breakpoint
-/// @param {string} $breakpoint
-/// @content
-@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_convert.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_convert.scss
deleted file mode 100644
index bdb7a4644cb4..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_convert.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Default, Use with carbon--em() and carbon--rem() functions
-$carbon--base-font-size: 16px !default;
-
-/// Convert a given px unit to a rem unit
-/// @param {px} $px
-/// @return {rem}
-@function carbon--rem($px) {
-  @return ($px / $carbon--base-font-size) * 1rem;
-}
-
-/// Convert a given px unit to a em unit
-/// @param {px} $px
-/// @return {em}
-@function carbon--em($px) {
-  @return ($px / $carbon--base-font-size) * 1em;
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_key-height.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
deleted file mode 100644
index fae59085f4b3..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_key-height.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'breakpoint';
-@import 'utilities';
-
-/// Get the column width for a given breakpoint. Useful for figuring out key
-/// heights
-/// @param {string} $breakpoint
-/// @return rem
-@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);
-    $margin: map-get($values, margin);
-    $columns: map-get($values, columns);
-
-    @return ($width - (2 * $margin)) / $columns;
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
-
-$carbon--key-height-scales: (
-  sm: (
-    carbon--get-column-width(sm),
-    carbon--get-column-width(sm) * 2,
-    carbon--get-column-width(sm) * 3,
-    carbon--get-column-width(sm) * 4,
-    carbon--get-column-width(sm) * 5,
-    carbon--get-column-width(sm) * 6,
-  ),
-  md: (
-    carbon--get-column-width(md),
-    carbon--get-column-width(md) * 2,
-    carbon--get-column-width(md) * 3,
-    carbon--get-column-width(md) * 4,
-    carbon--get-column-width(md) * 5,
-    carbon--get-column-width(md) * 6,
-  ),
-  lg: (
-    carbon--get-column-width(lg),
-    carbon--get-column-width(lg) * 2,
-    carbon--get-column-width(lg) * 3,
-    carbon--get-column-width(lg) * 4,
-    carbon--get-column-width(lg) * 5,
-    carbon--get-column-width(lg) * 6,
-    carbon--get-column-width(lg) * 7,
-    carbon--get-column-width(lg) * 8,
-  ),
-  xlg: (
-    carbon--get-column-width(xlg),
-    carbon--get-column-width(xlg) * 2,
-    carbon--get-column-width(xlg) * 3,
-    carbon--get-column-width(xlg) * 4,
-    carbon--get-column-width(xlg) * 5,
-    carbon--get-column-width(xlg) * 6,
-    carbon--get-column-width(xlg) * 7,
-    carbon--get-column-width(xlg) * 8,
-  ),
-  max: (
-    carbon--get-column-width(max),
-    carbon--get-column-width(max) * 2,
-    carbon--get-column-width(max) * 3,
-    carbon--get-column-width(max) * 4,
-    carbon--get-column-width(max) * 5,
-    carbon--get-column-width(max) * 6,
-    carbon--get-column-width(max) * 7,
-    carbon--get-column-width(max) * 8,
-  ),
-);
-
-/// Get the value of a key height step at a given breakpoint
-/// @param {string} $breakpoint
-/// @param {number} $step
-/// @return rem
-@function carbon--key-height($breakpoint, $step) {
-  @if map-has-key($carbon--key-height-scales, $breakpoint) {
-    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
-  } @else {
-    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss
deleted file mode 100644
index 6534a16a3207..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'convert';
-
-// Default mini-unit value
-$carbon--mini-unit-size: 8px !default;
-
-/// Get the value of the corresponding number of units
-/// @param {number} $count the number of units to get the value for
-/// @return rem
-@function carbon--mini-units($count) {
-  @return carbon--rem($carbon--mini-unit-size * $count);
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_spacing.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
deleted file mode 100644
index 63450abbc058..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_spacing.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'mini-unit';
-
-// fixed spacing
-// Supports 0, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px
-$carbon--fixed-spacing-scale: (
-  0,
-  carbon--mini-units(0.25),
-  carbon--mini-units(0.5),
-  carbon--mini-units(1),
-  carbon--mini-units(1.5),
-  carbon--mini-units(2),
-  carbon--mini-units(3),
-  carbon--mini-units(4),
-  carbon--mini-units(6),
-  carbon--mini-units(8),
-  carbon--mini-units(10),
-  carbon--mini-units(12)
-);
-
-// fluid spacing
-$carbon--fluid-spacing-scale: (0, 2vw, 5vw, 10vw);
-
-/// Get the value of the spacing scale at the given step. The first step is
-/// surprisingly 0, even though lists in sass start at 1. This is because we
-/// want to make accesses to the 0 value more natural, in addition to mirroring
-/// how this would be called in other programming languages
-//  $step: integer
-//  $fluid: boolean
-@function carbon--spacing($step, $fluid: false) {
-  $scale: if($fluid, $carbon--fluid-spacing-scale, $carbon--fixed-spacing-scale);
-  @return nth($scale, $step + 1);
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/_utilities.scss b/scss/globals/scss/vendor/@carbon/layout/scss/_utilities.scss
deleted file mode 100644
index f980b566128f..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/_utilities.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Map deep get
-/// @author Hugo Giraudel
-/// @access public
-/// @param {Map} $map - Map
-/// @param {Arglist} $keys - Key chain
-/// @return {*} - Desired value
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-
-/// Key by Index
-/// provide a $map, and $index, and get back the relevant
-/// key value.
-/// @param {Map} $map - Map
-/// @param {Integer} $index - Key chain
-/// @return {String} - Desired value
-@function carbon--key-by-index($map, $index) {
-  $keys: map-keys($map);
-  @return nth($keys, $index);
-}
-
-/// Last Map Item
-/// Pass in a map, and get the last one in the list back.
-/// @param {Map} $map - Map
-/// @return {*} - Desired value
-@function last-map-item($map) {
-  $total-length: length($map);
-  @return map-get($map, carbon--key-by-index($map, $total-length));
-}
diff --git a/scss/globals/scss/vendor/@carbon/layout/scss/layout.scss b/scss/globals/scss/vendor/@carbon/layout/scss/layout.scss
deleted file mode 100644
index acc1f1e8f702..000000000000
--- a/scss/globals/scss/vendor/@carbon/layout/scss/layout.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'convert';
-@import 'breakpoint';
-@import 'mini-unit';
-@import 'spacing';
-@import 'key-height';
diff --git a/scss/globals/scss/vendor/@carbon/motion/scss/motion.scss b/scss/globals/scss/vendor/@carbon/motion/scss/motion.scss
deleted file mode 100644
index 83efb88069e9..000000000000
--- a/scss/globals/scss/vendor/@carbon/motion/scss/motion.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Common easings for components in the Carbon Design System
-$carbon--easings: (
-  standard: (
-    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
-  ),
-  entrance: (
-    productive: cubic-bezier(0, 0, 0.38, 0.9),
-    expressive: cubic-bezier(0, 0, 0.3, 1),
-  ),
-  exit: (
-    productive: cubic-bezier(0.2, 0, 1, 0.9),
-    expressive: cubic-bezier(0.4, 0.14, 1, 1),
-  ),
-);
-
-/// Get the transition-timing-function for a given easing and motion mode.
-/// Easings that are currently supported include: standard, entrance, and exit.
-/// We also offer two modes: productive and expressive.
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-/// @return {cubic-bezier}
-@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) {
-  @if map-has-key($easings, $name) {
-    $easing: map-get($easings, $name);
-    @if map-has-key($easing, $mode) {
-      @return map-get($easing, $mode);
-    } @else {
-      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
-    }
-  } @else {
-    @error 'Unable to find an easing named #{$name} in our supported easings.';
-  }
-}
-
-/// Set the transition-timing-function for a given easing and motion mode.
-/// @param {String} $name - the name of the easing curve to apply
-/// @param {String} $mode - the mode for the easing curve to use
-@mixin carbon--motion($name, $mode) {
-  transition-timing-function: carbon--motion($name, $mode);
-}
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/g10.scss b/scss/globals/scss/vendor/@carbon/themes/scss/g10.scss
deleted file mode 100644
index e44cbf5922db..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/g10.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g10();
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/g100.scss b/scss/globals/scss/vendor/@carbon/themes/scss/g100.scss
deleted file mode 100644
index 96c343a76e61..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/g100.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g100();
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/g90.scss b/scss/globals/scss/vendor/@carbon/themes/scss/g90.scss
deleted file mode 100644
index af838c5572f5..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/g90.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-g90();
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/mixins.scss b/scss/globals/scss/vendor/@carbon/themes/scss/mixins.scss
deleted file mode 100644
index 46c695dfd90d..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/mixins.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-
-@mixin carbon--theme-white {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #171717 !default !global;
-  $interactive-03: #0062ff !default !global;
-  $ui-background: #ffffff !default !global;
-  $ui-01: #f3f3f3 !default !global;
-  $ui-02: #ffffff !default !global;
-  $ui-03: #dcdcdc !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #171717 !default !global;
-  $text-01: #171717 !default !global;
-  $text-02: #565656 !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #171717 !default !global;
-  $icon-02: #565656 !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #f3f3f3 !default !global;
-  $field-02: #ffffff !default !global;
-  $inverse-01: #ffffff !default !global;
-  $inverse-02: #3d3d3d !default !global;
-  $support-01: #da1e28 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #054ada !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.5) !default !global;
-  $focus: #0062ff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #4c4c4c !default !global;
-  $active-secondary: #6f6f6f !default !global;
-  $hover-tertiary: #0353e9 !default !global;
-  $active-tertiary: #0530ad !default !global;
-  $hover-ui: #e5e5e5 !default !global;
-  $active-ui: #bebebe !default !global;
-  $selected-ui: #dcdcdc !default !global;
-  $hover-selected-ui: #cacaca !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #e5e5e5 !default !global;
-  $visited-link: #8a3ffc !default !global;
-  $disabled-01: #f3f3f3 !default !global;
-  $disabled-02: #bebebe !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #c9deff !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #171717 !default !global;
-  $brand-03: #0062ff !default !global;
-  $active-01: #bebebe !default !global;
-  $hover-field: #e5e5e5 !default !global;
-}
-@mixin carbon--theme-g10 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #171717 !default !global;
-  $interactive-03: #0062ff !default !global;
-  $ui-background: #f3f3f3 !default !global;
-  $ui-01: #ffffff !default !global;
-  $ui-02: #f3f3f3 !default !global;
-  $ui-03: #dcdcdc !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #171717 !default !global;
-  $text-01: #171717 !default !global;
-  $text-02: #565656 !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #171717 !default !global;
-  $icon-02: #565656 !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #ffffff !default !global;
-  $field-02: #f3f3f3 !default !global;
-  $inverse-01: #ffffff !default !global;
-  $inverse-02: #3d3d3d !default !global;
-  $support-01: #da1e28 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #054ada !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.5) !default !global;
-  $focus: #0062ff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #4c4c4c !default !global;
-  $active-secondary: #6f6f6f !default !global;
-  $hover-tertiary: #0353e9 !default !global;
-  $active-tertiary: #0530ad !default !global;
-  $hover-ui: #e5e5e5 !default !global;
-  $active-ui: #bebebe !default !global;
-  $selected-ui: #dcdcdc !default !global;
-  $hover-selected-ui: #cacaca !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #e5e5e5 !default !global;
-  $visited-link: #8a3ffc !default !global;
-  $disabled-01: #ffffff !default !global;
-  $disabled-02: #bebebe !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #c9deff !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #171717 !default !global;
-  $brand-03: #0062ff !default !global;
-  $active-01: #bebebe !default !global;
-  $hover-field: #e5e5e5 !default !global;
-}
-@mixin carbon--theme-g90 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #6f6f6f !default !global;
-  $interactive-03: #ffffff !default !global;
-  $ui-background: #282828 !default !global;
-  $ui-01: #3d3d3d !default !global;
-  $ui-02: #565656 !default !global;
-  $ui-03: #565656 !default !global;
-  $ui-04: #8c8c8c !default !global;
-  $ui-05: #f3f3f3 !default !global;
-  $text-01: #f3f3f3 !default !global;
-  $text-02: #bebebe !default !global;
-  $text-03: #8c8c8c !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #f3f3f3 !default !global;
-  $icon-02: #bebebe !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #3d3d3d !default !global;
-  $field-02: #565656 !default !global;
-  $inverse-01: #171717 !default !global;
-  $inverse-02: #f3f3f3 !default !global;
-  $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #408bfc !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
-  $focus: #ffffff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #606060 !default !global;
-  $active-secondary: #3d3d3d !default !global;
-  $hover-tertiary: #f3f3f3 !default !global;
-  $active-tertiary: #bebebe !default !global;
-  $hover-ui: #353535 !default !global;
-  $active-ui: #6f6f6f !default !global;
-  $selected-ui: #565656 !default !global;
-  $hover-selected-ui: #656565 !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #4c4c4c !default !global;
-  $visited-link: #bb8eff !default !global;
-  $disabled-01: #3d3d3d !default !global;
-  $disabled-02: #565656 !default !global;
-  $disabled-03: #8c8c8c !default !global;
-  $highlight: #061f80 !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #6f6f6f !default !global;
-  $brand-03: #ffffff !default !global;
-  $active-01: #6f6f6f !default !global;
-  $hover-field: #353535 !default !global;
-}
-@mixin carbon--theme-g100 {
-  $interactive-01: #0062ff !default !global;
-  $interactive-02: #6f6f6f !default !global;
-  $interactive-03: #ffffff !default !global;
-  $ui-background: #171717 !default !global;
-  $ui-01: #282828 !default !global;
-  $ui-02: #3d3d3d !default !global;
-  $ui-03: #3d3d3d !default !global;
-  $ui-04: #6f6f6f !default !global;
-  $ui-05: #f3f3f3 !default !global;
-  $text-01: #f3f3f3 !default !global;
-  $text-02: #bebebe !default !global;
-  $text-03: #6f6f6f !default !global;
-  $text-04: #ffffff !default !global;
-  $icon-01: #f3f3f3 !default !global;
-  $icon-02: #bebebe !default !global;
-  $icon-03: #ffffff !default !global;
-  $field-01: #282828 !default !global;
-  $field-02: #3d3d3d !default !global;
-  $inverse-01: #171717 !default !global;
-  $inverse-02: #f3f3f3 !default !global;
-  $support-01: #fb4b53 !default !global;
-  $support-02: #24a148 !default !global;
-  $support-03: #fdd13a !default !global;
-  $support-04: #408bfc !default !global;
-  $overlay-01: rgba(23, 23, 23, 0.7) !default !global;
-  $focus: #ffffff !default !global;
-  $hover-primary: #0353e9 !default !global;
-  $active-primary: #0530ad !default !global;
-  $hover-primary-text: #054ada !default !global;
-  $hover-secondary: #606060 !default !global;
-  $active-secondary: #3d3d3d !default !global;
-  $hover-tertiary: #f3f3f3 !default !global;
-  $active-tertiary: #bebebe !default !global;
-  $hover-ui: #353535 !default !global;
-  $active-ui: #565656 !default !global;
-  $selected-ui: #3d3d3d !default !global;
-  $hover-selected-ui: #4c4c4c !default !global;
-  $hover-danger: #ba1b23 !default !global;
-  $active-danger: #750e13 !default !global;
-  $hover-row: #353535 !default !global;
-  $visited-link: #bb8eff !default !global;
-  $disabled-01: #282828 !default !global;
-  $disabled-02: #3d3d3d !default !global;
-  $disabled-03: #6f6f6f !default !global;
-  $highlight: #061f80 !default !global;
-  $brand-01: #0062ff !default !global;
-  $brand-02: #6f6f6f !default !global;
-  $brand-03: #ffffff !default !global;
-  $active-01: #565656 !default !global;
-  $hover-field: #353535 !default !global;
-}
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/themes.scss b/scss/globals/scss/vendor/@carbon/themes/scss/themes.scss
deleted file mode 100644
index f34de6be6b92..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/themes.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-white();
diff --git a/scss/globals/scss/vendor/@carbon/themes/scss/white.scss b/scss/globals/scss/vendor/@carbon/themes/scss/white.scss
deleted file mode 100644
index f34de6be6b92..000000000000
--- a/scss/globals/scss/vendor/@carbon/themes/scss/white.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-@import './mixins';
-
-@include carbon--theme-white();
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_classes.scss b/scss/globals/scss/vendor/@carbon/type/scss/_classes.scss
deleted file mode 100644
index 1094e3695bb8..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_classes.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'prefix';
-@import 'styles';
-@import 'font-family';
-
-@mixin carbon--type-classes {
-  // Font families
-  @each $name, $value in $carbon--font-families {
-    .#{$prefix}--type-#{$name} {
-      font-family: $value;
-    }
-  }
-
-  // Font weights
-  @each $name, $value in $carbon--font-weights {
-    .#{$prefix}--type-#{$name} {
-      font-weight: $value;
-    }
-  }
-
-  // Font styles
-  .#{$prefix}--type-italic {
-    font-style: italic;
-  }
-
-  // Type styles
-  @each $name, $value in $tokens {
-    .#{$prefix}--type-#{$name} {
-      @include carbon--type-style($name, map-has-key($value, breakpoints));
-    }
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_font-family.scss b/scss/globals/scss/vendor/@carbon/type/scss/_font-family.scss
deleted file mode 100644
index 3d6ae124b6c9..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_font-family.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
-/// 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"),
-  '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"),
-  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
-);
-
-/// Get the font-family for an IBM Plex font.
-/// @param {String} $name
-/// @return {String}
-@function carbon--font-family($name) {
-  @return map-get($carbon--font-families, $name);
-}
-
-/// Include the `font-family` definition for the given name in your selector.
-/// @param {String} $name
-@mixin carbon--font-family($name) {
-  font-family: carbon--font-family($name);
-}
-
-/// Suggested font weights to be used in product.
-$carbon--font-weights: (
-  'light': 300,
-  'regular': 400,
-  'semibold': 600,
-);
-
-/// Retrieve the font-weight value for a given name
-/// @param {String} $weight
-/// @return {Number}
-@function carbon--font-weight($weight) {
-  @return map-get($carbon--font-weights, $weight);
-}
-
-/// Set the `font-weight` property with the value for a given name
-/// @param {String} $weight
-@mixin carbon--font-weight($weight) {
-  font-weight: carbon--font-weight($weight);
-}
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_prefix.scss b/scss/globals/scss/vendor/@carbon/type/scss/_prefix.scss
deleted file mode 100644
index 49c713944099..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_prefix.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$prefix: 'bx' !default;
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_reset.scss b/scss/globals/scss/vendor/@carbon/type/scss/_reset.scss
deleted file mode 100644
index ec279f7012e3..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_reset.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/layout/scss/convert';
-@import 'font-family';
-
-/// Include a type reset that individuals can use in their projects for
-/// consistent rendering
-@mixin carbon--type-reset() {
-  html {
-    font-size: $carbon--base-font-size;
-  }
-
-  body {
-    @include carbon--font-family('sans');
-    @include carbon--font-weight('regular');
-
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_scale.scss b/scss/globals/scss/vendor/@carbon/type/scss/_scale.scss
deleted file mode 100644
index f6b58978b03a..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_scale.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/layout/scss/convert';
-
-/// Compute the type size for the given type scale step
-/// @param {Number} $step
-/// @return {px}
-@function carbon--get-type-size($step) {
-  @if $step == 1 {
-    @return 12px;
-  }
-  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
-  @return carbon--get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
-}
-
-/// Our type scale. Follows a custom formula for determining each step size.
-/// 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)));
-}
-
-/// Get the value of a specific step in the typescale
-/// @param {Number} $step
-/// @return {rem}
-@function carbon--type-scale($step) {
-  @return nth($carbon--type-scale, $step);
-}
-
-/// Set the font-size value of a selector with the value at the given $step
-/// @param {Number} $step
-@mixin carbon--type-scale($step) {
-  font-size: carbon--type-scale($step);
-}
-
-/// Alias of `type-scale` mixin.
-/// @param {Number} $step
-@mixin carbon--font-size($step) {
-  font-size: carbon--type-scale($step);
-}
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/_styles.scss b/scss/globals/scss/vendor/@carbon/type/scss/_styles.scss
deleted file mode 100644
index 362d47a1ad3c..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/_styles.scss
+++ /dev/null
@@ -1,537 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '@carbon/layout/scss/breakpoint';
-@import 'font-family';
-@import 'scale';
-
-$caption-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$label-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$helper-text-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(1),
-  font-style: italic,
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$body-short-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-long-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(20px),
-  letter-spacing: 0.16px,
-) !default;
-
-$body-short-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(22px),
-  letter-spacing: 0,
-) !default;
-
-$body-long-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(24px),
-  letter-spacing: 0,
-) !default;
-
-$code-01: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
-  letter-spacing: 0.32px,
-) !default;
-
-$code-02: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(20px),
-  letter-spacing: 0.32px,
-) !default;
-
-$heading-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(18px),
-  letter-spacing: 0.16px,
-) !default;
-
-$heading-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(22px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(26px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(36px),
-  letter-spacing: 0,
-) !default;
-
-$productive-heading-05: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(40px),
-  letter-spacing: 0,
-) !default;
-
-$expressive-heading-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: carbon--type-scale(5),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: carbon--type-scale(6),
-    ),
-  ),
-) !default;
-
-$expressive-heading-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 129%,
-  letter-spacing: 0,
-  breakpoints: (
-    xlg: (
-      font-size: carbon--type-scale(7),
-      line-height: 125%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-    ),
-  ),
-) !default;
-
-$expressive-heading-05: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(13),
-    ),
-  ),
-) !default;
-
-$expressive-paragraph-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(6),
-  font-weight: carbon--font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    lg: (
-      font-size: carbon--type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-);
-
-$quotation-01: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 130%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(5),
-    ),
-    lg: (
-      font-size: carbon--type-scale(6),
-      line-height: 125%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(7),
-      line-height: 129%,
-    ),
-    max: (
-      font-size: carbon--type-scale(8),
-      line-height: 125%,
-    ),
-  ),
-) !default;
-
-$quotation-02: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('light'),
-  line-height: 125%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(9),
-      line-height: 122%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(10),
-      line-height: 119%,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(11),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(13),
-    ),
-  ),
-) !default;
-
-$display-01: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(10),
-    ),
-    lg: (
-      font-size: carbon--type-scale(12),
-    ),
-    xlg: (
-      font-size: carbon--type-scale(13),
-      line-height: 117%,
-    ),
-    max: (
-      font-size: carbon--type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-02: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(10),
-    ),
-    lg: (
-      font-size: carbon--type-scale(12),
-    ),
-    xlg: (
-      font-size: carbon--type-scale(13),
-      line-height: 116%,
-    ),
-    max: (
-      font-size: carbon--type-scale(15),
-      line-height: 113%,
-    ),
-  ),
-) !default;
-
-$display-03: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: carbon--type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-
-$display-04: (
-  font-family: carbon--font-family('sans'),
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
-  letter-spacing: 0,
-  breakpoints: (
-    md: (
-      font-size: carbon--type-scale(14),
-      line-height: 115%,
-    ),
-    lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 111%,
-      letter-spacing: -0.64px,
-    ),
-    xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 107%,
-      letter-spacing: -0.64px,
-    ),
-    max: (
-      font-size: carbon--type-scale(23),
-      line-height: 105%,
-      letter-spacing: -0.96px,
-    ),
-  ),
-) !default;
-
-// prettier-ignore
-$tokens: (
-  // Universal tokens
-  caption-01: $caption-01,
-  label-01: $label-01,
-
-  helper-text-01: $helper-text-01,
-
-  body-short-01: $body-short-01,
-  body-short-02: $body-short-02,
-
-  body-long-01: $body-long-01,
-  body-long-02: $body-long-02,
-
-  code-01: $code-01,
-  code-02: $code-02,
-
-  heading-01: $heading-01,
-  heading-02: $heading-02,
-
-  // Product layout, fixed
-  productive-heading-03: $productive-heading-03,
-  productive-heading-04: $productive-heading-04,
-  productive-heading-05: $productive-heading-05,
-
-  // Editorial layout, fluid
-  expressive-paragraph-01: $expressive-paragraph-01,
-  expressive-heading-03: $expressive-heading-03,
-  expressive-heading-04: $expressive-heading-04,
-  expressive-heading-05: $expressive-heading-05,
-
-  quotation-01: $quotation-01,
-  quotation-02: $quotation-02,
-
-  display-01: $display-01,
-  display-02: $display-02,
-  display-03: $display-03,
-  display-04: $display-04,
-);
-
-@mixin properties($map) {
-  @each $name, $value in $map {
-    #{$name}: $value;
-  }
-}
-
-@function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
-}
-
-/// 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.
-///
-/// 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/
-///
-/// @param {Map} $type-styles - the value of a given type token
-/// @param {?Map} $breakpoints - custom breakpoints to use
-@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) {
-  // Include the initial styles for the given token by default without any
-  // media query guard. This includes `font-size` as a fallback in the case
-  // that a browser does not support `calc()`
-  @include properties(map-remove($type-styles, breakpoints));
-  // We also need to include the `sm` styles by default since they don't
-  // appear in the fluid styles for tokens
-  @include fluid-type-size($type-styles, sm, $breakpoints);
-
-  // Finally, we need to go through all the breakpoints defined in the type
-  // token and apply the properties and fluid type size for that given
-  // breakpoint
-  @each $name, $values in map-get($type-styles, breakpoints) {
-    @include carbon--breakpoint($name) {
-      @include properties($values);
-      @include fluid-type-size($type-styles, $name, $breakpoints);
-    }
-  }
-}
-
-/// Computes the fluid `font-size` for a given type style and breakpoint
-/// @param {Map} $type-styles - the styles for a given token
-/// @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) {
-  // Get the information about the breakpoint we're currently working in. Useful
-  // for getting initial width information
-  $breakpoint: map-get($breakpoints, $name);
-
-  // Our fluid styles are captured under the 'breakpoints' property in our type
-  // styles map. These define what values to treat as `max-` variables below
-  $fluid-sizes: map-get($type-styles, breakpoints);
-  $fluid-breakpoint: ();
-  // Special case for `sm` because the styles for small are on the type style
-  // directly
-  @if $name == sm {
-    $fluid-breakpoint: map-remove($type-styles, breakpoints);
-  } @else {
-    $fluid-breakpoint: map-get($fluid-sizes, $name);
-  }
-
-  // Initialize our font-sizes to the default size for the type style
-  $max-font-size: map-get($type-styles, font-size);
-  $min-font-size: map-get($type-styles, font-size);
-  @if map-has-key($fluid-breakpoint, font-size) {
-    $min-font-size: map-get($fluid-breakpoint, font-size);
-  }
-
-  // Initialize our min and max width to the width of the current breakpoint
-  $max-vw: map-get($breakpoint, width);
-  $min-vw: map-get($breakpoint, width);
-
-  // We can use `breakpoint-next` to see if there is another breakpoint we can
-  // use to update `max-font-size` and `max-vw` with larger values
-  $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints);
-  $next-fluid-breakpoint-name: null;
-
-  // We need to figure out what the next available fluid breakpoint is for our
-  // given $type-styles. In this loop we try and iterate through breakpoints
-  // until we either manually set $next-breakpoint-available to null or
-  // `breakpoint-next` returns null.
-  @while $next-breakpoint-available {
-    @if map-has-key($fluid-sizes, $next-breakpoint-available) {
-      $next-fluid-breakpoint-name: $next-breakpoint-available;
-      $next-breakpoint-available: null;
-    } @else {
-      $next-breakpoint-available: carbon--breakpoint-next($next-breakpoint-available, $breakpoints);
-    }
-  }
-
-  // If we have found the next available fluid breakpoint name, then we know
-  // that we have values that we can use to set max-font-size and max-vw as both
-  // 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-vw: map-get($next-fluid-breakpoint, width);
-
-    // prettier-ignore
-    font-size: calc(#{$min-font-size} +
-      #{strip-unit($max-font-size - $min-font-size)} *
-      ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
-    );
-  } @else {
-    // Otherwise, just default to setting the font size found from the type
-    // style or the given fluid breakpoint in the type style
-    font-size: $min-font-size;
-  }
-}
-
-/// 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.
-/// @param {String} $name - the name of the token to get the styles for
-/// @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) {
-  @if not map-has-key($tokens, $name) {
-    @error 'Unable to find a token with the name: `#{$name}`';
-  }
-
-  $token: map-get($tokens, $name);
-
-  // If $fluid is set to true and the token has breakpoints defined for fluid
-  // styles, delegate to the fluid-type helper for the given token
-  @if $fluid == true and map-has-key($token, 'breakpoints') {
-    @include fluid-type($token, $breakpoints);
-  } @else {
-    // Otherwise, we just include all the property declarations directly on the
-    // selector
-    @include properties(map-remove($token, 'breakpoints'));
-  }
-}
diff --git a/scss/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss b/scss/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
deleted file mode 100644
index babbb69c084d..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/font-face/_mono.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-mono {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Mono';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-kVkqdyU8n1ioa0XdgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1ioa2ndgregdFOFh.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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-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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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/scss/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss b/scss/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
deleted file mode 100644
index ac5a00c71842..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/font-face/_sans.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-sans {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Sans';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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/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;
-  }
-  /* cyrillic-ext */
-  @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/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 {
-    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/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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 {
-    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/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 {
-    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/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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 {
-    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/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 {
-    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/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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/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 {
-    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/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/scss/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss b/scss/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
deleted file mode 100644
index 26e3e752f267..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/font-face/_serif.scss
+++ /dev/null
@@ -1,329 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@mixin carbon--font-face-serif {
-  // .woff support for IE11
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-  @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');
-  }
-
-  /* cyrillic-ext */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* cyrillic */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'IBM Plex Serif';
-    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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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;
-  }
-  /* 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');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-o3m1bpjfGj7oaMBg.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-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-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;
-  }
-  /* cyrillic-ext */
-  @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-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 {
-    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-SIwq1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-SI7q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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-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 {
-    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-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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-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 {
-    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-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 {
-    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_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 {
-    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_yIwq1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-  }
-  /* vietnamese */
-  @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_yI7q1vjitOh3oc.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @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_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 {
-    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_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/scss/globals/scss/vendor/@carbon/type/scss/type.scss b/scss/globals/scss/vendor/@carbon/type/scss/type.scss
deleted file mode 100644
index b74cae208596..000000000000
--- a/scss/globals/scss/vendor/@carbon/type/scss/type.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'font-family';
-@import 'reset';
-@import 'scale';
-@import 'styles';
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
deleted file mode 100644
index c573f59fb8b3..000000000000
--- a/src/components/toggle/_toggle.scss
+++ /dev/null
@@ -1,415 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-//-----------------------------
-// Toggle
-//-----------------------------
-
-@import '../../globals/scss/vars';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/import-once';
-@import '../form/form';
-
-@mixin toggle {
-  .#{$prefix}--toggle {
-    @include hidden;
-  }
-
-  .#{$prefix}--toggle__label {
-    @include font-family;
-    position: relative;
-    display: flex;
-    align-items: center;
-    transition: $transition--base $carbon--standard-easing;
-    cursor: pointer;
-    margin: $spacing-md 0;
-    color: $text-01;
-  }
-
-  .#{$prefix}--toggle__appearance {
-    position: relative;
-    width: rem(48px);
-
-    &:before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: 100%;
-      height: rem(4px);
-      top: -2px;
-      background-color: $ui-04;
-      transition: $transition--base $carbon--standard-easing;
-      cursor: pointer;
-    }
-
-    &:after {
-      box-sizing: border-box;
-      position: absolute;
-      display: block;
-      border: 2px solid $ui-04;
-      cursor: pointer;
-      top: -12px;
-      width: rem(24px);
-      height: rem(24px);
-      background-color: $ui-01;
-      border-radius: 50%;
-      content: '';
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label {
-    width: rem(32px);
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    width: rem(32px);
-    height: rem(16px);
-
-    &:before {
-      box-sizing: border-box;
-      height: rem(16px);
-      width: rem(32px);
-      border-radius: 0.9375rem;
-      background-color: transparent;
-      border: 2px solid $ui-04;
-      top: 0;
-    }
-
-    &:after {
-      width: rem(10px);
-      height: rem(10px);
-      background-color: $ui-04;
-      border: none;
-      top: 3px;
-      left: 3px;
-    }
-  }
-
-  .#{$prefix}--toggle__check {
-    fill: $ui-04;
-    position: absolute;
-    left: 6px;
-    top: 6px;
-    z-index: 1;
-    transition: $transition--base $carbon--standard-easing;
-    transform: scale(0.2);
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
-    fill: $brand-01;
-    transform: scale(1) translateX(16px);
-  }
-
-  .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle__text--right {
-    @include typescale('zeta');
-    position: relative;
-    color: $text-01;
-  }
-
-  .#{$prefix}--toggle__text--left {
-    margin-right: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle__text--right {
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $brand-01;
-    }
-
-    &:after {
-      transform: translateX(24px);
-      background-color: $brand-01;
-      box-shadow: none;
-      border-color: $brand-01;
-    }
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $brand-01;
-      border-color: $brand-01;
-    }
-
-    &:after {
-      background-color: $ui-01;
-      border-color: $ui-01;
-      margin-left: 0px;
-      transform: translateX(17px);
-    }
-  }
-
-  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      outline: 1px solid transparent;
-    }
-
-    .#{$prefix}--toggle__appearance:after {
-      @include focus-outline('blurred');
-    }
-  }
-
-  .#{$prefix}--toggle--small:focus + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      @include focus-outline('blurred');
-    }
-
-    .#{$prefix}--toggle__appearance:after {
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before,
-    &:after {
-      cursor: not-allowed;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  // Hide labels for small toggle for default theme
-  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle.#{$prefix}--toggle--small + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right {
-    @include hidden;
-  }
-
-  // Skeleton state
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label {
-    cursor: default;
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance {
-    &:before,
-    &:after {
-      background-color: $brand-01;
-      border-color: $brand-01;
-      cursor: default;
-    }
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__text--right {
-    @include skeleton;
-    width: rem(20px);
-    height: rem(12px);
-  }
-
-  .#{$prefix}--toggle.#{$prefix}--skeleton + .#{$prefix}--toggle__label > .#{$prefix}--toggle__appearance {
-    &:before {
-      background: transparent;
-      border-color: $ui-05;
-    }
-
-    &:after {
-      background-color: $ui-05;
-      border: none;
-    }
-  }
-}
-
-@mixin toggle--x {
-  .#{$prefix}--toggle {
-    @include hidden;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--toggle__label {
-    @include type-style('label-01');
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin: $spacing-xs 0;
-  }
-
-  .#{$prefix}--toggle__appearance {
-    position: relative;
-    width: rem(48px);
-    height: rem(24px);
-
-    // Toggle background oval
-    &:before {
-      position: absolute;
-      display: block;
-      content: '';
-      background-color: $ui-04;
-      cursor: pointer;
-      box-sizing: border-box;
-      height: rem(24px);
-      width: rem(48px);
-      border-radius: rem(15px);
-      top: 0;
-    }
-
-    // Toggle circle
-    &:after {
-      box-sizing: border-box;
-      position: absolute;
-      display: block;
-      cursor: pointer;
-      left: 3px;
-      top: 3px;
-      width: rem(18px);
-      height: rem(18px);
-      background-color: $ui-03;
-      border-radius: 50%;
-      content: '';
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    width: rem(32px);
-    height: rem(16px);
-
-    &:before {
-      box-sizing: border-box;
-      height: rem(16px);
-      width: rem(32px);
-      border-radius: 0.9375rem;
-      top: 0;
-    }
-
-    &:after {
-      width: rem(10px);
-      height: rem(10px);
-      top: 3px;
-      left: 3px;
-    }
-  }
-
-  .#{$prefix}--toggle__check {
-    fill: $ui-03;
-    position: absolute;
-    left: 6px;
-    top: 6px;
-    z-index: 1;
-    transition: $transition--base $carbon--standard-easing;
-    transform: scale(0.2);
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__check {
-    fill: $support-02;
-    transform: scale(1) translateX(16px);
-  }
-
-  .#{$prefix}--toggle__text--left,
-  .#{$prefix}--toggle__text--right {
-    @include typescale('zeta');
-    position: relative;
-    margin-left: $spacing-xs;
-  }
-
-  .#{$prefix}--toggle__text--left {
-    position: absolute;
-    left: rem(48px);
-  }
-
-  .#{$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 {
-    visibility: hidden;
-  }
-
-  .#{$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 {
-    &:before {
-      background-color: $support-02;
-    }
-
-    &:after {
-      background-color: $icon-03;
-      transform: translateX(24px);
-    }
-  }
-
-  .#{$prefix}--toggle--small:checked + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:after {
-      margin-left: 0px;
-      transform: translateX(17px);
-    }
-  }
-
-  //----------------------------------------------
-  // Focus
-  // ---------------------------------------------
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      transition: box-shadow $transition--base;
-      box-shadow: 0 0 0 2px transparent;
-    }
-  }
-  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle:active + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      box-shadow: 0 0 0 2px $focus;
-    }
-  }
-
-  //----------------------------------------------
-  // Disabled
-  // ---------------------------------------------
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
-    &:before {
-      background-color: $disabled-01;
-    }
-
-    &:after {
-      background-color: $disabled-02;
-    }
-
-    &:before,
-    &:after {
-      cursor: not-allowed;
-      transition: $transition--base $carbon--standard-easing;
-    }
-  }
-
-  .#{$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 {
-    box-shadow: none;
-  }
-}
-
-@include exports('toggle') {
-  @if feature-flag-enabled('components-x') {
-    @include toggle--x;
-  } @else {
-    @include toggle;
-  }
-}
diff --git a/src/components/toggle/toggle--small.hbs b/src/components/toggle/toggle--small.hbs
deleted file mode 100644
index e5173f0b4adf..000000000000
--- a/src/components/toggle/toggle--small.hbs
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- 
-  Copyright IBM Corp. 2016, 2018
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<div class="{{@root.prefix}}--form-item">
-  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle4" type="checkbox"
-    aria-label="Label Name">
-  <label class="{{@root.prefix}}--toggle__label" for="toggle4">
-    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="{{@root.prefix}}--toggle__appearance">
-      <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-      </svg>
-    </span>
-    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
-
-<div class="{{@root.prefix}}--form-item">
-  <input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle5" type="checkbox"
-    aria-label="Label Name" disabled>
-  <label class="{{@root.prefix}}--toggle__label" for="toggle5">
-    <span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
-    <span class="{{@root.prefix}}--toggle__appearance">
-      <svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
-      </svg>
-    </span>
-    <span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
-  </label>
-</div>
\ No newline at end of file
diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
deleted file mode 100644
index 0ddd3aa21291..000000000000
--- a/src/globals/scss/_theme-tokens.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'feature-flags';
-@import 'import-once';
-@import 'functions';
-@import 'colors';
-@import 'spacing';
-@import './vendor/@carbon/elements/scss/themes/mixins';
-
-@mixin theme() {
-  // Color Theme Variables
-  $brand-01: $color__blue-51 !default !global;
-  $brand-02: $color__blue-40 !default !global;
-  $brand-03: $color__teal-20 !default !global;
-  $inverse-01: $color__white !default !global;
-  $inverse-02: #272d33 !default !global;
-  $ui-01: $color__white !default !global;
-  $ui-02: #f4f7fb !default !global;
-  $ui-03: $color__gray-1 !default !global;
-  $ui-04: #8897a2 !default !global;
-  $ui-05: $color__navy-gray-6 !default !global;
-  $text-01: $color__blue-90 !default !global;
-  $text-02: $color__navy-gray-6 !default !global;
-  $text-03: #cdd1d4 !default !global;
-  $field-01: #f4f7fb !default !global;
-  $field-02: $color__white !default !global;
-  $support-01: #e0182d !default !global;
-  $support-02: $color__green-40 !default !global;
-  $support-03: $color__yellow-30 !default !global;
-  $support-04: $color__blue-30 !default !global;
-  $nav-01: $color__navy-gray-1 !default !global;
-  $nav-02: $color__blue-90 !default !global;
-  $nav-03: $color__purple-30 !default !global;
-  $nav-04: $color__purple-60 !default !global;
-  $nav-05: $color__teal-40 !default !global;
-  $nav-06: $color__teal-50 !default !global;
-  $nav-07: $color__blue-30 !default !global;
-  $nav-08: $color__blue-51 !default !global;
-
-  $hover-primary: darken($brand-01, 10%) !default !global;
-  $hover-primary-text: darken($brand-01, 15%) !default !global;
-  $hover-danger: darken($support-01, 10%) !default !global;
-  $hover-secondary: $brand-01 !default !global;
-  $hover-row: rgba($brand-02, 0.1) !default !global;
-
-  // Global
-  $input-border: 1px solid transparent !default !global;
-  $input-label-weight: 600 !default !global;
-  $focus: $color__blue-20 !default !global;
-
-  // Button Theme Variables
-  $button-font-weight: 600 !default !global;
-  $button-font-size: 0.875rem !default !global;
-  $button-border-radius: 0 !default !global;
-  $button-height: 40px !default !global;
-  $button-padding: 0 $spacing-md !default !global;
-  $button-padding-sm: 0 $spacing-xs !default !global;
-  $button-border-width: 2px !default !global;
-  $button-outline-width: 1px !default !global;
-
-  // Accordion (Reverse)
-  $accordion-flex-direction: row !default !global;
-  $accordion-justify-content: flex-start !default !global;
-  $accordion-arrow-margin: 0 0 0 $spacing-2xs !default !global;
-  $accordion-title-margin: 0 0 0 $spacing-md !default !global;
-  $accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default !global;
-
-  // Card
-  $card-text-align: center !default !global;
-  $card-flex-align: center !default !global;
-
-  // Checkbox
-  $checkbox-border-width: 2px !default !global;
-
-  // Code Snippet
-  $snippet-background-color: $ui-01 !default !global;
-  $snippet-border-color: $ui-03 !default !global;
-
-  // Content Switcher
-  $content-switcher-border-radius: 8px !default !global;
-  $content-switcher-option-border: 1px solid $brand-01 !default !global;
-
-  // Data Table
-  $data-table-heading-transform: uppercase !default !global;
-  $data-table-heading-border-bottom: 1px solid $brand-01 !default !global;
-  $data-table-row-height: 2rem !default !global;
-
-  // Modal
-  $modal-border-top: $brand-01 4px solid !default !global;
-  $modal-footer-background-color: $ui-02 !default !global;
-
-  // Progress Indicator
-  $progress-indicator-bar-width: 1px inset transparent !default !global;
-  $progress-indicator-stroke-width: 5 !default !global;
-  $progress-indicator-line-offset: 0.625rem !default !global;
-
-  // Radio Button
-  $radio-border-width: 2px !default !global;
-
-  // Structured Theme Variables
-  $structured-list-padding: 2rem !default !global;
-  $structured-list-text-transform: none !default !global;
-
-  // Skeleton Loading
-  $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01
-}
-
-// Light Experimental Theme
-@mixin theme--experimental() {
-  // Can include various themes here from `@carbon/themes`, including: white,
-  // g10, g90, and g100
-  @include carbon--theme-white();
-
-  $edited: true !default !global;
-  $use-layer: true !default !global;
-
-  // Global
-  $input-border: 1px solid transparent !default !global;
-  $input-label-weight: 400 !default !global;
-  $disabled: $disabled-02 !default !global;
-  $disabled-background-color: $disabled-01 !default !global;
-  $focus: $ibm-color__blue-60 !default !global;
-
-  // Link
-  $link-visited: $ibm-color__purple-60 !default !global;
-  $link-inverse-color: #6ea6ff !default !global;
-
-  // Tooltip
-  $tooltip-background-color: #3d3d3d !default !global;
-
-  // Button Theme Variables
-  $button-font-weight: 400 !default !global;
-  $button-font-size: 0.875rem !default !global;
-  $button-border-radius: 0 !default !global;
-  $button-height: 48px !default !global;
-  $button-padding: 0.875rem 4rem 0.875rem 1rem !default !global;
-  $button-padding-sm: 0.375rem 4rem 0.375rem 1rem !default !global;
-  $button-padding-lg: $spacing-sm !default !global;
-  $button-border-width: 1px !default !global;
-  $button-outline-width: 3px !default !global;
-  $button-outline-offset: -5px !default !global;
-  $button-outline: 1px solid $ibm-color__white-0 !default !global;
-
-  // Accordion (Reverse)
-  $accordion-flex-direction: row-reverse !default !global;
-  $accordion-justify-content: flex-start !default !global;
-  $accordion-arrow-margin: 0 $spacing-md 0 0 !default !global;
-  $accordion-title-margin: 0 0 0 $spacing-md !default !global;
-  $accordion-content-padding: 0 0 0 $spacing-md !default !global;
-
-  // Card
-  $card-text-align: center !default !global;
-  $card-flex-align: center !default !global;
-
-  // Checkbox
-  $checkbox-border-width: 2px !default !global;
-
-  // Code Snippet
-  $snippet-background-color: $ui-01 !default !global; // TODO: Define for experimental
-  $snippet-border-color: $ui-03 !default !global; // TODO: Define for experimental
-
-  // Content Switcher
-  $content-switcher-border-radius: 0px !default !global;
-  $content-switcher-option-border: 1px solid $brand-01 !default !global;
-  $content-switcher-divider: $ui-03 !default !global;
-
-  // Data Table
-  $data-table-heading-transform: uppercase !default !global;
-  $data-table-heading-border-bottom: 1px solid $brand-01 !default !global;
-  $data-table-row-height: 2rem !default !global;
-
-  // Date Picker
-  $date-picker-in-range-background-color: $ibm-color__blue-20 !default !global;
-
-  // Modal
-  $modal-border-top: $brand-01 4px solid !default !global;
-  $modal-footer-background-color: $ui-03 !default !global;
-
-  // Notification
-  $notification-info-background-color: $ibm-color__blue-10 !default !global;
-  $notification-error-background-color: $ibm-color__red-10 !default !global;
-  $notification-warning-background-color: rgba(#fdd13a, 0.15) !default !global;
-  $notification-success-background-color: $ibm-color__green-10 !default !global;
-
-  // Progress Indicator
-  $progress-indicator-bar-width: 1px inset transparent !default !global;
-  $progress-indicator-stroke-width: 5 !default !global;
-  $progress-indicator-line-offset: 0.625rem !default !global;
-
-  //Code Snippet
-  $copy-active: $active-ui !default !global;
-  $copy-btn-feedback: $ibm-colors__gray-80 !default !global;
-
-  // Radio Button
-  $radio-border-width: 1px !default !global;
-
-  // Structured Theme Variables
-  $structured-list-padding: 2rem !default !global;
-  $structured-list-text-transform: none !default !global;
-
-  // Slider
-
-  //Tab
-  $tab-underline-color: 3px solid $ibm-color__gray-30 !default !global;
-  $tab-underline-color-hover: 3px solid $ibm-color__gray-60 !default !global;
-  $tab-text-disabled: $ibm-color__gray-30 !default !global;
-  $tab-underline-disabled: 3px solid $ibm-color__gray-10 !default !global;
-
-  // Skeleton Loading
-  $skeleton: rgba($color__blue-51, 0.1) !default !global; //old $field-01 TODO: Define for experimental
-
-  // ☠️ Deprecated
-  $hover-field: $hover-ui !default !global;
-  $active-01: $active-ui !default !global;
-  $nav-01: $color__navy-gray-1 !default !global;
-  $nav-02: $color__blue-90 !default !global;
-  $nav-03: $color__purple-30 !default !global;
-  $nav-04: $color__purple-60 !default !global;
-  $nav-05: $color__teal-40 !default !global;
-  $nav-06: $color__teal-50 !default !global;
-  $nav-07: $color__blue-30 !default !global;
-  $nav-08: $color__blue-51 !default !global;
-}
-
-@include exports('theme') {
-  @if feature-flag-enabled('components-x') {
-    @include theme--experimental;
-  } @else {
-    @include theme;
-  }
-}

From fc71179c13df89c3985af36fa9a71842205d3729 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 13:59:14 -0500
Subject: [PATCH 5/7] chore: more extra files..

---
 scripts/carbon-components.js     | 11777 -----------------------------
 scripts/carbon-components.min.js |     1 -
 2 files changed, 11778 deletions(-)
 delete mode 100644 scripts/carbon-components.js
 delete mode 100644 scripts/carbon-components.min.js

diff --git a/scripts/carbon-components.js b/scripts/carbon-components.js
deleted file mode 100644
index 311b058fc774..000000000000
--- a/scripts/carbon-components.js
+++ /dev/null
@@ -1,11777 +0,0 @@
-var CarbonComponents = (function (exports) {
-  'use strict';
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * Settings.
-   * @exports CarbonComponents.settings
-   * @type Object
-   * @property {boolean} [disableAutoInit]
-   *   Disables automatic instantiation of components.
-   *   By default (`CarbonComponents.disableAutoInit` is `false`),
-   *   carbon-components attempts to instantiate components automatically
-   *   by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
-   *   or upon DOM events (e.g. clicking) on such elements.
-   *   See each components' static `.init()` methods for details.
-   * @property {string} [prefix=bx]
-   *   Brand prefix. Should be in sync with `$prefix` Sass variable in carbon-components/src/globals/scss/_vars.scss.
-   */
-  var settings = {
-    prefix: 'bx'
-  };
-  var settings_1 = settings;
-
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-  }
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
-
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
-      }
-
-      ownKeys.forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    }
-
-    return target;
-  }
-
-  function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
-      }
-    });
-    if (superClass) _setPrototypeOf(subClass, superClass);
-  }
-
-  function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-      return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _getPrototypeOf(o);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
-  }
-
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return self;
-  }
-
-  function _possibleConstructorReturn(self, call) {
-    if (call && (typeof call === "object" || typeof call === "function")) {
-      return call;
-    }
-
-    return _assertThisInitialized(self);
-  }
-
-  function _superPropBase(object, property) {
-    while (!Object.prototype.hasOwnProperty.call(object, property)) {
-      object = _getPrototypeOf(object);
-      if (object === null) break;
-    }
-
-    return object;
-  }
-
-  function _get(target, property, receiver) {
-    if (typeof Reflect !== "undefined" && Reflect.get) {
-      _get = Reflect.get;
-    } else {
-      _get = function _get(target, property, receiver) {
-        var base = _superPropBase(target, property);
-
-        if (!base) return;
-        var desc = Object.getOwnPropertyDescriptor(base, property);
-
-        if (desc.get) {
-          return desc.get.call(receiver);
-        }
-
-        return desc.value;
-      };
-    }
-
-    return _get(target, property, receiver || target);
-  }
-
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-      return arr2;
-    }
-  }
-
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-  }
-
-  function _iterableToArrayLimit(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * @param {Array} a An array.
-   * @returns {Array} The flattened version of the given array.
-   */
-  function flatten(a) {
-    return a.reduce(function (result, item) {
-      if (Array.isArray(item)) {
-        result.push.apply(result, _toConsumableArray(flatten(item)));
-      } else {
-        result.push(item);
-      }
-
-      return result;
-    }, []);
-  }
-  /**
-   * An interface for defining mix-in classes. Used with {@link mixin}.
-   * @function mixinfn
-   * @param {Class} ToMix The class to mix.
-   * @returns {Class} The class mixed-in with the given ToMix class.
-   */
-
-  /**
-   * @function mixin
-   * @param {...mixinfn} mixinfns The functions generating mix-ins.
-   * @returns {Class} The class generated with the given mix-ins.
-   */
-
-
-  function mixin() {
-    for (var _len = arguments.length, mixinfns = new Array(_len), _key = 0; _key < _len; _key++) {
-      mixinfns[_key] = arguments[_key];
-    }
-
-    return flatten(mixinfns).reduce(function (Class, mixinfn) {
-      return mixinfn(Class);
-    },
-    /*#__PURE__*/
-    function () {
-      function _class() {
-        _classCallCheck(this, _class);
-      }
-
-      return _class;
-    }());
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function createComponent (ToMix) {
-    var CreateComponent =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(CreateComponent, _ToMix);
-
-      /**
-       * The component instances managed by this component.
-       * Releasing this component also releases the components in `this.children`.
-       * @type {Component[]}
-       */
-
-      /**
-       * Mix-in class to manage lifecycle of component.
-       * The constructor sets up this component's effective options,
-       * and registers this component't instance associated to an element.
-       * @implements Handle
-       * @param {HTMLElement} element The element working as this component.
-       * @param {Object} [options] The component options.
-       */
-      function CreateComponent(element) {
-        var _this;
-
-        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-        _classCallCheck(this, CreateComponent);
-
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(CreateComponent).call(this, element, options));
-
-        _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "children", []);
-
-        if (!element || element.nodeType !== Node.ELEMENT_NODE) {
-          throw new TypeError('DOM element should be given to initialize this widget.');
-        }
-        /**
-         * The element the component is of.
-         * @type {Element}
-         */
-
-
-        _this.element = element;
-        /**
-         * The component options.
-         * @type {Object}
-         */
-
-        _this.options = Object.assign(Object.create(_this.constructor.options), options);
-
-        _this.constructor.components.set(_this.element, _assertThisInitialized(_assertThisInitialized(_this)));
-
-        return _this;
-      }
-      /**
-       * Instantiates this component of the given element.
-       * @param {HTMLElement} element The element.
-       */
-
-
-      _createClass(CreateComponent, [{
-        key: "release",
-
-        /**
-         * Releases this component's instance from the associated element.
-         */
-        value: function release() {
-          for (var child = this.children.pop(); child; child = this.children.pop()) {
-            child.release();
-          }
-
-          this.constructor.components.delete(this.element);
-          return null;
-        }
-      }], [{
-        key: "create",
-        value: function create(element, options) {
-          return this.components.get(element) || new this(element, options);
-        }
-      }]);
-
-      return CreateComponent;
-    }(ToMix);
-
-    return CreateComponent;
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function initComponentBySearch (ToMix) {
-    /**
-     * Mix-in class to instantiate components by searching for their root elements.
-     * @class InitComponentBySearch
-     */
-    var InitComponentBySearch =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(InitComponentBySearch, _ToMix);
-
-      function InitComponentBySearch() {
-        _classCallCheck(this, InitComponentBySearch);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentBySearch).apply(this, arguments));
-      }
-
-      _createClass(InitComponentBySearch, null, [{
-        key: "init",
-
-        /**
-         * Instantiates component in the given node.
-         * If the given element indicates that it's an component of this class, instantiates it.
-         * Otherwise, instantiates components by searching for components in the given node.
-         * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
-         * @param {Object} [options] The component options.
-         * @param {boolean} [options.selectorInit] The CSS selector to find components.
-         */
-        value: function init() {
-          var _this = this;
-
-          var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          var 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)) {
-            this.create(target, options);
-          } else {
-            Array.prototype.forEach.call(target.querySelectorAll(effectiveOptions.selectorInit), function (element) {
-              return _this.create(element, options);
-            });
-          }
-        }
-      }]);
-
-      return InitComponentBySearch;
-    }(ToMix);
-
-    return InitComponentBySearch;
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function handles (ToMix) {
-    /**
-     * Mix-in class to manage handles in component.
-     * Managed handles are automatically released when the component with this class mixed in is released.
-     * @class Handles
-     * @implements Handle
-     */
-    var Handles =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(Handles, _ToMix);
-
-      function Handles() {
-        var _getPrototypeOf2;
-
-        var _this;
-
-        _classCallCheck(this, Handles);
-
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Handles)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-        _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handles", new Set());
-
-        return _this;
-      }
-
-      _createClass(Handles, [{
-        key: "manage",
-
-        /**
-         * Manages the given handle.
-         * @param {Handle} handle The handle to manage.
-         * @returns {Handle} The given handle.
-         */
-        value: function manage(handle) {
-          this.handles.add(handle);
-          return handle;
-        }
-        /**
-         * Stop managing the given handle.
-         * @param {Handle} handle The handle to stop managing.
-         * @returns {Handle} The given handle.
-         */
-
-      }, {
-        key: "unmanage",
-        value: function unmanage(handle) {
-          this.handles.delete(handle);
-          return handle;
-        }
-      }, {
-        key: "release",
-        value: function release() {
-          var _this2 = this;
-
-          this.handles.forEach(function (handle) {
-            handle.release();
-
-            _this2.handles.delete(handle);
-          });
-          return _get(_getPrototypeOf(Handles.prototype), "release", this).call(this);
-        }
-      }]);
-
-      return Handles;
-    }(ToMix);
-
-    return Handles;
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function on(element) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    element.addEventListener.apply(element, args);
-    return {
-      release: function release() {
-        element.removeEventListener.apply(element, args);
-        return null;
-      }
-    };
-  }
-
-  var stateChangeTypes = {
-    true: 'true',
-    false: 'false',
-    mixed: 'mixed'
-  };
-
-  var Checkbox =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Checkbox, _mixin);
-
-    /**
-     * Checkbox UI.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a checkbox UI.
-     */
-    function Checkbox(element, options) {
-      var _this;
-
-      _classCallCheck(this, Checkbox);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Checkbox).call(this, element, options));
-
-      _this.manage(on(_this.element, 'click', function (event) {
-        _this._handleClick(event);
-      }));
-
-      _this.manage(on(_this.element, 'focus', function (event) {
-        _this._handleFocus(event);
-      }));
-
-      _this.manage(on(_this.element, 'blur', function (event) {
-        _this._handleBlur(event);
-      }));
-
-      _this._indeterminateCheckbox();
-
-      _this._initCheckbox();
-
-      return _this;
-    }
-
-    _createClass(Checkbox, [{
-      key: "_handleClick",
-      value: function _handleClick() {
-        if (this.element.checked === true) {
-          this.element.setAttribute('checked', '');
-          this.element.setAttribute('aria-checked', 'true');
-          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');
-          }
-        } else if (this.element.checked === false) {
-          this.element.removeAttribute('checked');
-          this.element.setAttribute('aria-checked', 'false');
-          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');
-          }
-        }
-      }
-    }, {
-      key: "_handleFocus",
-      value: function _handleFocus() {
-        if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-          this.element.parentElement.classList.add(this.options.classLabelFocused);
-        }
-      }
-    }, {
-      key: "_handleBlur",
-      value: function _handleBlur() {
-        if (this.element.parentElement.classList.contains(this.options.classLabel)) {
-          this.element.parentElement.classList.remove(this.options.classLabelFocused);
-        }
-      }
-      /**
-       * Sets the new checkbox state.
-       * @param {boolean|string} [state]
-       *   The new checkbox state to set. `mixed` to put checkbox in indeterminate state.
-       *   If omitted, this method simply makes the style reflect `aria-checked` attribute.
-       */
-
-    }, {
-      key: "setState",
-      value: function setState(state) {
-        if (state === undefined || stateChangeTypes[state] === undefined) {
-          throw new TypeError('setState expects a value of true, false or mixed.');
-        }
-
-        this.element.setAttribute('aria-checked', state);
-        this.element.indeterminate = state === stateChangeTypes.mixed;
-        this.element.checked = state === stateChangeTypes.true;
-        var container = this.element.closest(this.options.selectorContainedCheckboxState);
-
-        if (container) {
-          container.setAttribute(this.options.attribContainedCheckboxState, state);
-        }
-      }
-    }, {
-      key: "setDisabled",
-      value: function setDisabled(value) {
-        if (value === undefined) {
-          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');
-        }
-
-        var container = this.element.closest(this.options.selectorContainedCheckboxDisabled);
-
-        if (container) {
-          container.setAttribute(this.options.attribContainedCheckboxDisabled, value);
-        }
-      }
-    }, {
-      key: "_indeterminateCheckbox",
-      value: function _indeterminateCheckbox() {
-        if (this.element.getAttribute('aria-checked') === 'mixed') {
-          this.element.indeterminate = true;
-        }
-
-        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');
-        }
-      }
-    }, {
-      key: "_initCheckbox",
-      value: function _initCheckbox() {
-        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.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');
-        }
-      }
-      /**
-       * The map associating DOM element and copy button UI instance.
-       * @member Checkbox.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode Checkbox.create .create()}, or {@linkcode Checkbox.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode Checkbox.init .init()} works.
-       * @member Checkbox.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find copy button UIs.
-       * @property {string} selectorContainedCheckboxState The CSS selector to find a container of checkbox preserving checked state.
-       * @property {string} selectorContainedCheckboxDisabled
-       *   The CSS selector to find a container of checkbox preserving disabled state.
-       * @property {string} classLabel The CSS class for the label.
-       * @property {string} classLabelFocused The CSS class for the focused label.
-       * @property {string} attribContainedCheckboxState The attribute name for the checked state of contained checkbox.
-       * @property {string} attribContainedCheckboxDisabled The attribute name for the disabled state of contained checkbox.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: ".".concat(prefix, "--checkbox"),
-          selectorContainedCheckboxState: '[data-contained-checkbox-state]',
-          selectorContainedCheckboxDisabled: '[data-contained-checkbox-disabled]',
-          classLabel: "".concat(prefix, "--checkbox-label"),
-          classLabelFocused: "".concat(prefix, "--checkbox-label__focus"),
-          attribContainedCheckboxState: 'data-contained-checkbox-state',
-          attribContainedCheckboxDisabled: 'data-contained-checkbox-disabled'
-        };
-      }
-    }]);
-
-    return Checkbox;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Checkbox, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(Checkbox, "stateChangeTypes",
-  /* #__PURE_CLASS_PROPERTY__ */
-  stateChangeTypes);
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * This file 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.
-   *
-   * @example Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise.
-   * // `my-component.config.js`
-   * const { aFeatureFlag } = require('/path/to/feature-flags');
-   * ...
-   * module.exports = {
-   *   variants: [
-   *     {
-   *       name: 'default',
-   *       label: 'My component',
-   *       context: {
-   *         aFeatureFlag,
-   *         ...
-   *       },
-   *     },
-   *     ...
-   *   ],
-   * };
-   *
-   * // `my-component.hbs`
-   * <div>
-   *   {{#if aFeatureFlag}}
-   *     foo
-   *   {{else}}
-   *     bar
-   *   {{/if}}
-   * </div>
-   *
-   * @example Emit `foo` upon clicking on component's element if `aFeatureFlag` is `true`, emit `bar` otherwise.
-   * import mixin from '/path/to/globals/js/misc/mixin';
-   * import createComponent from '/path/to/globals/js/mixins/create-component';
-   * import initComponentBySearch from '/path/to/globals/js/mixins/init-component-by-search';
-   * import handles from '/path/to/globals/js/mixins/handles';
-   * import on from '/path/to/globals/js/misc/on';
-   *
-   * import { aFeatureFlag } from '/path/to/globals/js/feature-flags';
-   *
-   * class MyClass extends mixin(createComponent, initComponentBySearch, handles) {
-   *   constructor(element, options) {
-   *     super(element, options);
-   *     this.manage(
-   *       on(this.element, 'click', () => {
-   *         console.log(aFeatureFlag ? 'foo' : 'bar');
-   *       })
-   *     );
-   *   }
-   * }
-   */
-  var breakingChangesX = false;
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function eventedState (ToMix) {
-    /**
-     * Mix-in class to manage events associated with states.
-     * @class EventedState
-     */
-    var EventedState =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(EventedState, _ToMix);
-
-      function EventedState() {
-        _classCallCheck(this, EventedState);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(EventedState).apply(this, arguments));
-      }
-
-      _createClass(EventedState, [{
-        key: "_changeState",
-        // eslint-disable-next-line jsdoc/check-param-names
-
-        /**
-         * The internal implementation for {@link EventedState#changeState `.changeState()`}, performing actual change in state.
-         * @param {string} [state] The new state. Can be an omitted, which means toggling.
-         * @param {Object} [detail]
-         *   The object that should be put to event details that is fired before/after changing state.
-         *   Can have a `group` property, which specifies what state to be changed.
-         * @param {EventedState~changeStateCallback} callback The callback called once changing state is finished or is canceled.
-         * @private
-         */
-        value: function _changeState() {
-          throw new Error('_changeState() should be overriden to perform actual change in state.');
-        } // eslint-disable-next-line jsdoc/check-param-names
-
-        /**
-         * Changes the state of this component.
-         * @param {string} [state] The new state. Can be an omitted, which means toggling.
-         * @param {Object} [detail]
-         *   The object that should be put to event details that is fired before/after changing state.
-         *   Can have a `group` property, which specifies what state to be changed.
-         * @param {EventedState~changeStateCallback} [callback] The callback called once changing state is finished or is canceled.
-         */
-
-      }, {
-        key: "changeState",
-        value: function changeState() {
-          var _this = this;
-
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-
-          var state = typeof args[0] === 'string' ? args.shift() : undefined;
-          var detail = Object(args[0]) === args[0] && typeof args[0] !== 'function' ? args.shift() : undefined;
-          var callback = typeof args[0] === 'function' ? args.shift() : undefined;
-
-          if (typeof this.shouldStateBeChanged === 'function' && !this.shouldStateBeChanged(state, detail)) {
-            if (callback) {
-              callback(null, true);
-            }
-
-            return;
-          }
-
-          var data = {
-            group: detail && detail.group,
-            state: state
-          };
-          var eventNameSuffix = [data.group, state].filter(Boolean).join('-').split('-') // Group or state may contain hyphen
-          .map(function (item) {
-            return item[0].toUpperCase() + item.substr(1);
-          }).join('');
-          var eventStart = new CustomEvent(this.options["eventBefore".concat(eventNameSuffix)], {
-            bubbles: true,
-            cancelable: true,
-            detail: detail
-          });
-          var fireOnNode = detail && detail.delegatorNode || this.element;
-          var canceled = !fireOnNode.dispatchEvent(eventStart);
-
-          if (canceled) {
-            if (callback) {
-              var error = new Error("Changing state (".concat(JSON.stringify(data), ") has been canceled."));
-              error.canceled = true;
-              callback(error);
-            }
-          } else {
-            var changeStateArgs = [state, detail].filter(Boolean);
-
-            this._changeState.apply(this, _toConsumableArray(changeStateArgs).concat([function () {
-              fireOnNode.dispatchEvent(new CustomEvent(_this.options["eventAfter".concat(eventNameSuffix)], {
-                bubbles: true,
-                cancelable: true,
-                detail: detail
-              }));
-
-              if (callback) {
-                callback();
-              }
-            }]));
-          }
-        }
-        /**
-         * Tests if change in state should happen or not.
-         * Classes inheriting {@link EventedState `EventedState`} should override this function.
-         * @function EventedState#shouldStateBeChanged
-         * @param {string} [state] The new state. Can be an omitted, which means toggling.
-         * @param {Object} [detail]
-         *   The object that should be put to event details that is fired before/after changing state.
-         *   Can have a `group` property, which specifies what state to be changed.
-         * @returns {boolean}
-         *   `false` if change in state shouldn't happen, e.g. when the given new state is the same as the current one.
-         */
-
-      }]);
-
-      return EventedState;
-    }(ToMix);
-    /**
-     * The callback called once changing state is finished or is canceled.
-     * @callback EventedState~changeStateCallback
-     * @param {Error} error
-     *   An error object with `true` in its `canceled` property if changing state is canceled.
-     *   Cancellation happens if the handler of a custom event, that is fired before changing state happens,
-     *   calls `.preventDefault()` against the event.
-     * @param {boolean} keptState
-     *   `true` if the call to {@link EventedState#changeState `.changeState()`} didn't cause actual change in state.
-     */
-
-
-    return EventedState;
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * @param {Event} event The event.
-   * @param {string} selector The selector.
-   * @returns {Element}
-   *   The closest ancestor of the event target (or the event target itself) which matches the selectors given in parameter.
-   */
-  function eventMatches(event, selector) {
-    // <svg> in IE does not have `Element#msMatchesSelector()` (that should be copied to `Element#matches()` by a polyfill).
-    // Also a weird behavior is seen in IE where DOM tree seems broken when `event.target` is on <svg>.
-    // Therefore this function simply returns `undefined` when `event.target` is on <svg>.
-    var target = event.target,
-        currentTarget = event.currentTarget;
-
-    if (typeof target.matches === 'function') {
-      if (target.matches(selector)) {
-        // If event target itself matches the given selector, return it
-        return target;
-      }
-
-      if (target.matches("".concat(selector, " *"))) {
-        var closest = target.closest(selector);
-
-        if ((currentTarget.nodeType === Node.DOCUMENT_NODE ? currentTarget.documentElement : currentTarget).contains(closest)) {
-          return closest;
-        }
-      }
-    }
-
-    return undefined;
-  }
-
-  var toArray = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var FileUploader =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(FileUploader, _mixin);
-
-    /**
-     * File uploader.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends eventedState
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a file uploader.
-     * @param {Object} [options] The component options. See static options.
-     */
-    function FileUploader(element) {
-      var _this;
-
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-      _classCallCheck(this, FileUploader);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(FileUploader).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_changeState", function (state, detail, callback) {
-        if (state === 'delete-filename-fileuploader') {
-          _this.container.removeChild(detail.filenameElement);
-        }
-
-        if (typeof callback === 'function') {
-          callback();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleDeleteButton", function (evt) {
-        var target = eventMatches(evt, "[data-for=".concat(_this.inputId, "]"));
-
-        if (target) {
-          _this._changeState('delete-filename-fileuploader', {
-            initialEvt: evt,
-            filenameElement: target.parentNode
-          });
-        }
-      });
-
-      _this.input = _this.element.querySelector(_this.options.selectorInput);
-      _this.container = _this.element.querySelector(_this.options.selectorContainer);
-
-      if (!_this.input) {
-        throw new TypeError('Cannot find the file input box.');
-      }
-
-      if (!_this.container) {
-        throw new TypeError('Cannot find the file names container.');
-      }
-
-      _this.inputId = _this.input.getAttribute('id');
-
-      _this.manage(on(_this.input, 'change', function () {
-        return _this._displayFilenames();
-      }));
-
-      _this.manage(on(_this.container, 'click', _this._handleDeleteButton));
-
-      return _this;
-    }
-
-    _createClass(FileUploader, [{
-      key: "_filenamesHTML",
-      value: function _filenamesHTML(name, id) {
-        return "<span class=\"".concat(this.options.classSelectedFile, "\">\n      <p class=\"").concat(this.options.classFileName, "\">").concat(name, "</p>\n      <span data-for=\"").concat(id, "\" class=\"").concat(this.options.classStateContainer, "\"></span>\n    </span>");
-      }
-    }, {
-      key: "_uploadHTML",
-      value: function _uploadHTML() {
-        return "\n      <div data-loading class=\"".concat(this.options.classLoading, "\">\n        <svg class=\"").concat(this.options.classLoadingSvg, "\" viewBox=\"-42 -42 84 84\">\n          <circle cx=\"0\" cy=\"0\" r=\"37.5\" />\n        </svg>\n      </div>");
-      }
-    }, {
-      key: "_closeButtonHTML",
-      value: function _closeButtonHTML() {
-
-        return "\n    <svg class=\"".concat(this.options.classFileClose, "\" tabindex=\"0\" viewBox=\"0 0 16 16\" fill-rule=\"evenodd\" width=\"16\" height=\"16\">\n      <path d=\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8\n        9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z\" />\n    </svg>");
-      }
-    }, {
-      key: "_checkmarkHTML",
-      value: function _checkmarkHTML() {
-        return "\n      <svg class=\"".concat(this.options.classFileComplete, "\" viewBox=\"0 0 16 16\" fill-rule=\"evenodd\" width=\"16\" height=\"16\">\n       <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\"/>\n      </svg>");
-      }
-    }, {
-      key: "_getStateContainers",
-      value: function _getStateContainers() {
-        var stateContainers = toArray(this.element.querySelectorAll("[data-for=".concat(this.inputId, "]")));
-
-        if (stateContainers.length === 0) {
-          throw new TypeError('State container elements not found; invoke _displayFilenames() first');
-        }
-
-        if (stateContainers[0].dataset.for !== this.inputId) {
-          throw new TypeError('File input id must equal [data-for] attribute');
-        }
-
-        return stateContainers;
-      }
-      /**
-       * Inject selected files into DOM. Invoked on change event.
-       */
-
-    }, {
-      key: "_displayFilenames",
-      value: function _displayFilenames() {
-        var _this2 = this;
-
-        var container = this.element.querySelector(this.options.selectorContainer);
-        var HTMLString = toArray(this.input.files).map(function (file) {
-          return _this2._filenamesHTML(file.name, _this2.inputId);
-        }).join('');
-        container.insertAdjacentHTML('afterbegin', HTMLString);
-      }
-    }, {
-      key: "_removeState",
-      value: function _removeState(element) {
-        if (!element || element.nodeType !== Node.ELEMENT_NODE) {
-          throw new TypeError('DOM element should be given to initialize this widget.');
-        }
-
-        while (element.firstChild) {
-          element.removeChild(element.firstChild);
-        }
-      }
-    }, {
-      key: "_handleStateChange",
-      value: function _handleStateChange(elements, selectIndex, html) {
-        var _this3 = this;
-
-        if (selectIndex === undefined) {
-          elements.forEach(function (el) {
-            _this3._removeState(el);
-
-            el.insertAdjacentHTML('beforeend', html);
-          });
-        } else {
-          elements.forEach(function (el, index) {
-            if (index === selectIndex) {
-              _this3._removeState(el);
-
-              el.insertAdjacentHTML('beforeend', html);
-            }
-          });
-        }
-      }
-      /**
-       * Handles delete button.
-       * @param {Event} evt The event triggering this action.
-       * @private
-       */
-
-    }, {
-      key: "setState",
-      value: function setState(state, selectIndex) {
-        var stateContainers = this._getStateContainers();
-
-        if (state === 'edit') {
-          this._handleStateChange(stateContainers, selectIndex, this._closeButtonHTML());
-        }
-
-        if (state === 'upload') {
-          this._handleStateChange(stateContainers, selectIndex, this._uploadHTML());
-        }
-
-        if (state === 'complete') {
-          this._handleStateChange(stateContainers, selectIndex, this._checkmarkHTML());
-        }
-      }
-      /**
-       * The map associating DOM element and file uploader instance.
-       * @member FileUploader.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-file]',
-          selectorInput: "input[type=\"file\"].".concat(prefix, "--file-input"),
-          selectorContainer: '[data-file-container]',
-          selectorCloseButton: ".".concat(prefix, "--file-close"),
-          classLoading: "".concat(prefix, "--loading"),
-          classLoadingSvg: "".concat(prefix, "--loading__svg"),
-          classFileName: "".concat(prefix, "--file-filename"),
-          classFileClose: "".concat(prefix, "--file-close"),
-          classFileComplete: "".concat(prefix, "--file-complete"),
-          classSelectedFile: "".concat(prefix, "--file__selected-file"),
-          classStateContainer: "".concat(prefix, "--file__state-container"),
-          eventBeforeDeleteFilenameFileuploader: 'fileuploader-before-delete-filename',
-          eventAfterDeleteFilenameFileuploader: 'fileuploader-after-delete-filename'
-        };
-      }
-    }]);
-
-    return FileUploader;
-  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
-
-  _defineProperty(FileUploader, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  /**
-   * Copyright 2014-2015, Facebook, Inc.
-   * All rights reserved.
-   *
-   * This source code is licensed under the BSD-style license found in the
-   * LICENSE file in the root directory of this source tree. An additional grant
-   * of patent rights can be found in the PATENTS file in the same directory.
-   */
-
-  function initComponentByEvent (ToMix) {
-    /**
-     * Mix-in class to instantiate components upon events.
-     * @class InitComponentByEvent
-     */
-    var InitComponentByEvent =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(InitComponentByEvent, _ToMix);
-
-      function InitComponentByEvent() {
-        _classCallCheck(this, InitComponentByEvent);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentByEvent).apply(this, arguments));
-      }
-
-      _createClass(InitComponentByEvent, null, [{
-        key: "init",
-
-        /**
-         * `true` suggests that this component is lazily initialized upon an action/event, etc.
-         * @type {boolean}
-         */
-
-        /**
-         * Instantiates this component in the given element.
-         * If the given element indicates that it's an component of this class, instantiates it.
-         * Otherwise, instantiates this component by clicking on this component in the given node.
-         * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
-         * @param {Object} [options] The component options.
-         * @param {string} [options.selectorInit] The CSS selector to find this component.
-         * @returns {Handle} The handle to remove the event listener to handle clicking.
-         */
-        value: function init() {
-          var _this = this;
-
-          var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          var 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)) {
-            this.create(target, options);
-          } else {
-            // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
-            var hasFocusin = 'onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView;
-            var handles = effectiveOptions.initEventNames.map(function (name) {
-              var eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
-              return on(target, eventName, function (event) {
-                var element = eventMatches(event, effectiveOptions.selectorInit); // Instantiated components handles events by themselves
-
-                if (element && !_this.components.has(element)) {
-                  var component = _this.create(element, options);
-
-                  if (typeof component.createdByEvent === 'function') {
-                    component.createdByEvent(event);
-                  }
-                }
-              }, name === 'focus' && !hasFocusin);
-            });
-            return {
-              release: function release() {
-                for (var handle = handles.pop(); handle; handle = handles.pop()) {
-                  handle.release();
-                }
-              }
-            };
-          }
-
-          return '';
-        }
-      }]);
-
-      return InitComponentByEvent;
-    }(ToMix);
-
-    _defineProperty(InitComponentByEvent, "forLazyInit",
-    /* #__PURE_CLASS_PROPERTY__ */
-    true);
-
-    return InitComponentByEvent;
-  }
-
-  /**
-   * @param {string} name The component name.
-   * @returns {Function} A stub of removed component.
-   */
-
-  var removedComponent = function removedComponent(name) {
-    var _class, _temp;
-
-    return _temp = _class =
-    /*#__PURE__*/
-    function () {
-      function _class() {
-        _classCallCheck(this, _class);
-      }
-
-      _createClass(_class, null, [{
-        key: "create",
-        value: function create() {
-        }
-      }, {
-        key: "init",
-        value: function init() {
-        }
-      }]);
-
-      return _class;
-    }(), _defineProperty(_class, "components",
-    /* #__PURE_CLASS_PROPERTY__ */
-    new WeakMap()), _defineProperty(_class, "options",
-    /* #__PURE_CLASS_PROPERTY__ */
-    {}), _temp;
-  };
-
-  var FabButton =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(FabButton, _mixin);
-
-    /**
-     * Floating action button.
-     * @extends CreateComponent
-     * @extends InitComponentByEvent
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a floting action button.
-     */
-    function FabButton(element) {
-      var _this;
-
-      _classCallCheck(this, FabButton);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(FabButton).call(this, element));
-
-      _this.manage(on(element, 'click', function (event) {
-        _this.toggle(event);
-      }));
-
-      return _this;
-    }
-    /**
-     * A method called when this widget is created upon clicking.
-     * @param {Event} event The event triggering the creation.
-     */
-
-
-    _createClass(FabButton, [{
-      key: "createdByEvent",
-      value: function createdByEvent(event) {
-        this.toggle(event);
-      }
-      /**
-       * Toggles this floating action button.
-       * @param {Event} event The event triggering this method.
-       */
-
-    }, {
-      key: "toggle",
-      value: function toggle(event) {
-        if (this.element.tagName === 'A') {
-          event.preventDefault();
-        }
-
-        if (this.element.dataset.state === 'closed') {
-          this.element.dataset.state = 'open';
-        } else {
-          this.element.dataset.state = 'closed';
-        }
-      }
-      /**
-       * Instantiates floating action button of the given element.
-       * @param {HTMLElement} element The element.
-       */
-
-    }], [{
-      key: "create",
-      value: function create(element) {
-        return this.components.get(element) || new this(element);
-      }
-      /**
-       * The map associating DOM element and floating action button instance.
-       * @member FabButton.components
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return FabButton;
-  }(mixin(createComponent, initComponentByEvent, handles));
-
-  _defineProperty(FabButton, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(FabButton, "options",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    selectorInit: '[data-fab]',
-    initEventNames: ['click']
-  });
-
-  var fab = !breakingChangesX ? FabButton : removedComponent('FabButton');
-
-  var toArray$1 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var ContentSwitcher =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(ContentSwitcher, _mixin);
-
-    /**
-     * Set of content switcher buttons.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends EventedState
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a set of content switcher buttons.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorButton] The CSS selector to find switcher buttons.
-     * @param {string} [options.selectorButtonSelected] The CSS selector to find the selected switcher button.
-     * @param {string} [options.classActive] The CSS class for switcher button's selected state.
-     * @param {string} [options.eventBeforeSelected]
-     *   The name of the custom event fired before a switcher button is selected.
-     *   Cancellation of this event stops selection of content switcher button.
-     * @param {string} [options.eventAfterSelected] The name of the custom event fired after a switcher button is selected.
-     */
-    function ContentSwitcher(element, options) {
-      var _this;
-
-      _classCallCheck(this, ContentSwitcher);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ContentSwitcher).call(this, element, options));
-
-      _this.manage(on(_this.element, 'click', function (event) {
-        _this._handleClick(event);
-      }));
-
-      return _this;
-    }
-    /**
-     * Handles click on content switcher button set.
-     * If the click is on a content switcher button, activates it.
-     * @param {Event} event The event triggering this method.
-     */
-
-
-    _createClass(ContentSwitcher, [{
-      key: "_handleClick",
-      value: function _handleClick(event) {
-        var button = eventMatches(event, this.options.selectorButton);
-
-        if (button) {
-          this.changeState({
-            group: 'selected',
-            item: button,
-            launchingEvent: event
-          });
-        }
-      }
-      /**
-       * Internal method of {@linkcode ContentSwitcher#setActive .setActive()}, to select a content switcher button.
-       * @private
-       * @param {Object} detail The detail of the event trigging this action.
-       * @param {HTMLElement} detail.item The button to be selected.
-       * @param {Function} callback Callback called when change in state completes.
-       */
-
-    }, {
-      key: "_changeState",
-      value: function _changeState(_ref, callback) {
-        var _this2 = this;
-
-        var item = _ref.item;
-        // `options.selectorLink` is not defined in this class itself, code here primary is for inherited classes
-        var itemLink = item.querySelector(this.options.selectorLink);
-
-        if (itemLink) {
-          toArray$1(this.element.querySelectorAll(this.options.selectorLink)).forEach(function (link) {
-            if (link !== itemLink) {
-              link.setAttribute('aria-selected', 'false');
-            }
-          });
-          itemLink.setAttribute('aria-selected', 'true');
-        }
-
-        var selectorButtons = toArray$1(this.element.querySelectorAll(this.options.selectorButton));
-        selectorButtons.forEach(function (button) {
-          if (button !== item) {
-            button.setAttribute('aria-selected', false);
-            button.classList.toggle(_this2.options.classActive, false);
-            toArray$1(button.ownerDocument.querySelectorAll(button.dataset.target)).forEach(function (element) {
-              element.setAttribute('hidden', '');
-              element.setAttribute('aria-hidden', 'true');
-            });
-          }
-        });
-        item.classList.toggle(this.options.classActive, true);
-        item.setAttribute('aria-selected', true);
-        toArray$1(item.ownerDocument.querySelectorAll(item.dataset.target)).forEach(function (element) {
-          element.removeAttribute('hidden');
-          element.setAttribute('aria-hidden', 'false');
-        });
-
-        if (callback) {
-          callback();
-        }
-      }
-      /**
-       * Selects a content switcher button.
-       * If the selected button has `data-target` attribute, DOM elements it points to as a CSS selector will be shown.
-       * DOM elements associated with unselected buttons in the same way will be hidden.
-       * @param {HTMLElement} item The button to be selected.
-       * @param {ChangeState~callback} callback The callback is called once selection is finished
-       * or is canceled. Will only invoke callback if it's passed in.
-       */
-
-    }, {
-      key: "setActive",
-      value: function setActive(item, callback) {
-        this.changeState({
-          group: 'selected',
-          item: item
-        }, function (error) {
-          if (error) {
-            if (callback) {
-              callback(Object.assign(error, {
-                item: item
-              }));
-            }
-          } else if (callback) {
-            callback(null, item);
-          }
-        });
-      }
-      /**
-       * The map associating DOM element and content switcher set instance.
-       * @member ContentSwitcher.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode ContentSwitcher.create .create()}, or {@linkcode ContentSwitcher.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode ContentSwitcher.init .init()} works.
-       * @member ContentSwitcher.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find content switcher button set.
-       * @property {string} [selectorButton] The CSS selector to find switcher buttons.
-       * @property {string} [selectorButtonSelected] The CSS selector to find the selected switcher button.
-       * @property {string} [classActive] The CSS class for switcher button's selected state.
-       * @property {string} [eventBeforeSelected]
-       *   The name of the custom event fired before a switcher button is selected.
-       *   Cancellation of this event stops selection of content switcher button.
-       * @property {string} [eventAfterSelected] The name of the custom event fired after a switcher button is selected.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-content-switcher]',
-          selectorButton: "input[type=\"radio\"], .".concat(prefix, "--content-switcher-btn"),
-          classActive: "".concat(prefix, "--content-switcher--selected"),
-          eventBeforeSelected: 'content-switcher-beingselected',
-          eventAfterSelected: 'content-switcher-selected'
-        };
-      }
-    }]);
-
-    return ContentSwitcher;
-  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
-
-  _defineProperty(ContentSwitcher, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$2 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var Tab =
-  /*#__PURE__*/
-  function (_ContentSwitcher) {
-    _inherits(Tab, _ContentSwitcher);
-
-    /**
-     * Container of tabs.
-     * @extends ContentSwitcher
-     * @param {HTMLElement} element The element working as a container of tabs.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorMenu] The CSS selector to find the drop down menu used in narrow mode.
-     * @param {string} [options.selectorTrigger] The CSS selector to find the button to open the drop down menu used in narrow mode.
-     * @param {string} [options.selectorTriggerText]
-     *   The CSS selector to find the element used in narrow mode showing the selected tab item.
-     * @param {string} [options.selectorButton] The CSS selector to find tab containers.
-     * @param {string} [options.selectorButtonSelected] The CSS selector to find the selected tab.
-     * @param {string} [options.selectorLink] The CSS selector to find the links in tabs.
-     * @param {string} [options.classActive] The CSS class for tab's selected state.
-     * @param {string} [options.classHidden] The CSS class for the drop down menu's hidden state used in narrow mode.
-     * @param {string} [options.eventBeforeSelected]
-     *   The name of the custom event fired before a tab is selected.
-     *   Cancellation of this event stops selection of tab.
-     * @param {string} [options.eventAfterSelected] The name of the custom event fired after a tab is selected.
-     */
-    function Tab(element, options) {
-      var _this;
-
-      _classCallCheck(this, Tab);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tab).call(this, element, options));
-
-      _this.manage(on(_this.element, 'keydown', function (event) {
-        _this._handleKeyDown(event);
-      }));
-
-      var selected = _this.element.querySelector(_this.options.selectorButtonSelected);
-
-      if (selected) {
-        _this._updateTriggerText(selected);
-      }
-
-      return _this;
-    }
-    /**
-     * Internal method of {@linkcode Tab#setActive .setActive()}, to select a tab item.
-     * @private
-     * @param {Object} detail The detail of the event trigging this action.
-     * @param {HTMLElement} detail.item The tab item to be selected.
-     * @param {Function} callback Callback called when change in state completes.
-     */
-
-
-    _createClass(Tab, [{
-      key: "_changeState",
-      value: function _changeState(detail, callback) {
-        var _this2 = this;
-
-        _get(_getPrototypeOf(Tab.prototype), "_changeState", this).call(this, detail, function (error) {
-          if (!error) {
-            _this2._updateTriggerText(detail.item);
-          }
-
-          for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            data[_key - 1] = arguments[_key];
-          }
-
-          callback.apply(void 0, [error].concat(data));
-        });
-      }
-      /**
-       * Handles click on tab container.
-       * * If the click is on a tab, activates it.
-       * * If the click is on the button to open the drop down menu, does so.
-       * @param {Event} event The event triggering this method.
-       */
-
-    }, {
-      key: "_handleClick",
-      value: function _handleClick(event) {
-        var button = eventMatches(event, this.options.selectorButton);
-        var trigger = eventMatches(event, this.options.selectorTrigger);
-
-        if (button && !button.classList.contains(this.options.classButtonDisabled)) {
-          _get(_getPrototypeOf(Tab.prototype), "_handleClick", this).call(this, event);
-
-          this._updateMenuState(false);
-        }
-
-        if (trigger) {
-          this._updateMenuState();
-        }
-      }
-      /**
-       * Handles arrow keys on tab container.
-       * * Left keys are used to go to previous tab.
-       * * Right keys are used to go to next tab.
-       * @param {Event} event The event triggering this method.
-       */
-
-    }, {
-      key: "_handleKeyDown",
-      value: function _handleKeyDown(event) {
-        var _this3 = this;
-
-        var triggerNode = eventMatches(event, this.options.selectorTrigger);
-
-        if (triggerNode) {
-          if (event.which === 13) {
-            this._updateMenuState();
-          }
-
-          return;
-        }
-
-        var direction = {
-          37: this.constructor.NAVIGATE.BACKWARD,
-          39: this.constructor.NAVIGATE.FORWARD
-        }[event.which];
-
-        if (direction) {
-          var buttons = toArray$2(this.element.querySelectorAll(this.options.selectorButtonEnabled));
-          var button = this.element.querySelector(this.options.selectorButtonSelected);
-          var nextIndex = Math.max(buttons.indexOf(button) + direction, -1
-          /* For `button` not found in `buttons` */
-          );
-          var nextIndexLooped = nextIndex >= 0 && nextIndex < buttons.length ? nextIndex : nextIndex - Math.sign(nextIndex) * buttons.length;
-          this.setActive(buttons[nextIndexLooped], function (error, item) {
-            if (item) {
-              var link = item.querySelector(_this3.options.selectorLink);
-
-              if (link) {
-                link.focus();
-              }
-            }
-          });
-          event.preventDefault();
-        }
-      }
-      /**
-       * Shows/hides the drop down menu used in narrow mode.
-       * @param {boolean} [force] `true` to show the menu, `false` to hide the menu, otherwise toggles the menu.
-       */
-
-    }, {
-      key: "_updateMenuState",
-      value: function _updateMenuState(force) {
-        var menu = this.element.querySelector(this.options.selectorMenu);
-        var trigger = this.element.querySelector(this.options.selectorTrigger);
-
-        if (menu) {
-          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 {
-            trigger.classList.add(this.options.classOpen);
-          }
-        }
-      }
-      /**
-       * Updates the text indicating the currently selected tab item.
-       * @param {HTMLElement} target The newly selected tab item.
-       */
-
-    }, {
-      key: "_updateTriggerText",
-      value: function _updateTriggerText(target) {
-        var triggerText = this.element.querySelector(this.options.selectorTriggerText);
-
-        if (triggerText) {
-          triggerText.textContent = target.textContent;
-        }
-      }
-      /**
-       * The map associating DOM element and tab container instance.
-       * @member Tab.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode ContentSwitcher.create .create()}, or {@linkcode Tab.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode Tab.init .init()} works.
-       * @member Tab.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find tab containers.
-       * @property {string} [selectorMenu] The CSS selector to find the drop down menu used in narrow mode.
-       * @property {string} [selectorTrigger] The CSS selector to find the button to open the drop down menu used in narrow mode.
-       * @property {string} [selectorTriggerText]
-       *   The CSS selector to find the element used in narrow mode showing the selected tab item.
-       * @property {string} [selectorButton] The CSS selector to find tab containers.
-       * @property {string} [selectorButtonSelected] The CSS selector to find the selected tab.
-       * @property {string} [selectorLink] The CSS selector to find the links in tabs.
-       * @property {string} [classActive] The CSS class for tab's selected state.
-       * @property {string} [classHidden] The CSS class for the drop down menu's hidden state used in narrow mode.
-       * @property {string} [eventBeforeSelected]
-       *   The name of the custom event fired before a tab is selected.
-       *   Cancellation of this event stops selection of tab.
-       * @property {string} [eventAfterSelected] The name of the custom event fired after a tab is selected.
-       */
-      get: function get$$1() {
-        var prefix = settings_1.prefix;
-        return Object.assign(Object.create(ContentSwitcher.options), {
-          selectorInit: '[data-tabs]',
-          selectorMenu: ".".concat(prefix, "--tabs__nav"),
-          selectorTrigger: ".".concat(prefix, "--tabs-trigger"),
-          selectorTriggerText: ".".concat(prefix, "--tabs-trigger-text"),
-          selectorButton: ".".concat(prefix, "--tabs__nav-item"),
-          selectorButtonEnabled: ".".concat(prefix, "--tabs__nav-item:not(.").concat(prefix, "--tabs__nav-item--disabled)"),
-          selectorButtonSelected: ".".concat(prefix, "--tabs__nav-item--selected"),
-          selectorLink: ".".concat(prefix, "--tabs__nav-link"),
-          classActive: "".concat(prefix, "--tabs__nav-item--selected"),
-          classHidden: "".concat(prefix, "--tabs__nav--hidden"),
-          classOpen: "".concat(prefix, "--tabs-trigger--open"),
-          classButtonDisabled: "".concat(prefix, "--tabs__nav-item--disabled"),
-          eventBeforeSelected: 'tab-beingselected',
-          eventAfterSelected: 'tab-selected'
-        });
-      }
-      /**
-       * Enum for navigating backward/forward.
-       * @readonly
-       * @member Tab.NAVIGATE
-       * @type {Object}
-       * @property {number} BACKWARD Navigating backward.
-       * @property {number} FORWARD Navigating forward.
-       */
-
-    }]);
-
-    return Tab;
-  }(ContentSwitcher);
-
-  _defineProperty(Tab, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(Tab, "NAVIGATE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    BACKWARD: -1,
-    FORWARD: 1
-  });
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function getLaunchingDetails(evt) {
-    if (!evt || typeof evt === 'function') {
-      return {
-        launchingElement: null,
-        launchingEvent: null
-      };
-    }
-
-    var launchingElement = evt.delegateTarget || evt.currentTarget || evt;
-    var launchingEvent = evt.currentTarget && evt;
-
-    if (launchingElement && !launchingElement.nodeType) {
-      throw new TypeError('DOM Node should be given for launching element.');
-    }
-
-    if (launchingEvent && !launchingEvent.type) {
-      throw new TypeError('DOM event should be given for launching event.');
-    }
-
-    return {
-      launchingElement: launchingElement,
-      launchingEvent: launchingEvent
-    };
-  }
-
-  function eventedShowHideState(ToMix) {
-    /**
-     * Mix-in class to launch a floating menu.
-     * @class EventedShowHideState
-     */
-    var EventedShowHideState =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(EventedShowHideState, _ToMix);
-
-      function EventedShowHideState() {
-        _classCallCheck(this, EventedShowHideState);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(EventedShowHideState).apply(this, arguments));
-      }
-
-      _createClass(EventedShowHideState, [{
-        key: "show",
-
-        /**
-         */
-
-        /**
-         * Switch to 'shown' state.
-         * @param [evtOrElem] The launching event or element.
-         * @param {EventedState~changeStateCallback} [callback] The callback.
-         */
-        value: function show(evtOrElem, callback) {
-          if (!evtOrElem || typeof evtOrElem === 'function') {
-            callback = evtOrElem; // eslint-disable-line no-param-reassign
-          }
-
-          this.changeState('shown', getLaunchingDetails(evtOrElem), callback);
-        }
-        /**
-         * Switch to 'hidden' state.
-         * @param [evtOrElem] The launching event or element.
-         * @param {EventedState~changeStateCallback} [callback] The callback.
-         */
-
-      }, {
-        key: "hide",
-        value: function hide(evtOrElem, callback) {
-          if (!evtOrElem || typeof evtOrElem === 'function') {
-            callback = evtOrElem; // eslint-disable-line no-param-reassign
-          }
-
-          this.changeState('hidden', getLaunchingDetails(evtOrElem), callback);
-        }
-      }]);
-
-      return EventedShowHideState;
-    }(ToMix);
-
-    return EventedShowHideState;
-  }
-
-  var exports$1 = [eventedState, eventedShowHideState];
-
-  function trackBlur(ToMix) {
-    var TrackBlur =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(TrackBlur, _ToMix);
-
-      /**
-       * Mix-in class to add an handler for losing focus.
-       * @extends Handles
-       * @param {HTMLElement} element The element working as this component.
-       * @param {Object} [options] The component options.
-       */
-      function TrackBlur(element, options) {
-        var _this;
-
-        _classCallCheck(this, TrackBlur);
-
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(TrackBlur).call(this, element, options));
-        var hasFocusin = 'onfocusin' in window;
-        var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-
-        _this.manage(on(_this.element.ownerDocument, focusinEventName, function (event) {
-          if (!_this.element.contains(event.target)) {
-            _this.handleBlur(event);
-          }
-        }, !hasFocusin));
-
-        return _this;
-      }
-      /**
-       * The method called when this component loses focus.
-       * @abstract
-       */
-
-
-      _createClass(TrackBlur, [{
-        key: "handleBlur",
-        value: function handleBlur() {
-          throw new Error('Components inheriting TrackBlur mix-in must implement handleBlur() method.');
-        }
-      }]);
-
-      return TrackBlur;
-    }(ToMix);
-
-    return TrackBlur;
-  }
-
-  var exports$2 = [handles, trackBlur];
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  // mdn resize function
-  var optimizedResize =
-  /* #__PURE__ */
-  function optimizedResize() {
-    var callbacks = [];
-    var running = false; // run the actual callbacks
-
-    function runCallbacks() {
-      callbacks.forEach(function (callback) {
-        callback();
-      });
-      running = false;
-    } // fired on resize event
-
-
-    function resize() {
-      if (!running) {
-        running = true;
-        window.requestAnimationFrame(runCallbacks);
-      }
-    } // adds callback to loop
-
-
-    function addCallback(callback) {
-      if (callback) {
-        var index = callbacks.indexOf(callback);
-
-        if (index < 0) {
-          callbacks.push(callback);
-        }
-      }
-    }
-
-    return {
-      // public method to add additional callback
-      add: function add(callback) {
-        if (!callbacks.length) {
-          window.addEventListener('resize', resize);
-        }
-
-        addCallback(callback);
-        return {
-          release: function release() {
-            var index = callbacks.indexOf(callback);
-
-            if (index >= 0) {
-              callbacks.splice(index, 1);
-            }
-          }
-        };
-      }
-    };
-  }();
-
-  /**
-   * The structure for the position of floating menu.
-   * @typedef {Object} FloatingMenu~position
-   * @property {number} left The left position.
-   * @property {number} top The top position.
-   * @property {number} right The right position.
-   * @property {number} bottom The bottom position.
-   */
-
-  /**
-   * The structure for the size of floating menu.
-   * @typedef {Object} FloatingMenu~size
-   * @property {number} width The width.
-   * @property {number} height The height.
-   */
-
-  /**
-   * The structure for the position offset of floating menu.
-   * @typedef {Object} FloatingMenu~offset
-   * @property {number} top The top position.
-   * @property {number} left The left position.
-   */
-
-  var DIRECTION_LEFT = 'left';
-  var DIRECTION_TOP = 'top';
-  var DIRECTION_RIGHT = 'right';
-  var DIRECTION_BOTTOM = 'bottom';
-  /**
-   * @param {Object} params The parameters.
-   * @param {FloatingMenu~size} params.menuSize The size of the menu.
-   * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
-   * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
-   * @param {string} [params.direction=bottom] The menu direction.
-   * @param {number} [params.scrollX=0] The scroll position of the viewport.
-   * @param {number} [params.scrollY=0] The scroll position of the viewport.
-   * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
-   * @private
-   */
-
-  var getFloatingPosition = function getFloatingPosition(_ref) {
-    var _DIRECTION_LEFT$DIREC;
-
-    var menuSize = _ref.menuSize,
-        refPosition = _ref.refPosition,
-        _ref$offset = _ref.offset,
-        offset = _ref$offset === void 0 ? {} : _ref$offset,
-        _ref$direction = _ref.direction,
-        direction = _ref$direction === void 0 ? DIRECTION_BOTTOM : _ref$direction,
-        _ref$scrollX = _ref.scrollX,
-        scrollX = _ref$scrollX === void 0 ? 0 : _ref$scrollX,
-        _ref$scrollY = _ref.scrollY,
-        scrollY = _ref$scrollY === void 0 ? 0 : _ref$scrollY;
-    var _refPosition$left = refPosition.left,
-        refLeft = _refPosition$left === void 0 ? 0 : _refPosition$left,
-        _refPosition$top = refPosition.top,
-        refTop = _refPosition$top === void 0 ? 0 : _refPosition$top,
-        _refPosition$right = refPosition.right,
-        refRight = _refPosition$right === void 0 ? 0 : _refPosition$right,
-        _refPosition$bottom = refPosition.bottom,
-        refBottom = _refPosition$bottom === void 0 ? 0 : _refPosition$bottom;
-    var width = menuSize.width,
-        height = menuSize.height;
-    var _offset$top = offset.top,
-        top = _offset$top === void 0 ? 0 : _offset$top,
-        _offset$left = offset.left,
-        left = _offset$left === void 0 ? 0 : _offset$left;
-    var refCenterHorizontal = (refLeft + refRight) / 2;
-    var refCenterVertical = (refTop + refBottom) / 2;
-    return (_DIRECTION_LEFT$DIREC = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, {
-      left: refLeft - width + scrollX - left,
-      top: refCenterVertical - height / 2 + scrollY + top
-    }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, {
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refTop - height + scrollY - top
-    }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, {
-      left: refRight + scrollX + left,
-      top: refCenterVertical - height / 2 + scrollY + top
-    }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, {
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refBottom + scrollY + top
-    }), _DIRECTION_LEFT$DIREC)[direction];
-  };
-
-  var FloatingMenu =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(FloatingMenu, _mixin);
-
-    /**
-     * Floating menu.
-     * @extends CreateComponent
-     * @extends EventedShowHideState
-     * @param {HTMLElement} element The element working as a modal dialog.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorContainer] The CSS selector to find the container to put this menu in.
-     * @param {string} [options.attribDirection] The attribute name to specify menu placement direction (top/right/bottom/left).
-     * @param {string} [options.classShown] The CSS class for shown state, for the menu.
-     * @param {string} [options.classRefShown] The CSS class for shown state, for the trigger button.
-     * @param {string} [options.eventBeforeShown]
-     *   The name of the custom event fired before this menu is shown.
-     *   Cancellation of this event stops hiding the menu.
-     * @param {string} [options.eventAfterShown]
-     *   The name of the custom event telling that menu is sure shown
-     *   without being canceled by the event handler named by `eventBeforeShown` option (`floating-menu-beingshown`).
-     * @param {string} [options.eventBeforeHidden]
-     *   The name of the custom event fired before this menu is hidden.
-     *   Cancellation of this event stops hiding the menu.
-     * @param {string} [options.eventAfterHidden]
-     *   The name of the custom event telling that menu is sure hidden
-     *   without being canceled by the event handler named by `eventBeforeHidden` option (`floating-menu-beinghidden`).
-     * @param {Element} [options.refNode] The launching element of the menu. Used for calculating the geometry of the menu.
-     * @param {Object} [options.offset] The offset to adjust the geometry of the menu. Should have `top`/`left` properties.
-     */
-    function FloatingMenu(element, options) {
-      var _this;
-
-      _classCallCheck(this, FloatingMenu);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(FloatingMenu).call(this, element, options));
-
-      var 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);
-      }
-
-      return _this;
-    }
-    /**
-     * Focuses back on the trigger button if this component loses focus.
-     */
-
-
-    _createClass(FloatingMenu, [{
-      key: "handleBlur",
-      value: function handleBlur(event) {
-        if (this.element.classList.contains(this.options.classShown)) {
-          this.changeState('hidden', getLaunchingDetails(event));
-          var refNode = this.options.refNode;
-
-          if (this.element.contains(event.relatedTarget) && refNode && event.target !== refNode) {
-            HTMLElement.prototype.focus.call(refNode); // SVGElement in IE11 does not have `.focus()` method
-          }
-        }
-      }
-      /**
-       * @private
-       * @returns {Element} The element that this menu should be placed to.
-       */
-
-    }, {
-      key: "_getContainer",
-      value: function _getContainer() {
-        return this.element.closest(this.options.selectorContainer) || this.element.ownerDocument.body;
-      }
-      /**
-       * @private
-       * @returns {Object} The menu position, with `top` and `left` properties.
-       */
-
-    }, {
-      key: "_getPos",
-      value: function _getPos() {
-        var element = this.element;
-        var _this$options = this.options,
-            refNode = _this$options.refNode,
-            offset = _this$options.offset,
-            direction = _this$options.direction;
-
-        if (!refNode) {
-          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),
-          direction: direction,
-          scrollX: refNode.ownerDocument.defaultView.pageXOffset,
-          scrollY: refNode.ownerDocument.defaultView.pageYOffset
-        });
-      }
-      /**
-       * Sees if the computed style is what this floating menu expects.
-       * @private
-       */
-
-    }, {
-      key: "_testStyles",
-      value: function _testStyles() {
-        if (!this.options.debugStyle) {
-          return;
-        }
-
-        var element = this.element;
-        var computedStyle = element.ownerDocument.defaultView.getComputedStyle(element);
-        var styles = {
-          position: 'absolute',
-          right: 'auto',
-          margin: 0
-        };
-        Object.keys(styles).forEach(function (key) {
-          var expected = typeof styles[key] === 'number' ? parseFloat(styles[key]) : styles[key];
-          var actual = computedStyle.getPropertyValue(key);
-
-          if (expected !== actual) {
-            // eslint-disable-next-line no-console
-            console.warn("Floating menu component expects ".concat(key, ": ").concat(styles[key], " style."));
-          }
-        });
-      }
-      /**
-       * Places the menu.
-       * @private
-       */
-
-    }, {
-      key: "_place",
-      value: function _place() {
-        var element = this.element;
-
-        var _this$_getPos = this._getPos(),
-            left = _this$_getPos.left,
-            top = _this$_getPos.top;
-
-        element.style.left = "".concat(left, "px");
-        element.style.top = "".concat(top, "px");
-
-        this._testStyles();
-      }
-      /**
-       * @param {string} state The new state.
-       * @returns {boolean} `true` of the current state is different from the given new state.
-       */
-
-    }, {
-      key: "shouldStateBeChanged",
-      value: function shouldStateBeChanged(state) {
-        return (state === 'shown' || state === 'hidden') && state !== (this.element.classList.contains(this.options.classShown) ? 'shown' : 'hidden');
-      }
-      /**
-       * Changes the shown/hidden state.
-       * @private
-       * @param {string} state The new state.
-       * @param {Object} detail The detail of the event trigging this action.
-       * @param {Function} callback Callback called when change in state completes.
-       */
-
-    }, {
-      key: "_changeState",
-      value: function _changeState(state, detail, callback) {
-        var _this2 = this;
-
-        var shown = state === 'shown';
-        var _this$options2 = this.options,
-            refNode = _this$options2.refNode,
-            classShown = _this$options2.classShown,
-            classRefShown = _this$options2.classRefShown;
-
-        if (!refNode) {
-          throw new TypeError('Cannot find the refernce node for changing the style.');
-        }
-
-        this.element.classList.toggle(classShown, shown);
-
-        if (classRefShown) {
-          refNode.classList.toggle(classRefShown, shown);
-        }
-
-        if (state === 'shown') {
-          if (!this.hResize) {
-            this.hResize = optimizedResize.add(function () {
-              _this2._place();
-            });
-          }
-
-          this._getContainer().appendChild(this.element);
-
-          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();
-          }
-        }
-
-        if (state === 'hidden' && this.hResize) {
-          this.hResize.release();
-          this.hResize = null;
-        }
-
-        callback();
-      }
-    }, {
-      key: "release",
-      value: function release() {
-        if (this.hResize) {
-          this.hResize.release();
-          this.hResize = null;
-        }
-
-        _get(_getPrototypeOf(FloatingMenu.prototype), "release", this).call(this);
-      }
-    }]);
-
-    return FloatingMenu;
-  }(mixin(createComponent, exports$1, exports$2));
-
-  _defineProperty(FloatingMenu, "options",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    selectorContainer: '[data-floating-menu-container]',
-    selectorPrimaryFocus: '[data-floating-menu-primary-focus]',
-    attribDirection: 'data-floating-menu-direction',
-    attribAvoidFocusOnOpen: 'data-avoid-focus-on-open',
-    classShown: '',
-    // Should be provided from options arg in constructor
-    classRefShown: '',
-    // Should be provided from options arg in constructor
-    eventBeforeShown: 'floating-menu-beingshown',
-    eventAfterShown: 'floating-menu-shown',
-    eventBeforeHidden: 'floating-menu-beinghidden',
-    eventAfterHidden: 'floating-menu-hidden',
-    refNode: null,
-    // Should be provided from options arg in constructor
-    offset: {
-      left: 0,
-      top: 0
-    }
-  });
-
-  _defineProperty(FloatingMenu, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  /**
-   * The CSS property names of the arrow keyed by the floating menu direction.
-   * @type {Object<string, string>}
-   */
-
-  var triggerButtonPositionProps =
-  /* #__PURE__ */
-  function () {
-    var _ref;
-
-    return _ref = {}, _defineProperty(_ref, DIRECTION_TOP, 'bottom'), _defineProperty(_ref, DIRECTION_BOTTOM, 'top'), _defineProperty(_ref, DIRECTION_LEFT, 'left'), _defineProperty(_ref, DIRECTION_RIGHT, 'right'), _ref;
-  }();
-  /**
-   * Determines how the position of arrow should affect the floating menu position.
-   * @type {Object<string, number>}
-   */
-
-
-  var triggerButtonPositionFactors =
-  /* #__PURE__ */
-  function () {
-    var _ref2;
-
-    return _ref2 = {}, _defineProperty(_ref2, DIRECTION_TOP, -2), _defineProperty(_ref2, DIRECTION_BOTTOM, -1), _defineProperty(_ref2, DIRECTION_LEFT, -2), _defineProperty(_ref2, DIRECTION_RIGHT, -1), _ref2;
-  }();
-  /**
-   * @param {Element} menuBody The menu body with the menu arrow.
-   * @param {string} direction The floating menu direction.
-   * @param {Element} trigger The trigger button.
-   * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
-   * @private
-   */
-
-
-  var getMenuOffset = function getMenuOffset(menuBody, direction, trigger) {
-    var triggerButtonPositionProp = triggerButtonPositionProps[direction];
-    var triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
-
-    if (!triggerButtonPositionProp || !triggerButtonPositionFactor) {
-      console.warn('Wrong floating menu direction:', direction); // eslint-disable-line no-console
-    }
-
-    var menuWidth = menuBody.offsetWidth;
-    var menuHeight = menuBody.offsetHeight;
-    var arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody, ':before');
-    var values = [triggerButtonPositionProp, 'left', 'width', 'height', 'border-top-width'].reduce(function (o, name) {
-      return _objectSpread({}, o, _defineProperty({}, name, Number((/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1])));
-    }, {});
-
-    if (Object.keys(values).every(function (name) {
-      return !isNaN(values[name]);
-    })) {
-      var left = values.left,
-          width = values.width,
-          height = values.height,
-          borderTopWidth = values['border-top-width'];
-      return {
-        left: menuWidth / 2 - (left + Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 2),
-        top: Math.sqrt(Math.pow(borderTopWidth, 2) * 2) + triggerButtonPositionFactor * values[triggerButtonPositionProp]
-      };
-    }
-
-    return undefined;
-  };
-
-  var OverflowMenu =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(OverflowMenu, _mixin);
-
-    /**
-     * Overflow menu.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a modal dialog.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorOptionMenu] The CSS selector to find the menu.
-     * @param {string} [options.classShown] The CSS class for the shown state, for the trigger UI.
-     * @param {string} [options.classMenuShown] The CSS class for the shown state, for the menu.
-     * @param {string} [options.classMenuFlip] The CSS class for the flipped state of the menu.
-     * @param {Object} [options.objMenuOffset] The offset locating the menu for the non-flipped state.
-     * @param {Object} [options.objMenuOffsetFlip] The offset locating the menu for the flipped state.
-     */
-    function OverflowMenu(element, options) {
-      var _this;
-
-      _classCallCheck(this, OverflowMenu);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(OverflowMenu).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentNavigation", function () {
-        var focused = _this.element.ownerDocument.activeElement;
-        return focused.nodeType === Node.ELEMENT_NODE && focused.matches(_this.options.selectorItem) ? focused : null;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "navigate", function (direction) {
-        var items = _toConsumableArray(_this.element.ownerDocument.querySelectorAll(_this.options.selectorItem));
-
-        var start = _this.getCurrentNavigation() || _this.element.querySelector(_this.options.selectorItemSelected);
-
-        var getNextItem = function getNextItem(old) {
-          var handleUnderflow = function handleUnderflow(index, length) {
-            return index + (index >= 0 ? 0 : length);
-          };
-
-          var handleOverflow = function handleOverflow(index, length) {
-            return index - (index < length ? 0 : length);
-          }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
-
-
-          var index = Math.max(items.indexOf(old) + direction, -1);
-          return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
-        };
-
-        for (var current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
-          if (!current.matches(_this.options.selectorItemHidden) && !current.parentNode.matches(_this.options.selectorItemHidden) && !current.matches(_this.options.selectorItemSelected)) {
-            current.focus();
-            break;
-          }
-        }
-      });
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (event) {
-        _this._handleDocumentClick(event);
-
-        _this.wasOpenBeforeClick = undefined;
-      }));
-
-      _this.manage(on(_this.element.ownerDocument, 'keydown', function (event) {
-        _this._handleKeyPress(event);
-      }));
-
-      _this.manage(on(_this.element, 'mousedown', function () {
-        _this.wasOpenBeforeClick = element.classList.contains(_this.options.classShown);
-      }));
-
-      return _this;
-    }
-    /**
-     * Changes the shown/hidden state.
-     * @param {string} state The new state.
-     * @param {Object} detail The detail of the event trigging this action.
-     * @param {Function} callback Callback called when change in state completes.
-     */
-
-
-    _createClass(OverflowMenu, [{
-      key: "changeState",
-      value: function changeState(state, detail, callback) {
-        if (state === 'hidden') {
-          this.element.setAttribute('aria-expanded', 'false');
-        } else {
-          this.element.setAttribute('aria-expanded', 'true');
-        }
-
-        if (!this.optionMenu) {
-          var optionMenu = this.element.querySelector(this.options.selectorOptionMenu);
-
-          if (!optionMenu) {
-            throw new Error('Cannot find the target menu.');
-          } // Lazily create a component instance for menu
-
-
-          this.optionMenu = FloatingMenu.create(optionMenu, {
-            refNode: this.element,
-            classShown: this.options.classMenuShown,
-            classRefShown: this.options.classShown,
-            offset: this.options.objMenuOffset
-          });
-          this.children.push(this.optionMenu);
-        }
-
-        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);
-      }
-      /**
-       * Handles click on document.
-       * @param {Event} event The triggering event.
-       * @private
-       */
-
-    }, {
-      key: "_handleDocumentClick",
-      value: function _handleDocumentClick(event) {
-        var element = this.element,
-            optionMenu = this.optionMenu,
-            wasOpenBeforeClick = this.wasOpenBeforeClick;
-        var isOfSelf = element.contains(event.target);
-        var isOfMenu = optionMenu && optionMenu.element.contains(event.target);
-        var shouldBeOpen = isOfSelf && !wasOpenBeforeClick;
-        var state = shouldBeOpen ? 'shown' : 'hidden';
-
-        if (isOfSelf) {
-          if (element.tagName === 'A') {
-            event.preventDefault();
-          }
-
-          event.delegateTarget = element; // eslint-disable-line no-param-reassign
-        }
-
-        this.changeState(state, getLaunchingDetails(event), function () {
-          if (state === 'hidden' && isOfMenu) {
-            element.focus();
-          }
-        });
-      }
-      /**
-       * Provides the element to move focus from
-       * @returns {Element} Currently highlighted element.
-       */
-
-    }, {
-      key: "_handleKeyPress",
-
-      /**
-       * Handles key press on document.
-       * @param {Event} event The triggering event.
-       * @private
-       */
-      value: function _handleKeyPress(event) {
-        var key = event.which;
-        var element = this.element,
-            optionMenu = this.optionMenu,
-            options = this.options;
-        var isOfMenu = optionMenu && optionMenu.element.contains(event.target);
-        var isExpanded = this.element.classList.contains(this.options.classShown);
-
-        switch (key) {
-          // Esc
-          case 27:
-            this.changeState('hidden', getLaunchingDetails(event), function () {
-              if (isOfMenu) {
-                element.focus();
-              }
-            });
-            break;
-          // Enter || Space bar
-
-          case 13:
-          case 32:
-            {
-              if (!isExpanded && this.element.ownerDocument.activeElement !== this.element) {
-                return;
-              }
-
-              var isOfSelf = element.contains(event.target);
-              var shouldBeOpen = isOfSelf && !element.classList.contains(options.classShown);
-              var state = shouldBeOpen ? 'shown' : 'hidden';
-
-              if (isOfSelf) {
-                event.delegateTarget = element; // eslint-disable-line no-param-reassign
-
-                event.preventDefault(); // prevent scrolling
-
-                this.changeState(state, getLaunchingDetails(event), function () {
-                  if (state === 'hidden' && isOfMenu) {
-                    element.focus();
-                  }
-                });
-              }
-
-              break;
-            }
-
-          case 38: // up arrow
-
-          case 40:
-            // down arrow
-            {
-              if (!isExpanded) {
-                return;
-              }
-
-              event.preventDefault(); // prevent scrolling
-
-              var direction = {
-                38: -1,
-                40: 1
-              }[event.which];
-              this.navigate(direction);
-            }
-            break;
-
-          default:
-            break;
-        }
-      }
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-overflow-menu]',
-          selectorOptionMenu: ".".concat(prefix, "--overflow-menu-options"),
-          selectorItem: "\n        .".concat(prefix, "--overflow-menu-options--open >\n        .").concat(prefix, "--overflow-menu-options__option:not(.").concat(prefix, "--overflow-menu-options__option--disabled) >\n        .").concat(prefix, "--overflow-menu-options__btn\n      "),
-          classShown: "".concat(prefix, "--overflow-menu--open"),
-          classMenuShown: "".concat(prefix, "--overflow-menu-options--open"),
-          classMenuFlip: "".concat(prefix, "--overflow-menu--flip"),
-          objMenuOffset: getMenuOffset,
-          objMenuOffsetFlip: getMenuOffset
-        };
-      }
-    }]);
-
-    return OverflowMenu;
-  }(mixin(createComponent, initComponentBySearch, exports$1, handles));
-
-  _defineProperty(OverflowMenu, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  function initComponentByLauncher (ToMix) {
-    /**
-     * Mix-in class to instantiate components events on launcher button.
-     * @class InitComponentByLauncher
-     */
-    var InitComponentByLauncher =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(InitComponentByLauncher, _ToMix);
-
-      function InitComponentByLauncher() {
-        _classCallCheck(this, InitComponentByLauncher);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentByLauncher).apply(this, arguments));
-      }
-
-      _createClass(InitComponentByLauncher, null, [{
-        key: "init",
-
-        /**
-         * `true` suggests that this component is lazily initialized upon an action/event, etc.
-         * @type {boolean}
-         */
-
-        /**
-         * Instantiates this component in the given element.
-         * If the given element indicates that it's an component of this class, instantiates it.
-         * Otherwise, instantiates this component by clicking on launcher buttons
-         * (buttons with attribute that `options.attribInitTarget` points to) of this component in the given node.
-         * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
-         * @param {Object} [options] The component options.
-         * @param {string} [options.selectorInit] The CSS selector to find this component.
-         * @param {string} [options.attribInitTarget] The attribute name in the launcher buttons to find target component.
-         * @returns {Handle} The handle to remove the event listener to handle clicking.
-         */
-        value: function init() {
-          var _this = this;
-
-          var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          var 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)) {
-            this.create(target, options);
-          } else {
-            var handles = effectiveOptions.initEventNames.map(function (name) {
-              return on(target, name, function (event) {
-                var launcher = eventMatches(event, "[".concat(effectiveOptions.attribInitTarget, "]"));
-
-                if (launcher) {
-                  event.delegateTarget = launcher; // eslint-disable-line no-param-reassign
-
-                  var elements = _toConsumableArray(launcher.ownerDocument.querySelectorAll(launcher.getAttribute(effectiveOptions.attribInitTarget)));
-
-                  if (elements.length > 1) {
-                    throw new Error('Target widget must be unique.');
-                  }
-
-                  if (elements.length === 1) {
-                    if (launcher.tagName === 'A') {
-                      event.preventDefault();
-                    }
-
-                    var component = _this.create(elements[0], options);
-
-                    if (typeof component.createdByLauncher === 'function') {
-                      component.createdByLauncher(event);
-                    }
-                  }
-                }
-              });
-            });
-            return {
-              release: function release() {
-                for (var handle = handles.pop(); handle; handle = handles.pop()) {
-                  handle.release();
-                }
-              }
-            };
-          }
-
-          return '';
-        }
-      }]);
-
-      return InitComponentByLauncher;
-    }(ToMix);
-
-    _defineProperty(InitComponentByLauncher, "forLazyInit",
-    /* #__PURE_CLASS_PROPERTY__ */
-    true);
-
-    return InitComponentByLauncher;
-  }
-
-  var Modal =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Modal, _mixin);
-
-    /**
-     * Modal dialog.
-     * @extends CreateComponent
-     * @extends InitComponentByLauncher
-     * @extends EventedShowHideState
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a modal dialog.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.classVisible] The CSS class for the visible state.
-     * @param {string} [options.eventBeforeShown]
-     *   The name of the custom event fired before this modal is shown.
-     *   Cancellation of this event stops showing the modal.
-     * @param {string} [options.eventAfterShown]
-     *   The name of the custom event telling that modal is sure shown
-     *   without being canceled by the event handler named by `eventBeforeShown` option (`modal-beingshown`).
-     * @param {string} [options.eventBeforeHidden]
-     *   The name of the custom event fired before this modal is hidden.
-     *   Cancellation of this event stops hiding the modal.
-     * @param {string} [options.eventAfterHidden]
-     *   The name of the custom event telling that modal is sure hidden
-     *   without being canceled by the event handler named by `eventBeforeHidden` option (`modal-beinghidden`).
-     */
-    function Modal(element, options) {
-      var _this;
-
-      _classCallCheck(this, Modal);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleFocusinListener", void 0);
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleKeydownListener", void 0);
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleFocusin", function (evt) {
-        if (_this.element.classList.contains(_this.options.classVisible) && !_this.element.contains(evt.target) && _this.options.selectorsFloatingMenus.every(function (selector) {
-          return !eventMatches(evt, selector);
-        })) {
-          _this.element.focus();
-        }
-      });
-
-      _this._hookCloseActions();
-
-      return _this;
-    }
-    /**
-     * The handle for `focusin` event listener.
-     * Used for "focus-wrap" feature.
-     * @type {Handle}
-     * @private
-     */
-
-
-    _createClass(Modal, [{
-      key: "createdByLauncher",
-
-      /**
-       * A method that runs when `.init()` is called from `initComponentByLauncher`.
-       * @param {Event} evt The event fired on the launcher button.
-       */
-      value: function createdByLauncher(evt) {
-        this.show(evt);
-      }
-      /**
-       * Determines whether or not to emit events and callback function when `.changeState()` is called from `eventedState`.
-       * @param {string} state The new state.
-       * @returns {boolean} `true` if the given `state` is different from current state.
-       */
-
-    }, {
-      key: "shouldStateBeChanged",
-      value: function shouldStateBeChanged(state) {
-        if (state === 'shown') {
-          return !this.element.classList.contains(this.options.classVisible);
-        }
-
-        return this.element.classList.contains(this.options.classVisible);
-      }
-      /**
-       * Changes the shown/hidden state.
-       * @private
-       * @param {string} state The new state.
-       * @param {Object} detail The detail data to be included in the event that will be fired.
-       * @param {Function} callback Callback called when change in state completes.
-       */
-
-    }, {
-      key: "_changeState",
-      value: function _changeState(state, detail, callback) {
-        var _this2 = this;
-
-        var handleTransitionEnd;
-
-        var transitionEnd = function transitionEnd() {
-          if (handleTransitionEnd) {
-            handleTransitionEnd = _this2.unmanage(handleTransitionEnd).release();
-          }
-
-          if (state === 'shown' && _this2.element.offsetWidth > 0 && _this2.element.offsetHeight > 0) {
-            (_this2.element.querySelector(_this2.options.selectorPrimaryFocus) || _this2.element).focus();
-          }
-
-          callback();
-        };
-
-        if (this._handleFocusinListener) {
-          this._handleFocusinListener = this.unmanage(this._handleFocusinListener).release();
-        }
-
-        if (state === 'shown') {
-          var hasFocusin = 'onfocusin' in this.element.ownerDocument.defaultView;
-          var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-          this._handleFocusinListener = this.manage(on(this.element.ownerDocument, focusinEventName, this._handleFocusin, !hasFocusin));
-        }
-
-        if (state === 'hidden') {
-          this.element.classList.toggle(this.options.classVisible, false);
-        } else if (state === 'shown') {
-          this.element.classList.toggle(this.options.classVisible, true);
-        }
-
-        handleTransitionEnd = this.manage(on(this.element, 'transitionend', transitionEnd));
-      }
-    }, {
-      key: "_hookCloseActions",
-      value: function _hookCloseActions() {
-        var _this3 = this;
-
-        this.manage(on(this.element, 'click', function (evt) {
-          var closeButton = eventMatches(evt, _this3.options.selectorModalClose);
-
-          if (closeButton) {
-            evt.delegateTarget = closeButton; // eslint-disable-line no-param-reassign
-          }
-
-          if (closeButton || evt.target === _this3.element) {
-            _this3.hide(evt);
-          }
-        }));
-
-        if (this._handleKeydownListener) {
-          this._handleKeydownListener = this.unmanage(this._handleKeydownListener).release();
-        }
-
-        this._handleKeydownListener = this.manage(on(this.element.ownerDocument.body, 'keydown', function (evt) {
-          if (evt.which === 27) {
-            evt.stopPropagation();
-
-            _this3.hide(evt);
-          }
-        }));
-      }
-      /**
-       * Handles `focusin` (or `focus` depending on browser support of `focusin`) event to do wrap-focus behavior.
-       * @param {Event} evt The event.
-       * @private
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode Modal.create .create()}, or {@linkcode Modal.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode Modal.init .init()} works.
-       * @member Modal.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS class to find modal dialogs.
-       * @property {string} [selectorModalClose] The selector to find elements that close the modal.
-       * @property {string} [selectorPrimaryFocus] The CSS selector to determine the element to put focus when modal gets open.
-       * @property {string} attribInitTarget The attribute name in the launcher buttons to find target modal dialogs.
-       * @property {string[]} [selectorsFloatingMenu]
-       *   The CSS selectors of floating menus.
-       *   Used for detecting if focus-wrap behavior should be disabled temporarily.
-       * @property {string} [classVisible] The CSS class for the visible state.
-       * @property {string} [classNoScroll] The CSS class for hiding scroll bar in body element while modal is shown.
-       * @property {string} [eventBeforeShown]
-       *   The name of the custom event fired before this modal is shown.
-       *   Cancellation of this event stops showing the modal.
-       * @property {string} [eventAfterShown]
-       *   The name of the custom event telling that modal is sure shown
-       *   without being canceled by the event handler named by `eventBeforeShown` option (`modal-beingshown`).
-       * @property {string} [eventBeforeHidden]
-       *   The name of the custom event fired before this modal is hidden.
-       *   Cancellation of this event stops hiding the modal.
-       * @property {string} [eventAfterHidden]
-       *   The name of the custom event telling that modal is sure hidden
-       *   without being canceled by the event handler named by `eventBeforeHidden` option (`modal-beinghidden`).
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-modal]',
-          selectorModalClose: '[data-modal-close]',
-          selectorPrimaryFocus: '[data-modal-primary-focus]',
-          selectorsFloatingMenus: [".".concat(prefix, "--overflow-menu-options"), ".".concat(prefix, "--tooltip"), '.flatpickr-calendar'],
-          classVisible: 'is-visible',
-          attribInitTarget: 'data-modal-target',
-          initEventNames: ['click'],
-          eventBeforeShown: 'modal-beingshown',
-          eventAfterShown: 'modal-shown',
-          eventBeforeHidden: 'modal-beinghidden',
-          eventAfterHidden: 'modal-hidden'
-        };
-      }
-    }]);
-
-    return Modal;
-  }(mixin(createComponent, initComponentByLauncher, exports$1, handles));
-
-  _defineProperty(Modal, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Loading =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Loading, _mixin);
-
-    /**
-     * Spinner indicating loading state.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a spinner.
-     * @param {Object} [options] The component options.
-     * @param {boolean} [options.active] `true` if this spinner should roll.
-     */
-    function Loading(element, options) {
-      var _this;
-
-      _classCallCheck(this, Loading);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Loading).call(this, element, options));
-      _this.active = _this.options.active; // Initialize spinner
-
-      _this.set(_this.active);
-
-      return _this;
-    }
-    /**
-     * Sets active/inactive state.
-     * @param {boolean} active `true` if this spinner should roll.
-     */
-
-
-    _createClass(Loading, [{
-      key: "set",
-      value: function set(active) {
-        if (typeof active !== 'boolean') {
-          throw new TypeError('set expects a boolean.');
-        }
-
-        this.active = active;
-        this.element.classList.toggle(this.options.classLoadingStop, !this.active);
-        /**
-         * If overlay is the parentNode then toggle it too.
-         */
-
-        var parentNode = this.element.parentNode;
-
-        if (parentNode && parentNode.classList.contains(this.options.classLoadingOverlay)) {
-          parentNode.classList.toggle(this.options.classLoadingOverlayStop, !this.active);
-        }
-
-        return this;
-      }
-      /**
-       * Toggles active/inactive state.
-       */
-
-    }, {
-      key: "toggle",
-      value: function toggle() {
-        return this.set(!this.active);
-      }
-      /**
-       * @returns {boolean} `true` if this spinner is rolling.
-       */
-
-    }, {
-      key: "isActive",
-      value: function isActive() {
-        return this.active;
-      }
-      /**
-       * Sets state to inactive and deletes the loading element.
-       */
-
-    }, {
-      key: "end",
-      value: function end() {
-        var _this2 = this;
-
-        this.set(false);
-        var handleAnimationEnd = this.manage(on(this.element, 'animationend', function (evt) {
-          if (handleAnimationEnd) {
-            handleAnimationEnd = _this2.unmanage(handleAnimationEnd).release();
-          }
-
-          if (evt.animationName === 'rotate-end-p2') {
-            _this2._deleteElement();
-          }
-        }));
-      }
-      /**
-       * Delete component from the DOM.
-       */
-
-    }, {
-      key: "_deleteElement",
-      value: function _deleteElement() {
-        var parentNode = this.element.parentNode;
-        parentNode.removeChild(this.element);
-
-        if (parentNode.classList.contains(this.options.selectorLoadingOverlay)) {
-          parentNode.remove();
-        }
-      }
-      /**
-       * The map associating DOM element and spinner instance.
-       * @member Loading.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode Loading.init .init()} works.
-       * @member Loading.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find spinners.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-loading]',
-          selectorLoadingOverlay: ".".concat(prefix, "--loading-overlay"),
-          classLoadingOverlay: "".concat(prefix, "--loading-overlay"),
-          classLoadingStop: "".concat(prefix, "--loading--stop"),
-          classLoadingOverlayStop: "".concat(prefix, "--loading-overlay--stop"),
-          active: true
-        };
-      }
-    }]);
-
-    return Loading;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Loading, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * Toggles the given attribute of the given element.
-   * @param {Element} elem The element.
-   * @param {string} name The attribute name.
-   * @param {boolean} add `true` to set the attribute.
-   */
-  function toggleAttribute(elem, name, add) {
-    if (add) {
-      elem.setAttribute(name, '');
-    } else {
-      elem.removeAttribute(name);
-    }
-  }
-
-  var InlineLoading =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(InlineLoading, _mixin);
-
-    /**
-     * Spinner indicating loading state.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a spinner.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.initialState] The initial state, should be `inactive`, `active` or `finished`.
-     */
-    function InlineLoading(element, options) {
-      var _this;
-
-      _classCallCheck(this, InlineLoading);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(InlineLoading).call(this, element, options)); // Sets the initial state
-
-      var initialState = _this.options.initialState;
-
-      if (initialState) {
-        _this.setState(initialState);
-      }
-
-      return _this;
-    }
-    /**
-     * Sets active/inactive state.
-     * @param {string} state The new state, should be `inactive`, `active` or `finished`.
-     */
-
-
-    _createClass(InlineLoading, [{
-      key: "setState",
-      value: function setState(state) {
-        var states = this.constructor.states;
-        var values = Object.keys(states).map(function (key) {
-          return states[key];
-        });
-
-        if (values.indexOf(state) < 0) {
-          throw new Error("One of the following value should be given as the state: ".concat(values.join(', ')));
-        }
-
-        var elem = this.element;
-        var _this$options = this.options,
-            selectorSpinner = _this$options.selectorSpinner,
-            selectorFinished = _this$options.selectorFinished,
-            selectorTextActive = _this$options.selectorTextActive,
-            selectorTextFinished = _this$options.selectorTextFinished;
-        var spinner = elem.querySelector(selectorSpinner);
-        var finished = elem.querySelector(selectorFinished);
-        var textActive = elem.querySelector(selectorTextActive);
-        var textFinished = elem.querySelector(selectorTextFinished);
-
-        if (spinner) {
-          spinner.classList.toggle(this.options.classLoadingStop, state !== states.ACTIVE);
-          toggleAttribute(spinner, 'hidden', state === states.FINISHED);
-        }
-
-        if (finished) {
-          toggleAttribute(finished, 'hidden', state !== states.FINISHED);
-        }
-
-        if (textActive) {
-          toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
-        }
-
-        if (textFinished) {
-          toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
-        }
-
-        return this;
-      }
-      /**
-       * The list of states.
-       * @type {Object<string, string>}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
-       * or {@linkcode InlineLoading.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
-       * @member InlineLoading.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find inline loading components.
-       * @property {string} selectorSpinner The CSS selector to find the spinner.
-       * @property {string} selectorFinished The CSS selector to find the "finished" icon.
-       * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
-       * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
-       * @property {string} classLoadingStop The CSS class for spinner's stopped state.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-inline-loading]',
-          selectorSpinner: '[data-inline-loading-spinner]',
-          selectorFinished: '[data-inline-loading-finished]',
-          selectorTextActive: '[data-inline-loading-text-active]',
-          selectorTextFinished: '[data-inline-loading-text-finished]',
-          classLoadingStop: "".concat(prefix, "--loading--stop")
-        };
-      }
-    }]);
-
-    return InlineLoading;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(InlineLoading, "states",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    INACTIVE: 'inactive',
-    ACTIVE: 'active',
-    FINISHED: 'finished'
-  });
-
-  _defineProperty(InlineLoading, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$3 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var Dropdown =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Dropdown, _mixin);
-
-    /**
-     * A selector with drop downs.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends TrackBlur
-     * @param {HTMLElement} element The element working as a selector.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorItem] The CSS selector to find clickable areas in dropdown items.
-     * @param {string} [options.selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
-     * @param {string} [options.classSelected] The CSS class for the selected dropdown item.
-     * @param {string} [options.classOpen] The CSS class for the open state.
-     * @param {string} [options.classDisabled] The CSS class for the disabled state.
-     * @param {string} [options.eventBeforeSelected]
-     *   The name of the custom event fired before a drop down item is selected.
-     *   Cancellation of this event stops selection of drop down item.
-     * @param {string} [options.eventAfterSelected] The name of the custom event fired after a drop down item is selected.
-     */
-    function Dropdown(element, options) {
-      var _this;
-
-      _classCallCheck(this, Dropdown);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, element, options));
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (event) {
-        _this._toggle(event);
-      }));
-
-      _this.manage(on(_this.element, 'keydown', function (event) {
-        _this._handleKeyDown(event);
-      }));
-
-      _this.manage(on(_this.element, 'click', function (event) {
-        var item = eventMatches(event, _this.options.selectorItem);
-
-        if (item) {
-          _this.select(item);
-        }
-      }));
-
-      return _this;
-    }
-    /**
-     * Handles keydown event.
-     * @param {Event} event The event triggering this method.
-     */
-
-
-    _createClass(Dropdown, [{
-      key: "_handleKeyDown",
-      value: function _handleKeyDown(event) {
-        var isOpen = this.element.classList.contains(this.options.classOpen);
-        var direction = {
-          38: this.constructor.NAVIGATE.BACKWARD,
-          40: this.constructor.NAVIGATE.FORWARD
-        }[event.which];
-
-        if (isOpen && direction !== undefined) {
-          this.navigate(direction);
-          event.preventDefault(); // Prevents up/down keys from scrolling container
-        } else {
-          this._toggle(event);
-        }
-      }
-      /**
-       * Opens and closes the dropdown menu.
-       * @param {Event} [event] The event triggering this method.
-       */
-
-    }, {
-      key: "_toggle",
-      value: function _toggle(event) {
-        var _this2 = this;
-
-        var 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) || event.which === 27 || event.type === 'click') {
-          var isOpen = this.element.classList.contains(this.options.classOpen);
-          var isOfSelf = this.element.contains(event.target);
-          var actions = {
-            add: isOfSelf && event.which === 40 && !isOpen,
-            remove: (!isOfSelf || event.which === 27) && isOpen,
-            toggle: isOfSelf && event.which !== 27 && event.which !== 40
-          };
-          Object.keys(actions).forEach(function (action) {
-            if (actions[action]) {
-              _this2.element.classList[action](_this2.options.classOpen);
-
-              _this2.element.focus();
-            }
-          });
-          var listItems = toArray$3(this.element.querySelectorAll(this.options.selectorItem));
-          listItems.forEach(function (item) {
-            if (_this2.element.classList.contains(_this2.options.classOpen)) {
-              item.tabIndex = 0;
-            } else {
-              item.tabIndex = -1;
-            }
-          });
-        }
-      }
-      /**
-       * @returns {Element} Currently highlighted element.
-       */
-
-    }, {
-      key: "getCurrentNavigation",
-      value: function getCurrentNavigation() {
-        var focused = this.element.ownerDocument.activeElement;
-        return focused.nodeType === Node.ELEMENT_NODE && focused.matches(this.options.selectorItem) ? focused : null;
-      }
-      /**
-       * Moves up/down the focus.
-       * @param {number} direction The direction of navigating.
-       */
-
-    }, {
-      key: "navigate",
-      value: function navigate(direction) {
-        var items = toArray$3(this.element.querySelectorAll(this.options.selectorItem));
-        var start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
-
-        var getNextItem = function getNextItem(old) {
-          var handleUnderflow = function handleUnderflow(i, l) {
-            return i + (i >= 0 ? 0 : l);
-          };
-
-          var handleOverflow = function handleOverflow(i, l) {
-            return i - (i < l ? 0 : l);
-          }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
-
-
-          var index = Math.max(items.indexOf(old) + direction, -1);
-          return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
-        };
-
-        for (var current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
-          if (!current.matches(this.options.selectorItemHidden) && !current.parentNode.matches(this.options.selectorItemHidden) && !current.matches(this.options.selectorItemSelected)) {
-            current.focus();
-            break;
-          }
-        }
-      }
-      /**
-       * Handles clicking on the dropdown options, doing the following:
-       * * Change Dropdown text to selected option.
-       * * Remove selected option from options when selected.
-       * * Emit custom events.
-       * @param {HTMLElement} itemToSelect The element to be activated.
-       */
-
-    }, {
-      key: "select",
-      value: function select(itemToSelect) {
-        var _this3 = this;
-
-        var eventStart = new CustomEvent(this.options.eventBeforeSelected, {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            item: itemToSelect
-          }
-        });
-
-        if (this.element.dispatchEvent(eventStart)) {
-          if (this.element.dataset.dropdownType !== 'navigation') {
-            var selectorText = this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner;
-            var text = this.element.querySelector(selectorText);
-
-            if (text) {
-              text.innerHTML = itemToSelect.innerHTML;
-            }
-
-            itemToSelect.classList.add(this.options.classSelected);
-          }
-
-          this.element.dataset.value = itemToSelect.parentElement.dataset.value;
-          toArray$3(this.element.querySelectorAll(this.options.selectorItemSelected)).forEach(function (item) {
-            if (itemToSelect !== item) {
-              item.classList.remove(_this3.options.classSelected);
-            }
-          });
-          this.element.dispatchEvent(new CustomEvent(this.options.eventAfterSelected, {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-              item: itemToSelect
-            }
-          }));
-        }
-      }
-      /**
-       * Closes the dropdown menu if this component loses focus.
-       */
-
-    }, {
-      key: "handleBlur",
-      value: function handleBlur() {
-        this.element.classList.remove(this.options.classOpen);
-      }
-      /**
-       * The map associating DOM element and selector instance.
-       * @member Dropdown.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode Dropdown.create .create()}, or {@linkcode Dropdown.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode Dropdown.init .init()} works.
-       * @member Dropdown.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find selectors.
-       * @property {string} [selectorText] The CSS selector to find the element showing the selected item.
-       * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode.
-       * @property {string} [selectorItem] The CSS selector to find clickable areas in dropdown items.
-       * @property {string} [selectorItemHidden]
-       *   The CSS selector to find hidden dropdown items.
-       *   Used to skip dropdown items for keyboard navigation.
-       * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
-       * @property {string} [classSelected] The CSS class for the selected dropdown item.
-       * @property {string} [classOpen] The CSS class for the open state.
-       * @property {string} [classDisabled] The CSS class for the disabled state.
-       * @property {string} [eventBeforeSelected]
-       *   The name of the custom event fired before a drop down item is selected.
-       *   Cancellation of this event stops selection of drop down item.
-       * @property {string} [eventAfterSelected] The name of the custom event fired after a drop down item is selected.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-dropdown]',
-          selectorText: ".".concat(prefix, "--dropdown-text"),
-          selectorTextInner: ".".concat(prefix, "--dropdown-text__inner"),
-          selectorItem: ".".concat(prefix, "--dropdown-link"),
-          selectorItemSelected: ".".concat(prefix, "--dropdown--selected"),
-          selectorItemHidden: "[hidden],[aria-hidden=\"true\"]",
-          classSelected: "".concat(prefix, "--dropdown--selected"),
-          classOpen: "".concat(prefix, "--dropdown--open"),
-          classDisabled: "".concat(prefix, "--dropdown--disabled"),
-          eventBeforeSelected: 'dropdown-beingselected',
-          eventAfterSelected: 'dropdown-selected'
-        };
-      }
-      /**
-       * Enum for navigating backward/forward.
-       * @readonly
-       * @member Dropdown.NAVIGATE
-       * @type {Object}
-       * @property {number} BACKWARD Navigating backward.
-       * @property {number} FORWARD Navigating forward.
-       */
-
-    }]);
-
-    return Dropdown;
-  }(mixin(createComponent, initComponentBySearch, exports$2));
-
-  _defineProperty(Dropdown, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(Dropdown, "NAVIGATE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    BACKWARD: -1,
-    FORWARD: 1
-  });
-
-  var NumberInput =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(NumberInput, _mixin);
-
-    /**
-     * Number input UI.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a number input UI.
-     */
-    function NumberInput(element, options) {
-      var _this;
-
-      _classCallCheck(this, NumberInput);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberInput).call(this, element, options)); // Broken DOM tree is seen with up/down arrows <svg> in IE, which breaks event delegation.
-      // <svg> does not have `Element.classList` in IE11
-
-      _this.manage(on(_this.element.querySelector('.up-icon'), 'click', function (event) {
-        _this._handleClick(event);
-      }));
-
-      _this.manage(on(_this.element.querySelector('.down-icon'), 'click', function (event) {
-        _this._handleClick(event);
-      }));
-
-      return _this;
-    }
-    /**
-     * Increase/decrease number by clicking on up/down icons.
-     * @param {Event} event The event triggering this method.
-     */
-
-
-    _createClass(NumberInput, [{
-      key: "_handleClick",
-      value: function _handleClick(event) {
-        var numberInput = this.element.querySelector(this.options.selectorInput);
-        var target = event.currentTarget.getAttribute('class').split(' ');
-
-        if (target.indexOf('up-icon') >= 0) {
-          ++numberInput.value;
-        } else if (target.indexOf('down-icon') >= 0) {
-          --numberInput.value;
-        } // Programmatic change in value (including `stepUp()`/`stepDown()`) won't fire change event
-
-
-        numberInput.dispatchEvent(new CustomEvent('change', {
-          bubbles: true,
-          cancelable: false
-        }));
-      }
-      /**
-       * The map associating DOM element and number input UI instance.
-       * @member NumberInput.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode NumberInput.create .create()}, or {@linkcode NumberInput.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode NumberInput.init .init()} works.
-       * @member NumberInput.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find number input UIs.
-       * @property {string} [selectorInput] The CSS selector to find the `<input>` element.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-numberinput]',
-          selectorInput: ".".concat(prefix, "--number input")
-        };
-      }
-    }]);
-
-    return NumberInput;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(NumberInput, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$4 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var DataTable =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(DataTable, _mixin);
-
-    /**
-     * Data Table
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends EventedState
-     * @extends Handles
-     * @param {HTMLElement} element The root element of tables
-     * @param {Object} [options] the... options
-     * @param {string} [options.selectorInit] selector initialization
-     * @param {string} [options.selectorExpandCells] css selector for expand
-     * @param {string} [options.expandableRow] css selector for expand
-     * @param {string} [options.selectorParentRows] css selector for rows housing expansion
-     * @param {string} [options.selectorTableBody] root css for table body
-     * @param {string} [options.eventTrigger] selector for event bubble capture points
-     * @param {string} [options.eventParentContainer] used find the bubble container
-     */
-    function DataTable(_element, options) {
-      var _this;
-
-      _classCallCheck(this, DataTable);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(DataTable).call(this, _element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleState", function (element, evt) {
-        var data = element.dataset;
-        var label = data.label ? data.label : '';
-        var previousValue = data.previousValue ? data.previousValue : '';
-        var initialEvt = evt;
-
-        _this.changeState({
-          group: data.event,
-          element: element,
-          label: label,
-          previousValue: previousValue,
-          initialEvt: initialEvt
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_zebraStripe", function (parentRows) {
-        parentRows.forEach(function (item, index) {
-          if (index % 2 === 0) {
-            item.classList.add(_this.options.classParentRowEven);
-
-            if (item.nextElementSibling && item.nextElementSibling.classList.contains(_this.options.classExpandableRow)) {
-              item.nextElementSibling.classList.add(_this.options.classExpandableRowEven);
-            }
-          } else {
-            item.classList.remove(_this.options.classParentRowEven);
-          }
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_initExpandableRows", function (expandableRows) {
-        expandableRows.forEach(function (item) {
-          item.classList.remove(_this.options.classExpandableRowHidden);
-
-          _this.tableBody.removeChild(item);
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleRowExpand", function (_ref) {
-        var element = _ref.element,
-            initialEvt = _ref.initialEvt;
-        var parent = eventMatches(initialEvt, _this.options.eventParentContainer);
-
-        var index = _this.expandCells.indexOf(element);
-
-        if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') {
-          element.dataset.previousValue = 'collapsed';
-
-          _this.tableBody.insertBefore(_this.expandableRows[index], _this.parentRows[index + 1]);
-        } else {
-          _this.tableBody.removeChild(parent.nextElementSibling);
-
-          element.dataset.previousValue = 'expanded';
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleSort", function (detail) {
-        var element = detail.element,
-            previousValue = detail.previousValue;
-
-        if (!previousValue || previousValue === 'descending') {
-          element.dataset.previousValue = 'ascending';
-          element.classList.add(_this.options.classTableSortAscending);
-        } else {
-          element.dataset.previousValue = 'descending';
-          element.classList.remove(_this.options.classTableSortAscending);
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleSelectAll", function (detail) {
-        var element = detail.element,
-            previousValue = detail.previousValue;
-        var inputs = toArray$4(_this.element.querySelectorAll(_this.options.selectorCheckbox));
-
-        if (!previousValue || previousValue === 'toggled') {
-          inputs.forEach(function (item) {
-            item.checked = true; // eslint-disable-line no-param-reassign
-          });
-          element.dataset.previousValue = 'off';
-        } else {
-          inputs.forEach(function (item) {
-            item.checked = false; // eslint-disable-line no-param-reassign
-          });
-          element.dataset.previousValue = 'toggled';
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "refreshRows", function () {
-        var newExpandCells = toArray$4(_this.element.querySelectorAll(_this.options.selectorExpandCells));
-        var newExpandableRows = toArray$4(_this.element.querySelectorAll(_this.options.selectorExpandableRows));
-        var newParentRows = toArray$4(_this.element.querySelectorAll(_this.options.selectorParentRows)); // check if this is a refresh or the first time
-
-        if (_this.parentRows.length > 0) {
-          var diffParentRows = newParentRows.filter(function (newRow) {
-            return !_this.parentRows.some(function (oldRow) {
-              return oldRow === newRow;
-            });
-          }); // check if there are expandable rows
-
-          if (newExpandableRows.length > 0) {
-            var diffExpandableRows = diffParentRows.map(function (newRow) {
-              return newRow.nextElementSibling;
-            });
-            var mergedExpandableRows = toArray$4.apply(void 0, [_this.expandableRows].concat(_toConsumableArray(diffExpandableRows)));
-
-            _this._initExpandableRows(diffExpandableRows);
-
-            _this.expandableRows = mergedExpandableRows;
-          }
-
-          _this._zebraStripe(newParentRows);
-        } else {
-          _this._zebraStripe(newParentRows);
-
-          if (newExpandableRows.length > 0) {
-            _this._initExpandableRows(newExpandableRows);
-
-            _this.expandableRows = newExpandableRows;
-          }
-        }
-
-        _this.expandCells = newExpandCells;
-        _this.parentRows = newParentRows;
-      });
-
-      _this.container = _element.parentNode; // requires the immediate parent to be the container
-
-      _this.tableBody = _this.element.querySelector(_this.options.selectorTableBody);
-      _this.expandCells = [];
-      _this.expandableRows = [];
-      _this.parentRows = [];
-      _this.overflowInitialized = false;
-
-      _this.refreshRows();
-
-      _this.manage(on(_this.element, 'click', function (evt) {
-        var eventElement = eventMatches(evt, _this.options.eventTrigger);
-
-        if (eventElement) {
-          _this._toggleState(eventElement, evt);
-        }
-      }));
-
-      _this.manage(on(_this.element, 'keydown', function (evt) {
-        if (evt.which === 13) {
-          var eventElement = eventMatches(evt, _this.options.eventTrigger);
-
-          if (eventElement) {
-            _this._toggleState(eventElement, evt);
-          }
-        }
-      }));
-
-      return _this;
-    }
-    /**
-     * Toggles the given state.
-     * @private
-     * @param {Object} detail The detail of the event trigging this action.
-     * @param {Function} callback Callback called when change in state completes.
-     */
-
-
-    _createClass(DataTable, [{
-      key: "_changeState",
-      value: function _changeState(detail, callback) {
-        this[this.constructor.eventHandlers[detail.group]](detail);
-        callback();
-      }
-      /**
-       * Toggles the state of this component specified by `data-event` attribute of the given element.
-       * @param {HTMLElement} element The element.
-       * @param {Event} evt The event trigging this action.
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-responsive-table]',
-          selectorExpandCells: ".".concat(prefix, "--table-expand"),
-          selectorExpandableRows: ".".concat(prefix, "--expandable-row"),
-          selectorParentRows: ".".concat(prefix, "--parent-row"),
-          selectorTableBody: ".".concat(prefix, "--table-body"),
-          selectorCheckbox: ".".concat(prefix, "--checkbox"),
-          classParentRowEven: "".concat(prefix, "--parent-row--even"),
-          classExpandableRow: "".concat(prefix, "--expandable-row"),
-          classExpandableRowEven: "".concat(prefix, "--expandable-row--even"),
-          classExpandableRowHidden: "".concat(prefix, "--expandable-row--hidden"),
-          classTableSortAscending: "".concat(prefix, "--table-sort--ascending"),
-          eventBeforeExpand: 'responsive-table-beforetoggleexpand',
-          eventAfterExpand: 'responsive-table-aftertoggleexpand',
-          eventBeforeSort: 'responsive-table-beforetogglesort',
-          eventAfterSort: 'responsive-table-aftertogglesort',
-          eventBeforeSelectAll: 'responsive-table-beforetoggleselectall',
-          eventAfterSelectAll: 'responsive-table-aftertoggleselectall',
-          eventTrigger: '[data-event]',
-          eventParentContainer: '[data-parent-row]'
-        };
-      }
-    }]);
-
-    return DataTable;
-  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
-
-  _defineProperty(DataTable, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(DataTable, "eventHandlers",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    expand: '_toggleRowExpand',
-    sort: '_toggleSort',
-    'select-all': '_toggleSelectAll'
-  });
-
-  var dataTable = !breakingChangesX ? DataTable : removedComponent('DataTable');
-
-  var toArray$5 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var DataTableV2 =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(DataTableV2, _mixin);
-
-    /**
-     * Data Table
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends   EventedState
-     * @param {HTMLElement} element The root element of tables
-     * @param {Object} [options] the... options
-     * @param {string} [options.selectorInit] selector initialization
-     * @param {string} [options.selectorExpandCells] css selector for expand
-     * @param {string} [options.expandableRow] css selector for expand
-     * @param {string} [options.selectorParentRows] css selector for rows housing expansion
-     * @param {string} [options.selectorTableBody] root css for table body
-     * @param {string} [options.eventTrigger] selector for event bubble capture points
-     * @param {string} [options.eventParentContainer] used find the bubble container
-     */
-    function DataTableV2(_element, options) {
-      var _this;
-
-      _classCallCheck(this, DataTableV2);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(DataTableV2).call(this, _element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_sortToggle", function (detail) {
-        var element = detail.element,
-            previousValue = detail.previousValue;
-        toArray$5(_this.tableHeaders).forEach(function (header) {
-          var sortEl = header.querySelector(_this.options.selectorTableSort);
-
-          if (sortEl !== null && sortEl !== element) {
-            sortEl.classList.remove(_this.options.classTableSortActive);
-            sortEl.classList.remove(_this.options.classTableSortAscending);
-          }
-        });
-
-        if (!previousValue || previousValue === 'descending') {
-          element.dataset.previousValue = 'ascending';
-          element.classList.add(_this.options.classTableSortActive);
-          element.classList.add(_this.options.classTableSortAscending);
-        } else {
-          element.dataset.previousValue = 'descending';
-          element.classList.add(_this.options.classTableSortActive);
-          element.classList.remove(_this.options.classTableSortAscending);
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_selectToggle", function (detail) {
-        var element = detail.element;
-        var checked = element.checked; // increment the  count
-
-        _this.state.checkboxCount += checked ? 1 : -1;
-        _this.countEl.textContent = _this.state.checkboxCount;
-        var row = element.parentNode.parentNode;
-        row.classList.toggle(_this.options.classTableSelected); // toggle on/off batch action bar
-
-        _this._actionBarToggle(_this.state.checkboxCount > 0);
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_selectAllToggle", function (_ref) {
-        var element = _ref.element;
-        var checked = element.checked;
-        var inputs = toArray$5(_this.element.querySelectorAll(_this.options.selectorCheckbox));
-        _this.state.checkboxCount = checked ? inputs.length - 1 : 0;
-        inputs.forEach(function (item) {
-          item.checked = checked;
-          var row = item.parentNode.parentNode;
-
-          if (checked && row) {
-            row.classList.add(_this.options.classTableSelected);
-          } else {
-            row.classList.remove(_this.options.classTableSelected);
-          }
-        });
-
-        _this._actionBarToggle(_this.state.checkboxCount > 0);
-
-        if (_this.batchActionEl) {
-          _this.countEl.textContent = _this.state.checkboxCount;
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_actionBarCancel", function () {
-        var inputs = toArray$5(_this.element.querySelectorAll(_this.options.selectorCheckbox));
-        var row = toArray$5(_this.element.querySelectorAll(_this.options.selectorTableSelected));
-        row.forEach(function (item) {
-          item.classList.remove(_this.options.classTableSelected);
-        });
-        inputs.forEach(function (item) {
-          item.checked = false;
-        });
-        _this.state.checkboxCount = 0;
-
-        _this._actionBarToggle(false);
-
-        if (_this.batchActionEl) {
-          _this.countEl.textContent = _this.state.checkboxCount;
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_actionBarToggle", function (toggleOn) {
-        var transition = function transition(evt) {
-          _this.batchActionEl.removeEventListener('transitionend', transition);
-
-          if (evt.target.matches(_this.options.selectorActions)) {
-            if (_this.batchActionEl.dataset.active === 'false') {
-              _this.batchActionEl.setAttribute('tabIndex', -1);
-            } else {
-              _this.batchActionEl.setAttribute('tabIndex', 0);
-            }
-          }
-        };
-
-        if (toggleOn) {
-          _this.batchActionEl.dataset.active = true;
-
-          _this.batchActionEl.classList.add(_this.options.classActionBarActive);
-        } else if (_this.batchActionEl) {
-          _this.batchActionEl.dataset.active = false;
-
-          _this.batchActionEl.classList.remove(_this.options.classActionBarActive);
-        }
-
-        if (_this.batchActionEl) {
-          _this.batchActionEl.addEventListener('transitionend', transition);
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_expandableRowsInit", function (expandableRows) {
-        expandableRows.forEach(function (item) {
-          item.classList.remove(_this.options.classExpandableRowHidden);
-
-          _this.tableBody.removeChild(item);
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_rowExpandToggle", function (_ref2) {
-        var element = _ref2.element,
-            initialEvt = _ref2.initialEvt;
-        var parent = eventMatches(initialEvt, _this.options.eventParentContainer);
-
-        var index = _this.expandCells.indexOf(element);
-
-        if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') {
-          element.dataset.previousValue = 'collapsed';
-          parent.classList.add(_this.options.classExpandableRow);
-
-          _this.tableBody.insertBefore(_this.expandableRows[index], _this.parentRows[index + 1]);
-        } else {
-          parent.classList.remove(_this.options.classExpandableRow);
-
-          _this.tableBody.removeChild(parent.nextElementSibling);
-
-          element.dataset.previousValue = 'expanded';
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_expandableHoverToggle", function (element) {
-        element.previousElementSibling.classList.add(_this.options.classExpandableRowHover);
-
-        var mouseout = function mouseout() {
-          element.previousElementSibling.classList.remove(_this.options.classExpandableRowHover);
-          element.removeEventListener('mouseout', mouseout);
-        };
-
-        element.addEventListener('mouseout', mouseout);
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleState", function (element, evt) {
-        var data = element.dataset;
-        var label = data.label ? data.label : '';
-        var previousValue = data.previousValue ? data.previousValue : '';
-        var initialEvt = evt;
-
-        _this.changeState({
-          group: data.event,
-          element: element,
-          label: label,
-          previousValue: previousValue,
-          initialEvt: initialEvt
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_keydownHandler", function (evt) {
-        if (evt.which === 27) {
-          _this._actionBarCancel();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "refreshRows", function () {
-        var newExpandCells = toArray$5(_this.element.querySelectorAll(_this.options.selectorExpandCells));
-        var newExpandableRows = toArray$5(_this.element.querySelectorAll(_this.options.selectorExpandableRows));
-        var newParentRows = toArray$5(_this.element.querySelectorAll(_this.options.selectorParentRows)); // check if this is a refresh or the first time
-
-        if (_this.parentRows.length > 0) {
-          var diffParentRows = newParentRows.filter(function (newRow) {
-            return !_this.parentRows.some(function (oldRow) {
-              return oldRow === newRow;
-            });
-          }); // check if there are expandable rows
-
-          if (newExpandableRows.length > 0) {
-            var diffExpandableRows = diffParentRows.map(function (newRow) {
-              return newRow.nextElementSibling;
-            });
-            var mergedExpandableRows = [].concat(_toConsumableArray(toArray$5(_this.expandableRows)), _toConsumableArray(toArray$5(diffExpandableRows)));
-
-            _this._expandableRowsInit(diffExpandableRows);
-
-            _this.expandableRows = mergedExpandableRows;
-          }
-        } else if (newExpandableRows.length > 0) {
-          _this._expandableRowsInit(newExpandableRows);
-
-          _this.expandableRows = newExpandableRows;
-        }
-
-        _this.expandCells = newExpandCells;
-        _this.parentRows = newParentRows;
-      });
-
-      _this.container = _element.parentNode;
-      _this.toolbarEl = _this.element.querySelector(_this.options.selectorToolbar);
-      _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.tableHeaders = _this.element.querySelectorAll('th');
-      _this.tableBody = _this.element.querySelector(_this.options.selectorTableBody);
-      _this.expandCells = [];
-      _this.expandableRows = [];
-      _this.parentRows = [];
-
-      _this.refreshRows();
-
-      _this.element.addEventListener('mouseover', function (evt) {
-        var eventElement = eventMatches(evt, _this.options.selectorChildRow);
-
-        if (eventElement) {
-          _this._expandableHoverToggle(eventElement, true);
-        }
-      });
-
-      _this.element.addEventListener('click', function (evt) {
-        var eventElement = eventMatches(evt, _this.options.eventTrigger);
-
-        if (eventElement) {
-          _this._toggleState(eventElement, evt);
-        }
-      });
-
-      _this.element.addEventListener('keydown', _this._keydownHandler);
-
-      _this.state = {
-        checkboxCount: 0
-      };
-      return _this;
-    }
-
-    _createClass(DataTableV2, [{
-      key: "_changeState",
-      value: function _changeState(detail, callback) {
-        this[this.constructor.eventHandlers[detail.group]](detail);
-        callback();
-      }
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-table-v2]',
-          selectorToolbar: ".".concat(prefix, "--table--toolbar"),
-          selectorActions: ".".concat(prefix, "--batch-actions"),
-          selectorCount: '[data-items-selected]',
-          selectorActionCancel: ".".concat(prefix, "--batch-summary__cancel"),
-          selectorCheckbox: ".".concat(prefix, "--checkbox"),
-          selectorExpandCells: ".".concat(prefix, "--table-expand-v2"),
-          selectorExpandableRows: ".".concat(prefix, "--expandable-row-v2"),
-          selectorParentRows: ".".concat(prefix, "--parent-row-v2"),
-          selectorChildRow: '[data-child-row]',
-          selectorTableBody: 'tbody',
-          selectorTableSort: ".".concat(prefix, "--table-sort-v2"),
-          selectorTableSelected: ".".concat(prefix, "--data-table-v2--selected"),
-          classExpandableRow: "".concat(prefix, "--expandable-row-v2"),
-          classExpandableRowHidden: "".concat(prefix, "--expandable-row--hidden-v2"),
-          classExpandableRowHover: "".concat(prefix, "--expandable-row--hover-v2"),
-          classTableSortAscending: "".concat(prefix, "--table-sort-v2--ascending"),
-          classTableSortActive: "".concat(prefix, "--table-sort-v2--active"),
-          classActionBarActive: "".concat(prefix, "--batch-actions--active"),
-          classTableSelected: "".concat(prefix, "--data-table-v2--selected"),
-          eventBeforeExpand: 'data-table-v2-beforetoggleexpand',
-          eventAfterExpand: 'data-table-v2-aftertoggleexpand',
-          eventBeforeSort: 'data-table-v2-beforetogglesort',
-          eventAfterSort: 'data-table-v2-aftertogglesort',
-          eventTrigger: '[data-event]',
-          eventParentContainer: '[data-parent-row]'
-        };
-      }
-    }]);
-
-    return DataTableV2;
-  }(mixin(createComponent, initComponentBySearch, eventedState));
-
-  _defineProperty(DataTableV2, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(DataTableV2, "eventHandlers",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    expand: '_rowExpandToggle',
-    sort: '_sortToggle',
-    select: '_selectToggle',
-    'select-all': '_selectAllToggle',
-    'action-bar-cancel': '_actionBarCancel'
-  });
-
-  var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
-  var flatpickr = createCommonjsModule(function (module, exports) {
-  /* flatpickr v4.5.2, @license MIT */
-  (function (global, factory) {
-      module.exports = factory();
-  }(commonjsGlobal, (function () {
-      var pad = function pad(number) {
-        return ("0" + number).slice(-2);
-      };
-      var int = function int(bool) {
-        return bool === true ? 1 : 0;
-      };
-      function debounce(func, wait, immediate) {
-        if (immediate === void 0) {
-          immediate = false;
-        }
-
-        var timeout;
-        return function () {
-          var context = this,
-              args = arguments;
-          timeout !== null && clearTimeout(timeout);
-          timeout = window.setTimeout(function () {
-            timeout = null;
-            if (!immediate) func.apply(context, args);
-          }, wait);
-          if (immediate && !timeout) func.apply(context, args);
-        };
-      }
-      var arrayify = function arrayify(obj) {
-        return obj instanceof Array ? obj : [obj];
-      };
-
-      var do_nothing = function do_nothing() {
-        return undefined;
-      };
-
-      var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
-        return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber];
-      };
-      var revFormat = {
-        D: do_nothing,
-        F: function F(dateObj, monthName, locale) {
-          dateObj.setMonth(locale.months.longhand.indexOf(monthName));
-        },
-        G: function G(dateObj, hour) {
-          dateObj.setHours(parseFloat(hour));
-        },
-        H: function H(dateObj, hour) {
-          dateObj.setHours(parseFloat(hour));
-        },
-        J: function J(dateObj, day) {
-          dateObj.setDate(parseFloat(day));
-        },
-        K: function K(dateObj, amPM, locale) {
-          dateObj.setHours(dateObj.getHours() % 12 + 12 * int(new RegExp(locale.amPM[1], "i").test(amPM)));
-        },
-        M: function M(dateObj, shortMonth, locale) {
-          dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
-        },
-        S: function S(dateObj, seconds) {
-          dateObj.setSeconds(parseFloat(seconds));
-        },
-        U: function U(_, unixSeconds) {
-          return new Date(parseFloat(unixSeconds) * 1000);
-        },
-        W: function W(dateObj, weekNum) {
-          var weekNumber = parseInt(weekNum);
-          return new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
-        },
-        Y: function Y(dateObj, year) {
-          dateObj.setFullYear(parseFloat(year));
-        },
-        Z: function Z(_, ISODate) {
-          return new Date(ISODate);
-        },
-        d: function d(dateObj, day) {
-          dateObj.setDate(parseFloat(day));
-        },
-        h: function h(dateObj, hour) {
-          dateObj.setHours(parseFloat(hour));
-        },
-        i: function i(dateObj, minutes) {
-          dateObj.setMinutes(parseFloat(minutes));
-        },
-        j: function j(dateObj, day) {
-          dateObj.setDate(parseFloat(day));
-        },
-        l: do_nothing,
-        m: function m(dateObj, month) {
-          dateObj.setMonth(parseFloat(month) - 1);
-        },
-        n: function n(dateObj, month) {
-          dateObj.setMonth(parseFloat(month) - 1);
-        },
-        s: function s(dateObj, seconds) {
-          dateObj.setSeconds(parseFloat(seconds));
-        },
-        w: do_nothing,
-        y: function y(dateObj, year) {
-          dateObj.setFullYear(2000 + parseFloat(year));
-        }
-      };
-      var tokenRegex = {
-        D: "(\\w+)",
-        F: "(\\w+)",
-        G: "(\\d\\d|\\d)",
-        H: "(\\d\\d|\\d)",
-        J: "(\\d\\d|\\d)\\w+",
-        K: "",
-        M: "(\\w+)",
-        S: "(\\d\\d|\\d)",
-        U: "(.+)",
-        W: "(\\d\\d|\\d)",
-        Y: "(\\d{4})",
-        Z: "(.+)",
-        d: "(\\d\\d|\\d)",
-        h: "(\\d\\d|\\d)",
-        i: "(\\d\\d|\\d)",
-        j: "(\\d\\d|\\d)",
-        l: "(\\w+)",
-        m: "(\\d\\d|\\d)",
-        n: "(\\d\\d|\\d)",
-        s: "(\\d\\d|\\d)",
-        w: "(\\d\\d|\\d)",
-        y: "(\\d{2})"
-      };
-      var formats = {
-        Z: function Z(date) {
-          return date.toISOString();
-        },
-        D: function D(date, locale, options) {
-          return locale.weekdays.shorthand[formats.w(date, locale, options)];
-        },
-        F: function F(date, locale, options) {
-          return monthToStr(formats.n(date, locale, options) - 1, false, locale);
-        },
-        G: function G(date, locale, options) {
-          return pad(formats.h(date, locale, options));
-        },
-        H: function H(date) {
-          return pad(date.getHours());
-        },
-        J: function J(date, locale) {
-          return locale.ordinal !== undefined ? date.getDate() + locale.ordinal(date.getDate()) : date.getDate();
-        },
-        K: function K(date, locale) {
-          return locale.amPM[int(date.getHours() > 11)];
-        },
-        M: function M(date, locale) {
-          return monthToStr(date.getMonth(), true, locale);
-        },
-        S: function S(date) {
-          return pad(date.getSeconds());
-        },
-        U: function U(date) {
-          return date.getTime() / 1000;
-        },
-        W: function W(date, _, options) {
-          return options.getWeek(date);
-        },
-        Y: function Y(date) {
-          return date.getFullYear();
-        },
-        d: function d(date) {
-          return pad(date.getDate());
-        },
-        h: function h(date) {
-          return date.getHours() % 12 ? date.getHours() % 12 : 12;
-        },
-        i: function i(date) {
-          return pad(date.getMinutes());
-        },
-        j: function j(date) {
-          return date.getDate();
-        },
-        l: function l(date, locale) {
-          return locale.weekdays.longhand[date.getDay()];
-        },
-        m: function m(date) {
-          return pad(date.getMonth() + 1);
-        },
-        n: function n(date) {
-          return date.getMonth() + 1;
-        },
-        s: function s(date) {
-          return date.getSeconds();
-        },
-        w: function w(date) {
-          return date.getDay();
-        },
-        y: function y(date) {
-          return String(date.getFullYear()).substring(2);
-        }
-      };
-
-      var english = {
-        weekdays: {
-          shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-          longhand: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
-        },
-        months: {
-          shorthand: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-          longhand: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-        },
-        daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
-        firstDayOfWeek: 0,
-        ordinal: function ordinal(nth) {
-          var s = nth % 100;
-          if (s > 3 && s < 21) return "th";
-
-          switch (s % 10) {
-            case 1:
-              return "st";
-
-            case 2:
-              return "nd";
-
-            case 3:
-              return "rd";
-
-            default:
-              return "th";
-          }
-        },
-        rangeSeparator: " to ",
-        weekAbbreviation: "Wk",
-        scrollTitle: "Scroll to increment",
-        toggleTitle: "Click to toggle",
-        amPM: ["AM", "PM"],
-        yearAriaLabel: "Year"
-      };
-
-      var createDateFormatter = function createDateFormatter(_ref) {
-        var _ref$config = _ref.config,
-            config = _ref$config === void 0 ? defaults : _ref$config,
-            _ref$l10n = _ref.l10n,
-            l10n = _ref$l10n === void 0 ? english : _ref$l10n;
-        return function (dateObj, frmt, overrideLocale) {
-          var locale = overrideLocale || l10n;
-
-          if (config.formatDate !== undefined) {
-            return config.formatDate(dateObj, frmt, locale);
-          }
-
-          return frmt.split("").map(function (c, i, arr) {
-            return formats[c] && arr[i - 1] !== "\\" ? formats[c](dateObj, locale, config) : c !== "\\" ? c : "";
-          }).join("");
-        };
-      };
-      var createDateParser = function createDateParser(_ref2) {
-        var _ref2$config = _ref2.config,
-            config = _ref2$config === void 0 ? defaults : _ref2$config,
-            _ref2$l10n = _ref2.l10n,
-            l10n = _ref2$l10n === void 0 ? english : _ref2$l10n;
-        return function (date, givenFormat, timeless, customLocale) {
-          if (date !== 0 && !date) return undefined;
-          var locale = customLocale || l10n;
-          var parsedDate;
-          var date_orig = date;
-          if (date instanceof Date) parsedDate = new Date(date.getTime());else if (typeof date !== "string" && date.toFixed !== undefined) parsedDate = new Date(date);else if (typeof date === "string") {
-            var format = givenFormat || (config || defaults).dateFormat;
-            var datestr = String(date).trim();
-
-            if (datestr === "today") {
-              parsedDate = new Date();
-              timeless = true;
-            } else if (/Z$/.test(datestr) || /GMT$/.test(datestr)) parsedDate = new Date(date);else if (config && config.parseDate) parsedDate = config.parseDate(date, format);else {
-              parsedDate = !config || !config.noCalendar ? new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0) : new Date(new Date().setHours(0, 0, 0, 0));
-              var matched,
-                  ops = [];
-
-              for (var i = 0, matchIndex = 0, regexStr = ""; i < format.length; i++) {
-                var token = format[i];
-                var isBackSlash = token === "\\";
-                var escaped = format[i - 1] === "\\" || isBackSlash;
-
-                if (tokenRegex[token] && !escaped) {
-                  regexStr += tokenRegex[token];
-                  var match = new RegExp(regexStr).exec(date);
-
-                  if (match && (matched = true)) {
-                    ops[token !== "Y" ? "push" : "unshift"]({
-                      fn: revFormat[token],
-                      val: match[++matchIndex]
-                    });
-                  }
-                } else if (!isBackSlash) regexStr += ".";
-
-                ops.forEach(function (_ref3) {
-                  var fn = _ref3.fn,
-                      val = _ref3.val;
-                  return parsedDate = fn(parsedDate, val, locale) || parsedDate;
-                });
-              }
-
-              parsedDate = matched ? parsedDate : undefined;
-            }
-          }
-
-          if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
-            config.errorHandler(new Error("Invalid date provided: " + date_orig));
-            return undefined;
-          }
-
-          if (timeless === true) parsedDate.setHours(0, 0, 0, 0);
-          return parsedDate;
-        };
-      };
-      function compareDates(date1, date2, timeless) {
-        if (timeless === void 0) {
-          timeless = true;
-        }
-
-        if (timeless !== false) {
-          return new Date(date1.getTime()).setHours(0, 0, 0, 0) - new Date(date2.getTime()).setHours(0, 0, 0, 0);
-        }
-
-        return date1.getTime() - date2.getTime();
-      }
-      var getWeek = function getWeek(givenDate) {
-        var date = new Date(givenDate.getTime());
-        date.setHours(0, 0, 0, 0);
-        date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
-        var week1 = new Date(date.getFullYear(), 0, 4);
-        return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
-      };
-      var isBetween = function isBetween(ts, ts1, ts2) {
-        return ts > Math.min(ts1, ts2) && ts < Math.max(ts1, ts2);
-      };
-      var duration = {
-        DAY: 86400000
-      };
-
-      var HOOKS = ["onChange", "onClose", "onDayCreate", "onDestroy", "onKeyDown", "onMonthChange", "onOpen", "onParseConfig", "onReady", "onValueUpdate", "onYearChange", "onPreCalendarPosition"];
-      var defaults = {
-        _disable: [],
-        _enable: [],
-        allowInput: false,
-        altFormat: "F j, Y",
-        altInput: false,
-        altInputClass: "form-control input",
-        animate: typeof window === "object" && window.navigator.userAgent.indexOf("MSIE") === -1,
-        ariaDateFormat: "F j, Y",
-        clickOpens: true,
-        closeOnSelect: true,
-        conjunction: ", ",
-        dateFormat: "Y-m-d",
-        defaultHour: 12,
-        defaultMinute: 0,
-        defaultSeconds: 0,
-        disable: [],
-        disableMobile: false,
-        enable: [],
-        enableSeconds: false,
-        enableTime: false,
-        errorHandler: function errorHandler(err) {
-          return typeof console !== "undefined" && console.warn(err);
-        },
-        getWeek: getWeek,
-        hourIncrement: 1,
-        ignoredFocusElements: [],
-        inline: false,
-        locale: "default",
-        minuteIncrement: 5,
-        mode: "single",
-        nextArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",
-        noCalendar: false,
-        now: new Date(),
-        onChange: [],
-        onClose: [],
-        onDayCreate: [],
-        onDestroy: [],
-        onKeyDown: [],
-        onMonthChange: [],
-        onOpen: [],
-        onParseConfig: [],
-        onReady: [],
-        onValueUpdate: [],
-        onYearChange: [],
-        onPreCalendarPosition: [],
-        plugins: [],
-        position: "auto",
-        positionElement: undefined,
-        prevArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",
-        shorthandCurrentMonth: false,
-        showMonths: 1,
-        static: false,
-        time_24hr: false,
-        weekNumbers: false,
-        wrap: false
-      };
-
-      function toggleClass(elem, className, bool) {
-        if (bool === true) return elem.classList.add(className);
-        elem.classList.remove(className);
-      }
-      function createElement(tag, className, content) {
-        var e = window.document.createElement(tag);
-        className = className || "";
-        content = content || "";
-        e.className = className;
-        if (content !== undefined) e.textContent = content;
-        return e;
-      }
-      function clearNode(node) {
-        while (node.firstChild) {
-          node.removeChild(node.firstChild);
-        }
-      }
-      function findParent(node, condition) {
-        if (condition(node)) return node;else if (node.parentNode) return findParent(node.parentNode, condition);
-        return undefined;
-      }
-      function createNumberInput(inputClassName, opts) {
-        var wrapper = createElement("div", "numInputWrapper"),
-            numInput = createElement("input", "numInput " + inputClassName),
-            arrowUp = createElement("span", "arrowUp"),
-            arrowDown = createElement("span", "arrowDown");
-        numInput.type = "text";
-        numInput.pattern = "\\d*";
-        if (opts !== undefined) for (var key in opts) {
-          numInput.setAttribute(key, opts[key]);
-        }
-        wrapper.appendChild(numInput);
-        wrapper.appendChild(arrowUp);
-        wrapper.appendChild(arrowDown);
-        return wrapper;
-      }
-
-      if (typeof Object.assign !== "function") {
-        Object.assign = function (target) {
-          if (!target) {
-            throw TypeError("Cannot convert undefined or null to object");
-          }
-
-          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
-          }
-
-          var _loop = function _loop() {
-            var source = args[_i];
-
-            if (source) {
-              Object.keys(source).forEach(function (key) {
-                return target[key] = source[key];
-              });
-            }
-          };
-
-          for (var _i = 0; _i < args.length; _i++) {
-            _loop();
-          }
-
-          return target;
-        };
-      }
-
-      var DEBOUNCED_CHANGE_MS = 300;
-
-      function FlatpickrInstance(element, instanceConfig) {
-        var self = {
-          config: Object.assign({}, flatpickr.defaultConfig),
-          l10n: english
-        };
-        self.parseDate = createDateParser({
-          config: self.config,
-          l10n: self.l10n
-        });
-        self._handlers = [];
-        self._bind = bind;
-        self._setHoursFromDate = setHoursFromDate;
-        self._positionCalendar = positionCalendar;
-        self.changeMonth = changeMonth;
-        self.changeYear = changeYear;
-        self.clear = clear;
-        self.close = close;
-        self._createElement = createElement;
-        self.destroy = destroy;
-        self.isEnabled = isEnabled;
-        self.jumpToDate = jumpToDate;
-        self.open = open;
-        self.redraw = redraw;
-        self.set = set;
-        self.setDate = setDate;
-        self.toggle = toggle;
-
-        function setupHelperFunctions() {
-          self.utils = {
-            getDaysInMonth: function getDaysInMonth(month, yr) {
-              if (month === void 0) {
-                month = self.currentMonth;
-              }
-
-              if (yr === void 0) {
-                yr = self.currentYear;
-              }
-
-              if (month === 1 && (yr % 4 === 0 && yr % 100 !== 0 || yr % 400 === 0)) return 29;
-              return self.l10n.daysInMonth[month];
-            }
-          };
-        }
-
-        function init() {
-          self.element = self.input = element;
-          self.isOpen = false;
-          parseConfig();
-          setupLocale();
-          setupInputs();
-          setupDates();
-          setupHelperFunctions();
-          if (!self.isMobile) build();
-          bindEvents();
-
-          if (self.selectedDates.length || self.config.noCalendar) {
-            if (self.config.enableTime) {
-              setHoursFromDate(self.config.noCalendar ? self.latestSelectedDateObj || self.config.minDate : undefined);
-            }
-
-            updateValue(false);
-          }
-
-          setCalendarWidth();
-          self.showTimeInput = self.selectedDates.length > 0 || self.config.noCalendar;
-          var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
-          if (!self.isMobile && isSafari) {
-            positionCalendar();
-          }
-
-          triggerEvent("onReady");
-        }
-
-        function bindToInstance(fn) {
-          return fn.bind(self);
-        }
-
-        function setCalendarWidth() {
-          var config = self.config;
-          if (config.weekNumbers === false && config.showMonths === 1) return;else if (config.noCalendar !== true) {
-            window.requestAnimationFrame(function () {
-              self.calendarContainer.style.visibility = "hidden";
-              self.calendarContainer.style.display = "block";
-
-              if (self.daysContainer !== undefined) {
-                var daysWidth = (self.days.offsetWidth + 1) * config.showMonths;
-                self.daysContainer.style.width = daysWidth + "px";
-                self.calendarContainer.style.width = daysWidth + (self.weekWrapper !== undefined ? self.weekWrapper.offsetWidth : 0) + "px";
-                self.calendarContainer.style.removeProperty("visibility");
-                self.calendarContainer.style.removeProperty("display");
-              }
-            });
-          }
-        }
-
-        function updateTime(e) {
-          if (self.selectedDates.length === 0) return;
-
-          if (e !== undefined && e.type !== "blur") {
-            timeWrapper(e);
-          }
-
-          var prevValue = self._input.value;
-          setHoursFromInputs();
-          updateValue();
-
-          if (self._input.value !== prevValue) {
-            self._debouncedChange();
-          }
-        }
-
-        function ampm2military(hour, amPM) {
-          return hour % 12 + 12 * int(amPM === self.l10n.amPM[1]);
-        }
-
-        function military2ampm(hour) {
-          switch (hour % 24) {
-            case 0:
-            case 12:
-              return 12;
-
-            default:
-              return hour % 12;
-          }
-        }
-
-        function setHoursFromInputs() {
-          if (self.hourElement === undefined || self.minuteElement === undefined) return;
-          var hours = (parseInt(self.hourElement.value.slice(-2), 10) || 0) % 24,
-              minutes = (parseInt(self.minuteElement.value, 10) || 0) % 60,
-              seconds = self.secondElement !== undefined ? (parseInt(self.secondElement.value, 10) || 0) % 60 : 0;
-
-          if (self.amPM !== undefined) {
-            hours = ampm2military(hours, self.amPM.textContent);
-          }
-
-          var limitMinHours = self.config.minTime !== undefined || self.config.minDate && self.minDateHasTime && self.latestSelectedDateObj && compareDates(self.latestSelectedDateObj, self.config.minDate, true) === 0;
-          var limitMaxHours = self.config.maxTime !== undefined || self.config.maxDate && self.maxDateHasTime && self.latestSelectedDateObj && compareDates(self.latestSelectedDateObj, self.config.maxDate, true) === 0;
-
-          if (limitMaxHours) {
-            var maxTime = self.config.maxTime !== undefined ? self.config.maxTime : self.config.maxDate;
-            hours = Math.min(hours, maxTime.getHours());
-            if (hours === maxTime.getHours()) minutes = Math.min(minutes, maxTime.getMinutes());
-            if (minutes === maxTime.getMinutes()) seconds = Math.min(seconds, maxTime.getSeconds());
-          }
-
-          if (limitMinHours) {
-            var minTime = self.config.minTime !== undefined ? self.config.minTime : self.config.minDate;
-            hours = Math.max(hours, minTime.getHours());
-            if (hours === minTime.getHours()) minutes = Math.max(minutes, minTime.getMinutes());
-            if (minutes === minTime.getMinutes()) seconds = Math.max(seconds, minTime.getSeconds());
-          }
-
-          setHours(hours, minutes, seconds);
-        }
-
-        function setHoursFromDate(dateObj) {
-          var date = dateObj || self.latestSelectedDateObj;
-          if (date) setHours(date.getHours(), date.getMinutes(), date.getSeconds());
-        }
-
-        function setDefaultHours() {
-          var hours = self.config.defaultHour;
-          var minutes = self.config.defaultMinute;
-          var seconds = self.config.defaultSeconds;
-
-          if (self.config.minDate !== undefined) {
-            var min_hr = self.config.minDate.getHours();
-            var min_minutes = self.config.minDate.getMinutes();
-            hours = Math.max(hours, min_hr);
-            if (hours === min_hr) minutes = Math.max(min_minutes, minutes);
-            if (hours === min_hr && minutes === min_minutes) seconds = self.config.minDate.getSeconds();
-          }
-
-          if (self.config.maxDate !== undefined) {
-            var max_hr = self.config.maxDate.getHours();
-            var max_minutes = self.config.maxDate.getMinutes();
-            hours = Math.min(hours, max_hr);
-            if (hours === max_hr) minutes = Math.min(max_minutes, minutes);
-            if (hours === max_hr && minutes === max_minutes) seconds = self.config.maxDate.getSeconds();
-          }
-
-          setHours(hours, minutes, seconds);
-        }
-
-        function setHours(hours, minutes, seconds) {
-          if (self.latestSelectedDateObj !== undefined) {
-            self.latestSelectedDateObj.setHours(hours % 24, minutes, seconds || 0, 0);
-          }
-
-          if (!self.hourElement || !self.minuteElement || self.isMobile) return;
-          self.hourElement.value = pad(!self.config.time_24hr ? (12 + hours) % 12 + 12 * int(hours % 12 === 0) : hours);
-          self.minuteElement.value = pad(minutes);
-          if (self.amPM !== undefined) self.amPM.textContent = self.l10n.amPM[int(hours >= 12)];
-          if (self.secondElement !== undefined) self.secondElement.value = pad(seconds);
-        }
-
-        function onYearInput(event) {
-          var year = parseInt(event.target.value) + (event.delta || 0);
-
-          if (year / 1000 > 1 || event.key === "Enter" && !/[^\d]/.test(year.toString())) {
-            changeYear(year);
-          }
-        }
-
-        function bind(element, event, handler, options) {
-          if (event instanceof Array) return event.forEach(function (ev) {
-            return bind(element, ev, handler, options);
-          });
-          if (element instanceof Array) return element.forEach(function (el) {
-            return bind(el, event, handler, options);
-          });
-          element.addEventListener(event, handler, options);
-
-          self._handlers.push({
-            element: element,
-            event: event,
-            handler: handler,
-            options: options
-          });
-        }
-
-        function onClick(handler) {
-          return function (evt) {
-            evt.which === 1 && handler(evt);
-          };
-        }
-
-        function triggerChange() {
-          triggerEvent("onChange");
-        }
-
-        function bindEvents() {
-          if (self.config.wrap) {
-            ["open", "close", "toggle", "clear"].forEach(function (evt) {
-              Array.prototype.forEach.call(self.element.querySelectorAll("[data-" + evt + "]"), function (el) {
-                return bind(el, "click", self[evt]);
-              });
-            });
-          }
-
-          if (self.isMobile) {
-            setupMobile();
-            return;
-          }
-
-          var debouncedResize = debounce(onResize, 50);
-          self._debouncedChange = debounce(triggerChange, DEBOUNCED_CHANGE_MS);
-          if (self.daysContainer && !/iPhone|iPad|iPod/i.test(navigator.userAgent)) bind(self.daysContainer, "mouseover", function (e) {
-            if (self.config.mode === "range") onMouseOver(e.target);
-          });
-          bind(window.document.body, "keydown", onKeyDown);
-          if (!self.config.static) bind(self._input, "keydown", onKeyDown);
-          if (!self.config.inline && !self.config.static) bind(window, "resize", debouncedResize);
-          if (window.ontouchstart !== undefined) bind(window.document, "click", documentClick);else bind(window.document, "mousedown", onClick(documentClick));
-          bind(window.document, "focus", documentClick, {
-            capture: true
-          });
-
-          if (self.config.clickOpens === true) {
-            bind(self._input, "focus", self.open);
-            bind(self._input, "mousedown", onClick(self.open));
-          }
-
-          if (self.daysContainer !== undefined) {
-            bind(self.monthNav, "mousedown", onClick(onMonthNavClick));
-            bind(self.monthNav, ["keyup", "increment"], onYearInput);
-            bind(self.daysContainer, "mousedown", onClick(selectDate));
-          }
-
-          if (self.timeContainer !== undefined && self.minuteElement !== undefined && self.hourElement !== undefined) {
-            var selText = function selText(e) {
-              return e.target.select();
-            };
-
-            bind(self.timeContainer, ["increment"], updateTime);
-            bind(self.timeContainer, "blur", updateTime, {
-              capture: true
-            });
-            bind(self.timeContainer, "mousedown", onClick(timeIncrement));
-            bind([self.hourElement, self.minuteElement], ["focus", "click"], selText);
-            if (self.secondElement !== undefined) bind(self.secondElement, "focus", function () {
-              return self.secondElement && self.secondElement.select();
-            });
-
-            if (self.amPM !== undefined) {
-              bind(self.amPM, "mousedown", onClick(function (e) {
-                updateTime(e);
-                triggerChange();
-              }));
-            }
-          }
-        }
-
-        function jumpToDate(jumpDate) {
-          var jumpTo = jumpDate !== undefined ? self.parseDate(jumpDate) : self.latestSelectedDateObj || (self.config.minDate && self.config.minDate > self.now ? self.config.minDate : self.config.maxDate && self.config.maxDate < self.now ? self.config.maxDate : self.now);
-
-          try {
-            if (jumpTo !== undefined) {
-              self.currentYear = jumpTo.getFullYear();
-              self.currentMonth = jumpTo.getMonth();
-            }
-          } catch (e) {
-            e.message = "Invalid date supplied: " + jumpTo;
-            self.config.errorHandler(e);
-          }
-
-          self.redraw();
-        }
-
-        function timeIncrement(e) {
-          if (~e.target.className.indexOf("arrow")) incrementNumInput(e, e.target.classList.contains("arrowUp") ? 1 : -1);
-        }
-
-        function incrementNumInput(e, delta, inputElem) {
-          var target = e && e.target;
-          var input = inputElem || target && target.parentNode && target.parentNode.firstChild;
-          var event = createEvent("increment");
-          event.delta = delta;
-          input && input.dispatchEvent(event);
-        }
-
-        function build() {
-          var fragment = window.document.createDocumentFragment();
-          self.calendarContainer = createElement("div", "flatpickr-calendar");
-          self.calendarContainer.tabIndex = -1;
-
-          if (!self.config.noCalendar) {
-            fragment.appendChild(buildMonthNav());
-            self.innerContainer = createElement("div", "flatpickr-innerContainer");
-
-            if (self.config.weekNumbers) {
-              var _buildWeeks = buildWeeks(),
-                  weekWrapper = _buildWeeks.weekWrapper,
-                  weekNumbers = _buildWeeks.weekNumbers;
-
-              self.innerContainer.appendChild(weekWrapper);
-              self.weekNumbers = weekNumbers;
-              self.weekWrapper = weekWrapper;
-            }
-
-            self.rContainer = createElement("div", "flatpickr-rContainer");
-            self.rContainer.appendChild(buildWeekdays());
-
-            if (!self.daysContainer) {
-              self.daysContainer = createElement("div", "flatpickr-days");
-              self.daysContainer.tabIndex = -1;
-            }
-
-            buildDays();
-            self.rContainer.appendChild(self.daysContainer);
-            self.innerContainer.appendChild(self.rContainer);
-            fragment.appendChild(self.innerContainer);
-          }
-
-          if (self.config.enableTime) {
-            fragment.appendChild(buildTime());
-          }
-
-          toggleClass(self.calendarContainer, "rangeMode", self.config.mode === "range");
-          toggleClass(self.calendarContainer, "animate", self.config.animate === true);
-          toggleClass(self.calendarContainer, "multiMonth", self.config.showMonths > 1);
-          self.calendarContainer.appendChild(fragment);
-          var customAppend = self.config.appendTo !== undefined && self.config.appendTo.nodeType !== undefined;
-
-          if (self.config.inline || self.config.static) {
-            self.calendarContainer.classList.add(self.config.inline ? "inline" : "static");
-
-            if (self.config.inline) {
-              if (!customAppend && self.element.parentNode) self.element.parentNode.insertBefore(self.calendarContainer, self._input.nextSibling);else if (self.config.appendTo !== undefined) self.config.appendTo.appendChild(self.calendarContainer);
-            }
-
-            if (self.config.static) {
-              var wrapper = createElement("div", "flatpickr-wrapper");
-              if (self.element.parentNode) self.element.parentNode.insertBefore(wrapper, self.element);
-              wrapper.appendChild(self.element);
-              if (self.altInput) wrapper.appendChild(self.altInput);
-              wrapper.appendChild(self.calendarContainer);
-            }
-          }
-
-          if (!self.config.static && !self.config.inline) (self.config.appendTo !== undefined ? self.config.appendTo : window.document.body).appendChild(self.calendarContainer);
-        }
-
-        function createDay(className, date, dayNumber, i) {
-          var dateIsEnabled = isEnabled(date, true),
-              dayElement = createElement("span", "flatpickr-day " + className, date.getDate().toString());
-          dayElement.dateObj = date;
-          dayElement.$i = i;
-          dayElement.setAttribute("aria-label", self.formatDate(date, self.config.ariaDateFormat));
-
-          if (className.indexOf("hidden") === -1 && compareDates(date, self.now) === 0) {
-            self.todayDateElem = dayElement;
-            dayElement.classList.add("today");
-            dayElement.setAttribute("aria-current", "date");
-          }
-
-          if (dateIsEnabled) {
-            dayElement.tabIndex = -1;
-
-            if (isDateSelected(date)) {
-              dayElement.classList.add("selected");
-              self.selectedDateElem = dayElement;
-
-              if (self.config.mode === "range") {
-                toggleClass(dayElement, "startRange", self.selectedDates[0] && compareDates(date, self.selectedDates[0], true) === 0);
-                toggleClass(dayElement, "endRange", self.selectedDates[1] && compareDates(date, self.selectedDates[1], true) === 0);
-                if (className === "nextMonthDay") dayElement.classList.add("inRange");
-              }
-            }
-          } else {
-            dayElement.classList.add("disabled");
-          }
-
-          if (self.config.mode === "range") {
-            if (isDateInRange(date) && !isDateSelected(date)) dayElement.classList.add("inRange");
-          }
-
-          if (self.weekNumbers && self.config.showMonths === 1 && className !== "prevMonthDay" && dayNumber % 7 === 1) {
-            self.weekNumbers.insertAdjacentHTML("beforeend", "<span class='flatpickr-day'>" + self.config.getWeek(date) + "</span>");
-          }
-
-          triggerEvent("onDayCreate", dayElement);
-          return dayElement;
-        }
-
-        function focusOnDayElem(targetNode) {
-          targetNode.focus();
-          if (self.config.mode === "range") onMouseOver(targetNode);
-        }
-
-        function getFirstAvailableDay(delta) {
-          var startMonth = delta > 0 ? 0 : self.config.showMonths - 1;
-          var endMonth = delta > 0 ? self.config.showMonths : -1;
-
-          for (var m = startMonth; m != endMonth; m += delta) {
-            var month = self.daysContainer.children[m];
-            var startIndex = delta > 0 ? 0 : month.children.length - 1;
-            var endIndex = delta > 0 ? month.children.length : -1;
-
-            for (var i = startIndex; i != endIndex; i += delta) {
-              var c = month.children[i];
-              if (c.className.indexOf("hidden") === -1 && isEnabled(c.dateObj)) return c;
-            }
-          }
-
-          return undefined;
-        }
-
-        function getNextAvailableDay(current, delta) {
-          var givenMonth = current.className.indexOf("Month") === -1 ? current.dateObj.getMonth() : self.currentMonth;
-          var endMonth = delta > 0 ? self.config.showMonths : -1;
-          var loopDelta = delta > 0 ? 1 : -1;
-
-          for (var m = givenMonth - self.currentMonth; m != endMonth; m += loopDelta) {
-            var month = self.daysContainer.children[m];
-            var startIndex = givenMonth - self.currentMonth === m ? current.$i + delta : delta < 0 ? month.children.length - 1 : 0;
-            var numMonthDays = month.children.length;
-
-            for (var i = startIndex; i >= 0 && i < numMonthDays && i != (delta > 0 ? numMonthDays : -1); i += loopDelta) {
-              var c = month.children[i];
-              if (c.className.indexOf("hidden") === -1 && isEnabled(c.dateObj) && Math.abs(current.$i - i) >= Math.abs(delta)) return focusOnDayElem(c);
-            }
-          }
-
-          self.changeMonth(loopDelta);
-          focusOnDay(getFirstAvailableDay(loopDelta), 0);
-          return undefined;
-        }
-
-        function focusOnDay(current, offset) {
-          var dayFocused = isInView(document.activeElement || document.body);
-          var startElem = current !== undefined ? current : dayFocused ? document.activeElement : self.selectedDateElem !== undefined && isInView(self.selectedDateElem) ? self.selectedDateElem : self.todayDateElem !== undefined && isInView(self.todayDateElem) ? self.todayDateElem : getFirstAvailableDay(offset > 0 ? 1 : -1);
-          if (startElem === undefined) return self._input.focus();
-          if (!dayFocused) return focusOnDayElem(startElem);
-          getNextAvailableDay(startElem, offset);
-        }
-
-        function buildMonthDays(year, month) {
-          var firstOfMonth = (new Date(year, month, 1).getDay() - self.l10n.firstDayOfWeek + 7) % 7;
-          var prevMonthDays = self.utils.getDaysInMonth((month - 1 + 12) % 12);
-          var daysInMonth = self.utils.getDaysInMonth(month),
-              days = window.document.createDocumentFragment(),
-              isMultiMonth = self.config.showMonths > 1,
-              prevMonthDayClass = isMultiMonth ? "prevMonthDay hidden" : "prevMonthDay",
-              nextMonthDayClass = isMultiMonth ? "nextMonthDay hidden" : "nextMonthDay";
-          var dayNumber = prevMonthDays + 1 - firstOfMonth,
-              dayIndex = 0;
-
-          for (; dayNumber <= prevMonthDays; dayNumber++, dayIndex++) {
-            days.appendChild(createDay(prevMonthDayClass, new Date(year, month - 1, dayNumber), dayNumber, dayIndex));
-          }
-
-          for (dayNumber = 1; dayNumber <= daysInMonth; dayNumber++, dayIndex++) {
-            days.appendChild(createDay("", new Date(year, month, dayNumber), dayNumber, dayIndex));
-          }
-
-          for (var dayNum = daysInMonth + 1; dayNum <= 42 - firstOfMonth && (self.config.showMonths === 1 || dayIndex % 7 !== 0); dayNum++, dayIndex++) {
-            days.appendChild(createDay(nextMonthDayClass, new Date(year, month + 1, dayNum % daysInMonth), dayNum, dayIndex));
-          }
-
-          var dayContainer = createElement("div", "dayContainer");
-          dayContainer.appendChild(days);
-          return dayContainer;
-        }
-
-        function buildDays() {
-          if (self.daysContainer === undefined) {
-            return;
-          }
-
-          clearNode(self.daysContainer);
-          if (self.weekNumbers) clearNode(self.weekNumbers);
-          var frag = document.createDocumentFragment();
-
-          for (var i = 0; i < self.config.showMonths; i++) {
-            var d = new Date(self.currentYear, self.currentMonth, 1);
-            d.setMonth(self.currentMonth + i);
-            frag.appendChild(buildMonthDays(d.getFullYear(), d.getMonth()));
-          }
-
-          self.daysContainer.appendChild(frag);
-          self.days = self.daysContainer.firstChild;
-
-          if (self.config.mode === "range" && self.selectedDates.length === 1) {
-            onMouseOver();
-          }
-        }
-
-        function buildMonth() {
-          var container = createElement("div", "flatpickr-month");
-          var monthNavFragment = window.document.createDocumentFragment();
-          var monthElement = createElement("span", "cur-month");
-          var yearInput = createNumberInput("cur-year", {
-            tabindex: "-1"
-          });
-          var yearElement = yearInput.getElementsByTagName("input")[0];
-          yearElement.setAttribute("aria-label", self.l10n.yearAriaLabel);
-          if (self.config.minDate) yearElement.setAttribute("data-min", self.config.minDate.getFullYear().toString());
-
-          if (self.config.maxDate) {
-            yearElement.setAttribute("data-max", self.config.maxDate.getFullYear().toString());
-            yearElement.disabled = !!self.config.minDate && self.config.minDate.getFullYear() === self.config.maxDate.getFullYear();
-          }
-
-          var currentMonth = createElement("div", "flatpickr-current-month");
-          currentMonth.appendChild(monthElement);
-          currentMonth.appendChild(yearInput);
-          monthNavFragment.appendChild(currentMonth);
-          container.appendChild(monthNavFragment);
-          return {
-            container: container,
-            yearElement: yearElement,
-            monthElement: monthElement
-          };
-        }
-
-        function buildMonths() {
-          clearNode(self.monthNav);
-          self.monthNav.appendChild(self.prevMonthNav);
-
-          for (var m = self.config.showMonths; m--;) {
-            var month = buildMonth();
-            self.yearElements.push(month.yearElement);
-            self.monthElements.push(month.monthElement);
-            self.monthNav.appendChild(month.container);
-          }
-
-          self.monthNav.appendChild(self.nextMonthNav);
-        }
-
-        function buildMonthNav() {
-          self.monthNav = createElement("div", "flatpickr-months");
-          self.yearElements = [];
-          self.monthElements = [];
-          self.prevMonthNav = createElement("span", "flatpickr-prev-month");
-          self.prevMonthNav.innerHTML = self.config.prevArrow;
-          self.nextMonthNav = createElement("span", "flatpickr-next-month");
-          self.nextMonthNav.innerHTML = self.config.nextArrow;
-          buildMonths();
-          Object.defineProperty(self, "_hidePrevMonthArrow", {
-            get: function get() {
-              return self.__hidePrevMonthArrow;
-            },
-            set: function set(bool) {
-              if (self.__hidePrevMonthArrow !== bool) {
-                toggleClass(self.prevMonthNav, "disabled", bool);
-                self.__hidePrevMonthArrow = bool;
-              }
-            }
-          });
-          Object.defineProperty(self, "_hideNextMonthArrow", {
-            get: function get() {
-              return self.__hideNextMonthArrow;
-            },
-            set: function set(bool) {
-              if (self.__hideNextMonthArrow !== bool) {
-                toggleClass(self.nextMonthNav, "disabled", bool);
-                self.__hideNextMonthArrow = bool;
-              }
-            }
-          });
-          self.currentYearElement = self.yearElements[0];
-          updateNavigationCurrentMonth();
-          return self.monthNav;
-        }
-
-        function buildTime() {
-          self.calendarContainer.classList.add("hasTime");
-          if (self.config.noCalendar) self.calendarContainer.classList.add("noCalendar");
-          self.timeContainer = createElement("div", "flatpickr-time");
-          self.timeContainer.tabIndex = -1;
-          var separator = createElement("span", "flatpickr-time-separator", ":");
-          var hourInput = createNumberInput("flatpickr-hour");
-          self.hourElement = hourInput.getElementsByTagName("input")[0];
-          var minuteInput = createNumberInput("flatpickr-minute");
-          self.minuteElement = minuteInput.getElementsByTagName("input")[0];
-          self.hourElement.tabIndex = self.minuteElement.tabIndex = -1;
-          self.hourElement.value = pad(self.latestSelectedDateObj ? self.latestSelectedDateObj.getHours() : self.config.time_24hr ? self.config.defaultHour : military2ampm(self.config.defaultHour));
-          self.minuteElement.value = pad(self.latestSelectedDateObj ? self.latestSelectedDateObj.getMinutes() : self.config.defaultMinute);
-          self.hourElement.setAttribute("data-step", self.config.hourIncrement.toString());
-          self.minuteElement.setAttribute("data-step", self.config.minuteIncrement.toString());
-          self.hourElement.setAttribute("data-min", self.config.time_24hr ? "0" : "1");
-          self.hourElement.setAttribute("data-max", self.config.time_24hr ? "23" : "12");
-          self.minuteElement.setAttribute("data-min", "0");
-          self.minuteElement.setAttribute("data-max", "59");
-          self.timeContainer.appendChild(hourInput);
-          self.timeContainer.appendChild(separator);
-          self.timeContainer.appendChild(minuteInput);
-          if (self.config.time_24hr) self.timeContainer.classList.add("time24hr");
-
-          if (self.config.enableSeconds) {
-            self.timeContainer.classList.add("hasSeconds");
-            var secondInput = createNumberInput("flatpickr-second");
-            self.secondElement = secondInput.getElementsByTagName("input")[0];
-            self.secondElement.value = pad(self.latestSelectedDateObj ? self.latestSelectedDateObj.getSeconds() : self.config.defaultSeconds);
-            self.secondElement.setAttribute("data-step", self.minuteElement.getAttribute("data-step"));
-            self.secondElement.setAttribute("data-min", self.minuteElement.getAttribute("data-min"));
-            self.secondElement.setAttribute("data-max", self.minuteElement.getAttribute("data-max"));
-            self.timeContainer.appendChild(createElement("span", "flatpickr-time-separator", ":"));
-            self.timeContainer.appendChild(secondInput);
-          }
-
-          if (!self.config.time_24hr) {
-            self.amPM = createElement("span", "flatpickr-am-pm", self.l10n.amPM[int((self.latestSelectedDateObj ? self.hourElement.value : self.config.defaultHour) > 11)]);
-            self.amPM.title = self.l10n.toggleTitle;
-            self.amPM.tabIndex = -1;
-            self.timeContainer.appendChild(self.amPM);
-          }
-
-          return self.timeContainer;
-        }
-
-        function buildWeekdays() {
-          if (!self.weekdayContainer) self.weekdayContainer = createElement("div", "flatpickr-weekdays");else clearNode(self.weekdayContainer);
-
-          for (var i = self.config.showMonths; i--;) {
-            var container = createElement("div", "flatpickr-weekdaycontainer");
-            self.weekdayContainer.appendChild(container);
-          }
-
-          updateWeekdays();
-          return self.weekdayContainer;
-        }
-
-        function updateWeekdays() {
-          var firstDayOfWeek = self.l10n.firstDayOfWeek;
-          var weekdays = self.l10n.weekdays.shorthand.concat();
-
-          if (firstDayOfWeek > 0 && firstDayOfWeek < weekdays.length) {
-            weekdays = weekdays.splice(firstDayOfWeek, weekdays.length).concat(weekdays.splice(0, firstDayOfWeek));
-          }
-
-          for (var i = self.config.showMonths; i--;) {
-            self.weekdayContainer.children[i].innerHTML = "\n      <span class=flatpickr-weekday>\n        " + weekdays.join("</span><span class=flatpickr-weekday>") + "\n      </span>\n      ";
-          }
-        }
-
-        function buildWeeks() {
-          self.calendarContainer.classList.add("hasWeeks");
-          var weekWrapper = createElement("div", "flatpickr-weekwrapper");
-          weekWrapper.appendChild(createElement("span", "flatpickr-weekday", self.l10n.weekAbbreviation));
-          var weekNumbers = createElement("div", "flatpickr-weeks");
-          weekWrapper.appendChild(weekNumbers);
-          return {
-            weekWrapper: weekWrapper,
-            weekNumbers: weekNumbers
-          };
-        }
-
-        function changeMonth(value, is_offset) {
-          if (is_offset === void 0) {
-            is_offset = true;
-          }
-
-          var delta = is_offset ? value : value - self.currentMonth;
-          if (delta < 0 && self._hidePrevMonthArrow === true || delta > 0 && self._hideNextMonthArrow === true) return;
-          self.currentMonth += delta;
-
-          if (self.currentMonth < 0 || self.currentMonth > 11) {
-            self.currentYear += self.currentMonth > 11 ? 1 : -1;
-            self.currentMonth = (self.currentMonth + 12) % 12;
-            triggerEvent("onYearChange");
-          }
-
-          buildDays();
-          triggerEvent("onMonthChange");
-          updateNavigationCurrentMonth();
-        }
-
-        function clear(triggerChangeEvent) {
-          if (triggerChangeEvent === void 0) {
-            triggerChangeEvent = true;
-          }
-
-          self.input.value = "";
-          if (self.altInput !== undefined) self.altInput.value = "";
-          if (self.mobileInput !== undefined) self.mobileInput.value = "";
-          self.selectedDates = [];
-          self.latestSelectedDateObj = undefined;
-          self.showTimeInput = false;
-
-          if (self.config.enableTime === true) {
-            setDefaultHours();
-          }
-
-          self.redraw();
-          if (triggerChangeEvent) triggerEvent("onChange");
-        }
-
-        function close() {
-          self.isOpen = false;
-
-          if (!self.isMobile) {
-            self.calendarContainer.classList.remove("open");
-
-            self._input.classList.remove("active");
-          }
-
-          triggerEvent("onClose");
-        }
-
-        function destroy() {
-          if (self.config !== undefined) triggerEvent("onDestroy");
-
-          for (var i = self._handlers.length; i--;) {
-            var h = self._handlers[i];
-            h.element.removeEventListener(h.event, h.handler, h.options);
-          }
-
-          self._handlers = [];
-
-          if (self.mobileInput) {
-            if (self.mobileInput.parentNode) self.mobileInput.parentNode.removeChild(self.mobileInput);
-            self.mobileInput = undefined;
-          } else if (self.calendarContainer && self.calendarContainer.parentNode) {
-            if (self.config.static && self.calendarContainer.parentNode) {
-              var wrapper = self.calendarContainer.parentNode;
-              wrapper.lastChild && wrapper.removeChild(wrapper.lastChild);
-
-              if (wrapper.parentNode) {
-                while (wrapper.firstChild) {
-                  wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
-                }
-
-                wrapper.parentNode.removeChild(wrapper);
-              }
-            } else self.calendarContainer.parentNode.removeChild(self.calendarContainer);
-          }
-
-          if (self.altInput) {
-            self.input.type = "text";
-            if (self.altInput.parentNode) self.altInput.parentNode.removeChild(self.altInput);
-            delete self.altInput;
-          }
-
-          if (self.input) {
-            self.input.type = self.input._type;
-            self.input.classList.remove("flatpickr-input");
-            self.input.removeAttribute("readonly");
-            self.input.value = "";
-          }
-
-          ["_showTimeInput", "latestSelectedDateObj", "_hideNextMonthArrow", "_hidePrevMonthArrow", "__hideNextMonthArrow", "__hidePrevMonthArrow", "isMobile", "isOpen", "selectedDateElem", "minDateHasTime", "maxDateHasTime", "days", "daysContainer", "_input", "_positionElement", "innerContainer", "rContainer", "monthNav", "todayDateElem", "calendarContainer", "weekdayContainer", "prevMonthNav", "nextMonthNav", "currentMonthElement", "currentYearElement", "navigationCurrentMonth", "selectedDateElem", "config"].forEach(function (k) {
-            try {
-              delete self[k];
-            } catch (_) {}
-          });
-        }
-
-        function isCalendarElem(elem) {
-          if (self.config.appendTo && self.config.appendTo.contains(elem)) return true;
-          return self.calendarContainer.contains(elem);
-        }
-
-        function documentClick(e) {
-          if (self.isOpen && !self.config.inline) {
-            var isCalendarElement = isCalendarElem(e.target);
-            var isInput = e.target === self.input || e.target === self.altInput || self.element.contains(e.target) || e.path && e.path.indexOf && (~e.path.indexOf(self.input) || ~e.path.indexOf(self.altInput));
-            var lostFocus = e.type === "blur" ? isInput && e.relatedTarget && !isCalendarElem(e.relatedTarget) : !isInput && !isCalendarElement;
-            var isIgnored = !self.config.ignoredFocusElements.some(function (elem) {
-              return elem.contains(e.target);
-            });
-
-            if (lostFocus && isIgnored) {
-              self.close();
-
-              if (self.config.mode === "range" && self.selectedDates.length === 1) {
-                self.clear(false);
-                self.redraw();
-              }
-            }
-          }
-        }
-
-        function changeYear(newYear) {
-          if (!newYear || self.config.minDate && newYear < self.config.minDate.getFullYear() || self.config.maxDate && newYear > self.config.maxDate.getFullYear()) return;
-          var newYearNum = newYear,
-              isNewYear = self.currentYear !== newYearNum;
-          self.currentYear = newYearNum || self.currentYear;
-
-          if (self.config.maxDate && self.currentYear === self.config.maxDate.getFullYear()) {
-            self.currentMonth = Math.min(self.config.maxDate.getMonth(), self.currentMonth);
-          } else if (self.config.minDate && self.currentYear === self.config.minDate.getFullYear()) {
-            self.currentMonth = Math.max(self.config.minDate.getMonth(), self.currentMonth);
-          }
-
-          if (isNewYear) {
-            self.redraw();
-            triggerEvent("onYearChange");
-          }
-        }
-
-        function isEnabled(date, timeless) {
-          if (timeless === void 0) {
-            timeless = true;
-          }
-
-          var dateToCheck = self.parseDate(date, undefined, timeless);
-          if (self.config.minDate && dateToCheck && compareDates(dateToCheck, self.config.minDate, timeless !== undefined ? timeless : !self.minDateHasTime) < 0 || self.config.maxDate && dateToCheck && compareDates(dateToCheck, self.config.maxDate, timeless !== undefined ? timeless : !self.maxDateHasTime) > 0) return false;
-          if (self.config.enable.length === 0 && self.config.disable.length === 0) return true;
-          if (dateToCheck === undefined) return false;
-          var bool = self.config.enable.length > 0,
-              array = bool ? self.config.enable : self.config.disable;
-
-          for (var i = 0, d; i < array.length; i++) {
-            d = array[i];
-            if (typeof d === "function" && d(dateToCheck)) return bool;else if (d instanceof Date && dateToCheck !== undefined && d.getTime() === dateToCheck.getTime()) return bool;else if (typeof d === "string" && dateToCheck !== undefined) {
-              var parsed = self.parseDate(d, undefined, true);
-              return parsed && parsed.getTime() === dateToCheck.getTime() ? bool : !bool;
-            } else if (typeof d === "object" && dateToCheck !== undefined && d.from && d.to && dateToCheck.getTime() >= d.from.getTime() && dateToCheck.getTime() <= d.to.getTime()) return bool;
-          }
-
-          return !bool;
-        }
-
-        function isInView(elem) {
-          if (self.daysContainer !== undefined) return elem.className.indexOf("hidden") === -1 && self.daysContainer.contains(elem);
-          return false;
-        }
-
-        function onKeyDown(e) {
-          var isInput = e.target === self._input;
-          var allowInput = self.config.allowInput;
-          var allowKeydown = self.isOpen && (!allowInput || !isInput);
-          var allowInlineKeydown = self.config.inline && isInput && !allowInput;
-
-          if (e.keyCode === 13 && isInput) {
-            if (allowInput) {
-              self.setDate(self._input.value, true, e.target === self.altInput ? self.config.altFormat : self.config.dateFormat);
-              return e.target.blur();
-            } else self.open();
-          } else if (isCalendarElem(e.target) || allowKeydown || allowInlineKeydown) {
-            var isTimeObj = !!self.timeContainer && self.timeContainer.contains(e.target);
-
-            switch (e.keyCode) {
-              case 13:
-                if (isTimeObj) updateTime();else selectDate(e);
-                break;
-
-              case 27:
-                e.preventDefault();
-                focusAndClose();
-                break;
-
-              case 8:
-              case 46:
-                if (isInput && !self.config.allowInput) {
-                  e.preventDefault();
-                  self.clear();
-                }
-
-                break;
-
-              case 37:
-              case 39:
-                if (!isTimeObj) {
-                  e.preventDefault();
-
-                  if (self.daysContainer !== undefined && (allowInput === false || isInView(document.activeElement))) {
-                    var _delta = e.keyCode === 39 ? 1 : -1;
-
-                    if (!e.ctrlKey) focusOnDay(undefined, _delta);else {
-                      changeMonth(_delta);
-                      focusOnDay(getFirstAvailableDay(1), 0);
-                    }
-                  }
-                } else if (self.hourElement) self.hourElement.focus();
-
-                break;
-
-              case 38:
-              case 40:
-                e.preventDefault();
-                var delta = e.keyCode === 40 ? 1 : -1;
-
-                if (self.daysContainer && e.target.$i !== undefined) {
-                  if (e.ctrlKey) {
-                    changeYear(self.currentYear - delta);
-                    focusOnDay(getFirstAvailableDay(1), 0);
-                  } else if (!isTimeObj) focusOnDay(undefined, delta * 7);
-                } else if (self.config.enableTime) {
-                  if (!isTimeObj && self.hourElement) self.hourElement.focus();
-                  updateTime(e);
-
-                  self._debouncedChange();
-                }
-
-                break;
-
-              case 9:
-                if (!isTimeObj) {
-                  self.element.focus();
-                  break;
-                }
-
-                var elems = [self.hourElement, self.minuteElement, self.secondElement, self.amPM].filter(function (x) {
-                  return x;
-                });
-                var i = elems.indexOf(e.target);
-
-                if (i !== -1) {
-                  var target = elems[i + (e.shiftKey ? -1 : 1)];
-
-                  if (target !== undefined) {
-                    e.preventDefault();
-                    target.focus();
-                  } else {
-                    self.element.focus();
-                  }
-                }
-
-                break;
-
-              default:
-                break;
-            }
-          }
-
-          if (self.amPM !== undefined && e.target === self.amPM) {
-            switch (e.key) {
-              case self.l10n.amPM[0].charAt(0):
-              case self.l10n.amPM[0].charAt(0).toLowerCase():
-                self.amPM.textContent = self.l10n.amPM[0];
-                setHoursFromInputs();
-                updateValue();
-                break;
-
-              case self.l10n.amPM[1].charAt(0):
-              case self.l10n.amPM[1].charAt(0).toLowerCase():
-                self.amPM.textContent = self.l10n.amPM[1];
-                setHoursFromInputs();
-                updateValue();
-                break;
-            }
-          }
-
-          triggerEvent("onKeyDown", e);
-        }
-
-        function onMouseOver(elem) {
-          if (self.selectedDates.length !== 1 || elem && (!elem.classList.contains("flatpickr-day") || elem.classList.contains("disabled"))) return;
-          var hoverDate = elem ? elem.dateObj.getTime() : self.days.firstElementChild.dateObj.getTime(),
-              initialDate = self.parseDate(self.selectedDates[0], undefined, true).getTime(),
-              rangeStartDate = Math.min(hoverDate, self.selectedDates[0].getTime()),
-              rangeEndDate = Math.max(hoverDate, self.selectedDates[0].getTime()),
-              lastDate = self.daysContainer.lastChild.lastChild.dateObj.getTime();
-          var containsDisabled = false;
-          var minRange = 0,
-              maxRange = 0;
-
-          for (var t = rangeStartDate; t < lastDate; t += duration.DAY) {
-            if (!isEnabled(new Date(t), true)) {
-              containsDisabled = containsDisabled || t > rangeStartDate && t < rangeEndDate;
-              if (t < initialDate && (!minRange || t > minRange)) minRange = t;else if (t > initialDate && (!maxRange || t < maxRange)) maxRange = t;
-            }
-          }
-
-          for (var m = 0; m < self.config.showMonths; m++) {
-            var month = self.daysContainer.children[m];
-            var prevMonth = self.daysContainer.children[m - 1];
-
-            var _loop = function _loop(i, l) {
-              var dayElem = month.children[i],
-                  date = dayElem.dateObj;
-              var timestamp = date.getTime();
-              var outOfRange = minRange > 0 && timestamp < minRange || maxRange > 0 && timestamp > maxRange;
-
-              if (outOfRange) {
-                dayElem.classList.add("notAllowed");
-                ["inRange", "startRange", "endRange"].forEach(function (c) {
-                  dayElem.classList.remove(c);
-                });
-                return "continue";
-              } else if (containsDisabled && !outOfRange) return "continue";
-
-              ["startRange", "inRange", "endRange", "notAllowed"].forEach(function (c) {
-                dayElem.classList.remove(c);
-              });
-
-              if (elem !== undefined) {
-                elem.classList.add(hoverDate < self.selectedDates[0].getTime() ? "startRange" : "endRange");
-
-                if (month.contains(elem) || !(m > 0 && prevMonth && prevMonth.lastChild.dateObj.getTime() >= timestamp)) {
-                  if (initialDate < hoverDate && timestamp === initialDate) dayElem.classList.add("startRange");else if (initialDate > hoverDate && timestamp === initialDate) dayElem.classList.add("endRange");
-                  if (timestamp >= minRange && (maxRange === 0 || timestamp <= maxRange) && isBetween(timestamp, initialDate, hoverDate)) dayElem.classList.add("inRange");
-                }
-              }
-            };
-
-            for (var i = 0, l = month.children.length; i < l; i++) {
-              var _ret = _loop(i, l);
-
-              if (_ret === "continue") continue;
-            }
-          }
-        }
-
-        function onResize() {
-          if (self.isOpen && !self.config.static && !self.config.inline) positionCalendar();
-        }
-
-        function open(e, positionElement) {
-          if (positionElement === void 0) {
-            positionElement = self._positionElement;
-          }
-
-          if (self.isMobile === true) {
-            if (e) {
-              e.preventDefault();
-              e.target && e.target.blur();
-            }
-
-            if (self.mobileInput !== undefined) {
-              self.mobileInput.focus();
-              self.mobileInput.click();
-            }
-
-            triggerEvent("onOpen");
-            return;
-          }
-
-          if (self._input.disabled || self.config.inline) return;
-          var wasOpen = self.isOpen;
-          self.isOpen = true;
-
-          if (!wasOpen) {
-            self.calendarContainer.classList.add("open");
-
-            self._input.classList.add("active");
-
-            triggerEvent("onOpen");
-            positionCalendar(positionElement);
-          }
-
-          if (self.config.enableTime === true && self.config.noCalendar === true) {
-            if (self.selectedDates.length === 0) {
-              self.setDate(self.config.minDate !== undefined ? new Date(self.config.minDate.getTime()) : new Date(), false);
-              setDefaultHours();
-              updateValue();
-            }
-
-            if (self.config.allowInput === false && (e === undefined || !self.timeContainer.contains(e.relatedTarget))) {
-              setTimeout(function () {
-                return self.hourElement.select();
-              }, 50);
-            }
-          }
-        }
-
-        function minMaxDateSetter(type) {
-          return function (date) {
-            var dateObj = self.config["_" + type + "Date"] = self.parseDate(date, self.config.dateFormat);
-            var inverseDateObj = self.config["_" + (type === "min" ? "max" : "min") + "Date"];
-
-            if (dateObj !== undefined) {
-              self[type === "min" ? "minDateHasTime" : "maxDateHasTime"] = dateObj.getHours() > 0 || dateObj.getMinutes() > 0 || dateObj.getSeconds() > 0;
-            }
-
-            if (self.selectedDates) {
-              self.selectedDates = self.selectedDates.filter(function (d) {
-                return isEnabled(d);
-              });
-              if (!self.selectedDates.length && type === "min") setHoursFromDate(dateObj);
-              updateValue();
-            }
-
-            if (self.daysContainer) {
-              redraw();
-              if (dateObj !== undefined) self.currentYearElement[type] = dateObj.getFullYear().toString();else self.currentYearElement.removeAttribute(type);
-              self.currentYearElement.disabled = !!inverseDateObj && dateObj !== undefined && inverseDateObj.getFullYear() === dateObj.getFullYear();
-            }
-          };
-        }
-
-        function parseConfig() {
-          var boolOpts = ["wrap", "weekNumbers", "allowInput", "clickOpens", "time_24hr", "enableTime", "noCalendar", "altInput", "shorthandCurrentMonth", "inline", "static", "enableSeconds", "disableMobile"];
-          var userConfig = Object.assign({}, instanceConfig, JSON.parse(JSON.stringify(element.dataset || {})));
-          var formats$$1 = {};
-          self.config.parseDate = userConfig.parseDate;
-          self.config.formatDate = userConfig.formatDate;
-          Object.defineProperty(self.config, "enable", {
-            get: function get() {
-              return self.config._enable;
-            },
-            set: function set(dates) {
-              self.config._enable = parseDateRules(dates);
-            }
-          });
-          Object.defineProperty(self.config, "disable", {
-            get: function get() {
-              return self.config._disable;
-            },
-            set: function set(dates) {
-              self.config._disable = parseDateRules(dates);
-            }
-          });
-          var timeMode = userConfig.mode === "time";
-
-          if (!userConfig.dateFormat && (userConfig.enableTime || timeMode)) {
-            formats$$1.dateFormat = userConfig.noCalendar || timeMode ? "H:i" + (userConfig.enableSeconds ? ":S" : "") : flatpickr.defaultConfig.dateFormat + " H:i" + (userConfig.enableSeconds ? ":S" : "");
-          }
-
-          if (userConfig.altInput && (userConfig.enableTime || timeMode) && !userConfig.altFormat) {
-            formats$$1.altFormat = userConfig.noCalendar || timeMode ? "h:i" + (userConfig.enableSeconds ? ":S K" : " K") : flatpickr.defaultConfig.altFormat + (" h:i" + (userConfig.enableSeconds ? ":S" : "") + " K");
-          }
-
-          Object.defineProperty(self.config, "minDate", {
-            get: function get() {
-              return self.config._minDate;
-            },
-            set: minMaxDateSetter("min")
-          });
-          Object.defineProperty(self.config, "maxDate", {
-            get: function get() {
-              return self.config._maxDate;
-            },
-            set: minMaxDateSetter("max")
-          });
-
-          var minMaxTimeSetter = function minMaxTimeSetter(type) {
-            return function (val) {
-              self.config[type === "min" ? "_minTime" : "_maxTime"] = self.parseDate(val, "H:i");
-            };
-          };
-
-          Object.defineProperty(self.config, "minTime", {
-            get: function get() {
-              return self.config._minTime;
-            },
-            set: minMaxTimeSetter("min")
-          });
-          Object.defineProperty(self.config, "maxTime", {
-            get: function get() {
-              return self.config._maxTime;
-            },
-            set: minMaxTimeSetter("max")
-          });
-
-          if (userConfig.mode === "time") {
-            self.config.noCalendar = true;
-            self.config.enableTime = true;
-          }
-
-          Object.assign(self.config, formats$$1, userConfig);
-
-          for (var i = 0; i < boolOpts.length; i++) {
-            self.config[boolOpts[i]] = self.config[boolOpts[i]] === true || self.config[boolOpts[i]] === "true";
-          }
-
-          HOOKS.filter(function (hook) {
-            return self.config[hook] !== undefined;
-          }).forEach(function (hook) {
-            self.config[hook] = arrayify(self.config[hook] || []).map(bindToInstance);
-          });
-          self.isMobile = !self.config.disableMobile && !self.config.inline && self.config.mode === "single" && !self.config.disable.length && !self.config.enable.length && !self.config.weekNumbers && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-
-          for (var _i = 0; _i < self.config.plugins.length; _i++) {
-            var pluginConf = self.config.plugins[_i](self) || {};
-
-            for (var key in pluginConf) {
-              if (HOOKS.indexOf(key) > -1) {
-                self.config[key] = arrayify(pluginConf[key]).map(bindToInstance).concat(self.config[key]);
-              } else if (typeof userConfig[key] === "undefined") self.config[key] = pluginConf[key];
-            }
-          }
-
-          triggerEvent("onParseConfig");
-        }
-
-        function setupLocale() {
-          if (typeof self.config.locale !== "object" && typeof flatpickr.l10ns[self.config.locale] === "undefined") self.config.errorHandler(new Error("flatpickr: invalid locale " + self.config.locale));
-          self.l10n = Object.assign({}, flatpickr.l10ns.default, typeof self.config.locale === "object" ? self.config.locale : self.config.locale !== "default" ? flatpickr.l10ns[self.config.locale] : undefined);
-          tokenRegex.K = "(" + self.l10n.amPM[0] + "|" + self.l10n.amPM[1] + "|" + self.l10n.amPM[0].toLowerCase() + "|" + self.l10n.amPM[1].toLowerCase() + ")";
-          self.formatDate = createDateFormatter(self);
-          self.parseDate = createDateParser({
-            config: self.config,
-            l10n: self.l10n
-          });
-        }
-
-        function positionCalendar(customPositionElement) {
-          if (self.calendarContainer === undefined) return;
-          triggerEvent("onPreCalendarPosition");
-          var positionElement = customPositionElement || self._positionElement;
-          var calendarHeight = Array.prototype.reduce.call(self.calendarContainer.children, function (acc, child) {
-            return acc + child.offsetHeight;
-          }, 0),
-              calendarWidth = self.calendarContainer.offsetWidth,
-              configPos = self.config.position.split(" "),
-              configPosVertical = configPos[0],
-              configPosHorizontal = configPos.length > 1 ? configPos[1] : null,
-              inputBounds = positionElement.getBoundingClientRect(),
-              distanceFromBottom = window.innerHeight - inputBounds.bottom,
-              showOnTop = configPosVertical === "above" || configPosVertical !== "below" && distanceFromBottom < calendarHeight && inputBounds.top > calendarHeight;
-          var top = window.pageYOffset + inputBounds.top + (!showOnTop ? positionElement.offsetHeight + 2 : -calendarHeight - 2);
-          toggleClass(self.calendarContainer, "arrowTop", !showOnTop);
-          toggleClass(self.calendarContainer, "arrowBottom", showOnTop);
-          if (self.config.inline) return;
-          var left = window.pageXOffset + inputBounds.left - (configPosHorizontal != null && configPosHorizontal === "center" ? (calendarWidth - inputBounds.width) / 2 : 0);
-          var right = window.document.body.offsetWidth - inputBounds.right;
-          var rightMost = left + calendarWidth > window.document.body.offsetWidth;
-          toggleClass(self.calendarContainer, "rightMost", rightMost);
-          if (self.config.static) return;
-          self.calendarContainer.style.top = top + "px";
-
-          if (!rightMost) {
-            self.calendarContainer.style.left = left + "px";
-            self.calendarContainer.style.right = "auto";
-          } else {
-            self.calendarContainer.style.left = "auto";
-            self.calendarContainer.style.right = right + "px";
-          }
-        }
-
-        function redraw() {
-          if (self.config.noCalendar || self.isMobile) return;
-          updateNavigationCurrentMonth();
-          buildDays();
-        }
-
-        function focusAndClose() {
-          self._input.focus();
-
-          if (window.navigator.userAgent.indexOf("MSIE") !== -1 || navigator.msMaxTouchPoints !== undefined) {
-            setTimeout(self.close, 0);
-          } else {
-            self.close();
-          }
-        }
-
-        function selectDate(e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          var isSelectable = function isSelectable(day) {
-            return day.classList && day.classList.contains("flatpickr-day") && !day.classList.contains("disabled") && !day.classList.contains("notAllowed");
-          };
-
-          var t = findParent(e.target, isSelectable);
-          if (t === undefined) return;
-          var target = t;
-          var selectedDate = self.latestSelectedDateObj = new Date(target.dateObj.getTime());
-          var shouldChangeMonth = (selectedDate.getMonth() < self.currentMonth || selectedDate.getMonth() > self.currentMonth + self.config.showMonths - 1) && self.config.mode !== "range";
-          self.selectedDateElem = target;
-          if (self.config.mode === "single") self.selectedDates = [selectedDate];else if (self.config.mode === "multiple") {
-            var selectedIndex = isDateSelected(selectedDate);
-            if (selectedIndex) self.selectedDates.splice(parseInt(selectedIndex), 1);else self.selectedDates.push(selectedDate);
-          } else if (self.config.mode === "range") {
-            if (self.selectedDates.length === 2) self.clear(false);
-            self.selectedDates.push(selectedDate);
-            if (compareDates(selectedDate, self.selectedDates[0], true) !== 0) self.selectedDates.sort(function (a, b) {
-              return a.getTime() - b.getTime();
-            });
-          }
-          setHoursFromInputs();
-
-          if (shouldChangeMonth) {
-            var isNewYear = self.currentYear !== selectedDate.getFullYear();
-            self.currentYear = selectedDate.getFullYear();
-            self.currentMonth = selectedDate.getMonth();
-            if (isNewYear) triggerEvent("onYearChange");
-            triggerEvent("onMonthChange");
-          }
-
-          updateNavigationCurrentMonth();
-          buildDays();
-          updateValue();
-          if (self.config.enableTime) setTimeout(function () {
-            return self.showTimeInput = true;
-          }, 50);
-          if (!shouldChangeMonth && self.config.mode !== "range" && self.config.showMonths === 1) focusOnDayElem(target);else self.selectedDateElem && self.selectedDateElem.focus();
-          if (self.hourElement !== undefined) setTimeout(function () {
-            return self.hourElement !== undefined && self.hourElement.select();
-          }, 451);
-
-          if (self.config.closeOnSelect) {
-            var single = self.config.mode === "single" && !self.config.enableTime;
-            var range = self.config.mode === "range" && self.selectedDates.length === 2 && !self.config.enableTime;
-
-            if (single || range) {
-              focusAndClose();
-            }
-          }
-
-          triggerChange();
-        }
-
-        var CALLBACKS = {
-          locale: [setupLocale, updateWeekdays],
-          showMonths: [buildMonths, setCalendarWidth, buildWeekdays]
-        };
-
-        function set(option, value) {
-          if (option !== null && typeof option === "object") Object.assign(self.config, option);else {
-            self.config[option] = value;
-            if (CALLBACKS[option] !== undefined) CALLBACKS[option].forEach(function (x) {
-              return x();
-            });else if (HOOKS.indexOf(option) > -1) self.config[option] = arrayify(value);
-          }
-          self.redraw();
-          jumpToDate();
-          updateValue(false);
-        }
-
-        function setSelectedDate(inputDate, format) {
-          var dates = [];
-          if (inputDate instanceof Array) dates = inputDate.map(function (d) {
-            return self.parseDate(d, format);
-          });else if (inputDate instanceof Date || typeof inputDate === "number") dates = [self.parseDate(inputDate, format)];else if (typeof inputDate === "string") {
-            switch (self.config.mode) {
-              case "single":
-              case "time":
-                dates = [self.parseDate(inputDate, format)];
-                break;
-
-              case "multiple":
-                dates = inputDate.split(self.config.conjunction).map(function (date) {
-                  return self.parseDate(date, format);
-                });
-                break;
-
-              case "range":
-                dates = inputDate.split(self.l10n.rangeSeparator).map(function (date) {
-                  return self.parseDate(date, format);
-                });
-                break;
-
-              default:
-                break;
-            }
-          } else self.config.errorHandler(new Error("Invalid date supplied: " + JSON.stringify(inputDate)));
-          self.selectedDates = dates.filter(function (d) {
-            return d instanceof Date && isEnabled(d, false);
-          });
-          if (self.config.mode === "range") self.selectedDates.sort(function (a, b) {
-            return a.getTime() - b.getTime();
-          });
-        }
-
-        function setDate(date, triggerChange, format) {
-          if (triggerChange === void 0) {
-            triggerChange = false;
-          }
-
-          if (format === void 0) {
-            format = self.config.dateFormat;
-          }
-
-          if (date !== 0 && !date || date instanceof Array && date.length === 0) return self.clear(triggerChange);
-          setSelectedDate(date, format);
-          self.showTimeInput = self.selectedDates.length > 0;
-          self.latestSelectedDateObj = self.selectedDates[0];
-          self.redraw();
-          jumpToDate();
-          setHoursFromDate();
-          updateValue(triggerChange);
-          if (triggerChange) triggerEvent("onChange");
-        }
-
-        function parseDateRules(arr) {
-          return arr.slice().map(function (rule) {
-            if (typeof rule === "string" || typeof rule === "number" || rule instanceof Date) {
-              return self.parseDate(rule, undefined, true);
-            } else if (rule && typeof rule === "object" && rule.from && rule.to) return {
-              from: self.parseDate(rule.from, undefined),
-              to: self.parseDate(rule.to, undefined)
-            };
-
-            return rule;
-          }).filter(function (x) {
-            return x;
-          });
-        }
-
-        function setupDates() {
-          self.selectedDates = [];
-          self.now = self.parseDate(self.config.now) || new Date();
-          var preloadedDate = self.config.defaultDate || ((self.input.nodeName === "INPUT" || self.input.nodeName === "TEXTAREA") && self.input.placeholder && self.input.value === self.input.placeholder ? null : self.input.value);
-          if (preloadedDate) setSelectedDate(preloadedDate, self.config.dateFormat);
-          var initialDate = self.selectedDates.length > 0 ? self.selectedDates[0] : self.config.minDate && self.config.minDate.getTime() > self.now.getTime() ? self.config.minDate : self.config.maxDate && self.config.maxDate.getTime() < self.now.getTime() ? self.config.maxDate : self.now;
-          self.currentYear = initialDate.getFullYear();
-          self.currentMonth = initialDate.getMonth();
-          if (self.selectedDates.length > 0) self.latestSelectedDateObj = self.selectedDates[0];
-          if (self.config.minTime !== undefined) self.config.minTime = self.parseDate(self.config.minTime, "H:i");
-          if (self.config.maxTime !== undefined) self.config.maxTime = self.parseDate(self.config.maxTime, "H:i");
-          self.minDateHasTime = !!self.config.minDate && (self.config.minDate.getHours() > 0 || self.config.minDate.getMinutes() > 0 || self.config.minDate.getSeconds() > 0);
-          self.maxDateHasTime = !!self.config.maxDate && (self.config.maxDate.getHours() > 0 || self.config.maxDate.getMinutes() > 0 || self.config.maxDate.getSeconds() > 0);
-          Object.defineProperty(self, "showTimeInput", {
-            get: function get() {
-              return self._showTimeInput;
-            },
-            set: function set(bool) {
-              self._showTimeInput = bool;
-              if (self.calendarContainer) toggleClass(self.calendarContainer, "showTimeInput", bool);
-              self.isOpen && positionCalendar();
-            }
-          });
-        }
-
-        function setupInputs() {
-          self.input = self.config.wrap ? element.querySelector("[data-input]") : element;
-
-          if (!self.input) {
-            self.config.errorHandler(new Error("Invalid input element specified"));
-            return;
-          }
-
-          self.input._type = self.input.type;
-          self.input.type = "text";
-          self.input.classList.add("flatpickr-input");
-          self._input = self.input;
-
-          if (self.config.altInput) {
-            self.altInput = createElement(self.input.nodeName, self.input.className + " " + self.config.altInputClass);
-            self._input = self.altInput;
-            self.altInput.placeholder = self.input.placeholder;
-            self.altInput.disabled = self.input.disabled;
-            self.altInput.required = self.input.required;
-            self.altInput.tabIndex = self.input.tabIndex;
-            self.altInput.type = "text";
-            self.input.setAttribute("type", "hidden");
-            if (!self.config.static && self.input.parentNode) self.input.parentNode.insertBefore(self.altInput, self.input.nextSibling);
-          }
-
-          if (!self.config.allowInput) self._input.setAttribute("readonly", "readonly");
-          self._positionElement = self.config.positionElement || self._input;
-        }
-
-        function setupMobile() {
-          var inputType = self.config.enableTime ? self.config.noCalendar ? "time" : "datetime-local" : "date";
-          self.mobileInput = createElement("input", self.input.className + " flatpickr-mobile");
-          self.mobileInput.step = self.input.getAttribute("step") || "any";
-          self.mobileInput.tabIndex = 1;
-          self.mobileInput.type = inputType;
-          self.mobileInput.disabled = self.input.disabled;
-          self.mobileInput.required = self.input.required;
-          self.mobileInput.placeholder = self.input.placeholder;
-          self.mobileFormatStr = inputType === "datetime-local" ? "Y-m-d\\TH:i:S" : inputType === "date" ? "Y-m-d" : "H:i:S";
-
-          if (self.selectedDates.length > 0) {
-            self.mobileInput.defaultValue = self.mobileInput.value = self.formatDate(self.selectedDates[0], self.mobileFormatStr);
-          }
-
-          if (self.config.minDate) self.mobileInput.min = self.formatDate(self.config.minDate, "Y-m-d");
-          if (self.config.maxDate) self.mobileInput.max = self.formatDate(self.config.maxDate, "Y-m-d");
-          self.input.type = "hidden";
-          if (self.altInput !== undefined) self.altInput.type = "hidden";
-
-          try {
-            if (self.input.parentNode) self.input.parentNode.insertBefore(self.mobileInput, self.input.nextSibling);
-          } catch (_a) {}
-
-          bind(self.mobileInput, "change", function (e) {
-            self.setDate(e.target.value, false, self.mobileFormatStr);
-            triggerEvent("onChange");
-            triggerEvent("onClose");
-          });
-        }
-
-        function toggle(e) {
-          if (self.isOpen === true) return self.close();
-          self.open(e);
-        }
-
-        function triggerEvent(event, data) {
-          if (self.config === undefined) return;
-          var hooks = self.config[event];
-
-          if (hooks !== undefined && hooks.length > 0) {
-            for (var i = 0; hooks[i] && i < hooks.length; i++) {
-              hooks[i](self.selectedDates, self.input.value, self, data);
-            }
-          }
-
-          if (event === "onChange") {
-            self.input.dispatchEvent(createEvent("change"));
-            self.input.dispatchEvent(createEvent("input"));
-          }
-        }
-
-        function createEvent(name) {
-          var e = document.createEvent("Event");
-          e.initEvent(name, true, true);
-          return e;
-        }
-
-        function isDateSelected(date) {
-          for (var i = 0; i < self.selectedDates.length; i++) {
-            if (compareDates(self.selectedDates[i], date) === 0) return "" + i;
-          }
-
-          return false;
-        }
-
-        function isDateInRange(date) {
-          if (self.config.mode !== "range" || self.selectedDates.length < 2) return false;
-          return compareDates(date, self.selectedDates[0]) >= 0 && compareDates(date, self.selectedDates[1]) <= 0;
-        }
-
-        function updateNavigationCurrentMonth() {
-          if (self.config.noCalendar || self.isMobile || !self.monthNav) return;
-          self.yearElements.forEach(function (yearElement, i) {
-            var d = new Date(self.currentYear, self.currentMonth, 1);
-            d.setMonth(self.currentMonth + i);
-            self.monthElements[i].textContent = monthToStr(d.getMonth(), self.config.shorthandCurrentMonth, self.l10n) + " ";
-            yearElement.value = d.getFullYear().toString();
-          });
-          self._hidePrevMonthArrow = self.config.minDate !== undefined && (self.currentYear === self.config.minDate.getFullYear() ? self.currentMonth <= self.config.minDate.getMonth() : self.currentYear < self.config.minDate.getFullYear());
-          self._hideNextMonthArrow = self.config.maxDate !== undefined && (self.currentYear === self.config.maxDate.getFullYear() ? self.currentMonth + 1 > self.config.maxDate.getMonth() : self.currentYear > self.config.maxDate.getFullYear());
-        }
-
-        function getDateStr(format) {
-          return self.selectedDates.map(function (dObj) {
-            return self.formatDate(dObj, format);
-          }).filter(function (d, i, arr) {
-            return self.config.mode !== "range" || self.config.enableTime || arr.indexOf(d) === i;
-          }).join(self.config.mode !== "range" ? self.config.conjunction : self.l10n.rangeSeparator);
-        }
-
-        function updateValue(triggerChange) {
-          if (triggerChange === void 0) {
-            triggerChange = true;
-          }
-
-          if (self.selectedDates.length === 0) return self.clear(triggerChange);
-
-          if (self.mobileInput !== undefined && self.mobileFormatStr) {
-            self.mobileInput.value = self.latestSelectedDateObj !== undefined ? self.formatDate(self.latestSelectedDateObj, self.mobileFormatStr) : "";
-          }
-
-          self.input.value = getDateStr(self.config.dateFormat);
-
-          if (self.altInput !== undefined) {
-            self.altInput.value = getDateStr(self.config.altFormat);
-          }
-
-          if (triggerChange !== false) triggerEvent("onValueUpdate");
-        }
-
-        function onMonthNavClick(e) {
-          e.preventDefault();
-          var isPrevMonth = self.prevMonthNav.contains(e.target);
-          var isNextMonth = self.nextMonthNav.contains(e.target);
-
-          if (isPrevMonth || isNextMonth) {
-            changeMonth(isPrevMonth ? -1 : 1);
-          } else if (self.yearElements.indexOf(e.target) >= 0) {
-            e.target.select();
-          } else if (e.target.classList.contains("arrowUp")) {
-            self.changeYear(self.currentYear + 1);
-          } else if (e.target.classList.contains("arrowDown")) {
-            self.changeYear(self.currentYear - 1);
-          }
-        }
-
-        function timeWrapper(e) {
-          e.preventDefault();
-          var isKeyDown = e.type === "keydown",
-              input = e.target;
-
-          if (self.amPM !== undefined && e.target === self.amPM) {
-            self.amPM.textContent = self.l10n.amPM[int(self.amPM.textContent === self.l10n.amPM[0])];
-          }
-
-          var min = parseFloat(input.getAttribute("data-min")),
-              max = parseFloat(input.getAttribute("data-max")),
-              step = parseFloat(input.getAttribute("data-step")),
-              curValue = parseInt(input.value, 10),
-              delta = e.delta || (isKeyDown ? e.which === 38 ? 1 : -1 : 0);
-          var newValue = curValue + step * delta;
-
-          if (typeof input.value !== "undefined" && input.value.length === 2) {
-            var isHourElem = input === self.hourElement,
-                isMinuteElem = input === self.minuteElement;
-
-            if (newValue < min) {
-              newValue = max + newValue + int(!isHourElem) + (int(isHourElem) && int(!self.amPM));
-              if (isMinuteElem) incrementNumInput(undefined, -1, self.hourElement);
-            } else if (newValue > max) {
-              newValue = input === self.hourElement ? newValue - max - int(!self.amPM) : min;
-              if (isMinuteElem) incrementNumInput(undefined, 1, self.hourElement);
-            }
-
-            if (self.amPM && isHourElem && (step === 1 ? newValue + curValue === 23 : Math.abs(newValue - curValue) > step)) {
-              self.amPM.textContent = self.l10n.amPM[int(self.amPM.textContent === self.l10n.amPM[0])];
-            }
-
-            input.value = pad(newValue);
-          }
-        }
-
-        init();
-        return self;
-      }
-
-      function _flatpickr(nodeList, config) {
-        var nodes = Array.prototype.slice.call(nodeList);
-        var instances = [];
-
-        for (var i = 0; i < nodes.length; i++) {
-          var node = nodes[i];
-
-          try {
-            if (node.getAttribute("data-fp-omit") !== null) continue;
-
-            if (node._flatpickr !== undefined) {
-              node._flatpickr.destroy();
-
-              node._flatpickr = undefined;
-            }
-
-            node._flatpickr = FlatpickrInstance(node, config || {});
-            instances.push(node._flatpickr);
-          } catch (e) {
-            console.error(e);
-          }
-        }
-
-        return instances.length === 1 ? instances[0] : instances;
-      }
-
-      if (typeof HTMLElement !== "undefined") {
-        HTMLCollection.prototype.flatpickr = NodeList.prototype.flatpickr = function (config) {
-          return _flatpickr(this, config);
-        };
-
-        HTMLElement.prototype.flatpickr = function (config) {
-          return _flatpickr([this], config);
-        };
-      }
-
-      var flatpickr = function flatpickr(selector, config) {
-        if (selector instanceof NodeList) return _flatpickr(selector, config);else if (typeof selector === "string") return _flatpickr(window.document.querySelectorAll(selector), config);
-        return _flatpickr([selector], config);
-      };
-
-      flatpickr.defaultConfig = defaults;
-      flatpickr.l10ns = {
-        en: Object.assign({}, english),
-        default: Object.assign({}, english)
-      };
-
-      flatpickr.localize = function (l10n) {
-        flatpickr.l10ns.default = Object.assign({}, flatpickr.l10ns.default, l10n);
-      };
-
-      flatpickr.setDefaults = function (config) {
-        flatpickr.defaultConfig = Object.assign({}, flatpickr.defaultConfig, config);
-      };
-
-      flatpickr.parseDate = createDateParser({});
-      flatpickr.formatDate = createDateFormatter({});
-      flatpickr.compareDates = compareDates;
-
-      if (typeof jQuery !== "undefined") {
-        jQuery.fn.flatpickr = function (config) {
-          return _flatpickr(this, config);
-        };
-      }
-
-      Date.prototype.fp_incr = function (days) {
-        return new Date(this.getFullYear(), this.getMonth(), this.getDate() + (typeof days === "string" ? parseInt(days, 10) : days));
-      };
-
-      if (typeof window !== "undefined") {
-        window.flatpickr = flatpickr;
-      }
-
-      return flatpickr;
-
-  })));
-  });
-
-  /* eslint no-underscore-dangle: [2, { "allow": ["_input", "_updateClassNames", "_updateInputFields"], "allowAfterThis": true }] */
-  // `this.options` create-component mix-in creates prototype chain
-  // so that `options` given in constructor argument wins over the one defined in static `options` property
-  // 'Flatpickr' wants flat structure of object instead
-
-  function flattenOptions(options) {
-    var o = {}; // eslint-disable-next-line guard-for-in, no-restricted-syntax
-
-    for (var key in options) {
-      o[key] = options[key];
-    }
-
-    return o;
-  } // Weekdays shorthand for english locale
-
-
-  flatpickr.l10ns.en.weekdays.shorthand.forEach(function (day, index) {
-    var currentDay = flatpickr.l10ns.en.weekdays.shorthand;
-
-    if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
-      currentDay[index] = 'Th';
-    } else {
-      currentDay[index] = currentDay[index].charAt(0);
-    }
-  });
-
-  var toArray$6 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var DatePicker =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(DatePicker, _mixin);
-
-    /**
-     * DatePicker.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as an date picker.
-     */
-    function DatePicker(element, options) {
-      var _this;
-
-      _classCallCheck(this, DatePicker);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(DatePicker).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleFocus", function () {
-        if (_this.calendar) {
-          _this.calendar.open();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleBlur", function (event) {
-        if (_this.calendar) {
-          var focusTo = event.relatedTarget;
-
-          if (!focusTo || !_this.element.contains(focusTo) && (!_this.calendar.calendarContainer || !_this.calendar.calendarContainer.contains(focusTo))) {
-            _this.calendar.close();
-          }
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_initDatePicker", function (type) {
-        if (type === 'range') {
-          // Given FlatPickr assumes one `<input>` even in range mode,
-          // use a hidden `<input>` for such purpose, separate from our from/to `<input>`s
-          var doc = _this.element.ownerDocument;
-          var rangeInput = doc.createElement('input');
-          rangeInput.className = _this.options.classVisuallyHidden;
-          rangeInput.setAttribute('aria-hidden', 'true');
-
-          _this.element.appendChild(rangeInput);
-
-          _this._rangeInput = rangeInput; // An attempt to open the date picker dropdown when this component gets focus,
-          // and close the date picker dropdown when this component loses focus
-
-          var w = doc.defaultView;
-          var hasFocusin = 'onfocusin' in w;
-          var hasFocusout = 'onfocusout' in w;
-          var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-          var 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));
-        }
-
-        var self = _assertThisInitialized(_assertThisInitialized(_this));
-
-        var date = type === 'range' ? _this._rangeInput : _this.element.querySelector(_this.options.selectorDatePickerInput);
-        var _this$options = _this.options,
-            _onClose = _this$options.onClose,
-            _onChange = _this$options.onChange,
-            _onMonthChange = _this$options.onMonthChange,
-            _onYearChange = _this$options.onYearChange,
-            _onOpen = _this$options.onOpen,
-            _onValueUpdate = _this$options.onValueUpdate;
-        var calendar = new flatpickr(date, Object.assign(flattenOptions(_this.options), {
-          allowInput: true,
-          mode: type,
-          positionElement: type === 'range' && _this.element.querySelector(_this.options.selectorDatePickerInputFrom),
-          onClose: function onClose(selectedDates) {
-            // 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>`
-            if (self.shouldForceOpen) {
-              if (self.calendar.calendarContainer) {
-                self.calendar.calendarContainer.classList.add('open');
-              }
-
-              self.calendar.isOpen = true;
-            }
-
-            for (var _len = arguments.length, remainder = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-              remainder[_key - 1] = arguments[_key];
-            }
-
-            if (!_onClose || _onClose.call.apply(_onClose, [this, selectedDates].concat(remainder)) !== false) {
-              self._updateClassNames(calendar);
-
-              self._updateInputFields(selectedDates, type);
-            }
-          },
-          onChange: function onChange() {
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
-            }
-
-            if (!_onChange || _onChange.call.apply(_onChange, [this].concat(args)) !== false) {
-              self._updateClassNames(calendar);
-
-              if (type === 'range') {
-                if (calendar.selectedDates.length === 1 && calendar.isOpen) {
-                  self.element.querySelector(self.options.selectorDatePickerInputTo).classList.add(self.options.classFocused);
-                } else {
-                  self.element.querySelector(self.options.selectorDatePickerInputTo).classList.remove(self.options.classFocused);
-                }
-              }
-            }
-          },
-          onMonthChange: function onMonthChange() {
-            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-              args[_key3] = arguments[_key3];
-            }
-
-            if (!_onMonthChange || _onMonthChange.call.apply(_onMonthChange, [this].concat(args)) !== false) {
-              self._updateClassNames(calendar);
-            }
-          },
-          onYearChange: function onYearChange() {
-            for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-              args[_key4] = arguments[_key4];
-            }
-
-            if (!_onYearChange || _onYearChange.call.apply(_onYearChange, [this].concat(args)) !== false) {
-              self._updateClassNames(calendar);
-            }
-          },
-          onOpen: function onOpen() {
-            // 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>`
-            self.shouldForceOpen = true;
-            setTimeout(function () {
-              self.shouldForceOpen = false;
-            }, 0);
-
-            for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-              args[_key5] = arguments[_key5];
-            }
-
-            if (!_onOpen || _onOpen.call.apply(_onOpen, [this].concat(args)) !== false) {
-              self._updateClassNames(calendar);
-            }
-          },
-          onValueUpdate: function onValueUpdate() {
-            for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-              args[_key6] = arguments[_key6];
-            }
-
-            if ((!_onValueUpdate || _onValueUpdate.call.apply(_onValueUpdate, [this].concat(args)) !== false) && type === 'range') {
-              self._updateInputFields(self.calendar.selectedDates, type);
-            }
-          },
-          nextArrow: _this._rightArrowHTML(),
-          prevArrow: _this._leftArrowHTML()
-        }));
-
-        if (type === 'range') {
-          _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', function () {
-          calendar.open();
-        }));
-
-        _this._updateClassNames(calendar);
-
-        if (type !== 'range') {
-          _this._addInputLogic(date);
-        }
-
-        return calendar;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_addInputLogic", function (input, index) {
-        if (!isNaN(index) && (index < 0 || index > 1)) {
-          throw new RangeError("The index of <input> (".concat(index, ") is out of range."));
-        }
-
-        var inputField = input;
-
-        _this.manage(on(inputField, 'change', function (evt) {
-          if (evt.isTrusted || evt.detail && evt.detail.isNotFromFlatpickr) {
-            var inputDate = _this.calendar.parseDate(inputField.value);
-
-            if (inputDate && !isNaN(inputDate.valueOf())) {
-              if (isNaN(index)) {
-                _this.calendar.setDate(inputDate);
-              } else {
-                var selectedDates = _this.calendar.selectedDates;
-                selectedDates[index] = inputDate;
-
-                _this.calendar.setDate(selectedDates);
-              }
-            }
-          }
-
-          _this._updateClassNames(_this.calendar);
-        })); // An attempt to temporarily set the `<input>` being edited as the one FlatPicker manages,
-        // as FlatPicker attempts to take over `keydown` event handler on `document` to run on the date picker dropdown.
-
-
-        _this.manage(on(inputField, 'keydown', function (evt) {
-          var origInput = _this.calendar._input;
-          _this.calendar._input = evt.target;
-          setTimeout(function () {
-            _this.calendar._input = origInput;
-          });
-        }));
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_updateClassNames", function (_ref) {
-        var calendarContainer = _ref.calendarContainer,
-            selectedDates = _ref.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$6(calendarContainer.querySelectorAll('.flatpickr-weekday')).forEach(function (item) {
-            var currentItem = item;
-            currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
-            currentItem.classList.add(_this.options.classWeekday);
-          });
-          toArray$6(calendarContainer.querySelectorAll('.flatpickr-day')).forEach(function (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');
-            }
-          });
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_updateInputFields", function (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]);
-          } else if (selectedDates.length === 1) {
-            _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._updateClassNames(_this.calendar);
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_formatDate", function (date) {
-        return _this.calendar.formatDate(date, _this.calendar.config.dateFormat);
-      });
-
-      var _type = _this.element.getAttribute(_this.options.attribType);
-
-      _this.calendar = _this._initDatePicker(_type);
-
-      if (_this.calendar.calendarContainer) {
-        _this.manage(on(_this.element, 'keydown', function (e) {
-          if (e.which === 40) {
-            _this.calendar.calendarContainer.focus();
-          }
-        }));
-
-        _this.manage(on(_this.calendar.calendarContainer, 'keydown', function (e) {
-          if (e.which === 9 && _type === 'range') {
-            _this._updateClassNames(_this.calendar);
-
-            _this.element.querySelector(_this.options.selectorDatePickerInputFrom).focus();
-          }
-        }));
-      }
-
-      return _this;
-    }
-    /**
-     * Opens the date picker dropdown when this component gets focus.
-     * Used only for range mode for now.
-     * @private
-     */
-
-
-    _createClass(DatePicker, [{
-      key: "_rightArrowHTML",
-      value: function _rightArrowHTML() {
-        return "\n      <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill-rule=\"evenodd\">\n        <path d=\"M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z\"></path>\n      </svg>";
-      }
-    }, {
-      key: "_leftArrowHTML",
-      value: function _leftArrowHTML() {
-        return "\n      <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill-rule=\"evenodd\">\n        <path d=\"M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z\"></path>\n      </svg>";
-      }
-    }, {
-      key: "release",
-      value: function release() {
-        if (this._rangeInput && this._rangeInput.parentNode) {
-          this._rangeInput.parentNode.removeChild(this._rangeInput);
-        }
-
-        if (this.calendar) {
-          try {
-            this.calendar.destroy();
-          } catch (err) {} // eslint-disable-line no-empty
-
-
-          this.calendar = null;
-        }
-
-        return _get(_getPrototypeOf(DatePicker.prototype), "release", this).call(this);
-      }
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode DatePicker.create .create()}, or {@linkcode DatePicker.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode DatePicker.init .init()} works.
-       * @property {string} selectorInit The CSS selector to find date picker UIs.
-       */
-
-    }], [{
-      key: "options",
-      get: function get$$1() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-date-picker]',
-          selectorDatePickerInput: '[data-date-picker-input]',
-          selectorDatePickerInputFrom: '[data-date-picker-input-from]',
-          selectorDatePickerInputTo: '[data-date-picker-input-to]',
-          selectorDatePickerIcon: '[data-date-picker-icon]',
-          classCalendarContainer: "".concat(prefix, "--date-picker__calendar"),
-          classMonth: "".concat(prefix, "--date-picker__month"),
-          classWeekdays: "".concat(prefix, "--date-picker__weekdays"),
-          classDays: "".concat(prefix, "--date-picker__days"),
-          classWeekday: "".concat(prefix, "--date-picker__weekday"),
-          classDay: "".concat(prefix, "--date-picker__day"),
-          classFocused: "".concat(prefix, "--focused"),
-          classVisuallyHidden: "".concat(prefix, "--visually-hidden"),
-          attribType: 'data-date-picker-type',
-          dateFormat: 'm/d/Y'
-        };
-      }
-      /**
-       * The map associating DOM element and date picker UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return DatePicker;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(DatePicker, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$7 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var LeftNav =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(LeftNav, _mixin);
-
-    /**
-     * Left Navigation.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a left navigation.
-     * @param {Object} [options] The component options
-     * @param {string} [options.selectorLeftNav] The data attribute selector for the nav element in the left nav container.
-     * @param {string} [options.selectorLeftNavList] The data attribute selector for the main ul element in the left nav.
-     * @param {string} [options.selectorLeftNavNestedList] The data attribute selector for the nested ul elements in the left nav.
-     * @param {string} [options.selectorLeftNavToggle]
-     *   The data attribute selector for the button that will show and hide the left navigation.
-     * @param {string} [options.selectorLeftNavListItem] The data attribute selector for all list items in the left navigation.
-     * @param {string} [options.selectorLeftNavNestedListItem]
-     *   The data attribute selector for all nested list items in the left navigation.
-     * @param {string} [options.selectorLeftNavArrowIcon] The data attribute selector for the arrow icons in the left nav.
-     * @param {string} [options.selectorLeftNavFlyoutMenu] The data attribute selector for the flyout menus in the left nav.
-     * @param {string} [options.selectorLeftNavFlyoutItem] The data attribute selector for the flyout menu items in the left nav.
-     * @param {string} [options.selectorLeftNavSection]
-     *   The data attribute selector for the three sections in the header of the left nav.
-     * @param {string} [options.selectorLeftNavCurrentPage]
-     *   The data attribute selector for the current section title in the left nav header.
-     * @param {string} [options.selectorLeftNavMainNavHidden] The CSS selector for the hidden main nav.
-     * @param {string} [options.classActiveLeftNav] The class name for when a left nav is active.
-     * @param {string} [options.classActiveLeftNavListItem] The class name for when a left nav list item is active.
-     * @param {string} [options.classExpandedLeftNavListItem] The class name for when a nested list is expanded.
-     * @param {string} [options.classFlyoutDisplayed] The class name for when a flyout menu is displayed.
-     * @param {string} [options.classActiveSection] The class name for an active section item in the left nav header.
-     * @param {string} [options.classItemHasChildren] The class name for when a list item has children.
-     * @param {string} [options.classTaxonomyIcon] The class name for the taxonomy icon.
-     */
-    function LeftNav(element, options) {
-      var _this;
-
-      _classCallCheck(this, LeftNav);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(LeftNav).call(this, element, options));
-
-      _this.leftNavSectionActive = false;
-
-      _this.hookOpenActions();
-
-      _this.hookListSectionEvents();
-
-      _this.hookListItemsEvents();
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (evt) {
-        _this.handleDocumentClick(evt);
-      }));
-
-      return _this;
-    }
-    /**
-     * Closes the menu.
-     */
-
-
-    _createClass(LeftNav, [{
-      key: "closeMenu",
-      value: function closeMenu() {
-        this.element.classList.remove(this.options.classActiveLeftNav);
-        var toggleOpenNode = this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen);
-        toggleOpenNode.classList.remove(this.options.classActiveTrigger);
-        this.element.querySelector(this.options.selectorLeftNav).parentNode.setAttribute('aria-expanded', 'false');
-      }
-      /**
-       * Toggles the menu to open and close.
-       */
-
-    }, {
-      key: "toggleMenu",
-      value: function toggleMenu() {
-        var leftNavContainer = this.element.querySelector(this.options.selectorLeftNav).parentNode;
-        this.element.classList.toggle(this.options.classActiveLeftNav);
-        var toggleOpenNode = this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen);
-        toggleOpenNode.classList.toggle(this.options.classActiveTrigger);
-        if (leftNavContainer.getAttribute('aria-expanded') === 'false') leftNavContainer.setAttribute('aria-expanded', 'true');else leftNavContainer.setAttribute('aria-expanded', 'false');
-      }
-      /**
-       * Adds a transitional animation to the navSection
-       */
-
-    }, {
-      key: "animateNavSection",
-      value: function animateNavSection(selectedNav) {
-        var _this2 = this;
-
-        var selectedNavValue = selectedNav.dataset.leftNavSection;
-        var selectedNavLink = selectedNav.querySelector(this.options.selectorLeftNavSectionLink);
-        var leftNav = this.element.querySelector(this.options.selectorLeftNav);
-        var leftNavSections = this.element.querySelector(this.options.selectorLeftNavSections);
-        selectedNav.classList.remove(this.options.classNavSection);
-        selectedNav.classList.remove("".concat(this.options.classNavSection, "--").concat(selectedNavValue));
-        selectedNav.classList.add(this.options.classNavSectionTransition);
-
-        if (leftNavSections.children[0] === selectedNav) {
-          selectedNav.classList.add("".concat(this.options.classNavSectionTransition, "--50")); // First child only move 50px
-        } else {
-          selectedNav.classList.add("".concat(this.options.classNavSectionTransition, "--100")); // Second move 100px
-        }
-
-        selectedNav.setAttribute('data-left-nav-section', selectedNavValue);
-        /* Not sure what trick more performant */
-
-        setTimeout(function () {
-          selectedNav.classList.add("".concat(_this2.options.classNavSectionTransition, "--0"));
-        }, 100); // Could probably use a promise here
-
-        selectedNavLink.classList.remove(this.options.classNavSectionLink);
-        selectedNavLink.classList.add(this.options.classNavHeaderTitle);
-        selectedNavLink.setAttribute('data-left-nav-current-section-title', '');
-        selectedNavLink.removeAttribute('data-left-nav-section-link');
-        this.element.insertBefore(selectedNav, leftNav);
-      }
-      /**
-       * Adds a transitional animation to the navigation items on nav section click
-       */
-
-    }, {
-      key: "animateNavList",
-      value: function animateNavList(selectedNavTitle) {
-        var _this3 = this;
-
-        var currentLeftNavList = this.element.querySelector("".concat(this.options.selectorLeftNavList, ":not(").concat(this.options.selectorLeftNavMainNavHidden, ")"));
-        var newLeftNavList = this.element.querySelector("[data-left-nav-list=".concat(selectedNavTitle, "]"));
-        var currentLeftNavItems = toArray$7(currentLeftNavList.querySelectorAll(this.options.selectorLeftNavListItem)).reverse();
-        var newLeftNavItems = toArray$7(newLeftNavList.querySelectorAll(this.options.selectorLeftNavListItem));
-        var fadeOutTime = 300;
-        var counter = 0;
-        var counterIteration = fadeOutTime / currentLeftNavItems.length; // Length of animation divided by number of items
-
-        currentLeftNavItems.forEach(function (item) {
-          item.setAttribute('tabIndex', '-1');
-          setTimeout(function () {
-            item.classList.add(_this3.options.classItemFade);
-          }, counter);
-          counter += counterIteration;
-        });
-        newLeftNavItems.forEach(function (item) {
-          item.setAttribute('tabIndex', '0');
-          item.classList.remove(_this3.options.classItemFade);
-        });
-        setTimeout(function () {
-          currentLeftNavList.classList.add(_this3.options.classListHidden);
-          currentLeftNavList.classList.add(_this3.options.classListTop);
-          currentLeftNavList.setAttribute('aria-hidden', 'true');
-          newLeftNavList.classList.remove(_this3.options.classListHidden);
-          setTimeout(function () {
-            newLeftNavList.classList.remove(_this3.options.classListTop);
-          }, 100);
-          newLeftNavList.setAttribute('aria-hidden', 'false');
-        }, fadeOutTime + 100); // Wait for items to fade out.
-      }
-    }, {
-      key: "hookOpenActions",
-      value: function hookOpenActions() {
-        var _this4 = this;
-
-        var openBtn = this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen);
-        var closeBtn = this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleClose);
-        this.manage(on(openBtn, 'click', function () {
-          _this4.element.tabIndex = '0';
-
-          _this4.toggleMenu();
-        }));
-        this.manage(on(openBtn, 'keydown', function (evt) {
-          if (evt.which === 13) {
-            _this4.element.tabIndex = '0';
-
-            _this4.toggleMenu();
-          }
-        }));
-
-        if (closeBtn) {
-          this.manage(on(closeBtn, 'click', function () {
-            _this4.element.tabIndex = '-1';
-
-            _this4.closeMenu();
-          }));
-          this.manage(on(closeBtn, 'keydown', function (evt) {
-            if (evt.which === 13) {
-              _this4.element.tabIndex = '-1';
-
-              _this4.closeMenu();
-            }
-          }));
-        }
-
-        this.manage(on(this.element.ownerDocument, 'keydown', function (evt) {
-          if (evt.which === 27 && _this4.element.classList.contains(_this4.options.classActiveLeftNav)) {
-            _this4.closeMenu();
-          }
-        }));
-      }
-      /**
-       * Addes Event listeners to list sections
-       */
-
-    }, {
-      key: "hookListSectionEvents",
-      value: function hookListSectionEvents() {
-        var _this5 = this;
-
-        var leftNavSections = this.element.querySelector(this.options.selectorLeftNavSections);
-        this.manage(on(leftNavSections, 'click', function (evt) {
-          _this5.handleSectionItemClick(evt, leftNavSections);
-        }));
-        this.manage(on(leftNavSections, 'keydown', function (evt) {
-          if (evt.which === 13) {
-            _this5.handleSectionItemClick(evt, leftNavSections);
-
-            _this5.element.querySelector(_this5.options.selectorLeftNavCurrentSectionTitle).focus();
-          }
-        }));
-      }
-      /**
-       * Adds event listeners to list items
-       */
-
-    }, {
-      key: "hookListItemsEvents",
-      value: function hookListItemsEvents() {
-        var _this6 = this;
-
-        var leftNavList = toArray$7(this.element.querySelectorAll(this.options.selectorLeftNavList));
-        leftNavList.forEach(function (list) {
-          _this6.manage(on(list, 'click', function (evt) {
-            var leftNavItem = eventMatches(evt, _this6.options.selectorLeftNavListItem);
-
-            if (leftNavItem) {
-              var childItem = eventMatches(evt, _this6.options.selectorLeftNavNestedListItem);
-              var hasChildren = eventMatches(evt, _this6.options.selectorLeftNavListItemHasChildren);
-              var flyoutItem = eventMatches(evt, _this6.options.selectorLeftNavFlyoutItem);
-
-              if (flyoutItem) {
-                _this6.addActiveListItem(flyoutItem);
-              } else if (childItem) {
-                if (childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu)) {
-                  var flyoutMenu = childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu);
-                  flyoutMenu.classList.toggle(_this6.options.classFlyoutDisplayed);
-                } else {
-                  _this6.addActiveListItem(childItem);
-                }
-              } else if (hasChildren) {
-                _this6.handleNestedListClick(leftNavItem);
-              } else {
-                _this6.addActiveListItem(leftNavItem);
-              }
-            }
-          }));
-
-          _this6.manage(on(list, 'keydown', function (evt) {
-            if (evt.which === 13) {
-              var leftNavItem = eventMatches(evt, _this6.options.selectorLeftNavListItem);
-
-              if (leftNavItem) {
-                var childItem = eventMatches(evt, _this6.options.selectorLeftNavNestedListItem);
-                var hasChildren = eventMatches(evt, _this6.options.selectorLeftNavListItemHasChildren);
-                var flyoutItem = eventMatches(evt, _this6.options.selectorLeftNavFlyoutItem);
-                var hasLinkItem = !(leftNavItem.querySelector(_this6.options.selectorLeftNavListItemLink) === undefined);
-
-                if (flyoutItem) {
-                  _this6.addActiveListItem(flyoutItem);
-                } else if (childItem) {
-                  if (!childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu)) {
-                    _this6.addActiveListItem(childItem);
-                  } else {
-                    childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu).setAttribute('aria-hidden', 'false');
-                    childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu).style.top = "".concat(childItem.offsetTop - _this6.element.querySelector(_this6.options.selectorLeftNav).scrollTop, "px");
-                    childItem.querySelector(_this6.options.selectorLeftNavFlyoutMenu).style.left = "".concat(childItem.offsetLeft + Math.round(childItem.offsetWidth), "px");
-                  }
-                } else if (hasChildren) {
-                  _this6.handleNestedListClick(leftNavItem);
-                } else if (hasLinkItem) {
-                  var link = leftNavItem.querySelector(_this6.options.selectorLeftNavListItemLink);
-                  link.click();
-                } else {
-                  _this6.addActiveListItem(leftNavItem);
-                }
-              }
-            }
-          }));
-        });
-        var flyouts = toArray$7(this.element.ownerDocument.querySelectorAll(this.options.selectorLeftNavListItemHasFlyout));
-        flyouts.forEach(function (flyout) {
-          _this6.manage(on(flyout, 'mouseenter', function () {
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).setAttribute('aria-hidden', 'false'); // eslint-disable-next-line no-param-reassign
-
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).style.top = "".concat(flyout.offsetTop - _this6.element.querySelector(_this6.options.selectorLeftNav).scrollTop, "px"); // eslint-disable-next-line no-param-reassign
-
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).style.left = "".concat(flyout.offsetLeft + Math.round(flyout.offsetWidth), "px");
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).classList.toggle(_this6.options.classFlyoutDisplayed);
-          }));
-
-          _this6.manage(on(flyout, 'mouseleave', function () {
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).setAttribute('aria-hidden', 'true');
-            flyout.querySelector(_this6.options.selectorLeftNavFlyoutMenu).classList.remove(_this6.options.classFlyoutDisplayed);
-          }));
-        });
-      }
-      /**
-       * Hides all flyout menus.
-       */
-
-    }, {
-      key: "hideAllFlyoutMenus",
-      value: function hideAllFlyoutMenus() {
-        var _this7 = this;
-
-        var flyoutMenus = toArray$7(this.element.querySelectorAll(this.options.selectorLeftNavFlyoutMenu));
-        flyoutMenus.forEach(function (menu) {
-          menu.setAttribute('aria-hidden', 'true');
-          menu.classList.remove(_this7.options.classFlyoutDisplayed);
-        });
-      }
-      /**
-       * Sets a list item as active.
-       * @param {Object} item The active list item.
-       */
-
-    }, {
-      key: "addActiveListItem",
-      value: function addActiveListItem(item) {
-        var _this8 = this;
-
-        toArray$7(this.element.querySelectorAll(this.options.selectorLeftNavAllListItems)).forEach(function (currentItem) {
-          if (!(item === currentItem)) {
-            if (!currentItem.contains(item)) {
-              currentItem.classList.remove(_this8.options.classActiveLeftNavListItem);
-            } else {
-              currentItem.classList.add(_this8.options.classActiveLeftNavListItem);
-            }
-          }
-        });
-        toArray$7(this.element.querySelectorAll(this.options.selectorLeftNavNestedListItem)).forEach(function (currentItem) {
-          if (!(item === currentItem)) {
-            currentItem.classList.remove(_this8.options.classActiveLeftNavListItem);
-          }
-        });
-        item.classList.add(this.options.classActiveLeftNavListItem);
-        this.closeMenu();
-        this.hideAllFlyoutMenus();
-        this.closeMenu();
-      }
-      /**
-       * Handles click on the document.
-       * Closes the left navigation when document is clicked outside the left navigation.
-       * @param {Event} evt The event triggering this method.
-       */
-
-    }, {
-      key: "handleDocumentClick",
-      value: function handleDocumentClick(evt) {
-        var clickTarget = evt.target;
-        var isOfSelf = this.element.contains(clickTarget);
-        var isToggleBtn = this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen).contains(clickTarget);
-        var isOpen = this.element.classList.contains(this.options.classActiveLeftNav);
-        var isUnifiedHeader = this.element.ownerDocument.querySelector('[data-unified-header]').contains(clickTarget);
-        var shouldClose = !isOfSelf && isOpen && !isToggleBtn && !isUnifiedHeader;
-        var flyoutOpen;
-
-        if (this.element.querySelector(this.options.selectorLeftNavFlyoutMenu)) {
-          var leftnavFlyoutMenu = this.element.querySelector(this.options.selectorLeftNavFlyoutMenu);
-          flyoutOpen = leftnavFlyoutMenu.classList.contains(this.options.classFlyoutDisplayed);
-        }
-
-        if (isOfSelf && this.element.tagName === 'A') {
-          evt.preventDefault();
-        }
-
-        if (shouldClose) {
-          this.closeMenu();
-        }
-
-        if (this.element.querySelector(this.options.selectorLeftNavFlyoutMenu)) {
-          if (flyoutOpen && !isOfSelf && isOpen) {
-            this.element.querySelector(this.options.selectorLeftNavFlyoutMenu).classList.remove(this.options.classFlyoutDisplayed);
-          }
-        }
-      }
-      /**
-       * Handles click on a list item that contains a nested list in the left navigation.
-       * It hides all flyout menus and switches the tab-index on the list items based on whether or not the list is expanded.
-       * @param {HTMLElement} listItem The list item that was clicked.
-       */
-
-    }, {
-      key: "handleNestedListClick",
-      value: function handleNestedListClick(listItem) {
-        var _this9 = this;
-
-        var isOpen = listItem.classList.contains(this.options.classExpandedLeftNavListItem);
-        this.hideAllFlyoutMenus();
-        listItem.classList.toggle(this.options.classExpandedLeftNavListItem, !isOpen);
-        var listItems = toArray$7(listItem.querySelectorAll(this.options.selectorLeftNavNestedListItem));
-        listItems.forEach(function (item) {
-          if (isOpen) {
-            listItem.querySelector(_this9.options.selectorLeftNavNestedList).setAttribute('aria-hidden', 'true'); // eslint-disable-next-line no-param-reassign
-
-            item.querySelector(_this9.options.selectorLeftNavListItemLink).tabIndex = -1;
-          } else {
-            listItem.querySelector(_this9.options.selectorLeftNavNestedList).setAttribute('aria-hidden', 'false'); // eslint-disable-next-line no-param-reassign
-
-            item.querySelector(_this9.options.selectorLeftNavListItemLink).tabIndex = 0;
-          }
-        });
-      }
-    }, {
-      key: "handleSectionItemClick",
-      value: function handleSectionItemClick(evt, leftNavSections) {
-        var _this10 = this;
-
-        // Sorry
-        var leftNavSectionItem = eventMatches(evt, this.options.selectorLeftNavSection);
-
-        if (leftNavSectionItem) {
-          // currently selected
-          var selectedLeftNavSectionItem = this.element.querySelector(this.options.selectorLeftNavCurrentSection);
-          var selectedLeftNavSectionItemTitle = selectedLeftNavSectionItem.querySelector(this.options.selectorLeftNavCurrentSectionTitle);
-          var selectedLeftNavSectionItemIcon = this.element.querySelector(this.options.selectorLeftNavCurrentSectionIcon);
-          var selectedLeftNavSectionItemUse = selectedLeftNavSectionItemIcon.querySelector('use');
-          var selectedLeftNavSectionValue = selectedLeftNavSectionItem.dataset.leftNavCurrentSection; // clicked on item
-
-          var leftNavSectionItemLink = leftNavSectionItem.querySelector(this.options.selectorLeftNavSectionLink);
-          var leftNavSectionItemIcon = leftNavSectionItem.querySelector(this.options.selectorLeftNavSectionIcon);
-          var leftNavSectionItemIconUse = leftNavSectionItemIcon.querySelector('use');
-          var leftNavSectionValue = leftNavSectionItem.dataset.leftNavSection;
-
-          if (this.leftNavSectionActive) {
-            return;
-          }
-
-          this.leftNavSectionActive = true;
-          var newLeftNavSectionItem = document.createElement('li');
-          newLeftNavSectionItem.setAttribute('data-left-nav-section', selectedLeftNavSectionValue);
-          newLeftNavSectionItem.classList.add(this.options.classNavSection);
-          newLeftNavSectionItem.classList.add("".concat(this.options.classNavSection, "--").concat(selectedLeftNavSectionValue));
-          var newLeftNavSectionItemAnchor = document.createElement('a');
-          newLeftNavSectionItemAnchor.setAttribute('href', 'javascript:void(0)'); // eslint-disable-line no-script-url
-
-          newLeftNavSectionItemAnchor.setAttribute('tabindex', 0);
-          newLeftNavSectionItemAnchor.classList.add(this.options.classNavSectionAnchor);
-          var newLeftNavSectionItemIcon = selectedLeftNavSectionItemIcon.cloneNode(true); // IE11 doesn't support classList on SVG, must revert to className
-
-          newLeftNavSectionItemIcon.setAttribute('class', this.options.classTaxonomyIcon);
-          newLeftNavSectionItemIcon.removeAttribute('data-left-nav-current-section-icon');
-          newLeftNavSectionItemIcon.setAttribute('data-left-nav-section-icon', selectedLeftNavSectionValue);
-          var newLeftNavSectionItemLink = document.createElement('span');
-          newLeftNavSectionItemLink.setAttribute('data-left-nav-section-link', '');
-          newLeftNavSectionItemLink.classList.add(this.options.classNavSectionLink);
-          newLeftNavSectionItemLink.textContent = selectedLeftNavSectionItemTitle.textContent;
-          this.animateNavSection(leftNavSectionItem);
-          this.animateNavList(leftNavSectionValue);
-          newLeftNavSectionItemAnchor.appendChild(newLeftNavSectionItemIcon);
-          newLeftNavSectionItemAnchor.appendChild(newLeftNavSectionItemLink);
-          newLeftNavSectionItem.appendChild(newLeftNavSectionItemAnchor);
-          leftNavSections.insertBefore(newLeftNavSectionItem, leftNavSections.firstChild);
-          setTimeout(function () {
-            selectedLeftNavSectionItemTitle.textContent = leftNavSectionItemLink.textContent;
-            selectedLeftNavSectionItem.setAttribute('data-left-nav-current-section', leftNavSectionValue);
-            selectedLeftNavSectionItemIcon.setAttribute('data-left-nav-current-section-icon', leftNavSectionValue);
-            selectedLeftNavSectionItemUse.setAttribute('xlink:href', leftNavSectionItemIconUse.getAttribute('xlink:href'));
-            leftNavSectionItem.parentNode.removeChild(leftNavSectionItem); // Cant use .remove() because of IE11
-
-            _this10.leftNavSectionActive = false;
-          }, 450); // Wait for nav items to animate
-        }
-      }
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode LeftNav.create .create()}, or {@linkcode LeftNav.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode LeftNav.init .init()} works.
-       * @member LeftNav.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find left nav containers.
-       * @property {string} [selectorLeftNav] The data attribute selector for the nav element in the left nav container.
-       * @property {string} [selectorLeftNavList] The data attribute selector for the main ul element in the left nav.
-       * @property {string} [selectorLeftNavNestedList] The data attribute selector for the nested ul elements in the left nav.
-       * @property {string} [selectorLeftNavToggle]
-       *   The data attribute selector for the button that will show and hide the left navigation.
-       * @property {string} [selectorLeftNavListItem] The data attribute selector for all list items in the left navigation.
-       * @property {string} [selectorLeftNavNestedListItem]
-       *   The data attribute selector for all nested list items in the left navigation.
-       * @property {string} [selectorLeftNavArrowIcon] The data attribute selector for the arrow icons in the left nav.
-       * @property {string} [selectorLeftNavFlyoutMenu] The data attribute selector for the flyout menus in the left nav.
-       * @property {string} [selectorLeftNavFlyoutItem] The data attribute selector for the flyout menu items in the left nav.
-       * @property {string} [selectorLeftNavSection] The data attribute selector for the three sections in the header of the left nav.
-       * @property {string} [selectorLeftNavCurrentPage]
-       *   The data attribute selector for the current section title in the left nav header.
-       * @property {string} [selectorLeftNavMainNavHidden] The CSS selector for the hidden main nav.
-       * @property {string} [classActiveLeftNav] The class name for when a left nav is active.
-       * @property {string} [classActiveLeftNavListItem] The class name for when a left nav list item is active.
-       * @property {string} [classExpandedLeftNavListItem] The class name for when a nested list is expanded.
-       * @property {string} [classFlyoutDisplayed] The class name for when a flyout menu is displayed.
-       * @property {string} [classActiveSection] The class name for an active section item in the left nav header.
-       * @property {string} [classItemHasChildren] The class name for when a list item has children.
-       * @property {string} [classTaxonomyIcon] The class name for the taxonomy icon.
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-left-nav-container]',
-          // Data Attribute selectors
-          selectorLeftNav: '[data-left-nav]',
-          selectorLeftNavList: '[data-left-nav-list]',
-          selectorLeftNavNestedList: '[data-left-nav-nested-list]',
-          selectorLeftNavToggleOpen: '[data-left-nav-toggle="open"]',
-          selectorLeftNavToggleClose: '[data-left-nav-toggle="close"]',
-          selectorLeftNavListItem: '[data-left-nav-item]',
-          selectorLeftNavListItemLink: '[data-left-nav-item-link]',
-          selectorLeftNavNestedListItem: '[data-left-nav-nested-item]',
-          selectorLeftNavArrowIcon: '[data-left-nav-icon]',
-          selectorLeftNavFlyoutMenu: '[data-left-nav-flyout]',
-          selectorLeftNavFlyoutItem: '[data-left-nav-flyout-item]',
-          selectorLeftNavSections: '[data-left-nav-sections]',
-          selectorLeftNavSection: '[data-left-nav-section]',
-          selectorLeftNavSectionLink: '[data-left-nav-section-link]',
-          selectorLeftNavSectionIcon: '[data-left-nav-section-icon]',
-          selectorLeftNavCurrentSection: '[data-left-nav-current-section]',
-          selectorLeftNavCurrentSectionTitle: '[data-left-nav-current-section-title]',
-          selectorLeftNavCurrentSectionIcon: '[data-left-nav-current-section-icon]',
-          selectorLeftNavListItemHasChildren: '[data-left-nav-item-with-children]',
-          selectorLeftNavListItemHasFlyout: '[data-left-nav-has-flyout]',
-          selectorLeftNavAllListItems: '[data-left-nav-item], [data-left-nav-nested-item], [data-left-nav-flyout-item]',
-          selectorLeftNavMainNavHidden: ".".concat(prefix, "--left-nav__main-nav--hidden"),
-          // CSS Class Selectors
-          classActiveTrigger: "".concat(prefix, "--left-nav__trigger--active"),
-          classActiveLeftNav: "".concat(prefix, "--left-nav--active"),
-          classActiveLeftNavListItem: "".concat(prefix, "--active-list-item"),
-          classExpandedLeftNavListItem: "".concat(prefix, "--main-nav__parent-item--expanded"),
-          classFlyoutDisplayed: "".concat(prefix, "--nested-list__flyout-menu--displayed"),
-          classItemHasChildren: "".concat(prefix, "--main-nav__parent-item--has-children"),
-          classNavSection: "".concat(prefix, "--left-nav__section"),
-          classNavSectionTransition: "".concat(prefix, "--left-nav__section--transition"),
-          classNavSectionAnchor: "".concat(prefix, "--left-nav__section--anchor"),
-          classNavSectionLink: "".concat(prefix, "--left-nav__section--link"),
-          classNavHeaderTitle: "".concat(prefix, "--left-nav__header--title"),
-          classItemFade: "".concat(prefix, "--main-nav__parent-item--fade"),
-          classItemHidden: "".concat(prefix, "--main-nav__parent-item--hidden"),
-          classListHidden: "".concat(prefix, "--left-nav__main-nav--hidden"),
-          classListTop: "".concat(prefix, "--left-nav__main-nav--top"),
-          classTaxonomyIcon: "".concat(prefix, "--left-nav__section--taxonomy-icon")
-        };
-      }
-      /**
-       * The map associating DOM element and left navigation instance.
-       * @member LeftNav.components
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return LeftNav;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(LeftNav, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var leftNav = !breakingChangesX ? LeftNav : removedComponent('LeftNav');
-
-  var ProfileSwitcher =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(ProfileSwitcher, _mixin);
-
-    /**
-     * Profile Switcher.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a profile switcher.
-     * @param {Object} [options] The component options
-     * @param {string} [options.selectorProfileSwitcher] The data attribute selector for the profile switcher.
-     * @param {string} [options.selectorAccount]
-     *   The data attribute selector for the element containing the account name in the profile switcher.
-     * @param {string} [options.selectorOrg]
-     *   The data attribute selector for the element containing the organization name in the profile switcher.
-     * @param {string} [options.selectorSpace]
-     *   The data attribute selector for the element containing the space name in the profile switcher.
-     * @param {string} [options.selectorAccountDropdown]
-     *   The data attribute selector for the dropdown item containing the current account name.
-     * @param {string} [options.selectorOrgDropdown]
-     *   The data attribute selector for the dropdown item containing the current organization name.
-     * @param {string} [options.selectorSpaceDropdown]
-     *   The data attribute selector for the dropdown item containing the current space name.
-     */
-    function ProfileSwitcher(element, options) {
-      var _this;
-
-      _classCallCheck(this, ProfileSwitcher);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ProfileSwitcher).call(this, element, options));
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (evt) {
-        _this.handleDocumentClick(evt);
-      }));
-
-      _this.manage(on(_this.element, 'dropdown-beingselected', function (event) {
-        if (event.target.querySelector(_this.options.selectorAccountDropdown) !== null) {
-          var linkedIconNode = event.detail.item.querySelector(_this.options.classLinkedIcon);
-          _this.element.isLinked = !!linkedIconNode;
-          _this.element.linkedIcon = linkedIconNode && linkedIconNode.cloneNode(true);
-          var linkedAccountNode = event.detail.item.querySelector(_this.options.selectorAccountSlLinked);
-          _this.element.linkedAccount = linkedAccountNode && linkedAccountNode.cloneNode(true);
-        }
-      }));
-
-      var toggleNode = _this.element.querySelector(_this.options.selectorToggle);
-
-      if (toggleNode) {
-        _this.manage(on(toggleNode, 'keydown', function (event) {
-          _this.toggle(event);
-        }));
-
-        _this.manage(on(toggleNode, 'mouseenter', function (event) {
-          _this.getLinkedData(event);
-
-          _this.determineSwitcherValues(true);
-        }));
-
-        _this.manage(on(toggleNode, 'mouseleave', function (event) {
-          _this.getLinkedData(event);
-
-          _this.determineSwitcherValues(false);
-        }));
-      }
-
-      _this.manage(on(_this.element.ownerDocument, 'keyup', function () {
-        return _this.handleBlur();
-      }));
-
-      return _this;
-    }
-    /**
-     * Opens and closes the menu.
-     * @param {Event} event The event triggering this method.
-     */
-
-
-    _createClass(ProfileSwitcher, [{
-      key: "toggle",
-      value: function toggle(event) {
-        var isOfSelf = this.element.contains(event.target);
-
-        if (event.which === 13 || event.which === 32) {
-          if (isOfSelf) {
-            this.element.classList.toggle(this.options.classSwitcherOpen);
-          } else if (!isOfSelf && this.element.classList.contains(this.options.classSwitcherOpen)) {
-            this.element.classList.remove(this.options.classSwitcherOpen);
-          }
-        }
-      }
-    }, {
-      key: "getLinkedData",
-      value: function getLinkedData(event) {
-        if (event.target.querySelector(this.options.selectorLinkedAccount) !== null) {
-          if (event.target.querySelector(this.options.selectorLinkedAccount).textContent.length > 1) {
-            this.element.isLinked = true;
-          } else {
-            this.element.isLinked = false;
-          }
-        }
-      }
-    }, {
-      key: "handleBlur",
-      value: function handleBlur() {
-        if (!this.element.contains(document.activeElement)) {
-          this.element.classList.remove(this.options.classSwitcherOpen);
-        }
-      }
-      /**
-       * Handles click on the document.
-       * Closes the profile switcherwhen document is clicked outside the left navigation or
-       * the user clicks the profile switcher while it is open.
-       * @param {Event} evt The event triggering this method.
-       */
-
-    }, {
-      key: "handleDocumentClick",
-      value: function handleDocumentClick(evt) {
-        var clickTarget = evt.target;
-        var isOfSelf = this.element.contains(clickTarget);
-        var isToggle = eventMatches(evt, this.options.selectorToggle);
-        var isOpen = this.element.classList.contains(this.options.classSwitcherOpen);
-
-        if (isOfSelf) {
-          if (isToggle && isOpen) {
-            this.element.classList.remove(this.options.classSwitcherOpen);
-          } else if (isOpen) {
-            this.determineSwitcherValues();
-          } else {
-            this.element.classList.add(this.options.classSwitcherOpen);
-          }
-        } else {
-          this.element.classList.remove(this.options.classSwitcherOpen);
-        }
-      }
-      /**
-       * Handles logic to determine what text to display in profile switcher.
-       * If the text is over 25 characters long, truncate and add ellipses.
-       * Also adds logic to change the switcher width based on the width of the hovered
-       * profile switcher
-       * @param {boolean} isHovered boolean value passed by the event listener on bx--toggle.
-       */
-
-    }, {
-      key: "determineSwitcherValues",
-      value: function determineSwitcherValues(isHovered) {
-        var linkedElement = this.element.querySelector(this.options.selectorLinkedAccount);
-        var nameElement = this.element.querySelector(this.options.selectorAccount);
-        var regionElement = this.element.querySelector(this.options.selectorRegion);
-        var orgElement = this.element.querySelector(this.options.selectorOrg);
-        var spaceElement = this.element.querySelector(this.options.selectorSpace);
-        var menuElement = this.element.querySelector(this.options.selectorMenu);
-        var isOpen = this.element.classList.contains(this.options.classSwitcherOpen);
-
-        if (linkedElement) {
-          if (this.element.isLinked) {
-            if (this.element.linkedAccount) {
-              if (linkedElement.textContent.length) {
-                linkedElement.querySelector(this.options.selectorAccountSlLinked).textContent = this.element.linkedAccount.textContent;
-              } else {
-                linkedElement.appendChild(this.element.linkedAccount);
-
-                if (this.element.linkedIcon) {
-                  linkedElement.appendChild(this.element.linkedIcon);
-                }
-              }
-            }
-          } else {
-            linkedElement.textContent = '';
-          }
-        }
-
-        var nameDropdownValue = '';
-
-        if (this.element.querySelector(this.options.selectorAccountDropdown)) {
-          if (this.element.isLinked) {
-            nameDropdownValue = this.element.querySelector(this.options.selectorAccountLinked).textContent;
-          } else {
-            nameDropdownValue = this.element.querySelector(this.options.selectorAccountDropdown).textContent;
-          }
-        }
-
-        var regionDropdownValue = '';
-
-        if (this.element.querySelector(this.options.selectorRegionDropdown)) {
-          regionDropdownValue = this.element.querySelector(this.options.selectorRegionDropdown).textContent;
-        }
-
-        var orgDropdownValue = '';
-
-        if (this.element.querySelector(this.options.selectorOrgDropdown)) {
-          orgDropdownValue = this.element.querySelector(this.options.selectorOrgDropdown).textContent;
-        }
-
-        var spaceDropdownValue = '';
-
-        if (this.element.querySelector(this.options.selectorSpaceDropdown)) {
-          spaceDropdownValue = this.element.querySelector(this.options.selectorSpaceDropdown).textContent;
-        }
-
-        var nameShort;
-        var orgShort;
-        var spaceShort;
-
-        if (isHovered && !isOpen) {
-          if (nameElement) {
-            nameElement.textContent = nameDropdownValue;
-          }
-
-          if (orgElement) {
-            orgElement.textContent = orgDropdownValue;
-          }
-
-          if (spaceElement) {
-            spaceElement.textContent = spaceDropdownValue;
-          }
-
-          if (regionElement) {
-            regionElement.textContent = regionDropdownValue;
-          }
-
-          if (menuElement) {
-            menuElement.style.width = "".concat(this.element.getBoundingClientRect().width, "px");
-          }
-        } else {
-          if (nameElement) {
-            if (nameDropdownValue.length > 25) {
-              nameShort = "".concat(nameDropdownValue.substr(0, 25), "...");
-              nameElement.textContent = nameShort;
-            } else {
-              nameElement.textContent = nameDropdownValue;
-            }
-          }
-
-          if (orgElement) {
-            if (orgDropdownValue.length > 25) {
-              orgShort = "".concat(orgDropdownValue.slice(0, 12), "...").concat(orgDropdownValue.slice(-13));
-              orgElement.textContent = orgShort;
-            } else {
-              orgElement.textContent = orgDropdownValue;
-            }
-          }
-
-          if (spaceElement) {
-            if (spaceDropdownValue.length > 25) {
-              spaceShort = "".concat(spaceDropdownValue.substr(0, 25), "...");
-              spaceElement.textContent = spaceShort;
-            } else {
-              spaceElement.textContent = spaceDropdownValue;
-            }
-          }
-
-          if (regionElement) {
-            regionElement.textContent = regionDropdownValue;
-          }
-
-          if (menuElement) {
-            menuElement.style.width = "".concat(this.element.getBoundingClientRect().width, "px");
-          }
-        }
-      }
-      /**
-       * The component options.
-       * @member ProfileSwitcher.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find profile switchers.
-       * @property {string} [selectorProfileSwitcher] The data attribute selector for the profile switcher.
-       * @property {string} [selectorAccount]
-       *   The data attribute selector for the element containing the account name in the profile switcher.
-       * @property {string} [selectorOrg]
-       *   The data attribute selector for the element containing the organization name in the profile switcher.
-       * @property {string} [selectorSpace]
-       *   The data attribute selector for the element containing the space name in the profile switcher.
-       * @property {string} [selectorAccountDropdown]
-       *   The data attribute selector for the dropdown item containing the current account name.
-       * @property {string} [selectorOrgDropdown]
-       *   The data attribute selector for the dropdown item containing the current organization name.
-       * @property {string} [selectorSpaceDropdown]
-       *   The data attribute selector for the dropdown item containing the current space name.
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-profile-switcher]',
-          // Data Attribute selectors
-          selectorProfileSwitcher: '[data-profile-switcher]',
-          selectorToggle: '[data-profile-switcher-toggle]',
-          selectorMenu: '[data-switcher-menu]',
-          selectorLinkedAccount: '[data-switcher-account-sl]',
-          selectorAccount: '[data-switcher-account]',
-          selectorRegion: '[data-switcher-region]',
-          selectorOrg: '[data-switcher-org]',
-          selectorSpace: '[data-switcher-space]',
-          selectorDropdown: '[data-dropdown]',
-          selectorAccountDropdown: '[data-dropdown-account]',
-          selectorAccountSlDropdown: '[data-dropdown-account-sl]',
-          selectorAccountLinked: '[data-dropdown-account-linked]',
-          selectorAccountSlLinked: '[data-dropdown-account-sl-linked]',
-          selectorRegionDropdown: '[data-dropdown-region]',
-          selectorOrgDropdown: '[data-dropdown-org]',
-          selectorSpaceDropdown: '[data-dropdown-space]',
-          classSwitcherOpen: "".concat(prefix, "--account-switcher--open"),
-          classLinkedIcon: ".".concat(prefix, "--account-switcher__linked-icon")
-        };
-      }
-      /**
-       * The map associating DOM element and profile switcher instance.
-       * @member ProfileSwitcher.components
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return ProfileSwitcher;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(ProfileSwitcher, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var profileSwitcher = !breakingChangesX ? ProfileSwitcher : removedComponent('ProfileSwitcher');
-
-  var Pagination =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Pagination, _mixin);
-
-    /**
-     * Pagination component.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @param {HTMLElement} element The element working as a pagination component.
-     * @param {Object} [options] The component options.
-     * @property {string} [selectorInit] The CSS selector to find pagination components.
-     * @property {string} [selectorItemsPerPageInput]
-     *   The CSS selector to find the input that determines the number of items per page.
-     * @property {string} [selectorPageNumberInput] The CSS selector to find the input that changes the page displayed.
-     * @property {string} [selectorPageBackward] The CSS selector to find the button that goes back a page.
-     * @property {string} [selectorPageForward] The CSS selector to find the button that goes forward a page.
-     * @property {string} [eventItemsPerPage]
-     *   The name of the custom event fired when a user changes the number of items per page.
-     *   event.detail.value contains the number of items a user wishes to see.
-     * @property {string} [eventPageNumber]
-     *   The name of the custom event fired when a user inputs a specific page number.
-     *   event.detail.value contains the value that the user input.
-     * @property {string} [eventPageChange]
-     *   The name of the custom event fired when a user goes forward or backward a page.
-     *   event.detail.direction contains the direction a user wishes to go.
-     */
-    function Pagination(element, options) {
-      var _this;
-
-      _classCallCheck(this, Pagination);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Pagination).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_emitEvent", function (evtName, detail) {
-        var event = new CustomEvent("".concat(evtName), {
-          bubbles: true,
-          cancelable: true,
-          detail: detail
-        });
-
-        _this.element.dispatchEvent(event);
-      });
-
-      _this.manage(on(_this.element, 'click', function (evt) {
-        if (evt.target.matches(_this.options.selectorPageBackward)) {
-          var detail = {
-            initialEvt: evt,
-            element: evt.target,
-            direction: 'backward'
-          };
-
-          _this._emitEvent(_this.options.eventPageChange, detail);
-        } else if (evt.target.matches(_this.options.selectorPageForward)) {
-          var _detail = {
-            initialEvt: evt,
-            element: evt.target,
-            direction: 'forward'
-          };
-
-          _this._emitEvent(_this.options.eventPageChange, _detail);
-        }
-      }));
-
-      _this.manage(on(_this.element, 'input', function (evt) {
-        if (evt.target.matches(_this.options.selectorItemsPerPageInput)) {
-          var detail = {
-            initialEvt: evt,
-            element: evt.target,
-            value: evt.target.value
-          };
-
-          _this._emitEvent(_this.options.eventItemsPerPage, detail);
-        } else if (evt.target.matches(_this.options.selectorPageNumberInput)) {
-          var _detail2 = {
-            initialEvt: evt,
-            element: evt.target,
-            value: evt.target.value
-          };
-
-          _this._emitEvent(_this.options.eventPageNumber, _detail2);
-        }
-      }));
-
-      return _this;
-    }
-    /**
-     * Dispatches a custom event
-     * @param {string} evtName name of the event to be dispatched.
-     * @param {Object} detail contains the original event and any other necessary details.
-     */
-
-
-    return Pagination;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Pagination, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(Pagination, "options",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    selectorInit: '[data-pagination]',
-    selectorItemsPerPageInput: '[data-items-per-page]',
-    selectorPageNumberInput: '[data-page-number-input]',
-    selectorPageBackward: '[data-page-backward]',
-    selectorPageForward: '[data-page-forward]',
-    eventItemsPerPage: 'itemsPerPage',
-    eventPageNumber: 'pageNumber',
-    eventPageChange: 'pageChange'
-  });
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  function svgToggleClass(svg, name, forceAdd) {
-    var list = svg.getAttribute('class').trim().split(/\s+/);
-    var uniqueList = Object.keys(list.reduce(function (o, item) {
-      return Object.assign(o, _defineProperty({}, item, 1));
-    }, {}));
-    var index = uniqueList.indexOf(name);
-    var found = index >= 0;
-    var add = forceAdd === undefined ? !found : forceAdd;
-
-    if (found === !add) {
-      if (add) {
-        uniqueList.push(name);
-      } else {
-        uniqueList.splice(index, 1);
-      }
-
-      svg.setAttribute('class', uniqueList.join(' '));
-    }
-  }
-
-  var toArray$8 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var Search =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Search, _mixin);
-
-    /**
-     * Search with Options.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as the search component.
-     * @param {Object} [options] The component options
-     * @property {string} [options.selectorInit]
-     *   The selector to find search UIs with options.
-     * @property {string} [options.selectorSearchView]
-     *   The selector to find the search view icon containers.
-     * @property {string} [options.selectorSearchInput]
-     *   The selector to find the search input.
-     * @property {string} [options.selectorClearIcon]
-     *   The selector for the clear icon that clears the search box.
-     * @property {string} [options.selectorIconContainer] The data attribute selector for the icon layout container.
-     * @property {string} [options.classClearHidden] The class used to hide the clear icon.
-     * @property {string} [options.classLayoutHidden] The class used to hide nonselected layout view.
-     */
-    function Search(element, options) {
-      var _this;
-
-      _classCallCheck(this, Search);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Search).call(this, element, options));
-
-      var closeIcon = _this.element.querySelector(_this.options.selectorClearIcon);
-
-      var input = _this.element.querySelector(_this.options.selectorSearchInput);
-
-      if (!input) {
-        throw new Error('Cannot find the search input.');
-      }
-
-      if (closeIcon) {
-        _this.manage(on(closeIcon, 'click', function () {
-          svgToggleClass(closeIcon, _this.options.classClearHidden, true);
-          input.value = '';
-          input.focus();
-        }));
-      }
-
-      _this.manage(on(_this.element, 'click', function (evt) {
-        var toggleItem = eventMatches(evt, _this.options.selectorIconContainer);
-        if (toggleItem) _this.toggleLayout(toggleItem);
-      }));
-
-      _this.manage(on(input, 'input', function (evt) {
-        if (closeIcon) _this.showClear(evt.target.value, closeIcon);
-      }));
-
-      return _this;
-    }
-    /**
-     * Toggles between the grid and list layout.
-     * @param {HTMLElement} element The element contining the layout toggle.
-     */
-
-
-    _createClass(Search, [{
-      key: "toggleLayout",
-      value: function toggleLayout(element) {
-        var _this2 = this;
-
-        toArray$8(element.querySelectorAll(this.options.selectorSearchView)).forEach(function (item) {
-          item.classList.toggle(_this2.options.classLayoutHidden);
-        });
-      }
-      /**
-       * Toggles the clear icon visibility
-       * @param {HTMLElement} value The element serving as the search input.
-       * @param {HTMLElement} icon The element serving as close icon.
-       */
-
-    }, {
-      key: "showClear",
-      value: function showClear(value, icon) {
-        svgToggleClass(icon, this.options.classClearHidden, value.length === 0);
-      }
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode Search.create .create()}, or {@linkcode Search.init .init()},
-       * properties in this object are overriden for the instance being created
-       * and how {@linkcode Search.init .init()} works.
-       * @member Search.options
-       * @type {Object}
-       * @property {string} [options.selectorInit]
-       *   The selector to find search UIs with options.
-       * @property {string} [options.selectorSearchView]
-       *   The selector to find the search view icon containers.
-       * @property {string} [options.selectorSearchInput]
-       *   The selector to find the search input.
-       * @property {string} [options.selectorClearIcon]
-       *   The selector for the clear icon that clears the search box.
-       * @property {string} [options.selectorIconContainer] The data attribute selector for the icon layout container.
-       * @property {string} [options.classClearHidden] The class used to hide the clear icon.
-       * @property {string} [options.classLayoutHidden] The class used to hide nonselected layout view.
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-search]',
-          selectorSearchView: '[data-search-view]',
-          selectorSearchInput: ".".concat(prefix, "--search-input"),
-          selectorClearIcon: ".".concat(prefix, "--search-close"),
-          selectorIconContainer: ".".concat(prefix, "--search-button[data-search-toggle]"),
-          classClearHidden: "".concat(prefix, "--search-close--hidden"),
-          classLayoutHidden: "".concat(prefix, "--search-view--hidden")
-        };
-      }
-      /**
-       * The map associating DOM element and search instance.
-       * @member Search.components
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return Search;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Search, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Accordion =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Accordion, _mixin);
-
-    /**
-     * Accordion.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as an accordion.
-     */
-    function Accordion(element, options) {
-      var _this;
-
-      _classCallCheck(this, Accordion);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Accordion).call(this, element, options));
-
-      _this.manage(on(_this.element, 'click', function (event) {
-        var item = eventMatches(event, _this.options.selectorAccordionItem);
-
-        if (item && !eventMatches(event, _this.options.selectorAccordionContent)) {
-          _this._toggle(item);
-        }
-      }));
-      /**
-       *
-       *  DEPRECATE in v8
-       *
-       *  Swapping to a button elemenet instead of a div
-       *  automatically maps click events to keypress as well
-       *  This event listener now is only added if user is using
-       *  the older markup
-       */
-
-
-      if (!_this._checkIfButton()) {
-        _this.manage(on(_this.element, 'keypress', function (event) {
-          var item = eventMatches(event, _this.options.selectorAccordionItem);
-
-          if (item && !eventMatches(event, _this.options.selectorAccordionContent)) {
-            _this._handleKeypress(event);
-          }
-        }));
-      }
-
-      return _this;
-    }
-
-    _createClass(Accordion, [{
-      key: "_checkIfButton",
-      value: function _checkIfButton() {
-        return this.element.firstElementChild.firstElementChild.nodeName === 'BUTTON';
-      }
-      /**
-       * Handles toggling of active state of accordion via keyboard
-       * @param {Event} event The event triggering this method.
-       */
-
-    }, {
-      key: "_handleKeypress",
-      value: function _handleKeypress(event) {
-        if (event.which === 13 || event.which === 32) {
-          this._toggle(event.target);
-        }
-      }
-    }, {
-      key: "_toggle",
-      value: function _toggle(element) {
-        var heading = element.querySelector(this.options.selectorAccordionItemHeading);
-        var expanded = heading.getAttribute('aria-expanded');
-
-        if (expanded !== null) {
-          heading.setAttribute('aria-expanded', expanded === 'true' ? 'false' : 'true');
-        }
-
-        element.classList.toggle(this.options.classActive);
-      }
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode NumberInput.create .create()}, or {@linkcode NumberInput.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode NumberInput.init .init()} works.
-       * @property {string} selectorInit The CSS selector to find accordion UIs.
-       */
-
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-accordion]',
-          selectorAccordionItem: ".".concat(prefix, "--accordion__item"),
-          selectorAccordionItemHeading: ".".concat(prefix, "--accordion__heading"),
-          selectorAccordionContent: ".".concat(prefix, "--accordion__content"),
-          classActive: "".concat(prefix, "--accordion__item--active")
-        };
-      }
-      /**
-       * The map associating DOM element and accordion UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return Accordion;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Accordion, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var CopyButton =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(CopyButton, _mixin);
-
-    /**
-     * CopyBtn UI.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a copy button UI.
-     */
-    function CopyButton(element, options) {
-      var _this;
-
-      _classCallCheck(this, CopyButton);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(CopyButton).call(this, element, options));
-
-      _this.manage(on(_this.element, 'click', function () {
-        return _this.handleClick();
-      }));
-
-      return _this;
-    }
-    /**
-     * Show the feedback tooltip on click. Hide the feedback tooltip after specified timeout value.
-     */
-
-
-    _createClass(CopyButton, [{
-      key: "handleClick",
-      value: function handleClick() {
-        var _this2 = this;
-
-        var feedback = this.element.querySelector(this.options.feedbackTooltip);
-
-        if (feedback) {
-          feedback.classList.add(this.options.classShowFeedback);
-          setTimeout(function () {
-            feedback.classList.remove(_this2.options.classShowFeedback);
-          }, this.options.timeoutValue);
-        }
-      }
-      /**
-       * The map associating DOM element and copy button UI instance.
-       * @member CopyBtn.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode CopyBtn.create .create()}, or {@linkcode CopyBtn.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode CopyBtn.init .init()} works.
-       * @member CopyBtn.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find copy button UIs.
-       * @property {string} feedbackTooltip The data attribute to find feedback tooltip.
-       * @property {string} classShowFeedback The CSS selector for showing the feedback tooltip.
-       * @property {number} timeoutValue The specified timeout value before the feedback tooltip is hidden.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-copy-btn]',
-          feedbackTooltip: '[data-feedback]',
-          classShowFeedback: "".concat(prefix, "--btn--copy__feedback--displayed"),
-          timeoutValue: 2000
-        };
-      }
-    }]);
-
-    return CopyButton;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(CopyButton, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Notification =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Notification, _mixin);
-
-    /**
-     * InlineNotification.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a InlineNotification.
-     */
-    function Notification(element, options) {
-      var _this;
-
-      _classCallCheck(this, Notification);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Notification).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_changeState", function (state, callback) {
-        if (state === 'delete-notification') {
-          _this.element.parentNode.removeChild(_this.element);
-
-          _this.release();
-        }
-
-        callback();
-      });
-
-      _this.button = element.querySelector(_this.options.selectorButton);
-
-      if (_this.button) {
-        _this.manage(on(_this.button, 'click', function (evt) {
-          if (evt.currentTarget === _this.button) {
-            _this.remove();
-          }
-        }));
-      }
-
-      return _this;
-    }
-
-    _createClass(Notification, [{
-      key: "remove",
-      value: function remove() {
-        this.changeState('delete-notification');
-      }
-      /**
-       * The map associating DOM element and accordion UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return Notification;
-  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
-
-  _defineProperty(Notification, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(Notification, "options",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    selectorInit: '[data-notification]',
-    selectorButton: '[data-notification-btn]',
-    eventBeforeDeleteNotification: 'notification-before-delete',
-    eventAfterDeleteNotification: 'notification-after-delete'
-  });
-
-  var toArray$9 = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var Toolbar =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Toolbar, _mixin);
-
-    /**
-     * Toolbar.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as an toolbar.
-     */
-    function Toolbar(element, options) {
-      var _this;
-
-      _classCallCheck(this, Toolbar);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Toolbar).call(this, element, options));
-
-      if (!_this.element.dataset.tableTarget) {
-        console.warn('There is no table bound to this toolbar!'); // eslint-disable-line no-console
-      } else {
-        var boundTable = _this.element.ownerDocument.querySelector(_this.element.dataset.tableTarget);
-
-        var rowHeightBtns = _this.element.querySelector(_this.options.selectorRowHeight);
-
-        if (rowHeightBtns) {
-          _this.manage(on(rowHeightBtns, 'click', function (event) {
-            _this._handleRowHeightChange(event, boundTable);
-          })); // toArray(this.element.querySelectorAll(this.options.selectorRowHeight)).forEach((item) => {
-          //   item.addEventListener('click', (event) => { this._handleRowHeightChange(event, boundTable); });
-          // });
-
-        }
-      }
-
-      _this.manage(on(_this.element.ownerDocument, 'keydown', function (evt) {
-        _this._handleKeyDown(evt);
-      }));
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (evt) {
-        _this._handleDocumentClick(evt);
-      }));
-
-      return _this;
-    }
-    /**
-     * Handles toggling of active state of the toolbar search input
-     * @param {Event} event The event triggering this method.
-     */
-
-
-    _createClass(Toolbar, [{
-      key: "_handleDocumentClick",
-      value: function _handleDocumentClick(event) {
-        var _this2 = this;
-
-        var searchInput = eventMatches(event, this.options.selectorSearch);
-        var isOfSelfSearchInput = searchInput && this.element.contains(searchInput);
-
-        if (isOfSelfSearchInput) {
-          var shouldBeOpen = isOfSelfSearchInput && !this.element.classList.contains(this.options.classSearchActive);
-          searchInput.classList.toggle(this.options.classSearchActive, shouldBeOpen);
-
-          if (shouldBeOpen) {
-            searchInput.querySelector('input').focus();
-          }
-        }
-
-        var targetComponentElement = eventMatches(event, this.options.selectorInit);
-        toArray$9(this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)).forEach(function (item) {
-          if (!targetComponentElement || !targetComponentElement.contains(item)) {
-            item.classList.remove(_this2.options.classSearchActive);
-          }
-        });
-      }
-      /**
-       * Handles toggling of active state of the toolbar search input via the keyboard
-       * @param {Event} event The event triggering this method.
-       */
-
-    }, {
-      key: "_handleKeyDown",
-      value: function _handleKeyDown(event) {
-        var searchInput = eventMatches(event, this.options.selectorSearch);
-
-        if (searchInput && event.which === 27) {
-          searchInput.classList.remove(this.options.classSearchActive);
-        }
-      }
-      /**
-       * Handles toggling of the row height of the associated table
-       * @param {Event} event The event triggering this method.
-       * @param {HTMLElement} boundTable The table associated with the toolbar.
-       */
-
-    }, {
-      key: "_handleRowHeightChange",
-      value: function _handleRowHeightChange(event, boundTable) {
-        var _event$currentTarget$ = event.currentTarget.querySelector('input:checked'),
-            value = _event$currentTarget$.value;
-
-        if (value === 'tall') {
-          boundTable.classList.add(this.options.classTallRows);
-        } else {
-          boundTable.classList.remove(this.options.classTallRows);
-        }
-      }
-      /**
-       * The map associating DOM element and Toolbar UI instance.
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * properties in this object are overriden for the instance being created.
-       * @property {string} selectorInit The CSS selector to find toolbar instances.
-       * @property {string} selectorSearch The CSS selector to find search inputs in a toolbar.
-       * @property {string} selectorRowHeight The CSS selector to find the row height inputs in a toolbar.
-       * @property {string} classTallRows The CSS class for making table rows into tall rows.
-       * @property {string} classSearchActive The CSS class the active state of the search input.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-toolbar]',
-          selectorSearch: '[data-toolbar-search]',
-          selectorRowHeight: '[data-row-height]',
-          classTallRows: "".concat(prefix, "--responsive-table--tall"),
-          classSearchActive: "".concat(prefix, "--toolbar-search--active")
-        };
-      }
-    }]);
-
-    return Toolbar;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(Toolbar, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  /**
-   * lodash (Custom Build) <https://lodash.com/>
-   * Build: `lodash modularize exports="npm" -o ./`
-   * Copyright jQuery Foundation and other contributors <https://jquery.org/>
-   * Released under MIT license <https://lodash.com/license>
-   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
-   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-   */
-
-  /** Used as the `TypeError` message for "Functions" methods. */
-  var FUNC_ERROR_TEXT = 'Expected a function';
-
-  /** Used as references for various `Number` constants. */
-  var NAN = 0 / 0;
-
-  /** `Object#toString` result references. */
-  var symbolTag = '[object Symbol]';
-
-  /** Used to match leading and trailing whitespace. */
-  var reTrim = /^\s+|\s+$/g;
-
-  /** Used to detect bad signed hexadecimal string values. */
-  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-  /** Used to detect binary string values. */
-  var reIsBinary = /^0b[01]+$/i;
-
-  /** Used to detect octal string values. */
-  var reIsOctal = /^0o[0-7]+$/i;
-
-  /** Built-in method references without a dependency on `root`. */
-  var freeParseInt = parseInt;
-
-  /** Detect free variable `global` from Node.js. */
-  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-  /** Detect free variable `self`. */
-  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-  /** Used as a reference to the global object. */
-  var root = freeGlobal || freeSelf || Function('return this')();
-
-  /** Used for built-in method references. */
-  var objectProto = Object.prototype;
-
-  /**
-   * Used to resolve the
-   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-   * of values.
-   */
-  var objectToString = objectProto.toString;
-
-  /* Built-in method references for those with the same name as other `lodash` methods. */
-  var nativeMax = Math.max,
-      nativeMin = Math.min;
-
-  /**
-   * Gets the timestamp of the number of milliseconds that have elapsed since
-   * the Unix epoch (1 January 1970 00:00:00 UTC).
-   *
-   * @static
-   * @memberOf _
-   * @since 2.4.0
-   * @category Date
-   * @returns {number} Returns the timestamp.
-   * @example
-   *
-   * _.defer(function(stamp) {
-   *   console.log(_.now() - stamp);
-   * }, _.now());
-   * // => Logs the number of milliseconds it took for the deferred invocation.
-   */
-  var now = function() {
-    return root.Date.now();
-  };
-
-  /**
-   * Creates a debounced function that delays invoking `func` until after `wait`
-   * milliseconds have elapsed since the last time the debounced function was
-   * invoked. The debounced function comes with a `cancel` method to cancel
-   * delayed `func` invocations and a `flush` method to immediately invoke them.
-   * Provide `options` to indicate whether `func` should be invoked on the
-   * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
-   * with the last arguments provided to the debounced function. Subsequent
-   * calls to the debounced function return the result of the last `func`
-   * invocation.
-   *
-   * **Note:** If `leading` and `trailing` options are `true`, `func` is
-   * invoked on the trailing edge of the timeout only if the debounced function
-   * is invoked more than once during the `wait` timeout.
-   *
-   * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-   * until to the next tick, similar to `setTimeout` with a timeout of `0`.
-   *
-   * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
-   * for details over the differences between `_.debounce` and `_.throttle`.
-   *
-   * @static
-   * @memberOf _
-   * @since 0.1.0
-   * @category Function
-   * @param {Function} func The function to debounce.
-   * @param {number} [wait=0] The number of milliseconds to delay.
-   * @param {Object} [options={}] The options object.
-   * @param {boolean} [options.leading=false]
-   *  Specify invoking on the leading edge of the timeout.
-   * @param {number} [options.maxWait]
-   *  The maximum time `func` is allowed to be delayed before it's invoked.
-   * @param {boolean} [options.trailing=true]
-   *  Specify invoking on the trailing edge of the timeout.
-   * @returns {Function} Returns the new debounced function.
-   * @example
-   *
-   * // Avoid costly calculations while the window size is in flux.
-   * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
-   *
-   * // Invoke `sendMail` when clicked, debouncing subsequent calls.
-   * jQuery(element).on('click', _.debounce(sendMail, 300, {
-   *   'leading': true,
-   *   'trailing': false
-   * }));
-   *
-   * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
-   * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
-   * var source = new EventSource('/stream');
-   * jQuery(source).on('message', debounced);
-   *
-   * // Cancel the trailing debounced invocation.
-   * jQuery(window).on('popstate', debounced.cancel);
-   */
-  function debounce(func, wait, options) {
-    var lastArgs,
-        lastThis,
-        maxWait,
-        result,
-        timerId,
-        lastCallTime,
-        lastInvokeTime = 0,
-        leading = false,
-        maxing = false,
-        trailing = true;
-
-    if (typeof func != 'function') {
-      throw new TypeError(FUNC_ERROR_TEXT);
-    }
-    wait = toNumber(wait) || 0;
-    if (isObject(options)) {
-      leading = !!options.leading;
-      maxing = 'maxWait' in options;
-      maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-      trailing = 'trailing' in options ? !!options.trailing : trailing;
-    }
-
-    function invokeFunc(time) {
-      var args = lastArgs,
-          thisArg = lastThis;
-
-      lastArgs = lastThis = undefined;
-      lastInvokeTime = time;
-      result = func.apply(thisArg, args);
-      return result;
-    }
-
-    function leadingEdge(time) {
-      // Reset any `maxWait` timer.
-      lastInvokeTime = time;
-      // Start the timer for the trailing edge.
-      timerId = setTimeout(timerExpired, wait);
-      // Invoke the leading edge.
-      return leading ? invokeFunc(time) : result;
-    }
-
-    function remainingWait(time) {
-      var timeSinceLastCall = time - lastCallTime,
-          timeSinceLastInvoke = time - lastInvokeTime,
-          result = wait - timeSinceLastCall;
-
-      return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
-    }
-
-    function shouldInvoke(time) {
-      var timeSinceLastCall = time - lastCallTime,
-          timeSinceLastInvoke = time - lastInvokeTime;
-
-      // Either this is the first call, activity has stopped and we're at the
-      // trailing edge, the system time has gone backwards and we're treating
-      // it as the trailing edge, or we've hit the `maxWait` limit.
-      return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-        (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-    }
-
-    function timerExpired() {
-      var time = now();
-      if (shouldInvoke(time)) {
-        return trailingEdge(time);
-      }
-      // Restart the timer.
-      timerId = setTimeout(timerExpired, remainingWait(time));
-    }
-
-    function trailingEdge(time) {
-      timerId = undefined;
-
-      // Only invoke if we have `lastArgs` which means `func` has been
-      // debounced at least once.
-      if (trailing && lastArgs) {
-        return invokeFunc(time);
-      }
-      lastArgs = lastThis = undefined;
-      return result;
-    }
-
-    function cancel() {
-      if (timerId !== undefined) {
-        clearTimeout(timerId);
-      }
-      lastInvokeTime = 0;
-      lastArgs = lastCallTime = lastThis = timerId = undefined;
-    }
-
-    function flush() {
-      return timerId === undefined ? result : trailingEdge(now());
-    }
-
-    function debounced() {
-      var time = now(),
-          isInvoking = shouldInvoke(time);
-
-      lastArgs = arguments;
-      lastThis = this;
-      lastCallTime = time;
-
-      if (isInvoking) {
-        if (timerId === undefined) {
-          return leadingEdge(lastCallTime);
-        }
-        if (maxing) {
-          // Handle invocations in a tight loop.
-          timerId = setTimeout(timerExpired, wait);
-          return invokeFunc(lastCallTime);
-        }
-      }
-      if (timerId === undefined) {
-        timerId = setTimeout(timerExpired, wait);
-      }
-      return result;
-    }
-    debounced.cancel = cancel;
-    debounced.flush = flush;
-    return debounced;
-  }
-
-  /**
-   * Checks if `value` is the
-   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
-   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
-   *
-   * @static
-   * @memberOf _
-   * @since 0.1.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
-   * @example
-   *
-   * _.isObject({});
-   * // => true
-   *
-   * _.isObject([1, 2, 3]);
-   * // => true
-   *
-   * _.isObject(_.noop);
-   * // => true
-   *
-   * _.isObject(null);
-   * // => false
-   */
-  function isObject(value) {
-    var type = typeof value;
-    return !!value && (type == 'object' || type == 'function');
-  }
-
-  /**
-   * Checks if `value` is object-like. A value is object-like if it's not `null`
-   * and has a `typeof` result of "object".
-   *
-   * @static
-   * @memberOf _
-   * @since 4.0.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-   * @example
-   *
-   * _.isObjectLike({});
-   * // => true
-   *
-   * _.isObjectLike([1, 2, 3]);
-   * // => true
-   *
-   * _.isObjectLike(_.noop);
-   * // => false
-   *
-   * _.isObjectLike(null);
-   * // => false
-   */
-  function isObjectLike(value) {
-    return !!value && typeof value == 'object';
-  }
-
-  /**
-   * Checks if `value` is classified as a `Symbol` primitive or object.
-   *
-   * @static
-   * @memberOf _
-   * @since 4.0.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
-   * @example
-   *
-   * _.isSymbol(Symbol.iterator);
-   * // => true
-   *
-   * _.isSymbol('abc');
-   * // => false
-   */
-  function isSymbol(value) {
-    return typeof value == 'symbol' ||
-      (isObjectLike(value) && objectToString.call(value) == symbolTag);
-  }
-
-  /**
-   * Converts `value` to a number.
-   *
-   * @static
-   * @memberOf _
-   * @since 4.0.0
-   * @category Lang
-   * @param {*} value The value to process.
-   * @returns {number} Returns the number.
-   * @example
-   *
-   * _.toNumber(3.2);
-   * // => 3.2
-   *
-   * _.toNumber(Number.MIN_VALUE);
-   * // => 5e-324
-   *
-   * _.toNumber(Infinity);
-   * // => Infinity
-   *
-   * _.toNumber('3.2');
-   * // => 3.2
-   */
-  function toNumber(value) {
-    if (typeof value == 'number') {
-      return value;
-    }
-    if (isSymbol(value)) {
-      return NAN;
-    }
-    if (isObject(value)) {
-      var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-      value = isObject(other) ? (other + '') : other;
-    }
-    if (typeof value != 'string') {
-      return value === 0 ? value : +value;
-    }
-    value = value.replace(reTrim, '');
-    var isBinary = reIsBinary.test(value);
-    return (isBinary || reIsOctal.test(value))
-      ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-      : (reIsBadHex.test(value) ? NAN : +value);
-  }
-
-  var lodash_debounce = debounce;
-
-  /**
-   * @param {Element} menuBody The menu body with the menu arrow.
-   * @param {string} menuDirection Where the floating menu menu should be placed relative to the trigger button.
-   * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
-   * @private
-   */
-
-  var getMenuOffset$1 = function getMenuOffset(menuBody, menuDirection) {
-    var _DIRECTION_LEFT$DIREC, _DIRECTION_LEFT$DIREC2;
-
-    var arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody, ':before');
-    var arrowPositionProp = (_DIRECTION_LEFT$DIREC = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, 'right'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, 'bottom'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC)[menuDirection];
-    var menuPositionAdjustmentProp = (_DIRECTION_LEFT$DIREC2 = {}, _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_LEFT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_TOP, 'top'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC2)[menuDirection];
-    var values = [arrowPositionProp, 'border-bottom-width'].reduce(function (o, name) {
-      return _objectSpread({}, o, _defineProperty({}, name, Number((/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1])));
-    }, {});
-    values[arrowPositionProp] = values[arrowPositionProp] || -6; // IE, etc.
-
-    if (Object.keys(values).every(function (name) {
-      return !isNaN(values[name]);
-    })) {
-      var arrowPosition = values[arrowPositionProp],
-          borderBottomWidth = values['border-bottom-width'];
-      return _defineProperty({
-        left: 0,
-        top: 0
-      }, menuPositionAdjustmentProp, Math.sqrt(Math.pow(borderBottomWidth, 2) * 2) - arrowPosition);
-    }
-
-    return undefined;
-  };
-
-  var Tooltip =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Tooltip, _mixin);
-
-    /**
-     * Tooltip.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     */
-    function Tooltip(element, options) {
-      var _this;
-
-      _classCallCheck(this, Tooltip);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_hasContextMenu", false);
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_debouncedHandleClick", lodash_debounce(_this._handleClick, 200));
-
-      _this._hookOn(element);
-
-      return _this;
-    }
-    /**
-     * A flag to detect if `oncontextmenu` event is fired right before `focus`/`blur` events.
-     * @type {boolean}
-     */
-
-
-    _createClass(Tooltip, [{
-      key: "createdByEvent",
-
-      /**
-       * A method called when this widget is created upon events.
-       * @param {Event} event The event triggering the creation.
-       */
-      value: function createdByEvent(event) {
-        var relatedTarget = event.relatedTarget,
-            type = event.type;
-
-        this._debouncedHandleClick({
-          relatedTarget: relatedTarget,
-          type: type === 'focusin' ? 'focus' : type,
-          details: getLaunchingDetails(event)
-        });
-      }
-      /**
-       * Changes the shown/hidden state.
-       * @param {string} state The new state.
-       * @param {Object} detail The detail of the event trigging this action.
-       * @param {Function} callback Callback called when change in state completes.
-       // */
-
-    }, {
-      key: "changeState",
-      value: function changeState(state, detail, callback) {
-        if (!this.tooltip) {
-          var tooltip = this.element.ownerDocument.querySelector(this.element.getAttribute(this.options.attribTooltipTarget));
-
-          if (!tooltip) {
-            throw new Error('Cannot find the target tooltip.');
-          } // Lazily create a component instance for tooltip
-
-
-          this.tooltip = FloatingMenu.create(tooltip, {
-            refNode: this.element,
-            classShown: this.options.classShown,
-            offset: this.options.objMenuOffset
-          });
-
-          this._hookOn(tooltip);
-
-          this.children.push(this.tooltip);
-        } // 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);
-      }
-      /**
-       * Attaches event handlers to show/hide the tooltip.
-       * @param {Element} element The element to attach the events to.
-       * @private
-       */
-
-    }, {
-      key: "_hookOn",
-      value: function _hookOn(element) {
-        var _this2 = this;
-
-        var hasFocusin = 'onfocusin' in window;
-        var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-        [focusinEventName, 'blur', 'touchleave', 'touchcancel'].forEach(function (name) {
-          _this2.manage(on(element, name, function (event) {
-            var relatedTarget = event.relatedTarget,
-                type = event.type;
-            var hadContextMenu = _this2._hasContextMenu;
-            _this2._hasContextMenu = type === 'contextmenu';
-
-            _this2._debouncedHandleClick({
-              relatedTarget: relatedTarget,
-              type: type === 'focusin' ? 'focus' : type,
-              hadContextMenu: hadContextMenu,
-              details: getLaunchingDetails(event)
-            });
-          }, name === focusinEventName && !hasFocusin));
-        });
-      }
-      /**
-       * Handles click/focus events.
-       * @param {Object} params The parameters.
-       * @param {Element} params.relatedTarget The element that focus went to. (For `blur` event)
-       * @param {string} params.type The event type triggering this method.
-       * @param {boolean} params.hadContextMenu
-       * @param {Object} params.details The event details.
-       * @private
-       */
-
-    }, {
-      key: "_handleClick",
-      value: function _handleClick(_ref2) {
-        var relatedTarget = _ref2.relatedTarget,
-            type = _ref2.type,
-            hadContextMenu = _ref2.hadContextMenu,
-            details = _ref2.details;
-        var state = {
-          focus: 'shown',
-          blur: 'hidden',
-          touchleave: 'hidden',
-          touchcancel: 'hidden'
-        }[type];
-        var shouldPreventClose;
-
-        if (type === 'blur') {
-          // Note: SVGElement in IE11 does not have `.contains()`
-          var wentToSelf = relatedTarget && this.element.contains && this.element.contains(relatedTarget) || this.tooltip && this.tooltip.element.contains(relatedTarget);
-          shouldPreventClose = hadContextMenu || wentToSelf;
-        }
-
-        if (!shouldPreventClose) {
-          this.changeState(state, details);
-        }
-      }
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-tooltip-trigger]',
-          classShown: "".concat(prefix, "--tooltip--shown"),
-          attribTooltipTarget: 'data-tooltip-target',
-          objMenuOffset: getMenuOffset$1,
-          initEventNames: ['focus']
-        };
-      }
-    }]);
-
-    return Tooltip;
-  }(mixin(createComponent, initComponentByEvent, exports$1, handles));
-
-  _defineProperty(Tooltip, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$a = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var ProgressIndicator =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(ProgressIndicator, _mixin);
-
-    /**
-     * ProgressIndicator.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @param {HTMLElement} element The element representing the ProgressIndicator.
-     * @param {Object} [options] The component options.
-     * @property {string} [options.selectorStepElement] The CSS selector to find step elements.
-     * @property {string} [options.selectorCurrent] The CSS selector to find the current step element.
-     * @property {string} [options.selectorIncomplete] The CSS class to find incomplete step elements.
-     * @property {string} [options.selectorComplete] The CSS selector to find completed step elements.
-     * @property {string} [options.classStep] The className for a step element.
-     * @property {string} [options.classComplete] The className for a completed step element.
-     * @property {string} [options.classCurrent] The className for the current step element.
-     * @property {string} [options.classIncomplete] The className for a incomplete step element.
-     */
-    function ProgressIndicator(element, options) {
-      var _this;
-
-      _classCallCheck(this, ProgressIndicator);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ProgressIndicator).call(this, element, options));
-      /**
-       * The component state.
-       * @type {Object}
-       */
-
-      _this.state = {
-        /**
-         * The current step index.
-         * @type {number}
-         */
-        currentIndex: _this.getCurrent().index,
-
-        /**
-         * Total number of steps.
-         * @type {number}
-         */
-        totalSteps: _this.getSteps().length
-      };
-
-      _this.addOverflowTooltip();
-
-      return _this;
-    }
-    /**
-     * Returns all steps with details about element and index.
-     */
-
-
-    _createClass(ProgressIndicator, [{
-      key: "getSteps",
-      value: function getSteps() {
-        return toArray$a(this.element.querySelectorAll(this.options.selectorStepElement)).map(function (element, index) {
-          return {
-            element: element,
-            index: index
-          };
-        });
-      }
-      /**
-       * Returns current step; gives detail about element and index.
-       */
-
-    }, {
-      key: "getCurrent",
-      value: function getCurrent() {
-        var currentEl = this.element.querySelector(this.options.selectorCurrent);
-        return this.getSteps().filter(function (step) {
-          return step.element === currentEl;
-        })[0];
-      }
-      /**
-       * Sets the current step.
-       * * @param {Number} new step index or use default in `this.state.currentIndex`.
-       */
-
-    }, {
-      key: "setCurrent",
-      value: function setCurrent() {
-        var _this2 = this;
-
-        var newCurrentStep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.currentIndex;
-        var changed = false;
-
-        if (newCurrentStep !== this.state.currentIndex) {
-          this.state.currentIndex = newCurrentStep;
-          changed = true;
-        }
-
-        if (changed) {
-          this.getSteps().forEach(function (step) {
-            if (step.index < newCurrentStep) {
-              _this2._updateStep({
-                element: step.element,
-                className: _this2.options.classComplete,
-                html: _this2._getSVGComplete()
-              });
-            }
-
-            if (step.index === newCurrentStep) {
-              _this2._updateStep({
-                element: step.element,
-                className: _this2.options.classCurrent,
-                html: _this2._getCurrentSVG()
-              });
-            }
-
-            if (step.index > newCurrentStep) {
-              _this2._updateStep({
-                element: step.element,
-                className: _this2.options.classIncomplete,
-                html: _this2._getIncompleteSVG()
-              });
-            }
-          });
-        }
-      }
-      /**
-       * Update step with correct inline SVG and className
-       * @param {Object} args
-       * @param {Object} [args.element] target element
-       * @param {Object} [args.className] new className
-       * @param {Object} [args.html] new inline SVG to insert
-       */
-
-    }, {
-      key: "_updateStep",
-      value: function _updateStep(args) {
-        var element = args.element,
-            className = args.className,
-            html = args.html;
-
-        if (element.firstElementChild) {
-          element.removeChild(element.firstElementChild);
-        }
-
-        if (!element.classList.contains(className)) {
-          element.setAttribute('class', this.options.classStep);
-          element.classList.add(className);
-        }
-
-        element.insertAdjacentHTML('afterbegin', html);
-      }
-      /**
-       * Returns HTML string for an SVG used to represent a compelted step (checkmark)
-       */
-
-    }, {
-      key: "_getSVGComplete",
-      value: function _getSVGComplete() {
-        return "<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\">\n        <circle cx=\"12\" cy=\"12\" r=\"12\"></circle>\n        <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>\n      </svg>";
-      }
-      /**
-       * Returns HTML string for an SVG used to represent current step (circles, like a radio button, but not.)
-       */
-
-    }, {
-      key: "_getCurrentSVG",
-      value: function _getCurrentSVG() {
-        return "<svg>\n        <circle cx=\"12\" cy=\"12\" r=\"12\"></circle>\n        <circle cx=\"12\" cy=\"12\" r=\"6\"></circle>\n      </svg>";
-      }
-      /**
-       * Returns HTML string for an SVG used to represent incomple step (grey empty circle)
-       */
-
-    }, {
-      key: "_getIncompleteSVG",
-      value: function _getIncompleteSVG() {
-        return "<svg>\n        <circle cx=\"12\" cy=\"12\" r=\"12\"></circle>\n      </svg>";
-      }
-    }, {
-      key: "addOverflowTooltip",
-      value: function addOverflowTooltip() {
-        var _this3 = this;
-
-        var stepLabels = toArray$a(this.element.querySelectorAll(this.options.selectorLabel));
-        var tooltips = toArray$a(this.element.querySelectorAll(this.options.selectorTooltip));
-        stepLabels.forEach(function (step) {
-          if (step.scrollWidth > _this3.options.maxWidth) {
-            step.classList.add(_this3.options.classOverflowLabel);
-          }
-        });
-        tooltips.forEach(function (tooltip) {
-          var childText = tooltip.querySelector(_this3.options.selectorTooltipText);
-
-          if (childText.scrollHeight > _this3.options.tooltipMaxHeight) {
-            tooltip.classList.add(_this3.options.classTooltipMulti);
-          }
-        });
-      }
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode ProgressIndicator.create .create()}, or {@linkcode ProgressIndicator.init .init()},
-       * properties in this object are overriden for the instance being created.
-       * @member ProgressIndicator.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS selector to find content switcher button set.
-       * @property {string} [selectorStepElement] The CSS selector to find step elements.
-       * @property {string} [selectorCurrent] The CSS selector to find the current step element.
-       * @property {string} [selectorIncomplete] The CSS class to find incomplete step elements.
-       * @property {string} [selectorComplete] The CSS selector to find completed step elements.
-       * @property {string} [classStep] The className for a step element.
-       * @property {string} [classComplete] The className for a completed step element.
-       * @property {string} [classCurrent] The className for the current step element.
-       * @property {string} [classIncomplete] The className for a incomplete step element.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-progress]',
-          selectorStepElement: ".".concat(prefix, "--progress-step"),
-          selectorCurrent: ".".concat(prefix, "--progress-step--current"),
-          selectorIncomplete: ".".concat(prefix, "--progress-step--incomplete"),
-          selectorComplete: ".".concat(prefix, "--progress-step--complete"),
-          selectorLabel: ".".concat(prefix, "--progress-label"),
-          selectorTooltip: ".".concat(prefix, "--tooltip"),
-          selectorTooltipText: ".".concat(prefix, "--tooltip__text"),
-          classStep: "".concat(prefix, "--progress-step"),
-          classComplete: "".concat(prefix, "--progress-step--complete"),
-          classCurrent: "".concat(prefix, "--progress-step--current"),
-          classIncomplete: "".concat(prefix, "--progress-step--incomplete"),
-          classOverflowLabel: "".concat(prefix, "--progress-label-overflow"),
-          classTooltipMulti: "".concat(prefix, "--tooltip_multi"),
-          maxWidth: 87,
-          tooltipMaxHeight: 21
-        };
-      }
-    }]);
-
-    return ProgressIndicator;
-  }(mixin(createComponent, initComponentBySearch));
-
-  _defineProperty(ProgressIndicator, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var toArray$b = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var StructuredList =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(StructuredList, _mixin);
-
-    /**
-     * StructuredList
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The root element of tables
-     * @param {Object} [options] the... options
-     * @param {string} [options.selectorInit] selector initialization
-     * @param {string} [options.selectorRow] css selector for selected row
-     */
-    function StructuredList(element, options) {
-      var _this;
-
-      _classCallCheck(this, StructuredList);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(StructuredList).call(this, element, options));
-
-      _this.manage(on(_this.element, 'keydown', function (evt) {
-        if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40) {
-          _this._handleKeydownArrow(evt);
-        }
-
-        if (evt.which === 13 || evt.which === 32) {
-          _this._handleKeydownChecked(evt);
-        }
-      }));
-
-      _this.manage(on(_this.element, 'click', function (evt) {
-        _this._handleClick(evt);
-      }));
-
-      return _this;
-    }
-
-    _createClass(StructuredList, [{
-      key: "_direction",
-      value: function _direction(evt) {
-        return {
-          37: -1,
-          // backward
-          38: -1,
-          // backward
-          39: 1,
-          // forward
-          40: 1 // forward
-
-        }[evt.which];
-      }
-    }, {
-      key: "_nextIndex",
-      value: function _nextIndex(array, arrayItem, direction) {
-        return array.indexOf(arrayItem) + direction; // returns -1, 0, 1, 2, 3, 4...
-      }
-    }, {
-      key: "_getInput",
-      value: function _getInput(index) {
-        var rows = toArray$b(this.element.querySelectorAll(this.options.selectorRow));
-        return this.element.ownerDocument.querySelector(this.options.selectorListInput(rows[index].getAttribute('for')));
-      }
-    }, {
-      key: "_handleInputChecked",
-      value: function _handleInputChecked(index) {
-        var rows = this.element.querySelectorAll(this.options.selectorRow);
-        var input = this.getInput(index) || rows[index].querySelector('input');
-        input.checked = true;
-      }
-    }, {
-      key: "_handleClick",
-      value: function _handleClick(evt) {
-        var _this2 = this;
-
-        var selectedRow = eventMatches(evt, this.options.selectorRow);
-        toArray$b(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
-          return row.classList.remove(_this2.options.classActive);
-        });
-
-        if (selectedRow) {
-          selectedRow.classList.add(this.options.classActive);
-        }
-      } // Handle Enter or Space keydown events for selecting <label> rows
-
-    }, {
-      key: "_handleKeydownChecked",
-      value: function _handleKeydownChecked(evt) {
-        var _this3 = this;
-
-        evt.preventDefault(); // prevent spacebar from scrolling page
-
-        var selectedRow = eventMatches(evt, this.options.selectorRow);
-        toArray$b(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
-          return row.classList.remove(_this3.options.classActive);
-        });
-
-        if (selectedRow) {
-          selectedRow.classList.add(this.options.classActive);
-          var input = selectedRow.querySelector(this.options.selectorListInput(selectedRow.getAttribute('for'))) || selectedRow.querySelector('input');
-          input.checked = true;
-        }
-      } // Handle up and down keydown events for selecting <label> rows
-
-    }, {
-      key: "_handleKeydownArrow",
-      value: function _handleKeydownArrow(evt) {
-        var _this4 = this;
-
-        evt.preventDefault(); // prevent arrow keys from scrolling
-
-        var selectedRow = eventMatches(evt, this.options.selectorRow);
-
-        var direction = this._direction(evt);
-
-        if (direction && selectedRow !== undefined) {
-          var rows = toArray$b(this.element.querySelectorAll(this.options.selectorRow));
-          rows.forEach(function (row) {
-            return row.classList.remove(_this4.options.classActive);
-          });
-          var firstIndex = 0;
-
-          var nextIndex = this._nextIndex(rows, selectedRow, direction);
-
-          var lastIndex = rows.length - 1;
-
-          var getSelectedIndex = function getSelectedIndex() {
-            switch (nextIndex) {
-              case -1:
-                return lastIndex;
-
-              case rows.length:
-                return firstIndex;
-
-              default:
-                return nextIndex;
-            }
-          };
-
-          var selectedIndex = getSelectedIndex();
-          rows[selectedIndex].classList.add(this.options.classActive);
-          rows[selectedIndex].focus();
-
-          this._handleInputChecked(selectedIndex);
-        }
-      }
-    }], [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-structured-list]',
-          selectorRow: "[data-structured-list] .".concat(prefix, "--structured-list-tbody > label.").concat(prefix, "--structured-list-row"),
-          selectorListInput: function selectorListInput(id) {
-            return "#".concat(id, ".").concat(prefix, "--structured-list-input");
-          },
-          classActive: "".concat(prefix, "--structured-list-row--selected")
-        };
-      }
-    }]);
-
-    return StructuredList;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(StructuredList, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Slider =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Slider, _mixin);
-
-    /**
-     * Slider.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as an slider.
-     */
-    function Slider(element, options) {
-      var _this;
-
-      _classCallCheck(this, Slider);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Slider).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_changeState", function (state, detail, callback) {
-        callback();
-      });
-
-      _this.sliderActive = false;
-      _this.dragging = false;
-      _this.track = _this.element.querySelector(_this.options.selectorTrack);
-      _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._updateInput();
-
-        _this.manage(on(_this.boundInput, 'change', function (evt) {
-          _this.setValue(evt.target.value);
-        }));
-
-        _this.manage(on(_this.boundInput, 'focus', function (evt) {
-          evt.target.select();
-        })); // workaround for safari
-
-
-        _this.manage(on(_this.boundInput, 'mouseup', function (evt) {
-          evt.preventDefault();
-        }));
-      }
-
-      _this._updatePosition();
-
-      _this.manage(on(_this.thumb, 'mousedown', function () {
-        _this.sliderActive = true;
-      }));
-
-      _this.manage(on(_this.element.ownerDocument, 'mouseup', function () {
-        _this.sliderActive = false;
-      }));
-
-      _this.manage(on(_this.element.ownerDocument, 'mousemove', function (evt) {
-        var disabled = _this.element.classList.contains(_this.options.classDisabled);
-
-        if (_this.sliderActive === true && !disabled) {
-          _this._updatePosition(evt);
-        }
-      }));
-
-      _this.manage(on(_this.thumb, 'keydown', function (evt) {
-        var disabled = _this.element.classList.contains(_this.options.classDisabled);
-
-        if (!disabled) {
-          _this._updatePosition(evt);
-        }
-      }));
-
-      _this.manage(on(_this.track, 'click', function (evt) {
-        var disabled = _this.element.classList.contains(_this.options.classDisabled);
-
-        if (!disabled) {
-          _this._updatePosition(evt);
-        }
-      }));
-
-      return _this;
-    }
-
-    _createClass(Slider, [{
-      key: "_updatePosition",
-      value: function _updatePosition(evt) {
-        var _this2 = this;
-
-        var _this$_calcValue = this._calcValue(evt),
-            left = _this$_calcValue.left,
-            newValue = _this$_calcValue.newValue;
-
-        if (this.dragging) {
-          return;
-        }
-
-        this.dragging = true;
-        requestAnimationFrame(function () {
-          _this2.dragging = false;
-          _this2.thumb.style.left = "".concat(left, "%");
-          _this2.filledTrack.style.transform = "translate(0%, -50%) scaleX(".concat(left / 100, ")");
-          _this2.input.value = newValue;
-
-          _this2._updateInput();
-
-          _this2.changeState('slider-value-change', {
-            value: newValue
-          });
-        });
-      }
-    }, {
-      key: "_calcValue",
-      value: function _calcValue(evt) {
-        var _this$getInputProps = this.getInputProps(),
-            value = _this$getInputProps.value,
-            min = _this$getInputProps.min,
-            max = _this$getInputProps.max,
-            step = _this$getInputProps.step;
-
-        var range = max - min;
-        var valuePercentage = (value - min) / range * 100;
-        var left;
-        var newValue;
-        left = valuePercentage;
-        newValue = value;
-
-        if (evt) {
-          var type = evt.type;
-
-          if (type === 'keydown') {
-            var direction = {
-              40: -1,
-              // decreasing
-              37: -1,
-              // decreasing
-              38: 1,
-              // increasing
-              39: 1 // increasing
-
-            }[evt.which];
-
-            if (direction !== undefined) {
-              var multiplier = evt.shiftKey === true ? range / step / this.options.stepMultiplier : 1;
-              var stepMultiplied = step * multiplier;
-              var stepSize = stepMultiplied / range * 100;
-              left = valuePercentage + stepSize * direction;
-              newValue = Number(value) + stepMultiplied * direction;
-            }
-          }
-
-          if (type === 'mousemove' || type === 'click') {
-            if (type === 'click') {
-              this.element.querySelector(this.options.selectorThumb).classList.add(this.options.classThumbClicked);
-            } else {
-              this.element.querySelector(this.options.selectorThumb).classList.remove(this.options.classThumbClicked);
-            }
-
-            var track = this.track.getBoundingClientRect();
-            var unrounded = (evt.clientX - track.left) / track.width;
-            var rounded = Math.round(range * unrounded / step) * step;
-            left = rounded / range * 100;
-            newValue = rounded + min;
-          }
-        }
-
-        if (newValue <= Number(min)) {
-          left = 0;
-          newValue = min;
-        }
-
-        if (newValue >= Number(max)) {
-          left = 100;
-          newValue = max;
-        }
-
-        return {
-          left: left,
-          newValue: newValue
-        };
-      }
-    }, {
-      key: "_updateInput",
-      value: function _updateInput() {
-        if (this.boundInput) {
-          this.boundInput.value = this.input.value;
-        }
-      }
-    }, {
-      key: "getInputProps",
-      value: function getInputProps() {
-        var values = {
-          value: Number(this.input.value),
-          min: Number(this.input.min),
-          max: Number(this.input.max),
-          step: this.input.step ? Number(this.input.step) : 1
-        };
-        return values;
-      }
-    }, {
-      key: "setValue",
-      value: function setValue(value) {
-        this.input.value = value;
-
-        this._updatePosition();
-      }
-    }, {
-      key: "stepUp",
-      value: function stepUp() {
-        this.input.stepUp();
-
-        this._updatePosition();
-      }
-    }, {
-      key: "stepDown",
-      value: function stepDown() {
-        this.input.stepDown();
-
-        this._updatePosition();
-      }
-      /**
-       * The map associating DOM element and Slider UI instance.
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * properties in this object are overriden for the instance being created.
-       * @property {string} selectorInit The CSS selector to find slider instances.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-slider]',
-          selectorTrack: ".".concat(prefix, "--slider__track"),
-          selectorFilledTrack: ".".concat(prefix, "--slider__filled-track"),
-          selectorThumb: ".".concat(prefix, "--slider__thumb"),
-          selectorInput: ".".concat(prefix, "--slider__input"),
-          classDisabled: "".concat(prefix, "--slider--disabled"),
-          classThumbClicked: "".concat(prefix, "--slider__thumb--clicked"),
-          eventBeforeSliderValueChange: 'slider-before-value-change',
-          eventAfterSliderValueChange: 'slider-after-value-change',
-          stepMultiplier: 4
-        };
-      }
-    }]);
-
-    return Slider;
-  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
-
-  _defineProperty(Slider, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Tile =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Tile, _mixin);
-
-    /**
-     * Tile.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @param {HTMLElement} element The element working as an Tile.
-     */
-    function Tile(element, options) {
-      var _this;
-
-      _classCallCheck(this, Tile);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tile).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getClass", function (type) {
-        var typeObj = {
-          expandable: _this.options.classExpandedTile,
-          clickable: _this.options.classClickableTile,
-          selectable: _this.options.classSelectableTile
-        };
-        return typeObj[type];
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_hookActions", function (tileClass) {
-        var isExpandable = _this.tileType === 'expandable';
-
-        if (isExpandable) {
-          var aboveTheFold = _this.element.querySelector(_this.options.selectorAboveTheFold);
-
-          var getStyle = _this.element.ownerDocument.defaultView.getComputedStyle(_this.element, null);
-
-          var tilePaddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
-          var tilePaddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
-          var tilePadding = tilePaddingTop + tilePaddingBottom;
-
-          if (aboveTheFold) {
-            _this.tileHeight = _this.element.getBoundingClientRect().height;
-            _this.atfHeight = aboveTheFold.getBoundingClientRect().height + tilePadding;
-            _this.element.style.maxHeight = "".concat(_this.atfHeight, "px");
-          }
-
-          if (_this.element.classList.contains(_this.options.classExpandedTile)) {
-            _this._setTileHeight();
-          }
-        }
-
-        _this.element.addEventListener('click', function (evt) {
-          var input = eventMatches(evt, _this.options.selectorTileInput);
-
-          if (!input) {
-            _this.element.classList.toggle(tileClass);
-          }
-
-          if (isExpandable) {
-            _this._setTileHeight();
-          }
-        });
-
-        _this.element.addEventListener('keydown', function (evt) {
-          var input = _this.element.querySelector(_this.options.selectorTileInput);
-
-          if (input) {
-            if (evt.which === 13 || evt.which === 32) {
-              if (!isExpandable) {
-                _this.element.classList.toggle(tileClass);
-
-                input.checked = !input.checked;
-              }
-            }
-          }
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_setTileHeight", function () {
-        var isExpanded = _this.element.classList.contains(_this.options.classExpandedTile);
-
-        _this.element.style.maxHeight = isExpanded ? "".concat(_this.tileHeight, "px") : "".concat(_this.atfHeight, "px");
-      });
-
-      _this.tileType = _this.element.dataset.tile;
-      _this.tileHeight = 0; // Tracks expandable tile height
-
-      _this.atfHeight = 0; // Tracks above the fold height
-
-      _this._hookActions(_this._getClass(_this.tileType));
-
-      return _this;
-    }
-
-    _createClass(Tile, [{
-      key: "release",
-      value: function release() {
-        _get(_getPrototypeOf(Tile.prototype), "release", this).call(this);
-      }
-      /**
-       * The map associating DOM element and Tile UI instance.
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * properties in this object are overriden for the instance being created.
-       * @property {string} selectorInit The CSS selector to find Tile instances.
-       */
-      get: function get$$1() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-tile]',
-          selectorAboveTheFold: '[data-tile-atf]',
-          selectorTileInput: '[data-tile-input]',
-          classExpandedTile: "".concat(prefix, "--tile--is-expanded"),
-          classClickableTile: "".concat(prefix, "--tile--is-clicked"),
-          classSelectableTile: "".concat(prefix, "--tile--is-selected")
-        };
-      }
-    }]);
-
-    return Tile;
-  }(mixin(createComponent, initComponentBySearch));
-
-  _defineProperty(Tile, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var Carousel =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Carousel, _mixin);
-
-    /**
-     * Carousel.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @param {HTMLElement} element The element working as an carousel.
-     */
-    function Carousel(element, options) {
-      var _this;
-
-      _classCallCheck(this, Carousel);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (evt) {
-        if (evt.target.matches(_this.options.selectorScrollRight)) {
-          _this.sideScroll('right');
-        } else {
-          _this.sideScroll('left');
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "sideScroll", function (direction) {
-        var filmstripWidth = _this.filmstrip.getBoundingClientRect().width;
-
-        var itemWidth = _this.carouselItem.getBoundingClientRect().width + 20;
-        var re = /\.*translateX\((.*)px\)/i;
-        var translateXValue = _this.filmstrip.style.transform ? Number(_this.filmstrip.style.transform.split(re)[1]) : 0;
-        var directionValue = direction === 'right' ? -1 : 1;
-        var itemWidthDirection = itemWidth * directionValue;
-        var newTranslateValue = itemWidthDirection + translateXValue;
-
-        if (newTranslateValue > 0) {
-          newTranslateValue = 0;
-        }
-
-        if (newTranslateValue < filmstripWidth * -1) {
-          newTranslateValue = filmstripWidth * -1;
-        }
-
-        _this.filmstrip.style.transform = "translateX(".concat(newTranslateValue, "px)");
-      });
-
-      _this.filmstrip = _this.element.querySelector(_this.options.selectorFilmstrip);
-      _this.carouselItem = _this.element.querySelector(_this.options.selectorCarouselItem);
-
-      _this.element.addEventListener('click', function (evt) {
-        return _this.handleClick(evt);
-      });
-
-      return _this;
-    }
-
-    _createClass(Carousel, null, [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-carousel]',
-          selectorFilmstrip: ".".concat(prefix, "--filmstrip"),
-          selectorScrollRight: '[data-scroll-right]',
-          selectorScrollLeft: '[data-scroll-left]',
-          selectorCarouselBtn: ".".concat(prefix, "--carousel__btn"),
-          selectorCarouselItem: ".".concat(prefix, "--carousel__item")
-        };
-      }
-      /**
-       * The map associating DOM element and accordion UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return Carousel;
-  }(mixin(createComponent, initComponentBySearch));
-
-  _defineProperty(Carousel, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var carousel = !breakingChangesX ? Carousel : removedComponent('Carousel');
-
-  var toArray$c = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var Lightbox =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Lightbox, _mixin);
-
-    function Lightbox(element, options) {
-      var _this;
-
-      _classCallCheck(this, Lightbox);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Lightbox).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "showLightbox", function (evt) {
-        if (!evt.detail.launchingElement.dataset.carouselItemIndex) {
-          throw new Error('launchingElement must have carouselItemIndex data attribute to indicated what item to display');
-        }
-
-        _this.activeIndex = evt.detail.launchingElement.dataset.carouselItemIndex;
-
-        _this.updateSlide();
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (evt) {
-        if (evt.target.matches(_this.options.selectorScrollRight)) {
-          if (_this.activeIndex < _this.totalSlides) {
-            _this.activeIndex++;
-
-            _this.updateSlide();
-          }
-        }
-
-        if (evt.target.matches(_this.options.selectorScrollLeft)) {
-          if (_this.activeIndex > 0) {
-            _this.activeIndex--;
-
-            _this.updateSlide();
-          }
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateSlide", function () {
-        var items = toArray$c(_this.element.querySelectorAll(_this.options.selectorLightboxItem));
-
-        if (_this.activeIndex < 0 || _this.activeIndex >= items.length) {
-          throw new RangeError('carouselItemIndex data attribute must be in range of lightbox items length');
-        }
-
-        items.forEach(function (item) {
-          return item.classList.remove(_this.options.classActiveItem);
-        });
-
-        items[_this.activeIndex].classList.add(_this.options.classActiveItem);
-      });
-
-      _this.activeIndex = _this.element.dataset.lightboxIndex;
-      _this.totalSlides = _this.element.querySelectorAll(_this.options.selectorLightboxItem).length - 1;
-
-      _this.updateSlide();
-
-      _this.element.addEventListener('click', function (evt) {
-        return _this.handleClick(evt);
-      });
-
-      _this.element.parentNode.addEventListener('modal-beingshown', function (evt) {
-        return _this.showLightbox(evt);
-      });
-
-      return _this;
-    }
-
-    _createClass(Lightbox, null, [{
-      key: "options",
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-lightbox]',
-          selectorScrollRight: '[data-scroll-right]',
-          selectorScrollLeft: '[data-scroll-left]',
-          selectorLightboxItem: ".".concat(prefix, "--lightbox__item"),
-          classActiveItem: "".concat(prefix, "--lightbox__item--shown")
-        };
-      }
-      /**
-       * The map associating DOM element and accordion UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return Lightbox;
-  }(mixin(createComponent, initComponentBySearch));
-
-  _defineProperty(Lightbox, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var lightbox = !breakingChangesX ? Lightbox : removedComponent('Lightbox');
-
-  var CodeSnippet =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(CodeSnippet, _mixin);
-
-    /**
-     * CodeSnippet UI.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a CodeSnippet UI.
-     */
-    function CodeSnippet(element, options) {
-      var _this;
-
-      _classCallCheck(this, CodeSnippet);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(CodeSnippet).call(this, element, options));
-
-      _this._initCodeSnippet();
-
-      _this.element.querySelector(_this.options.classExpandBtn).addEventListener('click', function (evt) {
-        return _this._handleClick(evt);
-      });
-
-      return _this;
-    }
-
-    _createClass(CodeSnippet, [{
-      key: "_handleClick",
-      value: function _handleClick() {
-        var expandBtn = this.element.querySelector(this.options.classExpandText);
-        this.element.classList.toggle(this.options.classExpanded);
-
-        if (this.element.classList.contains(this.options.classExpanded)) {
-          expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowLessText);
-        } else {
-          expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowMoreText);
-        }
-      }
-    }, {
-      key: "_initCodeSnippet",
-      value: function _initCodeSnippet() {
-        var expandBtn = this.element.querySelector(this.options.classExpandText);
-
-        if (!expandBtn) {
-          throw new TypeError('Cannot find the expand button.');
-        }
-
-        expandBtn.textContent = expandBtn.getAttribute(this.options.attribShowMoreText);
-
-        if (this.element.offsetHeight < this.options.minHeight) {
-          this.element.classList.add(this.options.classHideExpand);
-        }
-      }
-      /**
-       * The map associating DOM element and code snippet UI instance.
-       * @member CodeSnippet.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode CodeSnippet.create .create()},
-       * or {@linkcode CodeSnippet.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode CodeSnippet.init .init()} works.
-       * @member CodeSnippet.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find code snippet UIs.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-code-snippet]',
-          attribShowMoreText: 'data-show-more-text',
-          attribShowLessText: 'data-show-less-text',
-          minHeight: 288,
-          classExpanded: "".concat(prefix, "--snippet--expand"),
-          classExpandBtn: ".".concat(prefix, "--snippet-btn--expand"),
-          classExpandText: ".".concat(prefix, "--snippet-btn--text"),
-          classHideExpand: "".concat(prefix, "--snippet-btn--expand--hide")
-        };
-      }
-    }]);
-
-    return CodeSnippet;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(CodeSnippet, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var TextInput =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(TextInput, _mixin);
-
-    /**
-     * Text Input.
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element - The element functioning as a text field.
-     */
-    function TextInput(_element, options) {
-      var _this;
-
-      _classCallCheck(this, TextInput);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(TextInput).call(this, _element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_setIconVisibility", function (_ref) {
-        var iconVisibilityOn = _ref.iconVisibilityOn,
-            iconVisibilityOff = _ref.iconVisibilityOff,
-            passwordIsVisible = _ref.passwordIsVisible,
-            selectorPasswordVisibilityButton = _ref.selectorPasswordVisibilityButton;
-
-        if (passwordIsVisible) {
-          iconVisibilityOn.setAttribute('hidden', true);
-          iconVisibilityOff.removeAttribute('hidden');
-          selectorPasswordVisibilityButton.setAttribute('aria-label', 'Hide password');
-          return;
-        }
-
-        iconVisibilityOn.removeAttribute('hidden');
-        iconVisibilityOff.setAttribute('hidden', true);
-        selectorPasswordVisibilityButton.setAttribute('aria-label', 'Show password');
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggle", function (_ref2) {
-        var element = _ref2.element,
-            button = _ref2.button;
-        // toggle action must come before querying the classList
-        element.classList.toggle(_this.options.passwordIsVisible);
-        var passwordIsVisible = element.classList.contains(_this.options.passwordIsVisible);
-        var iconVisibilityOn = button.querySelector(_this.options.svgIconVisibilityOn);
-        var iconVisibilityOff = button.querySelector(_this.options.svgIconVisibilityOff);
-        var input = element.querySelector(_this.options.selectorPasswordField);
-        var selectorPasswordVisibilityButton = element.querySelector(_this.options.selectorPasswordVisibilityButton);
-
-        _this._setIconVisibility({
-          iconVisibilityOn: iconVisibilityOn,
-          iconVisibilityOff: iconVisibilityOff,
-          passwordIsVisible: passwordIsVisible,
-          selectorPasswordVisibilityButton: selectorPasswordVisibilityButton
-        });
-
-        input.type = passwordIsVisible ? 'text' : 'password';
-      });
-
-      _this.manage(on(_this.element, 'click', function (event) {
-        var toggleVisibilityButton = eventMatches(event, _this.options.selectorPasswordVisibilityButton);
-
-        if (toggleVisibilityButton) {
-          _this._toggle({
-            element: _element,
-            button: toggleVisibilityButton
-          });
-        }
-      }));
-
-      return _this;
-    }
-    /**
-     *
-     * @param {Object} obj - Object containing selectors and visibility status
-     * @param {HTMLElement} obj.iconVisibilityOn - The element functioning as
-     * the SVG icon for visibility on
-     * @param {HTMLElement} obj.iconVisibilityOff - The element functioning as
-     * the SVG icon for visibility off
-     * @param {boolean} obj.passwordIsVisible - The visibility of the password in the
-     * input field
-     */
-
-
-    _createClass(TextInput, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       *
-       * If `options` is specified in the constructor,
-       * {@linkcode TextInput.create .create()},
-       * or {@linkcode TextInput.init .init()},
-       * properties in this object are overriden for the instance being
-       * created and how {@linkcode TextInput.init .init()} works.
-       * @property {string} selectorInit The CSS selector to find text input UIs.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-text-input]',
-          selectorPasswordField: ".".concat(prefix, "--text-input[data-toggle-password-visibility]"),
-          selectorPasswordVisibilityButton: ".".concat(prefix, "--text-input--password__visibility"),
-          passwordIsVisible: "".concat(prefix, "--text-input--password-visible"),
-          svgIconVisibilityOn: "svg.".concat(prefix, "--icon--visibility-on"),
-          svgIconVisibilityOff: "svg.".concat(prefix, "--icon--visibility-off")
-        };
-      }
-      /**
-       * The map associating DOM element and text input UI instance.
-       * @type {WeakMap}
-       */
-
-    }]);
-
-    return TextInput;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(TextInput, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var prefix = settings_1.prefix;
-
-  var SideNav =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(SideNav, _mixin);
-
-    /**
-     * The map associating DOM element and copy button UI instance.
-     * @member SideNav.components
-     * @type {WeakMap}
-     */
-    function SideNav(element, options) {
-      var _this;
-
-      _classCallCheck(this, SideNav);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(SideNav).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleClick", function (evt) {
-        var matchesToggle = eventMatches(evt, _this.options.selectorSideNavToggle);
-        var matchesNavSubmenu = eventMatches(evt, _this.options.selectorSideNavSubmenu);
-        var 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);
-
-          return;
-        }
-
-        if (matchesNavSubmenu) {
-          var isSubmenuExpanded = matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
-          matchesNavSubmenu.setAttribute('aria-expanded', "".concat(!isSubmenuExpanded));
-          return;
-        }
-
-        if (matchesSideNavLink) {
-          _toConsumableArray(_this.element.querySelectorAll(_this.options.selectorSideNavLinkCurrent)).forEach(function (el) {
-            el.classList.remove(_this.options.classSideNavItemActive, _this.options.classSideNavLinkCurrent);
-            el.removeAttribute('aria-current');
-          });
-
-          matchesSideNavLink.classList.add(_this.options.classSideNavLinkCurrent);
-          var closestSideNavItem = matchesSideNavLink.closest(_this.options.selectorSideNavItem);
-
-          if (closestSideNavItem) {
-            closestSideNavItem.classList.add(_this.options.classSideNavItemActive);
-          }
-        }
-      });
-
-      _this.manage(on(element, 'click', _this._handleClick));
-
-      return _this;
-    }
-    /**
-     * Enum for toggling side nav visibility
-     * @readonly
-     * @member SideNav.state
-     * @type {Object}
-     * @property {string} EXPANDED Opening/visible
-     * @property {string} COLLAPSED Closing/hidden
-     */
-
-
-    _createClass(SideNav, [{
-      key: "isNavExpanded",
-
-      /**
-       * @returns {boolean} `true` if the nav is expanded.
-       */
-      value: function isNavExpanded() {
-        return this.element.classList.contains(this.options.classSideNavExpanded);
-      }
-      /**
-       * Changes the expanded/collapsed state.
-       */
-
-    }, {
-      key: "changeState",
-      value: function changeState(state) {
-        this.element.classList.toggle(this.options.classSideNavExpanded, state === this.constructor.state.EXPANDED);
-      }
-    }]);
-
-    return SideNav;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(SideNav, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(SideNav, "state",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    EXPANDED: 'expanded',
-    COLLAPSED: 'collapsed'
-  });
-
-  _defineProperty(SideNav, "options",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    selectorInit: '[data-side-nav]',
-    selectorSideNavToggle: ".".concat(prefix, "--side-nav__toggle"),
-    selectorSideNavSubmenu: ".".concat(prefix, "--side-nav__submenu"),
-    selectorSideNavItem: ".".concat(prefix, "--side-nav__item"),
-    selectorSideNavLink: ".".concat(prefix, "--side-nav__link"),
-    selectorSideNavLinkCurrent: "[aria-current=\"page\"],.".concat(prefix, "--side-nav__link--current,.").concat(prefix, "--side-nav__item--active"),
-    classSideNavExpanded: "".concat(prefix, "--side-nav--expanded"),
-    classSideNavItemActive: "".concat(prefix, "--side-nav__item--active"),
-    classSideNavLinkCurrent: "".concat(prefix, "--side-nav__link--current")
-  });
-
-  var forEach =
-  /* #__PURE__ */
-  function () {
-    return Array.prototype.forEach;
-  }();
-
-  var toArray$d = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var HeaderSubmenu =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(HeaderSubmenu, _mixin);
-
-    function HeaderSubmenu(element, options) {
-      var _this;
-
-      _classCallCheck(this, HeaderSubmenu);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(HeaderSubmenu).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getAction", function (event) {
-        var isFlyoutMenu = eventMatches(event, _this.options.selectorFlyoutMenu);
-
-        if (isFlyoutMenu) {
-          return _this.constructor.actions.DELEGATE_TO_FLYOUT_MENU;
-        }
-
-        switch (event.type) {
-          case 'keydown':
-            return {
-              32: _this.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS,
-              // space bar
-              13: _this.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS,
-              // enter
-              27: _this.constructor.actions.CLOSE_SUBMENU // esc
-              // possible arrow keys
-
-            }[event.which];
-
-          case 'click':
-            return eventMatches(event, _this.options.selectorItem) ? _this.constructor.actions.CLOSE_SUBMENU : null;
-
-          case 'blur':
-          case 'focusout':
-            {
-              var isOfSelf = _this.element.contains(event.relatedTarget);
-
-              return isOfSelf ? null : _this.constructor.actions.CLOSE_SUBMENU;
-            }
-
-          case 'mouseenter':
-            return _this.constructor.actions.OPEN_SUBMENU;
-
-          case 'mouseleave':
-            return _this.constructor.actions.CLOSE_SUBMENU;
-
-          default:
-            return null;
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getNewState", function (action) {
-        var trigger = _this.element.querySelector(_this.options.selectorTrigger);
-
-        var isExpanded = trigger.getAttribute(_this.options.attribExpanded) === 'true';
-
-        switch (action) {
-          case _this.constructor.actions.CLOSE_SUBMENU:
-            return false;
-
-          case _this.constructor.actions.OPEN_SUBMENU:
-            return true;
-
-          case _this.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS:
-            return !isExpanded;
-
-          default:
-            return isExpanded;
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_setState", function (_ref) {
-        var shouldBeExpanded = _ref.shouldBeExpanded,
-            shouldFocusOnOpen = _ref.shouldFocusOnOpen;
-
-        var trigger = _this.element.querySelector(_this.options.selectorTrigger);
-
-        trigger.setAttribute(_this.options.attribExpanded, shouldBeExpanded);
-        forEach.call(_this.element.querySelectorAll(_this.options.selectorItem), function (item) {
-          item.tabIndex = shouldBeExpanded ? 0 : -1;
-        }); // focus first submenu item
-
-        if (shouldBeExpanded && shouldFocusOnOpen) {
-          _this.element.querySelector(_this.options.selectorItem).focus();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentNavigation", function () {
-        var focused = _this.element.ownerDocument.activeElement;
-        return focused.nodeType === Node.ELEMENT_NODE && focused.matches(_this.options.selectorItem) ? focused : null;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "navigate", function (direction) {
-        var items = toArray$d(_this.element.querySelectorAll(_this.options.selectorItem));
-
-        var start = _this.getCurrentNavigation() || _this.element.querySelector(_this.options.selectorItemSelected);
-
-        var getNextItem = function getNextItem(old) {
-          var handleUnderflow = function handleUnderflow(index, length) {
-            return index + (index >= 0 ? 0 : length);
-          };
-
-          var handleOverflow = function handleOverflow(index, length) {
-            return index - (index < length ? 0 : length);
-          }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
-
-
-          var index = Math.max(items.indexOf(old) + direction, -1);
-          return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
-        };
-
-        for (var current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
-          if (!current.matches(_this.options.selectorItemHidden) && !current.parentNode.matches(_this.options.selectorItemHidden) && !current.matches(_this.options.selectorItemSelected)) {
-            current.focus();
-            break;
-          }
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleEvent", function (event) {
-        var trigger = _this.element.querySelector(_this.options.selectorTrigger);
-
-        if (!trigger) {
-          return;
-        }
-
-        var action = _this._getAction(event);
-
-        if (action) {
-          var shouldBeExpanded = _this._getNewState(action);
-
-          _this._setState({
-            shouldBeExpanded: shouldBeExpanded
-          });
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleKeyDown", function (event) {
-        var trigger = _this.element.querySelector(_this.options.selectorTrigger);
-
-        if (!trigger) {
-          return;
-        }
-
-        var action = _this._getAction(event);
-
-        if (event.which === 32) {
-          event.preventDefault();
-        }
-
-        switch (action) {
-          case _this.constructor.actions.DELEGATE_TO_FLYOUT_MENU:
-            // currently we do not have a scenario that handles flyout menu
-            // handleFlyoutMenu
-            break;
-          // currently we do not have a scenario that opens a submenu on keydown
-          // case this.constructor.actions.OPEN_SUBMENU:
-
-          case _this.constructor.actions.CLOSE_SUBMENU:
-            {
-              var shouldBeExpanded = _this._getNewState(action);
-
-              _this._setState({
-                shouldBeExpanded: shouldBeExpanded
-              });
-
-              break;
-            }
-
-          case _this.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS:
-            {
-              var _shouldBeExpanded = _this._getNewState(action);
-
-              _this._setState({
-                shouldBeExpanded: _shouldBeExpanded,
-                shouldFocusOnOpen: true
-              });
-
-              break;
-            }
-
-          default:
-            {
-              var expanded = trigger.getAttribute(_this.options.attribExpanded) === 'true';
-
-              if (expanded) {
-                var direction = {
-                  38: _this.constructor.NAVIGATE.BACKWARD,
-                  40: _this.constructor.NAVIGATE.FORWARD
-                }[event.which];
-
-                switch (event.which) {
-                  case 35:
-                    {
-                      // end key
-                      event.preventDefault(); // prevents key from scrolling page
-
-                      var menuItems = _this.element.querySelectorAll(_this.options.selectorItem);
-
-                      var lastMenuItem = menuItems[menuItems.length - 1];
-
-                      if (lastMenuItem) {
-                        lastMenuItem.focus();
-                      }
-
-                      break;
-                    }
-
-                  case 36:
-                    {
-                      // home key
-                      event.preventDefault(); // prevents key from scrolling page
-
-                      var _this$element$querySe = _this.element.querySelectorAll(_this.options.selectorItem),
-                          _this$element$querySe2 = _slicedToArray(_this$element$querySe, 1),
-                          firstMenuItem = _this$element$querySe2[0];
-
-                      if (firstMenuItem) {
-                        firstMenuItem.focus();
-                      }
-
-                      break;
-                    }
-
-                  case 38: // up arrow
-
-                  case 40:
-                    // down arrow
-                    _this.navigate(direction);
-
-                    event.preventDefault(); // prevents keys from scrolling page
-
-                    break;
-
-                  default:
-                    break;
-                }
-              }
-
-              break;
-            }
-        }
-      });
-
-      var hasFocusOut = 'onfocusout' in window;
-
-      _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));
-
-      _this.manage(on(_this.element, 'keydown', _this._handleKeyDown));
-
-      return _this;
-    }
-    /**
-     * The map associating DOM element and HeaderSubmenu instance.
-     * @member HeaderSubmenu.components
-     * @type {WeakMap}
-     */
-
-
-    _createClass(HeaderSubmenu, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode HeaderSubmenu.create .create()}, or
-       * {@linkcode HeaderSubmenu.init .init()},
-       * properties in this object are overriden for the instance being create and
-       * how {@linkcode HeaderSubmenu.init .init()} works.
-       * @member HeaderSubmenu.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find side navs.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-header-submenu]',
-          selectorTrigger: ".".concat(prefix, "--header__menu-title"),
-          selectorItem: ".".concat(prefix, "--header__menu .").concat(prefix, "--header__menu-item"),
-          attribExpanded: 'aria-expanded'
-        };
-      }
-      /**
-       * Enum for navigating backward/forward.
-       * @readonly
-       * @member HeaderSubmenu.NAVIGATE
-       * @type {Object}
-       * @property {number} BACKWARD Navigating backward.
-       * @property {number} FORWARD Navigating forward.
-       */
-
-    }]);
-
-    return HeaderSubmenu;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(HeaderSubmenu, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(HeaderSubmenu, "actions",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    CLOSE_SUBMENU: 'CLOSE_SUBMENU',
-    OPEN_SUBMENU: 'OPEN_SUBMENU',
-    TOGGLE_SUBMENU_WITH_FOCUS: 'TOGGLE_SUBMENU_WITH_FOCUS',
-    DELEGATE_TO_FLYOUT_MENU: 'DELEGATE_TO_FLYOUT_MENU'
-  });
-
-  _defineProperty(HeaderSubmenu, "NAVIGATE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    BACKWARD: -1,
-    FORWARD: 1
-  });
-
-  var toArray$e = function toArray(arrayLike) {
-    return Array.prototype.slice.call(arrayLike);
-  };
-
-  var HeaderNav =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(HeaderNav, _mixin);
-
-    function HeaderNav(element, options) {
-      var _this;
-
-      _classCallCheck(this, HeaderNav);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(HeaderNav).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentNavigation", function () {
-        var focused = _this.element.ownerDocument.activeElement.closest(_this.options.selectorSubmenu);
-
-        return focused && focused.nodeType === Node.ELEMENT_NODE ? focused.querySelector(_this.options.selectorSubmenuLink) : null;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "navigate", function (direction) {
-        var items = toArray$e(_this.element.querySelectorAll(_this.options.selectorSubmenuLink));
-
-        var start = _this.getCurrentNavigation();
-
-        var getNextItem = function getNextItem(old) {
-          var handleUnderflow = function handleUnderflow(index, length) {
-            return index + (index >= 0 ? 0 : length);
-          };
-
-          var handleOverflow = function handleOverflow(index, length) {
-            return index - (index < length ? 0 : length);
-          }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
-
-
-          var index = Math.max(items.indexOf(old) + direction, -1);
-          return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
-        };
-
-        getNextItem(start).focus();
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleKeyDown", function (event) {
-        var keyCodes = {
-          37: _this.constructor.NAVIGATE.BACKWARD,
-          // left arrow
-          39: _this.constructor.NAVIGATE.FORWARD // right arrow
-
-        };
-        var keyCodeMatches = keyCodes[event.which];
-
-        if (keyCodeMatches) {
-          _this.navigate(keyCodeMatches);
-        }
-      });
-
-      _this.manage(on(_this.element, 'keydown', _this._handleKeyDown));
-
-      return _this;
-    }
-    /**
-     * The map associating DOM element and Header instance.
-     * @member HeaderNav.components
-     * @type {WeakMap}
-     */
-
-
-    _createClass(HeaderNav, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode HeaderNav.create .create()}, or
-       * {@linkcode HeaderNav.init .init()},
-       * properties in this object are overriden for the instance being create and
-       * how {@linkcode HeaderNav.init .init()} works.
-       * @member HeaderNav.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find side navs.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-header-nav]',
-          selectorNavKind: '[data-header-nav-kind]',
-          selectorSubmenu: ".".concat(prefix, "--header__submenu"),
-          selectorSubmenuLink: ".".concat(prefix, "--header__menu-title"),
-          selectorSubmenuItem: ".".concat(prefix, "--header__menu-title > .").concat(prefix, "--header__menu-item")
-        };
-      }
-      /**
-       * Enum for navigating backward/forward.
-       * @readonly
-       * @member Header.NAVIGATE
-       * @type {Object}
-       * @property {number} BACKWARD Navigating backward.
-       * @property {number} FORWARD Navigating forward.
-       */
-
-    }]);
-
-    return HeaderNav;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(HeaderNav, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(HeaderNav, "NAVIGATE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    BACKWARD: -1,
-    FORWARD: 1
-  });
-
-  var NavigationMenuPanel =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(NavigationMenuPanel, _mixin);
-
-    function NavigationMenuPanel() {
-      var _getPrototypeOf2;
-
-      var _this;
-
-      _classCallCheck(this, NavigationMenuPanel);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(NavigationMenuPanel)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "createdByLauncher", function (event) {
-        var isExpanded = !_this.element.hasAttribute('hidden');
-        var newState = isExpanded ? 'collapsed' : 'expanded';
-        _this.triggerButton = event.delegateTarget;
-
-        _this.changeState(newState);
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldStateBeChanged", function (state) {
-        return state === 'expanded' === _this.element.hasAttribute('hidden');
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_changeState", function (state, callback) {
-        toggleAttribute(_this.element, 'hidden', state !== 'expanded');
-
-        if (_this.triggerButton) {
-          if (state === 'expanded') {
-            var focusableMenuItems = _this.element.querySelector(_this.options.selectorFocusableMenuItem);
-
-            if (focusableMenuItems) {
-              focusableMenuItems.focus();
-            }
-          }
-
-          var label = 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.setAttribute('aria-label', label);
-
-          _this.triggerButton.setAttribute('title', label);
-        }
-
-        callback();
-      });
-
-      return _this;
-    }
-
-    _createClass(NavigationMenuPanel, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode NavigationMenuPanel.create .create()}, or
-       * {@linkcode NavigationMenuPanel.init .init()},
-       * properties in this object are overriden for the instance being create and
-       * how {@linkcode NavigationMenuPanel.init .init()} works.
-       * @member NavigationMenuPanel.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS class to find popup navs.
-       * @property {string} attribInitTarget The attribute name in the launcher buttons to find target popup nav.
-       * @property {string[]} initEventNames The events that the component will handles
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          initEventNames: ['click'],
-          eventBeforeExpanded: 'navigation-menu-being-expanded',
-          eventAfterExpanded: 'navigation-menu-expanded',
-          eventBeforeCollapsed: 'navigation-menu-being-collapsed',
-          eventAfterCollapsed: 'navigation-menu-collapsed',
-          selectorFocusableMenuItem: ".".concat(prefix, "--navigation__category-toggle, .").concat(prefix, "--navigation-link"),
-          classNavigationMenuPanelHeaderActionActive: "".concat(prefix, "--header__action--active"),
-          attribLabelExpand: 'data-navigation-menu-panel-label-expand',
-          attribLabelCollapse: 'data-navigation-menu-panel-label-collapse'
-        };
-      }
-    }]);
-
-    return NavigationMenuPanel;
-  }(mixin(createComponent, initComponentByLauncher, exports$1, handles, eventedState));
-
-  _defineProperty(NavigationMenuPanel, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var NavigationMenu =
-  /*#__PURE__*/
-  function (_NavigationMenuPanel) {
-    _inherits(NavigationMenu, _NavigationMenuPanel);
-
-    /**
-     * A navigation menu
-     * @extends NavigationMenuPanel
-     * @param {HTMLElement} element The element working as a selector.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorInit] The CSS class to find navigation
-     * menus.
-     * @param {string} [options.attribInitTarget] The attribute name in the
-     * launcher buttons to find target navigation menu.
-     * @param {string} [options.selectorShellNavSubmenu] The CSS selector for a
-     * nav submenu
-     * @param {string} [options.selectorShellNavLink] The CSS selector for a nav
-     * link
-     * @param {string} [options.selectorShellNavLinkCurrent] The CSS selector for
-     * the current nav link
-     * @param {string} [options.selectorShellNavItem] The CSS selector for a nav
-     * item
-     * @param {string} [options.selectorShellNavCategory] The CSS selector for a
-     * nav category
-     * @param {string} [options.classShellNavItemActive] The CSS class for the
-     * active nav item
-     * @param {string} [options.classShellNavLinkCurrent] The CSS class for the
-     * current lav link
-     * @param {string} [options.classShellNavCategoryExpanded] The CSS class
-     * for an expanded nav category
-     */
-    function NavigationMenu(element, options) {
-      var _this;
-
-      _classCallCheck(this, NavigationMenu);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(NavigationMenu).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentNavigation", function () {
-        return _this.element.ownerDocument.activeElement;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "navigate", function (direction) {
-        var items = _toConsumableArray(_this.element.querySelectorAll(_this.options.selectorFocusableNavItems));
-
-        var start = _this.getCurrentNavigation();
-
-        var getNextItem = function getNextItem(old) {
-          var handleUnderflow = function handleUnderflow(index, length) {
-            return index + (index >= 0 ? 0 : length);
-          };
-
-          var handleOverflow = function handleOverflow(index, length) {
-            return index - (index < length ? 0 : length);
-          }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
-
-
-          var index = Math.max(items.indexOf(old) + direction, -1);
-          return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
-        };
-
-        getNextItem(start).focus();
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleKeyDown", function (event) {
-        // handle Esc
-        var isExpanded = !_this.element.hasAttribute('hidden');
-
-        if (event.which === 27 && isExpanded) {
-          _this.changeState('collapsed');
-
-          if (_this.triggerButton) {
-            _this.triggerButton.focus();
-          }
-
-          return;
-        } // handle up/down arrow keys
-
-
-        var matchesNavSubmenu = eventMatches(event, _this.options.selectorShellNavSubmenu);
-        var matchesShellNavLink = eventMatches(event, _this.options.selectorShellNavLink);
-
-        if (!matchesNavSubmenu && !matchesShellNavLink) {
-          return;
-        }
-
-        var navigationKeyCodes = {
-          38: _this.constructor.NAVIGATE.BACKWARD,
-          // up arrow
-          40: _this.constructor.NAVIGATE.FORWARD // down arrow
-
-        };
-        var navigationKeyCodeMatches = navigationKeyCodes[event.which];
-
-        if (navigationKeyCodeMatches) {
-          event.preventDefault(); // prevent arrow keys from scrolling
-
-          _this.navigate(navigationKeyCodeMatches);
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleFocusOut", function (event) {
-        var nextTargetIsOfSelf = _this.element.contains(event.relatedTarget) || event.relatedTarget === _this.triggerButton || !event.relatedTarget;
-
-        var oldTargetIsOfSelf = _this.element.contains(event.target);
-
-        if (oldTargetIsOfSelf && !nextTargetIsOfSelf) {
-          _this.changeState('collapsed');
-
-          _this.triggerButton.focus();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "changeNavSubmenuState", function (_ref) {
-        var matchesNavSubmenu = _ref.matchesNavSubmenu,
-            shouldBeCollapsed = _ref.shouldBeCollapsed;
-        var 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), function (item) {
-          item.tabIndex = !shouldBeCollapsed ? 0 : -1;
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleClick", function (event) {
-        var matchesNavSubmenu = eventMatches(event, _this.options.selectorShellNavSubmenu);
-        var matchesShellNavLink = eventMatches(event, _this.options.selectorShellNavLink);
-        var matchesNestedShellNavLink = eventMatches(event, _this.options.selectorShellNestedNavLink);
-
-        if (!matchesNavSubmenu && !matchesShellNavLink) {
-          return;
-        }
-
-        if (matchesNestedShellNavLink) {
-          _toConsumableArray(_this.element.querySelectorAll(_this.options.selectorShellNavLinkCurrent)).forEach(function (el) {
-            el.classList.remove(_this.options.classShellNavItemActive, _this.options.classShellNavLinkCurrent);
-          });
-
-          matchesNestedShellNavLink.closest(_this.options.selectorShellNavNestedCategory).classList.add(_this.options.classShellNavItemActive);
-          return;
-        }
-
-        if (matchesNavSubmenu) {
-          var isExpanded = matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
-
-          _this.changeNavSubmenuState({
-            matchesNavSubmenu: matchesNavSubmenu,
-            isExpanded: isExpanded
-          });
-
-          return;
-        }
-
-        if (matchesShellNavLink) {
-          _toConsumableArray(_this.element.querySelectorAll(_this.options.selectorShellNavLinkCurrent)).forEach(function (el) {
-            el.classList.remove(_this.options.classShellNavItemActive, _this.options.classShellNavLinkCurrent);
-          });
-
-          matchesShellNavLink.closest(_this.options.selectorShellNavItem).classList.add(_this.options.classShellNavItemActive);
-        }
-      });
-
-      _this.manage(on(element, 'click', _this._handleClick));
-
-      _this.manage(on(element, 'keydown', _this._handleKeyDown));
-
-      _this.manage(on(_this.element.ownerDocument, 'click', function (event) {
-        if (!_this.element.hasAttribute('hidden') && !_this.triggerButton.contains(event.target) && !_this.element.contains(event.target)) {
-          _this.changeState('collapsed');
-        }
-      }));
-
-      var hasFocusOut = 'onfocusout' in window;
-
-      _this.manage(on(_this.element, hasFocusOut ? 'focusout' : 'blur', _this._handleFocusOut, !hasFocusOut));
-
-      return _this;
-    }
-    /**
-     * @returns {Element} Currently highlighted element.
-     */
-
-
-    _createClass(NavigationMenu, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode NavigationMenu.create .create()}, or
-       * {@linkcode NavigationMenu.init .init()},
-       * properties in this object are overriden for the instance being create and
-       * how {@linkcode NavigationMenu.init .init()} works.
-       * @member NavigationMenu.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS class to find navigation menus.
-       * @property {string} attribInitTarget The attribute name in the
-       * launcher buttons to find target navigation menu.
-       * @property {string[]} initEventNames The events that the component
-       * will handles
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return Object.assign(Object.create(NavigationMenuPanel.options), {
-          selectorInit: '[data-navigation-menu]',
-          attribInitTarget: 'data-navigation-menu-target',
-          selectorShellNavSubmenu: ".".concat(prefix, "--navigation__category-toggle"),
-          selectorShellNavLink: ".".concat(prefix, "--navigation-link"),
-          selectorShellNestedNavLink: ".".concat(prefix, "--navigation__category-item > a.").concat(prefix, "--navigation-link"),
-          selectorShellNavLinkCurrent: ".".concat(prefix, "--navigation-item--active,.").concat(prefix, "--navigation__category-item--active"),
-          selectorFocusableNavItems: "\n        .".concat(prefix, "--navigation__category-toggle,\n        .").concat(prefix, "--navigation-item > .").concat(prefix, "--navigation-link,\n        .").concat(prefix, "--navigation-link[tabindex=\"0\"]\n      "),
-          selectorShellNavItem: ".".concat(prefix, "--navigation-item"),
-          selectorShellNavCategory: ".".concat(prefix, "--navigation__category"),
-          selectorShellNavNestedCategory: ".".concat(prefix, "--navigation__category-item"),
-          classShellNavItemActive: "".concat(prefix, "--navigation-item--active"),
-          classShellNavLinkCurrent: "".concat(prefix, "--navigation__category-item--active"),
-          classShellNavCategoryExpanded: "".concat(prefix, "--navigation__category--expanded")
-        });
-      }
-      /**
-       * Enum for navigating backward/forward.
-       * @readonly
-       * @member NavigationMenuPanel.NAVIGATE
-       * @type {Object}
-       * @property {number} BACKWARD Navigating backward.
-       * @property {number} FORWARD Navigating forward.
-       */
-
-    }]);
-
-    return NavigationMenu;
-  }(NavigationMenuPanel);
-
-  _defineProperty(NavigationMenu, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  _defineProperty(NavigationMenu, "NAVIGATE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  {
-    BACKWARD: -1,
-    FORWARD: 1
-  });
-
-  /**
-   * Differentiate between keyboard and mouse-triggered focusout/blur events
-   * @param {Element} node  The element to attach event listeners to
-   * @param {string} name The event name to listen to
-   * @param {Function} callback The callback function to invoke
-   * @returns {Handle} The handle to release the attached event handler
-   */
-  function onFocusByKeyboard(node, name, callback) {
-    var hasFocusout = 'onfocusout' in window;
-    var focusinEventName = hasFocusout ? 'focusin' : 'focus';
-    var focusoutEventName = hasFocusout ? 'focusout' : 'blur';
-    /**
-     * Event types supported by this function
-     * @type {Object<string, string>}
-     */
-
-    var supportedEvents = {
-      focus: focusinEventName,
-      blur: focusoutEventName
-    };
-    var eventName = supportedEvents[name];
-
-    if (!eventName) {
-      throw new Error('Unsupported event!');
-    }
-
-    var clicked;
-
-    var handleMousedown = function handleMousedown() {
-      clicked = true;
-      requestAnimationFrame(function () {
-        clicked = false;
-      });
-    };
-
-    var handleFocusin = function handleFocusin(evt) {
-      if (!clicked) {
-        callback(evt);
-      }
-    };
-
-    node.ownerDocument.addEventListener('mousedown', handleMousedown);
-    node.addEventListener(eventName, handleFocusin, !hasFocusout);
-    return {
-      release: function release() {
-        if (handleFocusin) {
-          node.removeEventListener(eventName, handleFocusin, !hasFocusout);
-          handleFocusin = null;
-        }
-
-        if (handleMousedown) {
-          node.ownerDocument.removeEventListener('mousedown', handleMousedown);
-          handleMousedown = null;
-        }
-
-        return null;
-      }
-    };
-  }
-
-  var ProductSwitcher =
-  /*#__PURE__*/
-  function (_NavigationMenuPanel) {
-    _inherits(ProductSwitcher, _NavigationMenuPanel);
-
-    /**
-     * A navigation menu
-     * @extends NavigationMenuPanel
-     * @param {HTMLElement} element The element working as a selector.
-     * @param {Object} [options] The component options.
-     * @param {string} [options.selectorInit] The CSS class to find product
-     * switchers
-     * @param {string} [options.attribInitTarget] The attribute name in the
-     * launcher buttons to find target product switcher
-     * @param {string} [options.classProductSwitcherExpanded] The CSS class
-     * for an expanded product switcher
-     */
-    function ProductSwitcher(element, options) {
-      var _this;
-
-      _classCallCheck(this, ProductSwitcher);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ProductSwitcher).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "current", '');
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "triggerButtonIds", new Set());
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleFocusOut", function (event) {
-        if (_this.element.contains(event.relatedTarget)) {
-          return;
-        }
-
-        var currentTriggerButton = _this.element.ownerDocument.getElementById(_this.current);
-
-        if (currentTriggerButton && event.relatedTarget && !event.relatedTarget.matches(_this.options.selectorFloatingMenus)) {
-          currentTriggerButton.focus();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleKeyDown", function (event) {
-        var isExpanded = !_this.element.hasAttribute('hidden');
-
-        if (event.which === 27 && isExpanded) {
-          var triggerButton = _this.current;
-
-          _this.changeState(_this.constructor.SELECT_NONE);
-
-          _this.element.ownerDocument.getElementById(triggerButton).focus();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "createdByLauncher", function (event) {
-        var isExpanded = _this.element.classList.contains(_this.options.classProductSwitcherExpanded);
-
-        var launcher = event.delegateTarget;
-
-        if (!launcher.id) {
-          launcher.id = "__carbon-product-switcher-launcher-".concat(Math.random().toString(36).substr(2));
-        }
-
-        var current = launcher.id;
-
-        _this.changeState(isExpanded && _this.current === current ? _this.constructor.SELECT_NONE : current);
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "shouldStateBeChanged", function (current) {
-        return _this.current !== current;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_changeState", function (state, callback) {
-        _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);
-        } // deactivate all other trigger buttons
-
-
-        _this.triggerButtonIds.forEach(function (id) {
-          var button = _this.element.ownerDocument.getElementById(id);
-
-          var label = button.getAttribute(_this.options.attribLabelExpand);
-          button.classList.remove(_this.options.classNavigationMenuPanelHeaderActionActive);
-          button.setAttribute('aria-label', label);
-          button.setAttribute('title', label);
-        }); // set active trigger button attributes
-
-
-        var currentTriggerButton = _this.element.ownerDocument.getElementById(_this.current);
-
-        if (currentTriggerButton) {
-          var label = currentTriggerButton.getAttribute(_this.options.attribLabelCollapse);
-          currentTriggerButton.classList.toggle(_this.options.classNavigationMenuPanelHeaderActionActive);
-          currentTriggerButton.setAttribute('aria-label', label);
-          currentTriggerButton.setAttribute('title', label);
-        }
-
-        if (state !== _this.constructor.SELECT_NONE) {
-          _this.element.setAttribute('tabindex', '0');
-
-          _this.element.focus();
-        } else {
-          _this.element.setAttribute('tabindex', '-1');
-        }
-
-        callback();
-      });
-
-      _this.manage(on(element, 'keydown', _this._handleKeyDown));
-
-      _this.manage(onFocusByKeyboard(element, 'blur', _this._handleFocusOut));
-
-      return _this;
-    }
-    /**
-     * id of currently active trigger button
-     * @type {string}
-     */
-
-
-    _createClass(ProductSwitcher, [{
-      key: "release",
-      value: function release() {
-        this.triggerButtonIds.clear();
-        return _get(_getPrototypeOf(ProductSwitcher.prototype), "release", this).call(this);
-      }
-      /**
-       * The map associating DOM element and ProductSwitcher instance.
-       * @member ProductSwitcher.components
-       * @type {WeakMap}
-       */
-
-    }], [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor,
-       * {@linkcode ProductSwitcher.create .create()}, or
-       * {@linkcode ProductSwitcher.init .init()},
-       * properties in this object are overriden for the instance being create and
-       * how {@linkcode ProductSwitcher.init .init()} works.
-       * @member ProductSwitcher.options
-       * @type {Object}
-       * @property {string} selectorInit The CSS class to find popup navs.
-       * @property {string} attribInitTarget The attribute name in the
-       * launcher buttons to find target popup nav.
-       * @property {string[]} initEventNames The events that the component
-       * will handles
-       */
-      get: function get$$1() {
-        var prefix = settings_1.prefix;
-        return Object.assign(Object.create(NavigationMenuPanel.options), {
-          selectorInit: '[data-product-switcher]',
-          selectorFloatingMenus: "\n        .".concat(prefix, "--overflow-menu-options,\n        .").concat(prefix, "--overflow-menu-options *,\n        .").concat(prefix, "--tooltip,\n        .").concat(prefix, "--tooltip *,\n        .flatpicker-calendar,\n        .flatpicker-calendar *\n        "),
-          attribInitTarget: 'data-product-switcher-target',
-          classProductSwitcherExpanded: "".concat(prefix, "--panel--expanded")
-        });
-      }
-    }]);
-
-    return ProductSwitcher;
-  }(NavigationMenuPanel);
-
-  _defineProperty(ProductSwitcher, "SELECT_NONE",
-  /* #__PURE_CLASS_PROPERTY__ */
-  '__carbon-product-switcher-launcher-NONE');
-
-  _defineProperty(ProductSwitcher, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  var PaginationNav =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(PaginationNav, _mixin);
-
-    /**
-     * Pagination Nav component
-     * @extends CreateComponent
-     * @extends InitComponentBySearch
-     * @extends Handles
-     * @param {HTMLElement} element The element working as a pagination nav.
-     */
-    function PaginationNav(element, options) {
-      var _this;
-
-      _classCallCheck(this, PaginationNav);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(PaginationNav).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActivePageNumber", function () {
-        var pageNum;
-
-        var activePageElement = _this.element.querySelector(_this.options.selectorPageActive);
-
-        if (activePageElement) {
-          pageNum = Number(activePageElement.getAttribute(_this.options.attribPage));
-        }
-
-        return pageNum;
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearActivePage", function (evt) {
-        var pageButtonNodeList = _this.element.querySelectorAll(_this.options.selectorPageButton);
-
-        var pageSelectElement = _this.element.querySelector(_this.options.selectorPageSelect);
-
-        Array.prototype.forEach.call(pageButtonNodeList, function (el) {
-          el.classList.remove(_this.options.classActive, _this.options.classDisabled);
-          el.removeAttribute(_this.options.attribActive);
-          el.removeAttribute('aria-disabled');
-          el.removeAttribute('aria-current');
-        });
-
-        if (pageSelectElement) {
-          pageSelectElement.removeAttribute('aria-current');
-          var pageSelectElementOptions = pageSelectElement.options;
-          Array.prototype.forEach.call(pageSelectElementOptions, function (el) {
-            el.removeAttribute(_this.options.attribActive);
-          });
-
-          if (!evt.target.matches(_this.options.selectorPageSelect)) {
-            pageSelectElement.classList.remove(_this.options.classActive);
-            pageSelectElement.value = '';
-          }
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (evt) {
-        if (!evt.target.getAttribute('aria-disabled') === true) {
-          var nextActivePageNumber = _this.getActivePageNumber();
-
-          var pageElementNodeList = _this.element.querySelectorAll(_this.options.selectorPageElement);
-
-          var 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));
-          }
-
-          if (evt.target.matches(_this.options.selectorPagePrevious)) {
-            nextActivePageNumber -= 1;
-          }
-
-          if (evt.target.matches(_this.options.selectorPageNext)) {
-            nextActivePageNumber += 1;
-          }
-
-          var pageTargetElement = pageElementNodeList[nextActivePageNumber - 1];
-          pageTargetElement.setAttribute(_this.options.attribActive, true);
-
-          if (pageTargetElement.tagName === 'OPTION') {
-            pageSelectElement.value = _this.getActivePageNumber();
-            pageSelectElement.classList.add(_this.options.classActive);
-            pageSelectElement.setAttribute('aria-current', 'page');
-          } else {
-            pageTargetElement.classList.add(_this.options.classActive, _this.options.classDisabled);
-            pageTargetElement.setAttribute('aria-disabled', true);
-            pageTargetElement.setAttribute('aria-current', 'page');
-          }
-
-          _this.setPrevNextStates();
-        }
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSelectChange", function (evt) {
-        _this.clearActivePage(evt);
-
-        var pageSelectElement = _this.element.querySelector(_this.options.selectorPageSelect);
-
-        var pageSelectElementOptions = pageSelectElement.options;
-        pageSelectElementOptions[pageSelectElementOptions.selectedIndex].setAttribute(_this.options.attribActive, true);
-        evt.target.setAttribute('aria-current', 'page');
-        evt.target.classList.add(_this.options.classActive);
-
-        _this.setPrevNextStates();
-      });
-
-      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setPrevNextStates", function () {
-        var pageElementNodeList = _this.element.querySelectorAll(_this.options.selectorPageElement);
-
-        var totalPages = pageElementNodeList.length;
-
-        var pageDirectionElementPrevious = _this.element.querySelector(_this.options.selectorPagePrevious);
-
-        var 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);
-          }
-        }
-
-        if (pageDirectionElementNext) {
-          if (_this.getActivePageNumber() >= totalPages) {
-            pageDirectionElementNext.setAttribute('aria-disabled', true);
-            pageDirectionElementNext.classList.add(_this.options.classDisabled);
-          } else {
-            pageDirectionElementNext.removeAttribute('aria-disabled');
-            pageDirectionElementNext.classList.remove(_this.options.classDisabled);
-          }
-        }
-      });
-
-      _this.manage(on(_this.element, 'click', function (evt) {
-        return _this.handleClick(evt);
-      }));
-
-      _this.manage(on(_this.element, 'change', function (evt) {
-        if (evt.target.matches(_this.options.selectorPageSelect)) {
-          _this.handleSelectChange(evt);
-        }
-      }));
-
-      return _this;
-    }
-    /**
-     * Get active page number
-     */
-
-
-    _createClass(PaginationNav, null, [{
-      key: "options",
-
-      /**
-       * The component options.
-       * If `options` is specified in the constructor, {@linkcode PaginationNav.create .create()},
-       * or {@linkcode PaginationNav.init .init()},
-       * properties in this object are overriden for the instance being create and how {@linkcode PaginationNav.init .init()} works.
-       * @member PaginationNav.options
-       * @type {Object}
-       * @property {string} selectorInit The data attribute to find pagination nav.
-       * @property {string} selectorPageElement The data attribute to find page element.
-       * @property {string} selectorPageButton The data attribute to find page interactive element.
-       * @property {string} selectorPageDirection The data attribute to find page change element.
-       * @property {string} selectorPageSelect The data attribute to find page select element.
-       * @property {string} selectorPageActive The data attribute to find active page element.
-       * @property {string} [classActive] The CSS class for page's selected state.
-       * @property {string} [classDisabled] The CSS class for page's disabled state.
-       */
-      get: function get() {
-        var prefix = settings_1.prefix;
-        return {
-          selectorInit: '[data-pagination-nav]',
-          selectorPageElement: '[data-page]',
-          selectorPageButton: '[data-page-button]',
-          selectorPagePrevious: '[data-page-previous]',
-          selectorPageNext: '[data-page-next]',
-          selectorPageSelect: '[data-page-select]',
-          selectorPageActive: '[data-page-active="true"]',
-          attribPage: 'data-page',
-          attribActive: 'data-page-active',
-          classActive: "".concat(prefix, "--pagination-nav__page--active"),
-          classDisabled: "".concat(prefix, "--pagination-nav__page--disabled")
-        };
-      }
-    }]);
-
-    return PaginationNav;
-  }(mixin(createComponent, initComponentBySearch, handles));
-
-  _defineProperty(PaginationNav, "components",
-  /* #__PURE_CLASS_PROPERTY__ */
-  new WeakMap());
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var components = /*#__PURE__*/Object.freeze({
-    Checkbox: Checkbox,
-    FileUploader: FileUploader,
-    FabButton: fab,
-    ContentSwitcher: ContentSwitcher,
-    Tab: Tab,
-    OverflowMenu: OverflowMenu,
-    Modal: Modal,
-    Loading: Loading,
-    InlineLoading: InlineLoading,
-    Dropdown: Dropdown,
-    NumberInput: NumberInput,
-    DataTable: dataTable,
-    DataTableV2: DataTableV2,
-    DatePicker: DatePicker,
-    LeftNav: leftNav,
-    ProfileSwitcher: profileSwitcher,
-    Pagination: Pagination,
-    Search: Search,
-    Accordion: Accordion,
-    CopyButton: CopyButton,
-    Notification: Notification,
-    Toolbar: Toolbar,
-    Tooltip: Tooltip,
-    ProgressIndicator: ProgressIndicator,
-    FloatingMenu: FloatingMenu,
-    StructuredList: StructuredList,
-    Slider: Slider,
-    Tile: Tile,
-    Carousel: carousel,
-    Lightbox: lightbox,
-    CodeSnippet: CodeSnippet,
-    TextInput: TextInput,
-    SideNav: SideNav,
-    HeaderSubmenu: HeaderSubmenu,
-    HeaderNav: HeaderNav,
-    NavigationMenu: NavigationMenu,
-    ProductSwitcher: ProductSwitcher,
-    PaginationNav: PaginationNav
-  });
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var components$1 = components;
-  /**
-   * Instantiates components automatically
-   * by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
-   * or upon DOM events (e.g. clicking) on such elements.
-   * See each components' static `.init()` methods for details.
-   * @private
-   */
-
-  var init = function init() {
-    var componentClasses = Object.keys(components$1).map(function (key) {
-      return components$1[key];
-    }).filter(function (component) {
-      return typeof component.init === 'function';
-    });
-
-    if (!settings_1.disableAutoInit) {
-      componentClasses.forEach(function (Clz) {
-        var h = Clz.init();
-      });
-    }
-  };
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    // DOMContentLoaded has been fired already
-    // Let consumer have chance to see if it wants automatic instantiation disabled, and then run automatic instantiation otherwise
-    setTimeout(init, 0);
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var forEach$1 = Array.prototype.forEach;
-
-  var createAndReleaseComponentsUponDOMMutation = function createAndReleaseComponentsUponDOMMutation(records, componentClasses, componentClassesForWatchInit, options) {
-    records.forEach(function (record) {
-      forEach$1.call(record.addedNodes, function (node) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          componentClassesForWatchInit.forEach(function (Clz) {
-            Clz.init(node, options);
-          });
-        }
-      });
-      forEach$1.call(record.removedNodes, function (node) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          componentClasses.forEach(function (Clz) {
-            if (node.matches(Clz.options.selectorInit)) {
-              var instance = Clz.components.get(node);
-
-              if (instance) {
-                instance.release();
-              }
-            } else {
-              forEach$1.call(node.querySelectorAll(Clz.options.selectorInit), function (element) {
-                var instance = Clz.components.get(element);
-
-                if (instance) {
-                  instance.release();
-                }
-              });
-            }
-          });
-        }
-      });
-    });
-  };
-  /**
-   * Automatically instantiates/destroys components in the given element, by watching for DOM additions/removals.
-   * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
-   * @param {Object} [options] The component options.
-   * @returns {Handle} The handle to stop watching.
-   */
-
-
-  function watch () {
-    var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    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.');
-    }
-
-    var componentClasses = Object.keys(components).map(function (key) {
-      return components[key];
-    }).filter(function (component) {
-      return typeof component.init === 'function';
-    });
-    var handles = componentClasses.map(function (Clz) {
-      return Clz.init(target, options);
-    }).filter(Boolean);
-    var componentClassesForWatchInit = componentClasses.filter(function (Clz) {
-      return !Clz.forLazyInit;
-    });
-    var observer = new MutationObserver(function (records) {
-      createAndReleaseComponentsUponDOMMutation(records, componentClasses, componentClassesForWatchInit, options);
-    });
-    observer.observe(target, {
-      childList: true,
-      subtree: true
-    });
-    return {
-      release: function release() {
-        for (var handle = handles.pop(); handle; handle = handles.pop()) {
-          handle.release();
-        }
-
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      }
-    };
-  }
-
-  /**
-   * Copyright IBM Corp. 2016, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  exports.watch = watch;
-  exports.settings = settings_1;
-  exports.Checkbox = Checkbox;
-  exports.FileUploader = FileUploader;
-  exports.FabButton = fab;
-  exports.ContentSwitcher = ContentSwitcher;
-  exports.Tab = Tab;
-  exports.OverflowMenu = OverflowMenu;
-  exports.Modal = Modal;
-  exports.Loading = Loading;
-  exports.InlineLoading = InlineLoading;
-  exports.Dropdown = Dropdown;
-  exports.NumberInput = NumberInput;
-  exports.DataTable = dataTable;
-  exports.DataTableV2 = DataTableV2;
-  exports.DatePicker = DatePicker;
-  exports.LeftNav = leftNav;
-  exports.ProfileSwitcher = profileSwitcher;
-  exports.Pagination = Pagination;
-  exports.Search = Search;
-  exports.Accordion = Accordion;
-  exports.CopyButton = CopyButton;
-  exports.Notification = Notification;
-  exports.Toolbar = Toolbar;
-  exports.Tooltip = Tooltip;
-  exports.ProgressIndicator = ProgressIndicator;
-  exports.FloatingMenu = FloatingMenu;
-  exports.StructuredList = StructuredList;
-  exports.Slider = Slider;
-  exports.Tile = Tile;
-  exports.Carousel = carousel;
-  exports.Lightbox = lightbox;
-  exports.CodeSnippet = CodeSnippet;
-  exports.TextInput = TextInput;
-  exports.SideNav = SideNav;
-  exports.HeaderSubmenu = HeaderSubmenu;
-  exports.HeaderNav = HeaderNav;
-  exports.NavigationMenu = NavigationMenu;
-  exports.ProductSwitcher = ProductSwitcher;
-  exports.PaginationNav = PaginationNav;
-
-  return exports;
-
-}({}));
diff --git a/scripts/carbon-components.min.js b/scripts/carbon-components.min.js
deleted file mode 100644
index f2f0f819cd71..000000000000
--- a/scripts/carbon-components.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var CarbonComponents=function(e){"use strict";var t={prefix:"bx"};function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function a(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){i(e,t,n[t])})}return e}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}function p(e,t,n){return(p="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=c(e)););return e}(e,t);if(o){var a=Object.getOwnPropertyDescriptor(o,t);return a.get?a.get.call(n):a.value}})(e,t,n||e)}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],o=!0,a=!1,i=void 0;try{for(var r,s=e[Symbol.iterator]();!(o=(r=s.next()).done)&&(n.push(r.value),!t||n.length!==t);o=!0);}catch(e){a=!0,i=e}finally{try{o||null==s.return||s.return()}finally{if(a)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function f(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function m(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return function e(t){return t.reduce(function(t,n){return Array.isArray(n)?t.push.apply(t,f(e(n))):t.push(n),t},[])}(t).reduce(function(e,t){return t(e)},function(){return function e(){n(this,e)}}())}function g(e){return function(t){function o(e){var t,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,o),i(u(u(t=d(this,c(o).call(this,e,a)))),"children",[]),!e||e.nodeType!==Node.ELEMENT_NODE)throw new TypeError("DOM element should be given to initialize this widget.");return t.element=e,t.options=Object.assign(Object.create(t.constructor.options),a),t.constructor.components.set(t.element,u(u(t))),t}return s(o,e),a(o,[{key:"release",value:function(){for(var e=this.children.pop();e;e=this.children.pop())e.release();return this.constructor.components.delete(this.element),null}}],[{key:"create",value:function(e,t){return this.components.get(e)||new this(e,t)}}]),o}()}function v(e){return function(t){function o(){return n(this,o),d(this,c(o).apply(this,arguments))}return s(o,e),a(o,null,[{key:"init",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=Object.assign(Object.create(this.options),n);if(!t||t.nodeType!==Node.ELEMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE)throw new TypeError("DOM document or DOM element should be given to search for and initialize this widget.");t.nodeType===Node.ELEMENT_NODE&&t.matches(o.selectorInit)?this.create(t,n):Array.prototype.forEach.call(t.querySelectorAll(o.selectorInit),function(t){return e.create(t,n)})}}]),o}()}function b(e){return function(t){function o(){var e,t;n(this,o);for(var a=arguments.length,r=new Array(a),s=0;s<a;s++)r[s]=arguments[s];return i(u(u(t=d(this,(e=c(o)).call.apply(e,[this].concat(r))))),"handles",new Set),t}return s(o,e),a(o,[{key:"manage",value:function(e){return this.handles.add(e),e}},{key:"unmanage",value:function(e){return this.handles.delete(e),e}},{key:"release",value:function(){var e=this;return this.handles.forEach(function(t){t.release(),e.handles.delete(t)}),p(c(o.prototype),"release",this).call(this)}}]),o}()}function y(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return e.addEventListener.apply(e,n),{release:function(){return e.removeEventListener.apply(e,n),null}}}var w={true:"true",false:"false",mixed:"mixed"},S=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"click",function(e){a._handleClick(e)})),a.manage(y(a.element,"focus",function(e){a._handleFocus(e)})),a.manage(y(a.element,"blur",function(e){a._handleBlur(e)})),a._indeterminateCheckbox(),a._initCheckbox(),a}return s(o,m(g,v,b)),a(o,[{key:"_handleClick",value:function(){!0===this.element.checked?(this.element.setAttribute("checked",""),this.element.setAttribute("aria-checked","true"),this.element.checked=!0,this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState,"true")):!1===this.element.checked&&(this.element.removeAttribute("checked"),this.element.setAttribute("aria-checked","false"),this.element.checked=!1,this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState,"false"))}},{key:"_handleFocus",value:function(){this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.parentElement.classList.add(this.options.classLabelFocused)}},{key:"_handleBlur",value:function(){this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.parentElement.classList.remove(this.options.classLabelFocused)}},{key:"setState",value:function(e){if(void 0===e||void 0===w[e])throw new TypeError("setState expects a value of true, false or mixed.");this.element.setAttribute("aria-checked",e),this.element.indeterminate=e===w.mixed,this.element.checked=e===w.true;var t=this.element.closest(this.options.selectorContainedCheckboxState);t&&t.setAttribute(this.options.attribContainedCheckboxState,e)}},{key:"setDisabled",value:function(e){if(void 0===e)throw new TypeError("setDisabled expects a boolean value of true or false");!0===e?this.element.setAttribute("disabled",!0):!1===e&&this.element.removeAttribute("disabled");var t=this.element.closest(this.options.selectorContainedCheckboxDisabled);t&&t.setAttribute(this.options.attribContainedCheckboxDisabled,e)}},{key:"_indeterminateCheckbox",value:function(){"mixed"===this.element.getAttribute("aria-checked")&&(this.element.indeterminate=!0),!0===this.element.indeterminate&&this.element.setAttribute("aria-checked","mixed"),this.element.parentElement.classList.contains(this.options.classLabel)&&!0===this.element.indeterminate&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState,"mixed")}},{key:"_initCheckbox",value:function(){!0===this.element.checked&&this.element.setAttribute("aria-checked","true"),this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.checked&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState,"true"),this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled,"false"),this.element.parentElement.classList.contains(this.options.classLabel)&&this.element.disabled&&this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled,"true")}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:".".concat(e,"--checkbox"),selectorContainedCheckboxState:"[data-contained-checkbox-state]",selectorContainedCheckboxDisabled:"[data-contained-checkbox-disabled]",classLabel:"".concat(e,"--checkbox-label"),classLabelFocused:"".concat(e,"--checkbox-label__focus"),attribContainedCheckboxState:"data-contained-checkbox-state",attribContainedCheckboxDisabled:"data-contained-checkbox-disabled"}}}]),o}();i(S,"components",new WeakMap),i(S,"stateChangeTypes",w);function k(e){return function(t){function o(){return n(this,o),d(this,c(o).apply(this,arguments))}return s(o,e),a(o,[{key:"_changeState",value:function(){throw new Error("_changeState() should be overriden to perform actual change in state.")}},{key:"changeState",value:function(){for(var e=this,t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];var a="string"==typeof n[0]?n.shift():void 0,i=Object(n[0])===n[0]&&"function"!=typeof n[0]?n.shift():void 0,r="function"==typeof n[0]?n.shift():void 0;if("function"!=typeof this.shouldStateBeChanged||this.shouldStateBeChanged(a,i)){var s={group:i&&i.group,state:a},c=[s.group,a].filter(Boolean).join("-").split("-").map(function(e){return e[0].toUpperCase()+e.substr(1)}).join(""),l=new CustomEvent(this.options["eventBefore".concat(c)],{bubbles:!0,cancelable:!0,detail:i}),u=i&&i.delegatorNode||this.element;if(!u.dispatchEvent(l)){if(r){var d=new Error("Changing state (".concat(JSON.stringify(s),") has been canceled."));d.canceled=!0,r(d)}}else{var p=[a,i].filter(Boolean);this._changeState.apply(this,f(p).concat([function(){u.dispatchEvent(new CustomEvent(e.options["eventAfter".concat(c)],{bubbles:!0,cancelable:!0,detail:i})),r&&r()}]))}}else r&&r(null,!0)}}]),o}()}function C(e,t){var n=e.target,o=e.currentTarget;if("function"==typeof n.matches){if(n.matches(t))return n;if(n.matches("".concat(t," *"))){var a=n.closest(t);if((o.nodeType===Node.DOCUMENT_NODE?o.documentElement:o).contains(a))return a}}}var E=function(e){return Array.prototype.slice.call(e)},L=function(e){function o(e){var t,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(n(this,o),i(u(u(t=d(this,c(o).call(this,e,a)))),"_changeState",function(e,n,o){"delete-filename-fileuploader"===e&&t.container.removeChild(n.filenameElement),"function"==typeof o&&o()}),i(u(u(t)),"_handleDeleteButton",function(e){var n=C(e,"[data-for=".concat(t.inputId,"]"));n&&t._changeState("delete-filename-fileuploader",{initialEvt:e,filenameElement:n.parentNode})}),t.input=t.element.querySelector(t.options.selectorInput),t.container=t.element.querySelector(t.options.selectorContainer),!t.input)throw new TypeError("Cannot find the file input box.");if(!t.container)throw new TypeError("Cannot find the file names container.");return t.inputId=t.input.getAttribute("id"),t.manage(y(t.input,"change",function(){return t._displayFilenames()})),t.manage(y(t.container,"click",t._handleDeleteButton)),t}return s(o,m(g,v,k,b)),a(o,[{key:"_filenamesHTML",value:function(e,t){return'<span class="'.concat(this.options.classSelectedFile,'">\n      <p class="').concat(this.options.classFileName,'">').concat(e,'</p>\n      <span data-for="').concat(t,'" class="').concat(this.options.classStateContainer,'"></span>\n    </span>')}},{key:"_uploadHTML",value:function(){return'\n      <div data-loading class="'.concat(this.options.classLoading,'">\n        <svg class="').concat(this.options.classLoadingSvg,'" viewBox="-42 -42 84 84">\n          <circle cx="0" cy="0" r="37.5" />\n        </svg>\n      </div>')}},{key:"_closeButtonHTML",value:function(){return'\n    <svg class="'.concat(this.options.classFileClose,'" tabindex="0" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">\n      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8\n        9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />\n    </svg>')}},{key:"_checkmarkHTML",value:function(){return'\n      <svg class="'.concat(this.options.classFileComplete,'" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">\n       <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"/>\n      </svg>')}},{key:"_getStateContainers",value:function(){var e=E(this.element.querySelectorAll("[data-for=".concat(this.inputId,"]")));if(0===e.length)throw new TypeError("State container elements not found; invoke _displayFilenames() first");if(e[0].dataset.for!==this.inputId)throw new TypeError("File input id must equal [data-for] attribute");return e}},{key:"_displayFilenames",value:function(){var e=this,t=this.element.querySelector(this.options.selectorContainer),n=E(this.input.files).map(function(t){return e._filenamesHTML(t.name,e.inputId)}).join("");t.insertAdjacentHTML("afterbegin",n)}},{key:"_removeState",value:function(e){if(!e||e.nodeType!==Node.ELEMENT_NODE)throw new TypeError("DOM element should be given to initialize this widget.");for(;e.firstChild;)e.removeChild(e.firstChild)}},{key:"_handleStateChange",value:function(e,t,n){var o=this;void 0===t?e.forEach(function(e){o._removeState(e),e.insertAdjacentHTML("beforeend",n)}):e.forEach(function(e,a){a===t&&(o._removeState(e),e.insertAdjacentHTML("beforeend",n))})}},{key:"setState",value:function(e,t){var n=this._getStateContainers();"edit"===e&&this._handleStateChange(n,t,this._closeButtonHTML()),"upload"===e&&this._handleStateChange(n,t,this._uploadHTML()),"complete"===e&&this._handleStateChange(n,t,this._checkmarkHTML())}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-file]",selectorInput:'input[type="file"].'.concat(e,"--file-input"),selectorContainer:"[data-file-container]",selectorCloseButton:".".concat(e,"--file-close"),classLoading:"".concat(e,"--loading"),classLoadingSvg:"".concat(e,"--loading__svg"),classFileName:"".concat(e,"--file-filename"),classFileClose:"".concat(e,"--file-close"),classFileComplete:"".concat(e,"--file-complete"),classSelectedFile:"".concat(e,"--file__selected-file"),classStateContainer:"".concat(e,"--file__state-container"),eventBeforeDeleteFilenameFileuploader:"fileuploader-before-delete-filename",eventAfterDeleteFilenameFileuploader:"fileuploader-after-delete-filename"}}}]),o}();function _(e){var t=function(t){function o(){return n(this,o),d(this,c(o).apply(this,arguments))}return s(o,e),a(o,null,[{key:"init",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=Object.assign(Object.create(this.options),n);if(!t||t.nodeType!==Node.ELEMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE)throw new TypeError("DOM document or DOM element should be given to search for and initialize this widget.");if(t.nodeType!==Node.ELEMENT_NODE||!t.matches(o.selectorInit)){var a="onfocusin"in(t.nodeType===Node.ELEMENT_NODE?t.ownerDocument:t).defaultView,i=o.initEventNames.map(function(i){return y(t,"focus"===i&&a?"focusin":i,function(t){var a=C(t,o.selectorInit);if(a&&!e.components.has(a)){var i=e.create(a,n);"function"==typeof i.createdByEvent&&i.createdByEvent(t)}},"focus"===i&&!a)});return{release:function(){for(var e=i.pop();e;e=i.pop())e.release()}}}return this.create(t,n),""}}]),o}();return i(t,"forLazyInit",!0),t}i(L,"components",new WeakMap);var x=function(e){function t(e){var o;return n(this,t),(o=d(this,c(t).call(this,e))).manage(y(e,"click",function(e){o.toggle(e)})),o}return s(t,m(g,_,b)),a(t,[{key:"createdByEvent",value:function(e){this.toggle(e)}},{key:"toggle",value:function(e){"A"===this.element.tagName&&e.preventDefault(),"closed"===this.element.dataset.state?this.element.dataset.state="open":this.element.dataset.state="closed"}}],[{key:"create",value:function(e){return this.components.get(e)||new this(e)}}]),t}();i(x,"components",new WeakMap),i(x,"options",{selectorInit:"[data-fab]",initEventNames:["click"]});var A=x,D=function(e){return Array.prototype.slice.call(e)},N=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"click",function(e){a._handleClick(e)})),a}return s(o,m(g,v,k,b)),a(o,[{key:"_handleClick",value:function(e){var t=C(e,this.options.selectorButton);t&&this.changeState({group:"selected",item:t,launchingEvent:e})}},{key:"_changeState",value:function(e,t){var n=this,o=e.item,a=o.querySelector(this.options.selectorLink);a&&(D(this.element.querySelectorAll(this.options.selectorLink)).forEach(function(e){e!==a&&e.setAttribute("aria-selected","false")}),a.setAttribute("aria-selected","true")),D(this.element.querySelectorAll(this.options.selectorButton)).forEach(function(e){e!==o&&(e.setAttribute("aria-selected",!1),e.classList.toggle(n.options.classActive,!1),D(e.ownerDocument.querySelectorAll(e.dataset.target)).forEach(function(e){e.setAttribute("hidden",""),e.setAttribute("aria-hidden","true")}))}),o.classList.toggle(this.options.classActive,!0),o.setAttribute("aria-selected",!0),D(o.ownerDocument.querySelectorAll(o.dataset.target)).forEach(function(e){e.removeAttribute("hidden"),e.setAttribute("aria-hidden","false")}),t&&t()}},{key:"setActive",value:function(e,t){this.changeState({group:"selected",item:e},function(n){n?t&&t(Object.assign(n,{item:e})):t&&t(null,e)})}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-content-switcher]",selectorButton:'input[type="radio"], .'.concat(e,"--content-switcher-btn"),classActive:"".concat(e,"--content-switcher--selected"),eventBeforeSelected:"content-switcher-beingselected",eventAfterSelected:"content-switcher-selected"}}}]),o}();i(N,"components",new WeakMap);var T=function(e){function o(e,t){var a;n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"keydown",function(e){a._handleKeyDown(e)}));var i=a.element.querySelector(a.options.selectorButtonSelected);return i&&a._updateTriggerText(i),a}return s(o,N),a(o,[{key:"_changeState",value:function(e,t){var n=this;p(c(o.prototype),"_changeState",this).call(this,e,function(o){o||n._updateTriggerText(e.item);for(var a=arguments.length,i=new Array(a>1?a-1:0),r=1;r<a;r++)i[r-1]=arguments[r];t.apply(void 0,[o].concat(i))})}},{key:"_handleClick",value:function(e){var t=C(e,this.options.selectorButton),n=C(e,this.options.selectorTrigger);t&&!t.classList.contains(this.options.classButtonDisabled)&&(p(c(o.prototype),"_handleClick",this).call(this,e),this._updateMenuState(!1)),n&&this._updateMenuState()}},{key:"_handleKeyDown",value:function(e){var t=this;if(C(e,this.options.selectorTrigger))13===e.which&&this._updateMenuState();else{var n,o={37:this.constructor.NAVIGATE.BACKWARD,39:this.constructor.NAVIGATE.FORWARD}[e.which];if(o){var a=(n=this.element.querySelectorAll(this.options.selectorButtonEnabled),Array.prototype.slice.call(n)),i=this.element.querySelector(this.options.selectorButtonSelected),r=Math.max(a.indexOf(i)+o,-1),s=r>=0&&r<a.length?r:r-Math.sign(r)*a.length;this.setActive(a[s],function(e,n){if(n){var o=n.querySelector(t.options.selectorLink);o&&o.focus()}}),e.preventDefault()}}}},{key:"_updateMenuState",value:function(e){var t=this.element.querySelector(this.options.selectorMenu),n=this.element.querySelector(this.options.selectorTrigger);t&&(t.classList.toggle(this.options.classHidden,void 0===e?e:!e),t.classList.contains(this.options.classHidden)?n.classList.remove(this.options.classOpen):n.classList.add(this.options.classOpen))}},{key:"_updateTriggerText",value:function(e){var t=this.element.querySelector(this.options.selectorTriggerText);t&&(t.textContent=e.textContent)}}],[{key:"options",get:function(){var e=t.prefix;return Object.assign(Object.create(N.options),{selectorInit:"[data-tabs]",selectorMenu:".".concat(e,"--tabs__nav"),selectorTrigger:".".concat(e,"--tabs-trigger"),selectorTriggerText:".".concat(e,"--tabs-trigger-text"),selectorButton:".".concat(e,"--tabs__nav-item"),selectorButtonEnabled:".".concat(e,"--tabs__nav-item:not(.").concat(e,"--tabs__nav-item--disabled)"),selectorButtonSelected:".".concat(e,"--tabs__nav-item--selected"),selectorLink:".".concat(e,"--tabs__nav-link"),classActive:"".concat(e,"--tabs__nav-item--selected"),classHidden:"".concat(e,"--tabs__nav--hidden"),classOpen:"".concat(e,"--tabs-trigger--open"),classButtonDisabled:"".concat(e,"--tabs__nav-item--disabled"),eventBeforeSelected:"tab-beingselected",eventAfterSelected:"tab-selected"})}}]),o}();function I(e){if(!e||"function"==typeof e)return{launchingElement:null,launchingEvent:null};var t=e.delegateTarget||e.currentTarget||e,n=e.currentTarget&&e;if(t&&!t.nodeType)throw new TypeError("DOM Node should be given for launching element.");if(n&&!n.type)throw new TypeError("DOM event should be given for launching event.");return{launchingElement:t,launchingEvent:n}}i(T,"components",new WeakMap),i(T,"NAVIGATE",{BACKWARD:-1,FORWARD:1});var M=[k,function(e){return function(t){function o(){return n(this,o),d(this,c(o).apply(this,arguments))}return s(o,e),a(o,[{key:"show",value:function(e,t){e&&"function"!=typeof e||(t=e),this.changeState("shown",I(e),t)}},{key:"hide",value:function(e,t){e&&"function"!=typeof e||(t=e),this.changeState("hidden",I(e),t)}}]),o}()}];var O=[b,function(e){return function(t){function o(e,t){var a;n(this,o),a=d(this,c(o).call(this,e,t));var i="onfocusin"in window,r=i?"focusin":"focus";return a.manage(y(a.element.ownerDocument,r,function(e){a.element.contains(e.target)||a.handleBlur(e)},!i)),a}return s(o,e),a(o,[{key:"handleBlur",value:function(){throw new Error("Components inheriting TrackBlur mix-in must implement handleBlur() method.")}}]),o}()}],F=function(){var e=[],t=!1;function n(){e.forEach(function(e){e()}),t=!1}function o(){t||(t=!0,window.requestAnimationFrame(n))}return{add:function(t){return e.length||window.addEventListener("resize",o),function(t){t&&e.indexOf(t)<0&&e.push(t)}(t),{release:function(){var n=e.indexOf(t);n>=0&&e.splice(n,1)}}}}}(),P=function(e){function t(e,o){var a;n(this,t);var i=(a=d(this,c(t).call(this,e,o))).element.getAttribute(a.options.attribDirection);return a.options.direction||(a.options.direction=i||"bottom"),i||a.element.setAttribute(a.options.attribDirection,a.options.direction),a}return s(t,m(g,M,O)),a(t,[{key:"handleBlur",value:function(e){if(this.element.classList.contains(this.options.classShown)){this.changeState("hidden",I(e));var t=this.options.refNode;this.element.contains(e.relatedTarget)&&t&&e.target!==t&&HTMLElement.prototype.focus.call(t)}}},{key:"_getContainer",value:function(){return this.element.closest(this.options.selectorContainer)||this.element.ownerDocument.body}},{key:"_getPos",value:function(){var e=this.element,t=this.options,n=t.refNode,o=t.offset,a=t.direction;if(!n)throw new Error("Cannot find the refernce node for positioning floating menu.");return function(e){var t,n=e.menuSize,o=e.refPosition,a=e.offset,r=void 0===a?{}:a,s=e.direction,c=void 0===s?"bottom":s,l=e.scrollX,u=void 0===l?0:l,d=e.scrollY,p=void 0===d?0:d,h=o.left,f=void 0===h?0:h,m=o.top,g=void 0===m?0:m,v=o.right,b=void 0===v?0:v,y=o.bottom,w=void 0===y?0:y,S=n.width,k=n.height,C=r.top,E=void 0===C?0:C,L=r.left,_=void 0===L?0:L,x=(f+b)/2,A=(g+w)/2;return(t={},i(t,"left",{left:f-S+u-_,top:A-k/2+p+E}),i(t,"top",{left:x-S/2+u+_,top:g-k+p-E}),i(t,"right",{left:b+u+_,top:A-k/2+p+E}),i(t,"bottom",{left:x-S/2+u+_,top:w+p+E}),t)[c]}({menuSize:e.getBoundingClientRect(),refPosition:n.getBoundingClientRect(),offset:"function"!=typeof o?o:o(e,a,n),direction:a,scrollX:n.ownerDocument.defaultView.pageXOffset,scrollY:n.ownerDocument.defaultView.pageYOffset})}},{key:"_testStyles",value:function(){if(this.options.debugStyle){var e=this.element,t=e.ownerDocument.defaultView.getComputedStyle(e),n={position:"absolute",right:"auto",margin:0};Object.keys(n).forEach(function(e){("number"==typeof n[e]?parseFloat(n[e]):n[e])!==t.getPropertyValue(e)&&console.warn("Floating menu component expects ".concat(e,": ").concat(n[e]," style."))})}}},{key:"_place",value:function(){var e=this.element,t=this._getPos(),n=t.left,o=t.top;e.style.left="".concat(n,"px"),e.style.top="".concat(o,"px"),this._testStyles()}},{key:"shouldStateBeChanged",value:function(e){return("shown"===e||"hidden"===e)&&e!==(this.element.classList.contains(this.options.classShown)?"shown":"hidden")}},{key:"_changeState",value:function(e,t,n){var o=this,a="shown"===e,i=this.options,r=i.refNode,s=i.classShown,c=i.classRefShown;if(!r)throw new TypeError("Cannot find the refernce node for changing the style.");this.element.classList.toggle(s,a),c&&r.classList.toggle(c,a),"shown"===e&&(this.hResize||(this.hResize=F.add(function(){o._place()})),this._getContainer().appendChild(this.element),this._place(),this.element.hasAttribute(this.options.attribAvoidFocusOnOpen)||(this.element.querySelector(this.options.selectorPrimaryFocus)||this.element).focus()),"hidden"===e&&this.hResize&&(this.hResize.release(),this.hResize=null),n()}},{key:"release",value:function(){this.hResize&&(this.hResize.release(),this.hResize=null),p(c(t.prototype),"release",this).call(this)}}]),t}();i(P,"options",{selectorContainer:"[data-floating-menu-container]",selectorPrimaryFocus:"[data-floating-menu-primary-focus]",attribDirection:"data-floating-menu-direction",attribAvoidFocusOnOpen:"data-avoid-focus-on-open",classShown:"",classRefShown:"",eventBeforeShown:"floating-menu-beingshown",eventAfterShown:"floating-menu-shown",eventBeforeHidden:"floating-menu-beinghidden",eventAfterHidden:"floating-menu-hidden",refNode:null,offset:{left:0,top:0}}),i(P,"components",new WeakMap);var q=function(){var e;return i(e={},"top","bottom"),i(e,"bottom","top"),i(e,"left","left"),i(e,"right","right"),e}(),B=function(){var e;return i(e={},"top",-2),i(e,"bottom",-1),i(e,"left",-2),i(e,"right",-1),e}(),H=function(e,t,n){var o=q[t],a=B[t];o&&a||console.warn("Wrong floating menu direction:",t);var s=e.offsetWidth,c=(e.offsetHeight,e.ownerDocument.defaultView.getComputedStyle(e,":before")),l=[o,"left","width","height","border-top-width"].reduce(function(e,t){return r({},e,i({},t,Number((/^([\d-.]+)px$/.exec(c.getPropertyValue(t))||[])[1])))},{});if(Object.keys(l).every(function(e){return!isNaN(l[e])})){var u=l.left,d=l.width,p=l.height,h=l["border-top-width"];return{left:s/2-(u+Math.sqrt(Math.pow(d,2)+Math.pow(p,2))/2),top:Math.sqrt(2*Math.pow(h,2))+a*l[o]}}},R=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"getCurrentNavigation",function(){var e=a.element.ownerDocument.activeElement;return e.nodeType===Node.ELEMENT_NODE&&e.matches(a.options.selectorItem)?e:null}),i(u(u(a)),"navigate",function(e){for(var t=f(a.element.ownerDocument.querySelectorAll(a.options.selectorItem)),n=a.getCurrentNavigation()||a.element.querySelector(a.options.selectorItemSelected),o=function(n){var o=Math.max(t.indexOf(n)+e,-1);return t[function(e,t){return e+(e>=0?0:t)}(function(e,t){return e-(e<t?0:t)}(o,t.length),t.length)]},i=o(n);i&&i!==n;i=o(i))if(!i.matches(a.options.selectorItemHidden)&&!i.parentNode.matches(a.options.selectorItemHidden)&&!i.matches(a.options.selectorItemSelected)){i.focus();break}}),a.manage(y(a.element.ownerDocument,"click",function(e){a._handleDocumentClick(e),a.wasOpenBeforeClick=void 0})),a.manage(y(a.element.ownerDocument,"keydown",function(e){a._handleKeyPress(e)})),a.manage(y(a.element,"mousedown",function(){a.wasOpenBeforeClick=e.classList.contains(a.options.classShown)})),a}return s(o,m(g,v,M,b)),a(o,[{key:"changeState",value:function(e,t,n){if("hidden"===e?this.element.setAttribute("aria-expanded","false"):this.element.setAttribute("aria-expanded","true"),!this.optionMenu){var o=this.element.querySelector(this.options.selectorOptionMenu);if(!o)throw new Error("Cannot find the target menu.");this.optionMenu=P.create(o,{refNode:this.element,classShown:this.options.classMenuShown,classRefShown:this.options.classShown,offset:this.options.objMenuOffset}),this.children.push(this.optionMenu)}this.optionMenu.element.classList.contains(this.options.classMenuFlip)&&(this.optionMenu.options.offset=this.options.objMenuOffsetFlip),this.optionMenu.changeState(e,Object.assign(t,{delegatorNode:this.element}),n)}},{key:"_handleDocumentClick",value:function(e){var t=this.element,n=this.optionMenu,o=this.wasOpenBeforeClick,a=t.contains(e.target),i=n&&n.element.contains(e.target),r=a&&!o?"shown":"hidden";a&&("A"===t.tagName&&e.preventDefault(),e.delegateTarget=t),this.changeState(r,I(e),function(){"hidden"===r&&i&&t.focus()})}},{key:"_handleKeyPress",value:function(e){var t=e.which,n=this.element,o=this.optionMenu,a=this.options,i=o&&o.element.contains(e.target),r=this.element.classList.contains(this.options.classShown);switch(t){case 27:this.changeState("hidden",I(e),function(){i&&n.focus()});break;case 13:case 32:if(!r&&this.element.ownerDocument.activeElement!==this.element)return;var s=n.contains(e.target),c=s&&!n.classList.contains(a.classShown)?"shown":"hidden";s&&(e.delegateTarget=n,e.preventDefault(),this.changeState(c,I(e),function(){"hidden"===c&&i&&n.focus()}));break;case 38:case 40:if(!r)return;e.preventDefault();var l={38:-1,40:1}[e.which];this.navigate(l)}}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-overflow-menu]",selectorOptionMenu:".".concat(e,"--overflow-menu-options"),selectorItem:"\n        .".concat(e,"--overflow-menu-options--open >\n        .").concat(e,"--overflow-menu-options__option:not(.").concat(e,"--overflow-menu-options__option--disabled) >\n        .").concat(e,"--overflow-menu-options__btn\n      "),classShown:"".concat(e,"--overflow-menu--open"),classMenuShown:"".concat(e,"--overflow-menu-options--open"),classMenuFlip:"".concat(e,"--overflow-menu--flip"),objMenuOffset:H,objMenuOffsetFlip:H}}}]),o}();function j(e){var t=function(t){function o(){return n(this,o),d(this,c(o).apply(this,arguments))}return s(o,e),a(o,null,[{key:"init",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=Object.assign(Object.create(this.options),n);if(!t||t.nodeType!==Node.ELEMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE)throw new TypeError("DOM document or DOM element should be given to search for and initialize this widget.");if(t.nodeType!==Node.ELEMENT_NODE||!t.matches(o.selectorInit)){var a=o.initEventNames.map(function(a){return y(t,a,function(t){var a=C(t,"[".concat(o.attribInitTarget,"]"));if(a){t.delegateTarget=a;var i=f(a.ownerDocument.querySelectorAll(a.getAttribute(o.attribInitTarget)));if(i.length>1)throw new Error("Target widget must be unique.");if(1===i.length){"A"===a.tagName&&t.preventDefault();var r=e.create(i[0],n);"function"==typeof r.createdByLauncher&&r.createdByLauncher(t)}}})});return{release:function(){for(var e=a.pop();e;e=a.pop())e.release()}}}return this.create(t,n),""}}]),o}();return i(t,"forLazyInit",!0),t}i(R,"components",new WeakMap);var V=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_handleFocusinListener",void 0),i(u(u(a)),"_handleKeydownListener",void 0),i(u(u(a)),"_handleFocusin",function(e){a.element.classList.contains(a.options.classVisible)&&!a.element.contains(e.target)&&a.options.selectorsFloatingMenus.every(function(t){return!C(e,t)})&&a.element.focus()}),a._hookCloseActions(),a}return s(o,m(g,j,M,b)),a(o,[{key:"createdByLauncher",value:function(e){this.show(e)}},{key:"shouldStateBeChanged",value:function(e){return"shown"===e?!this.element.classList.contains(this.options.classVisible):this.element.classList.contains(this.options.classVisible)}},{key:"_changeState",value:function(e,t,n){var o,a=this;if(this._handleFocusinListener&&(this._handleFocusinListener=this.unmanage(this._handleFocusinListener).release()),"shown"===e){var i="onfocusin"in this.element.ownerDocument.defaultView,r=i?"focusin":"focus";this._handleFocusinListener=this.manage(y(this.element.ownerDocument,r,this._handleFocusin,!i))}"hidden"===e?this.element.classList.toggle(this.options.classVisible,!1):"shown"===e&&this.element.classList.toggle(this.options.classVisible,!0),o=this.manage(y(this.element,"transitionend",function(){o&&(o=a.unmanage(o).release()),"shown"===e&&a.element.offsetWidth>0&&a.element.offsetHeight>0&&(a.element.querySelector(a.options.selectorPrimaryFocus)||a.element).focus(),n()}))}},{key:"_hookCloseActions",value:function(){var e=this;this.manage(y(this.element,"click",function(t){var n=C(t,e.options.selectorModalClose);n&&(t.delegateTarget=n),(n||t.target===e.element)&&e.hide(t)})),this._handleKeydownListener&&(this._handleKeydownListener=this.unmanage(this._handleKeydownListener).release()),this._handleKeydownListener=this.manage(y(this.element.ownerDocument.body,"keydown",function(t){27===t.which&&(t.stopPropagation(),e.hide(t))}))}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-modal]",selectorModalClose:"[data-modal-close]",selectorPrimaryFocus:"[data-modal-primary-focus]",selectorsFloatingMenus:[".".concat(e,"--overflow-menu-options"),".".concat(e,"--tooltip"),".flatpickr-calendar"],classVisible:"is-visible",attribInitTarget:"data-modal-target",initEventNames:["click"],eventBeforeShown:"modal-beingshown",eventAfterShown:"modal-shown",eventBeforeHidden:"modal-beinghidden",eventAfterHidden:"modal-hidden"}}}]),o}();i(V,"components",new WeakMap);var W=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).active=a.options.active,a.set(a.active),a}return s(o,m(g,v,b)),a(o,[{key:"set",value:function(e){if("boolean"!=typeof e)throw new TypeError("set expects a boolean.");this.active=e,this.element.classList.toggle(this.options.classLoadingStop,!this.active);var t=this.element.parentNode;return t&&t.classList.contains(this.options.classLoadingOverlay)&&t.classList.toggle(this.options.classLoadingOverlayStop,!this.active),this}},{key:"toggle",value:function(){return this.set(!this.active)}},{key:"isActive",value:function(){return this.active}},{key:"end",value:function(){var e=this;this.set(!1);var t=this.manage(y(this.element,"animationend",function(n){t&&(t=e.unmanage(t).release()),"rotate-end-p2"===n.animationName&&e._deleteElement()}))}},{key:"_deleteElement",value:function(){var e=this.element.parentNode;e.removeChild(this.element),e.classList.contains(this.options.selectorLoadingOverlay)&&e.remove()}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-loading]",selectorLoadingOverlay:".".concat(e,"--loading-overlay"),classLoadingOverlay:"".concat(e,"--loading-overlay"),classLoadingStop:"".concat(e,"--loading--stop"),classLoadingOverlayStop:"".concat(e,"--loading-overlay--stop"),active:!0}}}]),o}();function Y(e,t,n){n?e.setAttribute(t,""):e.removeAttribute(t)}i(W,"components",new WeakMap);var U=function(e){function o(e,t){var a;n(this,o);var i=(a=d(this,c(o).call(this,e,t))).options.initialState;return i&&a.setState(i),a}return s(o,m(g,v,b)),a(o,[{key:"setState",value:function(e){var t=this.constructor.states,n=Object.keys(t).map(function(e){return t[e]});if(n.indexOf(e)<0)throw new Error("One of the following value should be given as the state: ".concat(n.join(", ")));var o=this.element,a=this.options,i=a.selectorSpinner,r=a.selectorFinished,s=a.selectorTextActive,c=a.selectorTextFinished,l=o.querySelector(i),u=o.querySelector(r),d=o.querySelector(s),p=o.querySelector(c);return l&&(l.classList.toggle(this.options.classLoadingStop,e!==t.ACTIVE),Y(l,"hidden",e===t.FINISHED)),u&&Y(u,"hidden",e!==t.FINISHED),d&&Y(d,"hidden",e!==t.ACTIVE),p&&Y(p,"hidden",e!==t.FINISHED),this}}],[{key:"options",get:function(){return{selectorInit:"[data-inline-loading]",selectorSpinner:"[data-inline-loading-spinner]",selectorFinished:"[data-inline-loading-finished]",selectorTextActive:"[data-inline-loading-text-active]",selectorTextFinished:"[data-inline-loading-text-finished]",classLoadingStop:"".concat(t.prefix,"--loading--stop")}}}]),o}();i(U,"states",{INACTIVE:"inactive",ACTIVE:"active",FINISHED:"finished"}),i(U,"components",new WeakMap);var K=function(e){return Array.prototype.slice.call(e)},G=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element.ownerDocument,"click",function(e){a._toggle(e)})),a.manage(y(a.element,"keydown",function(e){a._handleKeyDown(e)})),a.manage(y(a.element,"click",function(e){var t=C(e,a.options.selectorItem);t&&a.select(t)})),a}return s(o,m(g,v,O)),a(o,[{key:"_handleKeyDown",value:function(e){var t=this.element.classList.contains(this.options.classOpen),n={38:this.constructor.NAVIGATE.BACKWARD,40:this.constructor.NAVIGATE.FORWARD}[e.which];t&&void 0!==n?(this.navigate(n),e.preventDefault()):this._toggle(e)}},{key:"_toggle",value:function(e){var t=this;if(!this.element.classList.contains(this.options.classDisabled)&&([13,32,40].indexOf(e.which)>=0&&!e.target.matches(this.options.selectorItem)||27===e.which||"click"===e.type)){var n=this.element.classList.contains(this.options.classOpen),o=this.element.contains(e.target),a={add:o&&40===e.which&&!n,remove:(!o||27===e.which)&&n,toggle:o&&27!==e.which&&40!==e.which};Object.keys(a).forEach(function(e){a[e]&&(t.element.classList[e](t.options.classOpen),t.element.focus())}),K(this.element.querySelectorAll(this.options.selectorItem)).forEach(function(e){t.element.classList.contains(t.options.classOpen)?e.tabIndex=0:e.tabIndex=-1})}}},{key:"getCurrentNavigation",value:function(){var e=this.element.ownerDocument.activeElement;return e.nodeType===Node.ELEMENT_NODE&&e.matches(this.options.selectorItem)?e:null}},{key:"navigate",value:function(e){for(var t=K(this.element.querySelectorAll(this.options.selectorItem)),n=this.getCurrentNavigation()||this.element.querySelector(this.options.selectorItemSelected),o=function(n){var o,a,i=Math.max(t.indexOf(n)+e,-1);return t[function(e,t){return e+(e>=0?0:t)}((o=i,a=t.length,o-(o<a?0:a)),t.length)]},a=o(n);a&&a!==n;a=o(a))if(!a.matches(this.options.selectorItemHidden)&&!a.parentNode.matches(this.options.selectorItemHidden)&&!a.matches(this.options.selectorItemSelected)){a.focus();break}}},{key:"select",value:function(e){var t=this,n=new CustomEvent(this.options.eventBeforeSelected,{bubbles:!0,cancelable:!0,detail:{item:e}});if(this.element.dispatchEvent(n)){if("navigation"!==this.element.dataset.dropdownType){var o="inline"!==this.element.dataset.dropdownType?this.options.selectorText:this.options.selectorTextInner,a=this.element.querySelector(o);a&&(a.innerHTML=e.innerHTML),e.classList.add(this.options.classSelected)}this.element.dataset.value=e.parentElement.dataset.value,K(this.element.querySelectorAll(this.options.selectorItemSelected)).forEach(function(n){e!==n&&n.classList.remove(t.options.classSelected)}),this.element.dispatchEvent(new CustomEvent(this.options.eventAfterSelected,{bubbles:!0,cancelable:!0,detail:{item:e}}))}}},{key:"handleBlur",value:function(){this.element.classList.remove(this.options.classOpen)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-dropdown]",selectorText:".".concat(e,"--dropdown-text"),selectorTextInner:".".concat(e,"--dropdown-text__inner"),selectorItem:".".concat(e,"--dropdown-link"),selectorItemSelected:".".concat(e,"--dropdown--selected"),selectorItemHidden:'[hidden],[aria-hidden="true"]',classSelected:"".concat(e,"--dropdown--selected"),classOpen:"".concat(e,"--dropdown--open"),classDisabled:"".concat(e,"--dropdown--disabled"),eventBeforeSelected:"dropdown-beingselected",eventAfterSelected:"dropdown-selected"}}}]),o}();i(G,"components",new WeakMap),i(G,"NAVIGATE",{BACKWARD:-1,FORWARD:1});var z=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element.querySelector(".up-icon"),"click",function(e){a._handleClick(e)})),a.manage(y(a.element.querySelector(".down-icon"),"click",function(e){a._handleClick(e)})),a}return s(o,m(g,v,b)),a(o,[{key:"_handleClick",value:function(e){var t=this.element.querySelector(this.options.selectorInput),n=e.currentTarget.getAttribute("class").split(" ");n.indexOf("up-icon")>=0?++t.value:n.indexOf("down-icon")>=0&&--t.value,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1}))}}],[{key:"options",get:function(){return{selectorInit:"[data-numberinput]",selectorInput:".".concat(t.prefix,"--number input")}}}]),o}();i(z,"components",new WeakMap);var J=function(e){return Array.prototype.slice.call(e)},X=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_toggleState",function(e,t){var n=e.dataset,o=n.label?n.label:"",i=n.previousValue?n.previousValue:"",r=t;a.changeState({group:n.event,element:e,label:o,previousValue:i,initialEvt:r})}),i(u(u(a)),"_zebraStripe",function(e){e.forEach(function(e,t){t%2==0?(e.classList.add(a.options.classParentRowEven),e.nextElementSibling&&e.nextElementSibling.classList.contains(a.options.classExpandableRow)&&e.nextElementSibling.classList.add(a.options.classExpandableRowEven)):e.classList.remove(a.options.classParentRowEven)})}),i(u(u(a)),"_initExpandableRows",function(e){e.forEach(function(e){e.classList.remove(a.options.classExpandableRowHidden),a.tableBody.removeChild(e)})}),i(u(u(a)),"_toggleRowExpand",function(e){var t=e.element,n=C(e.initialEvt,a.options.eventParentContainer),o=a.expandCells.indexOf(t);void 0===t.dataset.previousValue||"expanded"===t.dataset.previousValue?(t.dataset.previousValue="collapsed",a.tableBody.insertBefore(a.expandableRows[o],a.parentRows[o+1])):(a.tableBody.removeChild(n.nextElementSibling),t.dataset.previousValue="expanded")}),i(u(u(a)),"_toggleSort",function(e){var t=e.element,n=e.previousValue;n&&"descending"!==n?(t.dataset.previousValue="descending",t.classList.remove(a.options.classTableSortAscending)):(t.dataset.previousValue="ascending",t.classList.add(a.options.classTableSortAscending))}),i(u(u(a)),"_toggleSelectAll",function(e){var t=e.element,n=e.previousValue,o=J(a.element.querySelectorAll(a.options.selectorCheckbox));n&&"toggled"!==n?(o.forEach(function(e){e.checked=!1}),t.dataset.previousValue="toggled"):(o.forEach(function(e){e.checked=!0}),t.dataset.previousValue="off")}),i(u(u(a)),"refreshRows",function(){var e=J(a.element.querySelectorAll(a.options.selectorExpandCells)),t=J(a.element.querySelectorAll(a.options.selectorExpandableRows)),n=J(a.element.querySelectorAll(a.options.selectorParentRows));if(a.parentRows.length>0){var o=n.filter(function(e){return!a.parentRows.some(function(t){return t===e})});if(t.length>0){var i=o.map(function(e){return e.nextElementSibling}),r=J.apply(void 0,[a.expandableRows].concat(f(i)));a._initExpandableRows(i),a.expandableRows=r}a._zebraStripe(n)}else a._zebraStripe(n),t.length>0&&(a._initExpandableRows(t),a.expandableRows=t);a.expandCells=e,a.parentRows=n}),a.container=e.parentNode,a.tableBody=a.element.querySelector(a.options.selectorTableBody),a.expandCells=[],a.expandableRows=[],a.parentRows=[],a.overflowInitialized=!1,a.refreshRows(),a.manage(y(a.element,"click",function(e){var t=C(e,a.options.eventTrigger);t&&a._toggleState(t,e)})),a.manage(y(a.element,"keydown",function(e){if(13===e.which){var t=C(e,a.options.eventTrigger);t&&a._toggleState(t,e)}})),a}return s(o,m(g,v,k,b)),a(o,[{key:"_changeState",value:function(e,t){this[this.constructor.eventHandlers[e.group]](e),t()}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-responsive-table]",selectorExpandCells:".".concat(e,"--table-expand"),selectorExpandableRows:".".concat(e,"--expandable-row"),selectorParentRows:".".concat(e,"--parent-row"),selectorTableBody:".".concat(e,"--table-body"),selectorCheckbox:".".concat(e,"--checkbox"),classParentRowEven:"".concat(e,"--parent-row--even"),classExpandableRow:"".concat(e,"--expandable-row"),classExpandableRowEven:"".concat(e,"--expandable-row--even"),classExpandableRowHidden:"".concat(e,"--expandable-row--hidden"),classTableSortAscending:"".concat(e,"--table-sort--ascending"),eventBeforeExpand:"responsive-table-beforetoggleexpand",eventAfterExpand:"responsive-table-aftertoggleexpand",eventBeforeSort:"responsive-table-beforetogglesort",eventAfterSort:"responsive-table-aftertogglesort",eventBeforeSelectAll:"responsive-table-beforetoggleselectall",eventAfterSelectAll:"responsive-table-aftertoggleselectall",eventTrigger:"[data-event]",eventParentContainer:"[data-parent-row]"}}}]),o}();i(X,"components",new WeakMap),i(X,"eventHandlers",{expand:"_toggleRowExpand",sort:"_toggleSort","select-all":"_toggleSelectAll"});var $=X,Z=function(e){return Array.prototype.slice.call(e)},Q=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_sortToggle",function(e){var t=e.element,n=e.previousValue;Z(a.tableHeaders).forEach(function(e){var n=e.querySelector(a.options.selectorTableSort);null!==n&&n!==t&&(n.classList.remove(a.options.classTableSortActive),n.classList.remove(a.options.classTableSortAscending))}),n&&"descending"!==n?(t.dataset.previousValue="descending",t.classList.add(a.options.classTableSortActive),t.classList.remove(a.options.classTableSortAscending)):(t.dataset.previousValue="ascending",t.classList.add(a.options.classTableSortActive),t.classList.add(a.options.classTableSortAscending))}),i(u(u(a)),"_selectToggle",function(e){var t=e.element,n=t.checked;a.state.checkboxCount+=n?1:-1,a.countEl.textContent=a.state.checkboxCount,t.parentNode.parentNode.classList.toggle(a.options.classTableSelected),a._actionBarToggle(a.state.checkboxCount>0)}),i(u(u(a)),"_selectAllToggle",function(e){var t=e.element.checked,n=Z(a.element.querySelectorAll(a.options.selectorCheckbox));a.state.checkboxCount=t?n.length-1:0,n.forEach(function(e){e.checked=t;var n=e.parentNode.parentNode;t&&n?n.classList.add(a.options.classTableSelected):n.classList.remove(a.options.classTableSelected)}),a._actionBarToggle(a.state.checkboxCount>0),a.batchActionEl&&(a.countEl.textContent=a.state.checkboxCount)}),i(u(u(a)),"_actionBarCancel",function(){var e=Z(a.element.querySelectorAll(a.options.selectorCheckbox));Z(a.element.querySelectorAll(a.options.selectorTableSelected)).forEach(function(e){e.classList.remove(a.options.classTableSelected)}),e.forEach(function(e){e.checked=!1}),a.state.checkboxCount=0,a._actionBarToggle(!1),a.batchActionEl&&(a.countEl.textContent=a.state.checkboxCount)}),i(u(u(a)),"_actionBarToggle",function(e){e?(a.batchActionEl.dataset.active=!0,a.batchActionEl.classList.add(a.options.classActionBarActive)):a.batchActionEl&&(a.batchActionEl.dataset.active=!1,a.batchActionEl.classList.remove(a.options.classActionBarActive)),a.batchActionEl&&a.batchActionEl.addEventListener("transitionend",function e(t){a.batchActionEl.removeEventListener("transitionend",e),t.target.matches(a.options.selectorActions)&&("false"===a.batchActionEl.dataset.active?a.batchActionEl.setAttribute("tabIndex",-1):a.batchActionEl.setAttribute("tabIndex",0))})}),i(u(u(a)),"_expandableRowsInit",function(e){e.forEach(function(e){e.classList.remove(a.options.classExpandableRowHidden),a.tableBody.removeChild(e)})}),i(u(u(a)),"_rowExpandToggle",function(e){var t=e.element,n=C(e.initialEvt,a.options.eventParentContainer),o=a.expandCells.indexOf(t);void 0===t.dataset.previousValue||"expanded"===t.dataset.previousValue?(t.dataset.previousValue="collapsed",n.classList.add(a.options.classExpandableRow),a.tableBody.insertBefore(a.expandableRows[o],a.parentRows[o+1])):(n.classList.remove(a.options.classExpandableRow),a.tableBody.removeChild(n.nextElementSibling),t.dataset.previousValue="expanded")}),i(u(u(a)),"_expandableHoverToggle",function(e){e.previousElementSibling.classList.add(a.options.classExpandableRowHover);e.addEventListener("mouseout",function t(){e.previousElementSibling.classList.remove(a.options.classExpandableRowHover),e.removeEventListener("mouseout",t)})}),i(u(u(a)),"_toggleState",function(e,t){var n=e.dataset,o=n.label?n.label:"",i=n.previousValue?n.previousValue:"",r=t;a.changeState({group:n.event,element:e,label:o,previousValue:i,initialEvt:r})}),i(u(u(a)),"_keydownHandler",function(e){27===e.which&&a._actionBarCancel()}),i(u(u(a)),"refreshRows",function(){var e=Z(a.element.querySelectorAll(a.options.selectorExpandCells)),t=Z(a.element.querySelectorAll(a.options.selectorExpandableRows)),n=Z(a.element.querySelectorAll(a.options.selectorParentRows));if(a.parentRows.length>0){var o=n.filter(function(e){return!a.parentRows.some(function(t){return t===e})});if(t.length>0){var i=o.map(function(e){return e.nextElementSibling}),r=[].concat(f(Z(a.expandableRows)),f(Z(i)));a._expandableRowsInit(i),a.expandableRows=r}}else t.length>0&&(a._expandableRowsInit(t),a.expandableRows=t);a.expandCells=e,a.parentRows=n}),a.container=e.parentNode,a.toolbarEl=a.element.querySelector(a.options.selectorToolbar),a.batchActionEl=a.element.querySelector(a.options.selectorActions),a.countEl=a.element.querySelector(a.options.selectorCount),a.cancelEl=a.element.querySelector(a.options.selectorActionCancel),a.tableHeaders=a.element.querySelectorAll("th"),a.tableBody=a.element.querySelector(a.options.selectorTableBody),a.expandCells=[],a.expandableRows=[],a.parentRows=[],a.refreshRows(),a.element.addEventListener("mouseover",function(e){var t=C(e,a.options.selectorChildRow);t&&a._expandableHoverToggle(t,!0)}),a.element.addEventListener("click",function(e){var t=C(e,a.options.eventTrigger);t&&a._toggleState(t,e)}),a.element.addEventListener("keydown",a._keydownHandler),a.state={checkboxCount:0},a}return s(o,m(g,v,k)),a(o,[{key:"_changeState",value:function(e,t){this[this.constructor.eventHandlers[e.group]](e),t()}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-table-v2]",selectorToolbar:".".concat(e,"--table--toolbar"),selectorActions:".".concat(e,"--batch-actions"),selectorCount:"[data-items-selected]",selectorActionCancel:".".concat(e,"--batch-summary__cancel"),selectorCheckbox:".".concat(e,"--checkbox"),selectorExpandCells:".".concat(e,"--table-expand-v2"),selectorExpandableRows:".".concat(e,"--expandable-row-v2"),selectorParentRows:".".concat(e,"--parent-row-v2"),selectorChildRow:"[data-child-row]",selectorTableBody:"tbody",selectorTableSort:".".concat(e,"--table-sort-v2"),selectorTableSelected:".".concat(e,"--data-table-v2--selected"),classExpandableRow:"".concat(e,"--expandable-row-v2"),classExpandableRowHidden:"".concat(e,"--expandable-row--hidden-v2"),classExpandableRowHover:"".concat(e,"--expandable-row--hover-v2"),classTableSortAscending:"".concat(e,"--table-sort-v2--ascending"),classTableSortActive:"".concat(e,"--table-sort-v2--active"),classActionBarActive:"".concat(e,"--batch-actions--active"),classTableSelected:"".concat(e,"--data-table-v2--selected"),eventBeforeExpand:"data-table-v2-beforetoggleexpand",eventAfterExpand:"data-table-v2-aftertoggleexpand",eventBeforeSort:"data-table-v2-beforetogglesort",eventAfterSort:"data-table-v2-aftertogglesort",eventTrigger:"[data-event]",eventParentContainer:"[data-parent-row]"}}}]),o}();i(Q,"components",new WeakMap),i(Q,"eventHandlers",{expand:"_rowExpandToggle",sort:"_sortToggle",select:"_selectToggle","select-all":"_selectAllToggle","action-bar-cancel":"_actionBarCancel"});var ee="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var te,ne=(function(e,t){e.exports=function(){var e=function(e){return("0"+e).slice(-2)},t=function(e){return!0===e?1:0};function n(e,t,n){var o;return void 0===n&&(n=!1),function(){var a=this,i=arguments;null!==o&&clearTimeout(o),o=window.setTimeout(function(){o=null,n||e.apply(a,i)},t),n&&!o&&e.apply(a,i)}}var o=function(e){return e instanceof Array?e:[e]},a=function(){},i=function(e,t,n){return n.months[t?"shorthand":"longhand"][e]},r={D:a,F:function(e,t,n){e.setMonth(n.months.longhand.indexOf(t))},G:function(e,t){e.setHours(parseFloat(t))},H:function(e,t){e.setHours(parseFloat(t))},J:function(e,t){e.setDate(parseFloat(t))},K:function(e,n,o){e.setHours(e.getHours()%12+12*t(new RegExp(o.amPM[1],"i").test(n)))},M:function(e,t,n){e.setMonth(n.months.shorthand.indexOf(t))},S:function(e,t){e.setSeconds(parseFloat(t))},U:function(e,t){return new Date(1e3*parseFloat(t))},W:function(e,t){var n=parseInt(t);return new Date(e.getFullYear(),0,2+7*(n-1),0,0,0,0)},Y:function(e,t){e.setFullYear(parseFloat(t))},Z:function(e,t){return new Date(t)},d:function(e,t){e.setDate(parseFloat(t))},h:function(e,t){e.setHours(parseFloat(t))},i:function(e,t){e.setMinutes(parseFloat(t))},j:function(e,t){e.setDate(parseFloat(t))},l:a,m:function(e,t){e.setMonth(parseFloat(t)-1)},n:function(e,t){e.setMonth(parseFloat(t)-1)},s:function(e,t){e.setSeconds(parseFloat(t))},w:a,y:function(e,t){e.setFullYear(2e3+parseFloat(t))}},s={D:"(\\w+)",F:"(\\w+)",G:"(\\d\\d|\\d)",H:"(\\d\\d|\\d)",J:"(\\d\\d|\\d)\\w+",K:"",M:"(\\w+)",S:"(\\d\\d|\\d)",U:"(.+)",W:"(\\d\\d|\\d)",Y:"(\\d{4})",Z:"(.+)",d:"(\\d\\d|\\d)",h:"(\\d\\d|\\d)",i:"(\\d\\d|\\d)",j:"(\\d\\d|\\d)",l:"(\\w+)",m:"(\\d\\d|\\d)",n:"(\\d\\d|\\d)",s:"(\\d\\d|\\d)",w:"(\\d\\d|\\d)",y:"(\\d{2})"},c={Z:function(e){return e.toISOString()},D:function(e,t,n){return t.weekdays.shorthand[c.w(e,t,n)]},F:function(e,t,n){return i(c.n(e,t,n)-1,!1,t)},G:function(t,n,o){return e(c.h(t,n,o))},H:function(t){return e(t.getHours())},J:function(e,t){return void 0!==t.ordinal?e.getDate()+t.ordinal(e.getDate()):e.getDate()},K:function(e,n){return n.amPM[t(e.getHours()>11)]},M:function(e,t){return i(e.getMonth(),!0,t)},S:function(t){return e(t.getSeconds())},U:function(e){return e.getTime()/1e3},W:function(e,t,n){return n.getWeek(e)},Y:function(e){return e.getFullYear()},d:function(t){return e(t.getDate())},h:function(e){return e.getHours()%12?e.getHours()%12:12},i:function(t){return e(t.getMinutes())},j:function(e){return e.getDate()},l:function(e,t){return t.weekdays.longhand[e.getDay()]},m:function(t){return e(t.getMonth()+1)},n:function(e){return e.getMonth()+1},s:function(e){return e.getSeconds()},w:function(e){return e.getDay()},y:function(e){return String(e.getFullYear()).substring(2)}},l={weekdays:{shorthand:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],longhand:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},months:{shorthand:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],longhand:["January","February","March","April","May","June","July","August","September","October","November","December"]},daysInMonth:[31,28,31,30,31,30,31,31,30,31,30,31],firstDayOfWeek:0,ordinal:function(e){var t=e%100;if(t>3&&t<21)return"th";switch(t%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}},rangeSeparator:" to ",weekAbbreviation:"Wk",scrollTitle:"Scroll to increment",toggleTitle:"Click to toggle",amPM:["AM","PM"],yearAriaLabel:"Year"},u=function(e){var t=e.config,n=void 0===t?g:t,o=e.l10n,a=void 0===o?l:o;return function(e,t,o){var i=o||a;return void 0!==n.formatDate?n.formatDate(e,t,i):t.split("").map(function(t,o,a){return c[t]&&"\\"!==a[o-1]?c[t](e,i,n):"\\"!==t?t:""}).join("")}},d=function(e){var t=e.config,n=void 0===t?g:t,o=e.l10n,a=void 0===o?l:o;return function(e,t,o,i){if(0===e||e){var c,l=i||a,u=e;if(e instanceof Date)c=new Date(e.getTime());else if("string"!=typeof e&&void 0!==e.toFixed)c=new Date(e);else if("string"==typeof e){var d=t||(n||g).dateFormat,p=String(e).trim();if("today"===p)c=new Date,o=!0;else if(/Z$/.test(p)||/GMT$/.test(p))c=new Date(e);else if(n&&n.parseDate)c=n.parseDate(e,d);else{c=n&&n.noCalendar?new Date((new Date).setHours(0,0,0,0)):new Date((new Date).getFullYear(),0,1,0,0,0,0);for(var h,f=[],m=0,v=0,b="";m<d.length;m++){var y=d[m],w="\\"===y,S="\\"===d[m-1]||w;if(s[y]&&!S){b+=s[y];var k=new RegExp(b).exec(e);k&&(h=!0)&&f["Y"!==y?"push":"unshift"]({fn:r[y],val:k[++v]})}else w||(b+=".");f.forEach(function(e){var t=e.fn,n=e.val;return c=t(c,n,l)||c})}c=h?c:void 0}}if(c instanceof Date&&!isNaN(c.getTime()))return!0===o&&c.setHours(0,0,0,0),c;n.errorHandler(new Error("Invalid date provided: "+u))}}};function p(e,t,n){return void 0===n&&(n=!0),!1!==n?new Date(e.getTime()).setHours(0,0,0,0)-new Date(t.getTime()).setHours(0,0,0,0):e.getTime()-t.getTime()}var h=function(e,t,n){return e>Math.min(t,n)&&e<Math.max(t,n)},f={DAY:864e5},m=["onChange","onClose","onDayCreate","onDestroy","onKeyDown","onMonthChange","onOpen","onParseConfig","onReady","onValueUpdate","onYearChange","onPreCalendarPosition"],g={_disable:[],_enable:[],allowInput:!1,altFormat:"F j, Y",altInput:!1,altInputClass:"form-control input",animate:"object"==typeof window&&-1===window.navigator.userAgent.indexOf("MSIE"),ariaDateFormat:"F j, Y",clickOpens:!0,closeOnSelect:!0,conjunction:", ",dateFormat:"Y-m-d",defaultHour:12,defaultMinute:0,defaultSeconds:0,disable:[],disableMobile:!1,enable:[],enableSeconds:!1,enableTime:!1,errorHandler:function(e){return"undefined"!=typeof console&&console.warn(e)},getWeek:function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var n=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-n.getTime())/864e5-3+(n.getDay()+6)%7)/7)},hourIncrement:1,ignoredFocusElements:[],inline:!1,locale:"default",minuteIncrement:5,mode:"single",nextArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",noCalendar:!1,now:new Date,onChange:[],onClose:[],onDayCreate:[],onDestroy:[],onKeyDown:[],onMonthChange:[],onOpen:[],onParseConfig:[],onReady:[],onValueUpdate:[],onYearChange:[],onPreCalendarPosition:[],plugins:[],position:"auto",positionElement:void 0,prevArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",shorthandCurrentMonth:!1,showMonths:1,static:!1,time_24hr:!1,weekNumbers:!1,wrap:!1};function v(e,t,n){if(!0===n)return e.classList.add(t);e.classList.remove(t)}function b(e,t,n){var o=window.document.createElement(e);return t=t||"",n=n||"",o.className=t,void 0!==n&&(o.textContent=n),o}function y(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function w(e,t){var n=b("div","numInputWrapper"),o=b("input","numInput "+e),a=b("span","arrowUp"),i=b("span","arrowDown");if(o.type="text",o.pattern="\\d*",void 0!==t)for(var r in t)o.setAttribute(r,t[r]);return n.appendChild(o),n.appendChild(a),n.appendChild(i),n}"function"!=typeof Object.assign&&(Object.assign=function(e){if(!e)throw TypeError("Cannot convert undefined or null to object");for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];for(var a=function(){var t=n[i];t&&Object.keys(t).forEach(function(n){return e[n]=t[n]})},i=0;i<n.length;i++)a();return e});var S=300;function k(a,r){var c={config:Object.assign({},E.defaultConfig),l10n:l};function g(e){return e.bind(c)}function k(){var e=c.config;!1===e.weekNumbers&&1===e.showMonths||!0!==e.noCalendar&&window.requestAnimationFrame(function(){if(c.calendarContainer.style.visibility="hidden",c.calendarContainer.style.display="block",void 0!==c.daysContainer){var t=(c.days.offsetWidth+1)*e.showMonths;c.daysContainer.style.width=t+"px",c.calendarContainer.style.width=t+(void 0!==c.weekWrapper?c.weekWrapper.offsetWidth:0)+"px",c.calendarContainer.style.removeProperty("visibility"),c.calendarContainer.style.removeProperty("display")}})}function C(n){if(0!==c.selectedDates.length){void 0!==n&&"blur"!==n.type&&function(n){n.preventDefault();var o="keydown"===n.type,a=n.target;void 0!==c.amPM&&n.target===c.amPM&&(c.amPM.textContent=c.l10n.amPM[t(c.amPM.textContent===c.l10n.amPM[0])]);var i=parseFloat(a.getAttribute("data-min")),r=parseFloat(a.getAttribute("data-max")),s=parseFloat(a.getAttribute("data-step")),l=parseInt(a.value,10),u=n.delta||(o?38===n.which?1:-1:0),d=l+s*u;if(void 0!==a.value&&2===a.value.length){var p=a===c.hourElement,h=a===c.minuteElement;d<i?(d=r+d+t(!p)+(t(p)&&t(!c.amPM)),h&&P(void 0,-1,c.hourElement)):d>r&&(d=a===c.hourElement?d-r-t(!c.amPM):i,h&&P(void 0,1,c.hourElement)),c.amPM&&p&&(1===s?d+l===23:Math.abs(d-l)>s)&&(c.amPM.textContent=c.l10n.amPM[t(c.amPM.textContent===c.l10n.amPM[0])]),a.value=e(d)}}(n);var o=c._input.value;L(),ve(),c._input.value!==o&&c._debouncedChange()}}function L(){if(void 0!==c.hourElement&&void 0!==c.minuteElement){var e,n,o=(parseInt(c.hourElement.value.slice(-2),10)||0)%24,a=(parseInt(c.minuteElement.value,10)||0)%60,i=void 0!==c.secondElement?(parseInt(c.secondElement.value,10)||0)%60:0;void 0!==c.amPM&&(e=o,n=c.amPM.textContent,o=e%12+12*t(n===c.l10n.amPM[1]));var r=void 0!==c.config.minTime||c.config.minDate&&c.minDateHasTime&&c.latestSelectedDateObj&&0===p(c.latestSelectedDateObj,c.config.minDate,!0),s=void 0!==c.config.maxTime||c.config.maxDate&&c.maxDateHasTime&&c.latestSelectedDateObj&&0===p(c.latestSelectedDateObj,c.config.maxDate,!0);if(s){var l=void 0!==c.config.maxTime?c.config.maxTime:c.config.maxDate;(o=Math.min(o,l.getHours()))===l.getHours()&&(a=Math.min(a,l.getMinutes())),a===l.getMinutes()&&(i=Math.min(i,l.getSeconds()))}if(r){var u=void 0!==c.config.minTime?c.config.minTime:c.config.minDate;(o=Math.max(o,u.getHours()))===u.getHours()&&(a=Math.max(a,u.getMinutes())),a===u.getMinutes()&&(i=Math.max(i,u.getSeconds()))}A(o,a,i)}}function _(e){var t=e||c.latestSelectedDateObj;t&&A(t.getHours(),t.getMinutes(),t.getSeconds())}function x(){var e=c.config.defaultHour,t=c.config.defaultMinute,n=c.config.defaultSeconds;if(void 0!==c.config.minDate){var o=c.config.minDate.getHours(),a=c.config.minDate.getMinutes();(e=Math.max(e,o))===o&&(t=Math.max(a,t)),e===o&&t===a&&(n=c.config.minDate.getSeconds())}if(void 0!==c.config.maxDate){var i=c.config.maxDate.getHours(),r=c.config.maxDate.getMinutes();(e=Math.min(e,i))===i&&(t=Math.min(r,t)),e===i&&t===r&&(n=c.config.maxDate.getSeconds())}A(e,t,n)}function A(n,o,a){void 0!==c.latestSelectedDateObj&&c.latestSelectedDateObj.setHours(n%24,o,a||0,0),c.hourElement&&c.minuteElement&&!c.isMobile&&(c.hourElement.value=e(c.config.time_24hr?n:(12+n)%12+12*t(n%12==0)),c.minuteElement.value=e(o),void 0!==c.amPM&&(c.amPM.textContent=c.l10n.amPM[t(n>=12)]),void 0!==c.secondElement&&(c.secondElement.value=e(a)))}function D(e){var t=parseInt(e.target.value)+(e.delta||0);(t/1e3>1||"Enter"===e.key&&!/[^\d]/.test(t.toString()))&&$(t)}function N(e,t,n,o){return t instanceof Array?t.forEach(function(t){return N(e,t,n,o)}):e instanceof Array?e.forEach(function(e){return N(e,t,n,o)}):(e.addEventListener(t,n,o),void c._handlers.push({element:e,event:t,handler:n,options:o}))}function T(e){return function(t){1===t.which&&e(t)}}function I(){pe("onChange")}function M(){if(c.config.wrap&&["open","close","toggle","clear"].forEach(function(e){Array.prototype.forEach.call(c.element.querySelectorAll("[data-"+e+"]"),function(t){return N(t,"click",c[e])})}),c.isMobile)!function(){var e=c.config.enableTime?c.config.noCalendar?"time":"datetime-local":"date";c.mobileInput=b("input",c.input.className+" flatpickr-mobile"),c.mobileInput.step=c.input.getAttribute("step")||"any",c.mobileInput.tabIndex=1,c.mobileInput.type=e,c.mobileInput.disabled=c.input.disabled,c.mobileInput.required=c.input.required,c.mobileInput.placeholder=c.input.placeholder,c.mobileFormatStr="datetime-local"===e?"Y-m-d\\TH:i:S":"date"===e?"Y-m-d":"H:i:S",c.selectedDates.length>0&&(c.mobileInput.defaultValue=c.mobileInput.value=c.formatDate(c.selectedDates[0],c.mobileFormatStr)),c.config.minDate&&(c.mobileInput.min=c.formatDate(c.config.minDate,"Y-m-d")),c.config.maxDate&&(c.mobileInput.max=c.formatDate(c.config.maxDate,"Y-m-d")),c.input.type="hidden",void 0!==c.altInput&&(c.altInput.type="hidden");try{c.input.parentNode&&c.input.parentNode.insertBefore(c.mobileInput,c.input.nextSibling)}catch(e){}N(c.mobileInput,"change",function(e){c.setDate(e.target.value,!1,c.mobileFormatStr),pe("onChange"),pe("onClose")})}();else{var e=n(ne,50);c._debouncedChange=n(I,S),c.daysContainer&&!/iPhone|iPad|iPod/i.test(navigator.userAgent)&&N(c.daysContainer,"mouseover",function(e){"range"===c.config.mode&&te(e.target)}),N(window.document.body,"keydown",ee),c.config.static||N(c._input,"keydown",ee),c.config.inline||c.config.static||N(window,"resize",e),void 0!==window.ontouchstart?N(window.document,"click",X):N(window.document,"mousedown",T(X)),N(window.document,"focus",X,{capture:!0}),!0===c.config.clickOpens&&(N(c._input,"focus",c.open),N(c._input,"mousedown",T(c.open))),void 0!==c.daysContainer&&(N(c.monthNav,"mousedown",T(be)),N(c.monthNav,["keyup","increment"],D),N(c.daysContainer,"mousedown",T(ce))),void 0!==c.timeContainer&&void 0!==c.minuteElement&&void 0!==c.hourElement&&(N(c.timeContainer,["increment"],C),N(c.timeContainer,"blur",C,{capture:!0}),N(c.timeContainer,"mousedown",T(F)),N([c.hourElement,c.minuteElement],["focus","click"],function(e){return e.target.select()}),void 0!==c.secondElement&&N(c.secondElement,"focus",function(){return c.secondElement&&c.secondElement.select()}),void 0!==c.amPM&&N(c.amPM,"mousedown",T(function(e){C(e),I()})))}}function O(e){var t=void 0!==e?c.parseDate(e):c.latestSelectedDateObj||(c.config.minDate&&c.config.minDate>c.now?c.config.minDate:c.config.maxDate&&c.config.maxDate<c.now?c.config.maxDate:c.now);try{void 0!==t&&(c.currentYear=t.getFullYear(),c.currentMonth=t.getMonth())}catch(e){e.message="Invalid date supplied: "+t,c.config.errorHandler(e)}c.redraw()}function F(e){~e.target.className.indexOf("arrow")&&P(e,e.target.classList.contains("arrowUp")?1:-1)}function P(e,t,n){var o=e&&e.target,a=n||o&&o.parentNode&&o.parentNode.firstChild,i=he("increment");i.delta=t,a&&a.dispatchEvent(i)}function q(){var n=window.document.createDocumentFragment();if(c.calendarContainer=b("div","flatpickr-calendar"),c.calendarContainer.tabIndex=-1,!c.config.noCalendar){if(n.appendChild((c.monthNav=b("div","flatpickr-months"),c.yearElements=[],c.monthElements=[],c.prevMonthNav=b("span","flatpickr-prev-month"),c.prevMonthNav.innerHTML=c.config.prevArrow,c.nextMonthNav=b("span","flatpickr-next-month"),c.nextMonthNav.innerHTML=c.config.nextArrow,U(),Object.defineProperty(c,"_hidePrevMonthArrow",{get:function(){return c.__hidePrevMonthArrow},set:function(e){c.__hidePrevMonthArrow!==e&&(v(c.prevMonthNav,"disabled",e),c.__hidePrevMonthArrow=e)}}),Object.defineProperty(c,"_hideNextMonthArrow",{get:function(){return c.__hideNextMonthArrow},set:function(e){c.__hideNextMonthArrow!==e&&(v(c.nextMonthNav,"disabled",e),c.__hideNextMonthArrow=e)}}),c.currentYearElement=c.yearElements[0],me(),c.monthNav)),c.innerContainer=b("div","flatpickr-innerContainer"),c.config.weekNumbers){var o=function(){c.calendarContainer.classList.add("hasWeeks");var e=b("div","flatpickr-weekwrapper");e.appendChild(b("span","flatpickr-weekday",c.l10n.weekAbbreviation));var t=b("div","flatpickr-weeks");return e.appendChild(t),{weekWrapper:e,weekNumbers:t}}(),a=o.weekWrapper,i=o.weekNumbers;c.innerContainer.appendChild(a),c.weekNumbers=i,c.weekWrapper=a}c.rContainer=b("div","flatpickr-rContainer"),c.rContainer.appendChild(K()),c.daysContainer||(c.daysContainer=b("div","flatpickr-days"),c.daysContainer.tabIndex=-1),W(),c.rContainer.appendChild(c.daysContainer),c.innerContainer.appendChild(c.rContainer),n.appendChild(c.innerContainer)}c.config.enableTime&&n.appendChild(function(){c.calendarContainer.classList.add("hasTime"),c.config.noCalendar&&c.calendarContainer.classList.add("noCalendar"),c.timeContainer=b("div","flatpickr-time"),c.timeContainer.tabIndex=-1;var n=b("span","flatpickr-time-separator",":"),o=w("flatpickr-hour");c.hourElement=o.getElementsByTagName("input")[0];var a=w("flatpickr-minute");if(c.minuteElement=a.getElementsByTagName("input")[0],c.hourElement.tabIndex=c.minuteElement.tabIndex=-1,c.hourElement.value=e(c.latestSelectedDateObj?c.latestSelectedDateObj.getHours():c.config.time_24hr?c.config.defaultHour:function(e){switch(e%24){case 0:case 12:return 12;default:return e%12}}(c.config.defaultHour)),c.minuteElement.value=e(c.latestSelectedDateObj?c.latestSelectedDateObj.getMinutes():c.config.defaultMinute),c.hourElement.setAttribute("data-step",c.config.hourIncrement.toString()),c.minuteElement.setAttribute("data-step",c.config.minuteIncrement.toString()),c.hourElement.setAttribute("data-min",c.config.time_24hr?"0":"1"),c.hourElement.setAttribute("data-max",c.config.time_24hr?"23":"12"),c.minuteElement.setAttribute("data-min","0"),c.minuteElement.setAttribute("data-max","59"),c.timeContainer.appendChild(o),c.timeContainer.appendChild(n),c.timeContainer.appendChild(a),c.config.time_24hr&&c.timeContainer.classList.add("time24hr"),c.config.enableSeconds){c.timeContainer.classList.add("hasSeconds");var i=w("flatpickr-second");c.secondElement=i.getElementsByTagName("input")[0],c.secondElement.value=e(c.latestSelectedDateObj?c.latestSelectedDateObj.getSeconds():c.config.defaultSeconds),c.secondElement.setAttribute("data-step",c.minuteElement.getAttribute("data-step")),c.secondElement.setAttribute("data-min",c.minuteElement.getAttribute("data-min")),c.secondElement.setAttribute("data-max",c.minuteElement.getAttribute("data-max")),c.timeContainer.appendChild(b("span","flatpickr-time-separator",":")),c.timeContainer.appendChild(i)}return c.config.time_24hr||(c.amPM=b("span","flatpickr-am-pm",c.l10n.amPM[t((c.latestSelectedDateObj?c.hourElement.value:c.config.defaultHour)>11)]),c.amPM.title=c.l10n.toggleTitle,c.amPM.tabIndex=-1,c.timeContainer.appendChild(c.amPM)),c.timeContainer}()),v(c.calendarContainer,"rangeMode","range"===c.config.mode),v(c.calendarContainer,"animate",!0===c.config.animate),v(c.calendarContainer,"multiMonth",c.config.showMonths>1),c.calendarContainer.appendChild(n);var r=void 0!==c.config.appendTo&&void 0!==c.config.appendTo.nodeType;if((c.config.inline||c.config.static)&&(c.calendarContainer.classList.add(c.config.inline?"inline":"static"),c.config.inline&&(!r&&c.element.parentNode?c.element.parentNode.insertBefore(c.calendarContainer,c._input.nextSibling):void 0!==c.config.appendTo&&c.config.appendTo.appendChild(c.calendarContainer)),c.config.static)){var s=b("div","flatpickr-wrapper");c.element.parentNode&&c.element.parentNode.insertBefore(s,c.element),s.appendChild(c.element),c.altInput&&s.appendChild(c.altInput),s.appendChild(c.calendarContainer)}c.config.static||c.config.inline||(void 0!==c.config.appendTo?c.config.appendTo:window.document.body).appendChild(c.calendarContainer)}function B(e,t,n,o){var a=Z(t,!0),i=b("span","flatpickr-day "+e,t.getDate().toString());return i.dateObj=t,i.$i=o,i.setAttribute("aria-label",c.formatDate(t,c.config.ariaDateFormat)),-1===e.indexOf("hidden")&&0===p(t,c.now)&&(c.todayDateElem=i,i.classList.add("today"),i.setAttribute("aria-current","date")),a?(i.tabIndex=-1,fe(t)&&(i.classList.add("selected"),c.selectedDateElem=i,"range"===c.config.mode&&(v(i,"startRange",c.selectedDates[0]&&0===p(t,c.selectedDates[0],!0)),v(i,"endRange",c.selectedDates[1]&&0===p(t,c.selectedDates[1],!0)),"nextMonthDay"===e&&i.classList.add("inRange")))):i.classList.add("disabled"),"range"===c.config.mode&&function(e){return!("range"!==c.config.mode||c.selectedDates.length<2)&&p(e,c.selectedDates[0])>=0&&p(e,c.selectedDates[1])<=0}(t)&&!fe(t)&&i.classList.add("inRange"),c.weekNumbers&&1===c.config.showMonths&&"prevMonthDay"!==e&&n%7==1&&c.weekNumbers.insertAdjacentHTML("beforeend","<span class='flatpickr-day'>"+c.config.getWeek(t)+"</span>"),pe("onDayCreate",i),i}function H(e){e.focus(),"range"===c.config.mode&&te(e)}function R(e){for(var t=e>0?0:c.config.showMonths-1,n=e>0?c.config.showMonths:-1,o=t;o!=n;o+=e)for(var a=c.daysContainer.children[o],i=e>0?0:a.children.length-1,r=e>0?a.children.length:-1,s=i;s!=r;s+=e){var l=a.children[s];if(-1===l.className.indexOf("hidden")&&Z(l.dateObj))return l}}function j(e,t){var n=Q(document.activeElement||document.body),o=void 0!==e?e:n?document.activeElement:void 0!==c.selectedDateElem&&Q(c.selectedDateElem)?c.selectedDateElem:void 0!==c.todayDateElem&&Q(c.todayDateElem)?c.todayDateElem:R(t>0?1:-1);return void 0===o?c._input.focus():n?void function(e,t){for(var n=-1===e.className.indexOf("Month")?e.dateObj.getMonth():c.currentMonth,o=t>0?c.config.showMonths:-1,a=t>0?1:-1,i=n-c.currentMonth;i!=o;i+=a)for(var r=c.daysContainer.children[i],s=n-c.currentMonth===i?e.$i+t:t<0?r.children.length-1:0,l=r.children.length,u=s;u>=0&&u<l&&u!=(t>0?l:-1);u+=a){var d=r.children[u];if(-1===d.className.indexOf("hidden")&&Z(d.dateObj)&&Math.abs(e.$i-u)>=Math.abs(t))return H(d)}c.changeMonth(a),j(R(a),0)}(o,t):H(o)}function V(e,t){for(var n=(new Date(e,t,1).getDay()-c.l10n.firstDayOfWeek+7)%7,o=c.utils.getDaysInMonth((t-1+12)%12),a=c.utils.getDaysInMonth(t),i=window.document.createDocumentFragment(),r=c.config.showMonths>1,s=r?"prevMonthDay hidden":"prevMonthDay",l=r?"nextMonthDay hidden":"nextMonthDay",u=o+1-n,d=0;u<=o;u++,d++)i.appendChild(B(s,new Date(e,t-1,u),u,d));for(u=1;u<=a;u++,d++)i.appendChild(B("",new Date(e,t,u),u,d));for(var p=a+1;p<=42-n&&(1===c.config.showMonths||d%7!=0);p++,d++)i.appendChild(B(l,new Date(e,t+1,p%a),p,d));var h=b("div","dayContainer");return h.appendChild(i),h}function W(){if(void 0!==c.daysContainer){y(c.daysContainer),c.weekNumbers&&y(c.weekNumbers);for(var e=document.createDocumentFragment(),t=0;t<c.config.showMonths;t++){var n=new Date(c.currentYear,c.currentMonth,1);n.setMonth(c.currentMonth+t),e.appendChild(V(n.getFullYear(),n.getMonth()))}c.daysContainer.appendChild(e),c.days=c.daysContainer.firstChild,"range"===c.config.mode&&1===c.selectedDates.length&&te()}}function Y(){var e=b("div","flatpickr-month"),t=window.document.createDocumentFragment(),n=b("span","cur-month"),o=w("cur-year",{tabindex:"-1"}),a=o.getElementsByTagName("input")[0];a.setAttribute("aria-label",c.l10n.yearAriaLabel),c.config.minDate&&a.setAttribute("data-min",c.config.minDate.getFullYear().toString()),c.config.maxDate&&(a.setAttribute("data-max",c.config.maxDate.getFullYear().toString()),a.disabled=!!c.config.minDate&&c.config.minDate.getFullYear()===c.config.maxDate.getFullYear());var i=b("div","flatpickr-current-month");return i.appendChild(n),i.appendChild(o),t.appendChild(i),e.appendChild(t),{container:e,yearElement:a,monthElement:n}}function U(){y(c.monthNav),c.monthNav.appendChild(c.prevMonthNav);for(var e=c.config.showMonths;e--;){var t=Y();c.yearElements.push(t.yearElement),c.monthElements.push(t.monthElement),c.monthNav.appendChild(t.container)}c.monthNav.appendChild(c.nextMonthNav)}function K(){c.weekdayContainer?y(c.weekdayContainer):c.weekdayContainer=b("div","flatpickr-weekdays");for(var e=c.config.showMonths;e--;){var t=b("div","flatpickr-weekdaycontainer");c.weekdayContainer.appendChild(t)}return G(),c.weekdayContainer}function G(){var e=c.l10n.firstDayOfWeek,t=c.l10n.weekdays.shorthand.concat();e>0&&e<t.length&&(t=t.splice(e,t.length).concat(t.splice(0,e)));for(var n=c.config.showMonths;n--;)c.weekdayContainer.children[n].innerHTML="\n      <span class=flatpickr-weekday>\n        "+t.join("</span><span class=flatpickr-weekday>")+"\n      </span>\n      "}function z(e,t){void 0===t&&(t=!0);var n=t?e:e-c.currentMonth;n<0&&!0===c._hidePrevMonthArrow||n>0&&!0===c._hideNextMonthArrow||(c.currentMonth+=n,(c.currentMonth<0||c.currentMonth>11)&&(c.currentYear+=c.currentMonth>11?1:-1,c.currentMonth=(c.currentMonth+12)%12,pe("onYearChange")),W(),pe("onMonthChange"),me())}function J(e){return!(!c.config.appendTo||!c.config.appendTo.contains(e))||c.calendarContainer.contains(e)}function X(e){if(c.isOpen&&!c.config.inline){var t=J(e.target),n=e.target===c.input||e.target===c.altInput||c.element.contains(e.target)||e.path&&e.path.indexOf&&(~e.path.indexOf(c.input)||~e.path.indexOf(c.altInput)),o="blur"===e.type?n&&e.relatedTarget&&!J(e.relatedTarget):!n&&!t,a=!c.config.ignoredFocusElements.some(function(t){return t.contains(e.target)});o&&a&&(c.close(),"range"===c.config.mode&&1===c.selectedDates.length&&(c.clear(!1),c.redraw()))}}function $(e){if(!(!e||c.config.minDate&&e<c.config.minDate.getFullYear()||c.config.maxDate&&e>c.config.maxDate.getFullYear())){var t=e,n=c.currentYear!==t;c.currentYear=t||c.currentYear,c.config.maxDate&&c.currentYear===c.config.maxDate.getFullYear()?c.currentMonth=Math.min(c.config.maxDate.getMonth(),c.currentMonth):c.config.minDate&&c.currentYear===c.config.minDate.getFullYear()&&(c.currentMonth=Math.max(c.config.minDate.getMonth(),c.currentMonth)),n&&(c.redraw(),pe("onYearChange"))}}function Z(e,t){void 0===t&&(t=!0);var n=c.parseDate(e,void 0,t);if(c.config.minDate&&n&&p(n,c.config.minDate,void 0!==t?t:!c.minDateHasTime)<0||c.config.maxDate&&n&&p(n,c.config.maxDate,void 0!==t?t:!c.maxDateHasTime)>0)return!1;if(0===c.config.enable.length&&0===c.config.disable.length)return!0;if(void 0===n)return!1;for(var o,a=c.config.enable.length>0,i=a?c.config.enable:c.config.disable,r=0;r<i.length;r++){if("function"==typeof(o=i[r])&&o(n))return a;if(o instanceof Date&&void 0!==n&&o.getTime()===n.getTime())return a;if("string"==typeof o&&void 0!==n){var s=c.parseDate(o,void 0,!0);return s&&s.getTime()===n.getTime()?a:!a}if("object"==typeof o&&void 0!==n&&o.from&&o.to&&n.getTime()>=o.from.getTime()&&n.getTime()<=o.to.getTime())return a}return!a}function Q(e){return void 0!==c.daysContainer&&-1===e.className.indexOf("hidden")&&c.daysContainer.contains(e)}function ee(e){var t=e.target===c._input,n=c.config.allowInput,o=c.isOpen&&(!n||!t),a=c.config.inline&&t&&!n;if(13===e.keyCode&&t){if(n)return c.setDate(c._input.value,!0,e.target===c.altInput?c.config.altFormat:c.config.dateFormat),e.target.blur();c.open()}else if(J(e.target)||o||a){var i=!!c.timeContainer&&c.timeContainer.contains(e.target);switch(e.keyCode){case 13:i?C():ce(e);break;case 27:e.preventDefault(),se();break;case 8:case 46:t&&!c.config.allowInput&&(e.preventDefault(),c.clear());break;case 37:case 39:if(i)c.hourElement&&c.hourElement.focus();else if(e.preventDefault(),void 0!==c.daysContainer&&(!1===n||Q(document.activeElement))){var r=39===e.keyCode?1:-1;e.ctrlKey?(z(r),j(R(1),0)):j(void 0,r)}break;case 38:case 40:e.preventDefault();var s=40===e.keyCode?1:-1;c.daysContainer&&void 0!==e.target.$i?e.ctrlKey?($(c.currentYear-s),j(R(1),0)):i||j(void 0,7*s):c.config.enableTime&&(!i&&c.hourElement&&c.hourElement.focus(),C(e),c._debouncedChange());break;case 9:if(!i){c.element.focus();break}var l=[c.hourElement,c.minuteElement,c.secondElement,c.amPM].filter(function(e){return e}),u=l.indexOf(e.target);if(-1!==u){var d=l[u+(e.shiftKey?-1:1)];void 0!==d?(e.preventDefault(),d.focus()):c.element.focus()}}}if(void 0!==c.amPM&&e.target===c.amPM)switch(e.key){case c.l10n.amPM[0].charAt(0):case c.l10n.amPM[0].charAt(0).toLowerCase():c.amPM.textContent=c.l10n.amPM[0],L(),ve();break;case c.l10n.amPM[1].charAt(0):case c.l10n.amPM[1].charAt(0).toLowerCase():c.amPM.textContent=c.l10n.amPM[1],L(),ve()}pe("onKeyDown",e)}function te(e){if(1===c.selectedDates.length&&(!e||e.classList.contains("flatpickr-day")&&!e.classList.contains("disabled"))){for(var t=e?e.dateObj.getTime():c.days.firstElementChild.dateObj.getTime(),n=c.parseDate(c.selectedDates[0],void 0,!0).getTime(),o=Math.min(t,c.selectedDates[0].getTime()),a=Math.max(t,c.selectedDates[0].getTime()),i=c.daysContainer.lastChild.lastChild.dateObj.getTime(),r=!1,s=0,l=0,u=o;u<i;u+=f.DAY)Z(new Date(u),!0)||(r=r||u>o&&u<a,u<n&&(!s||u>s)?s=u:u>n&&(!l||u<l)&&(l=u));for(var d=0;d<c.config.showMonths;d++)for(var p=c.daysContainer.children[d],m=c.daysContainer.children[d-1],g=function(o,a){var i=p.children[o],u=i.dateObj,f=u.getTime(),g=s>0&&f<s||l>0&&f>l;return g?(i.classList.add("notAllowed"),["inRange","startRange","endRange"].forEach(function(e){i.classList.remove(e)}),"continue"):r&&!g?"continue":(["startRange","inRange","endRange","notAllowed"].forEach(function(e){i.classList.remove(e)}),void(void 0!==e&&(e.classList.add(t<c.selectedDates[0].getTime()?"startRange":"endRange"),!p.contains(e)&&d>0&&m&&m.lastChild.dateObj.getTime()>=f||(n<t&&f===n?i.classList.add("startRange"):n>t&&f===n&&i.classList.add("endRange"),f>=s&&(0===l||f<=l)&&h(f,n,t)&&i.classList.add("inRange")))))},v=0,b=p.children.length;v<b;v++)g(v)}}function ne(){!c.isOpen||c.config.static||c.config.inline||ie()}function oe(e){return function(t){var n=c.config["_"+e+"Date"]=c.parseDate(t,c.config.dateFormat),o=c.config["_"+("min"===e?"max":"min")+"Date"];void 0!==n&&(c["min"===e?"minDateHasTime":"maxDateHasTime"]=n.getHours()>0||n.getMinutes()>0||n.getSeconds()>0),c.selectedDates&&(c.selectedDates=c.selectedDates.filter(function(e){return Z(e)}),c.selectedDates.length||"min"!==e||_(n),ve()),c.daysContainer&&(re(),void 0!==n?c.currentYearElement[e]=n.getFullYear().toString():c.currentYearElement.removeAttribute(e),c.currentYearElement.disabled=!!o&&void 0!==n&&o.getFullYear()===n.getFullYear())}}function ae(){"object"!=typeof c.config.locale&&void 0===E.l10ns[c.config.locale]&&c.config.errorHandler(new Error("flatpickr: invalid locale "+c.config.locale)),c.l10n=Object.assign({},E.l10ns.default,"object"==typeof c.config.locale?c.config.locale:"default"!==c.config.locale?E.l10ns[c.config.locale]:void 0),s.K="("+c.l10n.amPM[0]+"|"+c.l10n.amPM[1]+"|"+c.l10n.amPM[0].toLowerCase()+"|"+c.l10n.amPM[1].toLowerCase()+")",c.formatDate=u(c),c.parseDate=d({config:c.config,l10n:c.l10n})}function ie(e){if(void 0!==c.calendarContainer){pe("onPreCalendarPosition");var t=e||c._positionElement,n=Array.prototype.reduce.call(c.calendarContainer.children,function(e,t){return e+t.offsetHeight},0),o=c.calendarContainer.offsetWidth,a=c.config.position.split(" "),i=a[0],r=a.length>1?a[1]:null,s=t.getBoundingClientRect(),l=window.innerHeight-s.bottom,u="above"===i||"below"!==i&&l<n&&s.top>n,d=window.pageYOffset+s.top+(u?-n-2:t.offsetHeight+2);if(v(c.calendarContainer,"arrowTop",!u),v(c.calendarContainer,"arrowBottom",u),!c.config.inline){var p=window.pageXOffset+s.left-(null!=r&&"center"===r?(o-s.width)/2:0),h=window.document.body.offsetWidth-s.right,f=p+o>window.document.body.offsetWidth;v(c.calendarContainer,"rightMost",f),c.config.static||(c.calendarContainer.style.top=d+"px",f?(c.calendarContainer.style.left="auto",c.calendarContainer.style.right=h+"px"):(c.calendarContainer.style.left=p+"px",c.calendarContainer.style.right="auto"))}}}function re(){c.config.noCalendar||c.isMobile||(me(),W())}function se(){c._input.focus(),-1!==window.navigator.userAgent.indexOf("MSIE")||void 0!==navigator.msMaxTouchPoints?setTimeout(c.close,0):c.close()}function ce(e){e.preventDefault(),e.stopPropagation();var t=function e(t,n){return n(t)?t:t.parentNode?e(t.parentNode,n):void 0}(e.target,function(e){return e.classList&&e.classList.contains("flatpickr-day")&&!e.classList.contains("disabled")&&!e.classList.contains("notAllowed")});if(void 0!==t){var n=t,o=c.latestSelectedDateObj=new Date(n.dateObj.getTime()),a=(o.getMonth()<c.currentMonth||o.getMonth()>c.currentMonth+c.config.showMonths-1)&&"range"!==c.config.mode;if(c.selectedDateElem=n,"single"===c.config.mode)c.selectedDates=[o];else if("multiple"===c.config.mode){var i=fe(o);i?c.selectedDates.splice(parseInt(i),1):c.selectedDates.push(o)}else"range"===c.config.mode&&(2===c.selectedDates.length&&c.clear(!1),c.selectedDates.push(o),0!==p(o,c.selectedDates[0],!0)&&c.selectedDates.sort(function(e,t){return e.getTime()-t.getTime()}));if(L(),a){var r=c.currentYear!==o.getFullYear();c.currentYear=o.getFullYear(),c.currentMonth=o.getMonth(),r&&pe("onYearChange"),pe("onMonthChange")}if(me(),W(),ve(),c.config.enableTime&&setTimeout(function(){return c.showTimeInput=!0},50),a||"range"===c.config.mode||1!==c.config.showMonths?c.selectedDateElem&&c.selectedDateElem.focus():H(n),void 0!==c.hourElement&&setTimeout(function(){return void 0!==c.hourElement&&c.hourElement.select()},451),c.config.closeOnSelect){var s="single"===c.config.mode&&!c.config.enableTime,l="range"===c.config.mode&&2===c.selectedDates.length&&!c.config.enableTime;(s||l)&&se()}I()}}c.parseDate=d({config:c.config,l10n:c.l10n}),c._handlers=[],c._bind=N,c._setHoursFromDate=_,c._positionCalendar=ie,c.changeMonth=z,c.changeYear=$,c.clear=function(e){void 0===e&&(e=!0),c.input.value="",void 0!==c.altInput&&(c.altInput.value=""),void 0!==c.mobileInput&&(c.mobileInput.value=""),c.selectedDates=[],c.latestSelectedDateObj=void 0,c.showTimeInput=!1,!0===c.config.enableTime&&x(),c.redraw(),e&&pe("onChange")},c.close=function(){c.isOpen=!1,c.isMobile||(c.calendarContainer.classList.remove("open"),c._input.classList.remove("active")),pe("onClose")},c._createElement=b,c.destroy=function(){void 0!==c.config&&pe("onDestroy");for(var e=c._handlers.length;e--;){var t=c._handlers[e];t.element.removeEventListener(t.event,t.handler,t.options)}if(c._handlers=[],c.mobileInput)c.mobileInput.parentNode&&c.mobileInput.parentNode.removeChild(c.mobileInput),c.mobileInput=void 0;else if(c.calendarContainer&&c.calendarContainer.parentNode)if(c.config.static&&c.calendarContainer.parentNode){var n=c.calendarContainer.parentNode;if(n.lastChild&&n.removeChild(n.lastChild),n.parentNode){for(;n.firstChild;)n.parentNode.insertBefore(n.firstChild,n);n.parentNode.removeChild(n)}}else c.calendarContainer.parentNode.removeChild(c.calendarContainer);c.altInput&&(c.input.type="text",c.altInput.parentNode&&c.altInput.parentNode.removeChild(c.altInput),delete c.altInput),c.input&&(c.input.type=c.input._type,c.input.classList.remove("flatpickr-input"),c.input.removeAttribute("readonly"),c.input.value=""),["_showTimeInput","latestSelectedDateObj","_hideNextMonthArrow","_hidePrevMonthArrow","__hideNextMonthArrow","__hidePrevMonthArrow","isMobile","isOpen","selectedDateElem","minDateHasTime","maxDateHasTime","days","daysContainer","_input","_positionElement","innerContainer","rContainer","monthNav","todayDateElem","calendarContainer","weekdayContainer","prevMonthNav","nextMonthNav","currentMonthElement","currentYearElement","navigationCurrentMonth","selectedDateElem","config"].forEach(function(e){try{delete c[e]}catch(e){}})},c.isEnabled=Z,c.jumpToDate=O,c.open=function(e,t){if(void 0===t&&(t=c._positionElement),!0===c.isMobile)return e&&(e.preventDefault(),e.target&&e.target.blur()),void 0!==c.mobileInput&&(c.mobileInput.focus(),c.mobileInput.click()),void pe("onOpen");if(!c._input.disabled&&!c.config.inline){var n=c.isOpen;c.isOpen=!0,n||(c.calendarContainer.classList.add("open"),c._input.classList.add("active"),pe("onOpen"),ie(t)),!0===c.config.enableTime&&!0===c.config.noCalendar&&(0===c.selectedDates.length&&(c.setDate(void 0!==c.config.minDate?new Date(c.config.minDate.getTime()):new Date,!1),x(),ve()),!1!==c.config.allowInput||void 0!==e&&c.timeContainer.contains(e.relatedTarget)||setTimeout(function(){return c.hourElement.select()},50))}},c.redraw=re,c.set=function(e,t){null!==e&&"object"==typeof e?Object.assign(c.config,e):(c.config[e]=t,void 0!==le[e]?le[e].forEach(function(e){return e()}):m.indexOf(e)>-1&&(c.config[e]=o(t))),c.redraw(),O(),ve(!1)},c.setDate=function(e,t,n){if(void 0===t&&(t=!1),void 0===n&&(n=c.config.dateFormat),0!==e&&!e||e instanceof Array&&0===e.length)return c.clear(t);ue(e,n),c.showTimeInput=c.selectedDates.length>0,c.latestSelectedDateObj=c.selectedDates[0],c.redraw(),O(),_(),ve(t),t&&pe("onChange")},c.toggle=function(e){if(!0===c.isOpen)return c.close();c.open(e)};var le={locale:[ae,G],showMonths:[U,k,K]};function ue(e,t){var n=[];if(e instanceof Array)n=e.map(function(e){return c.parseDate(e,t)});else if(e instanceof Date||"number"==typeof e)n=[c.parseDate(e,t)];else if("string"==typeof e)switch(c.config.mode){case"single":case"time":n=[c.parseDate(e,t)];break;case"multiple":n=e.split(c.config.conjunction).map(function(e){return c.parseDate(e,t)});break;case"range":n=e.split(c.l10n.rangeSeparator).map(function(e){return c.parseDate(e,t)})}else c.config.errorHandler(new Error("Invalid date supplied: "+JSON.stringify(e)));c.selectedDates=n.filter(function(e){return e instanceof Date&&Z(e,!1)}),"range"===c.config.mode&&c.selectedDates.sort(function(e,t){return e.getTime()-t.getTime()})}function de(e){return e.slice().map(function(e){return"string"==typeof e||"number"==typeof e||e instanceof Date?c.parseDate(e,void 0,!0):e&&"object"==typeof e&&e.from&&e.to?{from:c.parseDate(e.from,void 0),to:c.parseDate(e.to,void 0)}:e}).filter(function(e){return e})}function pe(e,t){if(void 0!==c.config){var n=c.config[e];if(void 0!==n&&n.length>0)for(var o=0;n[o]&&o<n.length;o++)n[o](c.selectedDates,c.input.value,c,t);"onChange"===e&&(c.input.dispatchEvent(he("change")),c.input.dispatchEvent(he("input")))}}function he(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!0),t}function fe(e){for(var t=0;t<c.selectedDates.length;t++)if(0===p(c.selectedDates[t],e))return""+t;return!1}function me(){c.config.noCalendar||c.isMobile||!c.monthNav||(c.yearElements.forEach(function(e,t){var n=new Date(c.currentYear,c.currentMonth,1);n.setMonth(c.currentMonth+t),c.monthElements[t].textContent=i(n.getMonth(),c.config.shorthandCurrentMonth,c.l10n)+" ",e.value=n.getFullYear().toString()}),c._hidePrevMonthArrow=void 0!==c.config.minDate&&(c.currentYear===c.config.minDate.getFullYear()?c.currentMonth<=c.config.minDate.getMonth():c.currentYear<c.config.minDate.getFullYear()),c._hideNextMonthArrow=void 0!==c.config.maxDate&&(c.currentYear===c.config.maxDate.getFullYear()?c.currentMonth+1>c.config.maxDate.getMonth():c.currentYear>c.config.maxDate.getFullYear()))}function ge(e){return c.selectedDates.map(function(t){return c.formatDate(t,e)}).filter(function(e,t,n){return"range"!==c.config.mode||c.config.enableTime||n.indexOf(e)===t}).join("range"!==c.config.mode?c.config.conjunction:c.l10n.rangeSeparator)}function ve(e){if(void 0===e&&(e=!0),0===c.selectedDates.length)return c.clear(e);void 0!==c.mobileInput&&c.mobileFormatStr&&(c.mobileInput.value=void 0!==c.latestSelectedDateObj?c.formatDate(c.latestSelectedDateObj,c.mobileFormatStr):""),c.input.value=ge(c.config.dateFormat),void 0!==c.altInput&&(c.altInput.value=ge(c.config.altFormat)),!1!==e&&pe("onValueUpdate")}function be(e){e.preventDefault();var t=c.prevMonthNav.contains(e.target),n=c.nextMonthNav.contains(e.target);t||n?z(t?-1:1):c.yearElements.indexOf(e.target)>=0?e.target.select():e.target.classList.contains("arrowUp")?c.changeYear(c.currentYear+1):e.target.classList.contains("arrowDown")&&c.changeYear(c.currentYear-1)}return function(){c.element=c.input=a,c.isOpen=!1,function(){var e=["wrap","weekNumbers","allowInput","clickOpens","time_24hr","enableTime","noCalendar","altInput","shorthandCurrentMonth","inline","static","enableSeconds","disableMobile"],t=Object.assign({},r,JSON.parse(JSON.stringify(a.dataset||{}))),n={};c.config.parseDate=t.parseDate,c.config.formatDate=t.formatDate,Object.defineProperty(c.config,"enable",{get:function(){return c.config._enable},set:function(e){c.config._enable=de(e)}}),Object.defineProperty(c.config,"disable",{get:function(){return c.config._disable},set:function(e){c.config._disable=de(e)}});var i="time"===t.mode;t.dateFormat||!t.enableTime&&!i||(n.dateFormat=t.noCalendar||i?"H:i"+(t.enableSeconds?":S":""):E.defaultConfig.dateFormat+" H:i"+(t.enableSeconds?":S":"")),t.altInput&&(t.enableTime||i)&&!t.altFormat&&(n.altFormat=t.noCalendar||i?"h:i"+(t.enableSeconds?":S K":" K"):E.defaultConfig.altFormat+" h:i"+(t.enableSeconds?":S":"")+" K"),Object.defineProperty(c.config,"minDate",{get:function(){return c.config._minDate},set:oe("min")}),Object.defineProperty(c.config,"maxDate",{get:function(){return c.config._maxDate},set:oe("max")});var s=function(e){return function(t){c.config["min"===e?"_minTime":"_maxTime"]=c.parseDate(t,"H:i")}};Object.defineProperty(c.config,"minTime",{get:function(){return c.config._minTime},set:s("min")}),Object.defineProperty(c.config,"maxTime",{get:function(){return c.config._maxTime},set:s("max")}),"time"===t.mode&&(c.config.noCalendar=!0,c.config.enableTime=!0),Object.assign(c.config,n,t);for(var l=0;l<e.length;l++)c.config[e[l]]=!0===c.config[e[l]]||"true"===c.config[e[l]];m.filter(function(e){return void 0!==c.config[e]}).forEach(function(e){c.config[e]=o(c.config[e]||[]).map(g)}),c.isMobile=!c.config.disableMobile&&!c.config.inline&&"single"===c.config.mode&&!c.config.disable.length&&!c.config.enable.length&&!c.config.weekNumbers&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);for(var u=0;u<c.config.plugins.length;u++){var d=c.config.plugins[u](c)||{};for(var p in d)m.indexOf(p)>-1?c.config[p]=o(d[p]).map(g).concat(c.config[p]):void 0===t[p]&&(c.config[p]=d[p])}pe("onParseConfig")}(),ae(),c.input=c.config.wrap?a.querySelector("[data-input]"):a,c.input?(c.input._type=c.input.type,c.input.type="text",c.input.classList.add("flatpickr-input"),c._input=c.input,c.config.altInput&&(c.altInput=b(c.input.nodeName,c.input.className+" "+c.config.altInputClass),c._input=c.altInput,c.altInput.placeholder=c.input.placeholder,c.altInput.disabled=c.input.disabled,c.altInput.required=c.input.required,c.altInput.tabIndex=c.input.tabIndex,c.altInput.type="text",c.input.setAttribute("type","hidden"),!c.config.static&&c.input.parentNode&&c.input.parentNode.insertBefore(c.altInput,c.input.nextSibling)),c.config.allowInput||c._input.setAttribute("readonly","readonly"),c._positionElement=c.config.positionElement||c._input):c.config.errorHandler(new Error("Invalid input element specified")),function(){c.selectedDates=[],c.now=c.parseDate(c.config.now)||new Date;var e=c.config.defaultDate||("INPUT"!==c.input.nodeName&&"TEXTAREA"!==c.input.nodeName||!c.input.placeholder||c.input.value!==c.input.placeholder?c.input.value:null);e&&ue(e,c.config.dateFormat);var t=c.selectedDates.length>0?c.selectedDates[0]:c.config.minDate&&c.config.minDate.getTime()>c.now.getTime()?c.config.minDate:c.config.maxDate&&c.config.maxDate.getTime()<c.now.getTime()?c.config.maxDate:c.now;c.currentYear=t.getFullYear(),c.currentMonth=t.getMonth(),c.selectedDates.length>0&&(c.latestSelectedDateObj=c.selectedDates[0]),void 0!==c.config.minTime&&(c.config.minTime=c.parseDate(c.config.minTime,"H:i")),void 0!==c.config.maxTime&&(c.config.maxTime=c.parseDate(c.config.maxTime,"H:i")),c.minDateHasTime=!!c.config.minDate&&(c.config.minDate.getHours()>0||c.config.minDate.getMinutes()>0||c.config.minDate.getSeconds()>0),c.maxDateHasTime=!!c.config.maxDate&&(c.config.maxDate.getHours()>0||c.config.maxDate.getMinutes()>0||c.config.maxDate.getSeconds()>0),Object.defineProperty(c,"showTimeInput",{get:function(){return c._showTimeInput},set:function(e){c._showTimeInput=e,c.calendarContainer&&v(c.calendarContainer,"showTimeInput",e),c.isOpen&&ie()}})}(),c.utils={getDaysInMonth:function(e,t){return void 0===e&&(e=c.currentMonth),void 0===t&&(t=c.currentYear),1===e&&(t%4==0&&t%100!=0||t%400==0)?29:c.l10n.daysInMonth[e]}},c.isMobile||q(),M(),(c.selectedDates.length||c.config.noCalendar)&&(c.config.enableTime&&_(c.config.noCalendar?c.latestSelectedDateObj||c.config.minDate:void 0),ve(!1)),k(),c.showTimeInput=c.selectedDates.length>0||c.config.noCalendar;var e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);!c.isMobile&&e&&ie(),pe("onReady")}(),c}function C(e,t){for(var n=Array.prototype.slice.call(e),o=[],a=0;a<n.length;a++){var i=n[a];try{if(null!==i.getAttribute("data-fp-omit"))continue;void 0!==i._flatpickr&&(i._flatpickr.destroy(),i._flatpickr=void 0),i._flatpickr=k(i,t||{}),o.push(i._flatpickr)}catch(e){console.error(e)}}return 1===o.length?o[0]:o}"undefined"!=typeof HTMLElement&&(HTMLCollection.prototype.flatpickr=NodeList.prototype.flatpickr=function(e){return C(this,e)},HTMLElement.prototype.flatpickr=function(e){return C([this],e)});var E=function(e,t){return e instanceof NodeList?C(e,t):C("string"==typeof e?window.document.querySelectorAll(e):[e],t)};return E.defaultConfig=g,E.l10ns={en:Object.assign({},l),default:Object.assign({},l)},E.localize=function(e){E.l10ns.default=Object.assign({},E.l10ns.default,e)},E.setDefaults=function(e){E.defaultConfig=Object.assign({},E.defaultConfig,e)},E.parseDate=d({}),E.formatDate=u({}),E.compareDates=p,"undefined"!=typeof jQuery&&(jQuery.fn.flatpickr=function(e){return C(this,e)}),Date.prototype.fp_incr=function(e){return new Date(this.getFullYear(),this.getMonth(),this.getDate()+("string"==typeof e?parseInt(e,10):e))},"undefined"!=typeof window&&(window.flatpickr=E),E}()}(te={exports:{}},te.exports),te.exports);ne.l10ns.en.weekdays.shorthand.forEach(function(e,t){var n=ne.l10ns.en.weekdays.shorthand;"Thu"===n[t]||"Th"===n[t]?n[t]="Th":n[t]=n[t].charAt(0)});var oe=function(e){return Array.prototype.slice.call(e)},ae=function(e){function o(e,t){var a;n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_handleFocus",function(){a.calendar&&a.calendar.open()}),i(u(u(a)),"_handleBlur",function(e){if(a.calendar){var t=e.relatedTarget;t&&(a.element.contains(t)||a.calendar.calendarContainer&&a.calendar.calendarContainer.contains(t))||a.calendar.close()}}),i(u(u(a)),"_initDatePicker",function(e){if("range"===e){var t=a.element.ownerDocument,n=t.createElement("input");n.className=a.options.classVisuallyHidden,n.setAttribute("aria-hidden","true"),a.element.appendChild(n),a._rangeInput=n;var o=t.defaultView,i="onfocusin"in o,r="onfocusout"in o,s=i?"focusin":"focus",c=r?"focusout":"blur";a.manage(y(a.element,s,a._handleFocus,!i)),a.manage(y(a.element,c,a._handleBlur,!r)),a.manage(y(a.element.querySelector(a.options.selectorDatePickerIcon),c,a._handleBlur,!r))}var l=u(u(a)),d="range"===e?a._rangeInput:a.element.querySelector(a.options.selectorDatePickerInput),p=a.options,h=p.onClose,f=p.onChange,m=p.onMonthChange,g=p.onYearChange,v=p.onOpen,b=p.onValueUpdate,w=new ne(d,Object.assign(function(e){var t={};for(var n in e)t[n]=e[n];return t}(a.options),{allowInput:!0,mode:e,positionElement:"range"===e&&a.element.querySelector(a.options.selectorDatePickerInputFrom),onClose:function(t){l.shouldForceOpen&&(l.calendar.calendarContainer&&l.calendar.calendarContainer.classList.add("open"),l.calendar.isOpen=!0);for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];h&&!1===h.call.apply(h,[this,t].concat(o))||(l._updateClassNames(w),l._updateInputFields(t,e))},onChange:function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];f&&!1===f.call.apply(f,[this].concat(n))||(l._updateClassNames(w),"range"===e&&(1===w.selectedDates.length&&w.isOpen?l.element.querySelector(l.options.selectorDatePickerInputTo).classList.add(l.options.classFocused):l.element.querySelector(l.options.selectorDatePickerInputTo).classList.remove(l.options.classFocused)))},onMonthChange:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];m&&!1===m.call.apply(m,[this].concat(t))||l._updateClassNames(w)},onYearChange:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];g&&!1===g.call.apply(g,[this].concat(t))||l._updateClassNames(w)},onOpen:function(){l.shouldForceOpen=!0,setTimeout(function(){l.shouldForceOpen=!1},0);for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];v&&!1===v.call.apply(v,[this].concat(t))||l._updateClassNames(w)},onValueUpdate:function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];b&&!1===b.call.apply(b,[this].concat(n))||"range"!==e||l._updateInputFields(l.calendar.selectedDates,e)},nextArrow:a._rightArrowHTML(),prevArrow:a._leftArrowHTML()}));return"range"===e&&(a._addInputLogic(a.element.querySelector(a.options.selectorDatePickerInputFrom),0),a._addInputLogic(a.element.querySelector(a.options.selectorDatePickerInputTo),1)),a.manage(y(a.element.querySelector(a.options.selectorDatePickerIcon),"click",function(){w.open()})),a._updateClassNames(w),"range"!==e&&a._addInputLogic(d),w}),i(u(u(a)),"_addInputLogic",function(e,t){if(!isNaN(t)&&(t<0||t>1))throw new RangeError("The index of <input> (".concat(t,") is out of range."));var n=e;a.manage(y(n,"change",function(e){if(e.isTrusted||e.detail&&e.detail.isNotFromFlatpickr){var o=a.calendar.parseDate(n.value);if(o&&!isNaN(o.valueOf()))if(isNaN(t))a.calendar.setDate(o);else{var i=a.calendar.selectedDates;i[t]=o,a.calendar.setDate(i)}}a._updateClassNames(a.calendar)})),a.manage(y(n,"keydown",function(e){var t=a.calendar._input;a.calendar._input=e.target,setTimeout(function(){a.calendar._input=t})}))}),i(u(u(a)),"_updateClassNames",function(e){var t=e.calendarContainer,n=e.selectedDates;t&&(t.classList.add(a.options.classCalendarContainer),t.querySelector(".flatpickr-month").classList.add(a.options.classMonth),t.querySelector(".flatpickr-weekdays").classList.add(a.options.classWeekdays),t.querySelector(".flatpickr-days").classList.add(a.options.classDays),oe(t.querySelectorAll(".flatpickr-weekday")).forEach(function(e){var t=e;t.innerHTML=t.innerHTML.replace(/\s+/g,""),t.classList.add(a.options.classWeekday)}),oe(t.querySelectorAll(".flatpickr-day")).forEach(function(e){e.classList.add(a.options.classDay),e.classList.contains("today")&&n.length>0?e.classList.add("no-border"):e.classList.contains("today")&&0===n.length&&e.classList.remove("no-border")}))}),i(u(u(a)),"_updateInputFields",function(e,t){"range"===t?2===e.length?(a.element.querySelector(a.options.selectorDatePickerInputFrom).value=a._formatDate(e[0]),a.element.querySelector(a.options.selectorDatePickerInputTo).value=a._formatDate(e[1])):1===e.length&&(a.element.querySelector(a.options.selectorDatePickerInputFrom).value=a._formatDate(e[0])):1===e.length&&(a.element.querySelector(a.options.selectorDatePickerInput).value=a._formatDate(e[0])),a._updateClassNames(a.calendar)}),i(u(u(a)),"_formatDate",function(e){return a.calendar.formatDate(e,a.calendar.config.dateFormat)});var r=a.element.getAttribute(a.options.attribType);return a.calendar=a._initDatePicker(r),a.calendar.calendarContainer&&(a.manage(y(a.element,"keydown",function(e){40===e.which&&a.calendar.calendarContainer.focus()})),a.manage(y(a.calendar.calendarContainer,"keydown",function(e){9===e.which&&"range"===r&&(a._updateClassNames(a.calendar),a.element.querySelector(a.options.selectorDatePickerInputFrom).focus())}))),a}return s(o,m(g,v,b)),a(o,[{key:"_rightArrowHTML",value:function(){return'\n      <svg width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">\n        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>\n      </svg>'}},{key:"_leftArrowHTML",value:function(){return'\n      <svg width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">\n        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>\n      </svg>'}},{key:"release",value:function(){if(this._rangeInput&&this._rangeInput.parentNode&&this._rangeInput.parentNode.removeChild(this._rangeInput),this.calendar){try{this.calendar.destroy()}catch(e){}this.calendar=null}return p(c(o.prototype),"release",this).call(this)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-date-picker]",selectorDatePickerInput:"[data-date-picker-input]",selectorDatePickerInputFrom:"[data-date-picker-input-from]",selectorDatePickerInputTo:"[data-date-picker-input-to]",selectorDatePickerIcon:"[data-date-picker-icon]",classCalendarContainer:"".concat(e,"--date-picker__calendar"),classMonth:"".concat(e,"--date-picker__month"),classWeekdays:"".concat(e,"--date-picker__weekdays"),classDays:"".concat(e,"--date-picker__days"),classWeekday:"".concat(e,"--date-picker__weekday"),classDay:"".concat(e,"--date-picker__day"),classFocused:"".concat(e,"--focused"),classVisuallyHidden:"".concat(e,"--visually-hidden"),attribType:"data-date-picker-type",dateFormat:"m/d/Y"}}}]),o}();i(ae,"components",new WeakMap);var ie=function(e){return Array.prototype.slice.call(e)},re=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).leftNavSectionActive=!1,a.hookOpenActions(),a.hookListSectionEvents(),a.hookListItemsEvents(),a.manage(y(a.element.ownerDocument,"click",function(e){a.handleDocumentClick(e)})),a}return s(o,m(g,v,b)),a(o,[{key:"closeMenu",value:function(){this.element.classList.remove(this.options.classActiveLeftNav),this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen).classList.remove(this.options.classActiveTrigger),this.element.querySelector(this.options.selectorLeftNav).parentNode.setAttribute("aria-expanded","false")}},{key:"toggleMenu",value:function(){var e=this.element.querySelector(this.options.selectorLeftNav).parentNode;this.element.classList.toggle(this.options.classActiveLeftNav),this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen).classList.toggle(this.options.classActiveTrigger),"false"===e.getAttribute("aria-expanded")?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false")}},{key:"animateNavSection",value:function(e){var t=this,n=e.dataset.leftNavSection,o=e.querySelector(this.options.selectorLeftNavSectionLink),a=this.element.querySelector(this.options.selectorLeftNav),i=this.element.querySelector(this.options.selectorLeftNavSections);e.classList.remove(this.options.classNavSection),e.classList.remove("".concat(this.options.classNavSection,"--").concat(n)),e.classList.add(this.options.classNavSectionTransition),i.children[0]===e?e.classList.add("".concat(this.options.classNavSectionTransition,"--50")):e.classList.add("".concat(this.options.classNavSectionTransition,"--100")),e.setAttribute("data-left-nav-section",n),setTimeout(function(){e.classList.add("".concat(t.options.classNavSectionTransition,"--0"))},100),o.classList.remove(this.options.classNavSectionLink),o.classList.add(this.options.classNavHeaderTitle),o.setAttribute("data-left-nav-current-section-title",""),o.removeAttribute("data-left-nav-section-link"),this.element.insertBefore(e,a)}},{key:"animateNavList",value:function(e){var t=this,n=this.element.querySelector("".concat(this.options.selectorLeftNavList,":not(").concat(this.options.selectorLeftNavMainNavHidden,")")),o=this.element.querySelector("[data-left-nav-list=".concat(e,"]")),a=ie(n.querySelectorAll(this.options.selectorLeftNavListItem)).reverse(),i=ie(o.querySelectorAll(this.options.selectorLeftNavListItem)),r=0,s=300/a.length;a.forEach(function(e){e.setAttribute("tabIndex","-1"),setTimeout(function(){e.classList.add(t.options.classItemFade)},r),r+=s}),i.forEach(function(e){e.setAttribute("tabIndex","0"),e.classList.remove(t.options.classItemFade)}),setTimeout(function(){n.classList.add(t.options.classListHidden),n.classList.add(t.options.classListTop),n.setAttribute("aria-hidden","true"),o.classList.remove(t.options.classListHidden),setTimeout(function(){o.classList.remove(t.options.classListTop)},100),o.setAttribute("aria-hidden","false")},400)}},{key:"hookOpenActions",value:function(){var e=this,t=this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen),n=this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleClose);this.manage(y(t,"click",function(){e.element.tabIndex="0",e.toggleMenu()})),this.manage(y(t,"keydown",function(t){13===t.which&&(e.element.tabIndex="0",e.toggleMenu())})),n&&(this.manage(y(n,"click",function(){e.element.tabIndex="-1",e.closeMenu()})),this.manage(y(n,"keydown",function(t){13===t.which&&(e.element.tabIndex="-1",e.closeMenu())}))),this.manage(y(this.element.ownerDocument,"keydown",function(t){27===t.which&&e.element.classList.contains(e.options.classActiveLeftNav)&&e.closeMenu()}))}},{key:"hookListSectionEvents",value:function(){var e=this,t=this.element.querySelector(this.options.selectorLeftNavSections);this.manage(y(t,"click",function(n){e.handleSectionItemClick(n,t)})),this.manage(y(t,"keydown",function(n){13===n.which&&(e.handleSectionItemClick(n,t),e.element.querySelector(e.options.selectorLeftNavCurrentSectionTitle).focus())}))}},{key:"hookListItemsEvents",value:function(){var e=this;ie(this.element.querySelectorAll(this.options.selectorLeftNavList)).forEach(function(t){e.manage(y(t,"click",function(t){var n=C(t,e.options.selectorLeftNavListItem);if(n){var o=C(t,e.options.selectorLeftNavNestedListItem),a=C(t,e.options.selectorLeftNavListItemHasChildren),i=C(t,e.options.selectorLeftNavFlyoutItem);if(i)e.addActiveListItem(i);else if(o){if(o.querySelector(e.options.selectorLeftNavFlyoutMenu))o.querySelector(e.options.selectorLeftNavFlyoutMenu).classList.toggle(e.options.classFlyoutDisplayed);else e.addActiveListItem(o)}else a?e.handleNestedListClick(n):e.addActiveListItem(n)}})),e.manage(y(t,"keydown",function(t){if(13===t.which){var n=C(t,e.options.selectorLeftNavListItem);if(n){var o=C(t,e.options.selectorLeftNavNestedListItem),a=C(t,e.options.selectorLeftNavListItemHasChildren),i=C(t,e.options.selectorLeftNavFlyoutItem),r=!(void 0===n.querySelector(e.options.selectorLeftNavListItemLink));if(i)e.addActiveListItem(i);else if(o)o.querySelector(e.options.selectorLeftNavFlyoutMenu)?(o.querySelector(e.options.selectorLeftNavFlyoutMenu).setAttribute("aria-hidden","false"),o.querySelector(e.options.selectorLeftNavFlyoutMenu).style.top="".concat(o.offsetTop-e.element.querySelector(e.options.selectorLeftNav).scrollTop,"px"),o.querySelector(e.options.selectorLeftNavFlyoutMenu).style.left="".concat(o.offsetLeft+Math.round(o.offsetWidth),"px")):e.addActiveListItem(o);else if(a)e.handleNestedListClick(n);else if(r){n.querySelector(e.options.selectorLeftNavListItemLink).click()}else e.addActiveListItem(n)}}}))}),ie(this.element.ownerDocument.querySelectorAll(this.options.selectorLeftNavListItemHasFlyout)).forEach(function(t){e.manage(y(t,"mouseenter",function(){t.querySelector(e.options.selectorLeftNavFlyoutMenu).setAttribute("aria-hidden","false"),t.querySelector(e.options.selectorLeftNavFlyoutMenu).style.top="".concat(t.offsetTop-e.element.querySelector(e.options.selectorLeftNav).scrollTop,"px"),t.querySelector(e.options.selectorLeftNavFlyoutMenu).style.left="".concat(t.offsetLeft+Math.round(t.offsetWidth),"px"),t.querySelector(e.options.selectorLeftNavFlyoutMenu).classList.toggle(e.options.classFlyoutDisplayed)})),e.manage(y(t,"mouseleave",function(){t.querySelector(e.options.selectorLeftNavFlyoutMenu).setAttribute("aria-hidden","true"),t.querySelector(e.options.selectorLeftNavFlyoutMenu).classList.remove(e.options.classFlyoutDisplayed)}))})}},{key:"hideAllFlyoutMenus",value:function(){var e=this;ie(this.element.querySelectorAll(this.options.selectorLeftNavFlyoutMenu)).forEach(function(t){t.setAttribute("aria-hidden","true"),t.classList.remove(e.options.classFlyoutDisplayed)})}},{key:"addActiveListItem",value:function(e){var t=this;ie(this.element.querySelectorAll(this.options.selectorLeftNavAllListItems)).forEach(function(n){e!==n&&(n.contains(e)?n.classList.add(t.options.classActiveLeftNavListItem):n.classList.remove(t.options.classActiveLeftNavListItem))}),ie(this.element.querySelectorAll(this.options.selectorLeftNavNestedListItem)).forEach(function(n){e!==n&&n.classList.remove(t.options.classActiveLeftNavListItem)}),e.classList.add(this.options.classActiveLeftNavListItem),this.closeMenu(),this.hideAllFlyoutMenus(),this.closeMenu()}},{key:"handleDocumentClick",value:function(e){var t,n=e.target,o=this.element.contains(n),a=this.element.ownerDocument.querySelector(this.options.selectorLeftNavToggleOpen).contains(n),i=this.element.classList.contains(this.options.classActiveLeftNav),r=this.element.ownerDocument.querySelector("[data-unified-header]").contains(n),s=!o&&i&&!a&&!r;this.element.querySelector(this.options.selectorLeftNavFlyoutMenu)&&(t=this.element.querySelector(this.options.selectorLeftNavFlyoutMenu).classList.contains(this.options.classFlyoutDisplayed));o&&"A"===this.element.tagName&&e.preventDefault(),s&&this.closeMenu(),this.element.querySelector(this.options.selectorLeftNavFlyoutMenu)&&t&&!o&&i&&this.element.querySelector(this.options.selectorLeftNavFlyoutMenu).classList.remove(this.options.classFlyoutDisplayed)}},{key:"handleNestedListClick",value:function(e){var t=this,n=e.classList.contains(this.options.classExpandedLeftNavListItem);this.hideAllFlyoutMenus(),e.classList.toggle(this.options.classExpandedLeftNavListItem,!n),ie(e.querySelectorAll(this.options.selectorLeftNavNestedListItem)).forEach(function(o){n?(e.querySelector(t.options.selectorLeftNavNestedList).setAttribute("aria-hidden","true"),o.querySelector(t.options.selectorLeftNavListItemLink).tabIndex=-1):(e.querySelector(t.options.selectorLeftNavNestedList).setAttribute("aria-hidden","false"),o.querySelector(t.options.selectorLeftNavListItemLink).tabIndex=0)})}},{key:"handleSectionItemClick",value:function(e,t){var n=this,o=C(e,this.options.selectorLeftNavSection);if(o){var a=this.element.querySelector(this.options.selectorLeftNavCurrentSection),i=a.querySelector(this.options.selectorLeftNavCurrentSectionTitle),r=this.element.querySelector(this.options.selectorLeftNavCurrentSectionIcon),s=r.querySelector("use"),c=a.dataset.leftNavCurrentSection,l=o.querySelector(this.options.selectorLeftNavSectionLink),u=o.querySelector(this.options.selectorLeftNavSectionIcon).querySelector("use"),d=o.dataset.leftNavSection;if(this.leftNavSectionActive)return;this.leftNavSectionActive=!0;var p=document.createElement("li");p.setAttribute("data-left-nav-section",c),p.classList.add(this.options.classNavSection),p.classList.add("".concat(this.options.classNavSection,"--").concat(c));var h=document.createElement("a");h.setAttribute("href","javascript:void(0)"),h.setAttribute("tabindex",0),h.classList.add(this.options.classNavSectionAnchor);var f=r.cloneNode(!0);f.setAttribute("class",this.options.classTaxonomyIcon),f.removeAttribute("data-left-nav-current-section-icon"),f.setAttribute("data-left-nav-section-icon",c);var m=document.createElement("span");m.setAttribute("data-left-nav-section-link",""),m.classList.add(this.options.classNavSectionLink),m.textContent=i.textContent,this.animateNavSection(o),this.animateNavList(d),h.appendChild(f),h.appendChild(m),p.appendChild(h),t.insertBefore(p,t.firstChild),setTimeout(function(){i.textContent=l.textContent,a.setAttribute("data-left-nav-current-section",d),r.setAttribute("data-left-nav-current-section-icon",d),s.setAttribute("xlink:href",u.getAttribute("xlink:href")),o.parentNode.removeChild(o),n.leftNavSectionActive=!1},450)}}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-left-nav-container]",selectorLeftNav:"[data-left-nav]",selectorLeftNavList:"[data-left-nav-list]",selectorLeftNavNestedList:"[data-left-nav-nested-list]",selectorLeftNavToggleOpen:'[data-left-nav-toggle="open"]',selectorLeftNavToggleClose:'[data-left-nav-toggle="close"]',selectorLeftNavListItem:"[data-left-nav-item]",selectorLeftNavListItemLink:"[data-left-nav-item-link]",selectorLeftNavNestedListItem:"[data-left-nav-nested-item]",selectorLeftNavArrowIcon:"[data-left-nav-icon]",selectorLeftNavFlyoutMenu:"[data-left-nav-flyout]",selectorLeftNavFlyoutItem:"[data-left-nav-flyout-item]",selectorLeftNavSections:"[data-left-nav-sections]",selectorLeftNavSection:"[data-left-nav-section]",selectorLeftNavSectionLink:"[data-left-nav-section-link]",selectorLeftNavSectionIcon:"[data-left-nav-section-icon]",selectorLeftNavCurrentSection:"[data-left-nav-current-section]",selectorLeftNavCurrentSectionTitle:"[data-left-nav-current-section-title]",selectorLeftNavCurrentSectionIcon:"[data-left-nav-current-section-icon]",selectorLeftNavListItemHasChildren:"[data-left-nav-item-with-children]",selectorLeftNavListItemHasFlyout:"[data-left-nav-has-flyout]",selectorLeftNavAllListItems:"[data-left-nav-item], [data-left-nav-nested-item], [data-left-nav-flyout-item]",selectorLeftNavMainNavHidden:".".concat(e,"--left-nav__main-nav--hidden"),classActiveTrigger:"".concat(e,"--left-nav__trigger--active"),classActiveLeftNav:"".concat(e,"--left-nav--active"),classActiveLeftNavListItem:"".concat(e,"--active-list-item"),classExpandedLeftNavListItem:"".concat(e,"--main-nav__parent-item--expanded"),classFlyoutDisplayed:"".concat(e,"--nested-list__flyout-menu--displayed"),classItemHasChildren:"".concat(e,"--main-nav__parent-item--has-children"),classNavSection:"".concat(e,"--left-nav__section"),classNavSectionTransition:"".concat(e,"--left-nav__section--transition"),classNavSectionAnchor:"".concat(e,"--left-nav__section--anchor"),classNavSectionLink:"".concat(e,"--left-nav__section--link"),classNavHeaderTitle:"".concat(e,"--left-nav__header--title"),classItemFade:"".concat(e,"--main-nav__parent-item--fade"),classItemHidden:"".concat(e,"--main-nav__parent-item--hidden"),classListHidden:"".concat(e,"--left-nav__main-nav--hidden"),classListTop:"".concat(e,"--left-nav__main-nav--top"),classTaxonomyIcon:"".concat(e,"--left-nav__section--taxonomy-icon")}}}]),o}();i(re,"components",new WeakMap);var se=re,ce=function(e){function o(e,t){var a;n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element.ownerDocument,"click",function(e){a.handleDocumentClick(e)})),a.manage(y(a.element,"dropdown-beingselected",function(e){if(null!==e.target.querySelector(a.options.selectorAccountDropdown)){var t=e.detail.item.querySelector(a.options.classLinkedIcon);a.element.isLinked=!!t,a.element.linkedIcon=t&&t.cloneNode(!0);var n=e.detail.item.querySelector(a.options.selectorAccountSlLinked);a.element.linkedAccount=n&&n.cloneNode(!0)}}));var i=a.element.querySelector(a.options.selectorToggle);return i&&(a.manage(y(i,"keydown",function(e){a.toggle(e)})),a.manage(y(i,"mouseenter",function(e){a.getLinkedData(e),a.determineSwitcherValues(!0)})),a.manage(y(i,"mouseleave",function(e){a.getLinkedData(e),a.determineSwitcherValues(!1)}))),a.manage(y(a.element.ownerDocument,"keyup",function(){return a.handleBlur()})),a}return s(o,m(g,v,b)),a(o,[{key:"toggle",value:function(e){var t=this.element.contains(e.target);13!==e.which&&32!==e.which||(t?this.element.classList.toggle(this.options.classSwitcherOpen):!t&&this.element.classList.contains(this.options.classSwitcherOpen)&&this.element.classList.remove(this.options.classSwitcherOpen))}},{key:"getLinkedData",value:function(e){null!==e.target.querySelector(this.options.selectorLinkedAccount)&&(e.target.querySelector(this.options.selectorLinkedAccount).textContent.length>1?this.element.isLinked=!0:this.element.isLinked=!1)}},{key:"handleBlur",value:function(){this.element.contains(document.activeElement)||this.element.classList.remove(this.options.classSwitcherOpen)}},{key:"handleDocumentClick",value:function(e){var t=e.target,n=this.element.contains(t),o=C(e,this.options.selectorToggle),a=this.element.classList.contains(this.options.classSwitcherOpen);n?o&&a?this.element.classList.remove(this.options.classSwitcherOpen):a?this.determineSwitcherValues():this.element.classList.add(this.options.classSwitcherOpen):this.element.classList.remove(this.options.classSwitcherOpen)}},{key:"determineSwitcherValues",value:function(e){var t=this.element.querySelector(this.options.selectorLinkedAccount),n=this.element.querySelector(this.options.selectorAccount),o=this.element.querySelector(this.options.selectorRegion),a=this.element.querySelector(this.options.selectorOrg),i=this.element.querySelector(this.options.selectorSpace),r=this.element.querySelector(this.options.selectorMenu),s=this.element.classList.contains(this.options.classSwitcherOpen);t&&(this.element.isLinked?this.element.linkedAccount&&(t.textContent.length?t.querySelector(this.options.selectorAccountSlLinked).textContent=this.element.linkedAccount.textContent:(t.appendChild(this.element.linkedAccount),this.element.linkedIcon&&t.appendChild(this.element.linkedIcon))):t.textContent="");var c="";this.element.querySelector(this.options.selectorAccountDropdown)&&(c=this.element.isLinked?this.element.querySelector(this.options.selectorAccountLinked).textContent:this.element.querySelector(this.options.selectorAccountDropdown).textContent);var l="";this.element.querySelector(this.options.selectorRegionDropdown)&&(l=this.element.querySelector(this.options.selectorRegionDropdown).textContent);var u="";this.element.querySelector(this.options.selectorOrgDropdown)&&(u=this.element.querySelector(this.options.selectorOrgDropdown).textContent);var d,p,h,f="";this.element.querySelector(this.options.selectorSpaceDropdown)&&(f=this.element.querySelector(this.options.selectorSpaceDropdown).textContent),e&&!s?(n&&(n.textContent=c),a&&(a.textContent=u),i&&(i.textContent=f),o&&(o.textContent=l),r&&(r.style.width="".concat(this.element.getBoundingClientRect().width,"px"))):(n&&(c.length>25?(d="".concat(c.substr(0,25),"..."),n.textContent=d):n.textContent=c),a&&(u.length>25?(p="".concat(u.slice(0,12),"...").concat(u.slice(-13)),a.textContent=p):a.textContent=u),i&&(f.length>25?(h="".concat(f.substr(0,25),"..."),i.textContent=h):i.textContent=f),o&&(o.textContent=l),r&&(r.style.width="".concat(this.element.getBoundingClientRect().width,"px")))}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-profile-switcher]",selectorProfileSwitcher:"[data-profile-switcher]",selectorToggle:"[data-profile-switcher-toggle]",selectorMenu:"[data-switcher-menu]",selectorLinkedAccount:"[data-switcher-account-sl]",selectorAccount:"[data-switcher-account]",selectorRegion:"[data-switcher-region]",selectorOrg:"[data-switcher-org]",selectorSpace:"[data-switcher-space]",selectorDropdown:"[data-dropdown]",selectorAccountDropdown:"[data-dropdown-account]",selectorAccountSlDropdown:"[data-dropdown-account-sl]",selectorAccountLinked:"[data-dropdown-account-linked]",selectorAccountSlLinked:"[data-dropdown-account-sl-linked]",selectorRegionDropdown:"[data-dropdown-region]",selectorOrgDropdown:"[data-dropdown-org]",selectorSpaceDropdown:"[data-dropdown-space]",classSwitcherOpen:"".concat(e,"--account-switcher--open"),classLinkedIcon:".".concat(e,"--account-switcher__linked-icon")}}}]),o}();i(ce,"components",new WeakMap);var le=ce,ue=function(e){function t(e,o){var a;return n(this,t),i(u(u(a=d(this,c(t).call(this,e,o)))),"_emitEvent",function(e,t){var n=new CustomEvent("".concat(e),{bubbles:!0,cancelable:!0,detail:t});a.element.dispatchEvent(n)}),a.manage(y(a.element,"click",function(e){if(e.target.matches(a.options.selectorPageBackward)){var t={initialEvt:e,element:e.target,direction:"backward"};a._emitEvent(a.options.eventPageChange,t)}else if(e.target.matches(a.options.selectorPageForward)){var n={initialEvt:e,element:e.target,direction:"forward"};a._emitEvent(a.options.eventPageChange,n)}})),a.manage(y(a.element,"input",function(e){if(e.target.matches(a.options.selectorItemsPerPageInput)){var t={initialEvt:e,element:e.target,value:e.target.value};a._emitEvent(a.options.eventItemsPerPage,t)}else if(e.target.matches(a.options.selectorPageNumberInput)){var n={initialEvt:e,element:e.target,value:e.target.value};a._emitEvent(a.options.eventPageNumber,n)}})),a}return s(t,m(g,v,b)),t}();function de(e,t,n){var o=e.getAttribute("class").trim().split(/\s+/),a=Object.keys(o.reduce(function(e,t){return Object.assign(e,i({},t,1))},{})),r=a.indexOf(t),s=r>=0,c=void 0===n?!s:n;s===!c&&(c?a.push(t):a.splice(r,1),e.setAttribute("class",a.join(" ")))}i(ue,"components",new WeakMap),i(ue,"options",{selectorInit:"[data-pagination]",selectorItemsPerPageInput:"[data-items-per-page]",selectorPageNumberInput:"[data-page-number-input]",selectorPageBackward:"[data-page-backward]",selectorPageForward:"[data-page-forward]",eventItemsPerPage:"itemsPerPage",eventPageNumber:"pageNumber",eventPageChange:"pageChange"});var pe=function(e){function o(e,t){var a;n(this,o);var i=(a=d(this,c(o).call(this,e,t))).element.querySelector(a.options.selectorClearIcon),r=a.element.querySelector(a.options.selectorSearchInput);if(!r)throw new Error("Cannot find the search input.");return i&&a.manage(y(i,"click",function(){de(i,a.options.classClearHidden,!0),r.value="",r.focus()})),a.manage(y(a.element,"click",function(e){var t=C(e,a.options.selectorIconContainer);t&&a.toggleLayout(t)})),a.manage(y(r,"input",function(e){i&&a.showClear(e.target.value,i)})),a}return s(o,m(g,v,b)),a(o,[{key:"toggleLayout",value:function(e){var t,n=this;(t=e.querySelectorAll(this.options.selectorSearchView),Array.prototype.slice.call(t)).forEach(function(e){e.classList.toggle(n.options.classLayoutHidden)})}},{key:"showClear",value:function(e,t){de(t,this.options.classClearHidden,0===e.length)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-search]",selectorSearchView:"[data-search-view]",selectorSearchInput:".".concat(e,"--search-input"),selectorClearIcon:".".concat(e,"--search-close"),selectorIconContainer:".".concat(e,"--search-button[data-search-toggle]"),classClearHidden:"".concat(e,"--search-close--hidden"),classLayoutHidden:"".concat(e,"--search-view--hidden")}}}]),o}();i(pe,"components",new WeakMap);var he=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"click",function(e){var t=C(e,a.options.selectorAccordionItem);t&&!C(e,a.options.selectorAccordionContent)&&a._toggle(t)})),a._checkIfButton()||a.manage(y(a.element,"keypress",function(e){C(e,a.options.selectorAccordionItem)&&!C(e,a.options.selectorAccordionContent)&&a._handleKeypress(e)})),a}return s(o,m(g,v,b)),a(o,[{key:"_checkIfButton",value:function(){return"BUTTON"===this.element.firstElementChild.firstElementChild.nodeName}},{key:"_handleKeypress",value:function(e){13!==e.which&&32!==e.which||this._toggle(e.target)}},{key:"_toggle",value:function(e){var t=e.querySelector(this.options.selectorAccordionItemHeading),n=t.getAttribute("aria-expanded");null!==n&&t.setAttribute("aria-expanded","true"===n?"false":"true"),e.classList.toggle(this.options.classActive)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-accordion]",selectorAccordionItem:".".concat(e,"--accordion__item"),selectorAccordionItemHeading:".".concat(e,"--accordion__heading"),selectorAccordionContent:".".concat(e,"--accordion__content"),classActive:"".concat(e,"--accordion__item--active")}}}]),o}();i(he,"components",new WeakMap);var fe=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"click",function(){return a.handleClick()})),a}return s(o,m(g,v,b)),a(o,[{key:"handleClick",value:function(){var e=this,t=this.element.querySelector(this.options.feedbackTooltip);t&&(t.classList.add(this.options.classShowFeedback),setTimeout(function(){t.classList.remove(e.options.classShowFeedback)},this.options.timeoutValue))}}],[{key:"options",get:function(){return{selectorInit:"[data-copy-btn]",feedbackTooltip:"[data-feedback]",classShowFeedback:"".concat(t.prefix,"--btn--copy__feedback--displayed"),timeoutValue:2e3}}}]),o}();i(fe,"components",new WeakMap);var me=function(e){function t(e,o){var a;return n(this,t),i(u(u(a=d(this,c(t).call(this,e,o)))),"_changeState",function(e,t){"delete-notification"===e&&(a.element.parentNode.removeChild(a.element),a.release()),t()}),a.button=e.querySelector(a.options.selectorButton),a.button&&a.manage(y(a.button,"click",function(e){e.currentTarget===a.button&&a.remove()})),a}return s(t,m(g,v,k,b)),a(t,[{key:"remove",value:function(){this.changeState("delete-notification")}}]),t}();i(me,"components",new WeakMap),i(me,"options",{selectorInit:"[data-notification]",selectorButton:"[data-notification-btn]",eventBeforeDeleteNotification:"notification-before-delete",eventAfterDeleteNotification:"notification-after-delete"});var ge=function(e){function o(e,t){var a;if(n(this,o),(a=d(this,c(o).call(this,e,t))).element.dataset.tableTarget){var i=a.element.ownerDocument.querySelector(a.element.dataset.tableTarget),r=a.element.querySelector(a.options.selectorRowHeight);r&&a.manage(y(r,"click",function(e){a._handleRowHeightChange(e,i)}))}else console.warn("There is no table bound to this toolbar!");return a.manage(y(a.element.ownerDocument,"keydown",function(e){a._handleKeyDown(e)})),a.manage(y(a.element.ownerDocument,"click",function(e){a._handleDocumentClick(e)})),a}return s(o,m(g,v,b)),a(o,[{key:"_handleDocumentClick",value:function(e){var t=this,n=C(e,this.options.selectorSearch),o=n&&this.element.contains(n);if(o){var a=o&&!this.element.classList.contains(this.options.classSearchActive);n.classList.toggle(this.options.classSearchActive,a),a&&n.querySelector("input").focus()}var i,r=C(e,this.options.selectorInit);(i=this.element.ownerDocument.querySelectorAll(this.options.selectorSearch),Array.prototype.slice.call(i)).forEach(function(e){r&&r.contains(e)||e.classList.remove(t.options.classSearchActive)})}},{key:"_handleKeyDown",value:function(e){var t=C(e,this.options.selectorSearch);t&&27===e.which&&t.classList.remove(this.options.classSearchActive)}},{key:"_handleRowHeightChange",value:function(e,t){"tall"===e.currentTarget.querySelector("input:checked").value?t.classList.add(this.options.classTallRows):t.classList.remove(this.options.classTallRows)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-toolbar]",selectorSearch:"[data-toolbar-search]",selectorRowHeight:"[data-row-height]",classTallRows:"".concat(e,"--responsive-table--tall"),classSearchActive:"".concat(e,"--toolbar-search--active")}}}]),o}();i(ge,"components",new WeakMap);var ve="Expected a function",be=NaN,ye="[object Symbol]",we=/^\s+|\s+$/g,Se=/^[-+]0x[0-9a-f]+$/i,ke=/^0b[01]+$/i,Ce=/^0o[0-7]+$/i,Ee=parseInt,Le="object"==typeof ee&&ee&&ee.Object===Object&&ee,_e="object"==typeof self&&self&&self.Object===Object&&self,xe=Le||_e||Function("return this")(),Ae=Object.prototype.toString,De=Math.max,Ne=Math.min,Te=function(){return xe.Date.now()};function Ie(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function Me(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&Ae.call(e)==ye}(e))return be;if(Ie(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=Ie(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(we,"");var n=ke.test(e);return n||Ce.test(e)?Ee(e.slice(2),n?2:8):Se.test(e)?be:+e}var Oe=function(e,t,n){var o,a,i,r,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError(ve);function h(t){var n=o,i=a;return o=a=void 0,l=t,r=e.apply(i,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=i}function m(){var e=Te();if(f(e))return g(e);s=setTimeout(m,function(e){var n=t-(e-c);return d?Ne(n,i-(e-l)):n}(e))}function g(e){return s=void 0,p&&o?h(e):(o=a=void 0,r)}function v(){var e=Te(),n=f(e);if(o=arguments,a=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),u?h(e):r}(c);if(d)return s=setTimeout(m,t),h(c)}return void 0===s&&(s=setTimeout(m,t)),r}return t=Me(t)||0,Ie(n)&&(u=!!n.leading,i=(d="maxWait"in n)?De(Me(n.maxWait)||0,t):i,p="trailing"in n?!!n.trailing:p),v.cancel=function(){void 0!==s&&clearTimeout(s),l=0,o=c=a=s=void 0},v.flush=function(){return void 0===s?r:g(Te())},v},Fe=function(e,t){var n,o,a=e.ownerDocument.defaultView.getComputedStyle(e,":before"),s=(n={},i(n,"left","right"),i(n,"top","bottom"),i(n,"right","left"),i(n,"bottom","top"),n)[t],c=(o={},i(o,"left","left"),i(o,"top","top"),i(o,"right","left"),i(o,"bottom","top"),o)[t],l=[s,"border-bottom-width"].reduce(function(e,t){return r({},e,i({},t,Number((/^([\d-.]+)px$/.exec(a.getPropertyValue(t))||[])[1])))},{});if(l[s]=l[s]||-6,Object.keys(l).every(function(e){return!isNaN(l[e])})){var u=l[s],d=l["border-bottom-width"];return i({left:0,top:0},c,Math.sqrt(2*Math.pow(d,2))-u)}},Pe=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_hasContextMenu",!1),i(u(u(a)),"_debouncedHandleClick",Oe(a._handleClick,200)),a._hookOn(e),a}return s(o,m(g,_,M,b)),a(o,[{key:"createdByEvent",value:function(e){var t=e.relatedTarget,n=e.type;this._debouncedHandleClick({relatedTarget:t,type:"focusin"===n?"focus":n,details:I(e)})}},{key:"changeState",value:function(e,t,n){if(!this.tooltip){var o=this.element.ownerDocument.querySelector(this.element.getAttribute(this.options.attribTooltipTarget));if(!o)throw new Error("Cannot find the target tooltip.");this.tooltip=P.create(o,{refNode:this.element,classShown:this.options.classShown,offset:this.options.objMenuOffset}),this._hookOn(o),this.children.push(this.tooltip)}this.tooltip.changeState(e,Object.assign(t,{delegatorNode:this.element}),n)}},{key:"_hookOn",value:function(e){var t=this,n="onfocusin"in window,o=n?"focusin":"focus";[o,"blur","touchleave","touchcancel"].forEach(function(a){t.manage(y(e,a,function(e){var n=e.relatedTarget,o=e.type,a=t._hasContextMenu;t._hasContextMenu="contextmenu"===o,t._debouncedHandleClick({relatedTarget:n,type:"focusin"===o?"focus":o,hadContextMenu:a,details:I(e)})},a===o&&!n))})}},{key:"_handleClick",value:function(e){var t,n=e.relatedTarget,o=e.type,a=e.hadContextMenu,i=e.details,r={focus:"shown",blur:"hidden",touchleave:"hidden",touchcancel:"hidden"}[o];if("blur"===o){var s=n&&this.element.contains&&this.element.contains(n)||this.tooltip&&this.tooltip.element.contains(n);t=a||s}t||this.changeState(r,i)}}],[{key:"options",get:function(){return{selectorInit:"[data-tooltip-trigger]",classShown:"".concat(t.prefix,"--tooltip--shown"),attribTooltipTarget:"data-tooltip-target",objMenuOffset:Fe,initEventNames:["focus"]}}}]),o}();i(Pe,"components",new WeakMap);var qe=function(e){return Array.prototype.slice.call(e)},Be=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).state={currentIndex:a.getCurrent().index,totalSteps:a.getSteps().length},a.addOverflowTooltip(),a}return s(o,m(g,v)),a(o,[{key:"getSteps",value:function(){return qe(this.element.querySelectorAll(this.options.selectorStepElement)).map(function(e,t){return{element:e,index:t}})}},{key:"getCurrent",value:function(){var e=this.element.querySelector(this.options.selectorCurrent);return this.getSteps().filter(function(t){return t.element===e})[0]}},{key:"setCurrent",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.currentIndex,n=!1;t!==this.state.currentIndex&&(this.state.currentIndex=t,n=!0),n&&this.getSteps().forEach(function(n){n.index<t&&e._updateStep({element:n.element,className:e.options.classComplete,html:e._getSVGComplete()}),n.index===t&&e._updateStep({element:n.element,className:e.options.classCurrent,html:e._getCurrentSVG()}),n.index>t&&e._updateStep({element:n.element,className:e.options.classIncomplete,html:e._getIncompleteSVG()})})}},{key:"_updateStep",value:function(e){var t=e.element,n=e.className,o=e.html;t.firstElementChild&&t.removeChild(t.firstElementChild),t.classList.contains(n)||(t.setAttribute("class",this.options.classStep),t.classList.add(n)),t.insertAdjacentHTML("afterbegin",o)}},{key:"_getSVGComplete",value:function(){return'<svg width="24px" height="24px" viewBox="0 0 24 24">\n        <circle cx="12" cy="12" r="12"></circle>\n        <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>\n      </svg>'}},{key:"_getCurrentSVG",value:function(){return'<svg>\n        <circle cx="12" cy="12" r="12"></circle>\n        <circle cx="12" cy="12" r="6"></circle>\n      </svg>'}},{key:"_getIncompleteSVG",value:function(){return'<svg>\n        <circle cx="12" cy="12" r="12"></circle>\n      </svg>'}},{key:"addOverflowTooltip",value:function(){var e=this,t=qe(this.element.querySelectorAll(this.options.selectorLabel)),n=qe(this.element.querySelectorAll(this.options.selectorTooltip));t.forEach(function(t){t.scrollWidth>e.options.maxWidth&&t.classList.add(e.options.classOverflowLabel)}),n.forEach(function(t){t.querySelector(e.options.selectorTooltipText).scrollHeight>e.options.tooltipMaxHeight&&t.classList.add(e.options.classTooltipMulti)})}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-progress]",selectorStepElement:".".concat(e,"--progress-step"),selectorCurrent:".".concat(e,"--progress-step--current"),selectorIncomplete:".".concat(e,"--progress-step--incomplete"),selectorComplete:".".concat(e,"--progress-step--complete"),selectorLabel:".".concat(e,"--progress-label"),selectorTooltip:".".concat(e,"--tooltip"),selectorTooltipText:".".concat(e,"--tooltip__text"),classStep:"".concat(e,"--progress-step"),classComplete:"".concat(e,"--progress-step--complete"),classCurrent:"".concat(e,"--progress-step--current"),classIncomplete:"".concat(e,"--progress-step--incomplete"),classOverflowLabel:"".concat(e,"--progress-label-overflow"),classTooltipMulti:"".concat(e,"--tooltip_multi"),maxWidth:87,tooltipMaxHeight:21}}}]),o}();i(Be,"components",new WeakMap);var He=function(e){return Array.prototype.slice.call(e)},Re=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t))).manage(y(a.element,"keydown",function(e){37!==e.which&&38!==e.which&&39!==e.which&&40!==e.which||a._handleKeydownArrow(e),13!==e.which&&32!==e.which||a._handleKeydownChecked(e)})),a.manage(y(a.element,"click",function(e){a._handleClick(e)})),a}return s(o,m(g,v,b)),a(o,[{key:"_direction",value:function(e){return{37:-1,38:-1,39:1,40:1}[e.which]}},{key:"_nextIndex",value:function(e,t,n){return e.indexOf(t)+n}},{key:"_getInput",value:function(e){var t=He(this.element.querySelectorAll(this.options.selectorRow));return this.element.ownerDocument.querySelector(this.options.selectorListInput(t[e].getAttribute("for")))}},{key:"_handleInputChecked",value:function(e){var t=this.element.querySelectorAll(this.options.selectorRow);(this.getInput(e)||t[e].querySelector("input")).checked=!0}},{key:"_handleClick",value:function(e){var t=this,n=C(e,this.options.selectorRow);He(this.element.querySelectorAll(this.options.selectorRow)).forEach(function(e){return e.classList.remove(t.options.classActive)}),n&&n.classList.add(this.options.classActive)}},{key:"_handleKeydownChecked",value:function(e){var t=this;e.preventDefault();var n=C(e,this.options.selectorRow);(He(this.element.querySelectorAll(this.options.selectorRow)).forEach(function(e){return e.classList.remove(t.options.classActive)}),n)&&(n.classList.add(this.options.classActive),(n.querySelector(this.options.selectorListInput(n.getAttribute("for")))||n.querySelector("input")).checked=!0)}},{key:"_handleKeydownArrow",value:function(e){var t=this;e.preventDefault();var n=C(e,this.options.selectorRow),o=this._direction(e);if(o&&void 0!==n){var a=He(this.element.querySelectorAll(this.options.selectorRow));a.forEach(function(e){return e.classList.remove(t.options.classActive)});var i=this._nextIndex(a,n,o),r=a.length-1,s=function(){switch(i){case-1:return r;case a.length:return 0;default:return i}}();a[s].classList.add(this.options.classActive),a[s].focus(),this._handleInputChecked(s)}}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-structured-list]",selectorRow:"[data-structured-list] .".concat(e,"--structured-list-tbody > label.").concat(e,"--structured-list-row"),selectorListInput:function(t){return"#".concat(t,".").concat(e,"--structured-list-input")},classActive:"".concat(e,"--structured-list-row--selected")}}}]),o}();i(Re,"components",new WeakMap);var je=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_changeState",function(e,t,n){n()}),a.sliderActive=!1,a.dragging=!1,a.track=a.element.querySelector(a.options.selectorTrack),a.filledTrack=a.element.querySelector(a.options.selectorFilledTrack),a.thumb=a.element.querySelector(a.options.selectorThumb),a.input=a.element.querySelector(a.options.selectorInput),a.element.dataset.sliderInputBox&&(a.boundInput=a.element.ownerDocument.querySelector(a.element.dataset.sliderInputBox),a._updateInput(),a.manage(y(a.boundInput,"change",function(e){a.setValue(e.target.value)})),a.manage(y(a.boundInput,"focus",function(e){e.target.select()})),a.manage(y(a.boundInput,"mouseup",function(e){e.preventDefault()}))),a._updatePosition(),a.manage(y(a.thumb,"mousedown",function(){a.sliderActive=!0})),a.manage(y(a.element.ownerDocument,"mouseup",function(){a.sliderActive=!1})),a.manage(y(a.element.ownerDocument,"mousemove",function(e){var t=a.element.classList.contains(a.options.classDisabled);!0!==a.sliderActive||t||a._updatePosition(e)})),a.manage(y(a.thumb,"keydown",function(e){a.element.classList.contains(a.options.classDisabled)||a._updatePosition(e)})),a.manage(y(a.track,"click",function(e){a.element.classList.contains(a.options.classDisabled)||a._updatePosition(e)})),a}return s(o,m(g,v,k,b)),a(o,[{key:"_updatePosition",value:function(e){var t=this,n=this._calcValue(e),o=n.left,a=n.newValue;this.dragging||(this.dragging=!0,requestAnimationFrame(function(){t.dragging=!1,t.thumb.style.left="".concat(o,"%"),t.filledTrack.style.transform="translate(0%, -50%) scaleX(".concat(o/100,")"),t.input.value=a,t._updateInput(),t.changeState("slider-value-change",{value:a})}))}},{key:"_calcValue",value:function(e){var t,n,o=this.getInputProps(),a=o.value,i=o.min,r=o.max,s=o.step,c=r-i,l=(a-i)/c*100;if(t=l,n=a,e){var u=e.type;if("keydown"===u){var d={40:-1,37:-1,38:1,39:1}[e.which];if(void 0!==d){var p=s*(!0===e.shiftKey?c/s/this.options.stepMultiplier:1);t=l+p/c*100*d,n=Number(a)+p*d}}if("mousemove"===u||"click"===u){"click"===u?this.element.querySelector(this.options.selectorThumb).classList.add(this.options.classThumbClicked):this.element.querySelector(this.options.selectorThumb).classList.remove(this.options.classThumbClicked);var h=this.track.getBoundingClientRect(),f=(e.clientX-h.left)/h.width,m=Math.round(c*f/s)*s;t=m/c*100,n=m+i}}return n<=Number(i)&&(t=0,n=i),n>=Number(r)&&(t=100,n=r),{left:t,newValue:n}}},{key:"_updateInput",value:function(){this.boundInput&&(this.boundInput.value=this.input.value)}},{key:"getInputProps",value:function(){return{value:Number(this.input.value),min:Number(this.input.min),max:Number(this.input.max),step:this.input.step?Number(this.input.step):1}}},{key:"setValue",value:function(e){this.input.value=e,this._updatePosition()}},{key:"stepUp",value:function(){this.input.stepUp(),this._updatePosition()}},{key:"stepDown",value:function(){this.input.stepDown(),this._updatePosition()}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-slider]",selectorTrack:".".concat(e,"--slider__track"),selectorFilledTrack:".".concat(e,"--slider__filled-track"),selectorThumb:".".concat(e,"--slider__thumb"),selectorInput:".".concat(e,"--slider__input"),classDisabled:"".concat(e,"--slider--disabled"),classThumbClicked:"".concat(e,"--slider__thumb--clicked"),eventBeforeSliderValueChange:"slider-before-value-change",eventAfterSliderValueChange:"slider-after-value-change",stepMultiplier:4}}}]),o}();i(je,"components",new WeakMap);var Ve=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_getClass",function(e){return{expandable:a.options.classExpandedTile,clickable:a.options.classClickableTile,selectable:a.options.classSelectableTile}[e]}),i(u(u(a)),"_hookActions",function(e){var t="expandable"===a.tileType;if(t){var n=a.element.querySelector(a.options.selectorAboveTheFold),o=a.element.ownerDocument.defaultView.getComputedStyle(a.element,null),i=parseInt(o.getPropertyValue("padding-top"),10)+parseInt(o.getPropertyValue("padding-bottom"),10);n&&(a.tileHeight=a.element.getBoundingClientRect().height,a.atfHeight=n.getBoundingClientRect().height+i,a.element.style.maxHeight="".concat(a.atfHeight,"px")),a.element.classList.contains(a.options.classExpandedTile)&&a._setTileHeight()}a.element.addEventListener("click",function(n){C(n,a.options.selectorTileInput)||a.element.classList.toggle(e),t&&a._setTileHeight()}),a.element.addEventListener("keydown",function(n){var o=a.element.querySelector(a.options.selectorTileInput);o&&(13!==n.which&&32!==n.which||t||(a.element.classList.toggle(e),o.checked=!o.checked))})}),i(u(u(a)),"_setTileHeight",function(){var e=a.element.classList.contains(a.options.classExpandedTile);a.element.style.maxHeight="".concat(e?a.tileHeight:a.atfHeight,"px")}),a.tileType=a.element.dataset.tile,a.tileHeight=0,a.atfHeight=0,a._hookActions(a._getClass(a.tileType)),a}return s(o,m(g,v)),a(o,[{key:"release",value:function(){p(c(o.prototype),"release",this).call(this)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-tile]",selectorAboveTheFold:"[data-tile-atf]",selectorTileInput:"[data-tile-input]",classExpandedTile:"".concat(e,"--tile--is-expanded"),classClickableTile:"".concat(e,"--tile--is-clicked"),classSelectableTile:"".concat(e,"--tile--is-selected")}}}]),o}();i(Ve,"components",new WeakMap);var We=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"handleClick",function(e){e.target.matches(a.options.selectorScrollRight)?a.sideScroll("right"):a.sideScroll("left")}),i(u(u(a)),"sideScroll",function(e){var t=a.filmstrip.getBoundingClientRect().width,n=(a.carouselItem.getBoundingClientRect().width+20)*("right"===e?-1:1)+(a.filmstrip.style.transform?Number(a.filmstrip.style.transform.split(/\.*translateX\((.*)px\)/i)[1]):0);n>0&&(n=0),n<-1*t&&(n=-1*t),a.filmstrip.style.transform="translateX(".concat(n,"px)")}),a.filmstrip=a.element.querySelector(a.options.selectorFilmstrip),a.carouselItem=a.element.querySelector(a.options.selectorCarouselItem),a.element.addEventListener("click",function(e){return a.handleClick(e)}),a}return s(o,m(g,v)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-carousel]",selectorFilmstrip:".".concat(e,"--filmstrip"),selectorScrollRight:"[data-scroll-right]",selectorScrollLeft:"[data-scroll-left]",selectorCarouselBtn:".".concat(e,"--carousel__btn"),selectorCarouselItem:".".concat(e,"--carousel__item")}}}]),o}();i(We,"components",new WeakMap);var Ye=We,Ue=function(e){return Array.prototype.slice.call(e)},Ke=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"showLightbox",function(e){if(!e.detail.launchingElement.dataset.carouselItemIndex)throw new Error("launchingElement must have carouselItemIndex data attribute to indicated what item to display");a.activeIndex=e.detail.launchingElement.dataset.carouselItemIndex,a.updateSlide()}),i(u(u(a)),"handleClick",function(e){e.target.matches(a.options.selectorScrollRight)&&a.activeIndex<a.totalSlides&&(a.activeIndex++,a.updateSlide()),e.target.matches(a.options.selectorScrollLeft)&&a.activeIndex>0&&(a.activeIndex--,a.updateSlide())}),i(u(u(a)),"updateSlide",function(){var e=Ue(a.element.querySelectorAll(a.options.selectorLightboxItem));if(a.activeIndex<0||a.activeIndex>=e.length)throw new RangeError("carouselItemIndex data attribute must be in range of lightbox items length");e.forEach(function(e){return e.classList.remove(a.options.classActiveItem)}),e[a.activeIndex].classList.add(a.options.classActiveItem)}),a.activeIndex=a.element.dataset.lightboxIndex,a.totalSlides=a.element.querySelectorAll(a.options.selectorLightboxItem).length-1,a.updateSlide(),a.element.addEventListener("click",function(e){return a.handleClick(e)}),a.element.parentNode.addEventListener("modal-beingshown",function(e){return a.showLightbox(e)}),a}return s(o,m(g,v)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-lightbox]",selectorScrollRight:"[data-scroll-right]",selectorScrollLeft:"[data-scroll-left]",selectorLightboxItem:".".concat(e,"--lightbox__item"),classActiveItem:"".concat(e,"--lightbox__item--shown")}}}]),o}();i(Ke,"components",new WeakMap);var Ge=Ke,ze=function(e){function o(e,t){var a;return n(this,o),(a=d(this,c(o).call(this,e,t)))._initCodeSnippet(),a.element.querySelector(a.options.classExpandBtn).addEventListener("click",function(e){return a._handleClick(e)}),a}return s(o,m(g,v,b)),a(o,[{key:"_handleClick",value:function(){var e=this.element.querySelector(this.options.classExpandText);this.element.classList.toggle(this.options.classExpanded),this.element.classList.contains(this.options.classExpanded)?e.textContent=e.getAttribute(this.options.attribShowLessText):e.textContent=e.getAttribute(this.options.attribShowMoreText)}},{key:"_initCodeSnippet",value:function(){var e=this.element.querySelector(this.options.classExpandText);if(!e)throw new TypeError("Cannot find the expand button.");e.textContent=e.getAttribute(this.options.attribShowMoreText),this.element.offsetHeight<this.options.minHeight&&this.element.classList.add(this.options.classHideExpand)}}],[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-code-snippet]",attribShowMoreText:"data-show-more-text",attribShowLessText:"data-show-less-text",minHeight:288,classExpanded:"".concat(e,"--snippet--expand"),classExpandBtn:".".concat(e,"--snippet-btn--expand"),classExpandText:".".concat(e,"--snippet-btn--text"),classHideExpand:"".concat(e,"--snippet-btn--expand--hide")}}}]),o}();i(ze,"components",new WeakMap);var Je=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_setIconVisibility",function(e){var t=e.iconVisibilityOn,n=e.iconVisibilityOff,o=e.passwordIsVisible,a=e.selectorPasswordVisibilityButton;if(o)return t.setAttribute("hidden",!0),n.removeAttribute("hidden"),void a.setAttribute("aria-label","Hide password");t.removeAttribute("hidden"),n.setAttribute("hidden",!0),a.setAttribute("aria-label","Show password")}),i(u(u(a)),"_toggle",function(e){var t=e.element,n=e.button;t.classList.toggle(a.options.passwordIsVisible);var o=t.classList.contains(a.options.passwordIsVisible),i=n.querySelector(a.options.svgIconVisibilityOn),r=n.querySelector(a.options.svgIconVisibilityOff),s=t.querySelector(a.options.selectorPasswordField),c=t.querySelector(a.options.selectorPasswordVisibilityButton);a._setIconVisibility({iconVisibilityOn:i,iconVisibilityOff:r,passwordIsVisible:o,selectorPasswordVisibilityButton:c}),s.type=o?"text":"password"}),a.manage(y(a.element,"click",function(t){var n=C(t,a.options.selectorPasswordVisibilityButton);n&&a._toggle({element:e,button:n})})),a}return s(o,m(g,v,b)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-text-input]",selectorPasswordField:".".concat(e,"--text-input[data-toggle-password-visibility]"),selectorPasswordVisibilityButton:".".concat(e,"--text-input--password__visibility"),passwordIsVisible:"".concat(e,"--text-input--password-visible"),svgIconVisibilityOn:"svg.".concat(e,"--icon--visibility-on"),svgIconVisibilityOff:"svg.".concat(e,"--icon--visibility-off")}}}]),o}();i(Je,"components",new WeakMap);var Xe=t.prefix,$e=function(e){function t(e,o){var a;return n(this,t),i(u(u(a=d(this,c(t).call(this,e,o)))),"_handleClick",function(e){var t=C(e,a.options.selectorSideNavToggle),n=C(e,a.options.selectorSideNavSubmenu),o=C(e,a.options.selectorSideNavLink);if(t||n||o)if(t)a.changeState(a.isNavExpanded()?a.constructor.state.COLLAPSED:a.constructor.state.EXPANDED);else if(n){var i="true"===n.getAttribute("aria-expanded");n.setAttribute("aria-expanded","".concat(!i))}else if(o){f(a.element.querySelectorAll(a.options.selectorSideNavLinkCurrent)).forEach(function(e){e.classList.remove(a.options.classSideNavItemActive,a.options.classSideNavLinkCurrent),e.removeAttribute("aria-current")}),o.classList.add(a.options.classSideNavLinkCurrent);var r=o.closest(a.options.selectorSideNavItem);r&&r.classList.add(a.options.classSideNavItemActive)}}),a.manage(y(e,"click",a._handleClick)),a}return s(t,m(g,v,b)),a(t,[{key:"isNavExpanded",value:function(){return this.element.classList.contains(this.options.classSideNavExpanded)}},{key:"changeState",value:function(e){this.element.classList.toggle(this.options.classSideNavExpanded,e===this.constructor.state.EXPANDED)}}]),t}();i($e,"components",new WeakMap),i($e,"state",{EXPANDED:"expanded",COLLAPSED:"collapsed"}),i($e,"options",{selectorInit:"[data-side-nav]",selectorSideNavToggle:".".concat(Xe,"--side-nav__toggle"),selectorSideNavSubmenu:".".concat(Xe,"--side-nav__submenu"),selectorSideNavItem:".".concat(Xe,"--side-nav__item"),selectorSideNavLink:".".concat(Xe,"--side-nav__link"),selectorSideNavLinkCurrent:'[aria-current="page"],.'.concat(Xe,"--side-nav__link--current,.").concat(Xe,"--side-nav__item--active"),classSideNavExpanded:"".concat(Xe,"--side-nav--expanded"),classSideNavItemActive:"".concat(Xe,"--side-nav__item--active"),classSideNavLinkCurrent:"".concat(Xe,"--side-nav__link--current")});var Ze=function(){return Array.prototype.forEach}(),Qe=function(e){return Array.prototype.slice.call(e)},et=function(e){function o(e,t){var a;n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"_getAction",function(e){if(C(e,a.options.selectorFlyoutMenu))return a.constructor.actions.DELEGATE_TO_FLYOUT_MENU;switch(e.type){case"keydown":return{32:a.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS,13:a.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS,27:a.constructor.actions.CLOSE_SUBMENU}[e.which];case"click":return C(e,a.options.selectorItem)?a.constructor.actions.CLOSE_SUBMENU:null;case"blur":case"focusout":return a.element.contains(e.relatedTarget)?null:a.constructor.actions.CLOSE_SUBMENU;case"mouseenter":return a.constructor.actions.OPEN_SUBMENU;case"mouseleave":return a.constructor.actions.CLOSE_SUBMENU;default:return null}}),i(u(u(a)),"_getNewState",function(e){var t="true"===a.element.querySelector(a.options.selectorTrigger).getAttribute(a.options.attribExpanded);switch(e){case a.constructor.actions.CLOSE_SUBMENU:return!1;case a.constructor.actions.OPEN_SUBMENU:return!0;case a.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS:return!t;default:return t}}),i(u(u(a)),"_setState",function(e){var t=e.shouldBeExpanded,n=e.shouldFocusOnOpen;a.element.querySelector(a.options.selectorTrigger).setAttribute(a.options.attribExpanded,t),Ze.call(a.element.querySelectorAll(a.options.selectorItem),function(e){e.tabIndex=t?0:-1}),t&&n&&a.element.querySelector(a.options.selectorItem).focus()}),i(u(u(a)),"getCurrentNavigation",function(){var e=a.element.ownerDocument.activeElement;return e.nodeType===Node.ELEMENT_NODE&&e.matches(a.options.selectorItem)?e:null}),i(u(u(a)),"navigate",function(e){for(var t=Qe(a.element.querySelectorAll(a.options.selectorItem)),n=a.getCurrentNavigation()||a.element.querySelector(a.options.selectorItemSelected),o=function(n){var o=Math.max(t.indexOf(n)+e,-1);return t[function(e,t){return e+(e>=0?0:t)}(function(e,t){return e-(e<t?0:t)}(o,t.length),t.length)]},i=o(n);i&&i!==n;i=o(i))if(!i.matches(a.options.selectorItemHidden)&&!i.parentNode.matches(a.options.selectorItemHidden)&&!i.matches(a.options.selectorItemSelected)){i.focus();break}}),i(u(u(a)),"_handleEvent",function(e){if(a.element.querySelector(a.options.selectorTrigger)){var t=a._getAction(e);if(t){var n=a._getNewState(t);a._setState({shouldBeExpanded:n})}}}),i(u(u(a)),"_handleKeyDown",function(e){var t=a.element.querySelector(a.options.selectorTrigger);if(t){var n=a._getAction(e);switch(32===e.which&&e.preventDefault(),n){case a.constructor.actions.DELEGATE_TO_FLYOUT_MENU:break;case a.constructor.actions.CLOSE_SUBMENU:var o=a._getNewState(n);a._setState({shouldBeExpanded:o});break;case a.constructor.actions.TOGGLE_SUBMENU_WITH_FOCUS:var i=a._getNewState(n);a._setState({shouldBeExpanded:i,shouldFocusOnOpen:!0});break;default:if("true"===t.getAttribute(a.options.attribExpanded)){var r={38:a.constructor.NAVIGATE.BACKWARD,40:a.constructor.NAVIGATE.FORWARD}[e.which];switch(e.which){case 35:e.preventDefault();var s=a.element.querySelectorAll(a.options.selectorItem),c=s[s.length-1];c&&c.focus();break;case 36:e.preventDefault();var l=h(a.element.querySelectorAll(a.options.selectorItem),1)[0];l&&l.focus();break;case 38:case 40:a.navigate(r),e.preventDefault()}}}}});var r="onfocusout"in window;return a.manage(y(a.element,r?"focusout":"blur",a._handleEvent,!r)),a.manage(y(a.element,"mouseenter",a._handleEvent)),a.manage(y(a.element,"mouseleave",a._handleEvent)),a.manage(y(a.element,"click",a._handleEvent)),a.manage(y(a.element,"keydown",a._handleKeyDown)),a}return s(o,m(g,v,b)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-header-submenu]",selectorTrigger:".".concat(e,"--header__menu-title"),selectorItem:".".concat(e,"--header__menu .").concat(e,"--header__menu-item"),attribExpanded:"aria-expanded"}}}]),o}();i(et,"components",new WeakMap),i(et,"actions",{CLOSE_SUBMENU:"CLOSE_SUBMENU",OPEN_SUBMENU:"OPEN_SUBMENU",TOGGLE_SUBMENU_WITH_FOCUS:"TOGGLE_SUBMENU_WITH_FOCUS",DELEGATE_TO_FLYOUT_MENU:"DELEGATE_TO_FLYOUT_MENU"}),i(et,"NAVIGATE",{BACKWARD:-1,FORWARD:1});var tt=function(e){return Array.prototype.slice.call(e)},nt=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"getCurrentNavigation",function(){var e=a.element.ownerDocument.activeElement.closest(a.options.selectorSubmenu);return e&&e.nodeType===Node.ELEMENT_NODE?e.querySelector(a.options.selectorSubmenuLink):null}),i(u(u(a)),"navigate",function(e){var t,n,o=tt(a.element.querySelectorAll(a.options.selectorSubmenuLink)),i=a.getCurrentNavigation();(t=i,n=Math.max(o.indexOf(t)+e,-1),o[function(e,t){return e+(e>=0?0:t)}(function(e,t){return e-(e<t?0:t)}(n,o.length),o.length)]).focus()}),i(u(u(a)),"_handleKeyDown",function(e){var t={37:a.constructor.NAVIGATE.BACKWARD,39:a.constructor.NAVIGATE.FORWARD}[e.which];t&&a.navigate(t)}),a.manage(y(a.element,"keydown",a._handleKeyDown)),a}return s(o,m(g,v,b)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-header-nav]",selectorNavKind:"[data-header-nav-kind]",selectorSubmenu:".".concat(e,"--header__submenu"),selectorSubmenuLink:".".concat(e,"--header__menu-title"),selectorSubmenuItem:".".concat(e,"--header__menu-title > .").concat(e,"--header__menu-item")}}}]),o}();i(nt,"components",new WeakMap),i(nt,"NAVIGATE",{BACKWARD:-1,FORWARD:1});var ot=function(e){function o(){var e,t;n(this,o);for(var a=arguments.length,r=new Array(a),s=0;s<a;s++)r[s]=arguments[s];return i(u(u(t=d(this,(e=c(o)).call.apply(e,[this].concat(r))))),"createdByLauncher",function(e){var n=!t.element.hasAttribute("hidden")?"collapsed":"expanded";t.triggerButton=e.delegateTarget,t.changeState(n)}),i(u(u(t)),"shouldStateBeChanged",function(e){return"expanded"===e===t.element.hasAttribute("hidden")}),i(u(u(t)),"_changeState",function(e,n){if(Y(t.element,"hidden","expanded"!==e),t.triggerButton){if("expanded"===e){var o=t.element.querySelector(t.options.selectorFocusableMenuItem);o&&o.focus()}var a="expanded"===e?t.triggerButton.getAttribute(t.options.attribLabelCollapse):t.triggerButton.getAttribute(t.options.attribLabelExpand);t.triggerButton.classList.toggle(t.options.classNavigationMenuPanelHeaderActionActive,"expanded"===e),t.triggerButton.setAttribute("aria-label",a),t.triggerButton.setAttribute("title",a)}n()}),t}return s(o,m(g,j,M,b,k)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{initEventNames:["click"],eventBeforeExpanded:"navigation-menu-being-expanded",eventAfterExpanded:"navigation-menu-expanded",eventBeforeCollapsed:"navigation-menu-being-collapsed",eventAfterCollapsed:"navigation-menu-collapsed",selectorFocusableMenuItem:".".concat(e,"--navigation__category-toggle, .").concat(e,"--navigation-link"),classNavigationMenuPanelHeaderActionActive:"".concat(e,"--header__action--active"),attribLabelExpand:"data-navigation-menu-panel-label-expand",attribLabelCollapse:"data-navigation-menu-panel-label-collapse"}}}]),o}();i(ot,"components",new WeakMap);var at=function(e){function o(e,t){var a;n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"getCurrentNavigation",function(){return a.element.ownerDocument.activeElement}),i(u(u(a)),"navigate",function(e){var t,n,o=f(a.element.querySelectorAll(a.options.selectorFocusableNavItems)),i=a.getCurrentNavigation();(t=i,n=Math.max(o.indexOf(t)+e,-1),o[function(e,t){return e+(e>=0?0:t)}(function(e,t){return e-(e<t?0:t)}(n,o.length),o.length)]).focus()}),i(u(u(a)),"_handleKeyDown",function(e){var t=!a.element.hasAttribute("hidden");if(27===e.which&&t)return a.changeState("collapsed"),void(a.triggerButton&&a.triggerButton.focus());var n=C(e,a.options.selectorShellNavSubmenu),o=C(e,a.options.selectorShellNavLink);if(n||o){var i={38:a.constructor.NAVIGATE.BACKWARD,40:a.constructor.NAVIGATE.FORWARD}[e.which];i&&(e.preventDefault(),a.navigate(i))}}),i(u(u(a)),"_handleFocusOut",function(e){var t=a.element.contains(e.relatedTarget)||e.relatedTarget===a.triggerButton||!e.relatedTarget;a.element.contains(e.target)&&!t&&(a.changeState("collapsed"),a.triggerButton.focus())}),i(u(u(a)),"changeNavSubmenuState",function(e){var t=e.matchesNavSubmenu,n=e.shouldBeCollapsed,o=t.closest(a.options.selectorShellNavCategory);o&&(t.setAttribute("aria-expanded",!n),o.classList.toggle(a.options.classShellNavCategoryExpanded),Array.prototype.forEach.call(o.querySelectorAll(a.options.selectorShellNavLink),function(e){e.tabIndex=n?-1:0}))}),i(u(u(a)),"_handleClick",function(e){var t=C(e,a.options.selectorShellNavSubmenu),n=C(e,a.options.selectorShellNavLink),o=C(e,a.options.selectorShellNestedNavLink);if(t||n){if(o)return f(a.element.querySelectorAll(a.options.selectorShellNavLinkCurrent)).forEach(function(e){e.classList.remove(a.options.classShellNavItemActive,a.options.classShellNavLinkCurrent)}),void o.closest(a.options.selectorShellNavNestedCategory).classList.add(a.options.classShellNavItemActive);if(t){var i="true"===t.getAttribute("aria-expanded");a.changeNavSubmenuState({matchesNavSubmenu:t,isExpanded:i})}else n&&(f(a.element.querySelectorAll(a.options.selectorShellNavLinkCurrent)).forEach(function(e){e.classList.remove(a.options.classShellNavItemActive,a.options.classShellNavLinkCurrent)}),n.closest(a.options.selectorShellNavItem).classList.add(a.options.classShellNavItemActive))}}),a.manage(y(e,"click",a._handleClick)),a.manage(y(e,"keydown",a._handleKeyDown)),a.manage(y(a.element.ownerDocument,"click",function(e){a.element.hasAttribute("hidden")||a.triggerButton.contains(e.target)||a.element.contains(e.target)||a.changeState("collapsed")}));var r="onfocusout"in window;return a.manage(y(a.element,r?"focusout":"blur",a._handleFocusOut,!r)),a}return s(o,ot),a(o,null,[{key:"options",get:function(){var e=t.prefix;return Object.assign(Object.create(ot.options),{selectorInit:"[data-navigation-menu]",attribInitTarget:"data-navigation-menu-target",selectorShellNavSubmenu:".".concat(e,"--navigation__category-toggle"),selectorShellNavLink:".".concat(e,"--navigation-link"),selectorShellNestedNavLink:".".concat(e,"--navigation__category-item > a.").concat(e,"--navigation-link"),selectorShellNavLinkCurrent:".".concat(e,"--navigation-item--active,.").concat(e,"--navigation__category-item--active"),selectorFocusableNavItems:"\n        .".concat(e,"--navigation__category-toggle,\n        .").concat(e,"--navigation-item > .").concat(e,"--navigation-link,\n        .").concat(e,'--navigation-link[tabindex="0"]\n      '),selectorShellNavItem:".".concat(e,"--navigation-item"),selectorShellNavCategory:".".concat(e,"--navigation__category"),selectorShellNavNestedCategory:".".concat(e,"--navigation__category-item"),classShellNavItemActive:"".concat(e,"--navigation-item--active"),classShellNavLinkCurrent:"".concat(e,"--navigation__category-item--active"),classShellNavCategoryExpanded:"".concat(e,"--navigation__category--expanded")})}}]),o}();i(at,"components",new WeakMap),i(at,"NAVIGATE",{BACKWARD:-1,FORWARD:1});var it=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"current",""),i(u(u(a)),"triggerButtonIds",new Set),i(u(u(a)),"_handleFocusOut",function(e){if(!a.element.contains(e.relatedTarget)){var t=a.element.ownerDocument.getElementById(a.current);t&&e.relatedTarget&&!e.relatedTarget.matches(a.options.selectorFloatingMenus)&&t.focus()}}),i(u(u(a)),"_handleKeyDown",function(e){var t=!a.element.hasAttribute("hidden");if(27===e.which&&t){var n=a.current;a.changeState(a.constructor.SELECT_NONE),a.element.ownerDocument.getElementById(n).focus()}}),i(u(u(a)),"createdByLauncher",function(e){var t=a.element.classList.contains(a.options.classProductSwitcherExpanded),n=e.delegateTarget;n.id||(n.id="__carbon-product-switcher-launcher-".concat(Math.random().toString(36).substr(2)));var o=n.id;a.changeState(t&&a.current===o?a.constructor.SELECT_NONE:o)}),i(u(u(a)),"shouldStateBeChanged",function(e){return a.current!==e}),i(u(u(a)),"_changeState",function(e,t){a.element.classList.toggle(a.options.classProductSwitcherExpanded,e!==a.constructor.SELECT_NONE),a.current=e,a.current!==a.constructor.SELECT_NONE&&a.triggerButtonIds.add(a.current),a.triggerButtonIds.forEach(function(e){var t=a.element.ownerDocument.getElementById(e),n=t.getAttribute(a.options.attribLabelExpand);t.classList.remove(a.options.classNavigationMenuPanelHeaderActionActive),t.setAttribute("aria-label",n),t.setAttribute("title",n)});var n=a.element.ownerDocument.getElementById(a.current);if(n){var o=n.getAttribute(a.options.attribLabelCollapse);n.classList.toggle(a.options.classNavigationMenuPanelHeaderActionActive),n.setAttribute("aria-label",o),n.setAttribute("title",o)}e!==a.constructor.SELECT_NONE?(a.element.setAttribute("tabindex","0"),a.element.focus()):a.element.setAttribute("tabindex","-1"),t()}),a.manage(y(e,"keydown",a._handleKeyDown)),a.manage(function(e,t,n){var o,a="onfocusout"in window,i={focus:a?"focusin":"focus",blur:a?"focusout":"blur"}[t];if(!i)throw new Error("Unsupported event!");var r=function(){o=!0,requestAnimationFrame(function(){o=!1})},s=function(e){o||n(e)};return e.ownerDocument.addEventListener("mousedown",r),e.addEventListener(i,s,!a),{release:function(){return s&&(e.removeEventListener(i,s,!a),s=null),r&&(e.ownerDocument.removeEventListener("mousedown",r),r=null),null}}}(e,"blur",a._handleFocusOut)),a}return s(o,ot),a(o,[{key:"release",value:function(){return this.triggerButtonIds.clear(),p(c(o.prototype),"release",this).call(this)}}],[{key:"options",get:function(){var e=t.prefix;return Object.assign(Object.create(ot.options),{selectorInit:"[data-product-switcher]",selectorFloatingMenus:"\n        .".concat(e,"--overflow-menu-options,\n        .").concat(e,"--overflow-menu-options *,\n        .").concat(e,"--tooltip,\n        .").concat(e,"--tooltip *,\n        .flatpicker-calendar,\n        .flatpicker-calendar *\n        "),attribInitTarget:"data-product-switcher-target",classProductSwitcherExpanded:"".concat(e,"--panel--expanded")})}}]),o}();i(it,"SELECT_NONE","__carbon-product-switcher-launcher-NONE"),i(it,"components",new WeakMap);var rt=function(e){function o(e,t){var a;return n(this,o),i(u(u(a=d(this,c(o).call(this,e,t)))),"getActivePageNumber",function(){var e,t=a.element.querySelector(a.options.selectorPageActive);return t&&(e=Number(t.getAttribute(a.options.attribPage))),e}),i(u(u(a)),"clearActivePage",function(e){var t=a.element.querySelectorAll(a.options.selectorPageButton),n=a.element.querySelector(a.options.selectorPageSelect);if(Array.prototype.forEach.call(t,function(e){e.classList.remove(a.options.classActive,a.options.classDisabled),e.removeAttribute(a.options.attribActive),e.removeAttribute("aria-disabled"),e.removeAttribute("aria-current")}),n){n.removeAttribute("aria-current");var o=n.options;Array.prototype.forEach.call(o,function(e){e.removeAttribute(a.options.attribActive)}),e.target.matches(a.options.selectorPageSelect)||(n.classList.remove(a.options.classActive),n.value="")}}),i(u(u(a)),"handleClick",function(e){if(!0==!e.target.getAttribute("aria-disabled")){var t=a.getActivePageNumber(),n=a.element.querySelectorAll(a.options.selectorPageElement),o=a.element.querySelector(a.options.selectorPageSelect);a.clearActivePage(e),e.target.matches(a.options.selectorPageButton)&&(t=Number(e.target.getAttribute(a.options.attribPage))),e.target.matches(a.options.selectorPagePrevious)&&(t-=1),e.target.matches(a.options.selectorPageNext)&&(t+=1);var i=n[t-1];i.setAttribute(a.options.attribActive,!0),"OPTION"===i.tagName?(o.value=a.getActivePageNumber(),o.classList.add(a.options.classActive),o.setAttribute("aria-current","page")):(i.classList.add(a.options.classActive,a.options.classDisabled),i.setAttribute("aria-disabled",!0),i.setAttribute("aria-current","page")),a.setPrevNextStates()}}),i(u(u(a)),"handleSelectChange",function(e){a.clearActivePage(e);var t=a.element.querySelector(a.options.selectorPageSelect).options;t[t.selectedIndex].setAttribute(a.options.attribActive,!0),e.target.setAttribute("aria-current","page"),e.target.classList.add(a.options.classActive),a.setPrevNextStates()}),i(u(u(a)),"setPrevNextStates",function(){var e=a.element.querySelectorAll(a.options.selectorPageElement).length,t=a.element.querySelector(a.options.selectorPagePrevious),n=a.element.querySelector(a.options.selectorPageNext);t&&(a.getActivePageNumber()<=1?(t.setAttribute("aria-disabled",!0),t.classList.add(a.options.classDisabled)):(t.removeAttribute("aria-disabled"),t.classList.remove(a.options.classDisabled))),n&&(a.getActivePageNumber()>=e?(n.setAttribute("aria-disabled",!0),n.classList.add(a.options.classDisabled)):(n.removeAttribute("aria-disabled"),n.classList.remove(a.options.classDisabled)))}),a.manage(y(a.element,"click",function(e){return a.handleClick(e)})),a.manage(y(a.element,"change",function(e){e.target.matches(a.options.selectorPageSelect)&&a.handleSelectChange(e)})),a}return s(o,m(g,v,b)),a(o,null,[{key:"options",get:function(){var e=t.prefix;return{selectorInit:"[data-pagination-nav]",selectorPageElement:"[data-page]",selectorPageButton:"[data-page-button]",selectorPagePrevious:"[data-page-previous]",selectorPageNext:"[data-page-next]",selectorPageSelect:"[data-page-select]",selectorPageActive:'[data-page-active="true"]',attribPage:"data-page",attribActive:"data-page-active",classActive:"".concat(e,"--pagination-nav__page--active"),classDisabled:"".concat(e,"--pagination-nav__page--disabled")}}}]),o}();i(rt,"components",new WeakMap);var st=Object.freeze({Checkbox:S,FileUploader:L,FabButton:A,ContentSwitcher:N,Tab:T,OverflowMenu:R,Modal:V,Loading:W,InlineLoading:U,Dropdown:G,NumberInput:z,DataTable:$,DataTableV2:Q,DatePicker:ae,LeftNav:se,ProfileSwitcher:le,Pagination:ue,Search:pe,Accordion:he,CopyButton:fe,Notification:me,Toolbar:ge,Tooltip:Pe,ProgressIndicator:Be,FloatingMenu:P,StructuredList:Re,Slider:je,Tile:Ve,Carousel:Ye,Lightbox:Ge,CodeSnippet:ze,TextInput:Je,SideNav:$e,HeaderSubmenu:et,HeaderNav:nt,NavigationMenu:at,ProductSwitcher:it,PaginationNav:rt}),ct=st,lt=function(){var e=Object.keys(ct).map(function(e){return ct[e]}).filter(function(e){return"function"==typeof e.init});t.disableAutoInit||e.forEach(function(e){e.init()})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",lt):setTimeout(lt,0);var ut=Array.prototype.forEach,dt=function(e,t,n,o){e.forEach(function(e){ut.call(e.addedNodes,function(e){e.nodeType===Node.ELEMENT_NODE&&n.forEach(function(t){t.init(e,o)})}),ut.call(e.removedNodes,function(e){e.nodeType===Node.ELEMENT_NODE&&t.forEach(function(t){if(e.matches(t.options.selectorInit)){var n=t.components.get(e);n&&n.release()}else ut.call(e.querySelectorAll(t.options.selectorInit),function(e){var n=t.components.get(e);n&&n.release()})})})})};return e.watch=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(e.nodeType!==Node.ELEMENT_NODE&&e.nodeType!==Node.DOCUMENT_NODE)throw new TypeError("DOM document or DOM element should be given to watch for DOM node to create/release components.");var n=Object.keys(st).map(function(e){return st[e]}).filter(function(e){return"function"==typeof e.init}),o=n.map(function(n){return n.init(e,t)}).filter(Boolean),a=n.filter(function(e){return!e.forLazyInit}),i=new MutationObserver(function(e){dt(e,n,a,t)});return i.observe(e,{childList:!0,subtree:!0}),{release:function(){for(var e=o.pop();e;e=o.pop())e.release();i&&(i.disconnect(),i=null)}}},e.settings=t,e.Checkbox=S,e.FileUploader=L,e.FabButton=A,e.ContentSwitcher=N,e.Tab=T,e.OverflowMenu=R,e.Modal=V,e.Loading=W,e.InlineLoading=U,e.Dropdown=G,e.NumberInput=z,e.DataTable=$,e.DataTableV2=Q,e.DatePicker=ae,e.LeftNav=se,e.ProfileSwitcher=le,e.Pagination=ue,e.Search=pe,e.Accordion=he,e.CopyButton=fe,e.Notification=me,e.Toolbar=ge,e.Tooltip=Pe,e.ProgressIndicator=Be,e.FloatingMenu=P,e.StructuredList=Re,e.Slider=je,e.Tile=Ve,e.Carousel=Ye,e.Lightbox=Ge,e.CodeSnippet=ze,e.TextInput=Je,e.SideNav=$e,e.HeaderSubmenu=et,e.HeaderNav=nt,e.NavigationMenu=at,e.ProductSwitcher=it,e.PaginationNav=rt,e}({});
\ No newline at end of file

From 3b64d3f79a6e928e81dd8e07d288d0c6e923aafc Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 15:08:46 -0500
Subject: [PATCH 6/7] chore: update snapshots

---
 .../__tests__/__snapshots__/grid-test.js.snap | 251 ++++++++++++++++++
 1 file changed, 251 insertions(+)

diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index 87fcf8842dbb..98209f33be83 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -132,6 +132,10 @@ em {
   .bx--grid--condensed .bx--col {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col,
+  .bx--grid--narrow .bx--col {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm-0 {
   width: 100%;
@@ -141,6 +145,10 @@ em {
   .bx--grid--condensed .bx--col-sm-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm-0,
+  .bx--grid--narrow .bx--col-sm-0 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm-1 {
   width: 100%;
@@ -150,6 +158,10 @@ em {
   .bx--grid--condensed .bx--col-sm-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm-1,
+  .bx--grid--narrow .bx--col-sm-1 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm-2 {
   width: 100%;
@@ -159,6 +171,10 @@ em {
   .bx--grid--condensed .bx--col-sm-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm-2,
+  .bx--grid--narrow .bx--col-sm-2 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm-3 {
   width: 100%;
@@ -168,6 +184,10 @@ em {
   .bx--grid--condensed .bx--col-sm-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm-3,
+  .bx--grid--narrow .bx--col-sm-3 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm-4 {
   width: 100%;
@@ -177,6 +197,10 @@ em {
   .bx--grid--condensed .bx--col-sm-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm-4,
+  .bx--grid--narrow .bx--col-sm-4 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-sm,
 .bx--col-sm--auto {
@@ -190,6 +214,13 @@ em {
   .bx--col-sm--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-sm,
+  .bx--grid--narrow .bx--col-sm, .bx--row--narrow
+  .bx--col-sm--auto,
+  .bx--grid--narrow
+  .bx--col-sm--auto {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col,
 .bx--col-sm {
@@ -246,6 +277,10 @@ em {
   .bx--grid--condensed .bx--col-md-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-0,
+  .bx--grid--narrow .bx--col-md-0 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-1 {
   width: 100%;
@@ -255,6 +290,10 @@ em {
   .bx--grid--condensed .bx--col-md-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-1,
+  .bx--grid--narrow .bx--col-md-1 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-2 {
   width: 100%;
@@ -264,6 +303,10 @@ em {
   .bx--grid--condensed .bx--col-md-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-2,
+  .bx--grid--narrow .bx--col-md-2 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-3 {
   width: 100%;
@@ -273,6 +316,10 @@ em {
   .bx--grid--condensed .bx--col-md-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-3,
+  .bx--grid--narrow .bx--col-md-3 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-4 {
   width: 100%;
@@ -282,6 +329,10 @@ em {
   .bx--grid--condensed .bx--col-md-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-4,
+  .bx--grid--narrow .bx--col-md-4 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-5 {
   width: 100%;
@@ -291,6 +342,10 @@ em {
   .bx--grid--condensed .bx--col-md-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-5,
+  .bx--grid--narrow .bx--col-md-5 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-6 {
   width: 100%;
@@ -300,6 +355,10 @@ em {
   .bx--grid--condensed .bx--col-md-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-6,
+  .bx--grid--narrow .bx--col-md-6 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-7 {
   width: 100%;
@@ -309,6 +368,10 @@ em {
   .bx--grid--condensed .bx--col-md-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-7,
+  .bx--grid--narrow .bx--col-md-7 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md-8 {
   width: 100%;
@@ -318,6 +381,10 @@ em {
   .bx--grid--condensed .bx--col-md-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md-8,
+  .bx--grid--narrow .bx--col-md-8 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-md,
 .bx--col-md--auto {
@@ -331,6 +398,13 @@ em {
   .bx--col-md--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-md,
+  .bx--grid--narrow .bx--col-md, .bx--row--narrow
+  .bx--col-md--auto,
+  .bx--grid--narrow
+  .bx--col-md--auto {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 @media (min-width: 42rem) {
   .bx--col,
@@ -402,6 +476,10 @@ em {
   .bx--grid--condensed .bx--col-lg-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-0,
+  .bx--grid--narrow .bx--col-lg-0 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-1 {
   width: 100%;
@@ -411,6 +489,10 @@ em {
   .bx--grid--condensed .bx--col-lg-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-1,
+  .bx--grid--narrow .bx--col-lg-1 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-2 {
   width: 100%;
@@ -420,6 +502,10 @@ em {
   .bx--grid--condensed .bx--col-lg-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-2,
+  .bx--grid--narrow .bx--col-lg-2 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-3 {
   width: 100%;
@@ -429,6 +515,10 @@ em {
   .bx--grid--condensed .bx--col-lg-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-3,
+  .bx--grid--narrow .bx--col-lg-3 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-4 {
   width: 100%;
@@ -438,6 +528,10 @@ em {
   .bx--grid--condensed .bx--col-lg-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-4,
+  .bx--grid--narrow .bx--col-lg-4 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-5 {
   width: 100%;
@@ -447,6 +541,10 @@ em {
   .bx--grid--condensed .bx--col-lg-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-5,
+  .bx--grid--narrow .bx--col-lg-5 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-6 {
   width: 100%;
@@ -456,6 +554,10 @@ em {
   .bx--grid--condensed .bx--col-lg-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-6,
+  .bx--grid--narrow .bx--col-lg-6 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-7 {
   width: 100%;
@@ -465,6 +567,10 @@ em {
   .bx--grid--condensed .bx--col-lg-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-7,
+  .bx--grid--narrow .bx--col-lg-7 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-8 {
   width: 100%;
@@ -474,6 +580,10 @@ em {
   .bx--grid--condensed .bx--col-lg-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-8,
+  .bx--grid--narrow .bx--col-lg-8 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-9 {
   width: 100%;
@@ -483,6 +593,10 @@ em {
   .bx--grid--condensed .bx--col-lg-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-9,
+  .bx--grid--narrow .bx--col-lg-9 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-10 {
   width: 100%;
@@ -492,6 +606,10 @@ em {
   .bx--grid--condensed .bx--col-lg-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-10,
+  .bx--grid--narrow .bx--col-lg-10 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-11 {
   width: 100%;
@@ -501,6 +619,10 @@ em {
   .bx--grid--condensed .bx--col-lg-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-11,
+  .bx--grid--narrow .bx--col-lg-11 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg-12 {
   width: 100%;
@@ -510,6 +632,10 @@ em {
   .bx--grid--condensed .bx--col-lg-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg-12,
+  .bx--grid--narrow .bx--col-lg-12 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-lg,
 .bx--col-lg--auto {
@@ -523,6 +649,13 @@ em {
   .bx--col-lg--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-lg,
+  .bx--grid--narrow .bx--col-lg, .bx--row--narrow
+  .bx--col-lg--auto,
+  .bx--grid--narrow
+  .bx--col-lg--auto {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 @media (min-width: 66rem) {
   .bx--col,
@@ -618,6 +751,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-0,
+  .bx--grid--narrow .bx--col-xlg-0 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-1 {
   width: 100%;
@@ -627,6 +764,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-1,
+  .bx--grid--narrow .bx--col-xlg-1 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-2 {
   width: 100%;
@@ -636,6 +777,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-2,
+  .bx--grid--narrow .bx--col-xlg-2 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-3 {
   width: 100%;
@@ -645,6 +790,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-3,
+  .bx--grid--narrow .bx--col-xlg-3 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-4 {
   width: 100%;
@@ -654,6 +803,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-4,
+  .bx--grid--narrow .bx--col-xlg-4 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-5 {
   width: 100%;
@@ -663,6 +816,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-5,
+  .bx--grid--narrow .bx--col-xlg-5 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-6 {
   width: 100%;
@@ -672,6 +829,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-6,
+  .bx--grid--narrow .bx--col-xlg-6 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-7 {
   width: 100%;
@@ -681,6 +842,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-7,
+  .bx--grid--narrow .bx--col-xlg-7 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-8 {
   width: 100%;
@@ -690,6 +855,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-8,
+  .bx--grid--narrow .bx--col-xlg-8 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-9 {
   width: 100%;
@@ -699,6 +868,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-9,
+  .bx--grid--narrow .bx--col-xlg-9 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-10 {
   width: 100%;
@@ -708,6 +881,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-10,
+  .bx--grid--narrow .bx--col-xlg-10 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-11 {
   width: 100%;
@@ -717,6 +894,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-11,
+  .bx--grid--narrow .bx--col-xlg-11 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg-12 {
   width: 100%;
@@ -726,6 +907,10 @@ em {
   .bx--grid--condensed .bx--col-xlg-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg-12,
+  .bx--grid--narrow .bx--col-xlg-12 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-xlg,
 .bx--col-xlg--auto {
@@ -739,6 +924,13 @@ em {
   .bx--col-xlg--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-xlg,
+  .bx--grid--narrow .bx--col-xlg, .bx--row--narrow
+  .bx--col-xlg--auto,
+  .bx--grid--narrow
+  .bx--col-xlg--auto {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 @media (min-width: 82rem) {
   .bx--col,
@@ -834,6 +1026,10 @@ em {
   .bx--grid--condensed .bx--col-max-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-0,
+  .bx--grid--narrow .bx--col-max-0 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-1 {
   width: 100%;
@@ -843,6 +1039,10 @@ em {
   .bx--grid--condensed .bx--col-max-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-1,
+  .bx--grid--narrow .bx--col-max-1 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-2 {
   width: 100%;
@@ -852,6 +1052,10 @@ em {
   .bx--grid--condensed .bx--col-max-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-2,
+  .bx--grid--narrow .bx--col-max-2 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-3 {
   width: 100%;
@@ -861,6 +1065,10 @@ em {
   .bx--grid--condensed .bx--col-max-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-3,
+  .bx--grid--narrow .bx--col-max-3 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-4 {
   width: 100%;
@@ -870,6 +1078,10 @@ em {
   .bx--grid--condensed .bx--col-max-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-4,
+  .bx--grid--narrow .bx--col-max-4 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-5 {
   width: 100%;
@@ -879,6 +1091,10 @@ em {
   .bx--grid--condensed .bx--col-max-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-5,
+  .bx--grid--narrow .bx--col-max-5 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-6 {
   width: 100%;
@@ -888,6 +1104,10 @@ em {
   .bx--grid--condensed .bx--col-max-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-6,
+  .bx--grid--narrow .bx--col-max-6 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-7 {
   width: 100%;
@@ -897,6 +1117,10 @@ em {
   .bx--grid--condensed .bx--col-max-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-7,
+  .bx--grid--narrow .bx--col-max-7 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-8 {
   width: 100%;
@@ -906,6 +1130,10 @@ em {
   .bx--grid--condensed .bx--col-max-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-8,
+  .bx--grid--narrow .bx--col-max-8 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-9 {
   width: 100%;
@@ -915,6 +1143,10 @@ em {
   .bx--grid--condensed .bx--col-max-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-9,
+  .bx--grid--narrow .bx--col-max-9 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-10 {
   width: 100%;
@@ -924,6 +1156,10 @@ em {
   .bx--grid--condensed .bx--col-max-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-10,
+  .bx--grid--narrow .bx--col-max-10 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-11 {
   width: 100%;
@@ -933,6 +1169,10 @@ em {
   .bx--grid--condensed .bx--col-max-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-11,
+  .bx--grid--narrow .bx--col-max-11 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max-12 {
   width: 100%;
@@ -942,6 +1182,10 @@ em {
   .bx--grid--condensed .bx--col-max-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max-12,
+  .bx--grid--narrow .bx--col-max-12 {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 .bx--col-max,
 .bx--col-max--auto {
@@ -955,6 +1199,13 @@ em {
   .bx--col-max--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
+  .bx--row--narrow .bx--col-max,
+  .bx--grid--narrow .bx--col-max, .bx--row--narrow
+  .bx--col-max--auto,
+  .bx--grid--narrow
+  .bx--col-max--auto {
+    padding-right: 1rem;
+    padding-left: 0; }
 
 @media (min-width: 99rem) {
   .bx--col,

From 1d2ef015b5f75e9c9a34f8be899a2f9f80eb11f8 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Wed, 22 Jul 2020 17:15:50 -0500
Subject: [PATCH 7/7] chore: update snapshot and sass docs

---
 packages/components/docs/sass.md              |  26 +-
 .../__tests__/__snapshots__/grid-test.js.snap | 265 +-----------------
 packages/elements/docs/sass.md                |  26 +-
 3 files changed, 60 insertions(+), 257 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 47a9318f7a08..a246e317cafd 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -1424,7 +1424,7 @@ Define the properties for a selector assigned to a row in the grid system.
 
 ### ❌carbon--no-gutter [mixin]
 
-Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 classes are useful for dropping the gutter in fluid situations.
 
 <details>
@@ -1438,6 +1438,17 @@ classes are useful for dropping the gutter in fluid situations.
     padding-right: 0;
   }
 
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -1460,14 +1471,23 @@ classes are useful for dropping the gutter in fluid situations.
 
 ### ❌carbon--hang [mixin]
 
-Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }
diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index 98209f33be83..ef3fde7f0b4a 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -132,10 +132,6 @@ em {
   .bx--grid--condensed .bx--col {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col,
-  .bx--grid--narrow .bx--col {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm-0 {
   width: 100%;
@@ -145,10 +141,6 @@ em {
   .bx--grid--condensed .bx--col-sm-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm-0,
-  .bx--grid--narrow .bx--col-sm-0 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm-1 {
   width: 100%;
@@ -158,10 +150,6 @@ em {
   .bx--grid--condensed .bx--col-sm-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm-1,
-  .bx--grid--narrow .bx--col-sm-1 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm-2 {
   width: 100%;
@@ -171,10 +159,6 @@ em {
   .bx--grid--condensed .bx--col-sm-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm-2,
-  .bx--grid--narrow .bx--col-sm-2 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm-3 {
   width: 100%;
@@ -184,10 +168,6 @@ em {
   .bx--grid--condensed .bx--col-sm-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm-3,
-  .bx--grid--narrow .bx--col-sm-3 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm-4 {
   width: 100%;
@@ -197,10 +177,6 @@ em {
   .bx--grid--condensed .bx--col-sm-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm-4,
-  .bx--grid--narrow .bx--col-sm-4 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-sm,
 .bx--col-sm--auto {
@@ -214,13 +190,6 @@ em {
   .bx--col-sm--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-sm,
-  .bx--grid--narrow .bx--col-sm, .bx--row--narrow
-  .bx--col-sm--auto,
-  .bx--grid--narrow
-  .bx--col-sm--auto {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col,
 .bx--col-sm {
@@ -277,10 +246,6 @@ em {
   .bx--grid--condensed .bx--col-md-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-0,
-  .bx--grid--narrow .bx--col-md-0 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-1 {
   width: 100%;
@@ -290,10 +255,6 @@ em {
   .bx--grid--condensed .bx--col-md-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-1,
-  .bx--grid--narrow .bx--col-md-1 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-2 {
   width: 100%;
@@ -303,10 +264,6 @@ em {
   .bx--grid--condensed .bx--col-md-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-2,
-  .bx--grid--narrow .bx--col-md-2 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-3 {
   width: 100%;
@@ -316,10 +273,6 @@ em {
   .bx--grid--condensed .bx--col-md-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-3,
-  .bx--grid--narrow .bx--col-md-3 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-4 {
   width: 100%;
@@ -329,10 +282,6 @@ em {
   .bx--grid--condensed .bx--col-md-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-4,
-  .bx--grid--narrow .bx--col-md-4 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-5 {
   width: 100%;
@@ -342,10 +291,6 @@ em {
   .bx--grid--condensed .bx--col-md-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-5,
-  .bx--grid--narrow .bx--col-md-5 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-6 {
   width: 100%;
@@ -355,10 +300,6 @@ em {
   .bx--grid--condensed .bx--col-md-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-6,
-  .bx--grid--narrow .bx--col-md-6 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-7 {
   width: 100%;
@@ -368,10 +309,6 @@ em {
   .bx--grid--condensed .bx--col-md-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-7,
-  .bx--grid--narrow .bx--col-md-7 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md-8 {
   width: 100%;
@@ -381,10 +318,6 @@ em {
   .bx--grid--condensed .bx--col-md-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md-8,
-  .bx--grid--narrow .bx--col-md-8 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-md,
 .bx--col-md--auto {
@@ -398,13 +331,6 @@ em {
   .bx--col-md--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-md,
-  .bx--grid--narrow .bx--col-md, .bx--row--narrow
-  .bx--col-md--auto,
-  .bx--grid--narrow
-  .bx--col-md--auto {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 @media (min-width: 42rem) {
   .bx--col,
@@ -476,10 +402,6 @@ em {
   .bx--grid--condensed .bx--col-lg-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-0,
-  .bx--grid--narrow .bx--col-lg-0 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-1 {
   width: 100%;
@@ -489,10 +411,6 @@ em {
   .bx--grid--condensed .bx--col-lg-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-1,
-  .bx--grid--narrow .bx--col-lg-1 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-2 {
   width: 100%;
@@ -502,10 +420,6 @@ em {
   .bx--grid--condensed .bx--col-lg-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-2,
-  .bx--grid--narrow .bx--col-lg-2 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-3 {
   width: 100%;
@@ -515,10 +429,6 @@ em {
   .bx--grid--condensed .bx--col-lg-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-3,
-  .bx--grid--narrow .bx--col-lg-3 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-4 {
   width: 100%;
@@ -528,10 +438,6 @@ em {
   .bx--grid--condensed .bx--col-lg-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-4,
-  .bx--grid--narrow .bx--col-lg-4 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-5 {
   width: 100%;
@@ -541,10 +447,6 @@ em {
   .bx--grid--condensed .bx--col-lg-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-5,
-  .bx--grid--narrow .bx--col-lg-5 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-6 {
   width: 100%;
@@ -554,10 +456,6 @@ em {
   .bx--grid--condensed .bx--col-lg-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-6,
-  .bx--grid--narrow .bx--col-lg-6 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-7 {
   width: 100%;
@@ -567,10 +465,6 @@ em {
   .bx--grid--condensed .bx--col-lg-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-7,
-  .bx--grid--narrow .bx--col-lg-7 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-8 {
   width: 100%;
@@ -580,10 +474,6 @@ em {
   .bx--grid--condensed .bx--col-lg-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-8,
-  .bx--grid--narrow .bx--col-lg-8 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-9 {
   width: 100%;
@@ -593,10 +483,6 @@ em {
   .bx--grid--condensed .bx--col-lg-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-9,
-  .bx--grid--narrow .bx--col-lg-9 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-10 {
   width: 100%;
@@ -606,10 +492,6 @@ em {
   .bx--grid--condensed .bx--col-lg-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-10,
-  .bx--grid--narrow .bx--col-lg-10 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-11 {
   width: 100%;
@@ -619,10 +501,6 @@ em {
   .bx--grid--condensed .bx--col-lg-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-11,
-  .bx--grid--narrow .bx--col-lg-11 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg-12 {
   width: 100%;
@@ -632,10 +510,6 @@ em {
   .bx--grid--condensed .bx--col-lg-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg-12,
-  .bx--grid--narrow .bx--col-lg-12 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-lg,
 .bx--col-lg--auto {
@@ -649,13 +523,6 @@ em {
   .bx--col-lg--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-lg,
-  .bx--grid--narrow .bx--col-lg, .bx--row--narrow
-  .bx--col-lg--auto,
-  .bx--grid--narrow
-  .bx--col-lg--auto {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 @media (min-width: 66rem) {
   .bx--col,
@@ -751,10 +618,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-0,
-  .bx--grid--narrow .bx--col-xlg-0 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-1 {
   width: 100%;
@@ -764,10 +627,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-1,
-  .bx--grid--narrow .bx--col-xlg-1 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-2 {
   width: 100%;
@@ -777,10 +636,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-2,
-  .bx--grid--narrow .bx--col-xlg-2 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-3 {
   width: 100%;
@@ -790,10 +645,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-3,
-  .bx--grid--narrow .bx--col-xlg-3 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-4 {
   width: 100%;
@@ -803,10 +654,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-4,
-  .bx--grid--narrow .bx--col-xlg-4 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-5 {
   width: 100%;
@@ -816,10 +663,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-5,
-  .bx--grid--narrow .bx--col-xlg-5 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-6 {
   width: 100%;
@@ -829,10 +672,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-6,
-  .bx--grid--narrow .bx--col-xlg-6 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-7 {
   width: 100%;
@@ -842,10 +681,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-7,
-  .bx--grid--narrow .bx--col-xlg-7 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-8 {
   width: 100%;
@@ -855,10 +690,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-8,
-  .bx--grid--narrow .bx--col-xlg-8 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-9 {
   width: 100%;
@@ -868,10 +699,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-9,
-  .bx--grid--narrow .bx--col-xlg-9 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-10 {
   width: 100%;
@@ -881,10 +708,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-10,
-  .bx--grid--narrow .bx--col-xlg-10 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-11 {
   width: 100%;
@@ -894,10 +717,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-11,
-  .bx--grid--narrow .bx--col-xlg-11 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg-12 {
   width: 100%;
@@ -907,10 +726,6 @@ em {
   .bx--grid--condensed .bx--col-xlg-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg-12,
-  .bx--grid--narrow .bx--col-xlg-12 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-xlg,
 .bx--col-xlg--auto {
@@ -924,13 +739,6 @@ em {
   .bx--col-xlg--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-xlg,
-  .bx--grid--narrow .bx--col-xlg, .bx--row--narrow
-  .bx--col-xlg--auto,
-  .bx--grid--narrow
-  .bx--col-xlg--auto {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 @media (min-width: 82rem) {
   .bx--col,
@@ -1026,10 +834,6 @@ em {
   .bx--grid--condensed .bx--col-max-0 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-0,
-  .bx--grid--narrow .bx--col-max-0 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-1 {
   width: 100%;
@@ -1039,10 +843,6 @@ em {
   .bx--grid--condensed .bx--col-max-1 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-1,
-  .bx--grid--narrow .bx--col-max-1 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-2 {
   width: 100%;
@@ -1052,10 +852,6 @@ em {
   .bx--grid--condensed .bx--col-max-2 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-2,
-  .bx--grid--narrow .bx--col-max-2 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-3 {
   width: 100%;
@@ -1065,10 +861,6 @@ em {
   .bx--grid--condensed .bx--col-max-3 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-3,
-  .bx--grid--narrow .bx--col-max-3 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-4 {
   width: 100%;
@@ -1078,10 +870,6 @@ em {
   .bx--grid--condensed .bx--col-max-4 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-4,
-  .bx--grid--narrow .bx--col-max-4 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-5 {
   width: 100%;
@@ -1091,10 +879,6 @@ em {
   .bx--grid--condensed .bx--col-max-5 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-5,
-  .bx--grid--narrow .bx--col-max-5 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-6 {
   width: 100%;
@@ -1104,10 +888,6 @@ em {
   .bx--grid--condensed .bx--col-max-6 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-6,
-  .bx--grid--narrow .bx--col-max-6 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-7 {
   width: 100%;
@@ -1117,10 +897,6 @@ em {
   .bx--grid--condensed .bx--col-max-7 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-7,
-  .bx--grid--narrow .bx--col-max-7 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-8 {
   width: 100%;
@@ -1130,10 +906,6 @@ em {
   .bx--grid--condensed .bx--col-max-8 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-8,
-  .bx--grid--narrow .bx--col-max-8 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-9 {
   width: 100%;
@@ -1143,10 +915,6 @@ em {
   .bx--grid--condensed .bx--col-max-9 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-9,
-  .bx--grid--narrow .bx--col-max-9 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-10 {
   width: 100%;
@@ -1156,10 +924,6 @@ em {
   .bx--grid--condensed .bx--col-max-10 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-10,
-  .bx--grid--narrow .bx--col-max-10 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-11 {
   width: 100%;
@@ -1169,10 +933,6 @@ em {
   .bx--grid--condensed .bx--col-max-11 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-11,
-  .bx--grid--narrow .bx--col-max-11 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max-12 {
   width: 100%;
@@ -1182,10 +942,6 @@ em {
   .bx--grid--condensed .bx--col-max-12 {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max-12,
-  .bx--grid--narrow .bx--col-max-12 {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 .bx--col-max,
 .bx--col-max--auto {
@@ -1199,13 +955,6 @@ em {
   .bx--col-max--auto {
     padding-right: 0.03125rem;
     padding-left: 0.03125rem; }
-  .bx--row--narrow .bx--col-max,
-  .bx--grid--narrow .bx--col-max, .bx--row--narrow
-  .bx--col-max--auto,
-  .bx--grid--narrow
-  .bx--col-max--auto {
-    padding-right: 1rem;
-    padding-left: 0; }
 
 @media (min-width: 99rem) {
   .bx--col,
@@ -1298,6 +1047,14 @@ em {
   padding-left: 0;
   padding-right: 0; }
 
+.bx--no-gutter--start,
+.bx--row.bx--no-gutter--start [class*='bx--col'] {
+  padding-left: 0; }
+
+.bx--no-gutter--end,
+.bx--row.bx--no-gutter--end [class*='bx--col'] {
+  padding-right: 0; }
+
 .bx--no-gutter--left,
 .bx--row.bx--no-gutter--left [class*='bx--col'] {
   padding-left: 0; }
@@ -1306,6 +1063,12 @@ em {
 .bx--row.bx--no-gutter--right [class*='bx--col'] {
   padding-right: 0; }
 
+.bx--hang--start {
+  padding-left: 1rem; }
+
+.bx--hang--end {
+  padding-right: 1rem; }
+
 .bx--hang--left {
   padding-left: 1rem; }
 
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index 3af4fd9a978f..237439609025 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -1267,7 +1267,7 @@ Define the properties for a selector assigned to a row in the grid system.
 
 ### ❌carbon--no-gutter [mixin]
 
-Add `no-gutter` and `no-gutter--{left,right}` classes to the output CSS. These
+Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
 classes are useful for dropping the gutter in fluid situations.
 
 <details>
@@ -1281,6 +1281,17 @@ classes are useful for dropping the gutter in fluid situations.
     padding-right: 0;
   }
 
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--no-gutter--left,
   .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
     padding-left: 0;
@@ -1303,14 +1314,23 @@ classes are useful for dropping the gutter in fluid situations.
 
 ### ❌carbon--hang [mixin]
 
-Add `hang--left` and `hang--right` classes for a given gutter. These classes are
-used alongside `no-gutter--left` and `no-gutter--right` to "hang" type.
+Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
 
 <details>
 <summary>Source code</summary>
 
 ```scss
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
   .#{$prefix}--hang--left {
     padding-left: ($gutter / 2);
   }