diff --git a/.eslintignore b/.eslintignore
index 967345584..f723666ed 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -111,13 +111,9 @@ src/Explorer/OpenActionsStubs.ts
 src/Explorer/Panes/AddDatabasePane.ts
 src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
-src/Explorer/Panes/CassandraAddCollectionPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
-src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
-src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
 # src/Explorer/Panes/GraphStylingPane.ts
 # src/Explorer/Panes/NewVertexPane.ts
-src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3b96b256b..8e62e4423 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,11 +92,11 @@ jobs:
           name: dist
           path: dist/
       - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
       - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
diff --git a/configs/mpac.json b/configs/mpac.json
index dd9a572a1..d8e5604d2 100644
--- a/configs/mpac.json
+++ b/configs/mpac.json
@@ -1,3 +1,4 @@
 {
- "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com"
-}
+  "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com",
+  "enableSchemaAnalyzer": true
+}
\ No newline at end of file
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
new file mode 100644
index 000000000..46571c27c
--- /dev/null
+++ b/docs/assets/css/main.css
@@ -0,0 +1,2660 @@
+:root {
+  --color-background: #fdfdfd;
+  --color-text: #222;
+  --color-text-aside: #707070;
+  --color-link: #4da6ff;
+  --color-menu-divider: #eee;
+  --color-menu-divider-focus: #000;
+  --color-menu-label: #707070;
+  --color-panel: #fff;
+  --color-panel-divider: #eee;
+  --color-comment-tag: #707070;
+  --color-comment-tag-text: #fff;
+  --color-code-background: rgba(0, 0, 0, 0.04);
+  --color-ts: #9600ff;
+  --color-ts-interface: #647f1b;
+  --color-ts-enum: #937210;
+  --color-ts-class: #0672de;
+  --color-ts-private: #707070;
+  --color-toolbar: #fff;
+  --color-toolbar-text: #333;
+}
+
+/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
+/* ==========================================================================
+ * * HTML5 display definitions
+ * * ========================================================================== */
+/**
+ * * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+  display: block;
+}
+
+/**
+ * * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+/**
+ * * Prevent modern browsers from displaying `audio` without controls.
+ * * Remove excess height in iOS 5 devices. */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * * Known issue: no IE 6 support. */
+[hidden] {
+  display: none;
+}
+
+/* ==========================================================================
+ * * Base
+ * * ========================================================================== */
+/**
+ * * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ * *    `em` units.
+ * * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * *    user zoom. */
+html {
+  font-size: 100%;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  font-family: sans-serif;
+}
+
+/**
+ * * Address `font-family` inconsistency between `textarea` and other form
+ * * elements. */
+button, input, select, textarea {
+  font-family: sans-serif;
+}
+
+/**
+ * * Address margins handled incorrectly in IE 6/7. */
+body {
+  margin: 0;
+}
+
+/* ==========================================================================
+ * * Links
+ * * ========================================================================== */
+/**
+ * * Address `outline` inconsistency between Chrome and other browsers. */
+a:focus {
+  outline: thin dotted;
+}
+a:active, a:hover {
+  outline: 0;
+}
+
+/**
+ * * Improve readability when focused and also mouse hovered in all browsers. */
+/* ==========================================================================
+ * * Typography
+ * * ========================================================================== */
+/**
+ * * Address font sizes and margins set differently in IE 6/7.
+ * * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * * and Chrome. */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+
+h4, .tsd-index-panel h3 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+
+h6 {
+  font-size: 0.67em;
+  margin: 2.33em 0;
+}
+
+/**
+ * * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
+b, strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+/**
+ * * Address styling not present in Safari 5 and Chrome. */
+dfn {
+  font-style: italic;
+}
+
+/**
+ * * Address differences between Firefox and other browsers.
+ * * Known issue: no IE 6/7 normalization. */
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * * Address styling not present in IE 6/7/8/9. */
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * * Address margins set differently in IE 6/7. */
+p, pre {
+  margin: 1em 0;
+}
+
+/**
+ * * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */
+code, kbd, pre, samp {
+  font-family: monospace, serif;
+  _font-family: "courier new", monospace;
+  font-size: 1em;
+}
+
+/**
+ * * Improve readability of pre-formatted text in all browsers. */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/**
+ * * Address CSS quotes not supported in IE 6/7. */
+q {
+  quotes: none;
+}
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+/**
+ * * Address `quotes` property not supported in Safari 4. */
+/**
+ * * Address inconsistent and variable font size in all browsers. */
+small {
+  font-size: 80%;
+}
+
+/**
+ * * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
+sub {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* ==========================================================================
+ * * Lists
+ * * ========================================================================== */
+/**
+ * * Address margins set differently in IE 6/7. */
+dl, menu, ol, ul {
+  margin: 1em 0;
+}
+
+dd {
+  margin: 0 0 0 40px;
+}
+
+/**
+ * * Address paddings set differently in IE 6/7. */
+menu, ol, ul {
+  padding: 0 0 0 40px;
+}
+
+/**
+ * * Correct list images handled incorrectly in IE 7. */
+nav ul, nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+
+/* ==========================================================================
+ * * Embedded content
+ * * ========================================================================== */
+/**
+ * * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * * 2. Improve image quality when scaled in IE 7. */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+}
+
+/* 2 */
+/**
+ * * Correct overflow displayed oddly in IE 9. */
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* ==========================================================================
+ * * Figures
+ * * ========================================================================== */
+/**
+ * * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
+figure, form {
+  margin: 0;
+}
+
+/* ==========================================================================
+ * * Forms
+ * * ========================================================================== */
+/**
+ * * Correct margin displayed oddly in IE 6/7. */
+/**
+ * * Define consistent border, margin, and padding. */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * * 1. Correct color not being inherited in IE 6/7/8/9.
+ * * 2. Correct text not wrapping in Firefox 3.
+ * * 3. Correct alignment displayed oddly in IE 6/7. */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+}
+
+/* 3 */
+/**
+ * * 1. Correct font size not being inherited in all browsers.
+ * * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ * *    and Chrome.
+ * * 3. Improve appearance and consistency in all browsers. */
+button, input, select, textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+}
+
+/* 3 */
+/**
+ * * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * * the UA stylesheet. */
+button, input {
+  line-height: normal;
+}
+
+/**
+ * * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * * All other form control elements do not inherit `text-transform` values.
+ * * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * * Correct `select` style inheritance in Firefox 4+ and Opera. */
+button, select {
+  text-transform: none;
+}
+
+/**
+ * * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * *    and `video` controls.
+ * * 2. Correct inability to style clickable `input` types in iOS.
+ * * 3. Improve usability and consistency of cursor style between image-type
+ * *    `input` and others.
+ * * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ * *    Known issue: inner spacing remains in IE 6. */
+button, html input[type=button] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
+  *overflow: visible;
+}
+
+/* 4 */
+input[type=reset], input[type=submit] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
+  *overflow: visible;
+}
+
+/* 4 */
+/**
+ * * Re-set default cursor for disabled elements. */
+button[disabled], html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * * 1. Address box sizing set to content-box in IE 8/9.
+ * * 2. Remove excess padding in IE 8/9.
+ * * 3. Remove excess padding in IE 7.
+ * *    Known issue: excess padding remains in IE 6. */
+input {
+  /* 3 */
+}
+input[type=checkbox], input[type=radio] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+  *height: 13px;
+  /* 3 */
+  *width: 13px;
+}
+input[type=search] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * *    (include `-moz` to future-proof). */
+/**
+ * * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * * on OS X. */
+/**
+ * * Remove inner padding and border in Firefox 3+. */
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * * 2. Improve readability and alignment in all browsers. */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+}
+
+/* 2 */
+/* ==========================================================================
+ * * Tables
+ * * ========================================================================== */
+/**
+ * * Remove most spacing between table cells. */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+ul.tsd-descriptions > li > :first-child, .tsd-panel > :first-child, .col > :first-child, .col-11 > :first-child, .col-10 > :first-child, .col-9 > :first-child, .col-8 > :first-child, .col-7 > :first-child, .col-6 > :first-child, .col-5 > :first-child, .col-4 > :first-child, .col-3 > :first-child, .col-2 > :first-child, .col-1 > :first-child,
+ul.tsd-descriptions > li > :first-child > :first-child,
+.tsd-panel > :first-child > :first-child,
+.col > :first-child > :first-child,
+.col-11 > :first-child > :first-child,
+.col-10 > :first-child > :first-child,
+.col-9 > :first-child > :first-child,
+.col-8 > :first-child > :first-child,
+.col-7 > :first-child > :first-child,
+.col-6 > :first-child > :first-child,
+.col-5 > :first-child > :first-child,
+.col-4 > :first-child > :first-child,
+.col-3 > :first-child > :first-child,
+.col-2 > :first-child > :first-child,
+.col-1 > :first-child > :first-child,
+ul.tsd-descriptions > li > :first-child > :first-child > :first-child,
+.tsd-panel > :first-child > :first-child > :first-child,
+.col > :first-child > :first-child > :first-child,
+.col-11 > :first-child > :first-child > :first-child,
+.col-10 > :first-child > :first-child > :first-child,
+.col-9 > :first-child > :first-child > :first-child,
+.col-8 > :first-child > :first-child > :first-child,
+.col-7 > :first-child > :first-child > :first-child,
+.col-6 > :first-child > :first-child > :first-child,
+.col-5 > :first-child > :first-child > :first-child,
+.col-4 > :first-child > :first-child > :first-child,
+.col-3 > :first-child > :first-child > :first-child,
+.col-2 > :first-child > :first-child > :first-child,
+.col-1 > :first-child > :first-child > :first-child {
+  margin-top: 0;
+}
+ul.tsd-descriptions > li > :last-child, .tsd-panel > :last-child, .col > :last-child, .col-11 > :last-child, .col-10 > :last-child, .col-9 > :last-child, .col-8 > :last-child, .col-7 > :last-child, .col-6 > :last-child, .col-5 > :last-child, .col-4 > :last-child, .col-3 > :last-child, .col-2 > :last-child, .col-1 > :last-child,
+ul.tsd-descriptions > li > :last-child > :last-child,
+.tsd-panel > :last-child > :last-child,
+.col > :last-child > :last-child,
+.col-11 > :last-child > :last-child,
+.col-10 > :last-child > :last-child,
+.col-9 > :last-child > :last-child,
+.col-8 > :last-child > :last-child,
+.col-7 > :last-child > :last-child,
+.col-6 > :last-child > :last-child,
+.col-5 > :last-child > :last-child,
+.col-4 > :last-child > :last-child,
+.col-3 > :last-child > :last-child,
+.col-2 > :last-child > :last-child,
+.col-1 > :last-child > :last-child,
+ul.tsd-descriptions > li > :last-child > :last-child > :last-child,
+.tsd-panel > :last-child > :last-child > :last-child,
+.col > :last-child > :last-child > :last-child,
+.col-11 > :last-child > :last-child > :last-child,
+.col-10 > :last-child > :last-child > :last-child,
+.col-9 > :last-child > :last-child > :last-child,
+.col-8 > :last-child > :last-child > :last-child,
+.col-7 > :last-child > :last-child > :last-child,
+.col-6 > :last-child > :last-child > :last-child,
+.col-5 > :last-child > :last-child > :last-child,
+.col-4 > :last-child > :last-child > :last-child,
+.col-3 > :last-child > :last-child > :last-child,
+.col-2 > :last-child > :last-child > :last-child,
+.col-1 > :last-child > :last-child > :last-child {
+  margin-bottom: 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+@media (max-width: 640px) {
+  .container {
+    padding: 0 20px;
+  }
+}
+
+.container-main {
+  padding-bottom: 200px;
+}
+
+.row {
+  display: flex;
+  position: relative;
+  margin: 0 -10px;
+}
+.row:after {
+  visibility: hidden;
+  display: block;
+  content: "";
+  clear: both;
+  height: 0;
+}
+
+.col, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
+  box-sizing: border-box;
+  float: left;
+  padding: 0 10px;
+}
+
+.col-1 {
+  width: 8.3333333333%;
+}
+
+.offset-1 {
+  margin-left: 8.3333333333%;
+}
+
+.col-2 {
+  width: 16.6666666667%;
+}
+
+.offset-2 {
+  margin-left: 16.6666666667%;
+}
+
+.col-3 {
+  width: 25%;
+}
+
+.offset-3 {
+  margin-left: 25%;
+}
+
+.col-4 {
+  width: 33.3333333333%;
+}
+
+.offset-4 {
+  margin-left: 33.3333333333%;
+}
+
+.col-5 {
+  width: 41.6666666667%;
+}
+
+.offset-5 {
+  margin-left: 41.6666666667%;
+}
+
+.col-6 {
+  width: 50%;
+}
+
+.offset-6 {
+  margin-left: 50%;
+}
+
+.col-7 {
+  width: 58.3333333333%;
+}
+
+.offset-7 {
+  margin-left: 58.3333333333%;
+}
+
+.col-8 {
+  width: 66.6666666667%;
+}
+
+.offset-8 {
+  margin-left: 66.6666666667%;
+}
+
+.col-9 {
+  width: 75%;
+}
+
+.offset-9 {
+  margin-left: 75%;
+}
+
+.col-10 {
+  width: 83.3333333333%;
+}
+
+.offset-10 {
+  margin-left: 83.3333333333%;
+}
+
+.col-11 {
+  width: 91.6666666667%;
+}
+
+.offset-11 {
+  margin-left: 91.6666666667%;
+}
+
+.tsd-kind-icon {
+  display: block;
+  position: relative;
+  padding-left: 20px;
+  text-indent: -20px;
+}
+.tsd-kind-icon:before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 17px;
+  height: 17px;
+  margin: 0 3px 2px 0;
+  background-image: url(../images/icons.png);
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  .tsd-kind-icon:before {
+    background-image: url(../images/icons@2x.png);
+    background-size: 238px 204px;
+  }
+}
+
+.tsd-signature.tsd-kind-icon:before {
+  background-position: 0 -153px;
+}
+
+.tsd-kind-object-literal > .tsd-kind-icon:before {
+  background-position: 0px -17px;
+}
+.tsd-kind-object-literal.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -17px;
+}
+.tsd-kind-object-literal.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -17px;
+}
+
+.tsd-kind-class > .tsd-kind-icon:before {
+  background-position: 0px -34px;
+}
+.tsd-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -34px;
+}
+.tsd-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -34px;
+}
+
+.tsd-kind-class.tsd-has-type-parameter > .tsd-kind-icon:before {
+  background-position: 0px -51px;
+}
+.tsd-kind-class.tsd-has-type-parameter.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -51px;
+}
+.tsd-kind-class.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -51px;
+}
+
+.tsd-kind-interface > .tsd-kind-icon:before {
+  background-position: 0px -68px;
+}
+.tsd-kind-interface.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -68px;
+}
+.tsd-kind-interface.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -68px;
+}
+
+.tsd-kind-interface.tsd-has-type-parameter > .tsd-kind-icon:before {
+  background-position: 0px -85px;
+}
+.tsd-kind-interface.tsd-has-type-parameter.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -85px;
+}
+.tsd-kind-interface.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -85px;
+}
+
+.tsd-kind-namespace > .tsd-kind-icon:before {
+  background-position: 0px -102px;
+}
+.tsd-kind-namespace.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -102px;
+}
+.tsd-kind-namespace.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -102px;
+}
+
+.tsd-kind-module > .tsd-kind-icon:before {
+  background-position: 0px -102px;
+}
+.tsd-kind-module.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -102px;
+}
+.tsd-kind-module.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -102px;
+}
+
+.tsd-kind-enum > .tsd-kind-icon:before {
+  background-position: 0px -119px;
+}
+.tsd-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -119px;
+}
+.tsd-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -119px;
+}
+
+.tsd-kind-enum-member > .tsd-kind-icon:before {
+  background-position: 0px -136px;
+}
+.tsd-kind-enum-member.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -136px;
+}
+.tsd-kind-enum-member.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -136px;
+}
+
+.tsd-kind-signature > .tsd-kind-icon:before {
+  background-position: 0px -153px;
+}
+.tsd-kind-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -153px;
+}
+.tsd-kind-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -153px;
+}
+
+.tsd-kind-type-alias > .tsd-kind-icon:before {
+  background-position: 0px -170px;
+}
+.tsd-kind-type-alias.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -170px;
+}
+.tsd-kind-type-alias.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -170px;
+}
+
+.tsd-kind-type-alias.tsd-has-type-parameter > .tsd-kind-icon:before {
+  background-position: 0px -187px;
+}
+.tsd-kind-type-alias.tsd-has-type-parameter.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -17px -187px;
+}
+.tsd-kind-type-alias.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -34px -187px;
+}
+
+.tsd-kind-variable > .tsd-kind-icon:before {
+  background-position: -136px -0px;
+}
+.tsd-kind-variable.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -0px;
+}
+.tsd-kind-variable.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -0px;
+}
+.tsd-kind-variable.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -0px;
+}
+
+.tsd-kind-property > .tsd-kind-icon:before {
+  background-position: -136px -0px;
+}
+.tsd-kind-property.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -0px;
+}
+.tsd-kind-property.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -0px;
+}
+.tsd-kind-property.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -0px;
+}
+
+.tsd-kind-get-signature > .tsd-kind-icon:before {
+  background-position: -136px -17px;
+}
+.tsd-kind-get-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -17px;
+}
+.tsd-kind-get-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -17px;
+}
+.tsd-kind-get-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -17px;
+}
+
+.tsd-kind-set-signature > .tsd-kind-icon:before {
+  background-position: -136px -34px;
+}
+.tsd-kind-set-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -34px;
+}
+.tsd-kind-set-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -34px;
+}
+.tsd-kind-set-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -34px;
+}
+
+.tsd-kind-accessor > .tsd-kind-icon:before {
+  background-position: -136px -51px;
+}
+.tsd-kind-accessor.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -51px;
+}
+.tsd-kind-accessor.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -51px;
+}
+.tsd-kind-accessor.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -51px;
+}
+
+.tsd-kind-function > .tsd-kind-icon:before {
+  background-position: -136px -68px;
+}
+.tsd-kind-function.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -68px;
+}
+.tsd-kind-function.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -68px;
+}
+.tsd-kind-function.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -68px;
+}
+
+.tsd-kind-method > .tsd-kind-icon:before {
+  background-position: -136px -68px;
+}
+.tsd-kind-method.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -68px;
+}
+.tsd-kind-method.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -68px;
+}
+.tsd-kind-method.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -68px;
+}
+
+.tsd-kind-call-signature > .tsd-kind-icon:before {
+  background-position: -136px -68px;
+}
+.tsd-kind-call-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -68px;
+}
+.tsd-kind-call-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -68px;
+}
+.tsd-kind-call-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -68px;
+}
+
+.tsd-kind-function.tsd-has-type-parameter > .tsd-kind-icon:before {
+  background-position: -136px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -85px;
+}
+.tsd-kind-function.tsd-has-type-parameter.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -85px;
+}
+
+.tsd-kind-method.tsd-has-type-parameter > .tsd-kind-icon:before {
+  background-position: -136px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -85px;
+}
+.tsd-kind-method.tsd-has-type-parameter.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -85px;
+}
+
+.tsd-kind-constructor > .tsd-kind-icon:before {
+  background-position: -136px -102px;
+}
+.tsd-kind-constructor.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -102px;
+}
+.tsd-kind-constructor.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -102px;
+}
+.tsd-kind-constructor.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -102px;
+}
+
+.tsd-kind-constructor-signature > .tsd-kind-icon:before {
+  background-position: -136px -102px;
+}
+.tsd-kind-constructor-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -102px;
+}
+.tsd-kind-constructor-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -102px;
+}
+.tsd-kind-constructor-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -102px;
+}
+
+.tsd-kind-index-signature > .tsd-kind-icon:before {
+  background-position: -136px -119px;
+}
+.tsd-kind-index-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -119px;
+}
+.tsd-kind-index-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -119px;
+}
+.tsd-kind-index-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -119px;
+}
+
+.tsd-kind-event > .tsd-kind-icon:before {
+  background-position: -136px -136px;
+}
+.tsd-kind-event.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -136px;
+}
+.tsd-kind-event.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -136px;
+}
+.tsd-kind-event.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -136px;
+}
+
+.tsd-is-static > .tsd-kind-icon:before {
+  background-position: -136px -153px;
+}
+.tsd-is-static.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -153px;
+}
+.tsd-is-static.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -153px;
+}
+.tsd-is-static.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -153px;
+}
+.tsd-is-static.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -153px;
+}
+.tsd-is-static.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -153px;
+}
+.tsd-is-static.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -153px;
+}
+.tsd-is-static.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -153px;
+}
+.tsd-is-static.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -153px;
+}
+.tsd-is-static.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -153px;
+}
+.tsd-is-static.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -153px;
+}
+.tsd-is-static.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -153px;
+}
+.tsd-is-static.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -153px;
+}
+
+.tsd-is-static.tsd-kind-function > .tsd-kind-icon:before {
+  background-position: -136px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -170px;
+}
+.tsd-is-static.tsd-kind-function.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -170px;
+}
+
+.tsd-is-static.tsd-kind-method > .tsd-kind-icon:before {
+  background-position: -136px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -170px;
+}
+.tsd-is-static.tsd-kind-method.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -170px;
+}
+
+.tsd-is-static.tsd-kind-call-signature > .tsd-kind-icon:before {
+  background-position: -136px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -170px;
+}
+.tsd-is-static.tsd-kind-call-signature.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -170px;
+}
+
+.tsd-is-static.tsd-kind-event > .tsd-kind-icon:before {
+  background-position: -136px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -153px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-class > .tsd-kind-icon:before {
+  background-position: -51px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -68px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -85px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-protected.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -102px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-class.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-enum > .tsd-kind-icon:before {
+  background-position: -170px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-enum.tsd-is-protected > .tsd-kind-icon:before {
+  background-position: -187px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-enum.tsd-is-private > .tsd-kind-icon:before {
+  background-position: -119px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-interface > .tsd-kind-icon:before {
+  background-position: -204px -187px;
+}
+.tsd-is-static.tsd-kind-event.tsd-parent-kind-interface.tsd-is-inherited > .tsd-kind-icon:before {
+  background-position: -221px -187px;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fade-in-delayed {
+  0% {
+    opacity: 0;
+  }
+  33% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-out-delayed {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  66% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes shift-to-left {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(-25%, 0);
+  }
+}
+@keyframes unshift-to-left {
+  from {
+    transform: translate(-25%, 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes pop-in-from-right {
+  from {
+    transform: translate(100%, 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes pop-out-to-right {
+  from {
+    transform: translate(0, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate(100%, 0);
+  }
+}
+body {
+  background: var(--color-background);
+  font-family: "Segoe UI", sans-serif;
+  font-size: 16px;
+  color: var(--color-text);
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+code, pre {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  padding: 0.2em;
+  margin: 0;
+  font-size: 14px;
+  background-color: var(--color-code-background);
+}
+
+pre {
+  padding: 10px;
+}
+pre code {
+  padding: 0;
+  font-size: 100%;
+  background-color: transparent;
+}
+
+blockquote {
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 4px solid gray;
+}
+
+.tsd-typography {
+  line-height: 1.333em;
+}
+.tsd-typography ul {
+  list-style: square;
+  padding: 0 0 0 20px;
+  margin: 0;
+}
+.tsd-typography h4, .tsd-typography .tsd-index-panel h3, .tsd-index-panel .tsd-typography h3, .tsd-typography h5, .tsd-typography h6 {
+  font-size: 1em;
+  margin: 0;
+}
+.tsd-typography h5, .tsd-typography h6 {
+  font-weight: normal;
+}
+.tsd-typography p, .tsd-typography ul, .tsd-typography ol {
+  margin: 1em 0;
+}
+
+@media (min-width: 901px) and (max-width: 1024px) {
+  html.default .col-content {
+    width: 72%;
+  }
+  html.default .col-menu {
+    width: 28%;
+  }
+  html.default .tsd-navigation {
+    padding-left: 10px;
+  }
+}
+@media (max-width: 900px) {
+  html.default .col-content {
+    float: none;
+    width: 100%;
+  }
+  html.default .col-menu {
+    position: fixed !important;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    z-index: 1024;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: auto !important;
+    right: 0 !important;
+    width: 100%;
+    padding: 20px 20px 0 0;
+    max-width: 450px;
+    visibility: hidden;
+    background-color: var(--color-panel);
+    transform: translate(100%, 0);
+  }
+  html.default .col-menu > *:last-child {
+    padding-bottom: 20px;
+  }
+  html.default .overlay {
+    content: "";
+    display: block;
+    position: fixed;
+    z-index: 1023;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.75);
+    visibility: hidden;
+  }
+  html.default.to-has-menu .overlay {
+    animation: fade-in 0.4s;
+  }
+  html.default.to-has-menu header,
+html.default.to-has-menu footer,
+html.default.to-has-menu .col-content {
+    animation: shift-to-left 0.4s;
+  }
+  html.default.to-has-menu .col-menu {
+    animation: pop-in-from-right 0.4s;
+  }
+  html.default.from-has-menu .overlay {
+    animation: fade-out 0.4s;
+  }
+  html.default.from-has-menu header,
+html.default.from-has-menu footer,
+html.default.from-has-menu .col-content {
+    animation: unshift-to-left 0.4s;
+  }
+  html.default.from-has-menu .col-menu {
+    animation: pop-out-to-right 0.4s;
+  }
+  html.default.has-menu body {
+    overflow: hidden;
+  }
+  html.default.has-menu .overlay {
+    visibility: visible;
+  }
+  html.default.has-menu header,
+html.default.has-menu footer,
+html.default.has-menu .col-content {
+    transform: translate(-25%, 0);
+  }
+  html.default.has-menu .col-menu {
+    visibility: visible;
+    transform: translate(0, 0);
+  }
+}
+
+.tsd-page-title {
+  padding: 70px 0 20px 0;
+  margin: 0 0 40px 0;
+  background: var(--color-panel);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
+}
+.tsd-page-title h1 {
+  margin: 0;
+}
+
+.tsd-breadcrumb {
+  margin: 0;
+  padding: 0;
+  color: var(--color-text-aside);
+}
+.tsd-breadcrumb a {
+  color: var(--color-text-aside);
+  text-decoration: none;
+}
+.tsd-breadcrumb a:hover {
+  text-decoration: underline;
+}
+.tsd-breadcrumb li {
+  display: inline;
+}
+.tsd-breadcrumb li:after {
+  content: " / ";
+}
+
+html.minimal .container {
+  margin: 0;
+}
+html.minimal .container-main {
+  padding-top: 50px;
+  padding-bottom: 0;
+}
+html.minimal .content-wrap {
+  padding-left: 300px;
+}
+html.minimal .tsd-navigation {
+  position: fixed !important;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
+  z-index: 1;
+  left: 0;
+  top: 40px;
+  bottom: 0;
+  width: 300px;
+  padding: 20px;
+  margin: 0;
+}
+html.minimal .tsd-member .tsd-member {
+  margin-left: 0;
+}
+html.minimal .tsd-page-toolbar {
+  position: fixed;
+  z-index: 2;
+}
+html.minimal #tsd-filter .tsd-filter-group {
+  right: 0;
+  transform: none;
+}
+html.minimal footer {
+  background-color: transparent;
+}
+html.minimal footer .container {
+  padding: 0;
+}
+html.minimal .tsd-generator {
+  padding: 0;
+}
+@media (max-width: 900px) {
+  html.minimal .tsd-navigation {
+    display: none;
+  }
+  html.minimal .content-wrap {
+    padding-left: 0;
+  }
+}
+
+dl.tsd-comment-tags {
+  overflow: hidden;
+}
+dl.tsd-comment-tags dt {
+  float: left;
+  padding: 1px 5px;
+  margin: 0 10px 0 0;
+  border-radius: 4px;
+  border: 1px solid var(--color-comment-tag);
+  color: var(--color-comment-tag);
+  font-size: 0.8em;
+  font-weight: normal;
+}
+dl.tsd-comment-tags dd {
+  margin: 0 0 10px 0;
+}
+dl.tsd-comment-tags dd:before, dl.tsd-comment-tags dd:after {
+  display: table;
+  content: " ";
+}
+dl.tsd-comment-tags dd pre, dl.tsd-comment-tags dd:after {
+  clear: both;
+}
+dl.tsd-comment-tags p {
+  margin: 0;
+}
+
+.tsd-panel.tsd-comment .lead {
+  font-size: 1.1em;
+  line-height: 1.333em;
+  margin-bottom: 2em;
+}
+.tsd-panel.tsd-comment .lead:last-child {
+  margin-bottom: 0;
+}
+
+.toggle-protected .tsd-is-private {
+  display: none;
+}
+
+.toggle-public .tsd-is-private,
+.toggle-public .tsd-is-protected,
+.toggle-public .tsd-is-private-protected {
+  display: none;
+}
+
+.toggle-inherited .tsd-is-inherited {
+  display: none;
+}
+
+.toggle-externals .tsd-is-external {
+  display: none;
+}
+
+#tsd-filter {
+  position: relative;
+  display: inline-block;
+  height: 40px;
+  vertical-align: bottom;
+}
+.no-filter #tsd-filter {
+  display: none;
+}
+#tsd-filter .tsd-filter-group {
+  display: inline-block;
+  height: 40px;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+#tsd-filter input {
+  display: none;
+}
+@media (max-width: 900px) {
+  #tsd-filter .tsd-filter-group {
+    display: block;
+    position: absolute;
+    top: 40px;
+    right: 20px;
+    height: auto;
+    background-color: var(--color-panel);
+    visibility: hidden;
+    transform: translate(50%, 0);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  }
+  .has-options #tsd-filter .tsd-filter-group {
+    visibility: visible;
+  }
+  .to-has-options #tsd-filter .tsd-filter-group {
+    animation: fade-in 0.2s;
+  }
+  .from-has-options #tsd-filter .tsd-filter-group {
+    animation: fade-out 0.2s;
+  }
+  #tsd-filter label,
+#tsd-filter .tsd-select {
+    display: block;
+    padding-right: 20px;
+  }
+}
+
+footer {
+  border-top: 1px solid var(--color-panel-divider);
+  background-color: var(--color-panel);
+}
+footer.with-border-bottom {
+  border-bottom: 1px solid var(--color-panel-divider);
+}
+footer .tsd-legend-group {
+  font-size: 0;
+}
+footer .tsd-legend {
+  display: inline-block;
+  width: 25%;
+  padding: 0;
+  font-size: 16px;
+  list-style: none;
+  line-height: 1.333em;
+  vertical-align: top;
+}
+@media (max-width: 900px) {
+  footer .tsd-legend {
+    width: 50%;
+  }
+}
+
+.tsd-hierarchy {
+  list-style: square;
+  padding: 0 0 0 20px;
+  margin: 0;
+}
+.tsd-hierarchy .target {
+  font-weight: bold;
+}
+
+.tsd-index-panel .tsd-index-content {
+  margin-bottom: -30px !important;
+}
+.tsd-index-panel .tsd-index-section {
+  margin-bottom: 30px !important;
+}
+.tsd-index-panel h3 {
+  margin: 0 -20px 10px -20px;
+  padding: 0 20px 10px 20px;
+  border-bottom: 1px solid var(--color-panel-divider);
+}
+.tsd-index-panel ul.tsd-index-list {
+  -webkit-column-count: 3;
+  -moz-column-count: 3;
+  -ms-column-count: 3;
+  -o-column-count: 3;
+  column-count: 3;
+  -webkit-column-gap: 20px;
+  -moz-column-gap: 20px;
+  -ms-column-gap: 20px;
+  -o-column-gap: 20px;
+  column-gap: 20px;
+  padding: 0;
+  list-style: none;
+  line-height: 1.333em;
+}
+@media (max-width: 900px) {
+  .tsd-index-panel ul.tsd-index-list {
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+    -ms-column-count: 1;
+    -o-column-count: 1;
+    column-count: 1;
+  }
+}
+@media (min-width: 901px) and (max-width: 1024px) {
+  .tsd-index-panel ul.tsd-index-list {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    -ms-column-count: 2;
+    -o-column-count: 2;
+    column-count: 2;
+  }
+}
+.tsd-index-panel ul.tsd-index-list li {
+  -webkit-page-break-inside: avoid;
+  -moz-page-break-inside: avoid;
+  -ms-page-break-inside: avoid;
+  -o-page-break-inside: avoid;
+  page-break-inside: avoid;
+}
+.tsd-index-panel a,
+.tsd-index-panel .tsd-parent-kind-module a {
+  color: var(--color-ts);
+}
+.tsd-index-panel .tsd-parent-kind-interface a {
+  color: var(--color-ts-interface);
+}
+.tsd-index-panel .tsd-parent-kind-enum a {
+  color: var(--color-ts-enum);
+}
+.tsd-index-panel .tsd-parent-kind-class a {
+  color: var(--color-ts-class);
+}
+.tsd-index-panel .tsd-kind-module a {
+  color: var(--color-ts);
+}
+.tsd-index-panel .tsd-kind-interface a {
+  color: var(--color-ts-interface);
+}
+.tsd-index-panel .tsd-kind-enum a {
+  color: var(--color-ts-enum);
+}
+.tsd-index-panel .tsd-kind-class a {
+  color: var(--color-ts-class);
+}
+.tsd-index-panel .tsd-is-private a {
+  color: var(--color-ts-private);
+}
+
+.tsd-flag {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: var(--color-comment-tag-text);
+  background-color: var(--color-comment-tag);
+  text-indent: 0;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.tsd-anchor {
+  position: absolute;
+  top: -100px;
+}
+
+.tsd-member {
+  position: relative;
+}
+.tsd-member .tsd-anchor + h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+.tsd-member a[data-tsd-kind] {
+  color: var(--color-ts);
+}
+.tsd-member a[data-tsd-kind=Interface] {
+  color: var(--color-ts-interface);
+}
+.tsd-member a[data-tsd-kind=Enum] {
+  color: var(--color-ts-enum);
+}
+.tsd-member a[data-tsd-kind=Class] {
+  color: var(--color-ts-class);
+}
+.tsd-member a[data-tsd-kind=Private] {
+  color: var(--color-ts-private);
+}
+
+.tsd-navigation {
+  margin: 0 0 0 40px;
+}
+.tsd-navigation a {
+  display: block;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-left: 2px solid transparent;
+  color: var(--color-text);
+  text-decoration: none;
+  transition: border-left-color 0.1s;
+}
+.tsd-navigation a:hover {
+  text-decoration: underline;
+}
+.tsd-navigation ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tsd-navigation li {
+  padding: 0;
+}
+
+.tsd-navigation.primary {
+  padding-bottom: 40px;
+}
+.tsd-navigation.primary a {
+  display: block;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.tsd-navigation.primary ul li a {
+  padding-left: 5px;
+}
+.tsd-navigation.primary ul li li a {
+  padding-left: 25px;
+}
+.tsd-navigation.primary ul li li li a {
+  padding-left: 45px;
+}
+.tsd-navigation.primary ul li li li li a {
+  padding-left: 65px;
+}
+.tsd-navigation.primary ul li li li li li a {
+  padding-left: 85px;
+}
+.tsd-navigation.primary ul li li li li li li a {
+  padding-left: 105px;
+}
+.tsd-navigation.primary > ul {
+  border-bottom: 1px solid var(--color-panel-divider);
+}
+.tsd-navigation.primary li {
+  border-top: 1px solid var(--color-panel-divider);
+}
+.tsd-navigation.primary li.current > a {
+  font-weight: bold;
+}
+.tsd-navigation.primary li.label span {
+  display: block;
+  padding: 20px 0 6px 5px;
+  color: var(--color-menu-label);
+}
+.tsd-navigation.primary li.globals + li > span, .tsd-navigation.primary li.globals + li > a {
+  padding-top: 20px;
+}
+
+.tsd-navigation.secondary {
+  max-height: calc(100vh - 1rem - 40px);
+  overflow: auto;
+  position: -webkit-sticky;
+  position: sticky;
+  top: calc(.5rem + 40px);
+  transition: 0.3s;
+}
+.tsd-navigation.secondary.tsd-navigation--toolbar-hide {
+  max-height: calc(100vh - 1rem);
+  top: 0.5rem;
+}
+.tsd-navigation.secondary ul {
+  transition: opacity 0.2s;
+}
+.tsd-navigation.secondary ul li a {
+  padding-left: 25px;
+}
+.tsd-navigation.secondary ul li li a {
+  padding-left: 45px;
+}
+.tsd-navigation.secondary ul li li li a {
+  padding-left: 65px;
+}
+.tsd-navigation.secondary ul li li li li a {
+  padding-left: 85px;
+}
+.tsd-navigation.secondary ul li li li li li a {
+  padding-left: 105px;
+}
+.tsd-navigation.secondary ul li li li li li li a {
+  padding-left: 125px;
+}
+.tsd-navigation.secondary ul.current a {
+  border-left-color: var(--color-panel-divider);
+}
+.tsd-navigation.secondary li.focus > a,
+.tsd-navigation.secondary ul.current li.focus > a {
+  border-left-color: var(--color-menu-divider-focus);
+}
+.tsd-navigation.secondary li.current {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-left-color: var(--color-panel-divider);
+}
+.tsd-navigation.secondary li.current > a {
+  font-weight: bold;
+}
+
+@media (min-width: 901px) {
+  .menu-sticky-wrap {
+    position: static;
+  }
+}
+
+.tsd-panel {
+  margin: 20px 0;
+  padding: 20px;
+  background-color: var(--color-panel);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+}
+.tsd-panel:empty {
+  display: none;
+}
+.tsd-panel > h1, .tsd-panel > h2, .tsd-panel > h3 {
+  margin: 1.5em -20px 10px -20px;
+  padding: 0 20px 10px 20px;
+  border-bottom: 1px solid var(--color-panel-divider);
+}
+.tsd-panel > h1.tsd-before-signature, .tsd-panel > h2.tsd-before-signature, .tsd-panel > h3.tsd-before-signature {
+  margin-bottom: 0;
+  border-bottom: 0;
+}
+.tsd-panel table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  margin-top: 10px;
+  word-break: normal;
+  word-break: keep-all;
+}
+.tsd-panel table th {
+  font-weight: bold;
+}
+.tsd-panel table th, .tsd-panel table td {
+  padding: 6px 13px;
+  border: 1px solid #ddd;
+}
+.tsd-panel table tr {
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+}
+.tsd-panel table tr:nth-child(2n) {
+  background-color: #f8f8f8;
+}
+
+.tsd-panel-group {
+  margin: 60px 0;
+}
+.tsd-panel-group > h1, .tsd-panel-group > h2, .tsd-panel-group > h3 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#tsd-search {
+  transition: background-color 0.2s;
+}
+#tsd-search .title {
+  position: relative;
+  z-index: 2;
+}
+#tsd-search .field {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 40px;
+  height: 40px;
+}
+#tsd-search .field input {
+  box-sizing: border-box;
+  position: relative;
+  top: -50px;
+  z-index: 1;
+  width: 100%;
+  padding: 0 10px;
+  opacity: 0;
+  outline: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+}
+#tsd-search .field label {
+  position: absolute;
+  overflow: hidden;
+  right: -40px;
+}
+#tsd-search .field input,
+#tsd-search .title {
+  transition: opacity 0.2s;
+}
+#tsd-search .results {
+  position: absolute;
+  visibility: hidden;
+  top: 40px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+}
+#tsd-search .results li {
+  padding: 0 10px;
+  background-color: var(--color-background);
+}
+#tsd-search .results li:nth-child(even) {
+  background-color: var(--color-panel);
+}
+#tsd-search .results li.state {
+  display: none;
+}
+#tsd-search .results li.current,
+#tsd-search .results li:hover {
+  background-color: var(--color-panel-divider);
+}
+#tsd-search .results a {
+  display: block;
+}
+#tsd-search .results a:before {
+  top: 10px;
+}
+#tsd-search .results span.parent {
+  color: var(--color-text-aside);
+  font-weight: normal;
+}
+#tsd-search.has-focus {
+  background-color: var(--color-panel-divider);
+}
+#tsd-search.has-focus .field input {
+  top: 0;
+  opacity: 1;
+}
+#tsd-search.has-focus .title {
+  z-index: 0;
+  opacity: 0;
+}
+#tsd-search.has-focus .results {
+  visibility: visible;
+}
+#tsd-search.loading .results li.state.loading {
+  display: block;
+}
+#tsd-search.failure .results li.state.failure {
+  display: block;
+}
+
+.tsd-signature {
+  margin: 0 0 1em 0;
+  padding: 10px;
+  border: 1px solid var(--color-panel-divider);
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+  overflow-x: auto;
+}
+.tsd-signature.tsd-kind-icon {
+  padding-left: 30px;
+}
+.tsd-signature.tsd-kind-icon:before {
+  top: 10px;
+  left: 10px;
+}
+.tsd-panel > .tsd-signature {
+  margin-left: -20px;
+  margin-right: -20px;
+  border-width: 1px 0;
+}
+.tsd-panel > .tsd-signature.tsd-kind-icon {
+  padding-left: 40px;
+}
+.tsd-panel > .tsd-signature.tsd-kind-icon:before {
+  left: 20px;
+}
+
+.tsd-signature-symbol {
+  color: var(--color-text-aside);
+  font-weight: normal;
+}
+
+.tsd-signature-type {
+  font-style: italic;
+  font-weight: normal;
+}
+
+.tsd-signatures {
+  padding: 0;
+  margin: 0 0 1em 0;
+  border: 1px solid var(--color-panel-divider);
+}
+.tsd-signatures .tsd-signature {
+  margin: 0;
+  border-width: 1px 0 0 0;
+  transition: background-color 0.1s;
+}
+.tsd-signatures .tsd-signature:first-child {
+  border-top-width: 0;
+}
+.tsd-signatures .tsd-signature.current {
+  background-color: var(--color-panel-divider);
+}
+.tsd-signatures.active > .tsd-signature {
+  cursor: pointer;
+}
+.tsd-panel > .tsd-signatures {
+  margin-left: -20px;
+  margin-right: -20px;
+  border-width: 1px 0;
+}
+.tsd-panel > .tsd-signatures .tsd-signature.tsd-kind-icon {
+  padding-left: 40px;
+}
+.tsd-panel > .tsd-signatures .tsd-signature.tsd-kind-icon:before {
+  left: 20px;
+}
+.tsd-panel > a.anchor + .tsd-signatures {
+  border-top-width: 0;
+  margin-top: -20px;
+}
+
+ul.tsd-descriptions {
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  list-style: none;
+}
+ul.tsd-descriptions.active > .tsd-description {
+  display: none;
+}
+ul.tsd-descriptions.active > .tsd-description.current {
+  display: block;
+}
+ul.tsd-descriptions.active > .tsd-description.fade-in {
+  animation: fade-in-delayed 0.3s;
+}
+ul.tsd-descriptions.active > .tsd-description.fade-out {
+  animation: fade-out-delayed 0.3s;
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+}
+ul.tsd-descriptions h4, ul.tsd-descriptions .tsd-index-panel h3, .tsd-index-panel ul.tsd-descriptions h3 {
+  font-size: 16px;
+  margin: 1em 0 0.5em 0;
+}
+
+ul.tsd-parameters,
+ul.tsd-type-parameters {
+  list-style: square;
+  margin: 0;
+  padding-left: 20px;
+}
+ul.tsd-parameters > li.tsd-parameter-signature,
+ul.tsd-type-parameters > li.tsd-parameter-signature {
+  list-style: none;
+  margin-left: -20px;
+}
+ul.tsd-parameters h5,
+ul.tsd-type-parameters h5 {
+  font-size: 16px;
+  margin: 1em 0 0.5em 0;
+}
+ul.tsd-parameters .tsd-comment,
+ul.tsd-type-parameters .tsd-comment {
+  margin-top: -0.5em;
+}
+
+.tsd-sources {
+  font-size: 14px;
+  color: var(--color-text-aside);
+  margin: 0 0 1em 0;
+}
+.tsd-sources a {
+  color: var(--color-text-aside);
+  text-decoration: underline;
+}
+.tsd-sources ul, .tsd-sources p {
+  margin: 0 !important;
+}
+.tsd-sources ul {
+  list-style: none;
+  padding: 0;
+}
+
+.tsd-page-toolbar {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  color: var(--color-toolbar-text);
+  background: var(--color-toolbar);
+  border-bottom: 1px solid var(--color-panel-divider);
+  transition: transform 0.3s linear;
+}
+.tsd-page-toolbar a {
+  color: var(--color-toolbar-text);
+  text-decoration: none;
+}
+.tsd-page-toolbar a.title {
+  font-weight: bold;
+}
+.tsd-page-toolbar a.title:hover {
+  text-decoration: underline;
+}
+.tsd-page-toolbar .table-wrap {
+  display: table;
+  width: 100%;
+  height: 40px;
+}
+.tsd-page-toolbar .table-cell {
+  display: table-cell;
+  position: relative;
+  white-space: nowrap;
+  line-height: 40px;
+}
+.tsd-page-toolbar .table-cell:first-child {
+  width: 100%;
+}
+
+.tsd-page-toolbar--hide {
+  transform: translateY(-100%);
+}
+
+.tsd-select .tsd-select-list li:before, .tsd-select .tsd-select-label:before, .tsd-widget:before {
+  content: "";
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin: 0 -8px 0 0;
+  background-image: url(../images/widgets.png);
+  background-repeat: no-repeat;
+  text-indent: -1024px;
+  vertical-align: bottom;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  .tsd-select .tsd-select-list li:before, .tsd-select .tsd-select-label:before, .tsd-widget:before {
+    background-image: url(../images/widgets@2x.png);
+    background-size: 320px 40px;
+  }
+}
+
+.tsd-widget {
+  display: inline-block;
+  overflow: hidden;
+  opacity: 0.6;
+  height: 40px;
+  transition: opacity 0.1s, background-color 0.2s;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+.tsd-widget:hover {
+  opacity: 0.8;
+}
+.tsd-widget.active {
+  opacity: 1;
+  background-color: var(--color-panel-divider);
+}
+.tsd-widget.no-caption {
+  width: 40px;
+}
+.tsd-widget.no-caption:before {
+  margin: 0;
+}
+.tsd-widget.search:before {
+  background-position: 0 0;
+}
+.tsd-widget.menu:before {
+  background-position: -40px 0;
+}
+.tsd-widget.options:before {
+  background-position: -80px 0;
+}
+.tsd-widget.options, .tsd-widget.menu {
+  display: none;
+}
+@media (max-width: 900px) {
+  .tsd-widget.options, .tsd-widget.menu {
+    display: inline-block;
+  }
+}
+input[type=checkbox] + .tsd-widget:before {
+  background-position: -120px 0;
+}
+input[type=checkbox]:checked + .tsd-widget:before {
+  background-position: -160px 0;
+}
+
+.tsd-select {
+  position: relative;
+  display: inline-block;
+  height: 40px;
+  transition: opacity 0.1s, background-color 0.2s;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+.tsd-select .tsd-select-label {
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.tsd-select .tsd-select-label:before {
+  background-position: -240px 0;
+}
+.tsd-select.active .tsd-select-label {
+  opacity: 0.8;
+}
+.tsd-select.active .tsd-select-list {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+.tsd-select .tsd-select-list {
+  position: absolute;
+  visibility: hidden;
+  top: 40px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  list-style: none;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+  transition: visibility 0s 0.2s, opacity 0.2s;
+}
+.tsd-select .tsd-select-list li {
+  padding: 0 20px 0 0;
+  background-color: var(--color-background);
+}
+.tsd-select .tsd-select-list li:before {
+  background-position: 40px 0;
+}
+.tsd-select .tsd-select-list li:nth-child(even) {
+  background-color: var(--color-panel);
+}
+.tsd-select .tsd-select-list li:hover {
+  background-color: var(--color-panel-divider);
+}
+.tsd-select .tsd-select-list li.selected:before {
+  background-position: -200px 0;
+}
+@media (max-width: 900px) {
+  .tsd-select .tsd-select-list {
+    top: 0;
+    left: auto;
+    right: 100%;
+    margin-right: -5px;
+  }
+  .tsd-select .tsd-select-label:before {
+    background-position: -280px 0;
+  }
+}
+
+img {
+  max-width: 100%;
+}
diff --git a/docs/assets/images/icons.png b/docs/assets/images/icons.png
new file mode 100644
index 000000000..3836d5fe4
Binary files /dev/null and b/docs/assets/images/icons.png differ
diff --git a/docs/assets/images/icons@2x.png b/docs/assets/images/icons@2x.png
new file mode 100644
index 000000000..5a209e2f6
Binary files /dev/null and b/docs/assets/images/icons@2x.png differ
diff --git a/docs/assets/images/widgets.png b/docs/assets/images/widgets.png
new file mode 100644
index 000000000..c7380532a
Binary files /dev/null and b/docs/assets/images/widgets.png differ
diff --git a/docs/assets/images/widgets@2x.png b/docs/assets/images/widgets@2x.png
new file mode 100644
index 000000000..4bbbd5727
Binary files /dev/null and b/docs/assets/images/widgets@2x.png differ
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
new file mode 100644
index 000000000..dc257a868
--- /dev/null
+++ b/docs/assets/js/main.js
@@ -0,0 +1,248 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is not neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "../node_modules/lunr/lunr.js":
+/*!************************************!*\
+  !*** ../node_modules/lunr/lunr.js ***!
+  \************************************/
+/***/ ((module, exports, __webpack_require__) => {
+
+eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**\n * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9\n * Copyright (C) 2020 Oliver Nightingale\n * @license MIT\n */\n\n;(function(){\n\n/**\n * A convenience function for configuring and constructing\n * a new lunr Index.\n *\n * A lunr.Builder instance is created and the pipeline setup\n * with a trimmer, stop word filter and stemmer.\n *\n * This builder object is yielded to the configuration function\n * that is passed as a parameter, allowing the list of fields\n * and other builder parameters to be customised.\n *\n * All documents _must_ be added within the passed config function.\n *\n * @example\n * var idx = lunr(function () {\n *   this.field('title')\n *   this.field('body')\n *   this.ref('id')\n *\n *   documents.forEach(function (doc) {\n *     this.add(doc)\n *   }, this)\n * })\n *\n * @see {@link lunr.Builder}\n * @see {@link lunr.Pipeline}\n * @see {@link lunr.trimmer}\n * @see {@link lunr.stopWordFilter}\n * @see {@link lunr.stemmer}\n * @namespace {function} lunr\n */\nvar lunr = function (config) {\n  var builder = new lunr.Builder\n\n  builder.pipeline.add(\n    lunr.trimmer,\n    lunr.stopWordFilter,\n    lunr.stemmer\n  )\n\n  builder.searchPipeline.add(\n    lunr.stemmer\n  )\n\n  config.call(builder, builder)\n  return builder.build()\n}\n\nlunr.version = \"2.3.9\"\n/*!\n * lunr.utils\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * A namespace containing utils for the rest of the lunr library\n * @namespace lunr.utils\n */\nlunr.utils = {}\n\n/**\n * Print a warning message to the console.\n *\n * @param {String} message The message to be printed.\n * @memberOf lunr.utils\n * @function\n */\nlunr.utils.warn = (function (global) {\n  /* eslint-disable no-console */\n  return function (message) {\n    if (global.console && console.warn) {\n      console.warn(message)\n    }\n  }\n  /* eslint-enable no-console */\n})(this)\n\n/**\n * Convert an object to a string.\n *\n * In the case of `null` and `undefined` the function returns\n * the empty string, in all other cases the result of calling\n * `toString` on the passed object is returned.\n *\n * @param {Any} obj The object to convert to a string.\n * @return {String} string representation of the passed object.\n * @memberOf lunr.utils\n */\nlunr.utils.asString = function (obj) {\n  if (obj === void 0 || obj === null) {\n    return \"\"\n  } else {\n    return obj.toString()\n  }\n}\n\n/**\n * Clones an object.\n *\n * Will create a copy of an existing object such that any mutations\n * on the copy cannot affect the original.\n *\n * Only shallow objects are supported, passing a nested object to this\n * function will cause a TypeError.\n *\n * Objects with primitives, and arrays of primitives are supported.\n *\n * @param {Object} obj The object to clone.\n * @return {Object} a clone of the passed object.\n * @throws {TypeError} when a nested object is passed.\n * @memberOf Utils\n */\nlunr.utils.clone = function (obj) {\n  if (obj === null || obj === undefined) {\n    return obj\n  }\n\n  var clone = Object.create(null),\n      keys = Object.keys(obj)\n\n  for (var i = 0; i < keys.length; i++) {\n    var key = keys[i],\n        val = obj[key]\n\n    if (Array.isArray(val)) {\n      clone[key] = val.slice()\n      continue\n    }\n\n    if (typeof val === 'string' ||\n        typeof val === 'number' ||\n        typeof val === 'boolean') {\n      clone[key] = val\n      continue\n    }\n\n    throw new TypeError(\"clone is not deep and does not support nested objects\")\n  }\n\n  return clone\n}\nlunr.FieldRef = function (docRef, fieldName, stringValue) {\n  this.docRef = docRef\n  this.fieldName = fieldName\n  this._stringValue = stringValue\n}\n\nlunr.FieldRef.joiner = \"/\"\n\nlunr.FieldRef.fromString = function (s) {\n  var n = s.indexOf(lunr.FieldRef.joiner)\n\n  if (n === -1) {\n    throw \"malformed field ref string\"\n  }\n\n  var fieldRef = s.slice(0, n),\n      docRef = s.slice(n + 1)\n\n  return new lunr.FieldRef (docRef, fieldRef, s)\n}\n\nlunr.FieldRef.prototype.toString = function () {\n  if (this._stringValue == undefined) {\n    this._stringValue = this.fieldName + lunr.FieldRef.joiner + this.docRef\n  }\n\n  return this._stringValue\n}\n/*!\n * lunr.Set\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * A lunr set.\n *\n * @constructor\n */\nlunr.Set = function (elements) {\n  this.elements = Object.create(null)\n\n  if (elements) {\n    this.length = elements.length\n\n    for (var i = 0; i < this.length; i++) {\n      this.elements[elements[i]] = true\n    }\n  } else {\n    this.length = 0\n  }\n}\n\n/**\n * A complete set that contains all elements.\n *\n * @static\n * @readonly\n * @type {lunr.Set}\n */\nlunr.Set.complete = {\n  intersect: function (other) {\n    return other\n  },\n\n  union: function () {\n    return this\n  },\n\n  contains: function () {\n    return true\n  }\n}\n\n/**\n * An empty set that contains no elements.\n *\n * @static\n * @readonly\n * @type {lunr.Set}\n */\nlunr.Set.empty = {\n  intersect: function () {\n    return this\n  },\n\n  union: function (other) {\n    return other\n  },\n\n  contains: function () {\n    return false\n  }\n}\n\n/**\n * Returns true if this set contains the specified object.\n *\n * @param {object} object - Object whose presence in this set is to be tested.\n * @returns {boolean} - True if this set contains the specified object.\n */\nlunr.Set.prototype.contains = function (object) {\n  return !!this.elements[object]\n}\n\n/**\n * Returns a new set containing only the elements that are present in both\n * this set and the specified set.\n *\n * @param {lunr.Set} other - set to intersect with this set.\n * @returns {lunr.Set} a new set that is the intersection of this and the specified set.\n */\n\nlunr.Set.prototype.intersect = function (other) {\n  var a, b, elements, intersection = []\n\n  if (other === lunr.Set.complete) {\n    return this\n  }\n\n  if (other === lunr.Set.empty) {\n    return other\n  }\n\n  if (this.length < other.length) {\n    a = this\n    b = other\n  } else {\n    a = other\n    b = this\n  }\n\n  elements = Object.keys(a.elements)\n\n  for (var i = 0; i < elements.length; i++) {\n    var element = elements[i]\n    if (element in b.elements) {\n      intersection.push(element)\n    }\n  }\n\n  return new lunr.Set (intersection)\n}\n\n/**\n * Returns a new set combining the elements of this and the specified set.\n *\n * @param {lunr.Set} other - set to union with this set.\n * @return {lunr.Set} a new set that is the union of this and the specified set.\n */\n\nlunr.Set.prototype.union = function (other) {\n  if (other === lunr.Set.complete) {\n    return lunr.Set.complete\n  }\n\n  if (other === lunr.Set.empty) {\n    return this\n  }\n\n  return new lunr.Set(Object.keys(this.elements).concat(Object.keys(other.elements)))\n}\n/**\n * A function to calculate the inverse document frequency for\n * a posting. This is shared between the builder and the index\n *\n * @private\n * @param {object} posting - The posting for a given term\n * @param {number} documentCount - The total number of documents.\n */\nlunr.idf = function (posting, documentCount) {\n  var documentsWithTerm = 0\n\n  for (var fieldName in posting) {\n    if (fieldName == '_index') continue // Ignore the term index, its not a field\n    documentsWithTerm += Object.keys(posting[fieldName]).length\n  }\n\n  var x = (documentCount - documentsWithTerm + 0.5) / (documentsWithTerm + 0.5)\n\n  return Math.log(1 + Math.abs(x))\n}\n\n/**\n * A token wraps a string representation of a token\n * as it is passed through the text processing pipeline.\n *\n * @constructor\n * @param {string} [str=''] - The string token being wrapped.\n * @param {object} [metadata={}] - Metadata associated with this token.\n */\nlunr.Token = function (str, metadata) {\n  this.str = str || \"\"\n  this.metadata = metadata || {}\n}\n\n/**\n * Returns the token string that is being wrapped by this object.\n *\n * @returns {string}\n */\nlunr.Token.prototype.toString = function () {\n  return this.str\n}\n\n/**\n * A token update function is used when updating or optionally\n * when cloning a token.\n *\n * @callback lunr.Token~updateFunction\n * @param {string} str - The string representation of the token.\n * @param {Object} metadata - All metadata associated with this token.\n */\n\n/**\n * Applies the given function to the wrapped string token.\n *\n * @example\n * token.update(function (str, metadata) {\n *   return str.toUpperCase()\n * })\n *\n * @param {lunr.Token~updateFunction} fn - A function to apply to the token string.\n * @returns {lunr.Token}\n */\nlunr.Token.prototype.update = function (fn) {\n  this.str = fn(this.str, this.metadata)\n  return this\n}\n\n/**\n * Creates a clone of this token. Optionally a function can be\n * applied to the cloned token.\n *\n * @param {lunr.Token~updateFunction} [fn] - An optional function to apply to the cloned token.\n * @returns {lunr.Token}\n */\nlunr.Token.prototype.clone = function (fn) {\n  fn = fn || function (s) { return s }\n  return new lunr.Token (fn(this.str, this.metadata), this.metadata)\n}\n/*!\n * lunr.tokenizer\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * A function for splitting a string into tokens ready to be inserted into\n * the search index. Uses `lunr.tokenizer.separator` to split strings, change\n * the value of this property to change how strings are split into tokens.\n *\n * This tokenizer will convert its parameter to a string by calling `toString` and\n * then will split this string on the character in `lunr.tokenizer.separator`.\n * Arrays will have their elements converted to strings and wrapped in a lunr.Token.\n *\n * Optional metadata can be passed to the tokenizer, this metadata will be cloned and\n * added as metadata to every token that is created from the object to be tokenized.\n *\n * @static\n * @param {?(string|object|object[])} obj - The object to convert into tokens\n * @param {?object} metadata - Optional metadata to associate with every token\n * @returns {lunr.Token[]}\n * @see {@link lunr.Pipeline}\n */\nlunr.tokenizer = function (obj, metadata) {\n  if (obj == null || obj == undefined) {\n    return []\n  }\n\n  if (Array.isArray(obj)) {\n    return obj.map(function (t) {\n      return new lunr.Token(\n        lunr.utils.asString(t).toLowerCase(),\n        lunr.utils.clone(metadata)\n      )\n    })\n  }\n\n  var str = obj.toString().toLowerCase(),\n      len = str.length,\n      tokens = []\n\n  for (var sliceEnd = 0, sliceStart = 0; sliceEnd <= len; sliceEnd++) {\n    var char = str.charAt(sliceEnd),\n        sliceLength = sliceEnd - sliceStart\n\n    if ((char.match(lunr.tokenizer.separator) || sliceEnd == len)) {\n\n      if (sliceLength > 0) {\n        var tokenMetadata = lunr.utils.clone(metadata) || {}\n        tokenMetadata[\"position\"] = [sliceStart, sliceLength]\n        tokenMetadata[\"index\"] = tokens.length\n\n        tokens.push(\n          new lunr.Token (\n            str.slice(sliceStart, sliceEnd),\n            tokenMetadata\n          )\n        )\n      }\n\n      sliceStart = sliceEnd + 1\n    }\n\n  }\n\n  return tokens\n}\n\n/**\n * The separator used to split a string into tokens. Override this property to change the behaviour of\n * `lunr.tokenizer` behaviour when tokenizing strings. By default this splits on whitespace and hyphens.\n *\n * @static\n * @see lunr.tokenizer\n */\nlunr.tokenizer.separator = /[\\s\\-]+/\n/*!\n * lunr.Pipeline\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * lunr.Pipelines maintain an ordered list of functions to be applied to all\n * tokens in documents entering the search index and queries being ran against\n * the index.\n *\n * An instance of lunr.Index created with the lunr shortcut will contain a\n * pipeline with a stop word filter and an English language stemmer. Extra\n * functions can be added before or after either of these functions or these\n * default functions can be removed.\n *\n * When run the pipeline will call each function in turn, passing a token, the\n * index of that token in the original list of all tokens and finally a list of\n * all the original tokens.\n *\n * The output of functions in the pipeline will be passed to the next function\n * in the pipeline. To exclude a token from entering the index the function\n * should return undefined, the rest of the pipeline will not be called with\n * this token.\n *\n * For serialisation of pipelines to work, all functions used in an instance of\n * a pipeline should be registered with lunr.Pipeline. Registered functions can\n * then be loaded. If trying to load a serialised pipeline that uses functions\n * that are not registered an error will be thrown.\n *\n * If not planning on serialising the pipeline then registering pipeline functions\n * is not necessary.\n *\n * @constructor\n */\nlunr.Pipeline = function () {\n  this._stack = []\n}\n\nlunr.Pipeline.registeredFunctions = Object.create(null)\n\n/**\n * A pipeline function maps lunr.Token to lunr.Token. A lunr.Token contains the token\n * string as well as all known metadata. A pipeline function can mutate the token string\n * or mutate (or add) metadata for a given token.\n *\n * A pipeline function can indicate that the passed token should be discarded by returning\n * null, undefined or an empty string. This token will not be passed to any downstream pipeline\n * functions and will not be added to the index.\n *\n * Multiple tokens can be returned by returning an array of tokens. Each token will be passed\n * to any downstream pipeline functions and all will returned tokens will be added to the index.\n *\n * Any number of pipeline functions may be chained together using a lunr.Pipeline.\n *\n * @interface lunr.PipelineFunction\n * @param {lunr.Token} token - A token from the document being processed.\n * @param {number} i - The index of this token in the complete list of tokens for this document/field.\n * @param {lunr.Token[]} tokens - All tokens for this document/field.\n * @returns {(?lunr.Token|lunr.Token[])}\n */\n\n/**\n * Register a function with the pipeline.\n *\n * Functions that are used in the pipeline should be registered if the pipeline\n * needs to be serialised, or a serialised pipeline needs to be loaded.\n *\n * Registering a function does not add it to a pipeline, functions must still be\n * added to instances of the pipeline for them to be used when running a pipeline.\n *\n * @param {lunr.PipelineFunction} fn - The function to check for.\n * @param {String} label - The label to register this function with\n */\nlunr.Pipeline.registerFunction = function (fn, label) {\n  if (label in this.registeredFunctions) {\n    lunr.utils.warn('Overwriting existing registered function: ' + label)\n  }\n\n  fn.label = label\n  lunr.Pipeline.registeredFunctions[fn.label] = fn\n}\n\n/**\n * Warns if the function is not registered as a Pipeline function.\n *\n * @param {lunr.PipelineFunction} fn - The function to check for.\n * @private\n */\nlunr.Pipeline.warnIfFunctionNotRegistered = function (fn) {\n  var isRegistered = fn.label && (fn.label in this.registeredFunctions)\n\n  if (!isRegistered) {\n    lunr.utils.warn('Function is not registered with pipeline. This may cause problems when serialising the index.\\n', fn)\n  }\n}\n\n/**\n * Loads a previously serialised pipeline.\n *\n * All functions to be loaded must already be registered with lunr.Pipeline.\n * If any function from the serialised data has not been registered then an\n * error will be thrown.\n *\n * @param {Object} serialised - The serialised pipeline to load.\n * @returns {lunr.Pipeline}\n */\nlunr.Pipeline.load = function (serialised) {\n  var pipeline = new lunr.Pipeline\n\n  serialised.forEach(function (fnName) {\n    var fn = lunr.Pipeline.registeredFunctions[fnName]\n\n    if (fn) {\n      pipeline.add(fn)\n    } else {\n      throw new Error('Cannot load unregistered function: ' + fnName)\n    }\n  })\n\n  return pipeline\n}\n\n/**\n * Adds new functions to the end of the pipeline.\n *\n * Logs a warning if the function has not been registered.\n *\n * @param {lunr.PipelineFunction[]} functions - Any number of functions to add to the pipeline.\n */\nlunr.Pipeline.prototype.add = function () {\n  var fns = Array.prototype.slice.call(arguments)\n\n  fns.forEach(function (fn) {\n    lunr.Pipeline.warnIfFunctionNotRegistered(fn)\n    this._stack.push(fn)\n  }, this)\n}\n\n/**\n * Adds a single function after a function that already exists in the\n * pipeline.\n *\n * Logs a warning if the function has not been registered.\n *\n * @param {lunr.PipelineFunction} existingFn - A function that already exists in the pipeline.\n * @param {lunr.PipelineFunction} newFn - The new function to add to the pipeline.\n */\nlunr.Pipeline.prototype.after = function (existingFn, newFn) {\n  lunr.Pipeline.warnIfFunctionNotRegistered(newFn)\n\n  var pos = this._stack.indexOf(existingFn)\n  if (pos == -1) {\n    throw new Error('Cannot find existingFn')\n  }\n\n  pos = pos + 1\n  this._stack.splice(pos, 0, newFn)\n}\n\n/**\n * Adds a single function before a function that already exists in the\n * pipeline.\n *\n * Logs a warning if the function has not been registered.\n *\n * @param {lunr.PipelineFunction} existingFn - A function that already exists in the pipeline.\n * @param {lunr.PipelineFunction} newFn - The new function to add to the pipeline.\n */\nlunr.Pipeline.prototype.before = function (existingFn, newFn) {\n  lunr.Pipeline.warnIfFunctionNotRegistered(newFn)\n\n  var pos = this._stack.indexOf(existingFn)\n  if (pos == -1) {\n    throw new Error('Cannot find existingFn')\n  }\n\n  this._stack.splice(pos, 0, newFn)\n}\n\n/**\n * Removes a function from the pipeline.\n *\n * @param {lunr.PipelineFunction} fn The function to remove from the pipeline.\n */\nlunr.Pipeline.prototype.remove = function (fn) {\n  var pos = this._stack.indexOf(fn)\n  if (pos == -1) {\n    return\n  }\n\n  this._stack.splice(pos, 1)\n}\n\n/**\n * Runs the current list of functions that make up the pipeline against the\n * passed tokens.\n *\n * @param {Array} tokens The tokens to run through the pipeline.\n * @returns {Array}\n */\nlunr.Pipeline.prototype.run = function (tokens) {\n  var stackLength = this._stack.length\n\n  for (var i = 0; i < stackLength; i++) {\n    var fn = this._stack[i]\n    var memo = []\n\n    for (var j = 0; j < tokens.length; j++) {\n      var result = fn(tokens[j], j, tokens)\n\n      if (result === null || result === void 0 || result === '') continue\n\n      if (Array.isArray(result)) {\n        for (var k = 0; k < result.length; k++) {\n          memo.push(result[k])\n        }\n      } else {\n        memo.push(result)\n      }\n    }\n\n    tokens = memo\n  }\n\n  return tokens\n}\n\n/**\n * Convenience method for passing a string through a pipeline and getting\n * strings out. This method takes care of wrapping the passed string in a\n * token and mapping the resulting tokens back to strings.\n *\n * @param {string} str - The string to pass through the pipeline.\n * @param {?object} metadata - Optional metadata to associate with the token\n * passed to the pipeline.\n * @returns {string[]}\n */\nlunr.Pipeline.prototype.runString = function (str, metadata) {\n  var token = new lunr.Token (str, metadata)\n\n  return this.run([token]).map(function (t) {\n    return t.toString()\n  })\n}\n\n/**\n * Resets the pipeline by removing any existing processors.\n *\n */\nlunr.Pipeline.prototype.reset = function () {\n  this._stack = []\n}\n\n/**\n * Returns a representation of the pipeline ready for serialisation.\n *\n * Logs a warning if the function has not been registered.\n *\n * @returns {Array}\n */\nlunr.Pipeline.prototype.toJSON = function () {\n  return this._stack.map(function (fn) {\n    lunr.Pipeline.warnIfFunctionNotRegistered(fn)\n\n    return fn.label\n  })\n}\n/*!\n * lunr.Vector\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * A vector is used to construct the vector space of documents and queries. These\n * vectors support operations to determine the similarity between two documents or\n * a document and a query.\n *\n * Normally no parameters are required for initializing a vector, but in the case of\n * loading a previously dumped vector the raw elements can be provided to the constructor.\n *\n * For performance reasons vectors are implemented with a flat array, where an elements\n * index is immediately followed by its value. E.g. [index, value, index, value]. This\n * allows the underlying array to be as sparse as possible and still offer decent\n * performance when being used for vector calculations.\n *\n * @constructor\n * @param {Number[]} [elements] - The flat list of element index and element value pairs.\n */\nlunr.Vector = function (elements) {\n  this._magnitude = 0\n  this.elements = elements || []\n}\n\n\n/**\n * Calculates the position within the vector to insert a given index.\n *\n * This is used internally by insert and upsert. If there are duplicate indexes then\n * the position is returned as if the value for that index were to be updated, but it\n * is the callers responsibility to check whether there is a duplicate at that index\n *\n * @param {Number} insertIdx - The index at which the element should be inserted.\n * @returns {Number}\n */\nlunr.Vector.prototype.positionForIndex = function (index) {\n  // For an empty vector the tuple can be inserted at the beginning\n  if (this.elements.length == 0) {\n    return 0\n  }\n\n  var start = 0,\n      end = this.elements.length / 2,\n      sliceLength = end - start,\n      pivotPoint = Math.floor(sliceLength / 2),\n      pivotIndex = this.elements[pivotPoint * 2]\n\n  while (sliceLength > 1) {\n    if (pivotIndex < index) {\n      start = pivotPoint\n    }\n\n    if (pivotIndex > index) {\n      end = pivotPoint\n    }\n\n    if (pivotIndex == index) {\n      break\n    }\n\n    sliceLength = end - start\n    pivotPoint = start + Math.floor(sliceLength / 2)\n    pivotIndex = this.elements[pivotPoint * 2]\n  }\n\n  if (pivotIndex == index) {\n    return pivotPoint * 2\n  }\n\n  if (pivotIndex > index) {\n    return pivotPoint * 2\n  }\n\n  if (pivotIndex < index) {\n    return (pivotPoint + 1) * 2\n  }\n}\n\n/**\n * Inserts an element at an index within the vector.\n *\n * Does not allow duplicates, will throw an error if there is already an entry\n * for this index.\n *\n * @param {Number} insertIdx - The index at which the element should be inserted.\n * @param {Number} val - The value to be inserted into the vector.\n */\nlunr.Vector.prototype.insert = function (insertIdx, val) {\n  this.upsert(insertIdx, val, function () {\n    throw \"duplicate index\"\n  })\n}\n\n/**\n * Inserts or updates an existing index within the vector.\n *\n * @param {Number} insertIdx - The index at which the element should be inserted.\n * @param {Number} val - The value to be inserted into the vector.\n * @param {function} fn - A function that is called for updates, the existing value and the\n * requested value are passed as arguments\n */\nlunr.Vector.prototype.upsert = function (insertIdx, val, fn) {\n  this._magnitude = 0\n  var position = this.positionForIndex(insertIdx)\n\n  if (this.elements[position] == insertIdx) {\n    this.elements[position + 1] = fn(this.elements[position + 1], val)\n  } else {\n    this.elements.splice(position, 0, insertIdx, val)\n  }\n}\n\n/**\n * Calculates the magnitude of this vector.\n *\n * @returns {Number}\n */\nlunr.Vector.prototype.magnitude = function () {\n  if (this._magnitude) return this._magnitude\n\n  var sumOfSquares = 0,\n      elementsLength = this.elements.length\n\n  for (var i = 1; i < elementsLength; i += 2) {\n    var val = this.elements[i]\n    sumOfSquares += val * val\n  }\n\n  return this._magnitude = Math.sqrt(sumOfSquares)\n}\n\n/**\n * Calculates the dot product of this vector and another vector.\n *\n * @param {lunr.Vector} otherVector - The vector to compute the dot product with.\n * @returns {Number}\n */\nlunr.Vector.prototype.dot = function (otherVector) {\n  var dotProduct = 0,\n      a = this.elements, b = otherVector.elements,\n      aLen = a.length, bLen = b.length,\n      aVal = 0, bVal = 0,\n      i = 0, j = 0\n\n  while (i < aLen && j < bLen) {\n    aVal = a[i], bVal = b[j]\n    if (aVal < bVal) {\n      i += 2\n    } else if (aVal > bVal) {\n      j += 2\n    } else if (aVal == bVal) {\n      dotProduct += a[i + 1] * b[j + 1]\n      i += 2\n      j += 2\n    }\n  }\n\n  return dotProduct\n}\n\n/**\n * Calculates the similarity between this vector and another vector.\n *\n * @param {lunr.Vector} otherVector - The other vector to calculate the\n * similarity with.\n * @returns {Number}\n */\nlunr.Vector.prototype.similarity = function (otherVector) {\n  return this.dot(otherVector) / this.magnitude() || 0\n}\n\n/**\n * Converts the vector to an array of the elements within the vector.\n *\n * @returns {Number[]}\n */\nlunr.Vector.prototype.toArray = function () {\n  var output = new Array (this.elements.length / 2)\n\n  for (var i = 1, j = 0; i < this.elements.length; i += 2, j++) {\n    output[j] = this.elements[i]\n  }\n\n  return output\n}\n\n/**\n * A JSON serializable representation of the vector.\n *\n * @returns {Number[]}\n */\nlunr.Vector.prototype.toJSON = function () {\n  return this.elements\n}\n/* eslint-disable */\n/*!\n * lunr.stemmer\n * Copyright (C) 2020 Oliver Nightingale\n * Includes code from - http://tartarus.org/~martin/PorterStemmer/js.txt\n */\n\n/**\n * lunr.stemmer is an english language stemmer, this is a JavaScript\n * implementation of the PorterStemmer taken from http://tartarus.org/~martin\n *\n * @static\n * @implements {lunr.PipelineFunction}\n * @param {lunr.Token} token - The string to stem\n * @returns {lunr.Token}\n * @see {@link lunr.Pipeline}\n * @function\n */\nlunr.stemmer = (function(){\n  var step2list = {\n      \"ational\" : \"ate\",\n      \"tional\" : \"tion\",\n      \"enci\" : \"ence\",\n      \"anci\" : \"ance\",\n      \"izer\" : \"ize\",\n      \"bli\" : \"ble\",\n      \"alli\" : \"al\",\n      \"entli\" : \"ent\",\n      \"eli\" : \"e\",\n      \"ousli\" : \"ous\",\n      \"ization\" : \"ize\",\n      \"ation\" : \"ate\",\n      \"ator\" : \"ate\",\n      \"alism\" : \"al\",\n      \"iveness\" : \"ive\",\n      \"fulness\" : \"ful\",\n      \"ousness\" : \"ous\",\n      \"aliti\" : \"al\",\n      \"iviti\" : \"ive\",\n      \"biliti\" : \"ble\",\n      \"logi\" : \"log\"\n    },\n\n    step3list = {\n      \"icate\" : \"ic\",\n      \"ative\" : \"\",\n      \"alize\" : \"al\",\n      \"iciti\" : \"ic\",\n      \"ical\" : \"ic\",\n      \"ful\" : \"\",\n      \"ness\" : \"\"\n    },\n\n    c = \"[^aeiou]\",          // consonant\n    v = \"[aeiouy]\",          // vowel\n    C = c + \"[^aeiouy]*\",    // consonant sequence\n    V = v + \"[aeiou]*\",      // vowel sequence\n\n    mgr0 = \"^(\" + C + \")?\" + V + C,               // [C]VC... is m>0\n    meq1 = \"^(\" + C + \")?\" + V + C + \"(\" + V + \")?$\",  // [C]VC[V] is m=1\n    mgr1 = \"^(\" + C + \")?\" + V + C + V + C,       // [C]VCVC... is m>1\n    s_v = \"^(\" + C + \")?\" + v;                   // vowel in stem\n\n  var re_mgr0 = new RegExp(mgr0);\n  var re_mgr1 = new RegExp(mgr1);\n  var re_meq1 = new RegExp(meq1);\n  var re_s_v = new RegExp(s_v);\n\n  var re_1a = /^(.+?)(ss|i)es$/;\n  var re2_1a = /^(.+?)([^s])s$/;\n  var re_1b = /^(.+?)eed$/;\n  var re2_1b = /^(.+?)(ed|ing)$/;\n  var re_1b_2 = /.$/;\n  var re2_1b_2 = /(at|bl|iz)$/;\n  var re3_1b_2 = new RegExp(\"([^aeiouylsz])\\\\1$\");\n  var re4_1b_2 = new RegExp(\"^\" + C + v + \"[^aeiouwxy]$\");\n\n  var re_1c = /^(.+?[^aeiou])y$/;\n  var re_2 = /^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/;\n\n  var re_3 = /^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/;\n\n  var re_4 = /^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/;\n  var re2_4 = /^(.+?)(s|t)(ion)$/;\n\n  var re_5 = /^(.+?)e$/;\n  var re_5_1 = /ll$/;\n  var re3_5 = new RegExp(\"^\" + C + v + \"[^aeiouwxy]$\");\n\n  var porterStemmer = function porterStemmer(w) {\n    var stem,\n      suffix,\n      firstch,\n      re,\n      re2,\n      re3,\n      re4;\n\n    if (w.length < 3) { return w; }\n\n    firstch = w.substr(0,1);\n    if (firstch == \"y\") {\n      w = firstch.toUpperCase() + w.substr(1);\n    }\n\n    // Step 1a\n    re = re_1a\n    re2 = re2_1a;\n\n    if (re.test(w)) { w = w.replace(re,\"$1$2\"); }\n    else if (re2.test(w)) { w = w.replace(re2,\"$1$2\"); }\n\n    // Step 1b\n    re = re_1b;\n    re2 = re2_1b;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      re = re_mgr0;\n      if (re.test(fp[1])) {\n        re = re_1b_2;\n        w = w.replace(re,\"\");\n      }\n    } else if (re2.test(w)) {\n      var fp = re2.exec(w);\n      stem = fp[1];\n      re2 = re_s_v;\n      if (re2.test(stem)) {\n        w = stem;\n        re2 = re2_1b_2;\n        re3 = re3_1b_2;\n        re4 = re4_1b_2;\n        if (re2.test(w)) { w = w + \"e\"; }\n        else if (re3.test(w)) { re = re_1b_2; w = w.replace(re,\"\"); }\n        else if (re4.test(w)) { w = w + \"e\"; }\n      }\n    }\n\n    // Step 1c - replace suffix y or Y by i if preceded by a non-vowel which is not the first letter of the word (so cry -> cri, by -> by, say -> say)\n    re = re_1c;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      stem = fp[1];\n      w = stem + \"i\";\n    }\n\n    // Step 2\n    re = re_2;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      stem = fp[1];\n      suffix = fp[2];\n      re = re_mgr0;\n      if (re.test(stem)) {\n        w = stem + step2list[suffix];\n      }\n    }\n\n    // Step 3\n    re = re_3;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      stem = fp[1];\n      suffix = fp[2];\n      re = re_mgr0;\n      if (re.test(stem)) {\n        w = stem + step3list[suffix];\n      }\n    }\n\n    // Step 4\n    re = re_4;\n    re2 = re2_4;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      stem = fp[1];\n      re = re_mgr1;\n      if (re.test(stem)) {\n        w = stem;\n      }\n    } else if (re2.test(w)) {\n      var fp = re2.exec(w);\n      stem = fp[1] + fp[2];\n      re2 = re_mgr1;\n      if (re2.test(stem)) {\n        w = stem;\n      }\n    }\n\n    // Step 5\n    re = re_5;\n    if (re.test(w)) {\n      var fp = re.exec(w);\n      stem = fp[1];\n      re = re_mgr1;\n      re2 = re_meq1;\n      re3 = re3_5;\n      if (re.test(stem) || (re2.test(stem) && !(re3.test(stem)))) {\n        w = stem;\n      }\n    }\n\n    re = re_5_1;\n    re2 = re_mgr1;\n    if (re.test(w) && re2.test(w)) {\n      re = re_1b_2;\n      w = w.replace(re,\"\");\n    }\n\n    // and turn initial Y back to y\n\n    if (firstch == \"y\") {\n      w = firstch.toLowerCase() + w.substr(1);\n    }\n\n    return w;\n  };\n\n  return function (token) {\n    return token.update(porterStemmer);\n  }\n})();\n\nlunr.Pipeline.registerFunction(lunr.stemmer, 'stemmer')\n/*!\n * lunr.stopWordFilter\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * lunr.generateStopWordFilter builds a stopWordFilter function from the provided\n * list of stop words.\n *\n * The built in lunr.stopWordFilter is built using this generator and can be used\n * to generate custom stopWordFilters for applications or non English languages.\n *\n * @function\n * @param {Array} token The token to pass through the filter\n * @returns {lunr.PipelineFunction}\n * @see lunr.Pipeline\n * @see lunr.stopWordFilter\n */\nlunr.generateStopWordFilter = function (stopWords) {\n  var words = stopWords.reduce(function (memo, stopWord) {\n    memo[stopWord] = stopWord\n    return memo\n  }, {})\n\n  return function (token) {\n    if (token && words[token.toString()] !== token.toString()) return token\n  }\n}\n\n/**\n * lunr.stopWordFilter is an English language stop word list filter, any words\n * contained in the list will not be passed through the filter.\n *\n * This is intended to be used in the Pipeline. If the token does not pass the\n * filter then undefined will be returned.\n *\n * @function\n * @implements {lunr.PipelineFunction}\n * @params {lunr.Token} token - A token to check for being a stop word.\n * @returns {lunr.Token}\n * @see {@link lunr.Pipeline}\n */\nlunr.stopWordFilter = lunr.generateStopWordFilter([\n  'a',\n  'able',\n  'about',\n  'across',\n  'after',\n  'all',\n  'almost',\n  'also',\n  'am',\n  'among',\n  'an',\n  'and',\n  'any',\n  'are',\n  'as',\n  'at',\n  'be',\n  'because',\n  'been',\n  'but',\n  'by',\n  'can',\n  'cannot',\n  'could',\n  'dear',\n  'did',\n  'do',\n  'does',\n  'either',\n  'else',\n  'ever',\n  'every',\n  'for',\n  'from',\n  'get',\n  'got',\n  'had',\n  'has',\n  'have',\n  'he',\n  'her',\n  'hers',\n  'him',\n  'his',\n  'how',\n  'however',\n  'i',\n  'if',\n  'in',\n  'into',\n  'is',\n  'it',\n  'its',\n  'just',\n  'least',\n  'let',\n  'like',\n  'likely',\n  'may',\n  'me',\n  'might',\n  'most',\n  'must',\n  'my',\n  'neither',\n  'no',\n  'nor',\n  'not',\n  'of',\n  'off',\n  'often',\n  'on',\n  'only',\n  'or',\n  'other',\n  'our',\n  'own',\n  'rather',\n  'said',\n  'say',\n  'says',\n  'she',\n  'should',\n  'since',\n  'so',\n  'some',\n  'than',\n  'that',\n  'the',\n  'their',\n  'them',\n  'then',\n  'there',\n  'these',\n  'they',\n  'this',\n  'tis',\n  'to',\n  'too',\n  'twas',\n  'us',\n  'wants',\n  'was',\n  'we',\n  'were',\n  'what',\n  'when',\n  'where',\n  'which',\n  'while',\n  'who',\n  'whom',\n  'why',\n  'will',\n  'with',\n  'would',\n  'yet',\n  'you',\n  'your'\n])\n\nlunr.Pipeline.registerFunction(lunr.stopWordFilter, 'stopWordFilter')\n/*!\n * lunr.trimmer\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * lunr.trimmer is a pipeline function for trimming non word\n * characters from the beginning and end of tokens before they\n * enter the index.\n *\n * This implementation may not work correctly for non latin\n * characters and should either be removed or adapted for use\n * with languages with non-latin characters.\n *\n * @static\n * @implements {lunr.PipelineFunction}\n * @param {lunr.Token} token The token to pass through the filter\n * @returns {lunr.Token}\n * @see lunr.Pipeline\n */\nlunr.trimmer = function (token) {\n  return token.update(function (s) {\n    return s.replace(/^\\W+/, '').replace(/\\W+$/, '')\n  })\n}\n\nlunr.Pipeline.registerFunction(lunr.trimmer, 'trimmer')\n/*!\n * lunr.TokenSet\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * A token set is used to store the unique list of all tokens\n * within an index. Token sets are also used to represent an\n * incoming query to the index, this query token set and index\n * token set are then intersected to find which tokens to look\n * up in the inverted index.\n *\n * A token set can hold multiple tokens, as in the case of the\n * index token set, or it can hold a single token as in the\n * case of a simple query token set.\n *\n * Additionally token sets are used to perform wildcard matching.\n * Leading, contained and trailing wildcards are supported, and\n * from this edit distance matching can also be provided.\n *\n * Token sets are implemented as a minimal finite state automata,\n * where both common prefixes and suffixes are shared between tokens.\n * This helps to reduce the space used for storing the token set.\n *\n * @constructor\n */\nlunr.TokenSet = function () {\n  this.final = false\n  this.edges = {}\n  this.id = lunr.TokenSet._nextId\n  lunr.TokenSet._nextId += 1\n}\n\n/**\n * Keeps track of the next, auto increment, identifier to assign\n * to a new tokenSet.\n *\n * TokenSets require a unique identifier to be correctly minimised.\n *\n * @private\n */\nlunr.TokenSet._nextId = 1\n\n/**\n * Creates a TokenSet instance from the given sorted array of words.\n *\n * @param {String[]} arr - A sorted array of strings to create the set from.\n * @returns {lunr.TokenSet}\n * @throws Will throw an error if the input array is not sorted.\n */\nlunr.TokenSet.fromArray = function (arr) {\n  var builder = new lunr.TokenSet.Builder\n\n  for (var i = 0, len = arr.length; i < len; i++) {\n    builder.insert(arr[i])\n  }\n\n  builder.finish()\n  return builder.root\n}\n\n/**\n * Creates a token set from a query clause.\n *\n * @private\n * @param {Object} clause - A single clause from lunr.Query.\n * @param {string} clause.term - The query clause term.\n * @param {number} [clause.editDistance] - The optional edit distance for the term.\n * @returns {lunr.TokenSet}\n */\nlunr.TokenSet.fromClause = function (clause) {\n  if ('editDistance' in clause) {\n    return lunr.TokenSet.fromFuzzyString(clause.term, clause.editDistance)\n  } else {\n    return lunr.TokenSet.fromString(clause.term)\n  }\n}\n\n/**\n * Creates a token set representing a single string with a specified\n * edit distance.\n *\n * Insertions, deletions, substitutions and transpositions are each\n * treated as an edit distance of 1.\n *\n * Increasing the allowed edit distance will have a dramatic impact\n * on the performance of both creating and intersecting these TokenSets.\n * It is advised to keep the edit distance less than 3.\n *\n * @param {string} str - The string to create the token set from.\n * @param {number} editDistance - The allowed edit distance to match.\n * @returns {lunr.Vector}\n */\nlunr.TokenSet.fromFuzzyString = function (str, editDistance) {\n  var root = new lunr.TokenSet\n\n  var stack = [{\n    node: root,\n    editsRemaining: editDistance,\n    str: str\n  }]\n\n  while (stack.length) {\n    var frame = stack.pop()\n\n    // no edit\n    if (frame.str.length > 0) {\n      var char = frame.str.charAt(0),\n          noEditNode\n\n      if (char in frame.node.edges) {\n        noEditNode = frame.node.edges[char]\n      } else {\n        noEditNode = new lunr.TokenSet\n        frame.node.edges[char] = noEditNode\n      }\n\n      if (frame.str.length == 1) {\n        noEditNode.final = true\n      }\n\n      stack.push({\n        node: noEditNode,\n        editsRemaining: frame.editsRemaining,\n        str: frame.str.slice(1)\n      })\n    }\n\n    if (frame.editsRemaining == 0) {\n      continue\n    }\n\n    // insertion\n    if (\"*\" in frame.node.edges) {\n      var insertionNode = frame.node.edges[\"*\"]\n    } else {\n      var insertionNode = new lunr.TokenSet\n      frame.node.edges[\"*\"] = insertionNode\n    }\n\n    if (frame.str.length == 0) {\n      insertionNode.final = true\n    }\n\n    stack.push({\n      node: insertionNode,\n      editsRemaining: frame.editsRemaining - 1,\n      str: frame.str\n    })\n\n    // deletion\n    // can only do a deletion if we have enough edits remaining\n    // and if there are characters left to delete in the string\n    if (frame.str.length > 1) {\n      stack.push({\n        node: frame.node,\n        editsRemaining: frame.editsRemaining - 1,\n        str: frame.str.slice(1)\n      })\n    }\n\n    // deletion\n    // just removing the last character from the str\n    if (frame.str.length == 1) {\n      frame.node.final = true\n    }\n\n    // substitution\n    // can only do a substitution if we have enough edits remaining\n    // and if there are characters left to substitute\n    if (frame.str.length >= 1) {\n      if (\"*\" in frame.node.edges) {\n        var substitutionNode = frame.node.edges[\"*\"]\n      } else {\n        var substitutionNode = new lunr.TokenSet\n        frame.node.edges[\"*\"] = substitutionNode\n      }\n\n      if (frame.str.length == 1) {\n        substitutionNode.final = true\n      }\n\n      stack.push({\n        node: substitutionNode,\n        editsRemaining: frame.editsRemaining - 1,\n        str: frame.str.slice(1)\n      })\n    }\n\n    // transposition\n    // can only do a transposition if there are edits remaining\n    // and there are enough characters to transpose\n    if (frame.str.length > 1) {\n      var charA = frame.str.charAt(0),\n          charB = frame.str.charAt(1),\n          transposeNode\n\n      if (charB in frame.node.edges) {\n        transposeNode = frame.node.edges[charB]\n      } else {\n        transposeNode = new lunr.TokenSet\n        frame.node.edges[charB] = transposeNode\n      }\n\n      if (frame.str.length == 1) {\n        transposeNode.final = true\n      }\n\n      stack.push({\n        node: transposeNode,\n        editsRemaining: frame.editsRemaining - 1,\n        str: charA + frame.str.slice(2)\n      })\n    }\n  }\n\n  return root\n}\n\n/**\n * Creates a TokenSet from a string.\n *\n * The string may contain one or more wildcard characters (*)\n * that will allow wildcard matching when intersecting with\n * another TokenSet.\n *\n * @param {string} str - The string to create a TokenSet from.\n * @returns {lunr.TokenSet}\n */\nlunr.TokenSet.fromString = function (str) {\n  var node = new lunr.TokenSet,\n      root = node\n\n  /*\n   * Iterates through all characters within the passed string\n   * appending a node for each character.\n   *\n   * When a wildcard character is found then a self\n   * referencing edge is introduced to continually match\n   * any number of any characters.\n   */\n  for (var i = 0, len = str.length; i < len; i++) {\n    var char = str[i],\n        final = (i == len - 1)\n\n    if (char == \"*\") {\n      node.edges[char] = node\n      node.final = final\n\n    } else {\n      var next = new lunr.TokenSet\n      next.final = final\n\n      node.edges[char] = next\n      node = next\n    }\n  }\n\n  return root\n}\n\n/**\n * Converts this TokenSet into an array of strings\n * contained within the TokenSet.\n *\n * This is not intended to be used on a TokenSet that\n * contains wildcards, in these cases the results are\n * undefined and are likely to cause an infinite loop.\n *\n * @returns {string[]}\n */\nlunr.TokenSet.prototype.toArray = function () {\n  var words = []\n\n  var stack = [{\n    prefix: \"\",\n    node: this\n  }]\n\n  while (stack.length) {\n    var frame = stack.pop(),\n        edges = Object.keys(frame.node.edges),\n        len = edges.length\n\n    if (frame.node.final) {\n      /* In Safari, at this point the prefix is sometimes corrupted, see:\n       * https://github.com/olivernn/lunr.js/issues/279 Calling any\n       * String.prototype method forces Safari to \"cast\" this string to what\n       * it's supposed to be, fixing the bug. */\n      frame.prefix.charAt(0)\n      words.push(frame.prefix)\n    }\n\n    for (var i = 0; i < len; i++) {\n      var edge = edges[i]\n\n      stack.push({\n        prefix: frame.prefix.concat(edge),\n        node: frame.node.edges[edge]\n      })\n    }\n  }\n\n  return words\n}\n\n/**\n * Generates a string representation of a TokenSet.\n *\n * This is intended to allow TokenSets to be used as keys\n * in objects, largely to aid the construction and minimisation\n * of a TokenSet. As such it is not designed to be a human\n * friendly representation of the TokenSet.\n *\n * @returns {string}\n */\nlunr.TokenSet.prototype.toString = function () {\n  // NOTE: Using Object.keys here as this.edges is very likely\n  // to enter 'hash-mode' with many keys being added\n  //\n  // avoiding a for-in loop here as it leads to the function\n  // being de-optimised (at least in V8). From some simple\n  // benchmarks the performance is comparable, but allowing\n  // V8 to optimize may mean easy performance wins in the future.\n\n  if (this._str) {\n    return this._str\n  }\n\n  var str = this.final ? '1' : '0',\n      labels = Object.keys(this.edges).sort(),\n      len = labels.length\n\n  for (var i = 0; i < len; i++) {\n    var label = labels[i],\n        node = this.edges[label]\n\n    str = str + label + node.id\n  }\n\n  return str\n}\n\n/**\n * Returns a new TokenSet that is the intersection of\n * this TokenSet and the passed TokenSet.\n *\n * This intersection will take into account any wildcards\n * contained within the TokenSet.\n *\n * @param {lunr.TokenSet} b - An other TokenSet to intersect with.\n * @returns {lunr.TokenSet}\n */\nlunr.TokenSet.prototype.intersect = function (b) {\n  var output = new lunr.TokenSet,\n      frame = undefined\n\n  var stack = [{\n    qNode: b,\n    output: output,\n    node: this\n  }]\n\n  while (stack.length) {\n    frame = stack.pop()\n\n    // NOTE: As with the #toString method, we are using\n    // Object.keys and a for loop instead of a for-in loop\n    // as both of these objects enter 'hash' mode, causing\n    // the function to be de-optimised in V8\n    var qEdges = Object.keys(frame.qNode.edges),\n        qLen = qEdges.length,\n        nEdges = Object.keys(frame.node.edges),\n        nLen = nEdges.length\n\n    for (var q = 0; q < qLen; q++) {\n      var qEdge = qEdges[q]\n\n      for (var n = 0; n < nLen; n++) {\n        var nEdge = nEdges[n]\n\n        if (nEdge == qEdge || qEdge == '*') {\n          var node = frame.node.edges[nEdge],\n              qNode = frame.qNode.edges[qEdge],\n              final = node.final && qNode.final,\n              next = undefined\n\n          if (nEdge in frame.output.edges) {\n            // an edge already exists for this character\n            // no need to create a new node, just set the finality\n            // bit unless this node is already final\n            next = frame.output.edges[nEdge]\n            next.final = next.final || final\n\n          } else {\n            // no edge exists yet, must create one\n            // set the finality bit and insert it\n            // into the output\n            next = new lunr.TokenSet\n            next.final = final\n            frame.output.edges[nEdge] = next\n          }\n\n          stack.push({\n            qNode: qNode,\n            output: next,\n            node: node\n          })\n        }\n      }\n    }\n  }\n\n  return output\n}\nlunr.TokenSet.Builder = function () {\n  this.previousWord = \"\"\n  this.root = new lunr.TokenSet\n  this.uncheckedNodes = []\n  this.minimizedNodes = {}\n}\n\nlunr.TokenSet.Builder.prototype.insert = function (word) {\n  var node,\n      commonPrefix = 0\n\n  if (word < this.previousWord) {\n    throw new Error (\"Out of order word insertion\")\n  }\n\n  for (var i = 0; i < word.length && i < this.previousWord.length; i++) {\n    if (word[i] != this.previousWord[i]) break\n    commonPrefix++\n  }\n\n  this.minimize(commonPrefix)\n\n  if (this.uncheckedNodes.length == 0) {\n    node = this.root\n  } else {\n    node = this.uncheckedNodes[this.uncheckedNodes.length - 1].child\n  }\n\n  for (var i = commonPrefix; i < word.length; i++) {\n    var nextNode = new lunr.TokenSet,\n        char = word[i]\n\n    node.edges[char] = nextNode\n\n    this.uncheckedNodes.push({\n      parent: node,\n      char: char,\n      child: nextNode\n    })\n\n    node = nextNode\n  }\n\n  node.final = true\n  this.previousWord = word\n}\n\nlunr.TokenSet.Builder.prototype.finish = function () {\n  this.minimize(0)\n}\n\nlunr.TokenSet.Builder.prototype.minimize = function (downTo) {\n  for (var i = this.uncheckedNodes.length - 1; i >= downTo; i--) {\n    var node = this.uncheckedNodes[i],\n        childKey = node.child.toString()\n\n    if (childKey in this.minimizedNodes) {\n      node.parent.edges[node.char] = this.minimizedNodes[childKey]\n    } else {\n      // Cache the key for this node since\n      // we know it can't change anymore\n      node.child._str = childKey\n\n      this.minimizedNodes[childKey] = node.child\n    }\n\n    this.uncheckedNodes.pop()\n  }\n}\n/*!\n * lunr.Index\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * An index contains the built index of all documents and provides a query interface\n * to the index.\n *\n * Usually instances of lunr.Index will not be created using this constructor, instead\n * lunr.Builder should be used to construct new indexes, or lunr.Index.load should be\n * used to load previously built and serialized indexes.\n *\n * @constructor\n * @param {Object} attrs - The attributes of the built search index.\n * @param {Object} attrs.invertedIndex - An index of term/field to document reference.\n * @param {Object<string, lunr.Vector>} attrs.fieldVectors - Field vectors\n * @param {lunr.TokenSet} attrs.tokenSet - An set of all corpus tokens.\n * @param {string[]} attrs.fields - The names of indexed document fields.\n * @param {lunr.Pipeline} attrs.pipeline - The pipeline to use for search terms.\n */\nlunr.Index = function (attrs) {\n  this.invertedIndex = attrs.invertedIndex\n  this.fieldVectors = attrs.fieldVectors\n  this.tokenSet = attrs.tokenSet\n  this.fields = attrs.fields\n  this.pipeline = attrs.pipeline\n}\n\n/**\n * A result contains details of a document matching a search query.\n * @typedef {Object} lunr.Index~Result\n * @property {string} ref - The reference of the document this result represents.\n * @property {number} score - A number between 0 and 1 representing how similar this document is to the query.\n * @property {lunr.MatchData} matchData - Contains metadata about this match including which term(s) caused the match.\n */\n\n/**\n * Although lunr provides the ability to create queries using lunr.Query, it also provides a simple\n * query language which itself is parsed into an instance of lunr.Query.\n *\n * For programmatically building queries it is advised to directly use lunr.Query, the query language\n * is best used for human entered text rather than program generated text.\n *\n * At its simplest queries can just be a single term, e.g. `hello`, multiple terms are also supported\n * and will be combined with OR, e.g `hello world` will match documents that contain either 'hello'\n * or 'world', though those that contain both will rank higher in the results.\n *\n * Wildcards can be included in terms to match one or more unspecified characters, these wildcards can\n * be inserted anywhere within the term, and more than one wildcard can exist in a single term. Adding\n * wildcards will increase the number of documents that will be found but can also have a negative\n * impact on query performance, especially with wildcards at the beginning of a term.\n *\n * Terms can be restricted to specific fields, e.g. `title:hello`, only documents with the term\n * hello in the title field will match this query. Using a field not present in the index will lead\n * to an error being thrown.\n *\n * Modifiers can also be added to terms, lunr supports edit distance and boost modifiers on terms. A term\n * boost will make documents matching that term score higher, e.g. `foo^5`. Edit distance is also supported\n * to provide fuzzy matching, e.g. 'hello~2' will match documents with hello with an edit distance of 2.\n * Avoid large values for edit distance to improve query performance.\n *\n * Each term also supports a presence modifier. By default a term's presence in document is optional, however\n * this can be changed to either required or prohibited. For a term's presence to be required in a document the\n * term should be prefixed with a '+', e.g. `+foo bar` is a search for documents that must contain 'foo' and\n * optionally contain 'bar'. Conversely a leading '-' sets the terms presence to prohibited, i.e. it must not\n * appear in a document, e.g. `-foo bar` is a search for documents that do not contain 'foo' but may contain 'bar'.\n *\n * To escape special characters the backslash character '\\' can be used, this allows searches to include\n * characters that would normally be considered modifiers, e.g. `foo\\~2` will search for a term \"foo~2\" instead\n * of attempting to apply a boost of 2 to the search term \"foo\".\n *\n * @typedef {string} lunr.Index~QueryString\n * @example <caption>Simple single term query</caption>\n * hello\n * @example <caption>Multiple term query</caption>\n * hello world\n * @example <caption>term scoped to a field</caption>\n * title:hello\n * @example <caption>term with a boost of 10</caption>\n * hello^10\n * @example <caption>term with an edit distance of 2</caption>\n * hello~2\n * @example <caption>terms with presence modifiers</caption>\n * -foo +bar baz\n */\n\n/**\n * Performs a search against the index using lunr query syntax.\n *\n * Results will be returned sorted by their score, the most relevant results\n * will be returned first.  For details on how the score is calculated, please see\n * the {@link https://lunrjs.com/guides/searching.html#scoring|guide}.\n *\n * For more programmatic querying use lunr.Index#query.\n *\n * @param {lunr.Index~QueryString} queryString - A string containing a lunr query.\n * @throws {lunr.QueryParseError} If the passed query string cannot be parsed.\n * @returns {lunr.Index~Result[]}\n */\nlunr.Index.prototype.search = function (queryString) {\n  return this.query(function (query) {\n    var parser = new lunr.QueryParser(queryString, query)\n    parser.parse()\n  })\n}\n\n/**\n * A query builder callback provides a query object to be used to express\n * the query to perform on the index.\n *\n * @callback lunr.Index~queryBuilder\n * @param {lunr.Query} query - The query object to build up.\n * @this lunr.Query\n */\n\n/**\n * Performs a query against the index using the yielded lunr.Query object.\n *\n * If performing programmatic queries against the index, this method is preferred\n * over lunr.Index#search so as to avoid the additional query parsing overhead.\n *\n * A query object is yielded to the supplied function which should be used to\n * express the query to be run against the index.\n *\n * Note that although this function takes a callback parameter it is _not_ an\n * asynchronous operation, the callback is just yielded a query object to be\n * customized.\n *\n * @param {lunr.Index~queryBuilder} fn - A function that is used to build the query.\n * @returns {lunr.Index~Result[]}\n */\nlunr.Index.prototype.query = function (fn) {\n  // for each query clause\n  // * process terms\n  // * expand terms from token set\n  // * find matching documents and metadata\n  // * get document vectors\n  // * score documents\n\n  var query = new lunr.Query(this.fields),\n      matchingFields = Object.create(null),\n      queryVectors = Object.create(null),\n      termFieldCache = Object.create(null),\n      requiredMatches = Object.create(null),\n      prohibitedMatches = Object.create(null)\n\n  /*\n   * To support field level boosts a query vector is created per\n   * field. An empty vector is eagerly created to support negated\n   * queries.\n   */\n  for (var i = 0; i < this.fields.length; i++) {\n    queryVectors[this.fields[i]] = new lunr.Vector\n  }\n\n  fn.call(query, query)\n\n  for (var i = 0; i < query.clauses.length; i++) {\n    /*\n     * Unless the pipeline has been disabled for this term, which is\n     * the case for terms with wildcards, we need to pass the clause\n     * term through the search pipeline. A pipeline returns an array\n     * of processed terms. Pipeline functions may expand the passed\n     * term, which means we may end up performing multiple index lookups\n     * for a single query term.\n     */\n    var clause = query.clauses[i],\n        terms = null,\n        clauseMatches = lunr.Set.empty\n\n    if (clause.usePipeline) {\n      terms = this.pipeline.runString(clause.term, {\n        fields: clause.fields\n      })\n    } else {\n      terms = [clause.term]\n    }\n\n    for (var m = 0; m < terms.length; m++) {\n      var term = terms[m]\n\n      /*\n       * Each term returned from the pipeline needs to use the same query\n       * clause object, e.g. the same boost and or edit distance. The\n       * simplest way to do this is to re-use the clause object but mutate\n       * its term property.\n       */\n      clause.term = term\n\n      /*\n       * From the term in the clause we create a token set which will then\n       * be used to intersect the indexes token set to get a list of terms\n       * to lookup in the inverted index\n       */\n      var termTokenSet = lunr.TokenSet.fromClause(clause),\n          expandedTerms = this.tokenSet.intersect(termTokenSet).toArray()\n\n      /*\n       * If a term marked as required does not exist in the tokenSet it is\n       * impossible for the search to return any matches. We set all the field\n       * scoped required matches set to empty and stop examining any further\n       * clauses.\n       */\n      if (expandedTerms.length === 0 && clause.presence === lunr.Query.presence.REQUIRED) {\n        for (var k = 0; k < clause.fields.length; k++) {\n          var field = clause.fields[k]\n          requiredMatches[field] = lunr.Set.empty\n        }\n\n        break\n      }\n\n      for (var j = 0; j < expandedTerms.length; j++) {\n        /*\n         * For each term get the posting and termIndex, this is required for\n         * building the query vector.\n         */\n        var expandedTerm = expandedTerms[j],\n            posting = this.invertedIndex[expandedTerm],\n            termIndex = posting._index\n\n        for (var k = 0; k < clause.fields.length; k++) {\n          /*\n           * For each field that this query term is scoped by (by default\n           * all fields are in scope) we need to get all the document refs\n           * that have this term in that field.\n           *\n           * The posting is the entry in the invertedIndex for the matching\n           * term from above.\n           */\n          var field = clause.fields[k],\n              fieldPosting = posting[field],\n              matchingDocumentRefs = Object.keys(fieldPosting),\n              termField = expandedTerm + \"/\" + field,\n              matchingDocumentsSet = new lunr.Set(matchingDocumentRefs)\n\n          /*\n           * if the presence of this term is required ensure that the matching\n           * documents are added to the set of required matches for this clause.\n           *\n           */\n          if (clause.presence == lunr.Query.presence.REQUIRED) {\n            clauseMatches = clauseMatches.union(matchingDocumentsSet)\n\n            if (requiredMatches[field] === undefined) {\n              requiredMatches[field] = lunr.Set.complete\n            }\n          }\n\n          /*\n           * if the presence of this term is prohibited ensure that the matching\n           * documents are added to the set of prohibited matches for this field,\n           * creating that set if it does not yet exist.\n           */\n          if (clause.presence == lunr.Query.presence.PROHIBITED) {\n            if (prohibitedMatches[field] === undefined) {\n              prohibitedMatches[field] = lunr.Set.empty\n            }\n\n            prohibitedMatches[field] = prohibitedMatches[field].union(matchingDocumentsSet)\n\n            /*\n             * Prohibited matches should not be part of the query vector used for\n             * similarity scoring and no metadata should be extracted so we continue\n             * to the next field\n             */\n            continue\n          }\n\n          /*\n           * The query field vector is populated using the termIndex found for\n           * the term and a unit value with the appropriate boost applied.\n           * Using upsert because there could already be an entry in the vector\n           * for the term we are working with. In that case we just add the scores\n           * together.\n           */\n          queryVectors[field].upsert(termIndex, clause.boost, function (a, b) { return a + b })\n\n          /**\n           * If we've already seen this term, field combo then we've already collected\n           * the matching documents and metadata, no need to go through all that again\n           */\n          if (termFieldCache[termField]) {\n            continue\n          }\n\n          for (var l = 0; l < matchingDocumentRefs.length; l++) {\n            /*\n             * All metadata for this term/field/document triple\n             * are then extracted and collected into an instance\n             * of lunr.MatchData ready to be returned in the query\n             * results\n             */\n            var matchingDocumentRef = matchingDocumentRefs[l],\n                matchingFieldRef = new lunr.FieldRef (matchingDocumentRef, field),\n                metadata = fieldPosting[matchingDocumentRef],\n                fieldMatch\n\n            if ((fieldMatch = matchingFields[matchingFieldRef]) === undefined) {\n              matchingFields[matchingFieldRef] = new lunr.MatchData (expandedTerm, field, metadata)\n            } else {\n              fieldMatch.add(expandedTerm, field, metadata)\n            }\n\n          }\n\n          termFieldCache[termField] = true\n        }\n      }\n    }\n\n    /**\n     * If the presence was required we need to update the requiredMatches field sets.\n     * We do this after all fields for the term have collected their matches because\n     * the clause terms presence is required in _any_ of the fields not _all_ of the\n     * fields.\n     */\n    if (clause.presence === lunr.Query.presence.REQUIRED) {\n      for (var k = 0; k < clause.fields.length; k++) {\n        var field = clause.fields[k]\n        requiredMatches[field] = requiredMatches[field].intersect(clauseMatches)\n      }\n    }\n  }\n\n  /**\n   * Need to combine the field scoped required and prohibited\n   * matching documents into a global set of required and prohibited\n   * matches\n   */\n  var allRequiredMatches = lunr.Set.complete,\n      allProhibitedMatches = lunr.Set.empty\n\n  for (var i = 0; i < this.fields.length; i++) {\n    var field = this.fields[i]\n\n    if (requiredMatches[field]) {\n      allRequiredMatches = allRequiredMatches.intersect(requiredMatches[field])\n    }\n\n    if (prohibitedMatches[field]) {\n      allProhibitedMatches = allProhibitedMatches.union(prohibitedMatches[field])\n    }\n  }\n\n  var matchingFieldRefs = Object.keys(matchingFields),\n      results = [],\n      matches = Object.create(null)\n\n  /*\n   * If the query is negated (contains only prohibited terms)\n   * we need to get _all_ fieldRefs currently existing in the\n   * index. This is only done when we know that the query is\n   * entirely prohibited terms to avoid any cost of getting all\n   * fieldRefs unnecessarily.\n   *\n   * Additionally, blank MatchData must be created to correctly\n   * populate the results.\n   */\n  if (query.isNegated()) {\n    matchingFieldRefs = Object.keys(this.fieldVectors)\n\n    for (var i = 0; i < matchingFieldRefs.length; i++) {\n      var matchingFieldRef = matchingFieldRefs[i]\n      var fieldRef = lunr.FieldRef.fromString(matchingFieldRef)\n      matchingFields[matchingFieldRef] = new lunr.MatchData\n    }\n  }\n\n  for (var i = 0; i < matchingFieldRefs.length; i++) {\n    /*\n     * Currently we have document fields that match the query, but we\n     * need to return documents. The matchData and scores are combined\n     * from multiple fields belonging to the same document.\n     *\n     * Scores are calculated by field, using the query vectors created\n     * above, and combined into a final document score using addition.\n     */\n    var fieldRef = lunr.FieldRef.fromString(matchingFieldRefs[i]),\n        docRef = fieldRef.docRef\n\n    if (!allRequiredMatches.contains(docRef)) {\n      continue\n    }\n\n    if (allProhibitedMatches.contains(docRef)) {\n      continue\n    }\n\n    var fieldVector = this.fieldVectors[fieldRef],\n        score = queryVectors[fieldRef.fieldName].similarity(fieldVector),\n        docMatch\n\n    if ((docMatch = matches[docRef]) !== undefined) {\n      docMatch.score += score\n      docMatch.matchData.combine(matchingFields[fieldRef])\n    } else {\n      var match = {\n        ref: docRef,\n        score: score,\n        matchData: matchingFields[fieldRef]\n      }\n      matches[docRef] = match\n      results.push(match)\n    }\n  }\n\n  /*\n   * Sort the results objects by score, highest first.\n   */\n  return results.sort(function (a, b) {\n    return b.score - a.score\n  })\n}\n\n/**\n * Prepares the index for JSON serialization.\n *\n * The schema for this JSON blob will be described in a\n * separate JSON schema file.\n *\n * @returns {Object}\n */\nlunr.Index.prototype.toJSON = function () {\n  var invertedIndex = Object.keys(this.invertedIndex)\n    .sort()\n    .map(function (term) {\n      return [term, this.invertedIndex[term]]\n    }, this)\n\n  var fieldVectors = Object.keys(this.fieldVectors)\n    .map(function (ref) {\n      return [ref, this.fieldVectors[ref].toJSON()]\n    }, this)\n\n  return {\n    version: lunr.version,\n    fields: this.fields,\n    fieldVectors: fieldVectors,\n    invertedIndex: invertedIndex,\n    pipeline: this.pipeline.toJSON()\n  }\n}\n\n/**\n * Loads a previously serialized lunr.Index\n *\n * @param {Object} serializedIndex - A previously serialized lunr.Index\n * @returns {lunr.Index}\n */\nlunr.Index.load = function (serializedIndex) {\n  var attrs = {},\n      fieldVectors = {},\n      serializedVectors = serializedIndex.fieldVectors,\n      invertedIndex = Object.create(null),\n      serializedInvertedIndex = serializedIndex.invertedIndex,\n      tokenSetBuilder = new lunr.TokenSet.Builder,\n      pipeline = lunr.Pipeline.load(serializedIndex.pipeline)\n\n  if (serializedIndex.version != lunr.version) {\n    lunr.utils.warn(\"Version mismatch when loading serialised index. Current version of lunr '\" + lunr.version + \"' does not match serialized index '\" + serializedIndex.version + \"'\")\n  }\n\n  for (var i = 0; i < serializedVectors.length; i++) {\n    var tuple = serializedVectors[i],\n        ref = tuple[0],\n        elements = tuple[1]\n\n    fieldVectors[ref] = new lunr.Vector(elements)\n  }\n\n  for (var i = 0; i < serializedInvertedIndex.length; i++) {\n    var tuple = serializedInvertedIndex[i],\n        term = tuple[0],\n        posting = tuple[1]\n\n    tokenSetBuilder.insert(term)\n    invertedIndex[term] = posting\n  }\n\n  tokenSetBuilder.finish()\n\n  attrs.fields = serializedIndex.fields\n\n  attrs.fieldVectors = fieldVectors\n  attrs.invertedIndex = invertedIndex\n  attrs.tokenSet = tokenSetBuilder.root\n  attrs.pipeline = pipeline\n\n  return new lunr.Index(attrs)\n}\n/*!\n * lunr.Builder\n * Copyright (C) 2020 Oliver Nightingale\n */\n\n/**\n * lunr.Builder performs indexing on a set of documents and\n * returns instances of lunr.Index ready for querying.\n *\n * All configuration of the index is done via the builder, the\n * fields to index, the document reference, the text processing\n * pipeline and document scoring parameters are all set on the\n * builder before indexing.\n *\n * @constructor\n * @property {string} _ref - Internal reference to the document reference field.\n * @property {string[]} _fields - Internal reference to the document fields to index.\n * @property {object} invertedIndex - The inverted index maps terms to document fields.\n * @property {object} documentTermFrequencies - Keeps track of document term frequencies.\n * @property {object} documentLengths - Keeps track of the length of documents added to the index.\n * @property {lunr.tokenizer} tokenizer - Function for splitting strings into tokens for indexing.\n * @property {lunr.Pipeline} pipeline - The pipeline performs text processing on tokens before indexing.\n * @property {lunr.Pipeline} searchPipeline - A pipeline for processing search terms before querying the index.\n * @property {number} documentCount - Keeps track of the total number of documents indexed.\n * @property {number} _b - A parameter to control field length normalization, setting this to 0 disabled normalization, 1 fully normalizes field lengths, the default value is 0.75.\n * @property {number} _k1 - A parameter to control how quickly an increase in term frequency results in term frequency saturation, the default value is 1.2.\n * @property {number} termIndex - A counter incremented for each unique term, used to identify a terms position in the vector space.\n * @property {array} metadataWhitelist - A list of metadata keys that have been whitelisted for entry in the index.\n */\nlunr.Builder = function () {\n  this._ref = \"id\"\n  this._fields = Object.create(null)\n  this._documents = Object.create(null)\n  this.invertedIndex = Object.create(null)\n  this.fieldTermFrequencies = {}\n  this.fieldLengths = {}\n  this.tokenizer = lunr.tokenizer\n  this.pipeline = new lunr.Pipeline\n  this.searchPipeline = new lunr.Pipeline\n  this.documentCount = 0\n  this._b = 0.75\n  this._k1 = 1.2\n  this.termIndex = 0\n  this.metadataWhitelist = []\n}\n\n/**\n * Sets the document field used as the document reference. Every document must have this field.\n * The type of this field in the document should be a string, if it is not a string it will be\n * coerced into a string by calling toString.\n *\n * The default ref is 'id'.\n *\n * The ref should _not_ be changed during indexing, it should be set before any documents are\n * added to the index. Changing it during indexing can lead to inconsistent results.\n *\n * @param {string} ref - The name of the reference field in the document.\n */\nlunr.Builder.prototype.ref = function (ref) {\n  this._ref = ref\n}\n\n/**\n * A function that is used to extract a field from a document.\n *\n * Lunr expects a field to be at the top level of a document, if however the field\n * is deeply nested within a document an extractor function can be used to extract\n * the right field for indexing.\n *\n * @callback fieldExtractor\n * @param {object} doc - The document being added to the index.\n * @returns {?(string|object|object[])} obj - The object that will be indexed for this field.\n * @example <caption>Extracting a nested field</caption>\n * function (doc) { return doc.nested.field }\n */\n\n/**\n * Adds a field to the list of document fields that will be indexed. Every document being\n * indexed should have this field. Null values for this field in indexed documents will\n * not cause errors but will limit the chance of that document being retrieved by searches.\n *\n * All fields should be added before adding documents to the index. Adding fields after\n * a document has been indexed will have no effect on already indexed documents.\n *\n * Fields can be boosted at build time. This allows terms within that field to have more\n * importance when ranking search results. Use a field boost to specify that matches within\n * one field are more important than other fields.\n *\n * @param {string} fieldName - The name of a field to index in all documents.\n * @param {object} attributes - Optional attributes associated with this field.\n * @param {number} [attributes.boost=1] - Boost applied to all terms within this field.\n * @param {fieldExtractor} [attributes.extractor] - Function to extract a field from a document.\n * @throws {RangeError} fieldName cannot contain unsupported characters '/'\n */\nlunr.Builder.prototype.field = function (fieldName, attributes) {\n  if (/\\//.test(fieldName)) {\n    throw new RangeError (\"Field '\" + fieldName + \"' contains illegal character '/'\")\n  }\n\n  this._fields[fieldName] = attributes || {}\n}\n\n/**\n * A parameter to tune the amount of field length normalisation that is applied when\n * calculating relevance scores. A value of 0 will completely disable any normalisation\n * and a value of 1 will fully normalise field lengths. The default is 0.75. Values of b\n * will be clamped to the range 0 - 1.\n *\n * @param {number} number - The value to set for this tuning parameter.\n */\nlunr.Builder.prototype.b = function (number) {\n  if (number < 0) {\n    this._b = 0\n  } else if (number > 1) {\n    this._b = 1\n  } else {\n    this._b = number\n  }\n}\n\n/**\n * A parameter that controls the speed at which a rise in term frequency results in term\n * frequency saturation. The default value is 1.2. Setting this to a higher value will give\n * slower saturation levels, a lower value will result in quicker saturation.\n *\n * @param {number} number - The value to set for this tuning parameter.\n */\nlunr.Builder.prototype.k1 = function (number) {\n  this._k1 = number\n}\n\n/**\n * Adds a document to the index.\n *\n * Before adding fields to the index the index should have been fully setup, with the document\n * ref and all fields to index already having been specified.\n *\n * The document must have a field name as specified by the ref (by default this is 'id') and\n * it should have all fields defined for indexing, though null or undefined values will not\n * cause errors.\n *\n * Entire documents can be boosted at build time. Applying a boost to a document indicates that\n * this document should rank higher in search results than other documents.\n *\n * @param {object} doc - The document to add to the index.\n * @param {object} attributes - Optional attributes associated with this document.\n * @param {number} [attributes.boost=1] - Boost applied to all terms within this document.\n */\nlunr.Builder.prototype.add = function (doc, attributes) {\n  var docRef = doc[this._ref],\n      fields = Object.keys(this._fields)\n\n  this._documents[docRef] = attributes || {}\n  this.documentCount += 1\n\n  for (var i = 0; i < fields.length; i++) {\n    var fieldName = fields[i],\n        extractor = this._fields[fieldName].extractor,\n        field = extractor ? extractor(doc) : doc[fieldName],\n        tokens = this.tokenizer(field, {\n          fields: [fieldName]\n        }),\n        terms = this.pipeline.run(tokens),\n        fieldRef = new lunr.FieldRef (docRef, fieldName),\n        fieldTerms = Object.create(null)\n\n    this.fieldTermFrequencies[fieldRef] = fieldTerms\n    this.fieldLengths[fieldRef] = 0\n\n    // store the length of this field for this document\n    this.fieldLengths[fieldRef] += terms.length\n\n    // calculate term frequencies for this field\n    for (var j = 0; j < terms.length; j++) {\n      var term = terms[j]\n\n      if (fieldTerms[term] == undefined) {\n        fieldTerms[term] = 0\n      }\n\n      fieldTerms[term] += 1\n\n      // add to inverted index\n      // create an initial posting if one doesn't exist\n      if (this.invertedIndex[term] == undefined) {\n        var posting = Object.create(null)\n        posting[\"_index\"] = this.termIndex\n        this.termIndex += 1\n\n        for (var k = 0; k < fields.length; k++) {\n          posting[fields[k]] = Object.create(null)\n        }\n\n        this.invertedIndex[term] = posting\n      }\n\n      // add an entry for this term/fieldName/docRef to the invertedIndex\n      if (this.invertedIndex[term][fieldName][docRef] == undefined) {\n        this.invertedIndex[term][fieldName][docRef] = Object.create(null)\n      }\n\n      // store all whitelisted metadata about this token in the\n      // inverted index\n      for (var l = 0; l < this.metadataWhitelist.length; l++) {\n        var metadataKey = this.metadataWhitelist[l],\n            metadata = term.metadata[metadataKey]\n\n        if (this.invertedIndex[term][fieldName][docRef][metadataKey] == undefined) {\n          this.invertedIndex[term][fieldName][docRef][metadataKey] = []\n        }\n\n        this.invertedIndex[term][fieldName][docRef][metadataKey].push(metadata)\n      }\n    }\n\n  }\n}\n\n/**\n * Calculates the average document length for this index\n *\n * @private\n */\nlunr.Builder.prototype.calculateAverageFieldLengths = function () {\n\n  var fieldRefs = Object.keys(this.fieldLengths),\n      numberOfFields = fieldRefs.length,\n      accumulator = {},\n      documentsWithField = {}\n\n  for (var i = 0; i < numberOfFields; i++) {\n    var fieldRef = lunr.FieldRef.fromString(fieldRefs[i]),\n        field = fieldRef.fieldName\n\n    documentsWithField[field] || (documentsWithField[field] = 0)\n    documentsWithField[field] += 1\n\n    accumulator[field] || (accumulator[field] = 0)\n    accumulator[field] += this.fieldLengths[fieldRef]\n  }\n\n  var fields = Object.keys(this._fields)\n\n  for (var i = 0; i < fields.length; i++) {\n    var fieldName = fields[i]\n    accumulator[fieldName] = accumulator[fieldName] / documentsWithField[fieldName]\n  }\n\n  this.averageFieldLength = accumulator\n}\n\n/**\n * Builds a vector space model of every document using lunr.Vector\n *\n * @private\n */\nlunr.Builder.prototype.createFieldVectors = function () {\n  var fieldVectors = {},\n      fieldRefs = Object.keys(this.fieldTermFrequencies),\n      fieldRefsLength = fieldRefs.length,\n      termIdfCache = Object.create(null)\n\n  for (var i = 0; i < fieldRefsLength; i++) {\n    var fieldRef = lunr.FieldRef.fromString(fieldRefs[i]),\n        fieldName = fieldRef.fieldName,\n        fieldLength = this.fieldLengths[fieldRef],\n        fieldVector = new lunr.Vector,\n        termFrequencies = this.fieldTermFrequencies[fieldRef],\n        terms = Object.keys(termFrequencies),\n        termsLength = terms.length\n\n\n    var fieldBoost = this._fields[fieldName].boost || 1,\n        docBoost = this._documents[fieldRef.docRef].boost || 1\n\n    for (var j = 0; j < termsLength; j++) {\n      var term = terms[j],\n          tf = termFrequencies[term],\n          termIndex = this.invertedIndex[term]._index,\n          idf, score, scoreWithPrecision\n\n      if (termIdfCache[term] === undefined) {\n        idf = lunr.idf(this.invertedIndex[term], this.documentCount)\n        termIdfCache[term] = idf\n      } else {\n        idf = termIdfCache[term]\n      }\n\n      score = idf * ((this._k1 + 1) * tf) / (this._k1 * (1 - this._b + this._b * (fieldLength / this.averageFieldLength[fieldName])) + tf)\n      score *= fieldBoost\n      score *= docBoost\n      scoreWithPrecision = Math.round(score * 1000) / 1000\n      // Converts 1.23456789 to 1.234.\n      // Reducing the precision so that the vectors take up less\n      // space when serialised. Doing it now so that they behave\n      // the same before and after serialisation. Also, this is\n      // the fastest approach to reducing a number's precision in\n      // JavaScript.\n\n      fieldVector.insert(termIndex, scoreWithPrecision)\n    }\n\n    fieldVectors[fieldRef] = fieldVector\n  }\n\n  this.fieldVectors = fieldVectors\n}\n\n/**\n * Creates a token set of all tokens in the index using lunr.TokenSet\n *\n * @private\n */\nlunr.Builder.prototype.createTokenSet = function () {\n  this.tokenSet = lunr.TokenSet.fromArray(\n    Object.keys(this.invertedIndex).sort()\n  )\n}\n\n/**\n * Builds the index, creating an instance of lunr.Index.\n *\n * This completes the indexing process and should only be called\n * once all documents have been added to the index.\n *\n * @returns {lunr.Index}\n */\nlunr.Builder.prototype.build = function () {\n  this.calculateAverageFieldLengths()\n  this.createFieldVectors()\n  this.createTokenSet()\n\n  return new lunr.Index({\n    invertedIndex: this.invertedIndex,\n    fieldVectors: this.fieldVectors,\n    tokenSet: this.tokenSet,\n    fields: Object.keys(this._fields),\n    pipeline: this.searchPipeline\n  })\n}\n\n/**\n * Applies a plugin to the index builder.\n *\n * A plugin is a function that is called with the index builder as its context.\n * Plugins can be used to customise or extend the behaviour of the index\n * in some way. A plugin is just a function, that encapsulated the custom\n * behaviour that should be applied when building the index.\n *\n * The plugin function will be called with the index builder as its argument, additional\n * arguments can also be passed when calling use. The function will be called\n * with the index builder as its context.\n *\n * @param {Function} plugin The plugin to apply.\n */\nlunr.Builder.prototype.use = function (fn) {\n  var args = Array.prototype.slice.call(arguments, 1)\n  args.unshift(this)\n  fn.apply(this, args)\n}\n/**\n * Contains and collects metadata about a matching document.\n * A single instance of lunr.MatchData is returned as part of every\n * lunr.Index~Result.\n *\n * @constructor\n * @param {string} term - The term this match data is associated with\n * @param {string} field - The field in which the term was found\n * @param {object} metadata - The metadata recorded about this term in this field\n * @property {object} metadata - A cloned collection of metadata associated with this document.\n * @see {@link lunr.Index~Result}\n */\nlunr.MatchData = function (term, field, metadata) {\n  var clonedMetadata = Object.create(null),\n      metadataKeys = Object.keys(metadata || {})\n\n  // Cloning the metadata to prevent the original\n  // being mutated during match data combination.\n  // Metadata is kept in an array within the inverted\n  // index so cloning the data can be done with\n  // Array#slice\n  for (var i = 0; i < metadataKeys.length; i++) {\n    var key = metadataKeys[i]\n    clonedMetadata[key] = metadata[key].slice()\n  }\n\n  this.metadata = Object.create(null)\n\n  if (term !== undefined) {\n    this.metadata[term] = Object.create(null)\n    this.metadata[term][field] = clonedMetadata\n  }\n}\n\n/**\n * An instance of lunr.MatchData will be created for every term that matches a\n * document. However only one instance is required in a lunr.Index~Result. This\n * method combines metadata from another instance of lunr.MatchData with this\n * objects metadata.\n *\n * @param {lunr.MatchData} otherMatchData - Another instance of match data to merge with this one.\n * @see {@link lunr.Index~Result}\n */\nlunr.MatchData.prototype.combine = function (otherMatchData) {\n  var terms = Object.keys(otherMatchData.metadata)\n\n  for (var i = 0; i < terms.length; i++) {\n    var term = terms[i],\n        fields = Object.keys(otherMatchData.metadata[term])\n\n    if (this.metadata[term] == undefined) {\n      this.metadata[term] = Object.create(null)\n    }\n\n    for (var j = 0; j < fields.length; j++) {\n      var field = fields[j],\n          keys = Object.keys(otherMatchData.metadata[term][field])\n\n      if (this.metadata[term][field] == undefined) {\n        this.metadata[term][field] = Object.create(null)\n      }\n\n      for (var k = 0; k < keys.length; k++) {\n        var key = keys[k]\n\n        if (this.metadata[term][field][key] == undefined) {\n          this.metadata[term][field][key] = otherMatchData.metadata[term][field][key]\n        } else {\n          this.metadata[term][field][key] = this.metadata[term][field][key].concat(otherMatchData.metadata[term][field][key])\n        }\n\n      }\n    }\n  }\n}\n\n/**\n * Add metadata for a term/field pair to this instance of match data.\n *\n * @param {string} term - The term this match data is associated with\n * @param {string} field - The field in which the term was found\n * @param {object} metadata - The metadata recorded about this term in this field\n */\nlunr.MatchData.prototype.add = function (term, field, metadata) {\n  if (!(term in this.metadata)) {\n    this.metadata[term] = Object.create(null)\n    this.metadata[term][field] = metadata\n    return\n  }\n\n  if (!(field in this.metadata[term])) {\n    this.metadata[term][field] = metadata\n    return\n  }\n\n  var metadataKeys = Object.keys(metadata)\n\n  for (var i = 0; i < metadataKeys.length; i++) {\n    var key = metadataKeys[i]\n\n    if (key in this.metadata[term][field]) {\n      this.metadata[term][field][key] = this.metadata[term][field][key].concat(metadata[key])\n    } else {\n      this.metadata[term][field][key] = metadata[key]\n    }\n  }\n}\n/**\n * A lunr.Query provides a programmatic way of defining queries to be performed\n * against a {@link lunr.Index}.\n *\n * Prefer constructing a lunr.Query using the {@link lunr.Index#query} method\n * so the query object is pre-initialized with the right index fields.\n *\n * @constructor\n * @property {lunr.Query~Clause[]} clauses - An array of query clauses.\n * @property {string[]} allFields - An array of all available fields in a lunr.Index.\n */\nlunr.Query = function (allFields) {\n  this.clauses = []\n  this.allFields = allFields\n}\n\n/**\n * Constants for indicating what kind of automatic wildcard insertion will be used when constructing a query clause.\n *\n * This allows wildcards to be added to the beginning and end of a term without having to manually do any string\n * concatenation.\n *\n * The wildcard constants can be bitwise combined to select both leading and trailing wildcards.\n *\n * @constant\n * @default\n * @property {number} wildcard.NONE - The term will have no wildcards inserted, this is the default behaviour\n * @property {number} wildcard.LEADING - Prepend the term with a wildcard, unless a leading wildcard already exists\n * @property {number} wildcard.TRAILING - Append a wildcard to the term, unless a trailing wildcard already exists\n * @see lunr.Query~Clause\n * @see lunr.Query#clause\n * @see lunr.Query#term\n * @example <caption>query term with trailing wildcard</caption>\n * query.term('foo', { wildcard: lunr.Query.wildcard.TRAILING })\n * @example <caption>query term with leading and trailing wildcard</caption>\n * query.term('foo', {\n *   wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING\n * })\n */\n\nlunr.Query.wildcard = new String (\"*\")\nlunr.Query.wildcard.NONE = 0\nlunr.Query.wildcard.LEADING = 1\nlunr.Query.wildcard.TRAILING = 2\n\n/**\n * Constants for indicating what kind of presence a term must have in matching documents.\n *\n * @constant\n * @enum {number}\n * @see lunr.Query~Clause\n * @see lunr.Query#clause\n * @see lunr.Query#term\n * @example <caption>query term with required presence</caption>\n * query.term('foo', { presence: lunr.Query.presence.REQUIRED })\n */\nlunr.Query.presence = {\n  /**\n   * Term's presence in a document is optional, this is the default value.\n   */\n  OPTIONAL: 1,\n\n  /**\n   * Term's presence in a document is required, documents that do not contain\n   * this term will not be returned.\n   */\n  REQUIRED: 2,\n\n  /**\n   * Term's presence in a document is prohibited, documents that do contain\n   * this term will not be returned.\n   */\n  PROHIBITED: 3\n}\n\n/**\n * A single clause in a {@link lunr.Query} contains a term and details on how to\n * match that term against a {@link lunr.Index}.\n *\n * @typedef {Object} lunr.Query~Clause\n * @property {string[]} fields - The fields in an index this clause should be matched against.\n * @property {number} [boost=1] - Any boost that should be applied when matching this clause.\n * @property {number} [editDistance] - Whether the term should have fuzzy matching applied, and how fuzzy the match should be.\n * @property {boolean} [usePipeline] - Whether the term should be passed through the search pipeline.\n * @property {number} [wildcard=lunr.Query.wildcard.NONE] - Whether the term should have wildcards appended or prepended.\n * @property {number} [presence=lunr.Query.presence.OPTIONAL] - The terms presence in any matching documents.\n */\n\n/**\n * Adds a {@link lunr.Query~Clause} to this query.\n *\n * Unless the clause contains the fields to be matched all fields will be matched. In addition\n * a default boost of 1 is applied to the clause.\n *\n * @param {lunr.Query~Clause} clause - The clause to add to this query.\n * @see lunr.Query~Clause\n * @returns {lunr.Query}\n */\nlunr.Query.prototype.clause = function (clause) {\n  if (!('fields' in clause)) {\n    clause.fields = this.allFields\n  }\n\n  if (!('boost' in clause)) {\n    clause.boost = 1\n  }\n\n  if (!('usePipeline' in clause)) {\n    clause.usePipeline = true\n  }\n\n  if (!('wildcard' in clause)) {\n    clause.wildcard = lunr.Query.wildcard.NONE\n  }\n\n  if ((clause.wildcard & lunr.Query.wildcard.LEADING) && (clause.term.charAt(0) != lunr.Query.wildcard)) {\n    clause.term = \"*\" + clause.term\n  }\n\n  if ((clause.wildcard & lunr.Query.wildcard.TRAILING) && (clause.term.slice(-1) != lunr.Query.wildcard)) {\n    clause.term = \"\" + clause.term + \"*\"\n  }\n\n  if (!('presence' in clause)) {\n    clause.presence = lunr.Query.presence.OPTIONAL\n  }\n\n  this.clauses.push(clause)\n\n  return this\n}\n\n/**\n * A negated query is one in which every clause has a presence of\n * prohibited. These queries require some special processing to return\n * the expected results.\n *\n * @returns boolean\n */\nlunr.Query.prototype.isNegated = function () {\n  for (var i = 0; i < this.clauses.length; i++) {\n    if (this.clauses[i].presence != lunr.Query.presence.PROHIBITED) {\n      return false\n    }\n  }\n\n  return true\n}\n\n/**\n * Adds a term to the current query, under the covers this will create a {@link lunr.Query~Clause}\n * to the list of clauses that make up this query.\n *\n * The term is used as is, i.e. no tokenization will be performed by this method. Instead conversion\n * to a token or token-like string should be done before calling this method.\n *\n * The term will be converted to a string by calling `toString`. Multiple terms can be passed as an\n * array, each term in the array will share the same options.\n *\n * @param {object|object[]} term - The term(s) to add to the query.\n * @param {object} [options] - Any additional properties to add to the query clause.\n * @returns {lunr.Query}\n * @see lunr.Query#clause\n * @see lunr.Query~Clause\n * @example <caption>adding a single term to a query</caption>\n * query.term(\"foo\")\n * @example <caption>adding a single term to a query and specifying search fields, term boost and automatic trailing wildcard</caption>\n * query.term(\"foo\", {\n *   fields: [\"title\"],\n *   boost: 10,\n *   wildcard: lunr.Query.wildcard.TRAILING\n * })\n * @example <caption>using lunr.tokenizer to convert a string to tokens before using them as terms</caption>\n * query.term(lunr.tokenizer(\"foo bar\"))\n */\nlunr.Query.prototype.term = function (term, options) {\n  if (Array.isArray(term)) {\n    term.forEach(function (t) { this.term(t, lunr.utils.clone(options)) }, this)\n    return this\n  }\n\n  var clause = options || {}\n  clause.term = term.toString()\n\n  this.clause(clause)\n\n  return this\n}\nlunr.QueryParseError = function (message, start, end) {\n  this.name = \"QueryParseError\"\n  this.message = message\n  this.start = start\n  this.end = end\n}\n\nlunr.QueryParseError.prototype = new Error\nlunr.QueryLexer = function (str) {\n  this.lexemes = []\n  this.str = str\n  this.length = str.length\n  this.pos = 0\n  this.start = 0\n  this.escapeCharPositions = []\n}\n\nlunr.QueryLexer.prototype.run = function () {\n  var state = lunr.QueryLexer.lexText\n\n  while (state) {\n    state = state(this)\n  }\n}\n\nlunr.QueryLexer.prototype.sliceString = function () {\n  var subSlices = [],\n      sliceStart = this.start,\n      sliceEnd = this.pos\n\n  for (var i = 0; i < this.escapeCharPositions.length; i++) {\n    sliceEnd = this.escapeCharPositions[i]\n    subSlices.push(this.str.slice(sliceStart, sliceEnd))\n    sliceStart = sliceEnd + 1\n  }\n\n  subSlices.push(this.str.slice(sliceStart, this.pos))\n  this.escapeCharPositions.length = 0\n\n  return subSlices.join('')\n}\n\nlunr.QueryLexer.prototype.emit = function (type) {\n  this.lexemes.push({\n    type: type,\n    str: this.sliceString(),\n    start: this.start,\n    end: this.pos\n  })\n\n  this.start = this.pos\n}\n\nlunr.QueryLexer.prototype.escapeCharacter = function () {\n  this.escapeCharPositions.push(this.pos - 1)\n  this.pos += 1\n}\n\nlunr.QueryLexer.prototype.next = function () {\n  if (this.pos >= this.length) {\n    return lunr.QueryLexer.EOS\n  }\n\n  var char = this.str.charAt(this.pos)\n  this.pos += 1\n  return char\n}\n\nlunr.QueryLexer.prototype.width = function () {\n  return this.pos - this.start\n}\n\nlunr.QueryLexer.prototype.ignore = function () {\n  if (this.start == this.pos) {\n    this.pos += 1\n  }\n\n  this.start = this.pos\n}\n\nlunr.QueryLexer.prototype.backup = function () {\n  this.pos -= 1\n}\n\nlunr.QueryLexer.prototype.acceptDigitRun = function () {\n  var char, charCode\n\n  do {\n    char = this.next()\n    charCode = char.charCodeAt(0)\n  } while (charCode > 47 && charCode < 58)\n\n  if (char != lunr.QueryLexer.EOS) {\n    this.backup()\n  }\n}\n\nlunr.QueryLexer.prototype.more = function () {\n  return this.pos < this.length\n}\n\nlunr.QueryLexer.EOS = 'EOS'\nlunr.QueryLexer.FIELD = 'FIELD'\nlunr.QueryLexer.TERM = 'TERM'\nlunr.QueryLexer.EDIT_DISTANCE = 'EDIT_DISTANCE'\nlunr.QueryLexer.BOOST = 'BOOST'\nlunr.QueryLexer.PRESENCE = 'PRESENCE'\n\nlunr.QueryLexer.lexField = function (lexer) {\n  lexer.backup()\n  lexer.emit(lunr.QueryLexer.FIELD)\n  lexer.ignore()\n  return lunr.QueryLexer.lexText\n}\n\nlunr.QueryLexer.lexTerm = function (lexer) {\n  if (lexer.width() > 1) {\n    lexer.backup()\n    lexer.emit(lunr.QueryLexer.TERM)\n  }\n\n  lexer.ignore()\n\n  if (lexer.more()) {\n    return lunr.QueryLexer.lexText\n  }\n}\n\nlunr.QueryLexer.lexEditDistance = function (lexer) {\n  lexer.ignore()\n  lexer.acceptDigitRun()\n  lexer.emit(lunr.QueryLexer.EDIT_DISTANCE)\n  return lunr.QueryLexer.lexText\n}\n\nlunr.QueryLexer.lexBoost = function (lexer) {\n  lexer.ignore()\n  lexer.acceptDigitRun()\n  lexer.emit(lunr.QueryLexer.BOOST)\n  return lunr.QueryLexer.lexText\n}\n\nlunr.QueryLexer.lexEOS = function (lexer) {\n  if (lexer.width() > 0) {\n    lexer.emit(lunr.QueryLexer.TERM)\n  }\n}\n\n// This matches the separator used when tokenising fields\n// within a document. These should match otherwise it is\n// not possible to search for some tokens within a document.\n//\n// It is possible for the user to change the separator on the\n// tokenizer so it _might_ clash with any other of the special\n// characters already used within the search string, e.g. :.\n//\n// This means that it is possible to change the separator in\n// such a way that makes some words unsearchable using a search\n// string.\nlunr.QueryLexer.termSeparator = lunr.tokenizer.separator\n\nlunr.QueryLexer.lexText = function (lexer) {\n  while (true) {\n    var char = lexer.next()\n\n    if (char == lunr.QueryLexer.EOS) {\n      return lunr.QueryLexer.lexEOS\n    }\n\n    // Escape character is '\\'\n    if (char.charCodeAt(0) == 92) {\n      lexer.escapeCharacter()\n      continue\n    }\n\n    if (char == \":\") {\n      return lunr.QueryLexer.lexField\n    }\n\n    if (char == \"~\") {\n      lexer.backup()\n      if (lexer.width() > 0) {\n        lexer.emit(lunr.QueryLexer.TERM)\n      }\n      return lunr.QueryLexer.lexEditDistance\n    }\n\n    if (char == \"^\") {\n      lexer.backup()\n      if (lexer.width() > 0) {\n        lexer.emit(lunr.QueryLexer.TERM)\n      }\n      return lunr.QueryLexer.lexBoost\n    }\n\n    // \"+\" indicates term presence is required\n    // checking for length to ensure that only\n    // leading \"+\" are considered\n    if (char == \"+\" && lexer.width() === 1) {\n      lexer.emit(lunr.QueryLexer.PRESENCE)\n      return lunr.QueryLexer.lexText\n    }\n\n    // \"-\" indicates term presence is prohibited\n    // checking for length to ensure that only\n    // leading \"-\" are considered\n    if (char == \"-\" && lexer.width() === 1) {\n      lexer.emit(lunr.QueryLexer.PRESENCE)\n      return lunr.QueryLexer.lexText\n    }\n\n    if (char.match(lunr.QueryLexer.termSeparator)) {\n      return lunr.QueryLexer.lexTerm\n    }\n  }\n}\n\nlunr.QueryParser = function (str, query) {\n  this.lexer = new lunr.QueryLexer (str)\n  this.query = query\n  this.currentClause = {}\n  this.lexemeIdx = 0\n}\n\nlunr.QueryParser.prototype.parse = function () {\n  this.lexer.run()\n  this.lexemes = this.lexer.lexemes\n\n  var state = lunr.QueryParser.parseClause\n\n  while (state) {\n    state = state(this)\n  }\n\n  return this.query\n}\n\nlunr.QueryParser.prototype.peekLexeme = function () {\n  return this.lexemes[this.lexemeIdx]\n}\n\nlunr.QueryParser.prototype.consumeLexeme = function () {\n  var lexeme = this.peekLexeme()\n  this.lexemeIdx += 1\n  return lexeme\n}\n\nlunr.QueryParser.prototype.nextClause = function () {\n  var completedClause = this.currentClause\n  this.query.clause(completedClause)\n  this.currentClause = {}\n}\n\nlunr.QueryParser.parseClause = function (parser) {\n  var lexeme = parser.peekLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  switch (lexeme.type) {\n    case lunr.QueryLexer.PRESENCE:\n      return lunr.QueryParser.parsePresence\n    case lunr.QueryLexer.FIELD:\n      return lunr.QueryParser.parseField\n    case lunr.QueryLexer.TERM:\n      return lunr.QueryParser.parseTerm\n    default:\n      var errorMessage = \"expected either a field or a term, found \" + lexeme.type\n\n      if (lexeme.str.length >= 1) {\n        errorMessage += \" with value '\" + lexeme.str + \"'\"\n      }\n\n      throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n}\n\nlunr.QueryParser.parsePresence = function (parser) {\n  var lexeme = parser.consumeLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  switch (lexeme.str) {\n    case \"-\":\n      parser.currentClause.presence = lunr.Query.presence.PROHIBITED\n      break\n    case \"+\":\n      parser.currentClause.presence = lunr.Query.presence.REQUIRED\n      break\n    default:\n      var errorMessage = \"unrecognised presence operator'\" + lexeme.str + \"'\"\n      throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  var nextLexeme = parser.peekLexeme()\n\n  if (nextLexeme == undefined) {\n    var errorMessage = \"expecting term or field, found nothing\"\n    throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  switch (nextLexeme.type) {\n    case lunr.QueryLexer.FIELD:\n      return lunr.QueryParser.parseField\n    case lunr.QueryLexer.TERM:\n      return lunr.QueryParser.parseTerm\n    default:\n      var errorMessage = \"expecting term or field, found '\" + nextLexeme.type + \"'\"\n      throw new lunr.QueryParseError (errorMessage, nextLexeme.start, nextLexeme.end)\n  }\n}\n\nlunr.QueryParser.parseField = function (parser) {\n  var lexeme = parser.consumeLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  if (parser.query.allFields.indexOf(lexeme.str) == -1) {\n    var possibleFields = parser.query.allFields.map(function (f) { return \"'\" + f + \"'\" }).join(', '),\n        errorMessage = \"unrecognised field '\" + lexeme.str + \"', possible fields: \" + possibleFields\n\n    throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  parser.currentClause.fields = [lexeme.str]\n\n  var nextLexeme = parser.peekLexeme()\n\n  if (nextLexeme == undefined) {\n    var errorMessage = \"expecting term, found nothing\"\n    throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  switch (nextLexeme.type) {\n    case lunr.QueryLexer.TERM:\n      return lunr.QueryParser.parseTerm\n    default:\n      var errorMessage = \"expecting term, found '\" + nextLexeme.type + \"'\"\n      throw new lunr.QueryParseError (errorMessage, nextLexeme.start, nextLexeme.end)\n  }\n}\n\nlunr.QueryParser.parseTerm = function (parser) {\n  var lexeme = parser.consumeLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  parser.currentClause.term = lexeme.str.toLowerCase()\n\n  if (lexeme.str.indexOf(\"*\") != -1) {\n    parser.currentClause.usePipeline = false\n  }\n\n  var nextLexeme = parser.peekLexeme()\n\n  if (nextLexeme == undefined) {\n    parser.nextClause()\n    return\n  }\n\n  switch (nextLexeme.type) {\n    case lunr.QueryLexer.TERM:\n      parser.nextClause()\n      return lunr.QueryParser.parseTerm\n    case lunr.QueryLexer.FIELD:\n      parser.nextClause()\n      return lunr.QueryParser.parseField\n    case lunr.QueryLexer.EDIT_DISTANCE:\n      return lunr.QueryParser.parseEditDistance\n    case lunr.QueryLexer.BOOST:\n      return lunr.QueryParser.parseBoost\n    case lunr.QueryLexer.PRESENCE:\n      parser.nextClause()\n      return lunr.QueryParser.parsePresence\n    default:\n      var errorMessage = \"Unexpected lexeme type '\" + nextLexeme.type + \"'\"\n      throw new lunr.QueryParseError (errorMessage, nextLexeme.start, nextLexeme.end)\n  }\n}\n\nlunr.QueryParser.parseEditDistance = function (parser) {\n  var lexeme = parser.consumeLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  var editDistance = parseInt(lexeme.str, 10)\n\n  if (isNaN(editDistance)) {\n    var errorMessage = \"edit distance must be numeric\"\n    throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  parser.currentClause.editDistance = editDistance\n\n  var nextLexeme = parser.peekLexeme()\n\n  if (nextLexeme == undefined) {\n    parser.nextClause()\n    return\n  }\n\n  switch (nextLexeme.type) {\n    case lunr.QueryLexer.TERM:\n      parser.nextClause()\n      return lunr.QueryParser.parseTerm\n    case lunr.QueryLexer.FIELD:\n      parser.nextClause()\n      return lunr.QueryParser.parseField\n    case lunr.QueryLexer.EDIT_DISTANCE:\n      return lunr.QueryParser.parseEditDistance\n    case lunr.QueryLexer.BOOST:\n      return lunr.QueryParser.parseBoost\n    case lunr.QueryLexer.PRESENCE:\n      parser.nextClause()\n      return lunr.QueryParser.parsePresence\n    default:\n      var errorMessage = \"Unexpected lexeme type '\" + nextLexeme.type + \"'\"\n      throw new lunr.QueryParseError (errorMessage, nextLexeme.start, nextLexeme.end)\n  }\n}\n\nlunr.QueryParser.parseBoost = function (parser) {\n  var lexeme = parser.consumeLexeme()\n\n  if (lexeme == undefined) {\n    return\n  }\n\n  var boost = parseInt(lexeme.str, 10)\n\n  if (isNaN(boost)) {\n    var errorMessage = \"boost must be numeric\"\n    throw new lunr.QueryParseError (errorMessage, lexeme.start, lexeme.end)\n  }\n\n  parser.currentClause.boost = boost\n\n  var nextLexeme = parser.peekLexeme()\n\n  if (nextLexeme == undefined) {\n    parser.nextClause()\n    return\n  }\n\n  switch (nextLexeme.type) {\n    case lunr.QueryLexer.TERM:\n      parser.nextClause()\n      return lunr.QueryParser.parseTerm\n    case lunr.QueryLexer.FIELD:\n      parser.nextClause()\n      return lunr.QueryParser.parseField\n    case lunr.QueryLexer.EDIT_DISTANCE:\n      return lunr.QueryParser.parseEditDistance\n    case lunr.QueryLexer.BOOST:\n      return lunr.QueryParser.parseBoost\n    case lunr.QueryLexer.PRESENCE:\n      parser.nextClause()\n      return lunr.QueryParser.parsePresence\n    default:\n      var errorMessage = \"Unexpected lexeme type '\" + nextLexeme.type + \"'\"\n      throw new lunr.QueryParseError (errorMessage, nextLexeme.start, nextLexeme.end)\n  }\n}\n\n  /**\n   * export the module via AMD, CommonJS or as a browser global\n   * Export code from https://github.com/umdjs/umd/blob/master/returnExports.js\n   */\n  ;(function (root, factory) {\n    if (true) {\n      // AMD. Register as an anonymous module.\n      !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))\n    } else {}\n  }(this, function () {\n    /**\n     * Just return a value to define the module export.\n     * This example returns an object, but the module\n     * can return a function as the exported value.\n     */\n    return lunr\n  }))\n})();\n\n\n//# sourceURL=webpack:///../node_modules/lunr/lunr.js?");
+
+/***/ }),
+
+/***/ "./default/assets/css/main.sass":
+/*!**************************************!*\
+  !*** ./default/assets/css/main.sass ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack:///./default/assets/css/main.sass?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/bootstrap.ts":
+/*!********************************************!*\
+  !*** ./default/assets/js/src/bootstrap.ts ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _typedoc_Application__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./typedoc/Application */ \"./default/assets/js/src/typedoc/Application.ts\");\n/* harmony import */ var _typedoc_components_MenuHighlight__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./typedoc/components/MenuHighlight */ \"./default/assets/js/src/typedoc/components/MenuHighlight.ts\");\n/* harmony import */ var _typedoc_components_Search__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./typedoc/components/Search */ \"./default/assets/js/src/typedoc/components/Search.ts\");\n/* harmony import */ var _typedoc_components_Signature__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./typedoc/components/Signature */ \"./default/assets/js/src/typedoc/components/Signature.ts\");\n/* harmony import */ var _typedoc_components_Toggle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./typedoc/components/Toggle */ \"./default/assets/js/src/typedoc/components/Toggle.ts\");\n/* harmony import */ var _typedoc_components_Filter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./typedoc/components/Filter */ \"./default/assets/js/src/typedoc/components/Filter.ts\");\n/* harmony import */ var _css_main_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../css/main.sass */ \"./default/assets/css/main.sass\");\n\n\n\n\n\n\n\n(0,_typedoc_components_Search__WEBPACK_IMPORTED_MODULE_2__.initSearch)();\n(0,_typedoc_Application__WEBPACK_IMPORTED_MODULE_0__.registerComponent)(_typedoc_components_MenuHighlight__WEBPACK_IMPORTED_MODULE_1__.MenuHighlight, \".menu-highlight\");\n(0,_typedoc_Application__WEBPACK_IMPORTED_MODULE_0__.registerComponent)(_typedoc_components_Signature__WEBPACK_IMPORTED_MODULE_3__.Signature, \".tsd-signatures\");\n(0,_typedoc_Application__WEBPACK_IMPORTED_MODULE_0__.registerComponent)(_typedoc_components_Toggle__WEBPACK_IMPORTED_MODULE_4__.Toggle, \"a[data-toggle]\");\nif (_typedoc_components_Filter__WEBPACK_IMPORTED_MODULE_5__.Filter.isSupported()) {\n    (0,_typedoc_Application__WEBPACK_IMPORTED_MODULE_0__.registerComponent)(_typedoc_components_Filter__WEBPACK_IMPORTED_MODULE_5__.Filter, \"#tsd-filter\");\n}\nelse {\n    document.documentElement.classList.add(\"no-filter\");\n}\nvar app = new _typedoc_Application__WEBPACK_IMPORTED_MODULE_0__.Application();\nObject.defineProperty(window, \"app\", { value: app });\n\n\n//# sourceURL=webpack:///./default/assets/js/src/bootstrap.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/Application.ts":
+/*!******************************************************!*\
+  !*** ./default/assets/js/src/typedoc/Application.ts ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"registerComponent\": () => /* binding */ registerComponent,\n/* harmony export */   \"Application\": () => /* binding */ Application\n/* harmony export */ });\n/**\n * List of all known components.\n */\nvar components = [];\n/**\n * Register a new component.\n */\nfunction registerComponent(constructor, selector) {\n    components.push({\n        selector: selector,\n        constructor: constructor,\n    });\n}\n/**\n * TypeDoc application class.\n */\nvar Application = /** @class */ (function () {\n    /**\n     * Create a new Application instance.\n     */\n    function Application() {\n        this.createComponents(document.body);\n    }\n    /**\n     * Create all components beneath the given jQuery element.\n     */\n    Application.prototype.createComponents = function (context) {\n        components.forEach(function (c) {\n            context.querySelectorAll(c.selector).forEach(function (el) {\n                if (!el.dataset.hasInstance) {\n                    new c.constructor({ el: el });\n                    el.dataset.hasInstance = String(true);\n                }\n            });\n        });\n    };\n    return Application;\n}());\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/Application.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/Component.ts":
+/*!****************************************************!*\
+  !*** ./default/assets/js/src/typedoc/Component.ts ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Component\": () => /* binding */ Component\n/* harmony export */ });\n/**\n * TypeDoc component class.\n */\nvar Component = /** @class */ (function () {\n    function Component(options) {\n        this.el = options.el;\n    }\n    return Component;\n}());\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/Component.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/EventTarget.ts":
+/*!******************************************************!*\
+  !*** ./default/assets/js/src/typedoc/EventTarget.ts ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"EventTarget\": () => /* binding */ EventTarget\n/* harmony export */ });\n/**\n * TypeDoc event target class.\n */\nvar EventTarget = /** @class */ (function () {\n    function EventTarget() {\n        this.listeners = {};\n    }\n    EventTarget.prototype.addEventListener = function (type, callback) {\n        if (!(type in this.listeners)) {\n            this.listeners[type] = [];\n        }\n        this.listeners[type].push(callback);\n    };\n    EventTarget.prototype.removeEventListener = function (type, callback) {\n        if (!(type in this.listeners)) {\n            return;\n        }\n        var stack = this.listeners[type];\n        for (var i = 0, l = stack.length; i < l; i++) {\n            if (stack[i] === callback) {\n                stack.splice(i, 1);\n                return;\n            }\n        }\n    };\n    EventTarget.prototype.dispatchEvent = function (event) {\n        if (!(event.type in this.listeners)) {\n            return true;\n        }\n        var stack = this.listeners[event.type].slice();\n        for (var i = 0, l = stack.length; i < l; i++) {\n            stack[i].call(this, event);\n        }\n        return !event.defaultPrevented;\n    };\n    return EventTarget;\n}());\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/EventTarget.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/components/Filter.ts":
+/*!************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/components/Filter.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Filter\": () => /* binding */ Filter\n/* harmony export */ });\n/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Component */ \"./default/assets/js/src/typedoc/Component.ts\");\n/* harmony import */ var _utils_pointer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/pointer */ \"./default/assets/js/src/typedoc/utils/pointer.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\nvar FilterItem = /** @class */ (function () {\n    function FilterItem(key, value) {\n        this.key = key;\n        this.value = value;\n        this.defaultValue = value;\n        this.initialize();\n        if (window.localStorage[this.key]) {\n            this.setValue(this.fromLocalStorage(window.localStorage[this.key]));\n        }\n    }\n    FilterItem.prototype.initialize = function () { };\n    FilterItem.prototype.setValue = function (value) {\n        if (this.value == value)\n            return;\n        var oldValue = this.value;\n        this.value = value;\n        window.localStorage[this.key] = this.toLocalStorage(value);\n        this.handleValueChange(oldValue, value);\n    };\n    return FilterItem;\n}());\nvar FilterItemCheckbox = /** @class */ (function (_super) {\n    __extends(FilterItemCheckbox, _super);\n    function FilterItemCheckbox() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    FilterItemCheckbox.prototype.initialize = function () {\n        var _this = this;\n        var checkbox = document.querySelector(\"#tsd-filter-\" + this.key);\n        if (!checkbox)\n            return;\n        this.checkbox = checkbox;\n        this.checkbox.addEventListener(\"change\", function () {\n            _this.setValue(_this.checkbox.checked);\n        });\n    };\n    FilterItemCheckbox.prototype.handleValueChange = function (oldValue, newValue) {\n        if (!this.checkbox)\n            return;\n        this.checkbox.checked = this.value;\n        document.documentElement.classList.toggle(\"toggle-\" + this.key, this.value != this.defaultValue);\n    };\n    FilterItemCheckbox.prototype.fromLocalStorage = function (value) {\n        return value == \"true\";\n    };\n    FilterItemCheckbox.prototype.toLocalStorage = function (value) {\n        return value ? \"true\" : \"false\";\n    };\n    return FilterItemCheckbox;\n}(FilterItem));\nvar FilterItemSelect = /** @class */ (function (_super) {\n    __extends(FilterItemSelect, _super);\n    function FilterItemSelect() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    FilterItemSelect.prototype.initialize = function () {\n        var _this = this;\n        document.documentElement.classList.add(\"toggle-\" + this.key + this.value);\n        var select = document.querySelector(\"#tsd-filter-\" + this.key);\n        if (!select)\n            return;\n        this.select = select;\n        var onActivate = function () {\n            _this.select.classList.add(\"active\");\n        };\n        var onDeactivate = function () {\n            _this.select.classList.remove(\"active\");\n        };\n        this.select.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerDown, onActivate);\n        this.select.addEventListener(\"mouseover\", onActivate);\n        this.select.addEventListener(\"mouseleave\", onDeactivate);\n        this.select.querySelectorAll(\"li\").forEach(function (el) {\n            el.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerUp, function (e) {\n                select.classList.remove(\"active\");\n                _this.setValue(e.target.dataset.value || \"\");\n            });\n        });\n        document.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerDown, function (e) {\n            if (_this.select.contains(e.target))\n                return;\n            _this.select.classList.remove(\"active\");\n        });\n    };\n    FilterItemSelect.prototype.handleValueChange = function (oldValue, newValue) {\n        this.select.querySelectorAll(\"li.selected\").forEach(function (el) {\n            el.classList.remove(\"selected\");\n        });\n        var selected = this.select.querySelector('li[data-value=\"' + newValue + '\"]');\n        var label = this.select.querySelector(\".tsd-select-label\");\n        if (selected && label) {\n            selected.classList.add(\"selected\");\n            label.textContent = selected.textContent;\n        }\n        document.documentElement.classList.remove(\"toggle-\" + oldValue);\n        document.documentElement.classList.add(\"toggle-\" + newValue);\n    };\n    FilterItemSelect.prototype.fromLocalStorage = function (value) {\n        return value;\n    };\n    FilterItemSelect.prototype.toLocalStorage = function (value) {\n        return value;\n    };\n    return FilterItemSelect;\n}(FilterItem));\nvar Filter = /** @class */ (function (_super) {\n    __extends(Filter, _super);\n    function Filter(options) {\n        var _this = _super.call(this, options) || this;\n        _this.optionVisibility = new FilterItemSelect(\"visibility\", \"private\");\n        _this.optionInherited = new FilterItemCheckbox(\"inherited\", true);\n        _this.optionExternals = new FilterItemCheckbox(\"externals\", true);\n        return _this;\n    }\n    Filter.isSupported = function () {\n        try {\n            return typeof window.localStorage != \"undefined\";\n        }\n        catch (e) {\n            return false;\n        }\n    };\n    return Filter;\n}(_Component__WEBPACK_IMPORTED_MODULE_0__.Component));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/components/Filter.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/components/MenuHighlight.ts":
+/*!*******************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/components/MenuHighlight.ts ***!
+  \*******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"MenuHighlight\": () => /* binding */ MenuHighlight\n/* harmony export */ });\n/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Component */ \"./default/assets/js/src/typedoc/Component.ts\");\n/* harmony import */ var _services_Viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/Viewport */ \"./default/assets/js/src/typedoc/services/Viewport.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n/**\n * Manages the sticky state of the navigation and moves the highlight\n * to the current navigation item.\n */\nvar MenuHighlight = /** @class */ (function (_super) {\n    __extends(MenuHighlight, _super);\n    /**\n     * Create a new MenuHighlight instance.\n     *\n     * @param options  Backbone view constructor options.\n     */\n    function MenuHighlight(options) {\n        var _this = _super.call(this, options) || this;\n        /**\n         * List of all discovered anchors.\n         */\n        _this.anchors = [];\n        /**\n         * Index of the currently highlighted anchor.\n         */\n        _this.index = -1;\n        _services_Viewport__WEBPACK_IMPORTED_MODULE_1__.Viewport.instance.addEventListener(\"resize\", function () { return _this.onResize(); });\n        _services_Viewport__WEBPACK_IMPORTED_MODULE_1__.Viewport.instance.addEventListener(\"scroll\", function (e) { return _this.onScroll(e); });\n        _this.createAnchors();\n        return _this;\n    }\n    /**\n     * Find all anchors on the current page.\n     */\n    MenuHighlight.prototype.createAnchors = function () {\n        var _this = this;\n        var base = window.location.href;\n        if (base.indexOf(\"#\") != -1) {\n            base = base.substr(0, base.indexOf(\"#\"));\n        }\n        this.el.querySelectorAll(\"a\").forEach(function (el) {\n            var href = el.href;\n            if (href.indexOf(\"#\") == -1)\n                return;\n            if (href.substr(0, base.length) != base)\n                return;\n            var hash = href.substr(href.indexOf(\"#\") + 1);\n            var anchor = document.querySelector(\"a.tsd-anchor[name=\" + hash + \"]\");\n            var link = el.parentNode;\n            if (!anchor || !link)\n                return;\n            _this.anchors.push({\n                link: link,\n                anchor: anchor,\n                position: 0,\n            });\n        });\n        this.onResize();\n    };\n    /**\n     * Triggered after the viewport was resized.\n     */\n    MenuHighlight.prototype.onResize = function () {\n        var anchor;\n        for (var index = 0, count = this.anchors.length; index < count; index++) {\n            anchor = this.anchors[index];\n            var rect = anchor.anchor.getBoundingClientRect();\n            anchor.position = rect.top + document.body.scrollTop;\n        }\n        this.anchors.sort(function (a, b) {\n            return a.position - b.position;\n        });\n        var event = new CustomEvent(\"scroll\", {\n            detail: {\n                scrollTop: _services_Viewport__WEBPACK_IMPORTED_MODULE_1__.Viewport.instance.scrollTop,\n            },\n        });\n        this.onScroll(event);\n    };\n    /**\n     * Triggered after the viewport was scrolled.\n     *\n     * @param event  The custom event with the current vertical scroll position.\n     */\n    MenuHighlight.prototype.onScroll = function (event) {\n        var scrollTop = event.detail.scrollTop + 5;\n        var anchors = this.anchors;\n        var count = anchors.length - 1;\n        var index = this.index;\n        while (index > -1 && anchors[index].position > scrollTop) {\n            index -= 1;\n        }\n        while (index < count && anchors[index + 1].position < scrollTop) {\n            index += 1;\n        }\n        if (this.index != index) {\n            if (this.index > -1)\n                this.anchors[this.index].link.classList.remove(\"focus\");\n            this.index = index;\n            if (this.index > -1)\n                this.anchors[this.index].link.classList.add(\"focus\");\n        }\n    };\n    return MenuHighlight;\n}(_Component__WEBPACK_IMPORTED_MODULE_0__.Component));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/components/MenuHighlight.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/components/Search.ts":
+/*!************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/components/Search.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"initSearch\": () => /* binding */ initSearch\n/* harmony export */ });\n/* harmony import */ var _utils_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/debounce */ \"./default/assets/js/src/typedoc/utils/debounce.ts\");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lunr */ \"../node_modules/lunr/lunr.js\");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lunr__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction initSearch() {\n    var searchEl = document.getElementById(\"tsd-search\");\n    if (!searchEl)\n        return;\n    var searchScript = document.getElementById(\"search-script\");\n    searchEl.classList.add(\"loading\");\n    if (searchScript) {\n        searchScript.addEventListener(\"error\", function () {\n            searchEl.classList.remove(\"loading\");\n            searchEl.classList.add(\"failure\");\n        });\n        searchScript.addEventListener(\"load\", function () {\n            searchEl.classList.remove(\"loading\");\n            searchEl.classList.add(\"ready\");\n        });\n        if (window.searchData) {\n            searchEl.classList.remove(\"loading\");\n        }\n    }\n    var field = document.querySelector(\"#tsd-search-field\");\n    var results = document.querySelector(\".results\");\n    if (!field || !results) {\n        throw new Error(\"The input field or the result list wrapper was not found\");\n    }\n    var resultClicked = false;\n    results.addEventListener(\"mousedown\", function () { return (resultClicked = true); });\n    results.addEventListener(\"mouseup\", function () {\n        resultClicked = false;\n        searchEl.classList.remove(\"has-focus\");\n    });\n    field.addEventListener(\"focus\", function () { return searchEl.classList.add(\"has-focus\"); });\n    field.addEventListener(\"blur\", function () {\n        if (!resultClicked) {\n            resultClicked = false;\n            searchEl.classList.remove(\"has-focus\");\n        }\n    });\n    var state = {\n        base: searchEl.dataset.base + \"/\",\n    };\n    bindEvents(searchEl, results, field, state);\n}\nfunction bindEvents(searchEl, results, field, state) {\n    field.addEventListener(\"input\", (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_0__.debounce)(function () {\n        updateResults(searchEl, results, field, state);\n    }, 200));\n    var preventPress = false;\n    field.addEventListener(\"keydown\", function (e) {\n        preventPress = true;\n        if (e.key == \"Enter\") {\n            gotoCurrentResult(results, field);\n        }\n        else if (e.key == \"Escape\") {\n            field.blur();\n        }\n        else if (e.key == \"ArrowUp\") {\n            setCurrentResult(results, -1);\n        }\n        else if (e.key === \"ArrowDown\") {\n            setCurrentResult(results, 1);\n        }\n        else {\n            preventPress = false;\n        }\n    });\n    field.addEventListener(\"keypress\", function (e) {\n        if (preventPress)\n            e.preventDefault();\n    });\n    /**\n     * Start searching by pressing slash.\n     */\n    document.body.addEventListener(\"keydown\", function (e) {\n        if (e.altKey || e.ctrlKey || e.metaKey)\n            return;\n        if (!field.matches(\":focus\") && e.key === \"/\") {\n            field.focus();\n            e.preventDefault();\n        }\n    });\n}\nfunction checkIndex(state, searchEl) {\n    if (state.index)\n        return;\n    if (window.searchData) {\n        searchEl.classList.remove(\"loading\");\n        searchEl.classList.add(\"ready\");\n        state.data = window.searchData;\n        state.index = lunr__WEBPACK_IMPORTED_MODULE_1__.Index.load(window.searchData.index);\n    }\n}\nfunction updateResults(searchEl, results, query, state) {\n    checkIndex(state, searchEl);\n    // Don't clear results if loading state is not ready,\n    // because loading or error message can be removed.\n    if (!state.index || !state.data)\n        return;\n    results.textContent = \"\";\n    var searchText = query.value.trim();\n    // Perform a wildcard search\n    var res = state.index.search(\"*\" + searchText + \"*\");\n    for (var i = 0, c = Math.min(10, res.length); i < c; i++) {\n        var row = state.data.rows[Number(res[i].ref)];\n        // Bold the matched part of the query in the search results\n        var name_1 = boldMatches(row.name, searchText);\n        if (row.parent) {\n            name_1 = \"<span class=\\\"parent\\\">\" + boldMatches(row.parent, searchText) + \".</span>\" + name_1;\n        }\n        var item = document.createElement(\"li\");\n        item.classList.value = row.classes;\n        var anchor = document.createElement(\"a\");\n        anchor.href = state.base + row.url;\n        anchor.classList.add(\"tsd-kind-icon\");\n        anchor.innerHTML = name_1;\n        item.append(anchor);\n        results.appendChild(item);\n    }\n}\n/**\n * Move the highlight within the result set.\n */\nfunction setCurrentResult(results, dir) {\n    var current = results.querySelector(\".current\");\n    if (!current) {\n        current = results.querySelector(dir == 1 ? \"li:first-child\" : \"li:last-child\");\n        if (current) {\n            current.classList.add(\"current\");\n        }\n    }\n    else {\n        var rel = dir == 1\n            ? current.nextElementSibling\n            : current.previousElementSibling;\n        if (rel) {\n            current.classList.remove(\"current\");\n            rel.classList.add(\"current\");\n        }\n    }\n}\n/**\n * Navigate to the highlighted result.\n */\nfunction gotoCurrentResult(results, field) {\n    var current = results.querySelector(\".current\");\n    if (!current) {\n        current = results.querySelector(\"li:first-child\");\n    }\n    if (current) {\n        var link = current.querySelector(\"a\");\n        if (link) {\n            window.location.href = link.href;\n        }\n        field.blur();\n    }\n}\nfunction boldMatches(text, search) {\n    if (search === \"\") {\n        return text;\n    }\n    var lowerText = text.toLocaleLowerCase();\n    var lowerSearch = search.toLocaleLowerCase();\n    var parts = [];\n    var lastIndex = 0;\n    var index = lowerText.indexOf(lowerSearch);\n    while (index != -1) {\n        parts.push(escapeHtml(text.substring(lastIndex, index)), \"<b>\" + escapeHtml(text.substring(index, index + lowerSearch.length)) + \"</b>\");\n        lastIndex = index + lowerSearch.length;\n        index = lowerText.indexOf(lowerSearch, lastIndex);\n    }\n    parts.push(escapeHtml(text.substring(lastIndex)));\n    return parts.join(\"\");\n}\nvar SPECIAL_HTML = {\n    \"&\": \"&amp;\",\n    \"<\": \"&lt;\",\n    \">\": \"&gt;\",\n    \"'\": \"&#039;\",\n    '\"': \"&quot;\",\n};\nfunction escapeHtml(text) {\n    return text.replace(/[&<>\"'\"]/g, function (match) { return SPECIAL_HTML[match]; });\n}\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/components/Search.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/components/Signature.ts":
+/*!***************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/components/Signature.ts ***!
+  \***************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Signature\": () => /* binding */ Signature\n/* harmony export */ });\n/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Component */ \"./default/assets/js/src/typedoc/Component.ts\");\n/* harmony import */ var _services_Viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/Viewport */ \"./default/assets/js/src/typedoc/services/Viewport.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n/**\n * Holds a signature and its description.\n */\nvar SignatureGroup = /** @class */ (function () {\n    /**\n     * Create a new SignatureGroup instance.\n     *\n     * @param signature    The target signature.\n     * @param description  The description for the signature.\n     */\n    function SignatureGroup(signature, description) {\n        this.signature = signature;\n        this.description = description;\n    }\n    /**\n     * Add the given class to all elements of the group.\n     *\n     * @param className  The class name to add.\n     */\n    SignatureGroup.prototype.addClass = function (className) {\n        this.signature.classList.add(className);\n        this.description.classList.add(className);\n        return this;\n    };\n    /**\n     * Remove the given class from all elements of the group.\n     *\n     * @param className  The class name to remove.\n     */\n    SignatureGroup.prototype.removeClass = function (className) {\n        this.signature.classList.remove(className);\n        this.description.classList.remove(className);\n        return this;\n    };\n    return SignatureGroup;\n}());\n/**\n * Controls the tab like behaviour of methods and functions with multiple signatures.\n */\nvar Signature = /** @class */ (function (_super) {\n    __extends(Signature, _super);\n    /**\n     * Create a new Signature instance.\n     *\n     * @param options  Backbone view constructor options.\n     */\n    function Signature(options) {\n        var _this = _super.call(this, options) || this;\n        /**\n         * List of found signature groups.\n         */\n        _this.groups = [];\n        /**\n         * The index of the currently displayed signature.\n         */\n        _this.index = -1;\n        _this.createGroups();\n        if (_this.container) {\n            _this.el.classList.add(\"active\");\n            Array.from(_this.el.children).forEach(function (signature) {\n                signature.addEventListener(\"touchstart\", function (event) {\n                    return _this.onClick(event);\n                });\n                signature.addEventListener(\"click\", function (event) {\n                    return _this.onClick(event);\n                });\n            });\n            _this.container.classList.add(\"active\");\n            _this.setIndex(0);\n        }\n        return _this;\n    }\n    /**\n     * Set the index of the active signature.\n     *\n     * @param index  The index of the signature to activate.\n     */\n    Signature.prototype.setIndex = function (index) {\n        if (index < 0)\n            index = 0;\n        if (index > this.groups.length - 1)\n            index = this.groups.length - 1;\n        if (this.index == index)\n            return;\n        var to = this.groups[index];\n        if (this.index > -1) {\n            var from_1 = this.groups[this.index];\n            from_1.removeClass(\"current\").addClass(\"fade-out\");\n            to.addClass(\"current\");\n            to.addClass(\"fade-in\");\n            _services_Viewport__WEBPACK_IMPORTED_MODULE_1__.Viewport.instance.triggerResize();\n            setTimeout(function () {\n                from_1.removeClass(\"fade-out\");\n                to.removeClass(\"fade-in\");\n            }, 300);\n        }\n        else {\n            to.addClass(\"current\");\n            _services_Viewport__WEBPACK_IMPORTED_MODULE_1__.Viewport.instance.triggerResize();\n        }\n        this.index = index;\n    };\n    /**\n     * Find all signature/description groups.\n     */\n    Signature.prototype.createGroups = function () {\n        var signatures = this.el.children;\n        if (signatures.length < 2)\n            return;\n        this.container = this.el.nextElementSibling;\n        var descriptions = this.container.children;\n        this.groups = [];\n        for (var index = 0; index < signatures.length; index++) {\n            this.groups.push(new SignatureGroup(signatures[index], descriptions[index]));\n        }\n    };\n    /**\n     * Triggered when the user clicks onto a signature header.\n     *\n     * @param e  The related event object.\n     */\n    Signature.prototype.onClick = function (e) {\n        var _this = this;\n        this.groups.forEach(function (group, index) {\n            if (group.signature === e.currentTarget) {\n                _this.setIndex(index);\n            }\n        });\n    };\n    return Signature;\n}(_Component__WEBPACK_IMPORTED_MODULE_0__.Component));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/components/Signature.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/components/Toggle.ts":
+/*!************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/components/Toggle.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Toggle\": () => /* binding */ Toggle\n/* harmony export */ });\n/* harmony import */ var _Component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Component */ \"./default/assets/js/src/typedoc/Component.ts\");\n/* harmony import */ var _utils_pointer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/pointer */ \"./default/assets/js/src/typedoc/utils/pointer.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\nvar Toggle = /** @class */ (function (_super) {\n    __extends(Toggle, _super);\n    function Toggle(options) {\n        var _this = _super.call(this, options) || this;\n        _this.className = _this.el.dataset.toggle || \"\";\n        _this.el.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerUp, function (e) { return _this.onPointerUp(e); });\n        _this.el.addEventListener(\"click\", function (e) { return e.preventDefault(); });\n        document.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerDown, function (e) {\n            return _this.onDocumentPointerDown(e);\n        });\n        document.addEventListener(_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.pointerUp, function (e) {\n            return _this.onDocumentPointerUp(e);\n        });\n        return _this;\n    }\n    Toggle.prototype.setActive = function (value) {\n        if (this.active == value)\n            return;\n        this.active = value;\n        document.documentElement.classList.toggle(\"has-\" + this.className, value);\n        this.el.classList.toggle(\"active\", value);\n        var transition = (this.active ? \"to-has-\" : \"from-has-\") + this.className;\n        document.documentElement.classList.add(transition);\n        setTimeout(function () { return document.documentElement.classList.remove(transition); }, 500);\n    };\n    Toggle.prototype.onPointerUp = function (event) {\n        if (_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.hasPointerMoved)\n            return;\n        this.setActive(true);\n        event.preventDefault();\n    };\n    Toggle.prototype.onDocumentPointerDown = function (e) {\n        if (this.active) {\n            if (e.target.closest(\".col-menu, .tsd-filter-group\")) {\n                return;\n            }\n            this.setActive(false);\n        }\n    };\n    Toggle.prototype.onDocumentPointerUp = function (e) {\n        var _this = this;\n        if (_utils_pointer__WEBPACK_IMPORTED_MODULE_1__.hasPointerMoved)\n            return;\n        if (this.active) {\n            if (e.target.closest(\".col-menu\")) {\n                var link = e.target.closest(\"a\");\n                if (link) {\n                    var href = window.location.href;\n                    if (href.indexOf(\"#\") != -1) {\n                        href = href.substr(0, href.indexOf(\"#\"));\n                    }\n                    if (link.href.substr(0, href.length) == href) {\n                        setTimeout(function () { return _this.setActive(false); }, 250);\n                    }\n                }\n            }\n        }\n    };\n    return Toggle;\n}(_Component__WEBPACK_IMPORTED_MODULE_0__.Component));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/components/Toggle.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/services/Viewport.ts":
+/*!************************************************************!*\
+  !*** ./default/assets/js/src/typedoc/services/Viewport.ts ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Viewport\": () => /* binding */ Viewport\n/* harmony export */ });\n/* harmony import */ var _EventTarget__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../EventTarget */ \"./default/assets/js/src/typedoc/EventTarget.ts\");\n/* harmony import */ var _utils_trottle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/trottle */ \"./default/assets/js/src/typedoc/utils/trottle.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\n\n\n/**\n * A global service that monitors the window size and scroll position.\n */\nvar Viewport = /** @class */ (function (_super) {\n    __extends(Viewport, _super);\n    /**\n     * Create new Viewport instance.\n     */\n    function Viewport() {\n        var _this = _super.call(this) || this;\n        /**\n         * The current scroll position.\n         */\n        _this.scrollTop = 0;\n        /**\n         * The previous scrollTop.\n         */\n        _this.lastY = 0;\n        /**\n         * The width of the window.\n         */\n        _this.width = 0;\n        /**\n         * The height of the window.\n         */\n        _this.height = 0;\n        /**\n         * Boolean indicating whether the toolbar is shown.\n         */\n        _this.showToolbar = true;\n        _this.toolbar = (document.querySelector(\".tsd-page-toolbar\"));\n        _this.secondaryNav = (document.querySelector(\".tsd-navigation.secondary\"));\n        window.addEventListener(\"scroll\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onScroll(); }, 10));\n        window.addEventListener(\"resize\", (0,_utils_trottle__WEBPACK_IMPORTED_MODULE_1__.throttle)(function () { return _this.onResize(); }, 10));\n        _this.onResize();\n        _this.onScroll();\n        return _this;\n    }\n    /**\n     * Trigger a resize event.\n     */\n    Viewport.prototype.triggerResize = function () {\n        var event = new CustomEvent(\"resize\", {\n            detail: {\n                width: this.width,\n                height: this.height,\n            },\n        });\n        this.dispatchEvent(event);\n    };\n    /**\n     * Triggered when the size of the window has changed.\n     */\n    Viewport.prototype.onResize = function () {\n        this.width = window.innerWidth || 0;\n        this.height = window.innerHeight || 0;\n        var event = new CustomEvent(\"resize\", {\n            detail: {\n                width: this.width,\n                height: this.height,\n            },\n        });\n        this.dispatchEvent(event);\n    };\n    /**\n     * Triggered when the user scrolled the viewport.\n     */\n    Viewport.prototype.onScroll = function () {\n        this.scrollTop = window.scrollY || 0;\n        var event = new CustomEvent(\"scroll\", {\n            detail: {\n                scrollTop: this.scrollTop,\n            },\n        });\n        this.dispatchEvent(event);\n        this.hideShowToolbar();\n    };\n    /**\n     * Handle hiding/showing of the toolbar.\n     */\n    Viewport.prototype.hideShowToolbar = function () {\n        var isShown = this.showToolbar;\n        this.showToolbar = this.lastY >= this.scrollTop || this.scrollTop <= 0;\n        if (isShown !== this.showToolbar) {\n            this.toolbar.classList.toggle(\"tsd-page-toolbar--hide\");\n            this.secondaryNav.classList.toggle(\"tsd-navigation--toolbar-hide\");\n        }\n        this.lastY = this.scrollTop;\n    };\n    Viewport.instance = new Viewport();\n    return Viewport;\n}(_EventTarget__WEBPACK_IMPORTED_MODULE_0__.EventTarget));\n\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/services/Viewport.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/utils/debounce.ts":
+/*!*********************************************************!*\
+  !*** ./default/assets/js/src/typedoc/utils/debounce.ts ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"debounce\": () => /* binding */ debounce\n/* harmony export */ });\nvar debounce = function (fn, wait) {\n    if (wait === void 0) { wait = 100; }\n    var timeout;\n    return function () {\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        clearTimeout(timeout);\n        timeout = setTimeout(function () { return fn(args); }, wait);\n    };\n};\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/utils/debounce.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/utils/pointer.ts":
+/*!********************************************************!*\
+  !*** ./default/assets/js/src/typedoc/utils/pointer.ts ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"pointerDown\": () => /* binding */ pointerDown,\n/* harmony export */   \"pointerMove\": () => /* binding */ pointerMove,\n/* harmony export */   \"pointerUp\": () => /* binding */ pointerUp,\n/* harmony export */   \"pointerDownPosition\": () => /* binding */ pointerDownPosition,\n/* harmony export */   \"preventNextClick\": () => /* binding */ preventNextClick,\n/* harmony export */   \"isPointerDown\": () => /* binding */ isPointerDown,\n/* harmony export */   \"isPointerTouch\": () => /* binding */ isPointerTouch,\n/* harmony export */   \"hasPointerMoved\": () => /* binding */ hasPointerMoved,\n/* harmony export */   \"isMobile\": () => /* binding */ isMobile\n/* harmony export */ });\n/**\n * Event name of the pointer down event.\n */\nvar pointerDown = \"mousedown\";\n/**\n * Event name of the pointer move event.\n */\nvar pointerMove = \"mousemove\";\n/**\n * Event name of the pointer up event.\n */\nvar pointerUp = \"mouseup\";\n/**\n * Position the pointer was pressed at.\n */\nvar pointerDownPosition = { x: 0, y: 0 };\n/**\n * Should the next click on the document be supressed?\n */\nvar preventNextClick = false;\n/**\n * Is the pointer down?\n */\nvar isPointerDown = false;\n/**\n * Is the pointer a touch point?\n */\nvar isPointerTouch = false;\n/**\n * Did the pointer move since the last down event?\n */\nvar hasPointerMoved = false;\n/**\n * Is the user agent a mobile agent?\n */\nvar isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\ndocument.documentElement.classList.add(isMobile ? \"is-mobile\" : \"not-mobile\");\nif (isMobile && \"ontouchstart\" in document.documentElement) {\n    isPointerTouch = true;\n    pointerDown = \"touchstart\";\n    pointerMove = \"touchmove\";\n    pointerUp = \"touchend\";\n}\ndocument.addEventListener(pointerDown, function (e) {\n    isPointerDown = true;\n    hasPointerMoved = false;\n    var t = pointerDown == \"touchstart\"\n        ? e.targetTouches[0]\n        : e;\n    pointerDownPosition.y = t.pageY || 0;\n    pointerDownPosition.x = t.pageX || 0;\n});\ndocument.addEventListener(pointerMove, function (e) {\n    if (!isPointerDown)\n        return;\n    if (!hasPointerMoved) {\n        var t = pointerDown == \"touchstart\"\n            ? e.targetTouches[0]\n            : e;\n        var x = pointerDownPosition.x - (t.pageX || 0);\n        var y = pointerDownPosition.y - (t.pageY || 0);\n        hasPointerMoved = Math.sqrt(x * x + y * y) > 10;\n    }\n});\ndocument.addEventListener(pointerUp, function () {\n    isPointerDown = false;\n});\ndocument.addEventListener(\"click\", function (e) {\n    if (preventNextClick) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n        preventNextClick = false;\n    }\n});\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/utils/pointer.ts?");
+
+/***/ }),
+
+/***/ "./default/assets/js/src/typedoc/utils/trottle.ts":
+/*!********************************************************!*\
+  !*** ./default/assets/js/src/typedoc/utils/trottle.ts ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"throttle\": () => /* binding */ throttle\n/* harmony export */ });\nvar throttle = function (fn, wait) {\n    if (wait === void 0) { wait = 100; }\n    var time = Date.now();\n    return function () {\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        if (time + wait - Date.now() < 0) {\n            fn.apply(void 0, args);\n            time = Date.now();\n        }\n    };\n};\n\n\n//# sourceURL=webpack:///./default/assets/js/src/typedoc/utils/trottle.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => module['default'] :
+/******/ 				() => module;
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	// startup
+/******/ 	// Load entry module
+/******/ 	__webpack_require__("./default/assets/js/src/bootstrap.ts");
+/******/ 	// This entry module used 'exports' so it can't be inlined
+/******/ })()
+;
\ No newline at end of file
diff --git a/docs/assets/js/search.js b/docs/assets/js/search.js
new file mode 100644
index 000000000..9cac81346
--- /dev/null
+++ b/docs/assets/js/search.js
@@ -0,0 +1 @@
+window.searchData = {"kinds":{"1":"Module","4":"Enumeration","16":"Enumeration member","64":"Function","128":"Class","256":"Interface","512":"Constructor","1024":"Property","65536":"Type literal","4194304":"Type alias"},"rows":[{"id":0,"kind":1,"name":"SelfServe","url":"modules/selfserve.html","classes":"tsd-kind-module"},{"id":1,"kind":1,"name":"SelfServe - What is currently supported?","url":"modules/selfserve___what_is_currently_supported_.html","classes":"tsd-kind-module"},{"id":2,"kind":1,"name":"SelfServe/Decorators","url":"modules/selfserve_decorators.html","classes":"tsd-kind-module"},{"id":3,"kind":256,"name":"NumberInputOptions","url":"interfaces/selfserve_decorators.numberinputoptions.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":4,"kind":1024,"name":"min","url":"interfaces/selfserve_decorators.numberinputoptions.html#min","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.NumberInputOptions"},{"id":5,"kind":1024,"name":"max","url":"interfaces/selfserve_decorators.numberinputoptions.html#max","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.NumberInputOptions"},{"id":6,"kind":1024,"name":"step","url":"interfaces/selfserve_decorators.numberinputoptions.html#step","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.NumberInputOptions"},{"id":7,"kind":1024,"name":"uiType","url":"interfaces/selfserve_decorators.numberinputoptions.html#uitype","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.NumberInputOptions"},{"id":8,"kind":1024,"name":"labelTKey","url":"interfaces/selfserve_decorators.numberinputoptions.html#labeltkey","classes":"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited","parent":"SelfServe/Decorators.NumberInputOptions"},{"id":9,"kind":256,"name":"StringInputOptions","url":"interfaces/selfserve_decorators.stringinputoptions.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":10,"kind":1024,"name":"placeholderTKey","url":"interfaces/selfserve_decorators.stringinputoptions.html#placeholdertkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.StringInputOptions"},{"id":11,"kind":1024,"name":"labelTKey","url":"interfaces/selfserve_decorators.stringinputoptions.html#labeltkey","classes":"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited","parent":"SelfServe/Decorators.StringInputOptions"},{"id":12,"kind":256,"name":"BooleanInputOptions","url":"interfaces/selfserve_decorators.booleaninputoptions.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":13,"kind":1024,"name":"trueLabelTKey","url":"interfaces/selfserve_decorators.booleaninputoptions.html#truelabeltkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.BooleanInputOptions"},{"id":14,"kind":1024,"name":"falseLabelTKey","url":"interfaces/selfserve_decorators.booleaninputoptions.html#falselabeltkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.BooleanInputOptions"},{"id":15,"kind":1024,"name":"labelTKey","url":"interfaces/selfserve_decorators.booleaninputoptions.html#labeltkey","classes":"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited","parent":"SelfServe/Decorators.BooleanInputOptions"},{"id":16,"kind":256,"name":"ChoiceInputOptions","url":"interfaces/selfserve_decorators.choiceinputoptions.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":17,"kind":1024,"name":"choices","url":"interfaces/selfserve_decorators.choiceinputoptions.html#choices","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.ChoiceInputOptions"},{"id":18,"kind":1024,"name":"placeholderTKey","url":"interfaces/selfserve_decorators.choiceinputoptions.html#placeholdertkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.ChoiceInputOptions"},{"id":19,"kind":1024,"name":"labelTKey","url":"interfaces/selfserve_decorators.choiceinputoptions.html#labeltkey","classes":"tsd-kind-property tsd-parent-kind-interface tsd-is-inherited","parent":"SelfServe/Decorators.ChoiceInputOptions"},{"id":20,"kind":256,"name":"DescriptionDisplayOptions","url":"interfaces/selfserve_decorators.descriptiondisplayoptions.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":21,"kind":1024,"name":"labelTKey","url":"interfaces/selfserve_decorators.descriptiondisplayoptions.html#labeltkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.DescriptionDisplayOptions"},{"id":22,"kind":1024,"name":"description","url":"interfaces/selfserve_decorators.descriptiondisplayoptions.html#description","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.DescriptionDisplayOptions"},{"id":23,"kind":1024,"name":"isDynamicDescription","url":"interfaces/selfserve_decorators.descriptiondisplayoptions.html#isdynamicdescription","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/Decorators.DescriptionDisplayOptions"},{"id":24,"kind":4194304,"name":"InputOptions","url":"modules/selfserve_decorators.html#inputoptions","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":25,"kind":64,"name":"OnChange","url":"modules/selfserve_decorators.html#onchange","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":26,"kind":64,"name":"PropertyInfo","url":"modules/selfserve_decorators.html#propertyinfo","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":27,"kind":64,"name":"Values","url":"modules/selfserve_decorators.html#values","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":28,"kind":64,"name":"IsDisplayable","url":"modules/selfserve_decorators.html#isdisplayable","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":29,"kind":64,"name":"RefreshOptions","url":"modules/selfserve_decorators.html#refreshoptions","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/Decorators"},{"id":30,"kind":1,"name":"SelfServe/SelfServeTypes","url":"modules/selfserve_selfservetypes.html","classes":"tsd-kind-module"},{"id":31,"kind":4194304,"name":"initializeCallback","url":"modules/selfserve_selfservetypes.html#initializecallback","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":32,"kind":65536,"name":"__type","url":"modules/selfserve_selfservetypes.html#initializecallback.__type-2","classes":"tsd-kind-type-literal tsd-parent-kind-type-alias","parent":"SelfServe/SelfServeTypes.initializeCallback"},{"id":33,"kind":4194304,"name":"onSaveCallback","url":"modules/selfserve_selfservetypes.html#onsavecallback","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":34,"kind":65536,"name":"__type","url":"modules/selfserve_selfservetypes.html#onsavecallback.__type-3","classes":"tsd-kind-type-literal tsd-parent-kind-type-alias","parent":"SelfServe/SelfServeTypes.onSaveCallback"},{"id":35,"kind":128,"name":"SelfServeBaseClass","url":"classes/selfserve_selfservetypes.selfservebaseclass.html","classes":"tsd-kind-class tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":36,"kind":512,"name":"constructor","url":"classes/selfserve_selfservetypes.selfservebaseclass.html#constructor","classes":"tsd-kind-constructor tsd-parent-kind-class","parent":"SelfServe/SelfServeTypes.SelfServeBaseClass"},{"id":37,"kind":1024,"name":"initialize","url":"classes/selfserve_selfservetypes.selfservebaseclass.html#initialize","classes":"tsd-kind-property tsd-parent-kind-class","parent":"SelfServe/SelfServeTypes.SelfServeBaseClass"},{"id":38,"kind":1024,"name":"onSave","url":"classes/selfserve_selfservetypes.selfservebaseclass.html#onsave","classes":"tsd-kind-property tsd-parent-kind-class","parent":"SelfServe/SelfServeTypes.SelfServeBaseClass"},{"id":39,"kind":1024,"name":"onRefresh","url":"classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh","classes":"tsd-kind-property tsd-parent-kind-class","parent":"SelfServe/SelfServeTypes.SelfServeBaseClass"},{"id":40,"kind":65536,"name":"__type","url":"classes/selfserve_selfservetypes.selfservebaseclass.html#__type","classes":"tsd-kind-type-literal tsd-parent-kind-class","parent":"SelfServe/SelfServeTypes.SelfServeBaseClass"},{"id":41,"kind":4194304,"name":"OnChangeCallback","url":"modules/selfserve_selfservetypes.html#onchangecallback","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":42,"kind":65536,"name":"__type","url":"modules/selfserve_selfservetypes.html#onchangecallback.__type-1","classes":"tsd-kind-type-literal tsd-parent-kind-type-alias","parent":"SelfServe/SelfServeTypes.OnChangeCallback"},{"id":43,"kind":4,"name":"NumberUiType","url":"enums/selfserve_selfservetypes.numberuitype.html","classes":"tsd-kind-enum tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":44,"kind":16,"name":"Spinner","url":"enums/selfserve_selfservetypes.numberuitype.html#spinner","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeTypes.NumberUiType"},{"id":45,"kind":16,"name":"Slider","url":"enums/selfserve_selfservetypes.numberuitype.html#slider","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeTypes.NumberUiType"},{"id":46,"kind":4194304,"name":"ChoiceItem","url":"modules/selfserve_selfservetypes.html#choiceitem","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":47,"kind":65536,"name":"__type","url":"modules/selfserve_selfservetypes.html#choiceitem.__type","classes":"tsd-kind-type-literal tsd-parent-kind-type-alias","parent":"SelfServe/SelfServeTypes.ChoiceItem"},{"id":48,"kind":1024,"name":"labelTKey","url":"modules/selfserve_selfservetypes.html#choiceitem.__type.labeltkey","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.ChoiceItem.__type"},{"id":49,"kind":1024,"name":"key","url":"modules/selfserve_selfservetypes.html#choiceitem.__type.key","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.ChoiceItem.__type"},{"id":50,"kind":4194304,"name":"InputType","url":"modules/selfserve_selfservetypes.html#inputtype","classes":"tsd-kind-type-alias tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":51,"kind":256,"name":"Info","url":"interfaces/selfserve_selfservetypes.info.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":52,"kind":1024,"name":"messageTKey","url":"interfaces/selfserve_selfservetypes.info.html#messagetkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Info"},{"id":53,"kind":1024,"name":"link","url":"interfaces/selfserve_selfservetypes.info.html#link","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Info"},{"id":54,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.info.html#__type","classes":"tsd-kind-type-literal tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Info"},{"id":55,"kind":1024,"name":"href","url":"interfaces/selfserve_selfservetypes.info.html#__type.href","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.Info.__type"},{"id":56,"kind":1024,"name":"textTKey","url":"interfaces/selfserve_selfservetypes.info.html#__type.texttkey","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.Info.__type"},{"id":57,"kind":4,"name":"DescriptionType","url":"enums/selfserve_selfservetypes.descriptiontype.html","classes":"tsd-kind-enum tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":58,"kind":16,"name":"Text","url":"enums/selfserve_selfservetypes.descriptiontype.html#text","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeTypes.DescriptionType"},{"id":59,"kind":16,"name":"InfoMessageBar","url":"enums/selfserve_selfservetypes.descriptiontype.html#infomessagebar","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeTypes.DescriptionType"},{"id":60,"kind":16,"name":"WarningMessageBar","url":"enums/selfserve_selfservetypes.descriptiontype.html#warningmessagebar","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeTypes.DescriptionType"},{"id":61,"kind":256,"name":"Description","url":"interfaces/selfserve_selfservetypes.description.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":62,"kind":1024,"name":"textTKey","url":"interfaces/selfserve_selfservetypes.description.html#texttkey-1","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Description"},{"id":63,"kind":1024,"name":"type","url":"interfaces/selfserve_selfservetypes.description.html#type","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Description"},{"id":64,"kind":1024,"name":"link","url":"interfaces/selfserve_selfservetypes.description.html#link","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Description"},{"id":65,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.description.html#__type","classes":"tsd-kind-type-literal tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.Description"},{"id":66,"kind":1024,"name":"href","url":"interfaces/selfserve_selfservetypes.description.html#__type.href","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.Description.__type"},{"id":67,"kind":1024,"name":"textTKey","url":"interfaces/selfserve_selfservetypes.description.html#__type.texttkey","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.Description.__type"},{"id":68,"kind":256,"name":"SmartUiInput","url":"interfaces/selfserve_selfservetypes.smartuiinput.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":69,"kind":1024,"name":"value","url":"interfaces/selfserve_selfservetypes.smartuiinput.html#value","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.SmartUiInput"},{"id":70,"kind":1024,"name":"hidden","url":"interfaces/selfserve_selfservetypes.smartuiinput.html#hidden","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.SmartUiInput"},{"id":71,"kind":1024,"name":"disabled","url":"interfaces/selfserve_selfservetypes.smartuiinput.html#disabled","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.SmartUiInput"},{"id":72,"kind":256,"name":"OnSaveResult","url":"interfaces/selfserve_selfservetypes.onsaveresult.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":73,"kind":1024,"name":"operationStatusUrl","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#operationstatusurl","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.OnSaveResult"},{"id":74,"kind":1024,"name":"portalNotification","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#portalnotification","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.OnSaveResult"},{"id":75,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type","classes":"tsd-kind-type-literal tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.OnSaveResult"},{"id":76,"kind":1024,"name":"initialize","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.initialize","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":77,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-2","classes":"tsd-kind-type-literal tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":78,"kind":1024,"name":"titleTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-2.titletkey-1","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":79,"kind":1024,"name":"messageTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-2.messagetkey-1","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":80,"kind":1024,"name":"success","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.success","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":81,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-3","classes":"tsd-kind-type-literal tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":82,"kind":1024,"name":"titleTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-3.titletkey-2","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":83,"kind":1024,"name":"messageTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-3.messagetkey-2","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":84,"kind":1024,"name":"failure","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.failure","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":85,"kind":65536,"name":"__type","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-1","classes":"tsd-kind-type-literal tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type"},{"id":86,"kind":1024,"name":"titleTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-1.titletkey","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":87,"kind":1024,"name":"messageTKey","url":"interfaces/selfserve_selfservetypes.onsaveresult.html#__type.__type-1.messagetkey","classes":"tsd-kind-property tsd-parent-kind-type-literal","parent":"SelfServe/SelfServeTypes.OnSaveResult.__type.__type"},{"id":88,"kind":256,"name":"RefreshResult","url":"interfaces/selfserve_selfservetypes.refreshresult.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":89,"kind":1024,"name":"isUpdateInProgress","url":"interfaces/selfserve_selfservetypes.refreshresult.html#isupdateinprogress","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.RefreshResult"},{"id":90,"kind":1024,"name":"updateInProgressMessageTKey","url":"interfaces/selfserve_selfservetypes.refreshresult.html#updateinprogressmessagetkey","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.RefreshResult"},{"id":91,"kind":256,"name":"RefreshParams","url":"interfaces/selfserve_selfservetypes.refreshparams.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":92,"kind":1024,"name":"retryIntervalInMs","url":"interfaces/selfserve_selfservetypes.refreshparams.html#retryintervalinms","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.RefreshParams"},{"id":93,"kind":256,"name":"SelfServeTelemetryMessage","url":"interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"SelfServe/SelfServeTypes"},{"id":94,"kind":1024,"name":"selfServeClassName","url":"interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html#selfserveclassname","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"SelfServe/SelfServeTypes.SelfServeTelemetryMessage"},{"id":95,"kind":1,"name":"SelfServe/SelfServeUtils","url":"modules/selfserve_selfserveutils.html","classes":"tsd-kind-module"},{"id":96,"kind":4,"name":"SelfServeType","url":"enums/selfserve_selfserveutils.selfservetype.html","classes":"tsd-kind-enum tsd-parent-kind-module","parent":"SelfServe/SelfServeUtils"},{"id":97,"kind":16,"name":"invalid","url":"enums/selfserve_selfserveutils.selfservetype.html#invalid","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.SelfServeType"},{"id":98,"kind":16,"name":"example","url":"enums/selfserve_selfserveutils.selfservetype.html#example","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.SelfServeType"},{"id":99,"kind":16,"name":"sqlx","url":"enums/selfserve_selfserveutils.selfservetype.html#sqlx","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.SelfServeType"},{"id":100,"kind":4,"name":"BladeType","url":"enums/selfserve_selfserveutils.bladetype.html","classes":"tsd-kind-enum tsd-parent-kind-module","parent":"SelfServe/SelfServeUtils"},{"id":101,"kind":16,"name":"SqlKeys","url":"enums/selfserve_selfserveutils.bladetype.html#sqlkeys","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":102,"kind":16,"name":"MongoKeys","url":"enums/selfserve_selfserveutils.bladetype.html#mongokeys","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":103,"kind":16,"name":"CassandraKeys","url":"enums/selfserve_selfserveutils.bladetype.html#cassandrakeys","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":104,"kind":16,"name":"GremlinKeys","url":"enums/selfserve_selfserveutils.bladetype.html#gremlinkeys","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":105,"kind":16,"name":"TableKeys","url":"enums/selfserve_selfserveutils.bladetype.html#tablekeys","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":106,"kind":16,"name":"Metrics","url":"enums/selfserve_selfserveutils.bladetype.html#metrics","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"SelfServe/SelfServeUtils.BladeType"},{"id":107,"kind":64,"name":"generateBladeLink","url":"modules/selfserve_selfserveutils.html#generatebladelink","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeUtils"},{"id":108,"kind":1,"name":"SelfServe/SelfServeTelemetryProcessor","url":"modules/selfserve_selfservetelemetryprocessor.html","classes":"tsd-kind-module"},{"id":109,"kind":64,"name":"selfServeTrace","url":"modules/selfserve_selfservetelemetryprocessor.html#selfservetrace","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeTelemetryProcessor"},{"id":110,"kind":64,"name":"selfServeTraceStart","url":"modules/selfserve_selfservetelemetryprocessor.html#selfservetracestart","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeTelemetryProcessor"},{"id":111,"kind":64,"name":"selfServeTraceSuccess","url":"modules/selfserve_selfservetelemetryprocessor.html#selfservetracesuccess","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeTelemetryProcessor"},{"id":112,"kind":64,"name":"selfServeTraceFailure","url":"modules/selfserve_selfservetelemetryprocessor.html#selfservetracefailure","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeTelemetryProcessor"},{"id":113,"kind":64,"name":"selfServeTraceCancel","url":"modules/selfserve_selfservetelemetryprocessor.html#selfservetracecancel","classes":"tsd-kind-function tsd-parent-kind-module","parent":"SelfServe/SelfServeTelemetryProcessor"}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,38.825]],["parent/0",[]],["name/1",[0,14.915,1,16.905,2,16.905,3,16.905,4,16.905]],["parent/1",[]],["name/2",[5,22.504]],["parent/2",[]],["name/3",[6,44.005]],["parent/3",[5,2.17]],["name/4",[7,44.005]],["parent/4",[8,2.973]],["name/5",[9,44.005]],["parent/5",[8,2.973]],["name/6",[10,44.005]],["parent/6",[8,2.973]],["name/7",[11,44.005]],["parent/7",[8,2.973]],["name/8",[12,29.135]],["parent/8",[8,2.973]],["name/9",[13,44.005]],["parent/9",[5,2.17]],["name/10",[14,38.825]],["parent/10",[15,3.744]],["name/11",[12,29.135]],["parent/11",[15,3.744]],["name/12",[16,44.005]],["parent/12",[5,2.17]],["name/13",[17,44.005]],["parent/13",[18,3.415]],["name/14",[19,44.005]],["parent/14",[18,3.415]],["name/15",[12,29.135]],["parent/15",[18,3.415]],["name/16",[20,44.005]],["parent/16",[5,2.17]],["name/17",[21,44.005]],["parent/17",[22,3.415]],["name/18",[14,38.825]],["parent/18",[22,3.415]],["name/19",[12,29.135]],["parent/19",[22,3.415]],["name/20",[23,44.005]],["parent/20",[5,2.17]],["name/21",[12,29.135]],["parent/21",[24,3.415]],["name/22",[25,38.825]],["parent/22",[24,3.415]],["name/23",[26,44.005]],["parent/23",[24,3.415]],["name/24",[27,44.005]],["parent/24",[5,2.17]],["name/25",[28,44.005]],["parent/25",[5,2.17]],["name/26",[29,44.005]],["parent/26",[5,2.17]],["name/27",[30,44.005]],["parent/27",[5,2.17]],["name/28",[31,44.005]],["parent/28",[5,2.17]],["name/29",[32,44.005]],["parent/29",[5,2.17]],["name/30",[33,19.689]],["parent/30",[]],["name/31",[34,44.005]],["parent/31",[33,1.898]],["name/32",[35,23.35]],["parent/32",[36,4.243]],["name/33",[37,44.005]],["parent/33",[33,1.898]],["name/34",[35,23.35]],["parent/34",[38,4.243]],["name/35",[39,44.005]],["parent/35",[33,1.898]],["name/36",[40,44.005]],["parent/36",[41,2.973]],["name/37",[42,38.825]],["parent/37",[41,2.973]],["name/38",[43,44.005]],["parent/38",[41,2.973]],["name/39",[44,44.005]],["parent/39",[41,2.973]],["name/40",[35,23.35]],["parent/40",[41,2.973]],["name/41",[45,44.005]],["parent/41",[33,1.898]],["name/42",[35,23.35]],["parent/42",[46,4.243]],["name/43",[47,44.005]],["parent/43",[33,1.898]],["name/44",[48,44.005]],["parent/44",[49,3.744]],["name/45",[50,44.005]],["parent/45",[49,3.744]],["name/46",[51,44.005]],["parent/46",[33,1.898]],["name/47",[35,23.35]],["parent/47",[52,4.243]],["name/48",[12,29.135]],["parent/48",[53,3.744]],["name/49",[54,44.005]],["parent/49",[53,3.744]],["name/50",[55,44.005]],["parent/50",[33,1.898]],["name/51",[56,44.005]],["parent/51",[33,1.898]],["name/52",[57,32.864]],["parent/52",[58,3.415]],["name/53",[59,38.825]],["parent/53",[58,3.415]],["name/54",[35,23.35]],["parent/54",[58,3.415]],["name/55",[60,38.825]],["parent/55",[61,3.744]],["name/56",[62,35.413]],["parent/56",[61,3.744]],["name/57",[63,44.005]],["parent/57",[33,1.898]],["name/58",[64,44.005]],["parent/58",[65,3.415]],["name/59",[66,44.005]],["parent/59",[65,3.415]],["name/60",[67,44.005]],["parent/60",[65,3.415]],["name/61",[25,38.825]],["parent/61",[33,1.898]],["name/62",[62,35.413]],["parent/62",[68,3.169]],["name/63",[69,44.005]],["parent/63",[68,3.169]],["name/64",[59,38.825]],["parent/64",[68,3.169]],["name/65",[35,23.35]],["parent/65",[68,3.169]],["name/66",[60,38.825]],["parent/66",[70,3.744]],["name/67",[62,35.413]],["parent/67",[70,3.744]],["name/68",[71,44.005]],["parent/68",[33,1.898]],["name/69",[72,44.005]],["parent/69",[73,3.415]],["name/70",[74,44.005]],["parent/70",[73,3.415]],["name/71",[75,44.005]],["parent/71",[73,3.415]],["name/72",[76,44.005]],["parent/72",[33,1.898]],["name/73",[77,44.005]],["parent/73",[78,3.415]],["name/74",[79,44.005]],["parent/74",[78,3.415]],["name/75",[35,23.35]],["parent/75",[78,3.415]],["name/76",[42,38.825]],["parent/76",[80,2.809]],["name/77",[35,23.35]],["parent/77",[80,2.809]],["name/78",[81,35.413]],["parent/78",[82,2.809]],["name/79",[57,32.864]],["parent/79",[82,2.809]],["name/80",[83,44.005]],["parent/80",[80,2.809]],["name/81",[35,23.35]],["parent/81",[80,2.809]],["name/82",[81,35.413]],["parent/82",[82,2.809]],["name/83",[57,32.864]],["parent/83",[82,2.809]],["name/84",[84,44.005]],["parent/84",[80,2.809]],["name/85",[35,23.35]],["parent/85",[80,2.809]],["name/86",[81,35.413]],["parent/86",[82,2.809]],["name/87",[57,32.864]],["parent/87",[82,2.809]],["name/88",[85,44.005]],["parent/88",[33,1.898]],["name/89",[86,44.005]],["parent/89",[87,3.744]],["name/90",[88,44.005]],["parent/90",[87,3.744]],["name/91",[89,44.005]],["parent/91",[33,1.898]],["name/92",[90,44.005]],["parent/92",[91,4.243]],["name/93",[92,44.005]],["parent/93",[33,1.898]],["name/94",[93,44.005]],["parent/94",[94,4.243]],["name/95",[95,32.864]],["parent/95",[]],["name/96",[96,44.005]],["parent/96",[95,3.169]],["name/97",[97,44.005]],["parent/97",[98,3.415]],["name/98",[99,44.005]],["parent/98",[98,3.415]],["name/99",[100,44.005]],["parent/99",[98,3.415]],["name/100",[101,44.005]],["parent/100",[95,3.169]],["name/101",[102,44.005]],["parent/101",[103,2.809]],["name/102",[104,44.005]],["parent/102",[103,2.809]],["name/103",[105,44.005]],["parent/103",[103,2.809]],["name/104",[106,44.005]],["parent/104",[103,2.809]],["name/105",[107,44.005]],["parent/105",[103,2.809]],["name/106",[108,44.005]],["parent/106",[103,2.809]],["name/107",[109,44.005]],["parent/107",[95,3.169]],["name/108",[110,29.135]],["parent/108",[]],["name/109",[111,44.005]],["parent/109",[110,2.809]],["name/110",[112,44.005]],["parent/110",[110,2.809]],["name/111",[113,44.005]],["parent/111",[110,2.809]],["name/112",[114,44.005]],["parent/112",[110,2.809]],["name/113",[115,44.005]],["parent/113",[110,2.809]]],"invertedIndex":[["__type",{"_index":35,"name":{"32":{},"34":{},"40":{},"42":{},"47":{},"54":{},"65":{},"75":{},"77":{},"81":{},"85":{}},"parent":{}}],["bladetype",{"_index":101,"name":{"100":{}},"parent":{}}],["booleaninputoptions",{"_index":16,"name":{"12":{}},"parent":{}}],["cassandrakeys",{"_index":105,"name":{"103":{}},"parent":{}}],["choiceinputoptions",{"_index":20,"name":{"16":{}},"parent":{}}],["choiceitem",{"_index":51,"name":{"46":{}},"parent":{}}],["choices",{"_index":21,"name":{"17":{}},"parent":{}}],["constructor",{"_index":40,"name":{"36":{}},"parent":{}}],["currently",{"_index":3,"name":{"1":{}},"parent":{}}],["description",{"_index":25,"name":{"22":{},"61":{}},"parent":{}}],["descriptiondisplayoptions",{"_index":23,"name":{"20":{}},"parent":{}}],["descriptiontype",{"_index":63,"name":{"57":{}},"parent":{}}],["disabled",{"_index":75,"name":{"71":{}},"parent":{}}],["example",{"_index":99,"name":{"98":{}},"parent":{}}],["failure",{"_index":84,"name":{"84":{}},"parent":{}}],["falselabeltkey",{"_index":19,"name":{"14":{}},"parent":{}}],["generatebladelink",{"_index":109,"name":{"107":{}},"parent":{}}],["gremlinkeys",{"_index":106,"name":{"104":{}},"parent":{}}],["hidden",{"_index":74,"name":{"70":{}},"parent":{}}],["href",{"_index":60,"name":{"55":{},"66":{}},"parent":{}}],["info",{"_index":56,"name":{"51":{}},"parent":{}}],["infomessagebar",{"_index":66,"name":{"59":{}},"parent":{}}],["initialize",{"_index":42,"name":{"37":{},"76":{}},"parent":{}}],["initializecallback",{"_index":34,"name":{"31":{}},"parent":{}}],["inputoptions",{"_index":27,"name":{"24":{}},"parent":{}}],["inputtype",{"_index":55,"name":{"50":{}},"parent":{}}],["invalid",{"_index":97,"name":{"97":{}},"parent":{}}],["is",{"_index":2,"name":{"1":{}},"parent":{}}],["isdisplayable",{"_index":31,"name":{"28":{}},"parent":{}}],["isdynamicdescription",{"_index":26,"name":{"23":{}},"parent":{}}],["isupdateinprogress",{"_index":86,"name":{"89":{}},"parent":{}}],["key",{"_index":54,"name":{"49":{}},"parent":{}}],["labeltkey",{"_index":12,"name":{"8":{},"11":{},"15":{},"19":{},"21":{},"48":{}},"parent":{}}],["link",{"_index":59,"name":{"53":{},"64":{}},"parent":{}}],["max",{"_index":9,"name":{"5":{}},"parent":{}}],["messagetkey",{"_index":57,"name":{"52":{},"79":{},"83":{},"87":{}},"parent":{}}],["metrics",{"_index":108,"name":{"106":{}},"parent":{}}],["min",{"_index":7,"name":{"4":{}},"parent":{}}],["mongokeys",{"_index":104,"name":{"102":{}},"parent":{}}],["numberinputoptions",{"_index":6,"name":{"3":{}},"parent":{}}],["numberuitype",{"_index":47,"name":{"43":{}},"parent":{}}],["onchange",{"_index":28,"name":{"25":{}},"parent":{}}],["onchangecallback",{"_index":45,"name":{"41":{}},"parent":{}}],["onrefresh",{"_index":44,"name":{"39":{}},"parent":{}}],["onsave",{"_index":43,"name":{"38":{}},"parent":{}}],["onsavecallback",{"_index":37,"name":{"33":{}},"parent":{}}],["onsaveresult",{"_index":76,"name":{"72":{}},"parent":{}}],["operationstatusurl",{"_index":77,"name":{"73":{}},"parent":{}}],["placeholdertkey",{"_index":14,"name":{"10":{},"18":{}},"parent":{}}],["portalnotification",{"_index":79,"name":{"74":{}},"parent":{}}],["propertyinfo",{"_index":29,"name":{"26":{}},"parent":{}}],["refreshoptions",{"_index":32,"name":{"29":{}},"parent":{}}],["refreshparams",{"_index":89,"name":{"91":{}},"parent":{}}],["refreshresult",{"_index":85,"name":{"88":{}},"parent":{}}],["retryintervalinms",{"_index":90,"name":{"92":{}},"parent":{}}],["selfserve",{"_index":0,"name":{"0":{},"1":{}},"parent":{}}],["selfserve/decorators",{"_index":5,"name":{"2":{}},"parent":{"3":{},"9":{},"12":{},"16":{},"20":{},"24":{},"25":{},"26":{},"27":{},"28":{},"29":{}}}],["selfserve/decorators.booleaninputoptions",{"_index":18,"name":{},"parent":{"13":{},"14":{},"15":{}}}],["selfserve/decorators.choiceinputoptions",{"_index":22,"name":{},"parent":{"17":{},"18":{},"19":{}}}],["selfserve/decorators.descriptiondisplayoptions",{"_index":24,"name":{},"parent":{"21":{},"22":{},"23":{}}}],["selfserve/decorators.numberinputoptions",{"_index":8,"name":{},"parent":{"4":{},"5":{},"6":{},"7":{},"8":{}}}],["selfserve/decorators.stringinputoptions",{"_index":15,"name":{},"parent":{"10":{},"11":{}}}],["selfserve/selfservetelemetryprocessor",{"_index":110,"name":{"108":{}},"parent":{"109":{},"110":{},"111":{},"112":{},"113":{}}}],["selfserve/selfservetypes",{"_index":33,"name":{"30":{}},"parent":{"31":{},"33":{},"35":{},"41":{},"43":{},"46":{},"50":{},"51":{},"57":{},"61":{},"68":{},"72":{},"88":{},"91":{},"93":{}}}],["selfserve/selfservetypes.choiceitem",{"_index":52,"name":{},"parent":{"47":{}}}],["selfserve/selfservetypes.choiceitem.__type",{"_index":53,"name":{},"parent":{"48":{},"49":{}}}],["selfserve/selfservetypes.description",{"_index":68,"name":{},"parent":{"62":{},"63":{},"64":{},"65":{}}}],["selfserve/selfservetypes.description.__type",{"_index":70,"name":{},"parent":{"66":{},"67":{}}}],["selfserve/selfservetypes.descriptiontype",{"_index":65,"name":{},"parent":{"58":{},"59":{},"60":{}}}],["selfserve/selfservetypes.info",{"_index":58,"name":{},"parent":{"52":{},"53":{},"54":{}}}],["selfserve/selfservetypes.info.__type",{"_index":61,"name":{},"parent":{"55":{},"56":{}}}],["selfserve/selfservetypes.initializecallback",{"_index":36,"name":{},"parent":{"32":{}}}],["selfserve/selfservetypes.numberuitype",{"_index":49,"name":{},"parent":{"44":{},"45":{}}}],["selfserve/selfservetypes.onchangecallback",{"_index":46,"name":{},"parent":{"42":{}}}],["selfserve/selfservetypes.onsavecallback",{"_index":38,"name":{},"parent":{"34":{}}}],["selfserve/selfservetypes.onsaveresult",{"_index":78,"name":{},"parent":{"73":{},"74":{},"75":{}}}],["selfserve/selfservetypes.onsaveresult.__type",{"_index":80,"name":{},"parent":{"76":{},"77":{},"80":{},"81":{},"84":{},"85":{}}}],["selfserve/selfservetypes.onsaveresult.__type.__type",{"_index":82,"name":{},"parent":{"78":{},"79":{},"82":{},"83":{},"86":{},"87":{}}}],["selfserve/selfservetypes.refreshparams",{"_index":91,"name":{},"parent":{"92":{}}}],["selfserve/selfservetypes.refreshresult",{"_index":87,"name":{},"parent":{"89":{},"90":{}}}],["selfserve/selfservetypes.selfservebaseclass",{"_index":41,"name":{},"parent":{"36":{},"37":{},"38":{},"39":{},"40":{}}}],["selfserve/selfservetypes.selfservetelemetrymessage",{"_index":94,"name":{},"parent":{"94":{}}}],["selfserve/selfservetypes.smartuiinput",{"_index":73,"name":{},"parent":{"69":{},"70":{},"71":{}}}],["selfserve/selfserveutils",{"_index":95,"name":{"95":{}},"parent":{"96":{},"100":{},"107":{}}}],["selfserve/selfserveutils.bladetype",{"_index":103,"name":{},"parent":{"101":{},"102":{},"103":{},"104":{},"105":{},"106":{}}}],["selfserve/selfserveutils.selfservetype",{"_index":98,"name":{},"parent":{"97":{},"98":{},"99":{}}}],["selfservebaseclass",{"_index":39,"name":{"35":{}},"parent":{}}],["selfserveclassname",{"_index":93,"name":{"94":{}},"parent":{}}],["selfservetelemetrymessage",{"_index":92,"name":{"93":{}},"parent":{}}],["selfservetrace",{"_index":111,"name":{"109":{}},"parent":{}}],["selfservetracecancel",{"_index":115,"name":{"113":{}},"parent":{}}],["selfservetracefailure",{"_index":114,"name":{"112":{}},"parent":{}}],["selfservetracestart",{"_index":112,"name":{"110":{}},"parent":{}}],["selfservetracesuccess",{"_index":113,"name":{"111":{}},"parent":{}}],["selfservetype",{"_index":96,"name":{"96":{}},"parent":{}}],["slider",{"_index":50,"name":{"45":{}},"parent":{}}],["smartuiinput",{"_index":71,"name":{"68":{}},"parent":{}}],["spinner",{"_index":48,"name":{"44":{}},"parent":{}}],["sqlkeys",{"_index":102,"name":{"101":{}},"parent":{}}],["sqlx",{"_index":100,"name":{"99":{}},"parent":{}}],["step",{"_index":10,"name":{"6":{}},"parent":{}}],["stringinputoptions",{"_index":13,"name":{"9":{}},"parent":{}}],["success",{"_index":83,"name":{"80":{}},"parent":{}}],["supported",{"_index":4,"name":{"1":{}},"parent":{}}],["tablekeys",{"_index":107,"name":{"105":{}},"parent":{}}],["text",{"_index":64,"name":{"58":{}},"parent":{}}],["texttkey",{"_index":62,"name":{"56":{},"62":{},"67":{}},"parent":{}}],["titletkey",{"_index":81,"name":{"78":{},"82":{},"86":{}},"parent":{}}],["truelabeltkey",{"_index":17,"name":{"13":{}},"parent":{}}],["type",{"_index":69,"name":{"63":{}},"parent":{}}],["uitype",{"_index":11,"name":{"7":{}},"parent":{}}],["updateinprogressmessagetkey",{"_index":88,"name":{"90":{}},"parent":{}}],["value",{"_index":72,"name":{"69":{}},"parent":{}}],["values",{"_index":30,"name":{"27":{}},"parent":{}}],["warningmessagebar",{"_index":67,"name":{"60":{}},"parent":{}}],["what",{"_index":1,"name":{"1":{}},"parent":{}}]],"pipeline":[]}}
\ No newline at end of file
diff --git a/docs/classes/selfserve_selfservetypes.selfservebaseclass.html b/docs/classes/selfserve_selfservetypes.selfservebaseclass.html
new file mode 100644
index 000000000..5cd632443
--- /dev/null
+++ b/docs/classes/selfserve_selfservetypes.selfservebaseclass.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeBaseClass | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.selfservebaseclass.html">SelfServeBaseClass</a>
+				</li>
+			</ul>
+			<h1>Class SelfServeBaseClass</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>All SelfServe feature classes need to derive from the SelfServeBaseClass</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">SelfServeBaseClass</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Constructors</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#constructor" class="tsd-kind-icon">constructor</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#initialize" class="tsd-kind-icon">initialize</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#onrefresh" class="tsd-kind-icon">on<wbr>Refresh</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#onsave" class="tsd-kind-icon">on<wbr>Save</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Constructors</h2>
+				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
+					<a name="constructor" class="tsd-anchor"></a>
+					<h3>constructor</h3>
+					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
+						<li class="tsd-signature tsd-kind-icon">new <wbr>Self<wbr>Serve<wbr>Base<wbr>Class<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-signature-type" data-tsd-kind="Class">SelfServeBaseClass</a></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<h4 class="tsd-returns-title">Returns <a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-signature-type" data-tsd-kind="Class">SelfServeBaseClass</a></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="initialize" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> initialize</h3>
+					<div class="tsd-signature tsd-kind-icon">initialize<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-signature-type" data-tsd-kind="Type alias">initializeCallback</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Sets default values for the properties of the Self Serve Class. Typically, you can make rest calls here
+							to fetch the initial values for the properties. This is also called after the onSave callback, to reinitialize the defaults.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="onrefresh" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> on<wbr>Refresh</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Refresh<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Callback that is triggered when the refresh button is clicked. Here, you should perform the your rest API
+							call to check if the update action is completed.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-class">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></h4>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="onsave" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> on<wbr>Save</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Save<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-signature-type" data-tsd-kind="Type alias">onSaveCallback</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Callback that is triggerred when the submit button is clicked. You should perform your rest API
+							calls here using the data from the different inputs passed as a Map to this callback function.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-class tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+						<ul>
+							<li class=" tsd-kind-constructor tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#constructor" class="tsd-kind-icon">constructor</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#initialize" class="tsd-kind-icon">initialize</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#onrefresh" class="tsd-kind-icon">on<wbr>Refresh</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#onsave" class="tsd-kind-icon">on<wbr>Save</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/enums/selfserve_selfservetypes.descriptiontype.html b/docs/enums/selfserve_selfservetypes.descriptiontype.html
new file mode 100644
index 000000000..ccce7d7c0
--- /dev/null
+++ b/docs/enums/selfserve_selfservetypes.descriptiontype.html
@@ -0,0 +1,245 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>DescriptionType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.descriptiontype.html">DescriptionType</a>
+				</li>
+			</ul>
+			<h1>Enumeration DescriptionType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#infomessagebar" class="tsd-kind-icon">Info<wbr>Message<wbr>Bar</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#text" class="tsd-kind-icon">Text</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#warningmessagebar" class="tsd-kind-icon">Warning<wbr>Message<wbr>Bar</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="infomessagebar" class="tsd-anchor"></a>
+					<h3>Info<wbr>Message<wbr>Bar</h3>
+					<div class="tsd-signature tsd-kind-icon">Info<wbr>Message<wbr>Bar<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 1</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a Info Message bar.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="text" class="tsd-anchor"></a>
+					<h3>Text</h3>
+					<div class="tsd-signature tsd-kind-icon">Text<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 0</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a text</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="warningmessagebar" class="tsd-anchor"></a>
+					<h3>Warning<wbr>Message<wbr>Bar</h3>
+					<div class="tsd-signature tsd-kind-icon">Warning<wbr>Message<wbr>Bar<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 2</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a Warning Message bar.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#infomessagebar" class="tsd-kind-icon">Info<wbr>Message<wbr>Bar</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#text" class="tsd-kind-icon">Text</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#warningmessagebar" class="tsd-kind-icon">Warning<wbr>Message<wbr>Bar</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/enums/selfserve_selfservetypes.numberuitype.html b/docs/enums/selfserve_selfservetypes.numberuitype.html
new file mode 100644
index 000000000..28dcadc76
--- /dev/null
+++ b/docs/enums/selfserve_selfservetypes.numberuitype.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>NumberUiType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.numberuitype.html">NumberUiType</a>
+				</li>
+			</ul>
+			<h1>Enumeration NumberUiType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.numberuitype.html#slider" class="tsd-kind-icon">Slider</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.numberuitype.html#spinner" class="tsd-kind-icon">Spinner</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="slider" class="tsd-anchor"></a>
+					<h3>Slider</h3>
+					<div class="tsd-signature tsd-kind-icon">Slider<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;Slider&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The numeric input UI element corresponding to the property is a Slider</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="spinner" class="tsd-anchor"></a>
+					<h3>Spinner</h3>
+					<div class="tsd-signature tsd-kind-icon">Spinner<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;Spinner&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The numeric input UI element corresponding to the property is a Spinner</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.numberuitype.html#slider" class="tsd-kind-icon">Slider</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.numberuitype.html#spinner" class="tsd-kind-icon">Spinner</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/enums/selfserve_selfserveutils.bladetype.html b/docs/enums/selfserve_selfserveutils.bladetype.html
new file mode 100644
index 000000000..9283b498f
--- /dev/null
+++ b/docs/enums/selfserve_selfserveutils.bladetype.html
@@ -0,0 +1,264 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>BladeType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
+				</li>
+			</ul>
+			<h1>Enumeration BladeType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Portal Blade types</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="cassandrakeys" class="tsd-anchor"></a>
+					<h3>Cassandra<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;cassandraDbKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Cassandra API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="gremlinkeys" class="tsd-anchor"></a>
+					<h3>Gremlin<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Gremlin API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="metrics" class="tsd-anchor"></a>
+					<h3>Metrics</h3>
+					<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;metrics&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Metrics blade of an Azure Cosmos DB account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="mongokeys" class="tsd-anchor"></a>
+					<h3>Mongo<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;mongoDbKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Mongo API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="sqlkeys" class="tsd-anchor"></a>
+					<h3>Sql<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a SQL API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="tablekeys" class="tsd-anchor"></a>
+					<h3>Table<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;tableKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Table API account.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/enums/selfserve_selfserveutils.selfservetype.html b/docs/enums/selfserve_selfserveutils.selfservetype.html
new file mode 100644
index 000000000..b291557ef
--- /dev/null
+++ b/docs/enums/selfserve_selfserveutils.selfservetype.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.selfservetype.html">SelfServeType</a>
+				</li>
+			</ul>
+			<h1>Enumeration SelfServeType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>The type used to identify the Self Serve Class</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#example" class="tsd-kind-icon">example</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#invalid" class="tsd-kind-icon">invalid</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#sqlx" class="tsd-kind-icon">sqlx</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="example" class="tsd-anchor"></a>
+					<h3>example</h3>
+					<div class="tsd-signature tsd-kind-icon">example<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;example&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="invalid" class="tsd-anchor"></a>
+					<h3>invalid</h3>
+					<div class="tsd-signature tsd-kind-icon">invalid<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;invalid&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="sqlx" class="tsd-anchor"></a>
+					<h3>sqlx</h3>
+					<div class="tsd-signature tsd-kind-icon">sqlx<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;sqlx&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#example" class="tsd-kind-icon">example</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#invalid" class="tsd-kind-icon">invalid</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#sqlx" class="tsd-kind-icon">sqlx</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 000000000..f62e4c4f2
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,209 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="assets/css/main.css">
+	<script async src="assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<h1>cosmos-explorer</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<div class="tsd-panel tsd-typography">
+				<a href="#cosmos-db-explorer" id="cosmos-db-explorer" style="color: inherit; text-decoration: none;">
+					<h1>Cosmos DB Explorer</h1>
+				</a>
+				<p>UI for Azure Cosmos DB. Powers the <a href="https://portal.azure.com/">Azure Portal</a>, <a href="https://cosmos.azure.com/">https://cosmos.azure.com/</a>, and the <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator">Cosmos DB Emulator</a></p>
+				<p><img src="https://sdkctlstore.blob.core.windows.net/exe/dataexplorer.gif" alt=""></p>
+				<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
+					<h2>Getting Started</h2>
+				</a>
+				<ul>
+					<li><code>npm install</code></li>
+					<li><code>npm run build</code></li>
+				</ul>
+				<a href="#developing" id="developing" style="color: inherit; text-decoration: none;">
+					<h2>Developing</h2>
+				</a>
+				<a href="#watch-mode" id="watch-mode" style="color: inherit; text-decoration: none;">
+					<h3>Watch mode</h3>
+				</a>
+				<p>Run <code>npm start</code> to start the development server and automatically rebuild on changes</p>
+				<a href="#hosted-development-httpscosmosazurecom" id="hosted-development-httpscosmosazurecom" style="color: inherit; text-decoration: none;">
+					<h3>Hosted Development (<a href="https://cosmos.azure.com">https://cosmos.azure.com</a>)</h3>
+				</a>
+				<ul>
+					<li>Visit: <code>https://localhost:1234/hostedExplorer.html</code></li>
+					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://main.documentdb.ext.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
+				</ul>
+				<a href="#emulator-development" id="emulator-development" style="color: inherit; text-decoration: none;">
+					<h3>Emulator Development</h3>
+				</a>
+				<ul>
+					<li>Start the Cosmos Emulator</li>
+					<li>Visit: <a href="https://localhost:1234/index.html">https://localhost:1234/index.html</a></li>
+				</ul>
+				<a href="#setting-up-a-remote-emulator" id="setting-up-a-remote-emulator" style="color: inherit; text-decoration: none;">
+					<h4>Setting up a Remote Emulator</h4>
+				</a>
+				<p>The Cosmos emulator currently only runs in Windows environments. You can still develop on a non-Windows machine by setting up an emulator on a windows box and exposing its ports publicly:</p>
+				<ol>
+					<li><p>Expose these ports publicly: 8081, 8900, 8979, 10250, 10251, 10252, 10253, 10254, 10255, 10256</p>
+					</li>
+					<li><p>Download and install the emulator: <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator">https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator</a></p>
+					</li>
+					<li><p>Start the emulator from PowerShell:</p>
+					</li>
+				</ol>
+				<pre><code><span style="color: #000000">&gt; </span><span style="color: #001080">cd</span><span style="color: #000000"> C:/</span>
+
+<span style="color: #000000">&gt; .\</span><span style="color: #001080">CosmosDB</span><span style="color: #000000">.</span><span style="color: #001080">Emulator</span><span style="color: #000000">.</span><span style="color: #001080">exe</span><span style="color: #000000"> -</span><span style="color: #001080">AllowNetworkAccess</span><span style="color: #000000"> -</span><span style="color: #001080">Key</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;&lt;EMULATOR MASTER KEY&gt;&quot;</span>
+</code></pre>
+				<a href="#portal-development" id="portal-development" style="color: inherit; text-decoration: none;">
+					<h3>Portal Development</h3>
+				</a>
+				<ul>
+					<li>Visit: <a href="https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html">https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html</a></li>
+					<li>You may have to manually visit <a href="https://localhost:1234/explorer.html">https://localhost:1234/explorer.html</a> first and click through any SSL certificate warnings</li>
+				</ul>
+				<a href="#testing" id="testing" style="color: inherit; text-decoration: none;">
+					<h3>Testing</h3>
+				</a>
+				<a href="#unit-tests" id="unit-tests" style="color: inherit; text-decoration: none;">
+					<h4>Unit Tests</h4>
+				</a>
+				<p>Unit tests are located adjacent to the code under test and run with <a href="https://jestjs.io/">Jest</a>:</p>
+				<p><code>npm run test</code></p>
+				<a href="#end-to-end-ci-tests" id="end-to-end-ci-tests" style="color: inherit; text-decoration: none;">
+					<h4>End to End CI Tests</h4>
+				</a>
+				<p>Jest and Puppeteer are used for end to end browser based tests and are contained in <code>test/</code>. To run these tests locally:</p>
+				<ol>
+					<li>Copy .env.example to .env</li>
+					<li>Update the values in .env including your local data explorer endpoint (ask a teammate/codeowner for help with .env values)</li>
+					<li>Make sure all packages are installed <code>npm install</code></li>
+					<li>Run the server <code>npm run start</code> and wait for it to start</li>
+					<li>Run <code>npm run test:e2e</code></li>
+				</ol>
+				<a href="#releasing" id="releasing" style="color: inherit; text-decoration: none;">
+					<h3>Releasing</h3>
+				</a>
+				<p>We generally adhere to the release strategy <a href="https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches">documented by the Azure SDK Guidelines</a>. Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a <code>release/</code> or <code>hotfix/</code> branch. See linked documentation for more details.</p>
+				<a href="#architecture" id="architecture" style="color: inherit; text-decoration: none;">
+					<h3>Architecture</h3>
+				</a>
+				<p><a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0"><img src="https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0" alt=""></a></p>
+				<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
+					<h1>Contributing</h1>
+				</a>
+				<p>Please read the <a href="./CONTRIBUTING.md">contribution guidelines</a>.</p>
+			</div>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_decorators.booleaninputoptions.html b/docs/interfaces/selfserve_decorators.booleaninputoptions.html
new file mode 100644
index 000000000..d489484dc
--- /dev/null
+++ b/docs/interfaces/selfserve_decorators.booleaninputoptions.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>BooleanInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.booleaninputoptions.html">BooleanInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface BooleanInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Toggle is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">BooleanInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.booleaninputoptions.html#falselabeltkey" class="tsd-kind-icon">false<wbr>LabelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.booleaninputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.booleaninputoptions.html#truelabeltkey" class="tsd-kind-icon">true<wbr>LabelTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="falselabeltkey" class="tsd-anchor"></a>
+					<h3>false<wbr>LabelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">false<wbr>LabelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the false label of the toggle, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="truelabeltkey" class="tsd-anchor"></a>
+					<h3>true<wbr>LabelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">true<wbr>LabelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the true label of the toggle, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.booleaninputoptions.html#falselabeltkey" class="tsd-kind-icon">false<wbr>LabelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.booleaninputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.booleaninputoptions.html#truelabeltkey" class="tsd-kind-icon">true<wbr>LabelTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_decorators.choiceinputoptions.html b/docs/interfaces/selfserve_decorators.choiceinputoptions.html
new file mode 100644
index 000000000..583e71512
--- /dev/null
+++ b/docs/interfaces/selfserve_decorators.choiceinputoptions.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>ChoiceInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.choiceinputoptions.html">ChoiceInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface ChoiceInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Dropdown is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">ChoiceInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.choiceinputoptions.html#choices" class="tsd-kind-icon">choices</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.choiceinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.choiceinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="choices" class="tsd-anchor"></a>
+					<h3>choices</h3>
+					<div class="tsd-signature tsd-kind-icon">choices<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol">[]</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Choices to be shown in the dropdown</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="placeholdertkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> placeholderTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">placeholderTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the placeholder text of the dropdown, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.choiceinputoptions.html#choices" class="tsd-kind-icon">choices</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.choiceinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.choiceinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_decorators.descriptiondisplayoptions.html b/docs/interfaces/selfserve_decorators.descriptiondisplayoptions.html
new file mode 100644
index 000000000..1347ad4d1
--- /dev/null
+++ b/docs/interfaces/selfserve_decorators.descriptiondisplayoptions.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>DescriptionDisplayOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.descriptiondisplayoptions.html">DescriptionDisplayOptions</a>
+				</li>
+			</ul>
+			<h1>Interface DescriptionDisplayOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Text is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">DescriptionDisplayOptions</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#description" class="tsd-kind-icon">description</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#isdynamicdescription" class="tsd-kind-icon">is<wbr>Dynamic<wbr>Description</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="description" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> description</h3>
+					<div class="tsd-signature tsd-kind-icon">description<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><a href="selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Static description to be shown as text.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="isdynamicdescription" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> is<wbr>Dynamic<wbr>Description</h3>
+					<div class="tsd-signature tsd-kind-icon">is<wbr>Dynamic<wbr>Description<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>If true, Indicates that the Description will be populated dynamically and that it may not be present in some scenarios.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional heading for the text displayed by this description element.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#description" class="tsd-kind-icon">description</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#isdynamicdescription" class="tsd-kind-icon">is<wbr>Dynamic<wbr>Description</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_decorators.numberinputoptions.html b/docs/interfaces/selfserve_decorators.numberinputoptions.html
new file mode 100644
index 000000000..d99ddd07f
--- /dev/null
+++ b/docs/interfaces/selfserve_decorators.numberinputoptions.html
@@ -0,0 +1,287 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>NumberInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.numberinputoptions.html">NumberInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface NumberInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Numeric input UI element is rendered. The current options are to render it as a slider or a spinner.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">NumberInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.numberinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#max" class="tsd-kind-icon">max</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#min" class="tsd-kind-icon">min</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#step" class="tsd-kind-icon">step</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#uitype" class="tsd-kind-icon">ui<wbr>Type</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="max" class="tsd-anchor"></a>
+					<h3>max</h3>
+					<div class="tsd-signature tsd-kind-icon">max<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Max value of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="min" class="tsd-anchor"></a>
+					<h3>min</h3>
+					<div class="tsd-signature tsd-kind-icon">min<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Min value of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="step" class="tsd-anchor"></a>
+					<h3>step</h3>
+					<div class="tsd-signature tsd-kind-icon">step<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Value by which the numeric input is incremented or decremented in the UI.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="uitype" class="tsd-anchor"></a>
+					<h3>ui<wbr>Type</h3>
+					<div class="tsd-signature tsd-kind-icon">ui<wbr>Type<span class="tsd-signature-symbol">:</span> <a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">NumberUiType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The type of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.numberinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#max" class="tsd-kind-icon">max</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#min" class="tsd-kind-icon">min</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#step" class="tsd-kind-icon">step</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#uitype" class="tsd-kind-icon">ui<wbr>Type</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_decorators.stringinputoptions.html b/docs/interfaces/selfserve_decorators.stringinputoptions.html
new file mode 100644
index 000000000..a0424a0e6
--- /dev/null
+++ b/docs/interfaces/selfserve_decorators.stringinputoptions.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>StringInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.stringinputoptions.html">StringInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface StringInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Text box is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">StringInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.stringinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.stringinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="placeholdertkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> placeholderTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">placeholderTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the place holder text of the text box, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.stringinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.stringinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.description.html b/docs/interfaces/selfserve_selfservetypes.description.html
new file mode 100644
index 000000000..f95fdcfcf
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.description.html
@@ -0,0 +1,277 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Description | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.description.html">Description</a>
+				</li>
+			</ul>
+			<h1>Interface Description</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Data to be shown as a description.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">Description</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#link" class="tsd-kind-icon">link</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#texttkey-1" class="tsd-kind-icon">textTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#type" class="tsd-kind-icon">type</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="link" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> link</h3>
+					<div class="tsd-signature tsd-kind-icon">link<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional link to be shown as part of the description, after the text.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>The URL of the link</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the text of the link, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="texttkey-1" class="tsd-anchor"></a>
+					<h3>textTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">textTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the text to be shown as part of the description, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="type" class="tsd-anchor"></a>
+					<h3>type</h3>
+					<div class="tsd-signature tsd-kind-icon">type<span class="tsd-signature-symbol">:</span> <a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">DescriptionType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#link" class="tsd-kind-icon">link</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#texttkey-1" class="tsd-kind-icon">textTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#type" class="tsd-kind-icon">type</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.info.html b/docs/interfaces/selfserve_selfservetypes.info.html
new file mode 100644
index 000000000..c774dcc52
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.info.html
@@ -0,0 +1,266 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Info | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.info.html">Info</a>
+				</li>
+			</ul>
+			<h1>Interface Info</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Data to be shown within the info bubble of the property.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">Info</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.info.html#link" class="tsd-kind-icon">link</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.info.html#messagetkey" class="tsd-kind-icon">messageTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="link" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> link</h3>
+					<div class="tsd-signature tsd-kind-icon">link<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional link to be shown within the info bubble, after the text.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>The URL of the link</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the text of the link, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="messagetkey" class="tsd-anchor"></a>
+					<h3>messageTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">messageTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the text to be shown within the info bubble, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.info.html#link" class="tsd-kind-icon">link</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.info.html#messagetkey" class="tsd-kind-icon">messageTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.onsaveresult.html b/docs/interfaces/selfserve_selfservetypes.onsaveresult.html
new file mode 100644
index 000000000..45f6ffb36
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.onsaveresult.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>OnSaveResult | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.onsaveresult.html">OnSaveResult</a>
+				</li>
+			</ul>
+			<h1>Interface OnSaveResult</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">OnSaveResult</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.onsaveresult.html#operationstatusurl" class="tsd-kind-icon">operation<wbr>Status<wbr>Url</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.onsaveresult.html#portalnotification" class="tsd-kind-icon">portal<wbr>Notification</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="operationstatusurl" class="tsd-anchor"></a>
+					<h3>operation<wbr>Status<wbr>Url</h3>
+					<div class="tsd-signature tsd-kind-icon">operation<wbr>Status<wbr>Url<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The polling url returned by the RP call.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="portalnotification" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> portal<wbr>Notification</h3>
+					<div class="tsd-signature tsd-kind-icon">portal<wbr>Notification<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>failure<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>initialize<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>success<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Notifications that need to be shown on the portal for different stages of a scenario (initialized, success/failure).</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>failure<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation failed.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+							<li class="tsd-parameter">
+								<h5>initialize<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation has been triggered.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+							<li class="tsd-parameter">
+								<h5>success<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation has successfully completed.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.onsaveresult.html#operationstatusurl" class="tsd-kind-icon">operation<wbr>Status<wbr>Url</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.onsaveresult.html#portalnotification" class="tsd-kind-icon">portal<wbr>Notification</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.refreshparams.html b/docs/interfaces/selfserve_selfservetypes.refreshparams.html
new file mode 100644
index 000000000..c7815c97c
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.refreshparams.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>RefreshParams | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.refreshparams.html">RefreshParams</a>
+				</li>
+			</ul>
+			<h1>Interface RefreshParams</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">RefreshParams</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshparams.html#retryintervalinms" class="tsd-kind-icon">retry<wbr>Interval<wbr>InMs</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="retryintervalinms" class="tsd-anchor"></a>
+					<h3>retry<wbr>Interval<wbr>InMs</h3>
+					<div class="tsd-signature tsd-kind-icon">retry<wbr>Interval<wbr>InMs<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The time interval between refresh attempts when an update in ongoing</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshparams.html#retryintervalinms" class="tsd-kind-icon">retry<wbr>Interval<wbr>InMs</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.refreshresult.html b/docs/interfaces/selfserve_selfservetypes.refreshresult.html
new file mode 100644
index 000000000..41159e1de
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.refreshresult.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>RefreshResult | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.refreshresult.html">RefreshResult</a>
+				</li>
+			</ul>
+			<h1>Interface RefreshResult</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">RefreshResult</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress" class="tsd-kind-icon">is<wbr>Update<wbr>InProgress</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshresult.html#updateinprogressmessagetkey" class="tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="isupdateinprogress" class="tsd-anchor"></a>
+					<h3>is<wbr>Update<wbr>InProgress</h3>
+					<div class="tsd-signature tsd-kind-icon">is<wbr>Update<wbr>InProgress<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicate if the update is still ongoing</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="updateinprogressmessagetkey" class="tsd-anchor"></a>
+					<h3>update<wbr>InProgress<wbr>MessageTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the message that will be shown on the UI if the update is still ongoing, from the strings JSON file.
+							Will be shown only if <a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress"><code>isUpdateInProgress</code></a> is true.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress" class="tsd-kind-icon">is<wbr>Update<wbr>InProgress</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshresult.html#updateinprogressmessagetkey" class="tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html b/docs/interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html
new file mode 100644
index 000000000..200ea0c44
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html
@@ -0,0 +1,227 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeTelemetryMessage | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.selfservetelemetrymessage.html">SelfServeTelemetryMessage</a>
+				</li>
+			</ul>
+			<h1>Interface SelfServeTelemetryMessage</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">TelemetryData</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">SelfServeTelemetryMessage</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.selfservetelemetrymessage.html#selfserveclassname" class="tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="selfserveclassname" class="tsd-anchor"></a>
+					<h3>self<wbr>Serve<wbr>Class<wbr>Name</h3>
+					<div class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The className used to identify a SelfServe telemetry record</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.selfservetelemetrymessage.html#selfserveclassname" class="tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/interfaces/selfserve_selfservetypes.smartuiinput.html b/docs/interfaces/selfserve_selfservetypes.smartuiinput.html
new file mode 100644
index 000000000..ad6416a34
--- /dev/null
+++ b/docs/interfaces/selfserve_selfservetypes.smartuiinput.html
@@ -0,0 +1,254 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SmartUiInput | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.smartuiinput.html">SmartUiInput</a>
+				</li>
+			</ul>
+			<h1>Interface SmartUiInput</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">SmartUiInput</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#disabled" class="tsd-kind-icon">disabled</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#hidden" class="tsd-kind-icon">hidden</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#value" class="tsd-kind-icon">value</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="disabled" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> disabled</h3>
+					<div class="tsd-signature tsd-kind-icon">disabled<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicates whether the UI element corresponding to the property is disabled</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="hidden" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> hidden</h3>
+					<div class="tsd-signature tsd-kind-icon">hidden<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicates whether the UI element corresponding to the property is hidden</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="value" class="tsd-anchor"></a>
+					<h3>value</h3>
+					<div class="tsd-signature tsd-kind-icon">value<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The value to be set for the UI element corresponding to the property</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#disabled" class="tsd-kind-icon">disabled</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#hidden" class="tsd-kind-icon">hidden</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#value" class="tsd-kind-icon">value</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules.html b/docs/modules.html
new file mode 100644
index 000000000..923454972
--- /dev/null
+++ b/docs/modules.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="assets/css/main.css">
+	<script async src="assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<h1>cosmos-explorer</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Modules</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-module"><a href="modules/selfserve.html" class="tsd-kind-icon">Self<wbr>Serve</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve___what_is_currently_supported_.html" class="tsd-kind-icon">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_decorators.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Decorators</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfservetelemetryprocessor.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfservetypes.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfserveutils.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class="current ">
+						<a href="modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve.html b/docs/modules/selfserve.html
new file mode 100644
index 000000000..6e5a4c6a6
--- /dev/null
+++ b/docs/modules/selfserve.html
@@ -0,0 +1,498 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve.html">SelfServe</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<a href="#self-serve-model" id="self-serve-model" style="color: inherit; text-decoration: none;">
+							<h1>Self Serve Model</h1>
+						</a>
+						<p>The Self Serve Model allows you to write classes that auto generate UI components for your feature. The idea is to allow developers from other feature teams, who may not be familiar with writing UI, to develop and own UX components. This is accomplished by just writing simpler TypeScript classes for their features. </p>
+						<p>What this means for the feature team </p>
+						<ul>
+							<li>Can concentrate just on the logic behind showing, hiding and disabling UI components </li>
+							<li>Need not worry about specifics of the UI language or UX requirements (Accessibility, Localization, Themes, etc.)</li>
+							<li>Can own the REST API calls made as part of the feature, which can change in the future</li>
+							<li>Quicker turn around time for development and bug fixes since they have deeper knowledge of the feature</li>
+						</ul>
+						<p>What this means for the UI team</p>
+						<ul>
+							<li>No need to ramp up on the intricacies of every feature which requires UI changes</li>
+							<li>Own only the framework and not every feature, giving more bandwidth to prioritize inhouse features as well</li>
+						</ul>
+						<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
+							<h2>Getting Started</h2>
+						</a>
+						<p>Clone the cosmos-explorer repo and run</p>
+						<ul>
+							<li><code>npm install</code></li>
+							<li><code>npm run build</code></li>
+						</ul>
+						<p><a href="../index.html">Click here</a> for more info on setting up the cosmos-explorer repo.</p>
+						<a href="#code-changes" id="code-changes" style="color: inherit; text-decoration: none;">
+							<h2>Code Changes</h2>
+						</a>
+						<p>Code changes need to be made only in the following files</p>
+						<ul>
+							<li>A JSON file - for strings to be displayed</li>
+							<li>A Types File - for defining the data models</li>
+							<li>A RP file - for defining the REST calls</li>
+							<li>A Class file - for defining the UI</li>
+							<li><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServeUtils.tsx">SelfServeUtils.tsx</a> and <a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx">SelfServe.tsx</a> - for defning the entrypoint for the UI</li>
+						</ul>
+						<a href="#1-json-file-for-ui-strings" id="1-json-file-for-ui-strings" style="color: inherit; text-decoration: none;">
+							<h3>1. JSON file for UI strings</h3>
+						</a>
+						<a href="#naming-convention" id="naming-convention" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>Localization/en/&lt;FEATURE_NAME&gt;.json</code><br>Please place your files only under &quot;Localization/en&quot; folder. If not, the UI strings will not be picked up by the framework.</p>
+						<a href="#example" id="example" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/Localization/en/SelfServeExample.json">SelfServeExample.json</a></p>
+						<a href="#description" id="description" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This is a JSON file where the values are the strings that needs to be displayed in the UI. These strings are referenced using their corresponding unique keys.</p>
+						<p>For example, If your class file defines properties as follows</p>
+						<pre><code class="language-ts"><span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">labelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;stringPropertylabel&quot;</span>
+<span style="color: #000000">  })</span>
+<span style="color: #000000">  stringProperty: </span><span style="color: #001080">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">labelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;booleanPropertyLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">trueLabelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;trueLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">falseLabelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;falseLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  })</span>
+<span style="color: #000000">  booleanProperty: </span><span style="color: #001080">boolean</span><span style="color: #000000">;</span>
+</code></pre>
+						<p>Then the content of <code>Localization/en/FeatureName.json</code> should be </p>
+						<pre><code class="language-json"><span style="color: #000000">{</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">stringPropertyLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;string property&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">booleanPropertyLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;boolean property&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">trueLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;Enable&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">falseLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;Disable&quot;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<p>You can learn more on how to define the class file <a href="./selfserve.html#4-class-file">here</a>.</p>
+						<a href="#2-types-file" id="2-types-file" style="color: inherit; text-decoration: none;">
+							<h3>2. Types file</h3>
+						</a>
+						<a href="#naming-convention-1" id="naming-convention-1" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.types.ts</code></p>
+						<a href="#example-1" id="example-1" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.types.ts">SelfServeExample.types.ts</a></p>
+						<a href="#description-1" id="description-1" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This file contains the definitions of all the data models to be used in your Class file and RP file.</p>
+						<p>For example, if your RP call takes/returns the <code>stringProperty</code> and <code>booleanProperty</code> of your SelfServe class, then you can define an interface in your <code>FeatureName.types.ts</code> file like this.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #001080">RpDataModel</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #001080">string</span><span style="color: #000000">,</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #001080">boolean</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#3-rp-file" id="3-rp-file" style="color: inherit; text-decoration: none;">
+							<h3>3. RP file</h3>
+						</a>
+						<a href="#naming-convention-2" id="naming-convention-2" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.rp.ts</code></p>
+						<a href="#example-2" id="example-2" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.rp.ts">SelfServeExample.rp.ts</a></p>
+						<a href="#description-2" id="description-2" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>The RP file will host the REST calls needed for the initialize, save and refresh functions. This decouples the view and the model of the feature.</p>
+						<p>To make the ARM call, we need some information about the Azure Cosmos DB databaseAccount - the subscription id, resource group name and database account name. These are readily available through the <code>userContext</code> object, exposed through</p>
+						<ul>
+							<li><code>userContext.subscriptionId</code></li>
+							<li><code>userContext.resourceGroup</code></li>
+							<li><code>userContext.databaseAccount.name</code></li>
+						</ul>
+						<p>You can use the <code>armRequestWithoutPolling</code> function to make the ARM api call.</p>
+						<p>Your <code>FeatureName.rp.ts</code> file can look like the following.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">userContext</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../UserContext&quot;</span><span style="color: #000000">;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">armRequestWithoutPolling</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../Utils/arm/request&quot;</span><span style="color: #000000">;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">configContext</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../ConfigContext&quot;</span><span style="color: #000000">;</span>
+
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">apiVersion</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;2020-06-01-preview&quot;</span><span style="color: #000000">;</span>
+
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span><span style="color: #001080">properties</span><span style="color: #000000">: </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000">): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">path</span><span style="color: #000000"> = </span><span style="color: #A31515">`/subscriptions/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">subscriptionId</span><span style="color: #0000FF">}</span><span style="color: #A31515">/resourceGroups/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">resourceGroup</span><span style="color: #0000FF">}</span><span style="color: #A31515">/providers/Microsoft.DocumentDB/databaseAccounts/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">databaseAccount</span><span style="color: #000000FF">.</span><span style="color: #001080">name</span><span style="color: #0000FF">}</span><span style="color: #A31515">/&lt;REST_OF_THE_PATH&gt;`</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">body</span><span style="color: #000000"> = {</span>
+<span style="color: #000000">      </span><span style="color: #001080">data :</span><span style="color: #000000"> </span><span style="color: #001080">properties</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">armRequestResult</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">armRequestWithoutPolling</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">host:</span><span style="color: #000000"> </span><span style="color: #001080">configContext</span><span style="color: #000000">.</span><span style="color: #0070C1">ARM_ENDPOINT</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">path</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">method:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;PUT&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">apiVersion</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">body</span><span style="color: #000000">,</span>
+<span style="color: #000000">  });</span>
+
+<span style="color: #000000">  </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">armRequestResult</span><span style="color: #000000">.</span><span style="color: #001080">operationStatusUrl</span><span style="color: #000000">;</span>
+<span style="color: #000000">};</span>
+
+</code></pre>
+						<a href="#4-class-file" id="4-class-file" style="color: inherit; text-decoration: none;">
+							<h3>4. Class file</h3>
+						</a>
+						<a href="#naming-convention-3" id="naming-convention-3" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.tsx</code></p>
+						<a href="#example-3" id="example-3" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.tsx">SelfServeExample.tsx</a></p>
+						<a href="#description-3" id="description-3" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This file will contain the actual code that is translated into the UI component by the Self Serve framework.</p>
+						<ul>
+							<li><p>Each Self Serve class</p>
+								<ul>
+									<li>Needs to extends the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html">SelfServeBase</a> class.</li>
+									<li>Needs to have the <a href="./selfserve_decorators.html#isdisplayable">@IsDisplayable()</a> decorator to tell the compiler that UI needs to be generated from this class.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#initialize">initialize()</a> function, to set default values for the inputs.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onsave">onSave()</a> function, a callback for when the save button is clicked.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh">onRefresh()</a> function, a callback for when the refresh button is clicked.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#refreshoptions">@RefreshOptions()</a> decorator that determines how often the auto refresh of the UI component should take place.</li>
+								</ul>
+							</li>
+							<li><p>For every UI element needed, add a property to the Self Serve class. Each of these properties</p>
+								<ul>
+									<li>Needs to have a <a href="./selfserve_decorators.html#values">@Values()</a> decorator.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#propertyinfo">@PropertyInfo()</a> decorator that describes it&#39;s info bubble.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#onchange">@OnChange()</a> decorator that dictates the effects of the change of the UI element tied to this property.</li>
+								</ul>
+							</li>
+						</ul>
+						<p>Your <code>FeatureName.tsx</code> file will look like the following.</p>
+						<pre><code class="language-ts"><span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #000000">@</span><span style="color: #795E26">RefreshOptions</span><span style="color: #000000">({ </span><span style="color: #001080">retryIntervalInMs:</span><span style="color: #000000"> </span><span style="color: #098658">2000</span><span style="color: #000000"> })</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">FeatureName</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">initialize</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// initialize RP call and processing logic</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">    </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">    </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">ReadonlyMap</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// onSave RP call and processing logic</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onRefresh</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">RefreshResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// refresh RP call and processing logic</span>
+<span style="color: #000000">  };</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">OnChange</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  @</span><span style="color: #795E26">PropertyInfo</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#5-update-selfservetype" id="5-update-selfservetype" style="color: inherit; text-decoration: none;">
+							<h3>5. Update SelfServeType</h3>
+						</a>
+						<p>Once you have written your Self Serve Class, add a corresponding type to <a href="../enums/selfserve_selfserveutils.selfservetype.html">SelfServeType</a></p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">enum</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeType</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">invalid</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;invalid&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">example</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;example&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  ...</span>
+<span style="color: #000000">  </span><span style="color: #008000">// Add the type for your new feature</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">featureName</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;featurename&quot;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#6-update-selfservetsx-landing-page" id="6-update-selfservetsx-landing-page" style="color: inherit; text-decoration: none;">
+							<h3>6. Update SelfServe.tsx (landing page)</h3>
+						</a>
+						<p>Once the SelfServeType has been updated, update <a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx">SelfServe.tsx</a> for your feature. This ensures that the framework picks up your SelfServe Class.</p>
+						<pre><code class="language-ts"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">getDescriptor</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span><span style="color: #001080">selfServeType</span><span style="color: #000000">: </span><span style="color: #267F99">SelfServeType</span><span style="color: #000000">): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">SelfServeDescriptor</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">switch</span><span style="color: #000000"> (</span><span style="color: #001080">selfServeType</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #001080">SelfServeType</span><span style="color: #000000">.</span><span style="color: #001080">example</span><span style="color: #000000">: {</span>
+<span style="color: #000000">        ....</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Add this for your new feature</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #001080">SelfServeType</span><span style="color: #000000">.</span><span style="color: #001080">featureName</span><span style="color: #000000">: {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// The &#039;webpackChunkName&#039; is used during debugging, to identify if the correct class has been loaded</span>
+<span style="color: #000000">      </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">FeatureName</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">import</span><span style="color: #000000">(</span><span style="color: #008000">/* webpackChunkName: &quot;FeatureName&quot; */</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName/FeatureName&quot;</span><span style="color: #000000">);</span>
+<span style="color: #000000">      </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">featureName</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #001080">FeatureName</span><span style="color: #000000">.</span><span style="color: #795E26">default</span><span style="color: #000000">();</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">loadTranslations</span><span style="color: #000000">(</span><span style="color: #001080">featureName</span><span style="color: #000000">.</span><span style="color: #001080">constructor</span><span style="color: #000000">.</span><span style="color: #001080">name</span><span style="color: #000000">);</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">featureName</span><span style="color: #000000">.</span><span style="color: #795E26">toSelfServeDescriptor</span><span style="color: #000000">();</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">default</span><span style="color: #000000">:</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">undefined</span><span style="color: #000000">;</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">};</span>
+
+</code></pre>
+						<a href="#telemetry" id="telemetry" style="color: inherit; text-decoration: none;">
+							<h2>Telemetry</h2>
+						</a>
+						<p>You can add telemetry for your feature using the functions in <a href="./selfserve_selfservetelemetryprocessor.html">SelfServeTelemetryProcessor</a></p>
+						<p>For example, in your SelfServe class, you can call the trace method in your <code>onSave</code> function.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">saveData</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName.rp&quot;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">RpDataModel</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName.types&quot;</span>
+
+<span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">FeatureName</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">    </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">    </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">ReadonlyMap</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">    </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;stringProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span><span style="color: #001080">booleanPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;booleanProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">propertiesToSave</span><span style="color: #000000"> : </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000"> = { </span>
+<span style="color: #000000">      </span><span style="color: #001080">stringProperty:</span><span style="color: #000000"> </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">booleanProperty:</span><span style="color: #000000"> </span><span style="color: #001080">booleanPropertyValue</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">telemetryData</span><span style="color: #000000"> = { ...</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">, </span><span style="color: #001080">selfServeClassName:</span><span style="color: #000000"> </span><span style="color: #001080">FeatureName</span><span style="color: #000000">.</span><span style="color: #001080">name</span><span style="color: #000000"> }</span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">onSaveTimeStamp</span><span style="color: #000000"> = </span><span style="color: #795E26">selfServeTraceStart</span><span style="color: #000000">(</span><span style="color: #001080">telemetryData</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000">(</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #795E26">selfServeTraceSuccess</span><span style="color: #000000">(</span><span style="color: #001080">telemetryData</span><span style="color: #000000">, </span><span style="color: #001080">onSaveTimeStamp</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #008000">// return required values</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#portal-notifications" id="portal-notifications" style="color: inherit; text-decoration: none;">
+							<h2>Portal Notifications</h2>
+						</a>
+						<p>You can enable portal notifications for your feature by passing in the required strings as part of the <a href="../interfaces/selfserve_selfservetypes.onsaveresult.html#portalnotification">portalNotification</a> property of the <a href="../interfaces/selfserve_selfservetypes.onsaveresult.html">onSaveResult</a>.</p>
+						<pre><code class="language-ts"><span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">SqlX</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">.</span>
+<span style="color: #000000">.</span>
+<span style="color: #000000">.</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">      </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">      </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">    </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;stringProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span><span style="color: #001080">booleanPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;booleanProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">propertiesToSave</span><span style="color: #000000"> : </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000"> = { </span>
+<span style="color: #000000">      </span><span style="color: #001080">stringProperty:</span><span style="color: #000000"> </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">booleanProperty:</span><span style="color: #000000"> </span><span style="color: #001080">booleanPropertyValue</span>
+<span style="color: #000000">    }</span>
+
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">operationStatusUrl</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000">(</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">);</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #001080">operationStatusUrl:</span><span style="color: #000000"> </span><span style="color: #001080">operationStatusUrl</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">portalNotification:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">        </span><span style="color: #001080">initialize:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteInitializeTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteInitializeMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">        </span><span style="color: #001080">success:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteSuccessTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteSuccesseMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">        </span><span style="color: #001080">failure:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteFailureTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteFailureMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">      },</span>
+<span style="color: #000000">    };</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#execution" id="execution" style="color: inherit; text-decoration: none;">
+							<h2>Execution</h2>
+						</a>
+						<a href="#watch-mode" id="watch-mode" style="color: inherit; text-decoration: none;">
+							<h3>Watch mode</h3>
+						</a>
+						<p>Run <code>npm start</code> to start the development server and automatically rebuild on changes</p>
+						<a href="#local-development" id="local-development" style="color: inherit; text-decoration: none;">
+							<h3>Local Development</h3>
+						</a>
+						<p>Ensure that you have made the <a href="./selfserve.html#code-changes">Code changes</a>.</p>
+						<ul>
+							<li>Go to <code>https://ms.portal.azure.com/</code></li>
+							<li>Add the query string <code>feature.showSelfServeExample=true&amp;feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3D&lt;SELF_SERVE_TYPE&gt;</code></li>
+							<li>Click on the <code>Self Serve Example</code> menu item on the left panel.</li>
+						</ul>
+						<p>For example, if you want to open up the the UI of a class with the type <code>sqlx</code>, then visit <code>https://ms.portal.azure.com/?feature.showSelfServeExample=true&amp;feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3Dsqlx</code></p>
+						<p><img src="https://sdkctlstore.blob.core.windows.net/exe/selfserveDev.PNG" alt=""></p>
+					</div>
+				</div>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve___what_is_currently_supported_.html b/docs/modules/selfserve___what_is_currently_supported_.html
new file mode 100644
index 000000000..e044d593f
--- /dev/null
+++ b/docs/modules/selfserve___what_is_currently_supported_.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe - What is currently supported? | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve___what_is_currently_supported_.html">SelfServe - What is currently supported?</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe - What is currently supported?</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>The Self Serve framework has integrated support for</p>
+						<ol>
+							<li><a href="./selfserve.html#portal-notifications">Portal Notifications</a></li>
+							<li><a href="./selfserve.html#telemetry">Telemetry</a></li>
+							<li>the following UI controls:<ul>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/slider">Slider</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton">SpinButton</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield">TextField</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle">Toggle</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown">Dropdown</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link">Link</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/messagebar">MessageBar</a></li>
+								</ul>
+							</li>
+						</ol>
+					</div>
+				</div>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve_decorators.html b/docs/modules/selfserve_decorators.html
new file mode 100644
index 000000000..2605197ce
--- /dev/null
+++ b/docs/modules/selfserve_decorators.html
@@ -0,0 +1,341 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/Decorators | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/Decorators</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Interfaces</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Type aliases</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#values" class="tsd-kind-icon">Values</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Type aliases</h2>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="inputoptions" class="tsd-anchor"></a>
+					<h3>Input<wbr>Options</h3>
+					<div class="tsd-signature tsd-kind-icon">Input<wbr>Options<span class="tsd-signature-symbol">:</span> <a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">NumberInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">StringInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">BooleanInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">ChoiceInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">DescriptionDisplayOptions</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Interprets the type of the UI element and correspondingly renders</p>
+							<ul>
+								<li>slider or spinner</li>
+								<li>text box</li>
+								<li>toggle</li>
+								<li>drop down</li>
+								<li>plain text or message bar</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="isdisplayable" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Is<wbr>Displayable</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Is<wbr>Displayable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ClassDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates to the compiler that UI should be generated from this class.</p>
+								</div>
+							</div>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ClassDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="onchange" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> On<wbr>Change</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">On<wbr>Change<span class="tsd-signature-symbol">(</span>onChange<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-signature-type" data-tsd-kind="Type alias">OnChangeCallback</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates the callback to be fired when the UI element corresponding to the property is changed.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>onChange: <a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-signature-type" data-tsd-kind="Type alias">OnChangeCallback</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="propertyinfo" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Property<wbr>Info</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Property<wbr>Info<span class="tsd-signature-symbol">(</span>info<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates that the UI element corresponding to the property should have an Info bubble. The Info
+									bubble is the icon that looks like an &quot;i&quot; which users click on to get more information about the UI element.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>info: <a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="refreshoptions" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Refresh<wbr>Options</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Refresh<wbr>Options<span class="tsd-signature-symbol">(</span>refreshParams<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshParams</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ClassDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>If there is a long running operation in your page after the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onsave"><code>onSave</code></a> action, the page can
+										optionally auto refresh itself using the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh"><code>onRefresh</code></a> action. The &#39;RefreshOptions&#39; indicate
+									how often the auto refresh of the page occurs.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>refreshParams: <a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshParams</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ClassDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="values" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Values</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Values<span class="tsd-signature-symbol">(</span>inputOptions<span class="tsd-signature-symbol">: </span><a href="selfserve_decorators.html#inputoptions" class="tsd-signature-type" data-tsd-kind="Type alias">InputOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates that this property should correspond to a UI element with the given parameters.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>inputOptions: <a href="selfserve_decorators.html#inputoptions" class="tsd-signature-type" data-tsd-kind="Type alias">InputOptions</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve_selfservetelemetryprocessor.html b/docs/modules/selfserve_selfservetelemetryprocessor.html
new file mode 100644
index 000000000..b70d893a9
--- /dev/null
+++ b/docs/modules/selfserve_selfservetelemetryprocessor.html
@@ -0,0 +1,323 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeTelemetryProcessor | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetelemetryprocessor.html">SelfServe/SelfServeTelemetryProcessor</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeTelemetryProcessor</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetrace" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracecancel" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracefailure" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracestart" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracesuccess" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetrace" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracecancel" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Cancel</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as cancelled.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracefailure" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Failure</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as a failure.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracestart" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Start</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Start logging an action.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
+							<p>Timestamp of the trace start, that can be used in other trace actions.
+							The timestamp is used to identify all the logs associated with an action.</p>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracesuccess" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Success</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as a success.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetrace" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracecancel" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracefailure" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracestart" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracesuccess" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve_selfservetypes.html b/docs/modules/selfserve_selfservetypes.html
new file mode 100644
index 000000000..7edda26ee
--- /dev/null
+++ b/docs/modules/selfserve_selfservetypes.html
@@ -0,0 +1,363 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeTypes | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeTypes</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumerations</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a></li>
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Classes</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Interfaces</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Type aliases</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Type aliases</h2>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="choiceitem" class="tsd-anchor"></a>
+					<h3>Choice<wbr>Item</h3>
+					<div class="tsd-signature tsd-kind-icon">Choice<wbr>Item<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>labelTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string that uniquely identifies the dropdown choice item, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>labelTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the label of the dropdown choice item, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="inputtype" class="tsd-anchor"></a>
+					<h3>Input<wbr>Type</h3>
+					<div class="tsd-signature tsd-kind-icon">Input<wbr>Type<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="onchangecallback" class="tsd-anchor"></a>
+					<h3>On<wbr>Change<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">On<wbr>Change<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span>newValue<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a>, currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Function that dictates how the overall UI should transform when the UI element corresponding to a property, say prop1, is changed.
+							The callback can be used to<br>          * Change the value (and reflect it in the UI) for another property, say prop2<br>          * Change the visibility for prop2 in the UI<br>          * Disable or enable the UI element corresponding to prop2<br>depending on logic based on the newValue of prop1, the currentValues Map and baselineValues Map.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>newValue<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a>, currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-parameters-title">Parameters</h4>
+										<ul class="tsd-parameters">
+											<li>
+												<h5>newValue: <a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The newValue that the property needs to be set to, after the change in the UI element corresponding to this property.</p>
+												</div>
+											</li>
+											<li>
+												<h5>currentValues: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the current state of the UI.</p>
+												</div>
+											</li>
+											<li>
+												<h5>baselineValues: <span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the initial state of the UI.</p>
+												</div>
+											</li>
+										</ul>
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h4>
+										<p>A new Map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the new state of the overall UI</p>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="initializecallback" class="tsd-anchor"></a>
+					<h3>initialize<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">initialize<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></h4>
+										<p>Promise of Map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> which will become the current state of the UI.</p>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="onsavecallback" class="tsd-anchor"></a>
+					<h3>on<wbr>Save<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Save<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span>currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-parameters-title">Parameters</h4>
+										<ul class="tsd-parameters">
+											<li>
+												<h5>currentValues: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the current state of the UI</p>
+												</div>
+											</li>
+											<li>
+												<h5>baselineValues: <span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the initial state of the UI</p>
+												</div>
+											</li>
+										</ul>
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></h4>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/modules/selfserve_selfserveutils.html b/docs/modules/selfserve_selfserveutils.html
new file mode 100644
index 000000000..6dcb66f55
--- /dev/null
+++ b/docs/modules/selfserve_selfserveutils.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeUtils | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeUtils</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumerations</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a></li>
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="generatebladelink" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> generate<wbr>Blade<wbr>Link</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">generate<wbr>Blade<wbr>Link<span class="tsd-signature-symbol">(</span>blade<span class="tsd-signature-symbol">: </span><a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">BladeType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Generate the URL corresponding to the portal blade for the current Azure Cosmos DB account</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>blade: <a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">BladeType</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/less/documentDB.less b/less/documentDB.less
index 34cfbecf7..6bb963772 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2099,7 +2099,7 @@ a:link {
   display: flex;
   flex: 1 1 auto;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: auto;
   height: 100%;
 }
 
@@ -3086,6 +3086,6 @@ settings-pane {
   }
 }
 .hiddenMain {
-  visibility: hidden;
+  display: none;
   height: 0px;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4cd81fb99..c01ec49b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -275,6 +275,24 @@
         "adal-node": "^0.1.28"
       }
     },
+    "@azure/msal-browser": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.14.2.tgz",
+      "integrity": "sha512-JKHE9Rer41CI8tweiyE91M8ZbGvQV9P+jOPB4ZtPxyxCi2f7ED3jNfdzyUJ1eGB+hCRnvO56M1Xc61T1R+JfYg==",
+      "requires": {
+        "@azure/msal-common": "^4.3.0"
+      },
+      "dependencies": {
+        "@azure/msal-common": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-4.3.0.tgz",
+          "integrity": "sha512-jFqUWe83wVb6O8cNGGBFg2QlKvqM1ezUgJTEV7kIsAPX0RXhGFE4B1DLNt6hCnkTXDbw+KGW0zgxOEr4MJQwLw==",
+          "requires": {
+            "debug": "^4.1.1"
+          }
+        }
+      }
+    },
     "@azure/msal-common": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-1.7.2.tgz",
@@ -6864,9 +6882,9 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.23",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.23.tgz",
-      "integrity": "sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==",
+      "version": "26.0.20",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.20.tgz",
+      "integrity": "sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==",
       "dev": true,
       "requires": {
         "jest-diff": "^26.0.0",
@@ -8155,6 +8173,12 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -9686,6 +9710,12 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
     },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -12270,9 +12300,9 @@
       }
     },
     "expect-playwright": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.3.4.tgz",
-      "integrity": "sha512-JulhMkc5lVvpF18ImWLqviHZpo4qzT9FfpF+lP4D+U9guGUnYOCFpS/5Qk1c3zKhYHJL1JBEfiiGfcRUuzsnEg==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.3.3.tgz",
+      "integrity": "sha512-uoeyx2D5LawJdziMdweOp6cnZzFOOPT9VvPG6gOh6YC7N9pU0k2KpVlRiz/Vc/fFBiGUNNeJq2Aq+9GJ65Nfrw==",
       "dev": true
     },
     "expose-loader": {
@@ -13467,6 +13497,27 @@
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
+    "handlebars": {
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -19852,6 +19903,12 @@
         "yallist": "^4.0.0"
       }
     },
+    "lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "dev": true
+    },
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -19909,6 +19966,12 @@
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
+    "marked": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
+      "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==",
+      "dev": true
+    },
     "martinez-polygon-clipping": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.1.5.tgz",
@@ -20994,6 +21057,32 @@
         "mimic-fn": "^2.1.0"
       }
     },
+    "onigasm": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/onigasm/-/onigasm-2.2.5.tgz",
+      "integrity": "sha512-F+th54mPc0l1lp1ZcFMyL/jTs2Tlq4SqIHKIXGZOR/VkHkF9A7Fr5rRr5+ZG/lWeRsyrClLYRq7s/yFQ/XhWCA==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^5.1.1"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
     "open": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/open/-/open-7.3.1.tgz",
@@ -23677,11 +23766,49 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz",
+      "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "dependencies": {
+        "interpret": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+          "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+          "dev": true
+        },
+        "rechoir": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+          "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+          "dev": true,
+          "requires": {
+            "resolve": "^1.1.6"
+          }
+        }
+      }
+    },
     "shellwords": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
+    "shiki": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.9.3.tgz",
+      "integrity": "sha512-NEjg1mVbAUrzRv2eIcUt3TG7X9svX7l3n3F5/3OdFq+/BxUdmBOeKGiH4icZJBLHy354Shnj6sfBTemea2e7XA==",
+      "dev": true,
+      "requires": {
+        "onigasm": "^2.2.5",
+        "vscode-textmate": "^5.2.0"
+      }
+    },
     "shimmer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
@@ -25410,6 +25537,67 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typedoc": {
+      "version": "0.20.36",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.20.36.tgz",
+      "integrity": "sha512-qFU+DWMV/hifQ9ZAlTjdFO9wbUIHuUBpNXzv68ZyURAP9pInjZiO4+jCPeAzHVcaBCHER9WL/+YzzTt6ZlN/Nw==",
+      "dev": true,
+      "requires": {
+        "colors": "^1.4.0",
+        "fs-extra": "^9.1.0",
+        "handlebars": "^4.7.7",
+        "lodash": "^4.17.21",
+        "lunr": "^2.3.9",
+        "marked": "^2.0.3",
+        "minimatch": "^3.0.0",
+        "progress": "^2.0.3",
+        "shelljs": "^0.8.4",
+        "shiki": "^0.9.3",
+        "typedoc-default-themes": "^0.12.10"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+          "dev": true
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
+    "typedoc-default-themes": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/typedoc-default-themes/-/typedoc-default-themes-0.12.10.tgz",
+      "integrity": "sha512-fIS001cAYHkyQPidWXmHuhs8usjP5XVJjWB8oZGqkTowZaz3v7g3KDZeeqE82FBrmkAnIBOY3jgy7lnPnqATbA==",
+      "dev": true
+    },
     "typescript": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
@@ -25895,6 +26083,12 @@
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
     },
+    "vscode-textmate": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.4.0.tgz",
+      "integrity": "sha512-c0Q4zYZkcLizeYJ3hNyaVUM2AA8KDhNCA3JvXY8CeZSJuBdAy3bAvSbv46RClC4P3dSO9BdwhnKEx2zOo6vP/w==",
+      "dev": true
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -26591,6 +26785,12 @@
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
+    },
     "worker-rpc": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
diff --git a/package.json b/package.json
index e830da882..aa76dd22d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-decorators": "7.14.2",
     "@fluentui/react": "8.14.8",
+    "@azure/msal-browser": "2.14.2",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -71,7 +72,6 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
     "ms": "2.1.3",
-    "msal": "1.4.4",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
@@ -111,13 +111,13 @@
     "@types/dom-to-image": "2.6.2",
     "@types/enzyme": "3.10.8",
     "@types/hasher": "0.0.31",
-    "@types/jest": "26.0.23",
     "@types/memoize-one": "4.1.1",
     "@types/mkdirp": "1.0.1",
     "@types/node": "15.3.0",
     "@types/node-fetch": "2.5.10",
     "@types/post-robot": "10.0.1",
     "@types/promise.prototype.finally": "2.0.4",
+    "@types/jest": "26.0.20",
     "@types/q": "1.5.1",
     "@types/react": "17.0.5",
     "@types/react-dom": "17.0.5",
@@ -145,8 +145,8 @@
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-react-hooks": "4.2.0",
-    "expect-playwright": "0.3.4",
     "expose-loader": "2.0.0",
+    "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
     "file-loader": "6.2.0",
     "fs-extra": "7.0.0",
@@ -176,6 +176,7 @@
     "ts-loader": "9.1.2",
     "tslint": "5.20.1",
     "tslint-microsoft-contrib": "6.2.0",
+    "typedoc": "0.20.36",
     "typescript": "4.2.4",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
@@ -198,6 +199,7 @@
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
+    "selfServeDocs": "typedoc",
     "compile": "tsc",
     "compile:contracts": "tsc -p ./tsconfig.contracts.json",
     "compile:strict": "tsc -p ./tsconfig.strict.json",
@@ -208,7 +210,7 @@
     "strict:find": "node ./strict-null-checks/find.js",
     "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
-    "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
+    "generateARMClients": "npx ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },
   "repository": {
     "type": "git",
diff --git a/src/Common/CollapsedResourceTree.tsx b/src/Common/CollapsedResourceTree.tsx
index b633ad714..08f994d3e 100644
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -1,5 +1,6 @@
 import arrowLeftImg from "images/imgarrowlefticon.svg";
 import React, { FunctionComponent } from "react";
+import { userContext } from "../UserContext";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -25,7 +26,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
             <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
-              <span data-bind="text: collectionTitle" />
+              <span>{userContext.apiType} API</span>
             </span>
           </li>
         </ul>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 31f537d8a..79edd0234 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -44,7 +44,7 @@ export class ArmResourceTypes {
 }
 
 export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
+  public static partitionKeyKind = "Hash";
   public static singlePartitionStorageInGb: string = "10";
   public static multiPartitionStorageInGb: string = "100";
   public static maxChangeFeedRetentionDuration: number = 10;
diff --git a/src/Common/CosmosClient.ts b/src/Common/CosmosClient.ts
index 9ba100b3b..756c53a2e 100644
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -10,6 +10,13 @@ const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
+
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
+    const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+    const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
+    return authorizationToken;
+  }
+
   if (configContext.platform === Platform.Emulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -76,7 +83,7 @@ export function client(): Cosmos.CosmosClient {
   if (_client) return _client;
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
-    key: userContext.masterKey,
+    ...(!userContext.features.enableAadDataPlane && { key: userContext.masterKey }),
     tokenProvider,
     connectionPolicy: {
       enableEndpointDiscovery: false,
diff --git a/src/Common/DatabaseAccountUtility.ts b/src/Common/DatabaseAccountUtility.ts
new file mode 100644
index 000000000..693f581f8
--- /dev/null
+++ b/src/Common/DatabaseAccountUtility.ts
@@ -0,0 +1,17 @@
+import { userContext } from "../UserContext";
+
+function isVirtualNetworkFilterEnabled() {
+  return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
+}
+
+function isIpRulesEnabled() {
+  return userContext.databaseAccount?.properties?.ipRules?.length > 0;
+}
+
+function isPrivateEndpointConnectionsEnabled() {
+  return userContext.databaseAccount?.properties?.privateEndpointConnections?.length > 0;
+}
+
+export function isPublicInternetAccessAllowed(): boolean {
+  return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
+}
diff --git a/src/Common/EntityValue.tsx b/src/Common/EntityValue.tsx
index edea0fa35..788e08f85 100644
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -32,7 +32,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
         <DatePicker
           className="addEntityDatePicker"
           placeholder={entityValuePlaceholder}
-          value={entityValue && new Date(entityValue)}
+          value={entityValue ? new Date(entityValue) : new Date()}
           ariaLabel={entityValuePlaceholder}
           onSelectDate={onSelectDate}
           disabled={isEntityValueDisable}
@@ -59,7 +59,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}
-      value={typeof entityValue === "string" && entityValue}
+      value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
     />
   );
diff --git a/src/Common/QueriesClient.ts b/src/Common/QueriesClient.ts
index adc47bdf7..23e1ee9e1 100644
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -19,7 +19,7 @@ import { handleError } from "./ErrorHandlingUtils";
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
     paths: [`/${SavedQueries.PartitionKeyProperty}`],
-    kind: BackendDefaults.partitionKeyKind,
+    kind: "Hash",
     version: BackendDefaults.partitionKeyVersion,
   };
   private static readonly FetchQuery: string = "SELECT * FROM c";
diff --git a/src/Common/ResourceTree.tsx b/src/Common/ResourceTree.tsx
index 43c51083f..2fb2e15f8 100644
--- a/src/Common/ResourceTree.tsx
+++ b/src/Common/ResourceTree.tsx
@@ -20,7 +20,7 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
         {/* Collections Window Title/Command Bar - Start */}
         <div className="collectiontitle">
           <div className="coltitle">
-            <span className="titlepadcol" data-bind="text: collectionTitle" />
+            <span className="titlepadcol">{userContext.apiType} API</span>
             <div className="float-right">
               <span
                 className="padimgcolrefresh"
@@ -31,7 +31,7 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
                 aria-label="Refresh tree"
                 title="Refresh tree"
               >
-                <img className="refreshcol" src={refreshImg} alt="Refresh tree" />
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
               </span>
               <span
                 className="padimgcolrefresh1"
diff --git a/src/Common/dataAccess/createCollection.ts b/src/Common/dataAccess/createCollection.ts
index 2aecaeebc..6d7798dd8 100644
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -10,18 +10,15 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateGremlinGraph,
-  getGremlinGraph,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBCollection,
   getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/createDatabase.ts b/src/Common/dataAccess/createDatabase.ts
index fc4172ce5..7d13871f6 100644
--- a/src/Common/dataAccess/createDatabase.ts
+++ b/src/Common/dataAccess/createDatabase.ts
@@ -6,23 +6,23 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraKeyspace,
   getCassandraKeyspace,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import {
   createUpdateGremlinDatabase,
   getGremlinDatabase,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBDatabase,
   getMongoDBDatabase,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   CassandraKeyspaceCreateUpdateParameters,
   CreateUpdateOptions,
   GremlinDatabaseCreateUpdateParameters,
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/createDocument.ts b/src/Common/dataAccess/createDocument.ts
index b64f70ff9..94dde951d 100644
--- a/src/Common/dataAccess/createDocument.ts
+++ b/src/Common/dataAccess/createDocument.ts
@@ -1,8 +1,8 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export const createDocument = async (collection: CollectionBase, newDocument: unknown): Promise<unknown> => {
   const entityName = getEntityName();
diff --git a/src/Common/dataAccess/createStoredProcedure.ts b/src/Common/dataAccess/createStoredProcedure.ts
index 471ea0f97..579835277 100644
--- a/src/Common/dataAccess/createStoredProcedure.ts
+++ b/src/Common/dataAccess/createStoredProcedure.ts
@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/createTrigger.ts b/src/Common/dataAccess/createTrigger.ts
index d9771b095..fe676bbe3 100644
--- a/src/Common/dataAccess/createTrigger.ts
+++ b/src/Common/dataAccess/createTrigger.ts
@@ -1,11 +1,8 @@
-import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -13,8 +10,8 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function createTrigger(
   databaseId: string,
   collectionId: string,
-  trigger: TriggerDefinition
-): Promise<TriggerDefinition & Resource> {
+  trigger: SqlTriggerResource
+): Promise<TriggerDefinition | SqlTriggerResource> {
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
     if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
@@ -38,7 +35,7 @@ export async function createTrigger(
 
       const createTriggerParams: SqlTriggerCreateUpdateParameters = {
         properties: {
-          resource: trigger as SqlTriggerResource,
+          resource: trigger,
           options: {},
         },
       };
@@ -51,10 +48,13 @@ export async function createTrigger(
         trigger.id,
         createTriggerParams
       );
-      return rpResponse && (rpResponse.properties?.resource as TriggerDefinition & Resource);
+      return rpResponse && rpResponse.properties?.resource;
     }
 
-    const response = await client().database(databaseId).container(collectionId).scripts.triggers.create(trigger);
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response.resource;
   } catch (error) {
     handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);
diff --git a/src/Common/dataAccess/createUserDefinedFunction.ts b/src/Common/dataAccess/createUserDefinedFunction.ts
index 8608c25da..3b7dd4a12 100644
--- a/src/Common/dataAccess/createUserDefinedFunction.ts
+++ b/src/Common/dataAccess/createUserDefinedFunction.ts
@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/deleteCollection.ts b/src/Common/dataAccess/deleteCollection.ts
index ec3dd7453..63e58b8c8 100644
--- a/src/Common/dataAccess/deleteCollection.ts
+++ b/src/Common/dataAccess/deleteCollection.ts
@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { deleteSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { deleteTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/deleteDatabase.ts b/src/Common/dataAccess/deleteDatabase.ts
index 4e7d3523c..c6c744e35 100644
--- a/src/Common/dataAccess/deleteDatabase.ts
+++ b/src/Common/dataAccess/deleteDatabase.ts
@@ -1,9 +1,9 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/deleteStoredProcedure.ts b/src/Common/dataAccess/deleteStoredProcedure.ts
index d1cd534ac..daaf8315a 100644
--- a/src/Common/dataAccess/deleteStoredProcedure.ts
+++ b/src/Common/dataAccess/deleteStoredProcedure.ts
@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/deleteTrigger.ts b/src/Common/dataAccess/deleteTrigger.ts
index 3309bc2a9..b4a7aa7ad 100644
--- a/src/Common/dataAccess/deleteTrigger.ts
+++ b/src/Common/dataAccess/deleteTrigger.ts
@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/deleteUserDefinedFunction.ts b/src/Common/dataAccess/deleteUserDefinedFunction.ts
index b502c1a98..c9683c1ab 100644
--- a/src/Common/dataAccess/deleteUserDefinedFunction.ts
+++ b/src/Common/dataAccess/deleteUserDefinedFunction.ts
@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/queryDocuments.ts b/src/Common/dataAccess/queryDocuments.ts
index 16b2fb39e..c24e22ff6 100644
--- a/src/Common/dataAccess/queryDocuments.ts
+++ b/src/Common/dataAccess/queryDocuments.ts
@@ -1,6 +1,6 @@
-import { Queries } from "../Constants";
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { Queries } from "../Constants";
 import { client } from "../CosmosClient";
 
 export const queryDocuments = (
diff --git a/src/Common/dataAccess/queryDocumentsPage.ts b/src/Common/dataAccess/queryDocumentsPage.ts
index 064e4126f..e8b5447ef 100644
--- a/src/Common/dataAccess/queryDocumentsPage.ts
+++ b/src/Common/dataAccess/queryDocumentsPage.ts
@@ -1,8 +1,8 @@
 import { QueryResults } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
-import { handleError } from "../ErrorHandlingUtils";
 import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
 
 export const queryDocumentsPage = async (
   resourceName: string,
diff --git a/src/Common/dataAccess/readCollectionOffer.ts b/src/Common/dataAccess/readCollectionOffer.ts
index 4b1e0a9e8..c307242d8 100644
--- a/src/Common/dataAccess/readCollectionOffer.ts
+++ b/src/Common/dataAccess/readCollectionOffer.ts
@@ -1,11 +1,11 @@
 import { AuthType } from "../../AuthType";
 import { Offer, ReadCollectionOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { getTableThroughput } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
diff --git a/src/Common/dataAccess/readCollections.ts b/src/Common/dataAccess/readCollections.ts
index 7161f598c..92be4f57e 100644
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,11 +1,11 @@
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/readDatabaseOffer.ts b/src/Common/dataAccess/readDatabaseOffer.ts
index b26976a64..d27d68078 100644
--- a/src/Common/dataAccess/readDatabaseOffer.ts
+++ b/src/Common/dataAccess/readDatabaseOffer.ts
@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
diff --git a/src/Common/dataAccess/readDatabases.ts b/src/Common/dataAccess/readDatabases.ts
index 079c92269..e5136676e 100644
--- a/src/Common/dataAccess/readDatabases.ts
+++ b/src/Common/dataAccess/readDatabases.ts
@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listGremlinDatabases } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { listSqlDatabases } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/readMongoDBCollection.tsx b/src/Common/dataAccess/readMongoDBCollection.tsx
index e7ae32c79..cdc4a0845 100644
--- a/src/Common/dataAccess/readMongoDBCollection.tsx
+++ b/src/Common/dataAccess/readMongoDBCollection.tsx
@@ -1,7 +1,7 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { getMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { getMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 
diff --git a/src/Common/dataAccess/readStoredProcedures.ts b/src/Common/dataAccess/readStoredProcedures.ts
index b7955ffd7..65edb54c2 100644
--- a/src/Common/dataAccess/readStoredProcedures.ts
+++ b/src/Common/dataAccess/readStoredProcedures.ts
@@ -1,7 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/readTriggers.ts b/src/Common/dataAccess/readTriggers.ts
index 7f87d3ae9..764f3ace1 100644
--- a/src/Common/dataAccess/readTriggers.ts
+++ b/src/Common/dataAccess/readTriggers.ts
@@ -1,7 +1,8 @@
-import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlTriggers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlTriggers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -9,7 +10,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readTriggers(
   databaseId: string,
   collectionId: string
-): Promise<(TriggerDefinition & Resource)[]> {
+): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
   const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
   try {
     if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
@@ -20,7 +21,7 @@ export async function readTriggers(
         databaseId,
         collectionId
       );
-      return rpResponse?.value?.map((trigger) => trigger.properties?.resource as TriggerDefinition & Resource);
+      return rpResponse?.value?.map((trigger) => trigger.properties?.resource);
     }
 
     const response = await client().database(databaseId).container(collectionId).scripts.triggers.readAll().fetchAll();
diff --git a/src/Common/dataAccess/readUserDefinedFunctions.ts b/src/Common/dataAccess/readUserDefinedFunctions.ts
index 813ff95c5..a55ad0ca6 100644
--- a/src/Common/dataAccess/readUserDefinedFunctions.ts
+++ b/src/Common/dataAccess/readUserDefinedFunctions.ts
@@ -1,7 +1,7 @@
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/updateCollection.ts b/src/Common/dataAccess/updateCollection.ts
index 2d022bbe9..cb553b77f 100644
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -6,23 +6,20 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateGremlinGraph,
-  getGremlinGraph,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBCollection,
   getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import {
   ExtendedResourceProperties,
   MongoDBCollectionCreateUpdateParameters,
   SqlContainerCreateUpdateParameters,
   SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/updateOffer.ts b/src/Common/dataAccess/updateOffer.ts
index 36ca8fb0c..089f931b1 100644
--- a/src/Common/dataAccess/updateOffer.ts
+++ b/src/Common/dataAccess/updateOffer.ts
@@ -10,7 +10,7 @@ import {
   migrateCassandraTableToManualThroughput,
   updateCassandraKeyspaceThroughput,
   updateCassandraTableThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import {
   migrateGremlinDatabaseToAutoscale,
   migrateGremlinDatabaseToManualThroughput,
@@ -18,7 +18,7 @@ import {
   migrateGremlinGraphToManualThroughput,
   updateGremlinDatabaseThroughput,
   updateGremlinGraphThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   migrateMongoDBCollectionToAutoscale,
   migrateMongoDBCollectionToManualThroughput,
@@ -26,7 +26,7 @@ import {
   migrateMongoDBDatabaseToManualThroughput,
   updateMongoDBCollectionThroughput,
   updateMongoDBDatabaseThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import {
   migrateSqlContainerToAutoscale,
   migrateSqlContainerToManualThroughput,
@@ -34,13 +34,13 @@ import {
   migrateSqlDatabaseToManualThroughput,
   updateSqlContainerThroughput,
   updateSqlDatabaseThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   migrateTableToAutoscale,
   migrateTableToManualThroughput,
   updateTableThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
diff --git a/src/Common/dataAccess/updateStoredProcedure.ts b/src/Common/dataAccess/updateStoredProcedure.ts
index dd6d86f66..b3cf875a0 100644
--- a/src/Common/dataAccess/updateStoredProcedure.ts
+++ b/src/Common/dataAccess/updateStoredProcedure.ts
@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/Common/dataAccess/updateTrigger.ts b/src/Common/dataAccess/updateTrigger.ts
index d43463738..04a2b9572 100644
--- a/src/Common/dataAccess/updateTrigger.ts
+++ b/src/Common/dataAccess/updateTrigger.ts
@@ -1,11 +1,8 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -13,8 +10,8 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function updateTrigger(
   databaseId: string,
   collectionId: string,
-  trigger: TriggerDefinition
-): Promise<TriggerDefinition> {
+  trigger: SqlTriggerResource
+): Promise<SqlTriggerResource | TriggerDefinition> {
   const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
   const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
   try {
@@ -31,7 +28,7 @@ export async function updateTrigger(
       if (getResponse?.properties?.resource) {
         const createTriggerParams: SqlTriggerCreateUpdateParameters = {
           properties: {
-            resource: trigger as SqlTriggerResource,
+            resource: trigger,
             options: {},
           },
         };
@@ -44,7 +41,7 @@ export async function updateTrigger(
           trigger.id,
           createTriggerParams
         );
-        return rpResponse && (rpResponse.properties?.resource as TriggerDefinition);
+        return rpResponse && rpResponse.properties?.resource;
       }
 
       throw new Error(`Failed to update trigger: ${trigger.id} does not exist.`);
@@ -54,7 +51,7 @@ export async function updateTrigger(
       .database(databaseId)
       .container(collectionId)
       .scripts.trigger(trigger.id)
-      .replace(trigger);
+      .replace(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response?.resource;
   } catch (error) {
     handleError(error, "UpdateTrigger", `Error while updating trigger ${trigger.id}`);
diff --git a/src/Common/dataAccess/updateUserDefinedFunction.ts b/src/Common/dataAccess/updateUserDefinedFunction.ts
index 3b9449915..f3b28bf51 100644
--- a/src/Common/dataAccess/updateUserDefinedFunction.ts
+++ b/src/Common/dataAccess/updateUserDefinedFunction.ts
@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index dc7d5f887..a4413a265 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -27,6 +27,7 @@ export interface ConfigContext {
   hostedExplorerURL: string;
   armAPIVersion?: string;
   allowedJunoOrigins: string[];
+  enableSchemaAnalyzer: boolean;
 }
 
 // Default configuration
@@ -61,6 +62,7 @@ let configContext: Readonly<ConfigContext> = {
     "https://tools-staging.cosmos.azure.com",
     "https://localhost",
   ],
+  enableSchemaAnalyzer: false,
 };
 
 export function resetConfigContext(): void {
diff --git a/src/Contracts/DataModels.ts b/src/Contracts/DataModels.ts
index aece6a04a..e71c63cd9 100644
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -20,6 +20,9 @@ export interface DatabaseAccountExtendedProperties {
   writeLocations?: DatabaseAccountResponseLocation[];
   enableFreeTier?: boolean;
   enableAnalyticalStorage?: boolean;
+  isVirtualNetworkFilterEnabled?: boolean;
+  ipRules?: IpRule[];
+  privateEndpointConnections?: unknown[];
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -31,6 +34,10 @@ export interface DatabaseAccountResponseLocation {
   provisioningState: string;
 }
 
+export interface IpRule {
+  ipAddressOrRange: string;
+}
+
 export interface ConfigurationOverrides {
   EnableBsonSchema: string;
 }
@@ -161,7 +168,7 @@ export interface KeyResource {
 
 export interface IndexingPolicy {
   automatic: boolean;
-  indexingMode: string;
+  indexingMode: "consistent" | "lazy" | "none";
   includedPaths: any;
   excludedPaths: any;
   compositeIndexes?: any;
@@ -170,7 +177,7 @@ export interface IndexingPolicy {
 
 export interface PartitionKey {
   paths: string[];
-  kind: string;
+  kind: "Hash" | "Range" | "MultiHash";
   version: number;
   systemKey?: boolean;
 }
@@ -385,16 +392,6 @@ export interface GeospatialConfig {
   type: string;
 }
 
-export interface GatewayDatabaseAccount {
-  MediaLink: string;
-  DatabasesLink: string;
-  MaxMediaStorageUsageInMB: number;
-  CurrentMediaStorageUsageInMB: number;
-  EnableMultipleWriteLocations?: boolean;
-  WritableLocations: RegionEndpoint[];
-  ReadableLocations: RegionEndpoint[];
-}
-
 export interface RegionEndpoint {
   name: string;
   documentAccountEndpoint: string;
@@ -415,13 +412,6 @@ export interface AccountKeys {
   secondaryReadonlyMasterKey: string;
 }
 
-export interface AfecFeature {
-  id: string;
-  name: string;
-  properties: { state: string };
-  type: string;
-}
-
 export interface OperationStatus {
   status: string;
   id?: string;
@@ -501,91 +491,6 @@ export interface MongoParameters extends RpParameters {
   analyticalStorageTtl?: number;
 }
 
-export interface SparkClusterLibrary {
-  name: string;
-}
-
-export interface Library extends SparkClusterLibrary {
-  properties: {
-    kind: "Jar";
-    source: {
-      kind: "HttpsUri";
-      uri: string;
-      libraryFileName: string;
-    };
-  };
-}
-
-export interface LibraryFeedResponse {
-  value: Library[];
-}
-
-export interface ArmResource {
-  id: string;
-  location: string;
-  name: string;
-  type: string;
-  tags: { [key: string]: string };
-}
-
-export interface ArcadiaWorkspaceIdentity {
-  type: string;
-  principalId: string;
-  tenantId: string;
-}
-
-export interface ArcadiaWorkspaceProperties {
-  managedResourceGroupName: string;
-  provisioningState: string;
-  sqlAdministratorLogin: string;
-  connectivityEndpoints: {
-    artifacts: string;
-    dev: string;
-    spark: string;
-    sql: string;
-    web: string;
-  };
-  defaultDataLakeStorage: {
-    accountUrl: string;
-    filesystem: string;
-  };
-}
-
-export interface ArcadiaWorkspaceFeedResponse {
-  value: ArcadiaWorkspace[];
-}
-
-export interface ArcadiaWorkspace extends ArmResource {
-  identity: ArcadiaWorkspaceIdentity;
-  properties: ArcadiaWorkspaceProperties;
-}
-
-export interface SparkPoolFeedResponse {
-  value: SparkPool[];
-}
-
-export interface SparkPoolProperties {
-  creationDate: string;
-  sparkVersion: string;
-  nodeCount: number;
-  nodeSize: string;
-  nodeSizeFamily: string;
-  provisioningState: string;
-  autoScale: {
-    enabled: boolean;
-    minNodeCount: number;
-    maxNodeCount: number;
-  };
-  autoPause: {
-    enabled: boolean;
-    delayInMinutes: number;
-  };
-}
-
-export interface SparkPool extends ArmResource {
-  properties: SparkPoolProperties;
-}
-
 export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
diff --git a/src/Contracts/ExplorerContracts.ts b/src/Contracts/ExplorerContracts.ts
index 1689a96b5..d1c3dba58 100644
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -1,6 +1,6 @@
-import * as Versions from "./Versions";
 import * as ActionContracts from "./ActionContracts";
 import * as Diagnostics from "./Diagnostics";
+import * as Versions from "./Versions";
 
 /**
  * Messaging types used with Data Explorer <-> Portal communication
diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index 9fb242f79..25df44c7f 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -15,6 +15,8 @@ import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
 import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { CollectionCreationDefaults } from "../UserContext";
+import { SqlTriggerResource } from "../Utils/arm/generatedClients/cosmos/types";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
 
@@ -175,7 +177,7 @@ export interface Collection extends CollectionBase {
 
   createStoredProcedureNode(data: StoredProcedureDefinition & Resource): StoredProcedure;
   createUserDefinedFunctionNode(data: UserDefinedFunctionDefinition & Resource): UserDefinedFunction;
-  createTriggerNode(data: TriggerDefinition & Resource): Trigger;
+  createTriggerNode(data: TriggerDefinition | SqlTriggerResource): Trigger;
   findStoredProcedureWithId(sprocRid: string): StoredProcedure;
   findTriggerWithId(triggerRid: string): Trigger;
   findUserDefinedFunctionWithId(udfRid: string): UserDefinedFunction;
@@ -410,25 +412,6 @@ export interface SelfServeFrameInputs {
   flights?: readonly string[];
 }
 
-export interface CollectionCreationDefaults {
-  storage: string;
-  throughput: ThroughputDefaults;
-}
-
-export interface ThroughputDefaults {
-  fixed: number;
-  unlimited:
-    | number
-    | {
-        collectionThreshold: number;
-        lessThanOrEqualToThreshold: number;
-        greatThanThreshold: number;
-      };
-  unlimitedmax: number;
-  unlimitedmin: number;
-  shared: number;
-}
-
 export class MonacoEditorSettings {
   public readonly language: string;
   public readonly readOnly: boolean;
diff --git a/src/Explorer/ComponentRegisterer.test.ts b/src/Explorer/ComponentRegisterer.test.ts
deleted file mode 100644
index ea9164787..000000000
--- a/src/Explorer/ComponentRegisterer.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-jest.mock("monaco-editor");
-
-import * as ko from "knockout";
-import "./ComponentRegisterer";
-
-describe("Component Registerer", () => {
-  it("should register json-editor component", () => {
-    expect(ko.components.isRegistered("json-editor")).toBe(true);
-  });
-
-  it("should register dynamic-list component", () => {
-    expect(ko.components.isRegistered("dynamic-list")).toBe(true);
-  });
-});
diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts
index 9a49fd643..a58bd38a5 100644
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -1,16 +1,8 @@
 import * as ko from "knockout";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
-import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import * as PaneComponents from "./Panes/PaneComponents";
 
 ko.components.register("editor", new EditorComponent());
 ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
-ko.components.register("dynamic-list", DynamicListComponent);
-ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-
-// Panes
-ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
diff --git a/src/Explorer/ContextMenuButtonFactory.ts b/src/Explorer/ContextMenuButtonFactory.ts
index 5f860336b..8bc069be9 100644
--- a/src/Explorer/ContextMenuButtonFactory.ts
+++ b/src/Explorer/ContextMenuButtonFactory.ts
@@ -11,12 +11,12 @@ import DeleteUDFIcon from "images/DeleteUDF.svg";
 import HostedTerminalIcon from "images/Hosted-Terminal.svg";
 import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
+import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
-
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
   collectionId: string;
@@ -34,7 +34,7 @@ export class ResourceTreeContextMenuButtonFactory {
       {
         iconSrc: AddCollectionIcon,
         onClick: () => container.onNewCollectionClicked(databaseId),
-        label: container.addCollectionText(),
+        label: `New ${getCollectionName()}`,
       },
     ];
 
@@ -42,7 +42,7 @@ export class ResourceTreeContextMenuButtonFactory {
       items.push({
         iconSrc: DeleteDatabaseIcon,
         onClick: () => container.openDeleteDatabaseConfirmationPane(),
-        label: container.deleteDatabaseText(),
+        label: `Delete ${getDatabaseName()}`,
         styleClass: "deleteDatabaseMenuItem",
       });
     }
@@ -73,9 +73,13 @@ export class ResourceTreeContextMenuButtonFactory {
         iconSrc: HostedTerminalIcon,
         onClick: () => {
           const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewMongoShellClick();
+          if (container.isShellEnabled()) {
+            container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+          } else {
+            selectedCollection && selectedCollection.onNewMongoShellClick();
+          }
         },
-        label: "New Shell",
+        label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
       });
     }
 
@@ -111,7 +115,7 @@ export class ResourceTreeContextMenuButtonFactory {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: () => container.openDeleteCollectionConfirmationPane(),
-      label: container.deleteCollectionText(),
+      label: `Delete ${getCollectionName()}`,
       styleClass: "deleteCollectionMenuItem",
     });
 
diff --git a/src/Explorer/Controls/Accordion/AccordionComponent.tsx b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
index 93818856e..9fa917874 100644
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -26,12 +26,12 @@ export interface AccordionItemComponentProps {
 }
 
 interface AccordionItemComponentState {
-  isExpanded: boolean;
+  isExpanded?: boolean;
 }
 
 export class AccordionItemComponent extends React.Component<AccordionItemComponentProps, AccordionItemComponentState> {
   private static readonly durationMS = 500;
-  private isExpanded: boolean;
+  private isExpanded?: boolean;
 
   constructor(props: AccordionItemComponentProps) {
     super(props);
@@ -78,7 +78,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
     );
   }
 
-  private onHeaderClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+  private onHeaderClick = (_event: React.MouseEvent<HTMLDivElement>): void => {
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 
diff --git a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx b/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
deleted file mode 100644
index 04de9a716..000000000
--- a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
-import * as React from "react";
-import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
-import * as Logger from "../../../Common/Logger";
-import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
-
-export interface ArcadiaMenuPickerProps {
-  selectText?: string;
-  disableSubmenu?: boolean;
-  selectedSparkPool: string;
-  workspaces: ArcadiaWorkspaceItem[];
-  onSparkPoolSelect: (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ) => boolean | void;
-  onCreateNewWorkspaceClicked: () => boolean | void;
-  onCreateNewSparkPoolClicked: (workspaceResourceId: string) => boolean | void;
-}
-
-interface ArcadiaMenuPickerStates {
-  selectedSparkPool: string;
-}
-
-export interface ArcadiaWorkspaceItem extends ArcadiaWorkspace {
-  sparkPools: SparkPool[];
-}
-
-export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, ArcadiaMenuPickerStates> {
-  constructor(props: ArcadiaMenuPickerProps) {
-    super(props);
-    this.state = {
-      selectedSparkPool: props.selectedSparkPool,
-    };
-  }
-
-  private _onSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    try {
-      this.props.onSparkPoolSelect(e, item);
-      this.setState({
-        selectedSparkPool: item.text,
-      });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaMenuPicker/_onSparkPoolClicked");
-      throw error;
-    }
-  };
-
-  private _onCreateNewWorkspaceClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewWorkspaceClicked();
-  };
-
-  private _onCreateNewSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewSparkPoolClicked(item.key);
-  };
-
-  public render() {
-    const { workspaces } = this.props;
-    let workspaceMenuItems: IContextualMenuItem[] = workspaces.map((workspace) => {
-      let sparkPoolsMenuProps: IContextualMenuProps = {
-        items: workspace.sparkPools.map(
-          (sparkpool): IContextualMenuItem => ({
-            key: sparkpool.id,
-            text: sparkpool.name,
-            onClick: this._onSparkPoolClicked,
-          })
-        ),
-      };
-      if (!sparkPoolsMenuProps.items.length) {
-        sparkPoolsMenuProps.items.push({
-          key: workspace.id,
-          text: "Create new spark pool",
-          onClick: this._onCreateNewSparkPoolClicked,
-        });
-      }
-
-      return {
-        key: workspace.id,
-        text: workspace.name,
-        subMenuProps: this.props.disableSubmenu ? undefined : sparkPoolsMenuProps,
-      };
-    });
-
-    if (!workspaceMenuItems.length) {
-      workspaceMenuItems.push({
-        key: "create_workspace",
-        text: "Create new workspace",
-        onClick: this._onCreateNewWorkspaceClicked,
-      });
-    }
-
-    const dropdownStyle: IButtonStyles = {
-      root: {
-        backgroundColor: "transparent",
-        margin: "auto 5px",
-        padding: "0",
-        border: "0",
-      },
-      rootHovered: {
-        backgroundColor: "transparent",
-      },
-      rootChecked: {
-        backgroundColor: "transparent",
-      },
-      rootFocused: {
-        backgroundColor: "transparent",
-      },
-      rootExpanded: {
-        backgroundColor: "transparent",
-      },
-      flexContainer: {
-        height: "30px",
-        border: "1px solid #a6a6a6",
-        padding: "0 8px",
-      },
-      label: {
-        fontWeight: "400",
-        fontSize: "12px",
-      },
-    };
-
-    return (
-      <DefaultButton
-        text={this.state.selectedSparkPool || this.props.selectText || "Select a Spark pool"}
-        persistMenu={true}
-        className="arcadia-menu-picker"
-        menuProps={{
-          items: workspaceMenuItems,
-        }}
-        styles={dropdownStyle}
-      />
-    );
-  }
-}
diff --git a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
index 2c39bf5f1..1b151d587 100644
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -7,7 +7,6 @@ import { KeyCodes } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as StringUtils from "../../../Utils/StringUtils";
-import { ArcadiaMenuPickerProps } from "../Arcadia/ArcadiaMenuPicker";
 
 /**
  * Options for this component
@@ -112,15 +111,6 @@ export interface CommandButtonComponentProps {
    * Aria-label for the button
    */
   ariaLabel: string;
-  //TODO: generalize customized command bar
-  /**
-   * If set to true, will render arcadia picker
-   */
-  isArcadiaPicker?: boolean;
-  /**
-   * props to render arcadia picker
-   */
-  arcadiaProps?: ArcadiaMenuPickerProps;
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {
diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx
index 3481e4a1f..ad9805348 100644
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -15,7 +15,22 @@ import {
   ProgressIndicator,
   TextField,
 } from "@fluentui/react";
-import React, { FunctionComponent } from "react";
+import React, { FC } from "react";
+import create, { UseStore } from "zustand";
+
+export interface DialogState {
+  visible: boolean;
+  dialogProps?: DialogProps;
+  openDialog: (props: DialogProps) => void;
+  closeDialog: () => void;
+}
+
+export const useDialog: UseStore<DialogState> = create((set) => ({
+  visible: false,
+  openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
+  closeDialog: () =>
+    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+}));
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -35,7 +50,6 @@ export interface DialogProps {
   title: string;
   subText: string;
   isModal: boolean;
-  visible: boolean;
   choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
@@ -56,24 +70,26 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export const Dialog: FunctionComponent<DialogProps> = ({
-  title,
-  subText,
-  isModal,
-  visible,
-  choiceGroupProps,
-  textFieldProps,
-  linkProps,
-  progressIndicatorProps,
-  primaryButtonText,
-  secondaryButtonText,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  primaryButtonDisabled,
-  type,
-  showCloseButton,
-  onDismiss,
-}: DialogProps) => {
+export const Dialog: FC = () => {
+  const { visible, dialogProps: props } = useDialog();
+  const {
+    title,
+    subText,
+    isModal,
+    choiceGroupProps,
+    textFieldProps,
+    linkProps,
+    progressIndicatorProps,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    type,
+    showCloseButton,
+    onDismiss,
+  } = props || {};
+
   const dialogProps: IDialogProps = {
     hidden: !visible,
     dialogContentProps: {
@@ -105,7 +121,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         }
       : {};
 
-  return (
+  return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
       {textFieldProps && <TextField {...textFieldProps} />}
@@ -120,5 +136,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
       </DialogFooter>
     </FluentDialog>
+  ) : (
+    <></>
   );
 };
diff --git a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx b/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx
deleted file mode 100644
index 1fca6262d..000000000
--- a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
-import { Tenant } from "../../../Contracts/DataModels";
-
-const createBlankProps = (): DefaultDirectoryDropdownProps => {
-  return {
-    defaultDirectoryId: "",
-    directories: [],
-    onDefaultDirectoryChange: jest.fn(),
-  };
-};
-
-const createBlankDirectory = (): Tenant => {
-  return {
-    countryCode: "",
-    displayName: "",
-    domains: [],
-    id: "",
-    tenantId: "",
-  };
-};
-
-describe("test render", () => {
-  it("renders with no directories", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories but no default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.defaultDirectoryId = "asdfghjklzxcvbnm9876543210";
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and last visit default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.defaultDirectoryId = "lastVisited";
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe("test function", () => {
-  it("on default directory change", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-    props.defaultDirectoryId = "lastVisited";
-
-    const wrapper = mount(<DefaultDirectoryDropdownComponent {...props} />);
-
-    wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
-    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
-    wrapper.find("button.ms-Dropdown-item").at(1).simulate("click");
-    expect(props.onDefaultDirectoryChange).toBeCalled();
-    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
-
-    wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
-    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
-    wrapper.find("button.ms-Dropdown-item").at(0).simulate("click");
-    expect(props.onDefaultDirectoryChange).toBeCalled();
-    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
-  });
-});
diff --git a/src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx b/src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx
deleted file mode 100644
index 19df0c8fa..000000000
--- a/src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as ko from "knockout";
-import * as React from "react";
-import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
-import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-
-export class DirectoryComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(
-    private _dropdownProps: ko.Observable<DefaultDirectoryDropdownProps>,
-    private _listProps: ko.Observable<DirectoryListProps>
-  ) {
-    this._dropdownProps.subscribe(() => this.forceRender());
-    this._listProps.subscribe(() => this.forceRender());
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return (
-      <div>
-        <div className="directoryDropdownContainer">
-          <DefaultDirectoryDropdownComponent {...this._dropdownProps()} />
-        </div>
-        <div className="directoryDivider" />
-        <div className="directoryListContainer">
-          <DirectoryListComponent {...this._listProps()} />
-        </div>
-      </div>
-    );
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}
diff --git a/src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx b/src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx
deleted file mode 100644
index 2ca392ff9..000000000
--- a/src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
-import { Tenant } from "../../../Contracts/DataModels";
-
-const createBlankProps = (): DirectoryListProps => {
-  return {
-    selectedDirectoryId: undefined,
-    directories: [],
-    onNewDirectorySelected: jest.fn(),
-  };
-};
-
-const createBlankDirectory = (): Tenant => {
-  return {
-    countryCode: undefined,
-    displayName: undefined,
-    domains: [],
-    id: undefined,
-    tenantId: undefined,
-  };
-};
-
-describe("test render", () => {
-  it("renders with no directories", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<DirectoryListComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and selected", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.selectedDirectoryId = "asdfghjklzxcvbnm9876543210";
-
-    const wrapper = shallow(<DirectoryListComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with filters", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "9876543210";
-    props.directories = [tenant1, tenant2];
-    props.selectedDirectoryId = "9876543210";
-
-    const wrapper = mount(<DirectoryListComponent {...props} />);
-    wrapper.find("input.ms-TextField-field").simulate("change", { target: { value: "Macro" } });
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe("test function", () => {
-  it("on new directory selected", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    props.directories = [tenant1];
-
-    const wrapper = mount(<DirectoryListComponent {...props} />);
-    wrapper.find("button.directoryListButton").simulate("click");
-    expect(props.onNewDirectorySelected).toBeCalled();
-    expect(props.onNewDirectorySelected).toHaveBeenCalled();
-  });
-});
diff --git a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx b/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
deleted file mode 100644
index 03c4ae9e2..000000000
--- a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
-  DefaultButton,
-  IButtonProps,
-  ITextFieldProps,
-  List,
-  ScrollablePane,
-  Sticky,
-  StickyPositionType,
-  TextField,
-} from "@fluentui/react";
-import * as React from "react";
-import _ from "underscore";
-import { Tenant } from "../../../Contracts/DataModels";
-
-export interface DirectoryListProps {
-  directories: Array<Tenant>;
-  selectedDirectoryId: string;
-  onNewDirectorySelected: (newDirectory: Tenant) => void;
-}
-
-export interface DirectoryListComponentState {
-  filterText: string;
-}
-
-// onRenderCell is not called when selectedDirectoryId changed, so add a selected state to force render
-interface ListTenant extends Tenant {
-  selected?: boolean;
-}
-
-export class DirectoryListComponent extends React.Component<DirectoryListProps, DirectoryListComponentState> {
-  constructor(props: DirectoryListProps) {
-    super(props);
-
-    this.state = {
-      filterText: "",
-    };
-  }
-
-  public render(): JSX.Element {
-    const { directories: originalItems, selectedDirectoryId } = this.props;
-    const { filterText } = this.state;
-    const filteredItems =
-      originalItems && originalItems.length && filterText
-        ? originalItems.filter(
-            (directory) =>
-              directory.displayName &&
-              directory.displayName.toLowerCase().indexOf(filterText && filterText.toLowerCase()) >= 0
-          )
-        : originalItems;
-    const filteredItemsSelected = filteredItems.map((t) => {
-      let tenant: ListTenant = t;
-      tenant.selected = t.tenantId === selectedDirectoryId;
-      return tenant;
-    });
-
-    const textFieldProps: ITextFieldProps = {
-      className: "directoryListFilterTextBox",
-      placeholder: "Filter by directory name",
-      onChange: this._onFilterChanged,
-      ariaLabel: "Directory filter text box",
-    };
-
-    // TODO: add magnify glass to search bar with onRenderSuffix
-    return (
-      <ScrollablePane data-is-scrollable="true">
-        <Sticky stickyPosition={StickyPositionType.Header}>
-          <TextField {...textFieldProps} />
-        </Sticky>
-        <List items={filteredItemsSelected} onRenderCell={this._onRenderCell} />
-      </ScrollablePane>
-    );
-  }
-
-  private _onFilterChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text?: string): void => {
-    this.setState({
-      filterText: text,
-    });
-  };
-
-  private _onRenderCell = (directory: ListTenant): JSX.Element => {
-    const buttonProps: IButtonProps = {
-      disabled: directory.selected || false,
-      className: "directoryListButton",
-      onClick: this._onNewDirectoryClick,
-      styles: {
-        root: {
-          backgroundColor: "transparent",
-          height: "auto",
-          borderBottom: "1px solid #ccc",
-          padding: "1px 0",
-          width: "100%",
-        },
-        rootDisabled: {
-          backgroundColor: "#f1f1f8",
-        },
-        rootHovered: {
-          backgroundColor: "rgba(85,179,255,.1)",
-        },
-        flexContainer: {
-          height: "auto",
-          justifyContent: "flex-start",
-        },
-      },
-    };
-
-    return (
-      <DefaultButton {...buttonProps}>
-        <div className="directoryListItem" data-is-focusable={true}>
-          <div className="directoryListItemName">{directory.displayName}</div>
-          <div className="directoryListItemId">{directory.tenantId}</div>
-        </div>
-      </DefaultButton>
-    );
-  };
-
-  private _onNewDirectoryClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
-    if (!e || !e.currentTarget) {
-      return;
-    }
-    const buttonElement = e.currentTarget;
-    const selectedDirectoryId = buttonElement.getElementsByClassName("directoryListItemId")[0].textContent;
-    const selectedDirectory = _.find(this.props.directories, (d) => d.tenantId === selectedDirectoryId);
-
-    this.props.onNewDirectorySelected(selectedDirectory);
-  };
-}
diff --git a/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap b/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap
deleted file mode 100644
index 31ae98d55..000000000
--- a/src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders with directories and default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="asdfghjklzxcvbnm9876543210"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with directories and last visit default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with directories but no default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with no directories 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-    ]
-  }
-/>
-`;
diff --git a/src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap b/src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
deleted file mode 100644
index 78cf68ad7..000000000
--- a/src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
+++ /dev/null
@@ -1,2016 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders with directories and selected 1`] = `
-<StyledScrollablePaneBase
-  data-is-scrollable="true"
->
-  <Sticky
-    isScrollSynced={true}
-    stickyPosition={1}
-  >
-    <StyledTextFieldBase
-      ariaLabel="Directory filter text box"
-      className="directoryListFilterTextBox"
-      onChange={[Function]}
-      placeholder="Filter by directory name"
-    />
-  </Sticky>
-  <List
-    items={
-      Array [
-        Object {
-          "countryCode": undefined,
-          "displayName": "Macrohard",
-          "domains": Array [],
-          "id": undefined,
-          "selected": true,
-          "tenantId": "asdfghjklzxcvbnm9876543210",
-        },
-        Object {
-          "countryCode": undefined,
-          "displayName": undefined,
-          "domains": Array [],
-          "id": undefined,
-          "selected": false,
-          "tenantId": undefined,
-        },
-      ]
-    }
-    onRenderCell={[Function]}
-    renderedWindowsAhead={2}
-    renderedWindowsBehind={2}
-    startIndex={0}
-  />
-</StyledScrollablePaneBase>
-`;
-
-exports[`test render renders with filters 1`] = `
-<DirectoryListComponent
-  directories={
-    Array [
-      Object {
-        "countryCode": undefined,
-        "displayName": "Macrohard",
-        "domains": Array [],
-        "id": undefined,
-        "selected": true,
-        "tenantId": "9876543210",
-      },
-      Object {
-        "countryCode": undefined,
-        "displayName": undefined,
-        "domains": Array [],
-        "id": undefined,
-        "selected": false,
-        "tenantId": undefined,
-      },
-    ]
-  }
-  onNewDirectorySelected={[MockFunction]}
-  selectedDirectoryId="9876543210"
->
-  <StyledScrollablePaneBase
-    data-is-scrollable="true"
-  >
-    <ScrollablePaneBase
-      data-is-scrollable="true"
-      styles={[Function]}
-      theme={
-        Object {
-          "disableGlobalClassNames": false,
-          "effects": Object {
-            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-            "roundedCorner2": "2px",
-            "roundedCorner4": "4px",
-            "roundedCorner6": "6px",
-          },
-          "fonts": Object {
-            "large": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "18px",
-              "fontWeight": 400,
-            },
-            "medium": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "14px",
-              "fontWeight": 400,
-            },
-            "mediumPlus": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "16px",
-              "fontWeight": 400,
-            },
-            "mega": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "68px",
-              "fontWeight": 600,
-            },
-            "small": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "12px",
-              "fontWeight": 400,
-            },
-            "smallPlus": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "12px",
-              "fontWeight": 400,
-            },
-            "superLarge": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "42px",
-              "fontWeight": 600,
-            },
-            "tiny": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "10px",
-              "fontWeight": 400,
-            },
-            "xLarge": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "20px",
-              "fontWeight": 600,
-            },
-            "xLargePlus": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "24px",
-              "fontWeight": 600,
-            },
-            "xSmall": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "10px",
-              "fontWeight": 400,
-            },
-            "xxLarge": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "28px",
-              "fontWeight": 600,
-            },
-            "xxLargePlus": Object {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-              "fontSize": "32px",
-              "fontWeight": 600,
-            },
-          },
-          "isInverted": false,
-          "palette": Object {
-            "accent": "#0078d4",
-            "black": "#000000",
-            "blackTranslucent40": "rgba(0,0,0,.4)",
-            "blue": "#0078d4",
-            "blueDark": "#002050",
-            "blueLight": "#00bcf2",
-            "blueMid": "#00188f",
-            "green": "#107c10",
-            "greenDark": "#004b1c",
-            "greenLight": "#bad80a",
-            "magenta": "#b4009e",
-            "magentaDark": "#5c005c",
-            "magentaLight": "#e3008c",
-            "neutralDark": "#201f1e",
-            "neutralLight": "#edebe9",
-            "neutralLighter": "#f3f2f1",
-            "neutralLighterAlt": "#faf9f8",
-            "neutralPrimary": "#323130",
-            "neutralPrimaryAlt": "#3b3a39",
-            "neutralQuaternary": "#d2d0ce",
-            "neutralQuaternaryAlt": "#e1dfdd",
-            "neutralSecondary": "#605e5c",
-            "neutralSecondaryAlt": "#8a8886",
-            "neutralTertiary": "#a19f9d",
-            "neutralTertiaryAlt": "#c8c6c4",
-            "orange": "#d83b01",
-            "orangeLight": "#ea4300",
-            "orangeLighter": "#ff8c00",
-            "purple": "#5c2d91",
-            "purpleDark": "#32145a",
-            "purpleLight": "#b4a0ff",
-            "red": "#e81123",
-            "redDark": "#a4262c",
-            "teal": "#008272",
-            "tealDark": "#004b50",
-            "tealLight": "#00b294",
-            "themeDark": "#005a9e",
-            "themeDarkAlt": "#106ebe",
-            "themeDarker": "#004578",
-            "themeLight": "#c7e0f4",
-            "themeLighter": "#deecf9",
-            "themeLighterAlt": "#eff6fc",
-            "themePrimary": "#0078d4",
-            "themeSecondary": "#2b88d8",
-            "themeTertiary": "#71afe5",
-            "white": "#ffffff",
-            "whiteTranslucent40": "rgba(255,255,255,.4)",
-            "yellow": "#ffb900",
-            "yellowDark": "#d29200",
-            "yellowLight": "#fff100",
-          },
-          "rtl": undefined,
-          "semanticColors": Object {
-            "accentButtonBackground": "#0078d4",
-            "accentButtonText": "#ffffff",
-            "actionLink": "#323130",
-            "actionLinkHovered": "#201f1e",
-            "blockingBackground": "#FDE7E9",
-            "blockingIcon": "#FDE7E9",
-            "bodyBackground": "#ffffff",
-            "bodyBackgroundChecked": "#edebe9",
-            "bodyBackgroundHovered": "#f3f2f1",
-            "bodyDivider": "#edebe9",
-            "bodyFrameBackground": "#ffffff",
-            "bodyFrameDivider": "#edebe9",
-            "bodyStandoutBackground": "#faf9f8",
-            "bodySubtext": "#605e5c",
-            "bodyText": "#323130",
-            "bodyTextChecked": "#000000",
-            "buttonBackground": "#ffffff",
-            "buttonBackgroundChecked": "#c8c6c4",
-            "buttonBackgroundCheckedHovered": "#edebe9",
-            "buttonBackgroundDisabled": "#f3f2f1",
-            "buttonBackgroundHovered": "#f3f2f1",
-            "buttonBackgroundPressed": "#edebe9",
-            "buttonBorder": "#8a8886",
-            "buttonBorderDisabled": "#f3f2f1",
-            "buttonText": "#323130",
-            "buttonTextChecked": "#201f1e",
-            "buttonTextCheckedHovered": "#000000",
-            "buttonTextDisabled": "#a19f9d",
-            "buttonTextHovered": "#201f1e",
-            "buttonTextPressed": "#201f1e",
-            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-            "cardStandoutBackground": "#ffffff",
-            "defaultStateBackground": "#faf9f8",
-            "disabledBackground": "#f3f2f1",
-            "disabledBodySubtext": "#c8c6c4",
-            "disabledBodyText": "#a19f9d",
-            "disabledBorder": "#c8c6c4",
-            "disabledSubtext": "#d2d0ce",
-            "disabledText": "#a19f9d",
-            "errorBackground": "#FDE7E9",
-            "errorIcon": "#A80000",
-            "errorText": "#a4262c",
-            "focusBorder": "#605e5c",
-            "infoBackground": "#f3f2f1",
-            "infoIcon": "#605e5c",
-            "inputBackground": "#ffffff",
-            "inputBackgroundChecked": "#0078d4",
-            "inputBackgroundCheckedHovered": "#005a9e",
-            "inputBorder": "#605e5c",
-            "inputBorderHovered": "#323130",
-            "inputFocusBorderAlt": "#0078d4",
-            "inputForegroundChecked": "#ffffff",
-            "inputIcon": "#0078d4",
-            "inputIconDisabled": "#a19f9d",
-            "inputIconHovered": "#005a9e",
-            "inputPlaceholderBackgroundChecked": "#deecf9",
-            "inputPlaceholderText": "#605e5c",
-            "inputText": "#323130",
-            "inputTextHovered": "#201f1e",
-            "link": "#0078d4",
-            "linkHovered": "#004578",
-            "listBackground": "#ffffff",
-            "listHeaderBackgroundHovered": "#f3f2f1",
-            "listHeaderBackgroundPressed": "#edebe9",
-            "listItemBackgroundChecked": "#edebe9",
-            "listItemBackgroundCheckedHovered": "#e1dfdd",
-            "listItemBackgroundHovered": "#f3f2f1",
-            "listText": "#323130",
-            "listTextColor": "#323130",
-            "menuBackground": "#ffffff",
-            "menuDivider": "#c8c6c4",
-            "menuHeader": "#0078d4",
-            "menuIcon": "#0078d4",
-            "menuItemBackgroundChecked": "#edebe9",
-            "menuItemBackgroundHovered": "#f3f2f1",
-            "menuItemBackgroundPressed": "#edebe9",
-            "menuItemText": "#323130",
-            "menuItemTextHovered": "#201f1e",
-            "messageLink": "#005A9E",
-            "messageLinkHovered": "#004578",
-            "messageText": "#323130",
-            "primaryButtonBackground": "#0078d4",
-            "primaryButtonBackgroundDisabled": "#f3f2f1",
-            "primaryButtonBackgroundHovered": "#106ebe",
-            "primaryButtonBackgroundPressed": "#005a9e",
-            "primaryButtonBorder": "transparent",
-            "primaryButtonText": "#ffffff",
-            "primaryButtonTextDisabled": "#d2d0ce",
-            "primaryButtonTextHovered": "#ffffff",
-            "primaryButtonTextPressed": "#ffffff",
-            "severeWarningBackground": "#FED9CC",
-            "severeWarningIcon": "#D83B01",
-            "smallInputBorder": "#605e5c",
-            "successBackground": "#DFF6DD",
-            "successIcon": "#107C10",
-            "successText": "#107C10",
-            "variantBorder": "#edebe9",
-            "variantBorderHovered": "#a19f9d",
-            "warningBackground": "#FFF4CE",
-            "warningHighlight": "#ffb900",
-            "warningIcon": "#797775",
-            "warningText": "#323130",
-          },
-          "spacing": Object {
-            "l1": "20px",
-            "l2": "32px",
-            "m": "16px",
-            "s1": "8px",
-            "s2": "4px",
-          },
-        }
-      }
-    >
-      <div
-        className="ms-ScrollablePane root-53"
-        data-is-scrollable="true"
-      >
-        <div
-          className="stickyAbove-55"
-          style={
-            Object {
-              "height": 0,
-              "left": "0",
-              "right": "0px",
-              "top": "0",
-            }
-          }
-        />
-        <div
-          className="ms-ScrollablePane--contentContainer contentContainer-54"
-          data-is-scrollable={true}
-        >
-          <Sticky
-            isScrollSynced={true}
-            stickyPosition={1}
-          >
-            <div>
-              <div
-                style={
-                  Object {
-                    "pointerEvents": "none",
-                  }
-                }
-              >
-                <div
-                  style={
-                    Object {
-                      "height": 0,
-                      "visibility": "visible",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={Object {}}
-              >
-                <div
-                  style={
-                    Object {
-                      "backgroundColor": "",
-                      "overflow": "",
-                    }
-                  }
-                >
-                  <StyledTextFieldBase
-                    ariaLabel="Directory filter text box"
-                    className="directoryListFilterTextBox"
-                    onChange={[Function]}
-                    placeholder="Filter by directory name"
-                  >
-                    <TextFieldBase
-                      ariaLabel="Directory filter text box"
-                      className="directoryListFilterTextBox"
-                      deferredValidationTime={200}
-                      onChange={[Function]}
-                      placeholder="Filter by directory name"
-                      resizable={true}
-                      styles={[Function]}
-                      theme={
-                        Object {
-                          "disableGlobalClassNames": false,
-                          "effects": Object {
-                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "roundedCorner2": "2px",
-                            "roundedCorner4": "4px",
-                            "roundedCorner6": "6px",
-                          },
-                          "fonts": Object {
-                            "large": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "18px",
-                              "fontWeight": 400,
-                            },
-                            "medium": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "14px",
-                              "fontWeight": 400,
-                            },
-                            "mediumPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "16px",
-                              "fontWeight": 400,
-                            },
-                            "mega": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "68px",
-                              "fontWeight": 600,
-                            },
-                            "small": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "smallPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "superLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "42px",
-                              "fontWeight": 600,
-                            },
-                            "tiny": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "20px",
-                              "fontWeight": 600,
-                            },
-                            "xLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "24px",
-                              "fontWeight": 600,
-                            },
-                            "xSmall": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xxLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "28px",
-                              "fontWeight": 600,
-                            },
-                            "xxLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "32px",
-                              "fontWeight": 600,
-                            },
-                          },
-                          "isInverted": false,
-                          "palette": Object {
-                            "accent": "#0078d4",
-                            "black": "#000000",
-                            "blackTranslucent40": "rgba(0,0,0,.4)",
-                            "blue": "#0078d4",
-                            "blueDark": "#002050",
-                            "blueLight": "#00bcf2",
-                            "blueMid": "#00188f",
-                            "green": "#107c10",
-                            "greenDark": "#004b1c",
-                            "greenLight": "#bad80a",
-                            "magenta": "#b4009e",
-                            "magentaDark": "#5c005c",
-                            "magentaLight": "#e3008c",
-                            "neutralDark": "#201f1e",
-                            "neutralLight": "#edebe9",
-                            "neutralLighter": "#f3f2f1",
-                            "neutralLighterAlt": "#faf9f8",
-                            "neutralPrimary": "#323130",
-                            "neutralPrimaryAlt": "#3b3a39",
-                            "neutralQuaternary": "#d2d0ce",
-                            "neutralQuaternaryAlt": "#e1dfdd",
-                            "neutralSecondary": "#605e5c",
-                            "neutralSecondaryAlt": "#8a8886",
-                            "neutralTertiary": "#a19f9d",
-                            "neutralTertiaryAlt": "#c8c6c4",
-                            "orange": "#d83b01",
-                            "orangeLight": "#ea4300",
-                            "orangeLighter": "#ff8c00",
-                            "purple": "#5c2d91",
-                            "purpleDark": "#32145a",
-                            "purpleLight": "#b4a0ff",
-                            "red": "#e81123",
-                            "redDark": "#a4262c",
-                            "teal": "#008272",
-                            "tealDark": "#004b50",
-                            "tealLight": "#00b294",
-                            "themeDark": "#005a9e",
-                            "themeDarkAlt": "#106ebe",
-                            "themeDarker": "#004578",
-                            "themeLight": "#c7e0f4",
-                            "themeLighter": "#deecf9",
-                            "themeLighterAlt": "#eff6fc",
-                            "themePrimary": "#0078d4",
-                            "themeSecondary": "#2b88d8",
-                            "themeTertiary": "#71afe5",
-                            "white": "#ffffff",
-                            "whiteTranslucent40": "rgba(255,255,255,.4)",
-                            "yellow": "#ffb900",
-                            "yellowDark": "#d29200",
-                            "yellowLight": "#fff100",
-                          },
-                          "rtl": undefined,
-                          "semanticColors": Object {
-                            "accentButtonBackground": "#0078d4",
-                            "accentButtonText": "#ffffff",
-                            "actionLink": "#323130",
-                            "actionLinkHovered": "#201f1e",
-                            "blockingBackground": "#FDE7E9",
-                            "blockingIcon": "#FDE7E9",
-                            "bodyBackground": "#ffffff",
-                            "bodyBackgroundChecked": "#edebe9",
-                            "bodyBackgroundHovered": "#f3f2f1",
-                            "bodyDivider": "#edebe9",
-                            "bodyFrameBackground": "#ffffff",
-                            "bodyFrameDivider": "#edebe9",
-                            "bodyStandoutBackground": "#faf9f8",
-                            "bodySubtext": "#605e5c",
-                            "bodyText": "#323130",
-                            "bodyTextChecked": "#000000",
-                            "buttonBackground": "#ffffff",
-                            "buttonBackgroundChecked": "#c8c6c4",
-                            "buttonBackgroundCheckedHovered": "#edebe9",
-                            "buttonBackgroundDisabled": "#f3f2f1",
-                            "buttonBackgroundHovered": "#f3f2f1",
-                            "buttonBackgroundPressed": "#edebe9",
-                            "buttonBorder": "#8a8886",
-                            "buttonBorderDisabled": "#f3f2f1",
-                            "buttonText": "#323130",
-                            "buttonTextChecked": "#201f1e",
-                            "buttonTextCheckedHovered": "#000000",
-                            "buttonTextDisabled": "#a19f9d",
-                            "buttonTextHovered": "#201f1e",
-                            "buttonTextPressed": "#201f1e",
-                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "cardStandoutBackground": "#ffffff",
-                            "defaultStateBackground": "#faf9f8",
-                            "disabledBackground": "#f3f2f1",
-                            "disabledBodySubtext": "#c8c6c4",
-                            "disabledBodyText": "#a19f9d",
-                            "disabledBorder": "#c8c6c4",
-                            "disabledSubtext": "#d2d0ce",
-                            "disabledText": "#a19f9d",
-                            "errorBackground": "#FDE7E9",
-                            "errorIcon": "#A80000",
-                            "errorText": "#a4262c",
-                            "focusBorder": "#605e5c",
-                            "infoBackground": "#f3f2f1",
-                            "infoIcon": "#605e5c",
-                            "inputBackground": "#ffffff",
-                            "inputBackgroundChecked": "#0078d4",
-                            "inputBackgroundCheckedHovered": "#005a9e",
-                            "inputBorder": "#605e5c",
-                            "inputBorderHovered": "#323130",
-                            "inputFocusBorderAlt": "#0078d4",
-                            "inputForegroundChecked": "#ffffff",
-                            "inputIcon": "#0078d4",
-                            "inputIconDisabled": "#a19f9d",
-                            "inputIconHovered": "#005a9e",
-                            "inputPlaceholderBackgroundChecked": "#deecf9",
-                            "inputPlaceholderText": "#605e5c",
-                            "inputText": "#323130",
-                            "inputTextHovered": "#201f1e",
-                            "link": "#0078d4",
-                            "linkHovered": "#004578",
-                            "listBackground": "#ffffff",
-                            "listHeaderBackgroundHovered": "#f3f2f1",
-                            "listHeaderBackgroundPressed": "#edebe9",
-                            "listItemBackgroundChecked": "#edebe9",
-                            "listItemBackgroundCheckedHovered": "#e1dfdd",
-                            "listItemBackgroundHovered": "#f3f2f1",
-                            "listText": "#323130",
-                            "listTextColor": "#323130",
-                            "menuBackground": "#ffffff",
-                            "menuDivider": "#c8c6c4",
-                            "menuHeader": "#0078d4",
-                            "menuIcon": "#0078d4",
-                            "menuItemBackgroundChecked": "#edebe9",
-                            "menuItemBackgroundHovered": "#f3f2f1",
-                            "menuItemBackgroundPressed": "#edebe9",
-                            "menuItemText": "#323130",
-                            "menuItemTextHovered": "#201f1e",
-                            "messageLink": "#005A9E",
-                            "messageLinkHovered": "#004578",
-                            "messageText": "#323130",
-                            "primaryButtonBackground": "#0078d4",
-                            "primaryButtonBackgroundDisabled": "#f3f2f1",
-                            "primaryButtonBackgroundHovered": "#106ebe",
-                            "primaryButtonBackgroundPressed": "#005a9e",
-                            "primaryButtonBorder": "transparent",
-                            "primaryButtonText": "#ffffff",
-                            "primaryButtonTextDisabled": "#d2d0ce",
-                            "primaryButtonTextHovered": "#ffffff",
-                            "primaryButtonTextPressed": "#ffffff",
-                            "severeWarningBackground": "#FED9CC",
-                            "severeWarningIcon": "#D83B01",
-                            "smallInputBorder": "#605e5c",
-                            "successBackground": "#DFF6DD",
-                            "successIcon": "#107C10",
-                            "successText": "#107C10",
-                            "variantBorder": "#edebe9",
-                            "variantBorderHovered": "#a19f9d",
-                            "warningBackground": "#FFF4CE",
-                            "warningHighlight": "#ffb900",
-                            "warningIcon": "#797775",
-                            "warningText": "#323130",
-                          },
-                          "spacing": Object {
-                            "l1": "20px",
-                            "l2": "32px",
-                            "m": "16px",
-                            "s1": "8px",
-                            "s2": "4px",
-                          },
-                        }
-                      }
-                      validateOnLoad={true}
-                    >
-                      <div
-                        className="ms-TextField directoryListFilterTextBox root-59"
-                      >
-                        <div
-                          className="ms-TextField-wrapper"
-                        >
-                          <div
-                            className="ms-TextField-fieldGroup fieldGroup-60"
-                          >
-                            <input
-                              aria-invalid={false}
-                              aria-label="Directory filter text box"
-                              className="ms-TextField-field field-61"
-                              id="TextField0"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              onInput={[Function]}
-                              placeholder="Filter by directory name"
-                              type="text"
-                              value="Macro"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </TextFieldBase>
-                  </StyledTextFieldBase>
-                </div>
-              </div>
-            </div>
-          </Sticky>
-          <List
-            items={
-              Array [
-                Object {
-                  "countryCode": undefined,
-                  "displayName": "Macrohard",
-                  "domains": Array [],
-                  "id": undefined,
-                  "selected": true,
-                  "tenantId": "9876543210",
-                },
-              ]
-            }
-            onRenderCell={[Function]}
-            renderedWindowsAhead={2}
-            renderedWindowsBehind={2}
-            startIndex={0}
-          >
-            <div
-              className="ms-List"
-              role="list"
-            >
-              <div
-                className="ms-List-surface"
-                role="presentation"
-              >
-                <div
-                  className="ms-List-page"
-                  key="page-0"
-                  role="presentation"
-                  style={Object {}}
-                >
-                  <div
-                    className="ms-List-cell"
-                    data-automationid="ListCell"
-                    data-list-index={0}
-                    key="0"
-                    role="listitem"
-                  >
-                    <CustomizedDefaultButton
-                      className="directoryListButton"
-                      disabled={true}
-                      onClick={[Function]}
-                      styles={
-                        Object {
-                          "flexContainer": Object {
-                            "height": "auto",
-                            "justifyContent": "flex-start",
-                          },
-                          "root": Object {
-                            "backgroundColor": "transparent",
-                            "borderBottom": "1px solid #ccc",
-                            "height": "auto",
-                            "padding": "1px 0",
-                            "width": "100%",
-                          },
-                          "rootDisabled": Object {
-                            "backgroundColor": "#f1f1f8",
-                          },
-                          "rootHovered": Object {
-                            "backgroundColor": "rgba(85,179,255,.1)",
-                          },
-                        }
-                      }
-                    >
-                      <DefaultButton
-                        className="directoryListButton"
-                        disabled={true}
-                        onClick={[Function]}
-                        styles={
-                          Object {
-                            "flexContainer": Object {
-                              "height": "auto",
-                              "justifyContent": "flex-start",
-                            },
-                            "root": Object {
-                              "backgroundColor": "transparent",
-                              "borderBottom": "1px solid #ccc",
-                              "height": "auto",
-                              "padding": "1px 0",
-                              "width": "100%",
-                            },
-                            "rootDisabled": Object {
-                              "backgroundColor": "#f1f1f8",
-                            },
-                            "rootHovered": Object {
-                              "backgroundColor": "rgba(85,179,255,.1)",
-                            },
-                          }
-                        }
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                      >
-                        <BaseButton
-                          baseClassName="ms-Button"
-                          className="directoryListButton"
-                          disabled={true}
-                          onClick={[Function]}
-                          onRenderDescription={[Function]}
-                          split={false}
-                          styles={
-                            Object {
-                              "description": Object {
-                                "display": "block",
-                              },
-                              "flexContainer": Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "display": "flex",
-                                  "flexWrap": "nowrap",
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                },
-                                Object {
-                                  "height": "auto",
-                                  "justifyContent": "flex-start",
-                                },
-                              ],
-                              "icon": Object {
-                                "flexShrink": 0,
-                                "fontSize": "16px",
-                                "height": "16px",
-                                "lineHeight": "16px",
-                                "margin": "0 4px",
-                                "textAlign": "center",
-                              },
-                              "iconDisabled": Object {
-                                "color": "#a19f9d",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                              "label": Array [
-                                Object {
-                                  "display": "block",
-                                  "lineHeight": "100%",
-                                  "margin": "0 4px",
-                                },
-                                Object {
-                                  "fontWeight": 600,
-                                },
-                              ],
-                              "menuIcon": Object {
-                                "flexShrink": 0,
-                                "fontSize": "12px",
-                                "height": "16px",
-                                "lineHeight": "16px",
-                                "margin": "0 4px",
-                                "textAlign": "center",
-                              },
-                              "menuIconDisabled": Object {
-                                "color": "#a19f9d",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                              "root": Array [
-                                Object {
-                                  "outline": "transparent",
-                                  "position": "relative",
-                                  "selectors": Object {
-                                    ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                      "border": "1px solid transparent",
-                                      "bottom": 2,
-                                      "content": "\\"\\"",
-                                      "left": 2,
-                                      "outline": "1px solid #605e5c",
-                                      "position": "absolute",
-                                      "right": 2,
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "bottom": -2,
-                                          "left": -2,
-                                          "outlineColor": "ButtonText",
-                                          "right": -2,
-                                          "top": -2,
-                                        },
-                                      },
-                                      "top": 2,
-                                      "zIndex": 1,
-                                    },
-                                    "::-moz-focus-inner": Object {
-                                      "border": "0",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "14px",
-                                  "fontWeight": 400,
-                                },
-                                Object {
-                                  "border": "1px solid #8a8886",
-                                  "borderRadius": "2px",
-                                  "boxSizing": "border-box",
-                                  "cursor": "pointer",
-                                  "display": "inline-block",
-                                  "padding": "0 16px",
-                                  "selectors": Object {
-                                    ":active > *": Object {
-                                      "left": 0,
-                                      "position": "relative",
-                                      "top": 0,
-                                    },
-                                  },
-                                  "textAlign": "center",
-                                  "textDecoration": "none",
-                                  "userSelect": "none",
-                                },
-                                Object {
-                                  "height": "32px",
-                                  "minWidth": "80px",
-                                },
-                                Object {
-                                  "backgroundColor": "#ffffff",
-                                  "color": "#323130",
-                                },
-                                Object {
-                                  "backgroundColor": "transparent",
-                                  "borderBottom": "1px solid #ccc",
-                                  "height": "auto",
-                                  "padding": "1px 0",
-                                  "width": "100%",
-                                },
-                              ],
-                              "rootChecked": Object {
-                                "backgroundColor": "#edebe9",
-                                "color": "#201f1e",
-                              },
-                              "rootCheckedHovered": Object {
-                                "backgroundColor": "#edebe9",
-                                "color": "#000000",
-                              },
-                              "rootDisabled": Array [
-                                Object {
-                                  "outline": "transparent",
-                                  "position": "relative",
-                                  "selectors": Object {
-                                    ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                      "border": "1px solid transparent",
-                                      "bottom": 2,
-                                      "content": "\\"\\"",
-                                      "left": 2,
-                                      "outline": "1px solid #605e5c",
-                                      "position": "absolute",
-                                      "right": 2,
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "bottom": -2,
-                                          "left": -2,
-                                          "outlineColor": "ButtonText",
-                                          "right": -2,
-                                          "top": -2,
-                                        },
-                                      },
-                                      "top": 2,
-                                      "zIndex": 1,
-                                    },
-                                    "::-moz-focus-inner": Object {
-                                      "border": "0",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "borderColor": "#f3f2f1",
-                                  "color": "#a19f9d",
-                                  "cursor": "default",
-                                  "selectors": Object {
-                                    ":focus": Object {
-                                      "outline": 0,
-                                    },
-                                    ":hover": Object {
-                                      "outline": 0,
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "color": "#a19f9d",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "borderColor": "GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "backgroundColor": "#f1f1f8",
-                                },
-                              ],
-                              "rootExpanded": Object {
-                                "backgroundColor": "#edebe9",
-                                "color": "#201f1e",
-                              },
-                              "rootHovered": Array [
-                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "color": "#201f1e",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "borderColor": "Highlight",
-                                      "color": "Highlight",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "backgroundColor": "rgba(85,179,255,.1)",
-                                },
-                              ],
-                              "rootPressed": Object {
-                                "backgroundColor": "#edebe9",
-                                "color": "#201f1e",
-                              },
-                              "screenReaderText": Object {
-                                "border": 0,
-                                "height": 1,
-                                "margin": -1,
-                                "overflow": "hidden",
-                                "padding": 0,
-                                "position": "absolute",
-                                "width": 1,
-                              },
-                              "splitButtonContainer": Array [
-                                Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "border": "none",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "outline": "transparent",
-                                  "position": "relative",
-                                  "selectors": Object {
-                                    ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                      "border": "1px solid #ffffff",
-                                      "bottom": 3,
-                                      "content": "\\"\\"",
-                                      "left": 3,
-                                      "outline": "1px solid #605e5c",
-                                      "position": "absolute",
-                                      "right": 3,
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "border": "none",
-                                          "bottom": -2,
-                                          "left": -2,
-                                          "right": -2,
-                                          "top": -2,
-                                        },
-                                      },
-                                      "top": 3,
-                                      "zIndex": 1,
-                                    },
-                                    "::-moz-focus-inner": Object {
-                                      "border": "0",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "display": "inline-flex",
-                                  "selectors": Object {
-                                    ".ms-Button--default": Object {
-                                      "borderBottomRightRadius": "0",
-                                      "borderRight": "none",
-                                      "borderTopRightRadius": "0",
-                                    },
-                                    ".ms-Button--primary": Object {
-                                      "border": "none",
-                                      "borderBottomRightRadius": "0",
-                                      "borderTopRightRadius": "0",
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "MsHighContrastAdjust": "none",
-                                          "backgroundColor": "Window",
-                                          "border": "1px solid WindowText",
-                                          "borderRightWidth": "0",
-                                          "color": "WindowText",
-                                          "forcedColorAdjust": "none",
-                                        },
-                                      },
-                                    },
-                                    ".ms-Button--primary + .ms-Button": Object {
-                                      "border": "none",
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "border": "1px solid WindowText",
-                                          "borderLeftWidth": "0",
-                                        },
-                                      },
-                                    },
-                                  },
-                                },
-                              ],
-                              "splitButtonContainerChecked": Object {
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "WindowText",
-                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                              "splitButtonContainerCheckedHovered": Object {
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "WindowText",
-                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                              "splitButtonContainerDisabled": Object {
-                                "border": "none",
-                                "outline": "none",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
-                                    "backgroundColor": "Window",
-                                    "borderColor": "GrayText",
-                                    "color": "GrayText",
-                                    "forcedColorAdjust": "none",
-                                  },
-                                },
-                              },
-                              "splitButtonContainerFocused": Object {
-                                "outline": "none!important",
-                              },
-                              "splitButtonContainerHovered": Object {
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Highlight",
-                                        "color": "Window",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button.is-disabled": Object {
-                                    "color": "#a19f9d",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Window",
-                                        "borderColor": "GrayText",
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                              "splitButtonDivider": Array [
-                                Object {
-                                  "backgroundColor": "#c8c6c4",
-                                  "bottom": 8,
-                                  "position": "absolute",
-                                  "right": 31,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "WindowText",
-                                    },
-                                  },
-                                  "top": 8,
-                                  "width": 1,
-                                },
-                                Object {
-                                  "bottom": 8,
-                                  "position": "absolute",
-                                  "right": 31,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "WindowText",
-                                    },
-                                  },
-                                  "top": 8,
-                                  "width": 1,
-                                },
-                              ],
-                              "splitButtonDividerDisabled": Array [
-                                Object {
-                                  "backgroundColor": "#c8c6c4",
-                                },
-                                Object {
-                                  "bottom": 8,
-                                  "position": "absolute",
-                                  "right": 31,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "GrayText",
-                                    },
-                                  },
-                                  "top": 8,
-                                  "width": 1,
-                                },
-                              ],
-                              "splitButtonFlexContainer": Object {
-                                "alignItems": "center",
-                                "display": "flex",
-                                "flexWrap": "nowrap",
-                                "height": "100%",
-                                "justifyContent": "center",
-                              },
-                              "splitButtonMenuButton": Array [
-                                Object {
-                                  "backgroundColor": "transparent",
-                                  "color": "#ffffff",
-                                  "selectors": Object {
-                                    ":hover": Object {
-                                      "backgroundColor": "#edebe9",
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "color": "Highlight",
-                                        },
-                                      },
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    ".ms-Button-menuIcon": Object {
-                                      "color": "WindowText",
-                                    },
-                                  },
-                                  "border": "1px solid #8a8886",
-                                  "borderBottomRightRadius": "2px",
-                                  "borderLeft": "none",
-                                  "borderRadius": 0,
-                                  "borderTopRightRadius": "2px",
-                                  "boxSizing": "border-box",
-                                  "cursor": "pointer",
-                                  "display": "inline-block",
-                                  "height": "auto",
-                                  "marginBottom": 0,
-                                  "marginLeft": -1,
-                                  "marginRight": 0,
-                                  "marginTop": 0,
-                                  "outline": "transparent",
-                                  "padding": 6,
-                                  "textAlign": "center",
-                                  "textDecoration": "none",
-                                  "userSelect": "none",
-                                  "verticalAlign": "top",
-                                  "width": 32,
-                                },
-                              ],
-                              "splitButtonMenuButtonChecked": Object {
-                                "backgroundColor": "#e1dfdd",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#e1dfdd",
-                                  },
-                                },
-                              },
-                              "splitButtonMenuButtonDisabled": Array [
-                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "selectors": Object {
-                                    ":hover": Object {
-                                      "backgroundColor": "#f3f2f1",
-                                    },
-                                  },
-                                },
-                                Object {
-                                  "border": "none",
-                                  "pointerEvents": "none",
-                                  "selectors": Object {
-                                    ".ms-Button--primary": Object {
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "backgroundColor": "Window",
-                                          "borderColor": "GrayText",
-                                          "color": "GrayText",
-                                        },
-                                      },
-                                    },
-                                    ".ms-Button-menuIcon": Object {
-                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                          "color": "GrayText",
-                                        },
-                                      },
-                                    },
-                                    ":hover": Object {
-                                      "cursor": "default",
-                                    },
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "border": "1px solid GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                              ],
-                              "splitButtonMenuButtonExpanded": Object {
-                                "backgroundColor": "#e1dfdd",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#e1dfdd",
-                                  },
-                                },
-                              },
-                              "splitButtonMenuFocused": Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              "splitButtonMenuIcon": Object {
-                                "color": "#323130",
-                              },
-                              "splitButtonMenuIconDisabled": Object {
-                                "color": "#a19f9d",
-                              },
-                              "textContainer": Object {
-                                "display": "block",
-                                "flexGrow": 1,
-                              },
-                            }
-                          }
-                          theme={
-                            Object {
-                              "disableGlobalClassNames": false,
-                              "effects": Object {
-                                "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "roundedCorner2": "2px",
-                                "roundedCorner4": "4px",
-                                "roundedCorner6": "6px",
-                              },
-                              "fonts": Object {
-                                "large": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "18px",
-                                  "fontWeight": 400,
-                                },
-                                "medium": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "14px",
-                                  "fontWeight": 400,
-                                },
-                                "mediumPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "16px",
-                                  "fontWeight": 400,
-                                },
-                                "mega": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "68px",
-                                  "fontWeight": 600,
-                                },
-                                "small": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "smallPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "superLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "42px",
-                                  "fontWeight": 600,
-                                },
-                                "tiny": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "20px",
-                                  "fontWeight": 600,
-                                },
-                                "xLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "24px",
-                                  "fontWeight": 600,
-                                },
-                                "xSmall": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xxLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "28px",
-                                  "fontWeight": 600,
-                                },
-                                "xxLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "32px",
-                                  "fontWeight": 600,
-                                },
-                              },
-                              "isInverted": false,
-                              "palette": Object {
-                                "accent": "#0078d4",
-                                "black": "#000000",
-                                "blackTranslucent40": "rgba(0,0,0,.4)",
-                                "blue": "#0078d4",
-                                "blueDark": "#002050",
-                                "blueLight": "#00bcf2",
-                                "blueMid": "#00188f",
-                                "green": "#107c10",
-                                "greenDark": "#004b1c",
-                                "greenLight": "#bad80a",
-                                "magenta": "#b4009e",
-                                "magentaDark": "#5c005c",
-                                "magentaLight": "#e3008c",
-                                "neutralDark": "#201f1e",
-                                "neutralLight": "#edebe9",
-                                "neutralLighter": "#f3f2f1",
-                                "neutralLighterAlt": "#faf9f8",
-                                "neutralPrimary": "#323130",
-                                "neutralPrimaryAlt": "#3b3a39",
-                                "neutralQuaternary": "#d2d0ce",
-                                "neutralQuaternaryAlt": "#e1dfdd",
-                                "neutralSecondary": "#605e5c",
-                                "neutralSecondaryAlt": "#8a8886",
-                                "neutralTertiary": "#a19f9d",
-                                "neutralTertiaryAlt": "#c8c6c4",
-                                "orange": "#d83b01",
-                                "orangeLight": "#ea4300",
-                                "orangeLighter": "#ff8c00",
-                                "purple": "#5c2d91",
-                                "purpleDark": "#32145a",
-                                "purpleLight": "#b4a0ff",
-                                "red": "#e81123",
-                                "redDark": "#a4262c",
-                                "teal": "#008272",
-                                "tealDark": "#004b50",
-                                "tealLight": "#00b294",
-                                "themeDark": "#005a9e",
-                                "themeDarkAlt": "#106ebe",
-                                "themeDarker": "#004578",
-                                "themeLight": "#c7e0f4",
-                                "themeLighter": "#deecf9",
-                                "themeLighterAlt": "#eff6fc",
-                                "themePrimary": "#0078d4",
-                                "themeSecondary": "#2b88d8",
-                                "themeTertiary": "#71afe5",
-                                "white": "#ffffff",
-                                "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                "yellow": "#ffb900",
-                                "yellowDark": "#d29200",
-                                "yellowLight": "#fff100",
-                              },
-                              "rtl": undefined,
-                              "semanticColors": Object {
-                                "accentButtonBackground": "#0078d4",
-                                "accentButtonText": "#ffffff",
-                                "actionLink": "#323130",
-                                "actionLinkHovered": "#201f1e",
-                                "blockingBackground": "#FDE7E9",
-                                "blockingIcon": "#FDE7E9",
-                                "bodyBackground": "#ffffff",
-                                "bodyBackgroundChecked": "#edebe9",
-                                "bodyBackgroundHovered": "#f3f2f1",
-                                "bodyDivider": "#edebe9",
-                                "bodyFrameBackground": "#ffffff",
-                                "bodyFrameDivider": "#edebe9",
-                                "bodyStandoutBackground": "#faf9f8",
-                                "bodySubtext": "#605e5c",
-                                "bodyText": "#323130",
-                                "bodyTextChecked": "#000000",
-                                "buttonBackground": "#ffffff",
-                                "buttonBackgroundChecked": "#c8c6c4",
-                                "buttonBackgroundCheckedHovered": "#edebe9",
-                                "buttonBackgroundDisabled": "#f3f2f1",
-                                "buttonBackgroundHovered": "#f3f2f1",
-                                "buttonBackgroundPressed": "#edebe9",
-                                "buttonBorder": "#8a8886",
-                                "buttonBorderDisabled": "#f3f2f1",
-                                "buttonText": "#323130",
-                                "buttonTextChecked": "#201f1e",
-                                "buttonTextCheckedHovered": "#000000",
-                                "buttonTextDisabled": "#a19f9d",
-                                "buttonTextHovered": "#201f1e",
-                                "buttonTextPressed": "#201f1e",
-                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "cardStandoutBackground": "#ffffff",
-                                "defaultStateBackground": "#faf9f8",
-                                "disabledBackground": "#f3f2f1",
-                                "disabledBodySubtext": "#c8c6c4",
-                                "disabledBodyText": "#a19f9d",
-                                "disabledBorder": "#c8c6c4",
-                                "disabledSubtext": "#d2d0ce",
-                                "disabledText": "#a19f9d",
-                                "errorBackground": "#FDE7E9",
-                                "errorIcon": "#A80000",
-                                "errorText": "#a4262c",
-                                "focusBorder": "#605e5c",
-                                "infoBackground": "#f3f2f1",
-                                "infoIcon": "#605e5c",
-                                "inputBackground": "#ffffff",
-                                "inputBackgroundChecked": "#0078d4",
-                                "inputBackgroundCheckedHovered": "#005a9e",
-                                "inputBorder": "#605e5c",
-                                "inputBorderHovered": "#323130",
-                                "inputFocusBorderAlt": "#0078d4",
-                                "inputForegroundChecked": "#ffffff",
-                                "inputIcon": "#0078d4",
-                                "inputIconDisabled": "#a19f9d",
-                                "inputIconHovered": "#005a9e",
-                                "inputPlaceholderBackgroundChecked": "#deecf9",
-                                "inputPlaceholderText": "#605e5c",
-                                "inputText": "#323130",
-                                "inputTextHovered": "#201f1e",
-                                "link": "#0078d4",
-                                "linkHovered": "#004578",
-                                "listBackground": "#ffffff",
-                                "listHeaderBackgroundHovered": "#f3f2f1",
-                                "listHeaderBackgroundPressed": "#edebe9",
-                                "listItemBackgroundChecked": "#edebe9",
-                                "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                "listItemBackgroundHovered": "#f3f2f1",
-                                "listText": "#323130",
-                                "listTextColor": "#323130",
-                                "menuBackground": "#ffffff",
-                                "menuDivider": "#c8c6c4",
-                                "menuHeader": "#0078d4",
-                                "menuIcon": "#0078d4",
-                                "menuItemBackgroundChecked": "#edebe9",
-                                "menuItemBackgroundHovered": "#f3f2f1",
-                                "menuItemBackgroundPressed": "#edebe9",
-                                "menuItemText": "#323130",
-                                "menuItemTextHovered": "#201f1e",
-                                "messageLink": "#005A9E",
-                                "messageLinkHovered": "#004578",
-                                "messageText": "#323130",
-                                "primaryButtonBackground": "#0078d4",
-                                "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                "primaryButtonBackgroundHovered": "#106ebe",
-                                "primaryButtonBackgroundPressed": "#005a9e",
-                                "primaryButtonBorder": "transparent",
-                                "primaryButtonText": "#ffffff",
-                                "primaryButtonTextDisabled": "#d2d0ce",
-                                "primaryButtonTextHovered": "#ffffff",
-                                "primaryButtonTextPressed": "#ffffff",
-                                "severeWarningBackground": "#FED9CC",
-                                "severeWarningIcon": "#D83B01",
-                                "smallInputBorder": "#605e5c",
-                                "successBackground": "#DFF6DD",
-                                "successIcon": "#107C10",
-                                "successText": "#107C10",
-                                "variantBorder": "#edebe9",
-                                "variantBorderHovered": "#a19f9d",
-                                "warningBackground": "#FFF4CE",
-                                "warningHighlight": "#ffb900",
-                                "warningIcon": "#797775",
-                                "warningText": "#323130",
-                              },
-                              "spacing": Object {
-                                "l1": "20px",
-                                "l2": "32px",
-                                "m": "16px",
-                                "s1": "8px",
-                                "s2": "4px",
-                              },
-                            }
-                          }
-                          variantClassName="ms-Button--default"
-                        >
-                          <button
-                            aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-70"
-                            data-is-focusable={false}
-                            disabled={true}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyPress={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseUp={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="ms-Button-flexContainer flexContainer-71"
-                              data-automationid="splitbuttonprimary"
-                            >
-                              <div
-                                className="directoryListItem"
-                                data-is-focusable={true}
-                              >
-                                <div
-                                  className="directoryListItemName"
-                                >
-                                  Macrohard
-                                </div>
-                                <div
-                                  className="directoryListItemId"
-                                >
-                                  9876543210
-                                </div>
-                              </div>
-                            </span>
-                          </button>
-                          <FocusRects />
-                        </BaseButton>
-                      </DefaultButton>
-                    </CustomizedDefaultButton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </List>
-        </div>
-        <div
-          className="stickyBelow-56"
-          style={
-            Object {
-              "bottom": "0px",
-              "height": 0,
-              "left": "0",
-              "right": "0px",
-            }
-          }
-        >
-          <div
-            className="stickyBelowItems-57"
-          />
-        </div>
-      </div>
-    </ScrollablePaneBase>
-  </StyledScrollablePaneBase>
-</DirectoryListComponent>
-`;
-
-exports[`test render renders with no directories 1`] = `
-<StyledScrollablePaneBase
-  data-is-scrollable="true"
->
-  <Sticky
-    isScrollSynced={true}
-    stickyPosition={1}
-  >
-    <StyledTextFieldBase
-      ariaLabel="Directory filter text box"
-      className="directoryListFilterTextBox"
-      onChange={[Function]}
-      placeholder="Filter by directory name"
-    />
-  </Sticky>
-  <List
-    items={Array []}
-    onRenderCell={[Function]}
-    renderedWindowsAhead={2}
-    renderedWindowsBehind={2}
-    startIndex={0}
-  />
-</StyledScrollablePaneBase>
-`;
diff --git a/src/Explorer/Controls/DynamicList/DynamicList.test.ts b/src/Explorer/Controls/DynamicList/DynamicList.test.ts
deleted file mode 100644
index 22400de08..000000000
--- a/src/Explorer/Controls/DynamicList/DynamicList.test.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as ko from "knockout";
-import { DynamicListComponent, DynamicListParams, DynamicListItem } from "./DynamicListComponent";
-
-const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
-
-function buildComponent(buttonOptions: any) {
-  document.body.innerHTML = DynamicListComponent.template as any;
-  const vm = new DynamicListComponent.viewModel(buttonOptions);
-  ko.applyBindings(vm);
-}
-
-describe("Dynamic List Component", () => {
-  const mockPlaceHolder = "Write here";
-  const mockButton = "Add something";
-  const mockValue = "/someText";
-  const mockAriaLabel = "Add ariaLabel";
-  const items: ko.ObservableArray<DynamicListItem> = ko.observableArray<DynamicListItem>();
-
-  function buildListOptions(
-    items: ko.ObservableArray<DynamicListItem>,
-    placeholder?: string,
-    mockButton?: string
-  ): DynamicListParams {
-    return {
-      placeholder: placeholder,
-      listItems: items,
-      buttonText: mockButton,
-      ariaLabel: mockAriaLabel,
-    };
-  }
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display button text", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      expect($(".dynamicListItemAdd").textContent).toContain(mockButton);
-    });
-  });
-
-  describe("Behavior", () => {
-    it("should add items to the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      $(".dynamicListItemAdd").click();
-      expect(items().length).toBe(1);
-      const input = document.getElementsByClassName("dynamicListItem").item(0).children[0];
-      input.setAttribute("value", mockValue);
-      input.dispatchEvent(new Event("change"));
-      input.dispatchEvent(new Event("blur"));
-      expect(items()[0].value()).toBe(mockValue);
-    });
-
-    it("should remove items from the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder);
-      buildComponent(params);
-      $(".dynamicListItemDelete").click();
-      expect(items().length).toBe(0);
-    });
-  });
-});
diff --git a/src/Explorer/Controls/DynamicList/DynamicListComponent.less b/src/Explorer/Controls/DynamicList/DynamicListComponent.less
deleted file mode 100644
index 5a9a12d1b..000000000
--- a/src/Explorer/Controls/DynamicList/DynamicListComponent.less
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.dynamicList {
-    width: 100%;
-
-    .dynamicListContainer {
-        .dynamicListItem {
-            justify-content: space-around;
-            margin-bottom: @MediumSpace;
-
-            input {
-                width: @newCollectionPaneInputWidth;
-                margin: auto;
-                font-size: @mediumFontSize;
-                padding: @SmallSpace @DefaultSpace;
-                color: @BaseDark;
-            }
-
-            .dynamicListItemDelete {
-                padding: @SmallSpace @SmallSpace @DefaultSpace;
-                margin-left: @SmallSpace;
-
-                &:hover {
-                    .hover();
-                }
-
-                &:active {
-                    .active();
-                }
-
-                img {
-                    .dataExplorerIcons();
-                }
-            }
-        }
-    }
-
-    .dynamicListItemNew {
-        margin-top: @LargeSpace;
-
-        .dynamicListItemAdd {
-            padding: @DefaultSpace;
-            cursor: pointer;
-
-            &:hover {
-                .hover();
-            }
-
-            &:active {
-                .active();
-            }
-
-            img {
-                .dataExplorerIcons();
-                margin: 0px @SmallSpace @SmallSpace 0px; 
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/Explorer/Controls/DynamicList/DynamicListComponent.ts b/src/Explorer/Controls/DynamicList/DynamicListComponent.ts
deleted file mode 100644
index 4407700d7..000000000
--- a/src/Explorer/Controls/DynamicList/DynamicListComponent.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Dynamic list:
- *
- * Creates a list of dynamic inputs that can be populated and deleted.
- *
- * How to use in your markup:
- * <dynamic-list params="{ listItems: anObservableArrayOfDynamicListItem, placeholder: 'Text to display in placeholder',  ariaLabel: 'Text for aria-label', buttonText: 'Add item' }">
- * </dynamic-list>
- *
- */
-
-import * as ko from "knockout";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import { KeyCodes } from "../../../Common/Constants";
-import template from "./dynamic-list.html";
-
-/**
- * Parameters for this component
- */
-export interface DynamicListParams {
-  /**
-   * Observable list of items to update
-   */
-  listItems: ko.ObservableArray<DynamicListItem>;
-
-  /**
-   * Placeholder text to use on inputs
-   */
-  placeholder?: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel: string;
-
-  /**
-   * Text for the button to add items
-   */
-  buttonText?: string;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-/**
- * Item in the dynamic list
- */
-export interface DynamicListItem {
-  value: ko.Observable<string>;
-}
-
-export class DynamicListViewModel extends WaitsForTemplateViewModel {
-  public placeholder: string;
-  public ariaLabel: string;
-  public buttonText: string;
-  public newItem: ko.Observable<string>;
-  public isTemplateReady: ko.Observable<boolean>;
-  public listItems: ko.ObservableArray<DynamicListItem>;
-
-  public constructor(options: DynamicListParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: DynamicListParams = options;
-    const paramsPlaceholder: string = params.placeholder;
-    const paramsButtonText: string = params.buttonText;
-    this.placeholder = paramsPlaceholder || "Write a value";
-    this.ariaLabel = "Unique keys";
-    this.buttonText = paramsButtonText || "Add item";
-    this.listItems = params.listItems || ko.observableArray<DynamicListItem>();
-    this.newItem = ko.observable("");
-  }
-
-  public removeItem = (data: any, event: MouseEvent | KeyboardEvent): void => {
-    const context = ko.contextFor(event.target as Node);
-    this.listItems.splice(context.$index(), 1);
-    document.getElementById("addUniqueKeyBtn").focus();
-  };
-
-  public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.removeItem(data, event);
-      (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addItem(): void {
-    this.listItems.push({ value: ko.observable("") });
-    (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-  }
-
-  public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.addItem();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-}
-
-/**
- * Helper class for ko component registration
- */
-export const DynamicListComponent = {
-  viewModel: DynamicListViewModel,
-  template,
-};
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
index 22aa71388..69f01a745 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -6,9 +6,10 @@
  *   typeaheadOverrideOptions: { dynamic:false }
  *
  */
+import "jquery-typeahead";
 import * as React from "react";
-import "./InputTypeahead.less";
 import { KeyCodes } from "../../../Common/Constants";
+import "./InputTypeahead.less";
 
 export interface Item {
   caption: string;
diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx
similarity index 71%
rename from src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx
rename to src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx
index 79a6880a3..e99c0c8c2 100644
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx
@@ -1,12 +1,12 @@
 jest.mock("../../../../Juno/JunoClient");
 import { shallow } from "enzyme";
 import React from "react";
-import { CodeOfConductComponent, CodeOfConductComponentProps } from ".";
 import { HttpStatusCodes } from "../../../../Common/Constants";
 import { JunoClient } from "../../../../Juno/JunoClient";
+import { CodeOfConduct, CodeOfConductProps } from "./CodeOfConduct";
 
-describe("CodeOfConductComponent", () => {
-  let codeOfConductProps: CodeOfConductComponentProps;
+describe("CodeOfConduct", () => {
+  let codeOfConductProps: CodeOfConductProps;
 
   beforeEach(() => {
     const junoClient = new JunoClient();
@@ -21,12 +21,12 @@ describe("CodeOfConductComponent", () => {
   });
 
   it("renders", () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("onAcceptedCodeOfConductCalled", async () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
     expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();
diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx
similarity index 92%
rename from src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx
rename to src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx
index 6d1d78fb2..2bfee23dc 100644
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx
@@ -6,15 +6,15 @@ import { JunoClient } from "../../../../Juno/JunoClient";
 import { Action } from "../../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../../Shared/Telemetry/TelemetryProcessor";
 
-export interface CodeOfConductComponentProps {
+export interface CodeOfConductProps {
   junoClient: JunoClient;
   onAcceptCodeOfConduct: (result: boolean) => void;
 }
 
-export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentProps> = ({
+export const CodeOfConduct: FunctionComponent<CodeOfConductProps> = ({
   junoClient,
   onAcceptCodeOfConduct,
-}: CodeOfConductComponentProps) => {
+}: CodeOfConductProps) => {
   const descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
   const descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
   const descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
@@ -47,7 +47,7 @@ export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentPro
         startKey
       );
 
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+      handleError(error, "CodeOfConduct/acceptCodeOfConduct", "Failed to accept code of conduct");
     }
   };
 
diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/__snapshots__/index.test.tsx.snap b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap
similarity index 96%
rename from src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/__snapshots__/index.test.tsx.snap
rename to src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap
index e080d5797..d90a5bdca 100644
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/__snapshots__/index.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeOfConductComponent renders 1`] = `
+exports[`CodeOfConduct renders 1`] = `
 <Stack
   tokens={
     Object {
diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
deleted file mode 100644
index 9d98bd498..000000000
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import * as React from "react";
-import { JunoClient } from "../../../Juno/JunoClient";
-import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
-import { Stack, Text, Checkbox, PrimaryButton, Link } from "@fluentui/react";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-
-export interface CodeOfConductComponentProps {
-  junoClient: JunoClient;
-  onAcceptCodeOfConduct: (result: boolean) => void;
-}
-
-interface CodeOfConductComponentState {
-  readCodeOfConduct: boolean;
-}
-
-export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
-  private viewCodeOfConductTraced: boolean;
-  private descriptionPara1: string;
-  private descriptionPara2: string;
-  private descriptionPara3: string;
-  private link1: { label: string; url: string };
-
-  constructor(props: CodeOfConductComponentProps) {
-    super(props);
-
-    this.state = {
-      readCodeOfConduct: false,
-    };
-
-    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
-    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
-    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
-    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
-  }
-
-  private async acceptCodeOfConduct(): Promise<void> {
-    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
-
-    try {
-      const response = await this.props.junoClient.acceptCodeOfConduct();
-      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
-        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
-      }
-
-      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
-
-      this.props.onAcceptCodeOfConduct(response.data);
-    } catch (error) {
-      traceFailure(
-        Action.NotebooksGalleryAcceptCodeOfConduct,
-        {
-          error: getErrorMessage(error),
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
-    }
-  }
-
-  private onChangeCheckbox = (): void => {
-    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
-  };
-
-  public render(): JSX.Element {
-    if (!this.viewCodeOfConductTraced) {
-      this.viewCodeOfConductTraced = true;
-      trace(Action.NotebooksGalleryViewCodeOfConduct);
-    }
-
-    return (
-      <Stack tokens={{ childrenGap: 20 }}>
-        <Stack.Item>
-          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Text>{this.descriptionPara2}</Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Text>
-            {this.descriptionPara3}
-            <Link href={this.link1.url} target="_blank">
-              {this.link1.label}
-            </Link>
-          </Text>
-        </Stack.Item>
-
-        <Stack.Item>
-          <Checkbox
-            styles={{
-              label: {
-                margin: 0,
-                padding: "2 0 2 0",
-              },
-              text: {
-                fontSize: 12,
-              },
-            }}
-            label="I have read and accept the code of conduct."
-            onChange={this.onChangeCheckbox}
-          />
-        </Stack.Item>
-
-        <Stack.Item>
-          <PrimaryButton
-            ariaLabel="Continue"
-            title="Continue"
-            onClick={async () => await this.acceptCodeOfConduct()}
-            tabIndex={0}
-            className="genericPaneSubmitBtn"
-            text="Continue"
-            disabled={!this.state.readCodeOfConduct}
-          />
-        </Stack.Item>
-      </Stack>
-    );
-  }
-}
diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
index f1733a141..4dc772481 100644
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -28,9 +28,8 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import Explorer from "../../Explorer";
-import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
-import { CodeOfConductComponent } from "./CodeOfConductComponent";
+import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct";
 import "./GalleryViewerComponent.less";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
 
@@ -68,7 +67,6 @@ interface GalleryViewerComponentState {
   selectedTab: GalleryTab;
   sortBy: SortBy;
   searchText: string;
-  dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
   isFetchingPublishedNotebooks: boolean;
   isFetchingFavouriteNotebooks: boolean;
@@ -119,7 +117,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       selectedTab: props.selectedTab,
       sortBy: props.sortBy,
       searchText: props.searchText,
-      dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
       isFetchingFavouriteNotebooks: true,
       isFetchingPublishedNotebooks: true,
@@ -187,8 +184,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     return (
       <div className="galleryContainer">
         <Pivot {...pivotProps}>{pivotItems}</Pivot>
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }
@@ -372,7 +367,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         {acceptedCodeOfConduct === false && (
           <Overlay isDarkThemed>
             <div className="publicGalleryTabOverlayContent">
-              <CodeOfConductComponent
+              <CodeOfConduct
                 junoClient={this.props.junoClient}
                 onAcceptCodeOfConduct={(result: boolean) => {
                   this.setState({ isCodeOfConductAccepted: result });
diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
index 3539d6840..abbe4770b 100644
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -1,25 +1,25 @@
 /**
  * Wrapper around Notebook Viewer Read only content
  */
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import { SessionStorageUtility } from "../../../Shared/StorageUtility";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import { DialogHost } from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
+import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
-import Explorer from "../../Explorer";
-import { SessionStorageUtility } from "../../../Shared/StorageUtility";
-import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -38,7 +38,6 @@ interface NotebookViewerComponentState {
   content: Notebook;
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
-  dialogProps: DialogProps;
   showProgressBar: boolean;
 }
 
@@ -71,7 +70,6 @@ export class NotebookViewerComponent
       content: undefined,
       galleryItem: props.galleryItem,
       isFavorite: props.isFavorite,
-      dialogProps: undefined,
       showProgressBar: true,
     };
 
@@ -167,8 +165,7 @@ export class NotebookViewerComponent
           hideInputs: this.props.hideInputs,
           hidePrompts: this.props.hidePrompts,
         })}
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
+        <Dialog />
       </div>
     );
   }
@@ -194,7 +191,6 @@ export class NotebookViewerComponent
     };
   }
 
-  // DialogHost
   showOkModalDialog(
     title: string,
     msg: string,
@@ -202,25 +198,21 @@ export class NotebookViewerComponent
     onOk: () => void,
     progressIndicatorProps?: IProgressIndicatorProps
   ): void {
-    this.setState({
-      dialogProps: {
-        isModal: true,
-        visible: true,
-        title,
-        subText: msg,
-        primaryButtonText: okLabel,
-        onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onOk && onOk();
-        },
-        secondaryButtonText: undefined,
-        onSecondaryButtonClick: undefined,
-        progressIndicatorProps,
+    useDialog.getState().openDialog({
+      isModal: true,
+      title,
+      subText: msg,
+      primaryButtonText: okLabel,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onOk && onOk();
       },
+      secondaryButtonText: undefined,
+      onSecondaryButtonClick: undefined,
+      progressIndicatorProps,
     });
   }
 
-  // DialogHost
   showOkCancelModalDialog(
     title: string,
     msg: string,
@@ -233,27 +225,24 @@ export class NotebookViewerComponent
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
   ): void {
-    this.setState({
-      dialogProps: {
-        isModal: true,
-        visible: true,
-        title,
-        subText: msg,
-        primaryButtonText: okLabel,
-        secondaryButtonText: cancelLabel,
-        onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onOk && onOk();
-        },
-        onSecondaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onCancel && onCancel();
-        },
-        progressIndicatorProps,
-        choiceGroupProps,
-        textFieldProps,
-        primaryButtonDisabled,
+    useDialog.getState().openDialog({
+      isModal: true,
+      title,
+      subText: msg,
+      primaryButtonText: okLabel,
+      secondaryButtonText: cancelLabel,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onOk && onOk();
       },
+      onSecondaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onCancel && onCancel();
+      },
+      progressIndicatorProps,
+      choiceGroupProps,
+      textFieldProps,
+      primaryButtonDisabled,
     });
   }
 
diff --git a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.less b/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.less
deleted file mode 100644
index 6156e39fc..000000000
--- a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.less
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../../../../less/Common/Constants.less";
-
-.radioSwitchComponent {
-  cursor: pointer;
-  display: flex;
-
-  &>span:nth-child(n+2) {
-    margin-left: 10px;
-  }
-
-  .caption {
-    color: @BaseDark;
-    padding-left: @SmallSpace;
-    vertical-align: top;
-  }
-}
\ No newline at end of file
diff --git a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx b/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
deleted file mode 100644
index 5a4c38b43..000000000
--- a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Horizontal switch component
- */
-
-import { Icon } from "@fluentui/react";
-import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
-import "./RadioSwitchComponent.less";
-
-export interface Choice {
-  key: string;
-  onSelect: () => void;
-  label: string;
-}
-
-export interface RadioSwitchComponentProps {
-  choices: Choice[];
-  selectedKey: string;
-  onSelectionKeyChange?: (newValue: string) => void;
-}
-
-export class RadioSwitchComponent extends React.Component<RadioSwitchComponentProps> {
-  public render(): JSX.Element {
-    return (
-      <div className="radioSwitchComponent">
-        {this.props.choices.map((choice: Choice) => (
-          <span
-            tabIndex={0}
-            key={choice.key}
-            onClick={() => this.onSelect(choice)}
-            onKeyPress={(event) => this.onKeyPress(event, choice)}
-          >
-            <Icon iconName={this.props.selectedKey === choice.key ? "RadioBtnOn" : "RadioBtnOff"} />
-            <span className="caption">{choice.label}</span>
-          </span>
-        ))}
-      </div>
-    );
-  }
-
-  private onSelect(choice: Choice): void {
-    this.props.onSelectionKeyChange && this.props.onSelectionKeyChange(choice.key);
-    choice.onSelect();
-  }
-
-  private onKeyPress(event: React.KeyboardEvent<HTMLSpanElement>, choice: Choice): void {
-    if (event.key === NormalizedEventKey.Enter || event.key === NormalizedEventKey.Space) {
-      this.onSelect(choice);
-    }
-  }
-}
diff --git a/src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx b/src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
deleted file mode 100644
index f4d593a99..000000000
--- a/src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Generic abstract React component that senses its dimensions.
- * It updates its state and re-renders if dimensions change.
- */
-
-import * as React from "react";
-import * as ResizeSensor from "css-element-queries/src/ResizeSensor";
-
-export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S> {
-  private isSensing: boolean = false;
-  private resizeSensor: any;
-
-  public constructor(props: P) {
-    super(props);
-  }
-
-  protected abstract onDimensionsChanged(width: number, height: number): void;
-  protected abstract getSensorTarget(): HTMLElement;
-
-  public componentDidUpdate(): void {
-    if (this.isSensing) {
-      return;
-    }
-
-    const bar = this.getSensorTarget();
-    if (bar.clientWidth > 0 || bar.clientHeight > 0) {
-      const oldPosition = bar.style.position;
-      // TODO Find a better way to use constructor
-      this.resizeSensor = new (ResizeSensor as any)(bar, () => {
-        this.onDimensionsChanged(bar.clientWidth, bar.clientHeight);
-      });
-      this.isSensing = true;
-
-      // ResizeSensor.js sets position to 'relative' which makes the dropdown menu appear clipped.
-      // Undoing doesn't seem to affect resize sensing functionality.
-      bar.style.position = oldPosition;
-    }
-  }
-
-  public componentWillUnmount(): void {
-    if (!!this.resizeSensor) {
-      this.resizeSensor.detach();
-    }
-  }
-}
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 76f54ee30..32d9c07e6 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -14,7 +14,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.test.tsx
index f179c95e1..ca76e1387 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.test.tsx
@@ -1,12 +1,12 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./IndexingPolicyComponent";
 import * as DataModels from "../../../../Contracts/DataModels";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./IndexingPolicyComponent";
 
 describe("IndexingPolicyComponent", () => {
   const initialIndexingPolicyContent: DataModels.IndexingPolicy = {
     automatic: false,
-    indexingMode: "",
+    indexingMode: "consistent",
     includedPaths: [],
     excludedPaths: [],
   };
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
index b0f8e9e57..4b123c78a 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
@@ -1,8 +1,8 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { renderToString } from "react-dom/server";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
-import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
     ];
 
     test.each(cases)(
-      "",
+      "test Mongo Indexing Policy",
       (
         notification: MongoNotificationMessage,
         indexToDropIsPresent: boolean,
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
index 7fdc5ca94..87ff37d75 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -1,44 +1,44 @@
-import * as React from "react";
 import {
   DetailsList,
   DetailsListLayoutMode,
-  Stack,
-  IconButton,
-  Text,
-  SelectionMode,
   IColumn,
+  IconButton,
   MessageBar,
   MessageBarType,
+  SelectionMode,
+  Separator,
   Spinner,
   SpinnerSize,
-  Separator,
+  Stack,
+  Text,
 } from "@fluentui/react";
+import * as React from "react";
+import { MongoIndex } from "../../../../../Utils/arm/generatedClients/cosmos/types";
+import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
 import {
   addMongoIndexStackProps,
-  customDetailsListStyles,
-  mongoIndexingPolicyDisclaimer,
-  mediumWidthStackStyles,
-  subComponentStackProps,
   createAndAddMongoIndexStackProps,
-  separatorStyles,
+  customDetailsListStyles,
   indexingPolicynUnsavedWarningMessage,
   infoAndToolTipTextStyle,
-  onRenderRow,
+  mediumWidthStackStyles,
   mongoCompoundIndexNotSupportedMessage,
+  mongoIndexingPolicyDisclaimer,
+  onRenderRow,
+  separatorStyles,
+  subComponentStackProps,
 } from "../../SettingsRenderUtils";
-import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
-  MongoIndexTypes,
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
-import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
-import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
+import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
 
 export interface MongoIndexingPolicyComponentProps {
   mongoIndexes: MongoIndex[];
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
index bb4058fec..e73469101 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -202,10 +202,12 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   }
 
   private getFreeTierInfoMessage(): JSX.Element {
+    const freeTierLimits = SharedConstants.FreeTierLimits;
     return (
       <Text>
-        With free tier, you will get the first 400 RU/s and 5 GB of storage in this account for free. To keep your
-        account free, keep the total RU/s across all resources in the account to 400 RU/s.
+        With free tier, you will get the first {freeTierLimits.RU} RU/s and {freeTierLimits.Storage} GB of storage in
+        this account for free. To keep your account free, keep the total RU/s across all resources in the account to{" "}
+        {freeTierLimits.RU} RU/s.
         <Link
           href="https://docs.microsoft.com/en-us/azure/cosmos-db/understand-your-bill#billing-examples-with-free-tier-accounts"
           target="_blank"
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
index 8960df4c1..609d16b2d 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -155,7 +155,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     this.state = {
       spendAckChecked: this.props.spendAckChecked,
       exceedFreeTierThroughput:
-        this.props.isFreeTierAccount && !this.props.isAutoPilotSelected && this.props.throughput > 400,
+        this.props.isFreeTierAccount &&
+        !this.props.isAutoPilotSelected &&
+        this.props.throughput > SharedConstants.FreeTierLimits.RU,
     };
 
     this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
@@ -441,7 +443,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     if (this.overrideWithAutoPilotSettings()) {
       this.props.onMaxAutoPilotThroughputChange(newThroughput);
     } else {
-      this.setState({ exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > 400 });
+      this.setState({
+        exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > SharedConstants.FreeTierLimits.RU,
+      });
       this.props.onThroughputChange(newThroughput);
     }
   };
@@ -581,9 +585,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
           styles={messageBarStyles}
         >
-          {
-            "Billing will apply if you provision more than 400 RU/s of manual throughput, or if the resource scales beyond 400 RU/s with autoscale."
-          }
+          {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
         </MessageBar>
       )}
       {this.props.getThroughputWarningMessage() && (
diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx
index 6deee03b1..a533b6446 100644
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -1,7 +1,7 @@
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as DataModels from "../../../Contracts/DataModels";
 import * as Constants from "../../../Common/Constants";
-import { MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
 export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy;
diff --git a/src/Explorer/Controls/Settings/TestUtils.tsx b/src/Explorer/Controls/Settings/TestUtils.tsx
index 0827f4967..7a01743a0 100644
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -1,7 +1,7 @@
+import ko from "knockout";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
-import ko from "knockout";
 
 export const container = new Explorer();
 
@@ -13,7 +13,7 @@ export const collection = {
   analyticalStorageTtl: ko.observable<number>(undefined),
   indexingPolicy: ko.observable<DataModels.IndexingPolicy>({
     automatic: true,
-    indexingMode: "default",
+    indexingMode: "consistent",
     includedPaths: [],
     excludedPaths: [],
   }),
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index 7a23e0a3a..81ba20a46 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -28,76 +28,11 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_closeModalDialog": [Function],
-                "_closeSynapseLinkModalDialog": [Function],
-                "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
-                "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
-                "addCollectionText": [Function],
-                "arcadiaToken": [Function],
-                "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
-                "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "createTableQuery": [Function],
-                  "dedicateTableThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "cassandraaddcollectionpane",
-                  "isAutoPilotSelected": [Function],
-                  "isExecuting": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isTemplateReady": [Function],
-                  "keyspaceCreateNew": [Function],
-                  "keyspaceHasSharedOffer": [Function],
-                  "keyspaceId": [Function],
-                  "keyspaceIds": [Function],
-                  "keyspaceOffers": Map {},
-                  "keyspaceThroughput": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "requestUnitsUsageCostDedicated": [Function],
-                  "requestUnitsUsageCostShared": [Function],
-                  "ruToolTipText": [Function],
-                  "selectedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "sharedThroughputSpendAck": [Function],
-                  "sharedThroughputSpendAckText": [Function],
-                  "sharedThroughputSpendAckVisible": [Function],
-                  "tableId": [Function],
-                  "throughput": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "userTableQuery": [Function],
-                  "visible": [Function],
-                },
-                "closeDialog": undefined,
                 "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
-                "collectionCreationDefaults": Object {
-                  "storage": "100",
-                  "throughput": Object {
-                    "fixed": 400,
-                    "shared": 400,
-                    "unlimited": 400,
-                    "unlimitedmax": 1000000,
-                    "unlimitedmin": 400,
-                  },
-                },
-                "collectionTitle": [Function],
-                "collectionTreeNodeAltText": [Function],
                 "commandBarComponentAdapter": CommandBarComponentAdapter {
                   "container": [Circular],
                   "isNotebookTabActive": [Function],
@@ -105,808 +40,28 @@ exports[`SettingsComponent renders 1`] = `
                   "tabsButtons": Array [],
                 },
                 "databases": [Function],
-                "deleteCollectionText": [Function],
-                "deleteDatabaseText": [Function],
-                "gitHubClient": GitHubClient {
-                  "errorCallback": [Function],
-                  "ocktokit": OctokitWithDefaults {
-                    "actions": Object {
-                      "addSelectedRepoToOrgSecret": [Function],
-                      "cancelWorkflowRun": [Function],
-                      "createOrUpdateOrgSecret": [Function],
-                      "createOrUpdateRepoSecret": [Function],
-                      "createOrUpdateSecretForRepo": [Function],
-                      "createRegistrationToken": [Function],
-                      "createRegistrationTokenForOrg": [Function],
-                      "createRegistrationTokenForRepo": [Function],
-                      "createRemoveToken": [Function],
-                      "createRemoveTokenForOrg": [Function],
-                      "createRemoveTokenForRepo": [Function],
-                      "deleteArtifact": [Function],
-                      "deleteOrgSecret": [Function],
-                      "deleteRepoSecret": [Function],
-                      "deleteSecretFromRepo": [Function],
-                      "deleteSelfHostedRunnerFromOrg": [Function],
-                      "deleteSelfHostedRunnerFromRepo": [Function],
-                      "deleteWorkflowRunLogs": [Function],
-                      "downloadArtifact": [Function],
-                      "downloadJobLogsForWorkflowRun": [Function],
-                      "downloadWorkflowJobLogs": [Function],
-                      "downloadWorkflowRunLogs": [Function],
-                      "getArtifact": [Function],
-                      "getJobForWorkflowRun": [Function],
-                      "getOrgPublicKey": [Function],
-                      "getOrgSecret": [Function],
-                      "getPublicKey": [Function],
-                      "getRepoPublicKey": [Function],
-                      "getRepoSecret": [Function],
-                      "getSecret": [Function],
-                      "getSelfHostedRunner": [Function],
-                      "getSelfHostedRunnerForOrg": [Function],
-                      "getSelfHostedRunnerForRepo": [Function],
-                      "getWorkflow": [Function],
-                      "getWorkflowJob": [Function],
-                      "getWorkflowRun": [Function],
-                      "getWorkflowRunUsage": [Function],
-                      "getWorkflowUsage": [Function],
-                      "listArtifactsForRepo": [Function],
-                      "listDownloadsForSelfHostedRunnerApplication": [Function],
-                      "listJobsForWorkflowRun": [Function],
-                      "listOrgSecrets": [Function],
-                      "listRepoSecrets": [Function],
-                      "listRepoWorkflowRuns": [Function],
-                      "listRepoWorkflows": [Function],
-                      "listRunnerApplicationsForOrg": [Function],
-                      "listRunnerApplicationsForRepo": [Function],
-                      "listSecretsForRepo": [Function],
-                      "listSelectedReposForOrgSecret": [Function],
-                      "listSelfHostedRunnersForOrg": [Function],
-                      "listSelfHostedRunnersForRepo": [Function],
-                      "listWorkflowJobLogs": [Function],
-                      "listWorkflowRunArtifacts": [Function],
-                      "listWorkflowRunLogs": [Function],
-                      "listWorkflowRuns": [Function],
-                      "listWorkflowRunsForRepo": [Function],
-                      "reRunWorkflow": [Function],
-                      "removeSelectedRepoFromOrgSecret": [Function],
-                      "removeSelfHostedRunner": [Function],
-                      "setSelectedReposForOrgSecret": [Function],
-                    },
-                    "activity": Object {
-                      "checkRepoIsStarredByAuthenticatedUser": [Function],
-                      "checkStarringRepo": [Function],
-                      "deleteRepoSubscription": [Function],
-                      "deleteThreadSubscription": [Function],
-                      "getFeeds": [Function],
-                      "getRepoSubscription": [Function],
-                      "getThread": [Function],
-                      "getThreadSubscription": [Function],
-                      "getThreadSubscriptionForAuthenticatedUser": [Function],
-                      "listEventsForAuthenticatedUser": [Function],
-                      "listEventsForOrg": [Function],
-                      "listEventsForUser": [Function],
-                      "listFeeds": [Function],
-                      "listNotifications": [Function],
-                      "listNotificationsForAuthenticatedUser": [Function],
-                      "listNotificationsForRepo": [Function],
-                      "listOrgEventsForAuthenticatedUser": [Function],
-                      "listPublicEvents": [Function],
-                      "listPublicEventsForOrg": [Function],
-                      "listPublicEventsForRepoNetwork": [Function],
-                      "listPublicEventsForUser": [Function],
-                      "listPublicOrgEvents": [Function],
-                      "listReceivedEventsForUser": [Function],
-                      "listReceivedPublicEventsForUser": [Function],
-                      "listRepoEvents": [Function],
-                      "listRepoNotificationsForAuthenticatedUser": [Function],
-                      "listReposStarredByAuthenticatedUser": [Function],
-                      "listReposStarredByUser": [Function],
-                      "listReposWatchedByUser": [Function],
-                      "listStargazersForRepo": [Function],
-                      "listWatchedReposForAuthenticatedUser": [Function],
-                      "listWatchersForRepo": [Function],
-                      "markAsRead": [Function],
-                      "markNotificationsAsRead": [Function],
-                      "markNotificationsAsReadForRepo": [Function],
-                      "markRepoNotificationsAsRead": [Function],
-                      "markThreadAsRead": [Function],
-                      "setRepoSubscription": [Function],
-                      "setThreadSubscription": [Function],
-                      "starRepo": [Function],
-                      "starRepoForAuthenticatedUser": [Function],
-                      "unstarRepo": [Function],
-                      "unstarRepoForAuthenticatedUser": [Function],
-                    },
-                    "apps": Object {
-                      "addRepoToInstallation": [Function],
-                      "checkAccountIsAssociatedWithAny": [Function],
-                      "checkAccountIsAssociatedWithAnyStubbed": [Function],
-                      "checkToken": [Function],
-                      "createContentAttachment": [Function],
-                      "createFromManifest": [Function],
-                      "createInstallationAccessToken": [Function],
-                      "createInstallationToken": [Function],
-                      "deleteAuthorization": [Function],
-                      "deleteInstallation": [Function],
-                      "deleteToken": [Function],
-                      "getAuthenticated": [Function],
-                      "getBySlug": [Function],
-                      "getInstallation": [Function],
-                      "getOrgInstallation": [Function],
-                      "getRepoInstallation": [Function],
-                      "getSubscriptionPlanForAccount": [Function],
-                      "getSubscriptionPlanForAccountStubbed": [Function],
-                      "getUserInstallation": [Function],
-                      "listAccountsForPlan": [Function],
-                      "listAccountsForPlanStubbed": [Function],
-                      "listAccountsUserOrOrgOnPlan": [Function],
-                      "listAccountsUserOrOrgOnPlanStubbed": [Function],
-                      "listInstallationReposForAuthenticatedUser": [Function],
-                      "listInstallations": [Function],
-                      "listInstallationsForAuthenticatedUser": [Function],
-                      "listMarketplacePurchasesForAuthenticatedUser": [Function],
-                      "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-                      "listPlans": [Function],
-                      "listPlansStubbed": [Function],
-                      "listRepos": [Function],
-                      "listReposAccessibleToInstallation": [Function],
-                      "listSubscriptionsForAuthenticatedUser": [Function],
-                      "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-                      "removeRepoFromInstallation": [Function],
-                      "resetToken": [Function],
-                      "revokeInstallationAccessToken": [Function],
-                      "revokeInstallationToken": [Function],
-                      "suspendInstallation": [Function],
-                      "unsuspendInstallation": [Function],
-                    },
-                    "auth": [Function],
-                    "checks": Object {
-                      "create": [Function],
-                      "createSuite": [Function],
-                      "get": [Function],
-                      "getSuite": [Function],
-                      "listAnnotations": [Function],
-                      "listForRef": [Function],
-                      "listForSuite": [Function],
-                      "listSuitesForRef": [Function],
-                      "rerequestSuite": [Function],
-                      "setSuitesPreferences": [Function],
-                      "update": [Function],
-                    },
-                    "codeScanning": Object {
-                      "getAlert": [Function],
-                      "listAlertsForRepo": [Function],
-                    },
-                    "codesOfConduct": Object {
-                      "getAllCodesOfConduct": [Function],
-                      "getConductCode": [Function],
-                      "getForRepo": [Function],
-                      "listConductCodes": [Function],
-                    },
-                    "emojis": Object {
-                      "get": [Function],
-                    },
-                    "gists": Object {
-                      "checkIsStarred": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "delete": [Function],
-                      "deleteComment": [Function],
-                      "fork": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getRevision": [Function],
-                      "list": [Function],
-                      "listComments": [Function],
-                      "listCommits": [Function],
-                      "listForUser": [Function],
-                      "listForks": [Function],
-                      "listPublic": [Function],
-                      "listPublicForUser": [Function],
-                      "listStarred": [Function],
-                      "star": [Function],
-                      "unstar": [Function],
-                      "update": [Function],
-                      "updateComment": [Function],
-                    },
-                    "git": Object {
-                      "createBlob": [Function],
-                      "createCommit": [Function],
-                      "createRef": [Function],
-                      "createTag": [Function],
-                      "createTree": [Function],
-                      "deleteRef": [Function],
-                      "getBlob": [Function],
-                      "getCommit": [Function],
-                      "getRef": [Function],
-                      "getTag": [Function],
-                      "getTree": [Function],
-                      "listMatchingRefs": [Function],
-                      "updateRef": [Function],
-                    },
-                    "gitignore": Object {
-                      "getAllTemplates": [Function],
-                      "getTemplate": [Function],
-                      "listTemplates": [Function],
-                    },
-                    "graphql": [Function],
-                    "hook": [Function],
-                    "interactions": Object {
-                      "addOrUpdateRestrictionsForOrg": [Function],
-                      "addOrUpdateRestrictionsForRepo": [Function],
-                      "getRestrictionsForOrg": [Function],
-                      "getRestrictionsForRepo": [Function],
-                      "removeRestrictionsForOrg": [Function],
-                      "removeRestrictionsForRepo": [Function],
-                      "setRestrictionsForOrg": [Function],
-                      "setRestrictionsForRepo": [Function],
-                    },
-                    "issues": Object {
-                      "addAssignees": [Function],
-                      "addLabels": [Function],
-                      "checkAssignee": [Function],
-                      "checkUserCanBeAssigned": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "createLabel": [Function],
-                      "createMilestone": [Function],
-                      "deleteComment": [Function],
-                      "deleteLabel": [Function],
-                      "deleteMilestone": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getEvent": [Function],
-                      "getLabel": [Function],
-                      "getMilestone": [Function],
-                      "list": [Function],
-                      "listAssignees": [Function],
-                      "listComments": [Function],
-                      "listCommentsForRepo": [Function],
-                      "listEvents": [Function],
-                      "listEventsForRepo": [Function],
-                      "listEventsForTimeline": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listForRepo": [Function],
-                      "listLabelsForMilestone": [Function],
-                      "listLabelsForRepo": [Function],
-                      "listLabelsOnIssue": [Function],
-                      "listMilestones": [Function],
-                      "listMilestonesForRepo": [Function],
-                      "lock": [Function],
-                      "removeAllLabels": [Function],
-                      "removeAssignees": [Function],
-                      "removeLabel": [Function],
-                      "removeLabels": [Function],
-                      "replaceAllLabels": [Function],
-                      "replaceLabels": [Function],
-                      "setLabels": [Function],
-                      "unlock": [Function],
-                      "update": [Function],
-                      "updateComment": [Function],
-                      "updateLabel": [Function],
-                      "updateMilestone": [Function],
-                    },
-                    "licenses": Object {
-                      "get": [Function],
-                      "getAllCommonlyUsed": [Function],
-                      "getForRepo": [Function],
-                      "listCommonlyUsed": [Function],
-                    },
-                    "log": Object {
-                      "debug": [Function],
-                      "error": [Function],
-                      "info": [Function],
-                      "warn": [Function],
-                    },
-                    "markdown": Object {
-                      "render": [Function],
-                      "renderRaw": [Function],
-                    },
-                    "meta": Object {
-                      "get": [Function],
-                    },
-                    "migrations": Object {
-                      "cancelImport": [Function],
-                      "deleteArchiveForAuthenticatedUser": [Function],
-                      "deleteArchiveForOrg": [Function],
-                      "downloadArchiveForOrg": [Function],
-                      "getArchiveForAuthenticatedUser": [Function],
-                      "getCommitAuthors": [Function],
-                      "getImportProgress": [Function],
-                      "getImportStatus": [Function],
-                      "getLargeFiles": [Function],
-                      "getStatusForAuthenticatedUser": [Function],
-                      "getStatusForOrg": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listReposForOrg": [Function],
-                      "listReposForUser": [Function],
-                      "mapCommitAuthor": [Function],
-                      "setLfsPreference": [Function],
-                      "startForAuthenticatedUser": [Function],
-                      "startForOrg": [Function],
-                      "startImport": [Function],
-                      "unlockRepoForAuthenticatedUser": [Function],
-                      "unlockRepoForOrg": [Function],
-                      "updateImport": [Function],
-                    },
-                    "orgs": Object {
-                      "addOrUpdateMembership": [Function],
-                      "blockUser": [Function],
-                      "checkBlockedUser": [Function],
-                      "checkMembership": [Function],
-                      "checkMembershipForUser": [Function],
-                      "checkPublicMembership": [Function],
-                      "checkPublicMembershipForUser": [Function],
-                      "concealMembership": [Function],
-                      "convertMemberToOutsideCollaborator": [Function],
-                      "createHook": [Function],
-                      "createInvitation": [Function],
-                      "createWebhook": [Function],
-                      "deleteHook": [Function],
-                      "deleteWebhook": [Function],
-                      "get": [Function],
-                      "getHook": [Function],
-                      "getMembership": [Function],
-                      "getMembershipForAuthenticatedUser": [Function],
-                      "getMembershipForUser": [Function],
-                      "getWebhook": [Function],
-                      "list": [Function],
-                      "listAppInstallations": [Function],
-                      "listBlockedUsers": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForUser": [Function],
-                      "listHooks": [Function],
-                      "listInstallations": [Function],
-                      "listInvitationTeams": [Function],
-                      "listMembers": [Function],
-                      "listMemberships": [Function],
-                      "listMembershipsForAuthenticatedUser": [Function],
-                      "listOutsideCollaborators": [Function],
-                      "listPendingInvitations": [Function],
-                      "listPublicMembers": [Function],
-                      "listWebhooks": [Function],
-                      "pingHook": [Function],
-                      "pingWebhook": [Function],
-                      "publicizeMembership": [Function],
-                      "removeMember": [Function],
-                      "removeMembership": [Function],
-                      "removeMembershipForUser": [Function],
-                      "removeOutsideCollaborator": [Function],
-                      "removePublicMembershipForAuthenticatedUser": [Function],
-                      "setMembershipForUser": [Function],
-                      "setPublicMembershipForAuthenticatedUser": [Function],
-                      "unblockUser": [Function],
-                      "update": [Function],
-                      "updateHook": [Function],
-                      "updateMembership": [Function],
-                      "updateMembershipForAuthenticatedUser": [Function],
-                      "updateWebhook": [Function],
-                    },
-                    "paginate": [Function],
-                    "projects": Object {
-                      "addCollaborator": [Function],
-                      "createCard": [Function],
-                      "createColumn": [Function],
-                      "createForAuthenticatedUser": [Function],
-                      "createForOrg": [Function],
-                      "createForRepo": [Function],
-                      "delete": [Function],
-                      "deleteCard": [Function],
-                      "deleteColumn": [Function],
-                      "get": [Function],
-                      "getCard": [Function],
-                      "getColumn": [Function],
-                      "getPermissionForUser": [Function],
-                      "listCards": [Function],
-                      "listCollaborators": [Function],
-                      "listColumns": [Function],
-                      "listForOrg": [Function],
-                      "listForRepo": [Function],
-                      "listForUser": [Function],
-                      "moveCard": [Function],
-                      "moveColumn": [Function],
-                      "removeCollaborator": [Function],
-                      "reviewUserPermissionLevel": [Function],
-                      "update": [Function],
-                      "updateCard": [Function],
-                      "updateColumn": [Function],
-                    },
-                    "pulls": Object {
-                      "checkIfMerged": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "createReplyForReviewComment": [Function],
-                      "createReview": [Function],
-                      "createReviewComment": [Function],
-                      "createReviewCommentReply": [Function],
-                      "createReviewRequest": [Function],
-                      "deleteComment": [Function],
-                      "deletePendingReview": [Function],
-                      "deleteReviewComment": [Function],
-                      "deleteReviewRequest": [Function],
-                      "dismissReview": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getCommentsForReview": [Function],
-                      "getReview": [Function],
-                      "getReviewComment": [Function],
-                      "list": [Function],
-                      "listComments": [Function],
-                      "listCommentsForRepo": [Function],
-                      "listCommentsForReview": [Function],
-                      "listCommits": [Function],
-                      "listFiles": [Function],
-                      "listRequestedReviewers": [Function],
-                      "listReviewComments": [Function],
-                      "listReviewCommentsForRepo": [Function],
-                      "listReviewRequests": [Function],
-                      "listReviews": [Function],
-                      "merge": [Function],
-                      "removeRequestedReviewers": [Function],
-                      "requestReviewers": [Function],
-                      "submitReview": [Function],
-                      "update": [Function],
-                      "updateBranch": [Function],
-                      "updateComment": [Function],
-                      "updateReview": [Function],
-                      "updateReviewComment": [Function],
-                    },
-                    "rateLimit": Object {
-                      "get": [Function],
-                    },
-                    "reactions": Object {
-                      "createForCommitComment": [Function],
-                      "createForIssue": [Function],
-                      "createForIssueComment": [Function],
-                      "createForPullRequestReviewComment": [Function],
-                      "createForTeamDiscussionCommentInOrg": [Function],
-                      "createForTeamDiscussionInOrg": [Function],
-                      "delete": [Function],
-                      "deleteForCommitComment": [Function],
-                      "deleteForIssue": [Function],
-                      "deleteForIssueComment": [Function],
-                      "deleteForPullRequestComment": [Function],
-                      "deleteForTeamDiscussion": [Function],
-                      "deleteForTeamDiscussionComment": [Function],
-                      "deleteLegacy": [Function],
-                      "listForCommitComment": [Function],
-                      "listForIssue": [Function],
-                      "listForIssueComment": [Function],
-                      "listForPullRequestReviewComment": [Function],
-                      "listForTeamDiscussionCommentInOrg": [Function],
-                      "listForTeamDiscussionInOrg": [Function],
-                    },
-                    "repos": Object {
-                      "acceptInvitation": [Function],
-                      "addAppAccessRestrictions": [Function],
-                      "addCollaborator": [Function],
-                      "addDeployKey": [Function],
-                      "addProtectedBranchAdminEnforcement": [Function],
-                      "addProtectedBranchAppRestrictions": [Function],
-                      "addProtectedBranchRequiredSignatures": [Function],
-                      "addProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "addProtectedBranchTeamRestrictions": [Function],
-                      "addProtectedBranchUserRestrictions": [Function],
-                      "addStatusCheckContexts": [Function],
-                      "addTeamAccessRestrictions": [Function],
-                      "addUserAccessRestrictions": [Function],
-                      "checkCollaborator": [Function],
-                      "checkVulnerabilityAlerts": [Function],
-                      "compareCommits": [Function],
-                      "createCommitComment": [Function],
-                      "createCommitSignatureProtection": [Function],
-                      "createCommitStatus": [Function],
-                      "createDeployKey": [Function],
-                      "createDeployment": [Function],
-                      "createDeploymentStatus": [Function],
-                      "createDispatchEvent": [Function],
-                      "createForAuthenticatedUser": [Function],
-                      "createFork": [Function],
-                      "createHook": [Function],
-                      "createInOrg": [Function],
-                      "createOrUpdateFile": [Function],
-                      "createOrUpdateFileContents": [Function],
-                      "createPagesSite": [Function],
-                      "createRelease": [Function],
-                      "createStatus": [Function],
-                      "createUsingTemplate": [Function],
-                      "createWebhook": [Function],
-                      "declineInvitation": [Function],
-                      "delete": [Function],
-                      "deleteAccessRestrictions": [Function],
-                      "deleteAdminBranchProtection": [Function],
-                      "deleteBranchProtection": [Function],
-                      "deleteCommitComment": [Function],
-                      "deleteCommitSignatureProtection": [Function],
-                      "deleteDeployKey": [Function],
-                      "deleteDeployment": [Function],
-                      "deleteDownload": [Function],
-                      "deleteFile": [Function],
-                      "deleteHook": [Function],
-                      "deleteInvitation": [Function],
-                      "deletePagesSite": [Function],
-                      "deletePullRequestReviewProtection": [Function],
-                      "deleteRelease": [Function],
-                      "deleteReleaseAsset": [Function],
-                      "deleteWebhook": [Function],
-                      "disableAutomatedSecurityFixes": [Function],
-                      "disablePagesSite": [Function],
-                      "disableVulnerabilityAlerts": [Function],
-                      "downloadArchive": [Function],
-                      "enableAutomatedSecurityFixes": [Function],
-                      "enablePagesSite": [Function],
-                      "enableVulnerabilityAlerts": [Function],
-                      "get": [Function],
-                      "getAccessRestrictions": [Function],
-                      "getAdminBranchProtection": [Function],
-                      "getAllStatusCheckContexts": [Function],
-                      "getAllTopics": [Function],
-                      "getAppsWithAccessToProtectedBranch": [Function],
-                      "getArchiveLink": [Function],
-                      "getBranch": [Function],
-                      "getBranchProtection": [Function],
-                      "getClones": [Function],
-                      "getCodeFrequencyStats": [Function],
-                      "getCollaboratorPermissionLevel": [Function],
-                      "getCombinedStatusForRef": [Function],
-                      "getCommit": [Function],
-                      "getCommitActivityStats": [Function],
-                      "getCommitComment": [Function],
-                      "getCommitSignatureProtection": [Function],
-                      "getCommunityProfileMetrics": [Function],
-                      "getContent": [Function],
-                      "getContents": [Function],
-                      "getContributorsStats": [Function],
-                      "getDeployKey": [Function],
-                      "getDeployment": [Function],
-                      "getDeploymentStatus": [Function],
-                      "getDownload": [Function],
-                      "getHook": [Function],
-                      "getLatestPagesBuild": [Function],
-                      "getLatestRelease": [Function],
-                      "getPages": [Function],
-                      "getPagesBuild": [Function],
-                      "getParticipationStats": [Function],
-                      "getProtectedBranchAdminEnforcement": [Function],
-                      "getProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "getProtectedBranchRequiredSignatures": [Function],
-                      "getProtectedBranchRequiredStatusChecks": [Function],
-                      "getProtectedBranchRestrictions": [Function],
-                      "getPullRequestReviewProtection": [Function],
-                      "getPunchCardStats": [Function],
-                      "getReadme": [Function],
-                      "getRelease": [Function],
-                      "getReleaseAsset": [Function],
-                      "getReleaseByTag": [Function],
-                      "getStatusChecksProtection": [Function],
-                      "getTeamsWithAccessToProtectedBranch": [Function],
-                      "getTopPaths": [Function],
-                      "getTopReferrers": [Function],
-                      "getUsersWithAccessToProtectedBranch": [Function],
-                      "getViews": [Function],
-                      "getWebhook": [Function],
-                      "list": [Function],
-                      "listAssetsForRelease": [Function],
-                      "listBranches": [Function],
-                      "listBranchesForHeadCommit": [Function],
-                      "listCollaborators": [Function],
-                      "listCommentsForCommit": [Function],
-                      "listCommitComments": [Function],
-                      "listCommitCommentsForRepo": [Function],
-                      "listCommitStatusesForRef": [Function],
-                      "listCommits": [Function],
-                      "listContributors": [Function],
-                      "listDeployKeys": [Function],
-                      "listDeploymentStatuses": [Function],
-                      "listDeployments": [Function],
-                      "listDownloads": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listForUser": [Function],
-                      "listForks": [Function],
-                      "listHooks": [Function],
-                      "listInvitations": [Function],
-                      "listInvitationsForAuthenticatedUser": [Function],
-                      "listLanguages": [Function],
-                      "listPagesBuilds": [Function],
-                      "listProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "listPublic": [Function],
-                      "listPullRequestsAssociatedWithCommit": [Function],
-                      "listReleaseAssets": [Function],
-                      "listReleases": [Function],
-                      "listStatusesForRef": [Function],
-                      "listTags": [Function],
-                      "listTeams": [Function],
-                      "listTopics": [Function],
-                      "listWebhooks": [Function],
-                      "merge": [Function],
-                      "pingHook": [Function],
-                      "pingWebhook": [Function],
-                      "removeAppAccessRestrictions": [Function],
-                      "removeBranchProtection": [Function],
-                      "removeCollaborator": [Function],
-                      "removeDeployKey": [Function],
-                      "removeProtectedBranchAdminEnforcement": [Function],
-                      "removeProtectedBranchAppRestrictions": [Function],
-                      "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "removeProtectedBranchRequiredSignatures": [Function],
-                      "removeProtectedBranchRequiredStatusChecks": [Function],
-                      "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "removeProtectedBranchRestrictions": [Function],
-                      "removeProtectedBranchTeamRestrictions": [Function],
-                      "removeProtectedBranchUserRestrictions": [Function],
-                      "removeStatusCheckContexts": [Function],
-                      "removeStatusCheckProtection": [Function],
-                      "removeTeamAccessRestrictions": [Function],
-                      "removeUserAccessRestrictions": [Function],
-                      "replaceAllTopics": [Function],
-                      "replaceProtectedBranchAppRestrictions": [Function],
-                      "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "replaceProtectedBranchTeamRestrictions": [Function],
-                      "replaceProtectedBranchUserRestrictions": [Function],
-                      "replaceTopics": [Function],
-                      "requestPageBuild": [Function],
-                      "requestPagesBuild": [Function],
-                      "retrieveCommunityProfileMetrics": [Function],
-                      "setAdminBranchProtection": [Function],
-                      "setAppAccessRestrictions": [Function],
-                      "setStatusCheckContexts": [Function],
-                      "setTeamAccessRestrictions": [Function],
-                      "setUserAccessRestrictions": [Function],
-                      "testPushHook": [Function],
-                      "testPushWebhook": [Function],
-                      "transfer": [Function],
-                      "update": [Function],
-                      "updateBranchProtection": [Function],
-                      "updateCommitComment": [Function],
-                      "updateHook": [Function],
-                      "updateInformationAboutPagesSite": [Function],
-                      "updateInvitation": [Function],
-                      "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "updateProtectedBranchRequiredStatusChecks": [Function],
-                      "updatePullRequestReviewProtection": [Function],
-                      "updateRelease": [Function],
-                      "updateReleaseAsset": [Function],
-                      "updateStatusCheckPotection": [Function],
-                      "updateWebhook": [Function],
-                      "uploadReleaseAsset": [Function],
-                    },
-                    "request": [Function],
-                    "search": Object {
-                      "code": [Function],
-                      "commits": [Function],
-                      "issuesAndPullRequests": [Function],
-                      "labels": [Function],
-                      "repos": [Function],
-                      "topics": [Function],
-                      "users": [Function],
-                    },
-                    "teams": Object {
-                      "addOrUpdateMembershipForUserInOrg": [Function],
-                      "addOrUpdateMembershipInOrg": [Function],
-                      "addOrUpdateProjectInOrg": [Function],
-                      "addOrUpdateProjectPermissionsInOrg": [Function],
-                      "addOrUpdateRepoInOrg": [Function],
-                      "addOrUpdateRepoPermissionsInOrg": [Function],
-                      "checkManagesRepoInOrg": [Function],
-                      "checkPermissionsForProjectInOrg": [Function],
-                      "checkPermissionsForRepoInOrg": [Function],
-                      "create": [Function],
-                      "createDiscussionCommentInOrg": [Function],
-                      "createDiscussionInOrg": [Function],
-                      "deleteDiscussionCommentInOrg": [Function],
-                      "deleteDiscussionInOrg": [Function],
-                      "deleteInOrg": [Function],
-                      "getByName": [Function],
-                      "getDiscussionCommentInOrg": [Function],
-                      "getDiscussionInOrg": [Function],
-                      "getMembershipForUserInOrg": [Function],
-                      "getMembershipInOrg": [Function],
-                      "list": [Function],
-                      "listChildInOrg": [Function],
-                      "listDiscussionCommentsInOrg": [Function],
-                      "listDiscussionsInOrg": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listMembersInOrg": [Function],
-                      "listPendingInvitationsInOrg": [Function],
-                      "listProjectsInOrg": [Function],
-                      "listReposInOrg": [Function],
-                      "removeMembershipForUserInOrg": [Function],
-                      "removeMembershipInOrg": [Function],
-                      "removeProjectInOrg": [Function],
-                      "removeRepoInOrg": [Function],
-                      "reviewProjectInOrg": [Function],
-                      "updateDiscussionCommentInOrg": [Function],
-                      "updateDiscussionInOrg": [Function],
-                      "updateInOrg": [Function],
-                    },
-                    "users": Object {
-                      "addEmailForAuthenticated": [Function],
-                      "addEmails": [Function],
-                      "block": [Function],
-                      "checkBlocked": [Function],
-                      "checkFollowing": [Function],
-                      "checkFollowingForUser": [Function],
-                      "checkPersonIsFollowedByAuthenticated": [Function],
-                      "createGpgKey": [Function],
-                      "createGpgKeyForAuthenticated": [Function],
-                      "createPublicKey": [Function],
-                      "createPublicSshKeyForAuthenticated": [Function],
-                      "deleteEmailForAuthenticated": [Function],
-                      "deleteEmails": [Function],
-                      "deleteGpgKey": [Function],
-                      "deleteGpgKeyForAuthenticated": [Function],
-                      "deletePublicKey": [Function],
-                      "deletePublicSshKeyForAuthenticated": [Function],
-                      "follow": [Function],
-                      "getAuthenticated": [Function],
-                      "getByUsername": [Function],
-                      "getContextForUser": [Function],
-                      "getGpgKey": [Function],
-                      "getGpgKeyForAuthenticated": [Function],
-                      "getPublicKey": [Function],
-                      "getPublicSshKeyForAuthenticated": [Function],
-                      "list": [Function],
-                      "listBlocked": [Function],
-                      "listBlockedByAuthenticated": [Function],
-                      "listEmails": [Function],
-                      "listEmailsForAuthenticated": [Function],
-                      "listFollowedByAuthenticated": [Function],
-                      "listFollowersForAuthenticatedUser": [Function],
-                      "listFollowersForUser": [Function],
-                      "listFollowingForAuthenticatedUser": [Function],
-                      "listFollowingForUser": [Function],
-                      "listGpgKeys": [Function],
-                      "listGpgKeysForAuthenticated": [Function],
-                      "listGpgKeysForUser": [Function],
-                      "listPublicEmails": [Function],
-                      "listPublicEmailsForAuthenticated": [Function],
-                      "listPublicKeys": [Function],
-                      "listPublicKeysForUser": [Function],
-                      "listPublicSshKeysForAuthenticated": [Function],
-                      "setPrimaryEmailVisibilityForAuthenticated": [Function],
-                      "togglePrimaryEmailVisibility": [Function],
-                      "unblock": [Function],
-                      "unfollow": [Function],
-                      "updateAuthenticated": [Function],
-                    },
-                  },
-                },
-                "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isHostedDataExplorerEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isPublishNotebookPaneEnabled": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
-                "isSparkEnabled": [Function],
-                "isSparkEnabledForAccount": [Function],
+                "isShellEnabled": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "junoClient": JunoClient {
-                  "cachedPinnedRepos": [Function],
-                },
                 "memoryUsageInfo": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "onGitHubClientError": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "openDialog": undefined,
                 "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "refreshTreeTitle": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -966,76 +121,11 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_closeModalDialog": [Function],
-              "_closeSynapseLinkModalDialog": [Function],
-              "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
-              "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
-              "addCollectionText": [Function],
-              "arcadiaToken": [Function],
-              "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
-              "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "createTableQuery": [Function],
-                "dedicateTableThroughput": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "cassandraaddcollectionpane",
-                "isAutoPilotSelected": [Function],
-                "isExecuting": [Function],
-                "isFreeTierAccount": [Function],
-                "isSharedAutoPilotSelected": [Function],
-                "isTemplateReady": [Function],
-                "keyspaceCreateNew": [Function],
-                "keyspaceHasSharedOffer": [Function],
-                "keyspaceId": [Function],
-                "keyspaceIds": [Function],
-                "keyspaceOffers": Map {},
-                "keyspaceThroughput": [Function],
-                "maxThroughputRU": [Function],
-                "minThroughputRU": [Function],
-                "requestUnitsUsageCostDedicated": [Function],
-                "requestUnitsUsageCostShared": [Function],
-                "ruToolTipText": [Function],
-                "selectedAutoPilotThroughput": [Function],
-                "sharedAutoPilotThroughput": [Function],
-                "sharedThroughputRangeText": [Function],
-                "sharedThroughputSpendAck": [Function],
-                "sharedThroughputSpendAckText": [Function],
-                "sharedThroughputSpendAckVisible": [Function],
-                "tableId": [Function],
-                "throughput": [Function],
-                "throughputRangeText": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "userTableQuery": [Function],
-                "visible": [Function],
-              },
-              "closeDialog": undefined,
               "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
-              "collectionCreationDefaults": Object {
-                "storage": "100",
-                "throughput": Object {
-                  "fixed": 400,
-                  "shared": 400,
-                  "unlimited": 400,
-                  "unlimitedmax": 1000000,
-                  "unlimitedmin": 400,
-                },
-              },
-              "collectionTitle": [Function],
-              "collectionTreeNodeAltText": [Function],
               "commandBarComponentAdapter": CommandBarComponentAdapter {
                 "container": [Circular],
                 "isNotebookTabActive": [Function],
@@ -1043,808 +133,28 @@ exports[`SettingsComponent renders 1`] = `
                 "tabsButtons": Array [],
               },
               "databases": [Function],
-              "deleteCollectionText": [Function],
-              "deleteDatabaseText": [Function],
-              "gitHubClient": GitHubClient {
-                "errorCallback": [Function],
-                "ocktokit": OctokitWithDefaults {
-                  "actions": Object {
-                    "addSelectedRepoToOrgSecret": [Function],
-                    "cancelWorkflowRun": [Function],
-                    "createOrUpdateOrgSecret": [Function],
-                    "createOrUpdateRepoSecret": [Function],
-                    "createOrUpdateSecretForRepo": [Function],
-                    "createRegistrationToken": [Function],
-                    "createRegistrationTokenForOrg": [Function],
-                    "createRegistrationTokenForRepo": [Function],
-                    "createRemoveToken": [Function],
-                    "createRemoveTokenForOrg": [Function],
-                    "createRemoveTokenForRepo": [Function],
-                    "deleteArtifact": [Function],
-                    "deleteOrgSecret": [Function],
-                    "deleteRepoSecret": [Function],
-                    "deleteSecretFromRepo": [Function],
-                    "deleteSelfHostedRunnerFromOrg": [Function],
-                    "deleteSelfHostedRunnerFromRepo": [Function],
-                    "deleteWorkflowRunLogs": [Function],
-                    "downloadArtifact": [Function],
-                    "downloadJobLogsForWorkflowRun": [Function],
-                    "downloadWorkflowJobLogs": [Function],
-                    "downloadWorkflowRunLogs": [Function],
-                    "getArtifact": [Function],
-                    "getJobForWorkflowRun": [Function],
-                    "getOrgPublicKey": [Function],
-                    "getOrgSecret": [Function],
-                    "getPublicKey": [Function],
-                    "getRepoPublicKey": [Function],
-                    "getRepoSecret": [Function],
-                    "getSecret": [Function],
-                    "getSelfHostedRunner": [Function],
-                    "getSelfHostedRunnerForOrg": [Function],
-                    "getSelfHostedRunnerForRepo": [Function],
-                    "getWorkflow": [Function],
-                    "getWorkflowJob": [Function],
-                    "getWorkflowRun": [Function],
-                    "getWorkflowRunUsage": [Function],
-                    "getWorkflowUsage": [Function],
-                    "listArtifactsForRepo": [Function],
-                    "listDownloadsForSelfHostedRunnerApplication": [Function],
-                    "listJobsForWorkflowRun": [Function],
-                    "listOrgSecrets": [Function],
-                    "listRepoSecrets": [Function],
-                    "listRepoWorkflowRuns": [Function],
-                    "listRepoWorkflows": [Function],
-                    "listRunnerApplicationsForOrg": [Function],
-                    "listRunnerApplicationsForRepo": [Function],
-                    "listSecretsForRepo": [Function],
-                    "listSelectedReposForOrgSecret": [Function],
-                    "listSelfHostedRunnersForOrg": [Function],
-                    "listSelfHostedRunnersForRepo": [Function],
-                    "listWorkflowJobLogs": [Function],
-                    "listWorkflowRunArtifacts": [Function],
-                    "listWorkflowRunLogs": [Function],
-                    "listWorkflowRuns": [Function],
-                    "listWorkflowRunsForRepo": [Function],
-                    "reRunWorkflow": [Function],
-                    "removeSelectedRepoFromOrgSecret": [Function],
-                    "removeSelfHostedRunner": [Function],
-                    "setSelectedReposForOrgSecret": [Function],
-                  },
-                  "activity": Object {
-                    "checkRepoIsStarredByAuthenticatedUser": [Function],
-                    "checkStarringRepo": [Function],
-                    "deleteRepoSubscription": [Function],
-                    "deleteThreadSubscription": [Function],
-                    "getFeeds": [Function],
-                    "getRepoSubscription": [Function],
-                    "getThread": [Function],
-                    "getThreadSubscription": [Function],
-                    "getThreadSubscriptionForAuthenticatedUser": [Function],
-                    "listEventsForAuthenticatedUser": [Function],
-                    "listEventsForOrg": [Function],
-                    "listEventsForUser": [Function],
-                    "listFeeds": [Function],
-                    "listNotifications": [Function],
-                    "listNotificationsForAuthenticatedUser": [Function],
-                    "listNotificationsForRepo": [Function],
-                    "listOrgEventsForAuthenticatedUser": [Function],
-                    "listPublicEvents": [Function],
-                    "listPublicEventsForOrg": [Function],
-                    "listPublicEventsForRepoNetwork": [Function],
-                    "listPublicEventsForUser": [Function],
-                    "listPublicOrgEvents": [Function],
-                    "listReceivedEventsForUser": [Function],
-                    "listReceivedPublicEventsForUser": [Function],
-                    "listRepoEvents": [Function],
-                    "listRepoNotificationsForAuthenticatedUser": [Function],
-                    "listReposStarredByAuthenticatedUser": [Function],
-                    "listReposStarredByUser": [Function],
-                    "listReposWatchedByUser": [Function],
-                    "listStargazersForRepo": [Function],
-                    "listWatchedReposForAuthenticatedUser": [Function],
-                    "listWatchersForRepo": [Function],
-                    "markAsRead": [Function],
-                    "markNotificationsAsRead": [Function],
-                    "markNotificationsAsReadForRepo": [Function],
-                    "markRepoNotificationsAsRead": [Function],
-                    "markThreadAsRead": [Function],
-                    "setRepoSubscription": [Function],
-                    "setThreadSubscription": [Function],
-                    "starRepo": [Function],
-                    "starRepoForAuthenticatedUser": [Function],
-                    "unstarRepo": [Function],
-                    "unstarRepoForAuthenticatedUser": [Function],
-                  },
-                  "apps": Object {
-                    "addRepoToInstallation": [Function],
-                    "checkAccountIsAssociatedWithAny": [Function],
-                    "checkAccountIsAssociatedWithAnyStubbed": [Function],
-                    "checkToken": [Function],
-                    "createContentAttachment": [Function],
-                    "createFromManifest": [Function],
-                    "createInstallationAccessToken": [Function],
-                    "createInstallationToken": [Function],
-                    "deleteAuthorization": [Function],
-                    "deleteInstallation": [Function],
-                    "deleteToken": [Function],
-                    "getAuthenticated": [Function],
-                    "getBySlug": [Function],
-                    "getInstallation": [Function],
-                    "getOrgInstallation": [Function],
-                    "getRepoInstallation": [Function],
-                    "getSubscriptionPlanForAccount": [Function],
-                    "getSubscriptionPlanForAccountStubbed": [Function],
-                    "getUserInstallation": [Function],
-                    "listAccountsForPlan": [Function],
-                    "listAccountsForPlanStubbed": [Function],
-                    "listAccountsUserOrOrgOnPlan": [Function],
-                    "listAccountsUserOrOrgOnPlanStubbed": [Function],
-                    "listInstallationReposForAuthenticatedUser": [Function],
-                    "listInstallations": [Function],
-                    "listInstallationsForAuthenticatedUser": [Function],
-                    "listMarketplacePurchasesForAuthenticatedUser": [Function],
-                    "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-                    "listPlans": [Function],
-                    "listPlansStubbed": [Function],
-                    "listRepos": [Function],
-                    "listReposAccessibleToInstallation": [Function],
-                    "listSubscriptionsForAuthenticatedUser": [Function],
-                    "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-                    "removeRepoFromInstallation": [Function],
-                    "resetToken": [Function],
-                    "revokeInstallationAccessToken": [Function],
-                    "revokeInstallationToken": [Function],
-                    "suspendInstallation": [Function],
-                    "unsuspendInstallation": [Function],
-                  },
-                  "auth": [Function],
-                  "checks": Object {
-                    "create": [Function],
-                    "createSuite": [Function],
-                    "get": [Function],
-                    "getSuite": [Function],
-                    "listAnnotations": [Function],
-                    "listForRef": [Function],
-                    "listForSuite": [Function],
-                    "listSuitesForRef": [Function],
-                    "rerequestSuite": [Function],
-                    "setSuitesPreferences": [Function],
-                    "update": [Function],
-                  },
-                  "codeScanning": Object {
-                    "getAlert": [Function],
-                    "listAlertsForRepo": [Function],
-                  },
-                  "codesOfConduct": Object {
-                    "getAllCodesOfConduct": [Function],
-                    "getConductCode": [Function],
-                    "getForRepo": [Function],
-                    "listConductCodes": [Function],
-                  },
-                  "emojis": Object {
-                    "get": [Function],
-                  },
-                  "gists": Object {
-                    "checkIsStarred": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "delete": [Function],
-                    "deleteComment": [Function],
-                    "fork": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getRevision": [Function],
-                    "list": [Function],
-                    "listComments": [Function],
-                    "listCommits": [Function],
-                    "listForUser": [Function],
-                    "listForks": [Function],
-                    "listPublic": [Function],
-                    "listPublicForUser": [Function],
-                    "listStarred": [Function],
-                    "star": [Function],
-                    "unstar": [Function],
-                    "update": [Function],
-                    "updateComment": [Function],
-                  },
-                  "git": Object {
-                    "createBlob": [Function],
-                    "createCommit": [Function],
-                    "createRef": [Function],
-                    "createTag": [Function],
-                    "createTree": [Function],
-                    "deleteRef": [Function],
-                    "getBlob": [Function],
-                    "getCommit": [Function],
-                    "getRef": [Function],
-                    "getTag": [Function],
-                    "getTree": [Function],
-                    "listMatchingRefs": [Function],
-                    "updateRef": [Function],
-                  },
-                  "gitignore": Object {
-                    "getAllTemplates": [Function],
-                    "getTemplate": [Function],
-                    "listTemplates": [Function],
-                  },
-                  "graphql": [Function],
-                  "hook": [Function],
-                  "interactions": Object {
-                    "addOrUpdateRestrictionsForOrg": [Function],
-                    "addOrUpdateRestrictionsForRepo": [Function],
-                    "getRestrictionsForOrg": [Function],
-                    "getRestrictionsForRepo": [Function],
-                    "removeRestrictionsForOrg": [Function],
-                    "removeRestrictionsForRepo": [Function],
-                    "setRestrictionsForOrg": [Function],
-                    "setRestrictionsForRepo": [Function],
-                  },
-                  "issues": Object {
-                    "addAssignees": [Function],
-                    "addLabels": [Function],
-                    "checkAssignee": [Function],
-                    "checkUserCanBeAssigned": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "createLabel": [Function],
-                    "createMilestone": [Function],
-                    "deleteComment": [Function],
-                    "deleteLabel": [Function],
-                    "deleteMilestone": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getEvent": [Function],
-                    "getLabel": [Function],
-                    "getMilestone": [Function],
-                    "list": [Function],
-                    "listAssignees": [Function],
-                    "listComments": [Function],
-                    "listCommentsForRepo": [Function],
-                    "listEvents": [Function],
-                    "listEventsForRepo": [Function],
-                    "listEventsForTimeline": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listForRepo": [Function],
-                    "listLabelsForMilestone": [Function],
-                    "listLabelsForRepo": [Function],
-                    "listLabelsOnIssue": [Function],
-                    "listMilestones": [Function],
-                    "listMilestonesForRepo": [Function],
-                    "lock": [Function],
-                    "removeAllLabels": [Function],
-                    "removeAssignees": [Function],
-                    "removeLabel": [Function],
-                    "removeLabels": [Function],
-                    "replaceAllLabels": [Function],
-                    "replaceLabels": [Function],
-                    "setLabels": [Function],
-                    "unlock": [Function],
-                    "update": [Function],
-                    "updateComment": [Function],
-                    "updateLabel": [Function],
-                    "updateMilestone": [Function],
-                  },
-                  "licenses": Object {
-                    "get": [Function],
-                    "getAllCommonlyUsed": [Function],
-                    "getForRepo": [Function],
-                    "listCommonlyUsed": [Function],
-                  },
-                  "log": Object {
-                    "debug": [Function],
-                    "error": [Function],
-                    "info": [Function],
-                    "warn": [Function],
-                  },
-                  "markdown": Object {
-                    "render": [Function],
-                    "renderRaw": [Function],
-                  },
-                  "meta": Object {
-                    "get": [Function],
-                  },
-                  "migrations": Object {
-                    "cancelImport": [Function],
-                    "deleteArchiveForAuthenticatedUser": [Function],
-                    "deleteArchiveForOrg": [Function],
-                    "downloadArchiveForOrg": [Function],
-                    "getArchiveForAuthenticatedUser": [Function],
-                    "getCommitAuthors": [Function],
-                    "getImportProgress": [Function],
-                    "getImportStatus": [Function],
-                    "getLargeFiles": [Function],
-                    "getStatusForAuthenticatedUser": [Function],
-                    "getStatusForOrg": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listReposForOrg": [Function],
-                    "listReposForUser": [Function],
-                    "mapCommitAuthor": [Function],
-                    "setLfsPreference": [Function],
-                    "startForAuthenticatedUser": [Function],
-                    "startForOrg": [Function],
-                    "startImport": [Function],
-                    "unlockRepoForAuthenticatedUser": [Function],
-                    "unlockRepoForOrg": [Function],
-                    "updateImport": [Function],
-                  },
-                  "orgs": Object {
-                    "addOrUpdateMembership": [Function],
-                    "blockUser": [Function],
-                    "checkBlockedUser": [Function],
-                    "checkMembership": [Function],
-                    "checkMembershipForUser": [Function],
-                    "checkPublicMembership": [Function],
-                    "checkPublicMembershipForUser": [Function],
-                    "concealMembership": [Function],
-                    "convertMemberToOutsideCollaborator": [Function],
-                    "createHook": [Function],
-                    "createInvitation": [Function],
-                    "createWebhook": [Function],
-                    "deleteHook": [Function],
-                    "deleteWebhook": [Function],
-                    "get": [Function],
-                    "getHook": [Function],
-                    "getMembership": [Function],
-                    "getMembershipForAuthenticatedUser": [Function],
-                    "getMembershipForUser": [Function],
-                    "getWebhook": [Function],
-                    "list": [Function],
-                    "listAppInstallations": [Function],
-                    "listBlockedUsers": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForUser": [Function],
-                    "listHooks": [Function],
-                    "listInstallations": [Function],
-                    "listInvitationTeams": [Function],
-                    "listMembers": [Function],
-                    "listMemberships": [Function],
-                    "listMembershipsForAuthenticatedUser": [Function],
-                    "listOutsideCollaborators": [Function],
-                    "listPendingInvitations": [Function],
-                    "listPublicMembers": [Function],
-                    "listWebhooks": [Function],
-                    "pingHook": [Function],
-                    "pingWebhook": [Function],
-                    "publicizeMembership": [Function],
-                    "removeMember": [Function],
-                    "removeMembership": [Function],
-                    "removeMembershipForUser": [Function],
-                    "removeOutsideCollaborator": [Function],
-                    "removePublicMembershipForAuthenticatedUser": [Function],
-                    "setMembershipForUser": [Function],
-                    "setPublicMembershipForAuthenticatedUser": [Function],
-                    "unblockUser": [Function],
-                    "update": [Function],
-                    "updateHook": [Function],
-                    "updateMembership": [Function],
-                    "updateMembershipForAuthenticatedUser": [Function],
-                    "updateWebhook": [Function],
-                  },
-                  "paginate": [Function],
-                  "projects": Object {
-                    "addCollaborator": [Function],
-                    "createCard": [Function],
-                    "createColumn": [Function],
-                    "createForAuthenticatedUser": [Function],
-                    "createForOrg": [Function],
-                    "createForRepo": [Function],
-                    "delete": [Function],
-                    "deleteCard": [Function],
-                    "deleteColumn": [Function],
-                    "get": [Function],
-                    "getCard": [Function],
-                    "getColumn": [Function],
-                    "getPermissionForUser": [Function],
-                    "listCards": [Function],
-                    "listCollaborators": [Function],
-                    "listColumns": [Function],
-                    "listForOrg": [Function],
-                    "listForRepo": [Function],
-                    "listForUser": [Function],
-                    "moveCard": [Function],
-                    "moveColumn": [Function],
-                    "removeCollaborator": [Function],
-                    "reviewUserPermissionLevel": [Function],
-                    "update": [Function],
-                    "updateCard": [Function],
-                    "updateColumn": [Function],
-                  },
-                  "pulls": Object {
-                    "checkIfMerged": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "createReplyForReviewComment": [Function],
-                    "createReview": [Function],
-                    "createReviewComment": [Function],
-                    "createReviewCommentReply": [Function],
-                    "createReviewRequest": [Function],
-                    "deleteComment": [Function],
-                    "deletePendingReview": [Function],
-                    "deleteReviewComment": [Function],
-                    "deleteReviewRequest": [Function],
-                    "dismissReview": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getCommentsForReview": [Function],
-                    "getReview": [Function],
-                    "getReviewComment": [Function],
-                    "list": [Function],
-                    "listComments": [Function],
-                    "listCommentsForRepo": [Function],
-                    "listCommentsForReview": [Function],
-                    "listCommits": [Function],
-                    "listFiles": [Function],
-                    "listRequestedReviewers": [Function],
-                    "listReviewComments": [Function],
-                    "listReviewCommentsForRepo": [Function],
-                    "listReviewRequests": [Function],
-                    "listReviews": [Function],
-                    "merge": [Function],
-                    "removeRequestedReviewers": [Function],
-                    "requestReviewers": [Function],
-                    "submitReview": [Function],
-                    "update": [Function],
-                    "updateBranch": [Function],
-                    "updateComment": [Function],
-                    "updateReview": [Function],
-                    "updateReviewComment": [Function],
-                  },
-                  "rateLimit": Object {
-                    "get": [Function],
-                  },
-                  "reactions": Object {
-                    "createForCommitComment": [Function],
-                    "createForIssue": [Function],
-                    "createForIssueComment": [Function],
-                    "createForPullRequestReviewComment": [Function],
-                    "createForTeamDiscussionCommentInOrg": [Function],
-                    "createForTeamDiscussionInOrg": [Function],
-                    "delete": [Function],
-                    "deleteForCommitComment": [Function],
-                    "deleteForIssue": [Function],
-                    "deleteForIssueComment": [Function],
-                    "deleteForPullRequestComment": [Function],
-                    "deleteForTeamDiscussion": [Function],
-                    "deleteForTeamDiscussionComment": [Function],
-                    "deleteLegacy": [Function],
-                    "listForCommitComment": [Function],
-                    "listForIssue": [Function],
-                    "listForIssueComment": [Function],
-                    "listForPullRequestReviewComment": [Function],
-                    "listForTeamDiscussionCommentInOrg": [Function],
-                    "listForTeamDiscussionInOrg": [Function],
-                  },
-                  "repos": Object {
-                    "acceptInvitation": [Function],
-                    "addAppAccessRestrictions": [Function],
-                    "addCollaborator": [Function],
-                    "addDeployKey": [Function],
-                    "addProtectedBranchAdminEnforcement": [Function],
-                    "addProtectedBranchAppRestrictions": [Function],
-                    "addProtectedBranchRequiredSignatures": [Function],
-                    "addProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "addProtectedBranchTeamRestrictions": [Function],
-                    "addProtectedBranchUserRestrictions": [Function],
-                    "addStatusCheckContexts": [Function],
-                    "addTeamAccessRestrictions": [Function],
-                    "addUserAccessRestrictions": [Function],
-                    "checkCollaborator": [Function],
-                    "checkVulnerabilityAlerts": [Function],
-                    "compareCommits": [Function],
-                    "createCommitComment": [Function],
-                    "createCommitSignatureProtection": [Function],
-                    "createCommitStatus": [Function],
-                    "createDeployKey": [Function],
-                    "createDeployment": [Function],
-                    "createDeploymentStatus": [Function],
-                    "createDispatchEvent": [Function],
-                    "createForAuthenticatedUser": [Function],
-                    "createFork": [Function],
-                    "createHook": [Function],
-                    "createInOrg": [Function],
-                    "createOrUpdateFile": [Function],
-                    "createOrUpdateFileContents": [Function],
-                    "createPagesSite": [Function],
-                    "createRelease": [Function],
-                    "createStatus": [Function],
-                    "createUsingTemplate": [Function],
-                    "createWebhook": [Function],
-                    "declineInvitation": [Function],
-                    "delete": [Function],
-                    "deleteAccessRestrictions": [Function],
-                    "deleteAdminBranchProtection": [Function],
-                    "deleteBranchProtection": [Function],
-                    "deleteCommitComment": [Function],
-                    "deleteCommitSignatureProtection": [Function],
-                    "deleteDeployKey": [Function],
-                    "deleteDeployment": [Function],
-                    "deleteDownload": [Function],
-                    "deleteFile": [Function],
-                    "deleteHook": [Function],
-                    "deleteInvitation": [Function],
-                    "deletePagesSite": [Function],
-                    "deletePullRequestReviewProtection": [Function],
-                    "deleteRelease": [Function],
-                    "deleteReleaseAsset": [Function],
-                    "deleteWebhook": [Function],
-                    "disableAutomatedSecurityFixes": [Function],
-                    "disablePagesSite": [Function],
-                    "disableVulnerabilityAlerts": [Function],
-                    "downloadArchive": [Function],
-                    "enableAutomatedSecurityFixes": [Function],
-                    "enablePagesSite": [Function],
-                    "enableVulnerabilityAlerts": [Function],
-                    "get": [Function],
-                    "getAccessRestrictions": [Function],
-                    "getAdminBranchProtection": [Function],
-                    "getAllStatusCheckContexts": [Function],
-                    "getAllTopics": [Function],
-                    "getAppsWithAccessToProtectedBranch": [Function],
-                    "getArchiveLink": [Function],
-                    "getBranch": [Function],
-                    "getBranchProtection": [Function],
-                    "getClones": [Function],
-                    "getCodeFrequencyStats": [Function],
-                    "getCollaboratorPermissionLevel": [Function],
-                    "getCombinedStatusForRef": [Function],
-                    "getCommit": [Function],
-                    "getCommitActivityStats": [Function],
-                    "getCommitComment": [Function],
-                    "getCommitSignatureProtection": [Function],
-                    "getCommunityProfileMetrics": [Function],
-                    "getContent": [Function],
-                    "getContents": [Function],
-                    "getContributorsStats": [Function],
-                    "getDeployKey": [Function],
-                    "getDeployment": [Function],
-                    "getDeploymentStatus": [Function],
-                    "getDownload": [Function],
-                    "getHook": [Function],
-                    "getLatestPagesBuild": [Function],
-                    "getLatestRelease": [Function],
-                    "getPages": [Function],
-                    "getPagesBuild": [Function],
-                    "getParticipationStats": [Function],
-                    "getProtectedBranchAdminEnforcement": [Function],
-                    "getProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "getProtectedBranchRequiredSignatures": [Function],
-                    "getProtectedBranchRequiredStatusChecks": [Function],
-                    "getProtectedBranchRestrictions": [Function],
-                    "getPullRequestReviewProtection": [Function],
-                    "getPunchCardStats": [Function],
-                    "getReadme": [Function],
-                    "getRelease": [Function],
-                    "getReleaseAsset": [Function],
-                    "getReleaseByTag": [Function],
-                    "getStatusChecksProtection": [Function],
-                    "getTeamsWithAccessToProtectedBranch": [Function],
-                    "getTopPaths": [Function],
-                    "getTopReferrers": [Function],
-                    "getUsersWithAccessToProtectedBranch": [Function],
-                    "getViews": [Function],
-                    "getWebhook": [Function],
-                    "list": [Function],
-                    "listAssetsForRelease": [Function],
-                    "listBranches": [Function],
-                    "listBranchesForHeadCommit": [Function],
-                    "listCollaborators": [Function],
-                    "listCommentsForCommit": [Function],
-                    "listCommitComments": [Function],
-                    "listCommitCommentsForRepo": [Function],
-                    "listCommitStatusesForRef": [Function],
-                    "listCommits": [Function],
-                    "listContributors": [Function],
-                    "listDeployKeys": [Function],
-                    "listDeploymentStatuses": [Function],
-                    "listDeployments": [Function],
-                    "listDownloads": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listForUser": [Function],
-                    "listForks": [Function],
-                    "listHooks": [Function],
-                    "listInvitations": [Function],
-                    "listInvitationsForAuthenticatedUser": [Function],
-                    "listLanguages": [Function],
-                    "listPagesBuilds": [Function],
-                    "listProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "listPublic": [Function],
-                    "listPullRequestsAssociatedWithCommit": [Function],
-                    "listReleaseAssets": [Function],
-                    "listReleases": [Function],
-                    "listStatusesForRef": [Function],
-                    "listTags": [Function],
-                    "listTeams": [Function],
-                    "listTopics": [Function],
-                    "listWebhooks": [Function],
-                    "merge": [Function],
-                    "pingHook": [Function],
-                    "pingWebhook": [Function],
-                    "removeAppAccessRestrictions": [Function],
-                    "removeBranchProtection": [Function],
-                    "removeCollaborator": [Function],
-                    "removeDeployKey": [Function],
-                    "removeProtectedBranchAdminEnforcement": [Function],
-                    "removeProtectedBranchAppRestrictions": [Function],
-                    "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "removeProtectedBranchRequiredSignatures": [Function],
-                    "removeProtectedBranchRequiredStatusChecks": [Function],
-                    "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "removeProtectedBranchRestrictions": [Function],
-                    "removeProtectedBranchTeamRestrictions": [Function],
-                    "removeProtectedBranchUserRestrictions": [Function],
-                    "removeStatusCheckContexts": [Function],
-                    "removeStatusCheckProtection": [Function],
-                    "removeTeamAccessRestrictions": [Function],
-                    "removeUserAccessRestrictions": [Function],
-                    "replaceAllTopics": [Function],
-                    "replaceProtectedBranchAppRestrictions": [Function],
-                    "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "replaceProtectedBranchTeamRestrictions": [Function],
-                    "replaceProtectedBranchUserRestrictions": [Function],
-                    "replaceTopics": [Function],
-                    "requestPageBuild": [Function],
-                    "requestPagesBuild": [Function],
-                    "retrieveCommunityProfileMetrics": [Function],
-                    "setAdminBranchProtection": [Function],
-                    "setAppAccessRestrictions": [Function],
-                    "setStatusCheckContexts": [Function],
-                    "setTeamAccessRestrictions": [Function],
-                    "setUserAccessRestrictions": [Function],
-                    "testPushHook": [Function],
-                    "testPushWebhook": [Function],
-                    "transfer": [Function],
-                    "update": [Function],
-                    "updateBranchProtection": [Function],
-                    "updateCommitComment": [Function],
-                    "updateHook": [Function],
-                    "updateInformationAboutPagesSite": [Function],
-                    "updateInvitation": [Function],
-                    "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "updateProtectedBranchRequiredStatusChecks": [Function],
-                    "updatePullRequestReviewProtection": [Function],
-                    "updateRelease": [Function],
-                    "updateReleaseAsset": [Function],
-                    "updateStatusCheckPotection": [Function],
-                    "updateWebhook": [Function],
-                    "uploadReleaseAsset": [Function],
-                  },
-                  "request": [Function],
-                  "search": Object {
-                    "code": [Function],
-                    "commits": [Function],
-                    "issuesAndPullRequests": [Function],
-                    "labels": [Function],
-                    "repos": [Function],
-                    "topics": [Function],
-                    "users": [Function],
-                  },
-                  "teams": Object {
-                    "addOrUpdateMembershipForUserInOrg": [Function],
-                    "addOrUpdateMembershipInOrg": [Function],
-                    "addOrUpdateProjectInOrg": [Function],
-                    "addOrUpdateProjectPermissionsInOrg": [Function],
-                    "addOrUpdateRepoInOrg": [Function],
-                    "addOrUpdateRepoPermissionsInOrg": [Function],
-                    "checkManagesRepoInOrg": [Function],
-                    "checkPermissionsForProjectInOrg": [Function],
-                    "checkPermissionsForRepoInOrg": [Function],
-                    "create": [Function],
-                    "createDiscussionCommentInOrg": [Function],
-                    "createDiscussionInOrg": [Function],
-                    "deleteDiscussionCommentInOrg": [Function],
-                    "deleteDiscussionInOrg": [Function],
-                    "deleteInOrg": [Function],
-                    "getByName": [Function],
-                    "getDiscussionCommentInOrg": [Function],
-                    "getDiscussionInOrg": [Function],
-                    "getMembershipForUserInOrg": [Function],
-                    "getMembershipInOrg": [Function],
-                    "list": [Function],
-                    "listChildInOrg": [Function],
-                    "listDiscussionCommentsInOrg": [Function],
-                    "listDiscussionsInOrg": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listMembersInOrg": [Function],
-                    "listPendingInvitationsInOrg": [Function],
-                    "listProjectsInOrg": [Function],
-                    "listReposInOrg": [Function],
-                    "removeMembershipForUserInOrg": [Function],
-                    "removeMembershipInOrg": [Function],
-                    "removeProjectInOrg": [Function],
-                    "removeRepoInOrg": [Function],
-                    "reviewProjectInOrg": [Function],
-                    "updateDiscussionCommentInOrg": [Function],
-                    "updateDiscussionInOrg": [Function],
-                    "updateInOrg": [Function],
-                  },
-                  "users": Object {
-                    "addEmailForAuthenticated": [Function],
-                    "addEmails": [Function],
-                    "block": [Function],
-                    "checkBlocked": [Function],
-                    "checkFollowing": [Function],
-                    "checkFollowingForUser": [Function],
-                    "checkPersonIsFollowedByAuthenticated": [Function],
-                    "createGpgKey": [Function],
-                    "createGpgKeyForAuthenticated": [Function],
-                    "createPublicKey": [Function],
-                    "createPublicSshKeyForAuthenticated": [Function],
-                    "deleteEmailForAuthenticated": [Function],
-                    "deleteEmails": [Function],
-                    "deleteGpgKey": [Function],
-                    "deleteGpgKeyForAuthenticated": [Function],
-                    "deletePublicKey": [Function],
-                    "deletePublicSshKeyForAuthenticated": [Function],
-                    "follow": [Function],
-                    "getAuthenticated": [Function],
-                    "getByUsername": [Function],
-                    "getContextForUser": [Function],
-                    "getGpgKey": [Function],
-                    "getGpgKeyForAuthenticated": [Function],
-                    "getPublicKey": [Function],
-                    "getPublicSshKeyForAuthenticated": [Function],
-                    "list": [Function],
-                    "listBlocked": [Function],
-                    "listBlockedByAuthenticated": [Function],
-                    "listEmails": [Function],
-                    "listEmailsForAuthenticated": [Function],
-                    "listFollowedByAuthenticated": [Function],
-                    "listFollowersForAuthenticatedUser": [Function],
-                    "listFollowersForUser": [Function],
-                    "listFollowingForAuthenticatedUser": [Function],
-                    "listFollowingForUser": [Function],
-                    "listGpgKeys": [Function],
-                    "listGpgKeysForAuthenticated": [Function],
-                    "listGpgKeysForUser": [Function],
-                    "listPublicEmails": [Function],
-                    "listPublicEmailsForAuthenticated": [Function],
-                    "listPublicKeys": [Function],
-                    "listPublicKeysForUser": [Function],
-                    "listPublicSshKeysForAuthenticated": [Function],
-                    "setPrimaryEmailVisibilityForAuthenticated": [Function],
-                    "togglePrimaryEmailVisibility": [Function],
-                    "unblock": [Function],
-                    "unfollow": [Function],
-                    "updateAuthenticated": [Function],
-                  },
-                },
-              },
-              "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isHostedDataExplorerEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isPublishNotebookPaneEnabled": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
-              "isSparkEnabled": [Function],
-              "isSparkEnabledForAccount": [Function],
+              "isShellEnabled": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "junoClient": JunoClient {
-                "cachedPinnedRepos": [Function],
-              },
               "memoryUsageInfo": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "onGitHubClientError": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "openDialog": undefined,
               "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
               "refreshNotebookList": [Function],
-              "refreshTreeTitle": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -1917,76 +227,11 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_closeModalDialog": [Function],
-                "_closeSynapseLinkModalDialog": [Function],
-                "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
-                "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
-                "addCollectionText": [Function],
-                "arcadiaToken": [Function],
-                "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
-                "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "createTableQuery": [Function],
-                  "dedicateTableThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "cassandraaddcollectionpane",
-                  "isAutoPilotSelected": [Function],
-                  "isExecuting": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isTemplateReady": [Function],
-                  "keyspaceCreateNew": [Function],
-                  "keyspaceHasSharedOffer": [Function],
-                  "keyspaceId": [Function],
-                  "keyspaceIds": [Function],
-                  "keyspaceOffers": Map {},
-                  "keyspaceThroughput": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "requestUnitsUsageCostDedicated": [Function],
-                  "requestUnitsUsageCostShared": [Function],
-                  "ruToolTipText": [Function],
-                  "selectedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "sharedThroughputSpendAck": [Function],
-                  "sharedThroughputSpendAckText": [Function],
-                  "sharedThroughputSpendAckVisible": [Function],
-                  "tableId": [Function],
-                  "throughput": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "userTableQuery": [Function],
-                  "visible": [Function],
-                },
-                "closeDialog": undefined,
                 "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
-                "collectionCreationDefaults": Object {
-                  "storage": "100",
-                  "throughput": Object {
-                    "fixed": 400,
-                    "shared": 400,
-                    "unlimited": 400,
-                    "unlimitedmax": 1000000,
-                    "unlimitedmin": 400,
-                  },
-                },
-                "collectionTitle": [Function],
-                "collectionTreeNodeAltText": [Function],
                 "commandBarComponentAdapter": CommandBarComponentAdapter {
                   "container": [Circular],
                   "isNotebookTabActive": [Function],
@@ -1994,808 +239,28 @@ exports[`SettingsComponent renders 1`] = `
                   "tabsButtons": Array [],
                 },
                 "databases": [Function],
-                "deleteCollectionText": [Function],
-                "deleteDatabaseText": [Function],
-                "gitHubClient": GitHubClient {
-                  "errorCallback": [Function],
-                  "ocktokit": OctokitWithDefaults {
-                    "actions": Object {
-                      "addSelectedRepoToOrgSecret": [Function],
-                      "cancelWorkflowRun": [Function],
-                      "createOrUpdateOrgSecret": [Function],
-                      "createOrUpdateRepoSecret": [Function],
-                      "createOrUpdateSecretForRepo": [Function],
-                      "createRegistrationToken": [Function],
-                      "createRegistrationTokenForOrg": [Function],
-                      "createRegistrationTokenForRepo": [Function],
-                      "createRemoveToken": [Function],
-                      "createRemoveTokenForOrg": [Function],
-                      "createRemoveTokenForRepo": [Function],
-                      "deleteArtifact": [Function],
-                      "deleteOrgSecret": [Function],
-                      "deleteRepoSecret": [Function],
-                      "deleteSecretFromRepo": [Function],
-                      "deleteSelfHostedRunnerFromOrg": [Function],
-                      "deleteSelfHostedRunnerFromRepo": [Function],
-                      "deleteWorkflowRunLogs": [Function],
-                      "downloadArtifact": [Function],
-                      "downloadJobLogsForWorkflowRun": [Function],
-                      "downloadWorkflowJobLogs": [Function],
-                      "downloadWorkflowRunLogs": [Function],
-                      "getArtifact": [Function],
-                      "getJobForWorkflowRun": [Function],
-                      "getOrgPublicKey": [Function],
-                      "getOrgSecret": [Function],
-                      "getPublicKey": [Function],
-                      "getRepoPublicKey": [Function],
-                      "getRepoSecret": [Function],
-                      "getSecret": [Function],
-                      "getSelfHostedRunner": [Function],
-                      "getSelfHostedRunnerForOrg": [Function],
-                      "getSelfHostedRunnerForRepo": [Function],
-                      "getWorkflow": [Function],
-                      "getWorkflowJob": [Function],
-                      "getWorkflowRun": [Function],
-                      "getWorkflowRunUsage": [Function],
-                      "getWorkflowUsage": [Function],
-                      "listArtifactsForRepo": [Function],
-                      "listDownloadsForSelfHostedRunnerApplication": [Function],
-                      "listJobsForWorkflowRun": [Function],
-                      "listOrgSecrets": [Function],
-                      "listRepoSecrets": [Function],
-                      "listRepoWorkflowRuns": [Function],
-                      "listRepoWorkflows": [Function],
-                      "listRunnerApplicationsForOrg": [Function],
-                      "listRunnerApplicationsForRepo": [Function],
-                      "listSecretsForRepo": [Function],
-                      "listSelectedReposForOrgSecret": [Function],
-                      "listSelfHostedRunnersForOrg": [Function],
-                      "listSelfHostedRunnersForRepo": [Function],
-                      "listWorkflowJobLogs": [Function],
-                      "listWorkflowRunArtifacts": [Function],
-                      "listWorkflowRunLogs": [Function],
-                      "listWorkflowRuns": [Function],
-                      "listWorkflowRunsForRepo": [Function],
-                      "reRunWorkflow": [Function],
-                      "removeSelectedRepoFromOrgSecret": [Function],
-                      "removeSelfHostedRunner": [Function],
-                      "setSelectedReposForOrgSecret": [Function],
-                    },
-                    "activity": Object {
-                      "checkRepoIsStarredByAuthenticatedUser": [Function],
-                      "checkStarringRepo": [Function],
-                      "deleteRepoSubscription": [Function],
-                      "deleteThreadSubscription": [Function],
-                      "getFeeds": [Function],
-                      "getRepoSubscription": [Function],
-                      "getThread": [Function],
-                      "getThreadSubscription": [Function],
-                      "getThreadSubscriptionForAuthenticatedUser": [Function],
-                      "listEventsForAuthenticatedUser": [Function],
-                      "listEventsForOrg": [Function],
-                      "listEventsForUser": [Function],
-                      "listFeeds": [Function],
-                      "listNotifications": [Function],
-                      "listNotificationsForAuthenticatedUser": [Function],
-                      "listNotificationsForRepo": [Function],
-                      "listOrgEventsForAuthenticatedUser": [Function],
-                      "listPublicEvents": [Function],
-                      "listPublicEventsForOrg": [Function],
-                      "listPublicEventsForRepoNetwork": [Function],
-                      "listPublicEventsForUser": [Function],
-                      "listPublicOrgEvents": [Function],
-                      "listReceivedEventsForUser": [Function],
-                      "listReceivedPublicEventsForUser": [Function],
-                      "listRepoEvents": [Function],
-                      "listRepoNotificationsForAuthenticatedUser": [Function],
-                      "listReposStarredByAuthenticatedUser": [Function],
-                      "listReposStarredByUser": [Function],
-                      "listReposWatchedByUser": [Function],
-                      "listStargazersForRepo": [Function],
-                      "listWatchedReposForAuthenticatedUser": [Function],
-                      "listWatchersForRepo": [Function],
-                      "markAsRead": [Function],
-                      "markNotificationsAsRead": [Function],
-                      "markNotificationsAsReadForRepo": [Function],
-                      "markRepoNotificationsAsRead": [Function],
-                      "markThreadAsRead": [Function],
-                      "setRepoSubscription": [Function],
-                      "setThreadSubscription": [Function],
-                      "starRepo": [Function],
-                      "starRepoForAuthenticatedUser": [Function],
-                      "unstarRepo": [Function],
-                      "unstarRepoForAuthenticatedUser": [Function],
-                    },
-                    "apps": Object {
-                      "addRepoToInstallation": [Function],
-                      "checkAccountIsAssociatedWithAny": [Function],
-                      "checkAccountIsAssociatedWithAnyStubbed": [Function],
-                      "checkToken": [Function],
-                      "createContentAttachment": [Function],
-                      "createFromManifest": [Function],
-                      "createInstallationAccessToken": [Function],
-                      "createInstallationToken": [Function],
-                      "deleteAuthorization": [Function],
-                      "deleteInstallation": [Function],
-                      "deleteToken": [Function],
-                      "getAuthenticated": [Function],
-                      "getBySlug": [Function],
-                      "getInstallation": [Function],
-                      "getOrgInstallation": [Function],
-                      "getRepoInstallation": [Function],
-                      "getSubscriptionPlanForAccount": [Function],
-                      "getSubscriptionPlanForAccountStubbed": [Function],
-                      "getUserInstallation": [Function],
-                      "listAccountsForPlan": [Function],
-                      "listAccountsForPlanStubbed": [Function],
-                      "listAccountsUserOrOrgOnPlan": [Function],
-                      "listAccountsUserOrOrgOnPlanStubbed": [Function],
-                      "listInstallationReposForAuthenticatedUser": [Function],
-                      "listInstallations": [Function],
-                      "listInstallationsForAuthenticatedUser": [Function],
-                      "listMarketplacePurchasesForAuthenticatedUser": [Function],
-                      "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-                      "listPlans": [Function],
-                      "listPlansStubbed": [Function],
-                      "listRepos": [Function],
-                      "listReposAccessibleToInstallation": [Function],
-                      "listSubscriptionsForAuthenticatedUser": [Function],
-                      "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-                      "removeRepoFromInstallation": [Function],
-                      "resetToken": [Function],
-                      "revokeInstallationAccessToken": [Function],
-                      "revokeInstallationToken": [Function],
-                      "suspendInstallation": [Function],
-                      "unsuspendInstallation": [Function],
-                    },
-                    "auth": [Function],
-                    "checks": Object {
-                      "create": [Function],
-                      "createSuite": [Function],
-                      "get": [Function],
-                      "getSuite": [Function],
-                      "listAnnotations": [Function],
-                      "listForRef": [Function],
-                      "listForSuite": [Function],
-                      "listSuitesForRef": [Function],
-                      "rerequestSuite": [Function],
-                      "setSuitesPreferences": [Function],
-                      "update": [Function],
-                    },
-                    "codeScanning": Object {
-                      "getAlert": [Function],
-                      "listAlertsForRepo": [Function],
-                    },
-                    "codesOfConduct": Object {
-                      "getAllCodesOfConduct": [Function],
-                      "getConductCode": [Function],
-                      "getForRepo": [Function],
-                      "listConductCodes": [Function],
-                    },
-                    "emojis": Object {
-                      "get": [Function],
-                    },
-                    "gists": Object {
-                      "checkIsStarred": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "delete": [Function],
-                      "deleteComment": [Function],
-                      "fork": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getRevision": [Function],
-                      "list": [Function],
-                      "listComments": [Function],
-                      "listCommits": [Function],
-                      "listForUser": [Function],
-                      "listForks": [Function],
-                      "listPublic": [Function],
-                      "listPublicForUser": [Function],
-                      "listStarred": [Function],
-                      "star": [Function],
-                      "unstar": [Function],
-                      "update": [Function],
-                      "updateComment": [Function],
-                    },
-                    "git": Object {
-                      "createBlob": [Function],
-                      "createCommit": [Function],
-                      "createRef": [Function],
-                      "createTag": [Function],
-                      "createTree": [Function],
-                      "deleteRef": [Function],
-                      "getBlob": [Function],
-                      "getCommit": [Function],
-                      "getRef": [Function],
-                      "getTag": [Function],
-                      "getTree": [Function],
-                      "listMatchingRefs": [Function],
-                      "updateRef": [Function],
-                    },
-                    "gitignore": Object {
-                      "getAllTemplates": [Function],
-                      "getTemplate": [Function],
-                      "listTemplates": [Function],
-                    },
-                    "graphql": [Function],
-                    "hook": [Function],
-                    "interactions": Object {
-                      "addOrUpdateRestrictionsForOrg": [Function],
-                      "addOrUpdateRestrictionsForRepo": [Function],
-                      "getRestrictionsForOrg": [Function],
-                      "getRestrictionsForRepo": [Function],
-                      "removeRestrictionsForOrg": [Function],
-                      "removeRestrictionsForRepo": [Function],
-                      "setRestrictionsForOrg": [Function],
-                      "setRestrictionsForRepo": [Function],
-                    },
-                    "issues": Object {
-                      "addAssignees": [Function],
-                      "addLabels": [Function],
-                      "checkAssignee": [Function],
-                      "checkUserCanBeAssigned": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "createLabel": [Function],
-                      "createMilestone": [Function],
-                      "deleteComment": [Function],
-                      "deleteLabel": [Function],
-                      "deleteMilestone": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getEvent": [Function],
-                      "getLabel": [Function],
-                      "getMilestone": [Function],
-                      "list": [Function],
-                      "listAssignees": [Function],
-                      "listComments": [Function],
-                      "listCommentsForRepo": [Function],
-                      "listEvents": [Function],
-                      "listEventsForRepo": [Function],
-                      "listEventsForTimeline": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listForRepo": [Function],
-                      "listLabelsForMilestone": [Function],
-                      "listLabelsForRepo": [Function],
-                      "listLabelsOnIssue": [Function],
-                      "listMilestones": [Function],
-                      "listMilestonesForRepo": [Function],
-                      "lock": [Function],
-                      "removeAllLabels": [Function],
-                      "removeAssignees": [Function],
-                      "removeLabel": [Function],
-                      "removeLabels": [Function],
-                      "replaceAllLabels": [Function],
-                      "replaceLabels": [Function],
-                      "setLabels": [Function],
-                      "unlock": [Function],
-                      "update": [Function],
-                      "updateComment": [Function],
-                      "updateLabel": [Function],
-                      "updateMilestone": [Function],
-                    },
-                    "licenses": Object {
-                      "get": [Function],
-                      "getAllCommonlyUsed": [Function],
-                      "getForRepo": [Function],
-                      "listCommonlyUsed": [Function],
-                    },
-                    "log": Object {
-                      "debug": [Function],
-                      "error": [Function],
-                      "info": [Function],
-                      "warn": [Function],
-                    },
-                    "markdown": Object {
-                      "render": [Function],
-                      "renderRaw": [Function],
-                    },
-                    "meta": Object {
-                      "get": [Function],
-                    },
-                    "migrations": Object {
-                      "cancelImport": [Function],
-                      "deleteArchiveForAuthenticatedUser": [Function],
-                      "deleteArchiveForOrg": [Function],
-                      "downloadArchiveForOrg": [Function],
-                      "getArchiveForAuthenticatedUser": [Function],
-                      "getCommitAuthors": [Function],
-                      "getImportProgress": [Function],
-                      "getImportStatus": [Function],
-                      "getLargeFiles": [Function],
-                      "getStatusForAuthenticatedUser": [Function],
-                      "getStatusForOrg": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listReposForOrg": [Function],
-                      "listReposForUser": [Function],
-                      "mapCommitAuthor": [Function],
-                      "setLfsPreference": [Function],
-                      "startForAuthenticatedUser": [Function],
-                      "startForOrg": [Function],
-                      "startImport": [Function],
-                      "unlockRepoForAuthenticatedUser": [Function],
-                      "unlockRepoForOrg": [Function],
-                      "updateImport": [Function],
-                    },
-                    "orgs": Object {
-                      "addOrUpdateMembership": [Function],
-                      "blockUser": [Function],
-                      "checkBlockedUser": [Function],
-                      "checkMembership": [Function],
-                      "checkMembershipForUser": [Function],
-                      "checkPublicMembership": [Function],
-                      "checkPublicMembershipForUser": [Function],
-                      "concealMembership": [Function],
-                      "convertMemberToOutsideCollaborator": [Function],
-                      "createHook": [Function],
-                      "createInvitation": [Function],
-                      "createWebhook": [Function],
-                      "deleteHook": [Function],
-                      "deleteWebhook": [Function],
-                      "get": [Function],
-                      "getHook": [Function],
-                      "getMembership": [Function],
-                      "getMembershipForAuthenticatedUser": [Function],
-                      "getMembershipForUser": [Function],
-                      "getWebhook": [Function],
-                      "list": [Function],
-                      "listAppInstallations": [Function],
-                      "listBlockedUsers": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForUser": [Function],
-                      "listHooks": [Function],
-                      "listInstallations": [Function],
-                      "listInvitationTeams": [Function],
-                      "listMembers": [Function],
-                      "listMemberships": [Function],
-                      "listMembershipsForAuthenticatedUser": [Function],
-                      "listOutsideCollaborators": [Function],
-                      "listPendingInvitations": [Function],
-                      "listPublicMembers": [Function],
-                      "listWebhooks": [Function],
-                      "pingHook": [Function],
-                      "pingWebhook": [Function],
-                      "publicizeMembership": [Function],
-                      "removeMember": [Function],
-                      "removeMembership": [Function],
-                      "removeMembershipForUser": [Function],
-                      "removeOutsideCollaborator": [Function],
-                      "removePublicMembershipForAuthenticatedUser": [Function],
-                      "setMembershipForUser": [Function],
-                      "setPublicMembershipForAuthenticatedUser": [Function],
-                      "unblockUser": [Function],
-                      "update": [Function],
-                      "updateHook": [Function],
-                      "updateMembership": [Function],
-                      "updateMembershipForAuthenticatedUser": [Function],
-                      "updateWebhook": [Function],
-                    },
-                    "paginate": [Function],
-                    "projects": Object {
-                      "addCollaborator": [Function],
-                      "createCard": [Function],
-                      "createColumn": [Function],
-                      "createForAuthenticatedUser": [Function],
-                      "createForOrg": [Function],
-                      "createForRepo": [Function],
-                      "delete": [Function],
-                      "deleteCard": [Function],
-                      "deleteColumn": [Function],
-                      "get": [Function],
-                      "getCard": [Function],
-                      "getColumn": [Function],
-                      "getPermissionForUser": [Function],
-                      "listCards": [Function],
-                      "listCollaborators": [Function],
-                      "listColumns": [Function],
-                      "listForOrg": [Function],
-                      "listForRepo": [Function],
-                      "listForUser": [Function],
-                      "moveCard": [Function],
-                      "moveColumn": [Function],
-                      "removeCollaborator": [Function],
-                      "reviewUserPermissionLevel": [Function],
-                      "update": [Function],
-                      "updateCard": [Function],
-                      "updateColumn": [Function],
-                    },
-                    "pulls": Object {
-                      "checkIfMerged": [Function],
-                      "create": [Function],
-                      "createComment": [Function],
-                      "createReplyForReviewComment": [Function],
-                      "createReview": [Function],
-                      "createReviewComment": [Function],
-                      "createReviewCommentReply": [Function],
-                      "createReviewRequest": [Function],
-                      "deleteComment": [Function],
-                      "deletePendingReview": [Function],
-                      "deleteReviewComment": [Function],
-                      "deleteReviewRequest": [Function],
-                      "dismissReview": [Function],
-                      "get": [Function],
-                      "getComment": [Function],
-                      "getCommentsForReview": [Function],
-                      "getReview": [Function],
-                      "getReviewComment": [Function],
-                      "list": [Function],
-                      "listComments": [Function],
-                      "listCommentsForRepo": [Function],
-                      "listCommentsForReview": [Function],
-                      "listCommits": [Function],
-                      "listFiles": [Function],
-                      "listRequestedReviewers": [Function],
-                      "listReviewComments": [Function],
-                      "listReviewCommentsForRepo": [Function],
-                      "listReviewRequests": [Function],
-                      "listReviews": [Function],
-                      "merge": [Function],
-                      "removeRequestedReviewers": [Function],
-                      "requestReviewers": [Function],
-                      "submitReview": [Function],
-                      "update": [Function],
-                      "updateBranch": [Function],
-                      "updateComment": [Function],
-                      "updateReview": [Function],
-                      "updateReviewComment": [Function],
-                    },
-                    "rateLimit": Object {
-                      "get": [Function],
-                    },
-                    "reactions": Object {
-                      "createForCommitComment": [Function],
-                      "createForIssue": [Function],
-                      "createForIssueComment": [Function],
-                      "createForPullRequestReviewComment": [Function],
-                      "createForTeamDiscussionCommentInOrg": [Function],
-                      "createForTeamDiscussionInOrg": [Function],
-                      "delete": [Function],
-                      "deleteForCommitComment": [Function],
-                      "deleteForIssue": [Function],
-                      "deleteForIssueComment": [Function],
-                      "deleteForPullRequestComment": [Function],
-                      "deleteForTeamDiscussion": [Function],
-                      "deleteForTeamDiscussionComment": [Function],
-                      "deleteLegacy": [Function],
-                      "listForCommitComment": [Function],
-                      "listForIssue": [Function],
-                      "listForIssueComment": [Function],
-                      "listForPullRequestReviewComment": [Function],
-                      "listForTeamDiscussionCommentInOrg": [Function],
-                      "listForTeamDiscussionInOrg": [Function],
-                    },
-                    "repos": Object {
-                      "acceptInvitation": [Function],
-                      "addAppAccessRestrictions": [Function],
-                      "addCollaborator": [Function],
-                      "addDeployKey": [Function],
-                      "addProtectedBranchAdminEnforcement": [Function],
-                      "addProtectedBranchAppRestrictions": [Function],
-                      "addProtectedBranchRequiredSignatures": [Function],
-                      "addProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "addProtectedBranchTeamRestrictions": [Function],
-                      "addProtectedBranchUserRestrictions": [Function],
-                      "addStatusCheckContexts": [Function],
-                      "addTeamAccessRestrictions": [Function],
-                      "addUserAccessRestrictions": [Function],
-                      "checkCollaborator": [Function],
-                      "checkVulnerabilityAlerts": [Function],
-                      "compareCommits": [Function],
-                      "createCommitComment": [Function],
-                      "createCommitSignatureProtection": [Function],
-                      "createCommitStatus": [Function],
-                      "createDeployKey": [Function],
-                      "createDeployment": [Function],
-                      "createDeploymentStatus": [Function],
-                      "createDispatchEvent": [Function],
-                      "createForAuthenticatedUser": [Function],
-                      "createFork": [Function],
-                      "createHook": [Function],
-                      "createInOrg": [Function],
-                      "createOrUpdateFile": [Function],
-                      "createOrUpdateFileContents": [Function],
-                      "createPagesSite": [Function],
-                      "createRelease": [Function],
-                      "createStatus": [Function],
-                      "createUsingTemplate": [Function],
-                      "createWebhook": [Function],
-                      "declineInvitation": [Function],
-                      "delete": [Function],
-                      "deleteAccessRestrictions": [Function],
-                      "deleteAdminBranchProtection": [Function],
-                      "deleteBranchProtection": [Function],
-                      "deleteCommitComment": [Function],
-                      "deleteCommitSignatureProtection": [Function],
-                      "deleteDeployKey": [Function],
-                      "deleteDeployment": [Function],
-                      "deleteDownload": [Function],
-                      "deleteFile": [Function],
-                      "deleteHook": [Function],
-                      "deleteInvitation": [Function],
-                      "deletePagesSite": [Function],
-                      "deletePullRequestReviewProtection": [Function],
-                      "deleteRelease": [Function],
-                      "deleteReleaseAsset": [Function],
-                      "deleteWebhook": [Function],
-                      "disableAutomatedSecurityFixes": [Function],
-                      "disablePagesSite": [Function],
-                      "disableVulnerabilityAlerts": [Function],
-                      "downloadArchive": [Function],
-                      "enableAutomatedSecurityFixes": [Function],
-                      "enablePagesSite": [Function],
-                      "enableVulnerabilityAlerts": [Function],
-                      "get": [Function],
-                      "getAccessRestrictions": [Function],
-                      "getAdminBranchProtection": [Function],
-                      "getAllStatusCheckContexts": [Function],
-                      "getAllTopics": [Function],
-                      "getAppsWithAccessToProtectedBranch": [Function],
-                      "getArchiveLink": [Function],
-                      "getBranch": [Function],
-                      "getBranchProtection": [Function],
-                      "getClones": [Function],
-                      "getCodeFrequencyStats": [Function],
-                      "getCollaboratorPermissionLevel": [Function],
-                      "getCombinedStatusForRef": [Function],
-                      "getCommit": [Function],
-                      "getCommitActivityStats": [Function],
-                      "getCommitComment": [Function],
-                      "getCommitSignatureProtection": [Function],
-                      "getCommunityProfileMetrics": [Function],
-                      "getContent": [Function],
-                      "getContents": [Function],
-                      "getContributorsStats": [Function],
-                      "getDeployKey": [Function],
-                      "getDeployment": [Function],
-                      "getDeploymentStatus": [Function],
-                      "getDownload": [Function],
-                      "getHook": [Function],
-                      "getLatestPagesBuild": [Function],
-                      "getLatestRelease": [Function],
-                      "getPages": [Function],
-                      "getPagesBuild": [Function],
-                      "getParticipationStats": [Function],
-                      "getProtectedBranchAdminEnforcement": [Function],
-                      "getProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "getProtectedBranchRequiredSignatures": [Function],
-                      "getProtectedBranchRequiredStatusChecks": [Function],
-                      "getProtectedBranchRestrictions": [Function],
-                      "getPullRequestReviewProtection": [Function],
-                      "getPunchCardStats": [Function],
-                      "getReadme": [Function],
-                      "getRelease": [Function],
-                      "getReleaseAsset": [Function],
-                      "getReleaseByTag": [Function],
-                      "getStatusChecksProtection": [Function],
-                      "getTeamsWithAccessToProtectedBranch": [Function],
-                      "getTopPaths": [Function],
-                      "getTopReferrers": [Function],
-                      "getUsersWithAccessToProtectedBranch": [Function],
-                      "getViews": [Function],
-                      "getWebhook": [Function],
-                      "list": [Function],
-                      "listAssetsForRelease": [Function],
-                      "listBranches": [Function],
-                      "listBranchesForHeadCommit": [Function],
-                      "listCollaborators": [Function],
-                      "listCommentsForCommit": [Function],
-                      "listCommitComments": [Function],
-                      "listCommitCommentsForRepo": [Function],
-                      "listCommitStatusesForRef": [Function],
-                      "listCommits": [Function],
-                      "listContributors": [Function],
-                      "listDeployKeys": [Function],
-                      "listDeploymentStatuses": [Function],
-                      "listDeployments": [Function],
-                      "listDownloads": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listForOrg": [Function],
-                      "listForUser": [Function],
-                      "listForks": [Function],
-                      "listHooks": [Function],
-                      "listInvitations": [Function],
-                      "listInvitationsForAuthenticatedUser": [Function],
-                      "listLanguages": [Function],
-                      "listPagesBuilds": [Function],
-                      "listProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "listPublic": [Function],
-                      "listPullRequestsAssociatedWithCommit": [Function],
-                      "listReleaseAssets": [Function],
-                      "listReleases": [Function],
-                      "listStatusesForRef": [Function],
-                      "listTags": [Function],
-                      "listTeams": [Function],
-                      "listTopics": [Function],
-                      "listWebhooks": [Function],
-                      "merge": [Function],
-                      "pingHook": [Function],
-                      "pingWebhook": [Function],
-                      "removeAppAccessRestrictions": [Function],
-                      "removeBranchProtection": [Function],
-                      "removeCollaborator": [Function],
-                      "removeDeployKey": [Function],
-                      "removeProtectedBranchAdminEnforcement": [Function],
-                      "removeProtectedBranchAppRestrictions": [Function],
-                      "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "removeProtectedBranchRequiredSignatures": [Function],
-                      "removeProtectedBranchRequiredStatusChecks": [Function],
-                      "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "removeProtectedBranchRestrictions": [Function],
-                      "removeProtectedBranchTeamRestrictions": [Function],
-                      "removeProtectedBranchUserRestrictions": [Function],
-                      "removeStatusCheckContexts": [Function],
-                      "removeStatusCheckProtection": [Function],
-                      "removeTeamAccessRestrictions": [Function],
-                      "removeUserAccessRestrictions": [Function],
-                      "replaceAllTopics": [Function],
-                      "replaceProtectedBranchAppRestrictions": [Function],
-                      "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-                      "replaceProtectedBranchTeamRestrictions": [Function],
-                      "replaceProtectedBranchUserRestrictions": [Function],
-                      "replaceTopics": [Function],
-                      "requestPageBuild": [Function],
-                      "requestPagesBuild": [Function],
-                      "retrieveCommunityProfileMetrics": [Function],
-                      "setAdminBranchProtection": [Function],
-                      "setAppAccessRestrictions": [Function],
-                      "setStatusCheckContexts": [Function],
-                      "setTeamAccessRestrictions": [Function],
-                      "setUserAccessRestrictions": [Function],
-                      "testPushHook": [Function],
-                      "testPushWebhook": [Function],
-                      "transfer": [Function],
-                      "update": [Function],
-                      "updateBranchProtection": [Function],
-                      "updateCommitComment": [Function],
-                      "updateHook": [Function],
-                      "updateInformationAboutPagesSite": [Function],
-                      "updateInvitation": [Function],
-                      "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-                      "updateProtectedBranchRequiredStatusChecks": [Function],
-                      "updatePullRequestReviewProtection": [Function],
-                      "updateRelease": [Function],
-                      "updateReleaseAsset": [Function],
-                      "updateStatusCheckPotection": [Function],
-                      "updateWebhook": [Function],
-                      "uploadReleaseAsset": [Function],
-                    },
-                    "request": [Function],
-                    "search": Object {
-                      "code": [Function],
-                      "commits": [Function],
-                      "issuesAndPullRequests": [Function],
-                      "labels": [Function],
-                      "repos": [Function],
-                      "topics": [Function],
-                      "users": [Function],
-                    },
-                    "teams": Object {
-                      "addOrUpdateMembershipForUserInOrg": [Function],
-                      "addOrUpdateMembershipInOrg": [Function],
-                      "addOrUpdateProjectInOrg": [Function],
-                      "addOrUpdateProjectPermissionsInOrg": [Function],
-                      "addOrUpdateRepoInOrg": [Function],
-                      "addOrUpdateRepoPermissionsInOrg": [Function],
-                      "checkManagesRepoInOrg": [Function],
-                      "checkPermissionsForProjectInOrg": [Function],
-                      "checkPermissionsForRepoInOrg": [Function],
-                      "create": [Function],
-                      "createDiscussionCommentInOrg": [Function],
-                      "createDiscussionInOrg": [Function],
-                      "deleteDiscussionCommentInOrg": [Function],
-                      "deleteDiscussionInOrg": [Function],
-                      "deleteInOrg": [Function],
-                      "getByName": [Function],
-                      "getDiscussionCommentInOrg": [Function],
-                      "getDiscussionInOrg": [Function],
-                      "getMembershipForUserInOrg": [Function],
-                      "getMembershipInOrg": [Function],
-                      "list": [Function],
-                      "listChildInOrg": [Function],
-                      "listDiscussionCommentsInOrg": [Function],
-                      "listDiscussionsInOrg": [Function],
-                      "listForAuthenticatedUser": [Function],
-                      "listMembersInOrg": [Function],
-                      "listPendingInvitationsInOrg": [Function],
-                      "listProjectsInOrg": [Function],
-                      "listReposInOrg": [Function],
-                      "removeMembershipForUserInOrg": [Function],
-                      "removeMembershipInOrg": [Function],
-                      "removeProjectInOrg": [Function],
-                      "removeRepoInOrg": [Function],
-                      "reviewProjectInOrg": [Function],
-                      "updateDiscussionCommentInOrg": [Function],
-                      "updateDiscussionInOrg": [Function],
-                      "updateInOrg": [Function],
-                    },
-                    "users": Object {
-                      "addEmailForAuthenticated": [Function],
-                      "addEmails": [Function],
-                      "block": [Function],
-                      "checkBlocked": [Function],
-                      "checkFollowing": [Function],
-                      "checkFollowingForUser": [Function],
-                      "checkPersonIsFollowedByAuthenticated": [Function],
-                      "createGpgKey": [Function],
-                      "createGpgKeyForAuthenticated": [Function],
-                      "createPublicKey": [Function],
-                      "createPublicSshKeyForAuthenticated": [Function],
-                      "deleteEmailForAuthenticated": [Function],
-                      "deleteEmails": [Function],
-                      "deleteGpgKey": [Function],
-                      "deleteGpgKeyForAuthenticated": [Function],
-                      "deletePublicKey": [Function],
-                      "deletePublicSshKeyForAuthenticated": [Function],
-                      "follow": [Function],
-                      "getAuthenticated": [Function],
-                      "getByUsername": [Function],
-                      "getContextForUser": [Function],
-                      "getGpgKey": [Function],
-                      "getGpgKeyForAuthenticated": [Function],
-                      "getPublicKey": [Function],
-                      "getPublicSshKeyForAuthenticated": [Function],
-                      "list": [Function],
-                      "listBlocked": [Function],
-                      "listBlockedByAuthenticated": [Function],
-                      "listEmails": [Function],
-                      "listEmailsForAuthenticated": [Function],
-                      "listFollowedByAuthenticated": [Function],
-                      "listFollowersForAuthenticatedUser": [Function],
-                      "listFollowersForUser": [Function],
-                      "listFollowingForAuthenticatedUser": [Function],
-                      "listFollowingForUser": [Function],
-                      "listGpgKeys": [Function],
-                      "listGpgKeysForAuthenticated": [Function],
-                      "listGpgKeysForUser": [Function],
-                      "listPublicEmails": [Function],
-                      "listPublicEmailsForAuthenticated": [Function],
-                      "listPublicKeys": [Function],
-                      "listPublicKeysForUser": [Function],
-                      "listPublicSshKeysForAuthenticated": [Function],
-                      "setPrimaryEmailVisibilityForAuthenticated": [Function],
-                      "togglePrimaryEmailVisibility": [Function],
-                      "unblock": [Function],
-                      "unfollow": [Function],
-                      "updateAuthenticated": [Function],
-                    },
-                  },
-                },
-                "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isHostedDataExplorerEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isPublishNotebookPaneEnabled": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
-                "isSparkEnabled": [Function],
-                "isSparkEnabledForAccount": [Function],
+                "isShellEnabled": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "junoClient": JunoClient {
-                  "cachedPinnedRepos": [Function],
-                },
                 "memoryUsageInfo": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "onGitHubClientError": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "openDialog": undefined,
                 "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "refreshTreeTitle": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -2855,76 +320,11 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_closeModalDialog": [Function],
-              "_closeSynapseLinkModalDialog": [Function],
-              "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
-              "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
-              "addCollectionText": [Function],
-              "arcadiaToken": [Function],
-              "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
-              "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "createTableQuery": [Function],
-                "dedicateTableThroughput": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "cassandraaddcollectionpane",
-                "isAutoPilotSelected": [Function],
-                "isExecuting": [Function],
-                "isFreeTierAccount": [Function],
-                "isSharedAutoPilotSelected": [Function],
-                "isTemplateReady": [Function],
-                "keyspaceCreateNew": [Function],
-                "keyspaceHasSharedOffer": [Function],
-                "keyspaceId": [Function],
-                "keyspaceIds": [Function],
-                "keyspaceOffers": Map {},
-                "keyspaceThroughput": [Function],
-                "maxThroughputRU": [Function],
-                "minThroughputRU": [Function],
-                "requestUnitsUsageCostDedicated": [Function],
-                "requestUnitsUsageCostShared": [Function],
-                "ruToolTipText": [Function],
-                "selectedAutoPilotThroughput": [Function],
-                "sharedAutoPilotThroughput": [Function],
-                "sharedThroughputRangeText": [Function],
-                "sharedThroughputSpendAck": [Function],
-                "sharedThroughputSpendAckText": [Function],
-                "sharedThroughputSpendAckVisible": [Function],
-                "tableId": [Function],
-                "throughput": [Function],
-                "throughputRangeText": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "userTableQuery": [Function],
-                "visible": [Function],
-              },
-              "closeDialog": undefined,
               "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
-              "collectionCreationDefaults": Object {
-                "storage": "100",
-                "throughput": Object {
-                  "fixed": 400,
-                  "shared": 400,
-                  "unlimited": 400,
-                  "unlimitedmax": 1000000,
-                  "unlimitedmin": 400,
-                },
-              },
-              "collectionTitle": [Function],
-              "collectionTreeNodeAltText": [Function],
               "commandBarComponentAdapter": CommandBarComponentAdapter {
                 "container": [Circular],
                 "isNotebookTabActive": [Function],
@@ -2932,808 +332,28 @@ exports[`SettingsComponent renders 1`] = `
                 "tabsButtons": Array [],
               },
               "databases": [Function],
-              "deleteCollectionText": [Function],
-              "deleteDatabaseText": [Function],
-              "gitHubClient": GitHubClient {
-                "errorCallback": [Function],
-                "ocktokit": OctokitWithDefaults {
-                  "actions": Object {
-                    "addSelectedRepoToOrgSecret": [Function],
-                    "cancelWorkflowRun": [Function],
-                    "createOrUpdateOrgSecret": [Function],
-                    "createOrUpdateRepoSecret": [Function],
-                    "createOrUpdateSecretForRepo": [Function],
-                    "createRegistrationToken": [Function],
-                    "createRegistrationTokenForOrg": [Function],
-                    "createRegistrationTokenForRepo": [Function],
-                    "createRemoveToken": [Function],
-                    "createRemoveTokenForOrg": [Function],
-                    "createRemoveTokenForRepo": [Function],
-                    "deleteArtifact": [Function],
-                    "deleteOrgSecret": [Function],
-                    "deleteRepoSecret": [Function],
-                    "deleteSecretFromRepo": [Function],
-                    "deleteSelfHostedRunnerFromOrg": [Function],
-                    "deleteSelfHostedRunnerFromRepo": [Function],
-                    "deleteWorkflowRunLogs": [Function],
-                    "downloadArtifact": [Function],
-                    "downloadJobLogsForWorkflowRun": [Function],
-                    "downloadWorkflowJobLogs": [Function],
-                    "downloadWorkflowRunLogs": [Function],
-                    "getArtifact": [Function],
-                    "getJobForWorkflowRun": [Function],
-                    "getOrgPublicKey": [Function],
-                    "getOrgSecret": [Function],
-                    "getPublicKey": [Function],
-                    "getRepoPublicKey": [Function],
-                    "getRepoSecret": [Function],
-                    "getSecret": [Function],
-                    "getSelfHostedRunner": [Function],
-                    "getSelfHostedRunnerForOrg": [Function],
-                    "getSelfHostedRunnerForRepo": [Function],
-                    "getWorkflow": [Function],
-                    "getWorkflowJob": [Function],
-                    "getWorkflowRun": [Function],
-                    "getWorkflowRunUsage": [Function],
-                    "getWorkflowUsage": [Function],
-                    "listArtifactsForRepo": [Function],
-                    "listDownloadsForSelfHostedRunnerApplication": [Function],
-                    "listJobsForWorkflowRun": [Function],
-                    "listOrgSecrets": [Function],
-                    "listRepoSecrets": [Function],
-                    "listRepoWorkflowRuns": [Function],
-                    "listRepoWorkflows": [Function],
-                    "listRunnerApplicationsForOrg": [Function],
-                    "listRunnerApplicationsForRepo": [Function],
-                    "listSecretsForRepo": [Function],
-                    "listSelectedReposForOrgSecret": [Function],
-                    "listSelfHostedRunnersForOrg": [Function],
-                    "listSelfHostedRunnersForRepo": [Function],
-                    "listWorkflowJobLogs": [Function],
-                    "listWorkflowRunArtifacts": [Function],
-                    "listWorkflowRunLogs": [Function],
-                    "listWorkflowRuns": [Function],
-                    "listWorkflowRunsForRepo": [Function],
-                    "reRunWorkflow": [Function],
-                    "removeSelectedRepoFromOrgSecret": [Function],
-                    "removeSelfHostedRunner": [Function],
-                    "setSelectedReposForOrgSecret": [Function],
-                  },
-                  "activity": Object {
-                    "checkRepoIsStarredByAuthenticatedUser": [Function],
-                    "checkStarringRepo": [Function],
-                    "deleteRepoSubscription": [Function],
-                    "deleteThreadSubscription": [Function],
-                    "getFeeds": [Function],
-                    "getRepoSubscription": [Function],
-                    "getThread": [Function],
-                    "getThreadSubscription": [Function],
-                    "getThreadSubscriptionForAuthenticatedUser": [Function],
-                    "listEventsForAuthenticatedUser": [Function],
-                    "listEventsForOrg": [Function],
-                    "listEventsForUser": [Function],
-                    "listFeeds": [Function],
-                    "listNotifications": [Function],
-                    "listNotificationsForAuthenticatedUser": [Function],
-                    "listNotificationsForRepo": [Function],
-                    "listOrgEventsForAuthenticatedUser": [Function],
-                    "listPublicEvents": [Function],
-                    "listPublicEventsForOrg": [Function],
-                    "listPublicEventsForRepoNetwork": [Function],
-                    "listPublicEventsForUser": [Function],
-                    "listPublicOrgEvents": [Function],
-                    "listReceivedEventsForUser": [Function],
-                    "listReceivedPublicEventsForUser": [Function],
-                    "listRepoEvents": [Function],
-                    "listRepoNotificationsForAuthenticatedUser": [Function],
-                    "listReposStarredByAuthenticatedUser": [Function],
-                    "listReposStarredByUser": [Function],
-                    "listReposWatchedByUser": [Function],
-                    "listStargazersForRepo": [Function],
-                    "listWatchedReposForAuthenticatedUser": [Function],
-                    "listWatchersForRepo": [Function],
-                    "markAsRead": [Function],
-                    "markNotificationsAsRead": [Function],
-                    "markNotificationsAsReadForRepo": [Function],
-                    "markRepoNotificationsAsRead": [Function],
-                    "markThreadAsRead": [Function],
-                    "setRepoSubscription": [Function],
-                    "setThreadSubscription": [Function],
-                    "starRepo": [Function],
-                    "starRepoForAuthenticatedUser": [Function],
-                    "unstarRepo": [Function],
-                    "unstarRepoForAuthenticatedUser": [Function],
-                  },
-                  "apps": Object {
-                    "addRepoToInstallation": [Function],
-                    "checkAccountIsAssociatedWithAny": [Function],
-                    "checkAccountIsAssociatedWithAnyStubbed": [Function],
-                    "checkToken": [Function],
-                    "createContentAttachment": [Function],
-                    "createFromManifest": [Function],
-                    "createInstallationAccessToken": [Function],
-                    "createInstallationToken": [Function],
-                    "deleteAuthorization": [Function],
-                    "deleteInstallation": [Function],
-                    "deleteToken": [Function],
-                    "getAuthenticated": [Function],
-                    "getBySlug": [Function],
-                    "getInstallation": [Function],
-                    "getOrgInstallation": [Function],
-                    "getRepoInstallation": [Function],
-                    "getSubscriptionPlanForAccount": [Function],
-                    "getSubscriptionPlanForAccountStubbed": [Function],
-                    "getUserInstallation": [Function],
-                    "listAccountsForPlan": [Function],
-                    "listAccountsForPlanStubbed": [Function],
-                    "listAccountsUserOrOrgOnPlan": [Function],
-                    "listAccountsUserOrOrgOnPlanStubbed": [Function],
-                    "listInstallationReposForAuthenticatedUser": [Function],
-                    "listInstallations": [Function],
-                    "listInstallationsForAuthenticatedUser": [Function],
-                    "listMarketplacePurchasesForAuthenticatedUser": [Function],
-                    "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-                    "listPlans": [Function],
-                    "listPlansStubbed": [Function],
-                    "listRepos": [Function],
-                    "listReposAccessibleToInstallation": [Function],
-                    "listSubscriptionsForAuthenticatedUser": [Function],
-                    "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-                    "removeRepoFromInstallation": [Function],
-                    "resetToken": [Function],
-                    "revokeInstallationAccessToken": [Function],
-                    "revokeInstallationToken": [Function],
-                    "suspendInstallation": [Function],
-                    "unsuspendInstallation": [Function],
-                  },
-                  "auth": [Function],
-                  "checks": Object {
-                    "create": [Function],
-                    "createSuite": [Function],
-                    "get": [Function],
-                    "getSuite": [Function],
-                    "listAnnotations": [Function],
-                    "listForRef": [Function],
-                    "listForSuite": [Function],
-                    "listSuitesForRef": [Function],
-                    "rerequestSuite": [Function],
-                    "setSuitesPreferences": [Function],
-                    "update": [Function],
-                  },
-                  "codeScanning": Object {
-                    "getAlert": [Function],
-                    "listAlertsForRepo": [Function],
-                  },
-                  "codesOfConduct": Object {
-                    "getAllCodesOfConduct": [Function],
-                    "getConductCode": [Function],
-                    "getForRepo": [Function],
-                    "listConductCodes": [Function],
-                  },
-                  "emojis": Object {
-                    "get": [Function],
-                  },
-                  "gists": Object {
-                    "checkIsStarred": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "delete": [Function],
-                    "deleteComment": [Function],
-                    "fork": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getRevision": [Function],
-                    "list": [Function],
-                    "listComments": [Function],
-                    "listCommits": [Function],
-                    "listForUser": [Function],
-                    "listForks": [Function],
-                    "listPublic": [Function],
-                    "listPublicForUser": [Function],
-                    "listStarred": [Function],
-                    "star": [Function],
-                    "unstar": [Function],
-                    "update": [Function],
-                    "updateComment": [Function],
-                  },
-                  "git": Object {
-                    "createBlob": [Function],
-                    "createCommit": [Function],
-                    "createRef": [Function],
-                    "createTag": [Function],
-                    "createTree": [Function],
-                    "deleteRef": [Function],
-                    "getBlob": [Function],
-                    "getCommit": [Function],
-                    "getRef": [Function],
-                    "getTag": [Function],
-                    "getTree": [Function],
-                    "listMatchingRefs": [Function],
-                    "updateRef": [Function],
-                  },
-                  "gitignore": Object {
-                    "getAllTemplates": [Function],
-                    "getTemplate": [Function],
-                    "listTemplates": [Function],
-                  },
-                  "graphql": [Function],
-                  "hook": [Function],
-                  "interactions": Object {
-                    "addOrUpdateRestrictionsForOrg": [Function],
-                    "addOrUpdateRestrictionsForRepo": [Function],
-                    "getRestrictionsForOrg": [Function],
-                    "getRestrictionsForRepo": [Function],
-                    "removeRestrictionsForOrg": [Function],
-                    "removeRestrictionsForRepo": [Function],
-                    "setRestrictionsForOrg": [Function],
-                    "setRestrictionsForRepo": [Function],
-                  },
-                  "issues": Object {
-                    "addAssignees": [Function],
-                    "addLabels": [Function],
-                    "checkAssignee": [Function],
-                    "checkUserCanBeAssigned": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "createLabel": [Function],
-                    "createMilestone": [Function],
-                    "deleteComment": [Function],
-                    "deleteLabel": [Function],
-                    "deleteMilestone": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getEvent": [Function],
-                    "getLabel": [Function],
-                    "getMilestone": [Function],
-                    "list": [Function],
-                    "listAssignees": [Function],
-                    "listComments": [Function],
-                    "listCommentsForRepo": [Function],
-                    "listEvents": [Function],
-                    "listEventsForRepo": [Function],
-                    "listEventsForTimeline": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listForRepo": [Function],
-                    "listLabelsForMilestone": [Function],
-                    "listLabelsForRepo": [Function],
-                    "listLabelsOnIssue": [Function],
-                    "listMilestones": [Function],
-                    "listMilestonesForRepo": [Function],
-                    "lock": [Function],
-                    "removeAllLabels": [Function],
-                    "removeAssignees": [Function],
-                    "removeLabel": [Function],
-                    "removeLabels": [Function],
-                    "replaceAllLabels": [Function],
-                    "replaceLabels": [Function],
-                    "setLabels": [Function],
-                    "unlock": [Function],
-                    "update": [Function],
-                    "updateComment": [Function],
-                    "updateLabel": [Function],
-                    "updateMilestone": [Function],
-                  },
-                  "licenses": Object {
-                    "get": [Function],
-                    "getAllCommonlyUsed": [Function],
-                    "getForRepo": [Function],
-                    "listCommonlyUsed": [Function],
-                  },
-                  "log": Object {
-                    "debug": [Function],
-                    "error": [Function],
-                    "info": [Function],
-                    "warn": [Function],
-                  },
-                  "markdown": Object {
-                    "render": [Function],
-                    "renderRaw": [Function],
-                  },
-                  "meta": Object {
-                    "get": [Function],
-                  },
-                  "migrations": Object {
-                    "cancelImport": [Function],
-                    "deleteArchiveForAuthenticatedUser": [Function],
-                    "deleteArchiveForOrg": [Function],
-                    "downloadArchiveForOrg": [Function],
-                    "getArchiveForAuthenticatedUser": [Function],
-                    "getCommitAuthors": [Function],
-                    "getImportProgress": [Function],
-                    "getImportStatus": [Function],
-                    "getLargeFiles": [Function],
-                    "getStatusForAuthenticatedUser": [Function],
-                    "getStatusForOrg": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listReposForOrg": [Function],
-                    "listReposForUser": [Function],
-                    "mapCommitAuthor": [Function],
-                    "setLfsPreference": [Function],
-                    "startForAuthenticatedUser": [Function],
-                    "startForOrg": [Function],
-                    "startImport": [Function],
-                    "unlockRepoForAuthenticatedUser": [Function],
-                    "unlockRepoForOrg": [Function],
-                    "updateImport": [Function],
-                  },
-                  "orgs": Object {
-                    "addOrUpdateMembership": [Function],
-                    "blockUser": [Function],
-                    "checkBlockedUser": [Function],
-                    "checkMembership": [Function],
-                    "checkMembershipForUser": [Function],
-                    "checkPublicMembership": [Function],
-                    "checkPublicMembershipForUser": [Function],
-                    "concealMembership": [Function],
-                    "convertMemberToOutsideCollaborator": [Function],
-                    "createHook": [Function],
-                    "createInvitation": [Function],
-                    "createWebhook": [Function],
-                    "deleteHook": [Function],
-                    "deleteWebhook": [Function],
-                    "get": [Function],
-                    "getHook": [Function],
-                    "getMembership": [Function],
-                    "getMembershipForAuthenticatedUser": [Function],
-                    "getMembershipForUser": [Function],
-                    "getWebhook": [Function],
-                    "list": [Function],
-                    "listAppInstallations": [Function],
-                    "listBlockedUsers": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForUser": [Function],
-                    "listHooks": [Function],
-                    "listInstallations": [Function],
-                    "listInvitationTeams": [Function],
-                    "listMembers": [Function],
-                    "listMemberships": [Function],
-                    "listMembershipsForAuthenticatedUser": [Function],
-                    "listOutsideCollaborators": [Function],
-                    "listPendingInvitations": [Function],
-                    "listPublicMembers": [Function],
-                    "listWebhooks": [Function],
-                    "pingHook": [Function],
-                    "pingWebhook": [Function],
-                    "publicizeMembership": [Function],
-                    "removeMember": [Function],
-                    "removeMembership": [Function],
-                    "removeMembershipForUser": [Function],
-                    "removeOutsideCollaborator": [Function],
-                    "removePublicMembershipForAuthenticatedUser": [Function],
-                    "setMembershipForUser": [Function],
-                    "setPublicMembershipForAuthenticatedUser": [Function],
-                    "unblockUser": [Function],
-                    "update": [Function],
-                    "updateHook": [Function],
-                    "updateMembership": [Function],
-                    "updateMembershipForAuthenticatedUser": [Function],
-                    "updateWebhook": [Function],
-                  },
-                  "paginate": [Function],
-                  "projects": Object {
-                    "addCollaborator": [Function],
-                    "createCard": [Function],
-                    "createColumn": [Function],
-                    "createForAuthenticatedUser": [Function],
-                    "createForOrg": [Function],
-                    "createForRepo": [Function],
-                    "delete": [Function],
-                    "deleteCard": [Function],
-                    "deleteColumn": [Function],
-                    "get": [Function],
-                    "getCard": [Function],
-                    "getColumn": [Function],
-                    "getPermissionForUser": [Function],
-                    "listCards": [Function],
-                    "listCollaborators": [Function],
-                    "listColumns": [Function],
-                    "listForOrg": [Function],
-                    "listForRepo": [Function],
-                    "listForUser": [Function],
-                    "moveCard": [Function],
-                    "moveColumn": [Function],
-                    "removeCollaborator": [Function],
-                    "reviewUserPermissionLevel": [Function],
-                    "update": [Function],
-                    "updateCard": [Function],
-                    "updateColumn": [Function],
-                  },
-                  "pulls": Object {
-                    "checkIfMerged": [Function],
-                    "create": [Function],
-                    "createComment": [Function],
-                    "createReplyForReviewComment": [Function],
-                    "createReview": [Function],
-                    "createReviewComment": [Function],
-                    "createReviewCommentReply": [Function],
-                    "createReviewRequest": [Function],
-                    "deleteComment": [Function],
-                    "deletePendingReview": [Function],
-                    "deleteReviewComment": [Function],
-                    "deleteReviewRequest": [Function],
-                    "dismissReview": [Function],
-                    "get": [Function],
-                    "getComment": [Function],
-                    "getCommentsForReview": [Function],
-                    "getReview": [Function],
-                    "getReviewComment": [Function],
-                    "list": [Function],
-                    "listComments": [Function],
-                    "listCommentsForRepo": [Function],
-                    "listCommentsForReview": [Function],
-                    "listCommits": [Function],
-                    "listFiles": [Function],
-                    "listRequestedReviewers": [Function],
-                    "listReviewComments": [Function],
-                    "listReviewCommentsForRepo": [Function],
-                    "listReviewRequests": [Function],
-                    "listReviews": [Function],
-                    "merge": [Function],
-                    "removeRequestedReviewers": [Function],
-                    "requestReviewers": [Function],
-                    "submitReview": [Function],
-                    "update": [Function],
-                    "updateBranch": [Function],
-                    "updateComment": [Function],
-                    "updateReview": [Function],
-                    "updateReviewComment": [Function],
-                  },
-                  "rateLimit": Object {
-                    "get": [Function],
-                  },
-                  "reactions": Object {
-                    "createForCommitComment": [Function],
-                    "createForIssue": [Function],
-                    "createForIssueComment": [Function],
-                    "createForPullRequestReviewComment": [Function],
-                    "createForTeamDiscussionCommentInOrg": [Function],
-                    "createForTeamDiscussionInOrg": [Function],
-                    "delete": [Function],
-                    "deleteForCommitComment": [Function],
-                    "deleteForIssue": [Function],
-                    "deleteForIssueComment": [Function],
-                    "deleteForPullRequestComment": [Function],
-                    "deleteForTeamDiscussion": [Function],
-                    "deleteForTeamDiscussionComment": [Function],
-                    "deleteLegacy": [Function],
-                    "listForCommitComment": [Function],
-                    "listForIssue": [Function],
-                    "listForIssueComment": [Function],
-                    "listForPullRequestReviewComment": [Function],
-                    "listForTeamDiscussionCommentInOrg": [Function],
-                    "listForTeamDiscussionInOrg": [Function],
-                  },
-                  "repos": Object {
-                    "acceptInvitation": [Function],
-                    "addAppAccessRestrictions": [Function],
-                    "addCollaborator": [Function],
-                    "addDeployKey": [Function],
-                    "addProtectedBranchAdminEnforcement": [Function],
-                    "addProtectedBranchAppRestrictions": [Function],
-                    "addProtectedBranchRequiredSignatures": [Function],
-                    "addProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "addProtectedBranchTeamRestrictions": [Function],
-                    "addProtectedBranchUserRestrictions": [Function],
-                    "addStatusCheckContexts": [Function],
-                    "addTeamAccessRestrictions": [Function],
-                    "addUserAccessRestrictions": [Function],
-                    "checkCollaborator": [Function],
-                    "checkVulnerabilityAlerts": [Function],
-                    "compareCommits": [Function],
-                    "createCommitComment": [Function],
-                    "createCommitSignatureProtection": [Function],
-                    "createCommitStatus": [Function],
-                    "createDeployKey": [Function],
-                    "createDeployment": [Function],
-                    "createDeploymentStatus": [Function],
-                    "createDispatchEvent": [Function],
-                    "createForAuthenticatedUser": [Function],
-                    "createFork": [Function],
-                    "createHook": [Function],
-                    "createInOrg": [Function],
-                    "createOrUpdateFile": [Function],
-                    "createOrUpdateFileContents": [Function],
-                    "createPagesSite": [Function],
-                    "createRelease": [Function],
-                    "createStatus": [Function],
-                    "createUsingTemplate": [Function],
-                    "createWebhook": [Function],
-                    "declineInvitation": [Function],
-                    "delete": [Function],
-                    "deleteAccessRestrictions": [Function],
-                    "deleteAdminBranchProtection": [Function],
-                    "deleteBranchProtection": [Function],
-                    "deleteCommitComment": [Function],
-                    "deleteCommitSignatureProtection": [Function],
-                    "deleteDeployKey": [Function],
-                    "deleteDeployment": [Function],
-                    "deleteDownload": [Function],
-                    "deleteFile": [Function],
-                    "deleteHook": [Function],
-                    "deleteInvitation": [Function],
-                    "deletePagesSite": [Function],
-                    "deletePullRequestReviewProtection": [Function],
-                    "deleteRelease": [Function],
-                    "deleteReleaseAsset": [Function],
-                    "deleteWebhook": [Function],
-                    "disableAutomatedSecurityFixes": [Function],
-                    "disablePagesSite": [Function],
-                    "disableVulnerabilityAlerts": [Function],
-                    "downloadArchive": [Function],
-                    "enableAutomatedSecurityFixes": [Function],
-                    "enablePagesSite": [Function],
-                    "enableVulnerabilityAlerts": [Function],
-                    "get": [Function],
-                    "getAccessRestrictions": [Function],
-                    "getAdminBranchProtection": [Function],
-                    "getAllStatusCheckContexts": [Function],
-                    "getAllTopics": [Function],
-                    "getAppsWithAccessToProtectedBranch": [Function],
-                    "getArchiveLink": [Function],
-                    "getBranch": [Function],
-                    "getBranchProtection": [Function],
-                    "getClones": [Function],
-                    "getCodeFrequencyStats": [Function],
-                    "getCollaboratorPermissionLevel": [Function],
-                    "getCombinedStatusForRef": [Function],
-                    "getCommit": [Function],
-                    "getCommitActivityStats": [Function],
-                    "getCommitComment": [Function],
-                    "getCommitSignatureProtection": [Function],
-                    "getCommunityProfileMetrics": [Function],
-                    "getContent": [Function],
-                    "getContents": [Function],
-                    "getContributorsStats": [Function],
-                    "getDeployKey": [Function],
-                    "getDeployment": [Function],
-                    "getDeploymentStatus": [Function],
-                    "getDownload": [Function],
-                    "getHook": [Function],
-                    "getLatestPagesBuild": [Function],
-                    "getLatestRelease": [Function],
-                    "getPages": [Function],
-                    "getPagesBuild": [Function],
-                    "getParticipationStats": [Function],
-                    "getProtectedBranchAdminEnforcement": [Function],
-                    "getProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "getProtectedBranchRequiredSignatures": [Function],
-                    "getProtectedBranchRequiredStatusChecks": [Function],
-                    "getProtectedBranchRestrictions": [Function],
-                    "getPullRequestReviewProtection": [Function],
-                    "getPunchCardStats": [Function],
-                    "getReadme": [Function],
-                    "getRelease": [Function],
-                    "getReleaseAsset": [Function],
-                    "getReleaseByTag": [Function],
-                    "getStatusChecksProtection": [Function],
-                    "getTeamsWithAccessToProtectedBranch": [Function],
-                    "getTopPaths": [Function],
-                    "getTopReferrers": [Function],
-                    "getUsersWithAccessToProtectedBranch": [Function],
-                    "getViews": [Function],
-                    "getWebhook": [Function],
-                    "list": [Function],
-                    "listAssetsForRelease": [Function],
-                    "listBranches": [Function],
-                    "listBranchesForHeadCommit": [Function],
-                    "listCollaborators": [Function],
-                    "listCommentsForCommit": [Function],
-                    "listCommitComments": [Function],
-                    "listCommitCommentsForRepo": [Function],
-                    "listCommitStatusesForRef": [Function],
-                    "listCommits": [Function],
-                    "listContributors": [Function],
-                    "listDeployKeys": [Function],
-                    "listDeploymentStatuses": [Function],
-                    "listDeployments": [Function],
-                    "listDownloads": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listForOrg": [Function],
-                    "listForUser": [Function],
-                    "listForks": [Function],
-                    "listHooks": [Function],
-                    "listInvitations": [Function],
-                    "listInvitationsForAuthenticatedUser": [Function],
-                    "listLanguages": [Function],
-                    "listPagesBuilds": [Function],
-                    "listProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "listPublic": [Function],
-                    "listPullRequestsAssociatedWithCommit": [Function],
-                    "listReleaseAssets": [Function],
-                    "listReleases": [Function],
-                    "listStatusesForRef": [Function],
-                    "listTags": [Function],
-                    "listTeams": [Function],
-                    "listTopics": [Function],
-                    "listWebhooks": [Function],
-                    "merge": [Function],
-                    "pingHook": [Function],
-                    "pingWebhook": [Function],
-                    "removeAppAccessRestrictions": [Function],
-                    "removeBranchProtection": [Function],
-                    "removeCollaborator": [Function],
-                    "removeDeployKey": [Function],
-                    "removeProtectedBranchAdminEnforcement": [Function],
-                    "removeProtectedBranchAppRestrictions": [Function],
-                    "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "removeProtectedBranchRequiredSignatures": [Function],
-                    "removeProtectedBranchRequiredStatusChecks": [Function],
-                    "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "removeProtectedBranchRestrictions": [Function],
-                    "removeProtectedBranchTeamRestrictions": [Function],
-                    "removeProtectedBranchUserRestrictions": [Function],
-                    "removeStatusCheckContexts": [Function],
-                    "removeStatusCheckProtection": [Function],
-                    "removeTeamAccessRestrictions": [Function],
-                    "removeUserAccessRestrictions": [Function],
-                    "replaceAllTopics": [Function],
-                    "replaceProtectedBranchAppRestrictions": [Function],
-                    "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-                    "replaceProtectedBranchTeamRestrictions": [Function],
-                    "replaceProtectedBranchUserRestrictions": [Function],
-                    "replaceTopics": [Function],
-                    "requestPageBuild": [Function],
-                    "requestPagesBuild": [Function],
-                    "retrieveCommunityProfileMetrics": [Function],
-                    "setAdminBranchProtection": [Function],
-                    "setAppAccessRestrictions": [Function],
-                    "setStatusCheckContexts": [Function],
-                    "setTeamAccessRestrictions": [Function],
-                    "setUserAccessRestrictions": [Function],
-                    "testPushHook": [Function],
-                    "testPushWebhook": [Function],
-                    "transfer": [Function],
-                    "update": [Function],
-                    "updateBranchProtection": [Function],
-                    "updateCommitComment": [Function],
-                    "updateHook": [Function],
-                    "updateInformationAboutPagesSite": [Function],
-                    "updateInvitation": [Function],
-                    "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-                    "updateProtectedBranchRequiredStatusChecks": [Function],
-                    "updatePullRequestReviewProtection": [Function],
-                    "updateRelease": [Function],
-                    "updateReleaseAsset": [Function],
-                    "updateStatusCheckPotection": [Function],
-                    "updateWebhook": [Function],
-                    "uploadReleaseAsset": [Function],
-                  },
-                  "request": [Function],
-                  "search": Object {
-                    "code": [Function],
-                    "commits": [Function],
-                    "issuesAndPullRequests": [Function],
-                    "labels": [Function],
-                    "repos": [Function],
-                    "topics": [Function],
-                    "users": [Function],
-                  },
-                  "teams": Object {
-                    "addOrUpdateMembershipForUserInOrg": [Function],
-                    "addOrUpdateMembershipInOrg": [Function],
-                    "addOrUpdateProjectInOrg": [Function],
-                    "addOrUpdateProjectPermissionsInOrg": [Function],
-                    "addOrUpdateRepoInOrg": [Function],
-                    "addOrUpdateRepoPermissionsInOrg": [Function],
-                    "checkManagesRepoInOrg": [Function],
-                    "checkPermissionsForProjectInOrg": [Function],
-                    "checkPermissionsForRepoInOrg": [Function],
-                    "create": [Function],
-                    "createDiscussionCommentInOrg": [Function],
-                    "createDiscussionInOrg": [Function],
-                    "deleteDiscussionCommentInOrg": [Function],
-                    "deleteDiscussionInOrg": [Function],
-                    "deleteInOrg": [Function],
-                    "getByName": [Function],
-                    "getDiscussionCommentInOrg": [Function],
-                    "getDiscussionInOrg": [Function],
-                    "getMembershipForUserInOrg": [Function],
-                    "getMembershipInOrg": [Function],
-                    "list": [Function],
-                    "listChildInOrg": [Function],
-                    "listDiscussionCommentsInOrg": [Function],
-                    "listDiscussionsInOrg": [Function],
-                    "listForAuthenticatedUser": [Function],
-                    "listMembersInOrg": [Function],
-                    "listPendingInvitationsInOrg": [Function],
-                    "listProjectsInOrg": [Function],
-                    "listReposInOrg": [Function],
-                    "removeMembershipForUserInOrg": [Function],
-                    "removeMembershipInOrg": [Function],
-                    "removeProjectInOrg": [Function],
-                    "removeRepoInOrg": [Function],
-                    "reviewProjectInOrg": [Function],
-                    "updateDiscussionCommentInOrg": [Function],
-                    "updateDiscussionInOrg": [Function],
-                    "updateInOrg": [Function],
-                  },
-                  "users": Object {
-                    "addEmailForAuthenticated": [Function],
-                    "addEmails": [Function],
-                    "block": [Function],
-                    "checkBlocked": [Function],
-                    "checkFollowing": [Function],
-                    "checkFollowingForUser": [Function],
-                    "checkPersonIsFollowedByAuthenticated": [Function],
-                    "createGpgKey": [Function],
-                    "createGpgKeyForAuthenticated": [Function],
-                    "createPublicKey": [Function],
-                    "createPublicSshKeyForAuthenticated": [Function],
-                    "deleteEmailForAuthenticated": [Function],
-                    "deleteEmails": [Function],
-                    "deleteGpgKey": [Function],
-                    "deleteGpgKeyForAuthenticated": [Function],
-                    "deletePublicKey": [Function],
-                    "deletePublicSshKeyForAuthenticated": [Function],
-                    "follow": [Function],
-                    "getAuthenticated": [Function],
-                    "getByUsername": [Function],
-                    "getContextForUser": [Function],
-                    "getGpgKey": [Function],
-                    "getGpgKeyForAuthenticated": [Function],
-                    "getPublicKey": [Function],
-                    "getPublicSshKeyForAuthenticated": [Function],
-                    "list": [Function],
-                    "listBlocked": [Function],
-                    "listBlockedByAuthenticated": [Function],
-                    "listEmails": [Function],
-                    "listEmailsForAuthenticated": [Function],
-                    "listFollowedByAuthenticated": [Function],
-                    "listFollowersForAuthenticatedUser": [Function],
-                    "listFollowersForUser": [Function],
-                    "listFollowingForAuthenticatedUser": [Function],
-                    "listFollowingForUser": [Function],
-                    "listGpgKeys": [Function],
-                    "listGpgKeysForAuthenticated": [Function],
-                    "listGpgKeysForUser": [Function],
-                    "listPublicEmails": [Function],
-                    "listPublicEmailsForAuthenticated": [Function],
-                    "listPublicKeys": [Function],
-                    "listPublicKeysForUser": [Function],
-                    "listPublicSshKeysForAuthenticated": [Function],
-                    "setPrimaryEmailVisibilityForAuthenticated": [Function],
-                    "togglePrimaryEmailVisibility": [Function],
-                    "unblock": [Function],
-                    "unfollow": [Function],
-                    "updateAuthenticated": [Function],
-                  },
-                },
-              },
-              "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isHostedDataExplorerEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isPublishNotebookPaneEnabled": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
-              "isSparkEnabled": [Function],
-              "isSparkEnabledForAccount": [Function],
+              "isShellEnabled": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "junoClient": JunoClient {
-                "cachedPinnedRepos": [Function],
-              },
               "memoryUsageInfo": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "onGitHubClientError": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "openDialog": undefined,
               "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
               "refreshNotebookList": [Function],
-              "refreshTreeTitle": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -3807,7 +427,7 @@ exports[`SettingsComponent renders 1`] = `
               "automatic": true,
               "excludedPaths": Array [],
               "includedPaths": Array [],
-              "indexingMode": "default",
+              "indexingMode": "consistent",
             }
           }
           indexingPolicyContentBaseline={
@@ -3815,7 +435,7 @@ exports[`SettingsComponent renders 1`] = `
               "automatic": true,
               "excludedPaths": Array [],
               "includedPaths": Array [],
-              "indexingMode": "default",
+              "indexingMode": "consistent",
             }
           }
           logIndexingPolicySuccessMessage={[Function]}
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 8b20d32db..9ee8b272e 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -187,9 +187,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <TooltipHost
             directionalHint={DirectionalHint.topLeftEdge}
             content={
-              showFreeTierExceedThroughputTooltip &&
-              throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
-                ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
+              showFreeTierExceedThroughputTooltip && throughput > SharedConstants.FreeTierLimits.RU
+                ? `The first ${SharedConstants.FreeTierLimits.RU} RU/s in this account are free. Billing will apply to any throughput beyond ${SharedConstants.FreeTierLimits.RU} RU/s.`
                 : undefined
             }
           >
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts b/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
deleted file mode 100644
index eef3c7193..000000000
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
+++ /dev/null
@@ -1,308 +0,0 @@
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import * as ko from "knockout";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutoscaleV3.html";
-import { KeyCodes } from "../../../Common/Constants";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-
-import { userContext } from "../../../UserContext";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-/**
- * Throughput Input:
- *
- * Creates a set of controls to input, sanitize and increase/decrease throughput
- *
- * How to use in your markup:
- * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
- * </throughput-input>
- *
- */
-
-/**
- * Parameters for this component
- */
-export interface ThroughputInputParams {
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-
-  /**
-   * Observable to bind the Throughput value to
-   */
-  value: ViewModels.Editable<number>;
-
-  /**
-   * Text to use as id for testing
-   */
-  testId: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel?: ko.Observable<string>;
-
-  /**
-   * Minimum value in the range
-   */
-  minimum: ko.Observable<number>;
-
-  /**
-   * Maximum value in the range
-   */
-  maximum: ko.Observable<number>;
-
-  /**
-   * Step value for increase/decrease
-   */
-  step?: number;
-
-  /**
-   * Observable to bind the Throughput enabled status
-   */
-  isEnabled?: ko.Observable<boolean>;
-
-  /**
-   * Should show pricing controls
-   */
-  costsVisible: ko.Observable<boolean>;
-
-  /**
-   * RU price
-   */
-  requestUnitsUsageCost: ko.Computed<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
-
-  /**
-   * State of the spending acknowledge checkbox
-   */
-  spendAckChecked?: ko.Observable<boolean>;
-
-  /**
-   * id of the spending acknowledge checkbox
-   */
-  spendAckId?: ko.Observable<string>;
-
-  /**
-   * spending acknowledge text
-   */
-  spendAckText?: ko.Observable<string>;
-
-  /**
-   * Show spending acknowledge controls
-   */
-  spendAckVisible?: ko.Observable<boolean>;
-
-  /**
-   * Display * to the left of the label
-   */
-  showAsMandatory: boolean;
-
-  /**
-   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
-   */
-  isFixed: boolean;
-
-  /**
-   * Label of the provisioned throughut control
-   */
-  label: ko.Observable<string>;
-
-  /**
-   * Text of the info bubble for provisioned throughut control
-   */
-  infoBubbleText?: ko.Observable<string>;
-
-  /**
-   * Computed value that decides if value can exceed maximum allowable value
-   */
-  canExceedMaximumValue?: ko.Computed<boolean>;
-
-  /**
-   * CSS classes to apply on input element
-   */
-  cssClass?: string;
-
-  isAutoPilotSelected: ko.Observable<boolean>;
-  throughputAutoPilotRadioId: string;
-  throughputProvisionedRadioId: string;
-  throughputModeRadioName: string;
-  maxAutoPilotThroughputSet: ViewModels.Editable<number>;
-  autoPilotUsageCost: ko.Computed<string>;
-  overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  freeTierExceedThroughputTooltip?: ko.Observable<string>;
-  freeTierExceedThroughputWarning?: ko.Observable<string>;
-}
-
-export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
-  public ariaLabel: ko.Observable<string>;
-  public canExceedMaximumValue: ko.Computed<boolean>;
-  public step: ko.Computed<number>;
-  public testId: string;
-  public value: ViewModels.Editable<number>;
-  public minimum: ko.Observable<number>;
-  public maximum: ko.Observable<number>;
-  public isEnabled: ko.Observable<boolean>;
-  public cssClass: string;
-  public decreaseButtonAriaLabel: string;
-  public increaseButtonAriaLabel: string;
-  public costsVisible: ko.Observable<boolean>;
-  public requestUnitsUsageCost: ko.Computed<string>;
-  public spendAckChecked: ko.Observable<boolean>;
-  public spendAckId: ko.Observable<string>;
-  public spendAckText: ko.Observable<string>;
-  public spendAckVisible: ko.Observable<boolean>;
-  public showAsMandatory: boolean;
-  public infoBubbleText: string | ko.Observable<string>;
-  public label: ko.Observable<string>;
-  public isFixed: boolean;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public throughputAutoPilotRadioId: string;
-  public throughputProvisionedRadioId: string;
-  public throughputModeRadioName: string;
-  public maxAutoPilotThroughputSet: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public minAutoPilotThroughput: ko.Observable<number>;
-  public overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  public isManualThroughputInputFieldRequired: ko.Computed<boolean>;
-  public isAutoscaleThroughputInputFieldRequired: ko.Computed<boolean>;
-  public freeTierExceedThroughputTooltip: ko.Observable<string>;
-  public freeTierExceedThroughputWarning: ko.Observable<string>;
-  public showFreeTierExceedThroughputTooltip: ko.Computed<boolean>;
-  public showFreeTierExceedThroughputWarning: ko.Computed<boolean>;
-
-  public constructor(options: ThroughputInputParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: ThroughputInputParams = options;
-    this.testId = params.testId || "ThroughputValue";
-    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
-    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
-    this.isEnabled = params.isEnabled || ko.observable(true);
-    this.cssClass = params.cssClass || "textfontclr collid migration";
-    this.minimum = params.minimum;
-    this.maximum = params.maximum;
-    this.value = params.value;
-    this.costsVisible = options.costsVisible;
-    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
-    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
-    this.spendAckId = options.spendAckId || ko.observable<string>();
-    this.spendAckText = options.spendAckText || ko.observable<string>();
-    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
-    this.showAsMandatory = !!options.showAsMandatory;
-    this.isFixed = !!options.isFixed;
-    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
-    this.label = options.label || ko.observable<string>();
-    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
-    this.isAutoPilotSelected.subscribe((value) => {
-      TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-        changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-        dataExplorerArea: "Scale Tab V1",
-      });
-    });
-
-    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
-    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
-    this.throughputModeRadioName = options.throughputModeRadioName;
-    this.overrideWithAutoPilotSettings = options.overrideWithAutoPilotSettings || ko.observable<boolean>(false);
-    this.overrideWithProvisionedThroughputSettings =
-      options.overrideWithProvisionedThroughputSettings || ko.observable<boolean>(false);
-
-    this.maxAutoPilotThroughputSet =
-      options.maxAutoPilotThroughputSet || ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-    this.autoPilotUsageCost = options.autoPilotUsageCost;
-    this.minAutoPilotThroughput = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-
-    this.step = ko.pureComputed(() => {
-      if (this.isAutoPilotSelected()) {
-        return AutoPilotUtils.autoPilotIncrementStep;
-      }
-      return params.step || ThroughputInputViewModel._defaultStep;
-    });
-    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step().toString();
-    this.increaseButtonAriaLabel = "Increase throughput by " + this.step().toString();
-    this.isManualThroughputInputFieldRequired = ko.pureComputed(() => this.isEnabled() && !this.isAutoPilotSelected());
-    this.isAutoscaleThroughputInputFieldRequired = ko.pureComputed(
-      () => this.isEnabled() && this.isAutoPilotSelected()
-    );
-
-    this.freeTierExceedThroughputTooltip = options.freeTierExceedThroughputTooltip || ko.observable<string>();
-    this.freeTierExceedThroughputWarning = options.freeTierExceedThroughputWarning || ko.observable<string>();
-    this.showFreeTierExceedThroughputTooltip = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputTooltip() && this.value() > 400
-    );
-
-    this.showFreeTierExceedThroughputWarning = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputWarning() && this.value() > 400
-    );
-  }
-
-  public decreaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput > this.minimum()) {
-      offerThroughput -= this.step();
-      if (offerThroughput < this.minimum()) {
-        offerThroughput = this.minimum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public increaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
-      offerThroughput += this.step();
-      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
-        offerThroughput = this.maximum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.increaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.decreaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  private _getSanitizedValue(): number {
-    let throughput = this.value();
-
-    if (this.isAutoPilotSelected()) {
-      throughput = this.maxAutoPilotThroughputSet();
-    }
-    return isNaN(throughput) ? 0 : Number(throughput);
-  }
-
-  private static _defaultStep: number = 100;
-}
-
-export const ThroughputInputComponentAutoPilotV3 = {
-  viewModel: ThroughputInputViewModel,
-  template: ThroughputInputComponentAutoscaleV3,
-};
diff --git a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
index 75d059dc3..b9932656a 100644
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -14,7 +14,6 @@ describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
     explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
-    explorerStub.canExceedMaximumValue = ko.computed<boolean>(() => false);
     explorerStub.findDatabaseWithId = () => database;
     explorerStub.refreshAllDatabases = () => Q.resolve();
     return explorerStub;
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index af0c19edf..b4a922b85 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -6,42 +6,36 @@ import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { ExplorerMetrics, HttpStatusCodes } from "../Common/Constants";
+import { ExplorerMetrics } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
+import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
-import { sendCachedDataMessage } from "../Common/MessageHandler";
 import { QueriesClient } from "../Common/QueriesClient";
 import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
-import { GitHubClient } from "../GitHub/GitHubClient";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { trackEvent } from "../Shared/appInsights";
-import * as SharedConstants from "../Shared/Constants";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
-import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import * as ComponentRegisterer from "./ComponentRegisterer";
-import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
@@ -54,8 +48,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
@@ -67,7 +60,7 @@ import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksP
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
 import { AddTableEntityPanel } from "./Panes/Tables/AddTableEntityPanel";
 import { EditTableEntityPanel } from "./Panes/Tables/EditTableEntityPanel";
-import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
+import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
 import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel";
@@ -93,26 +86,16 @@ export interface ExplorerParams {
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
   openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   closeSidePanel: () => void;
-  closeDialog: () => void;
-  openDialog: (props: DialogProps) => void;
   tabsManager: TabsManager;
 }
 
 export default class Explorer {
-  public addCollectionText: ko.Observable<string>;
-  public collectionTitle: ko.Observable<string>;
-  public deleteCollectionText: ko.Observable<string>;
-  public deleteDatabaseText: ko.Observable<string>;
-  public collectionTreeNodeAltText: ko.Observable<string>;
-  public refreshTreeTitle: ko.Observable<string>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
   public canSaveQueries: ko.Computed<boolean>;
-  public features: ko.Observable<any>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
@@ -123,7 +106,6 @@ export default class Explorer {
   private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
 
   // Panes
-  public contextPanes: ContextualPaneBase[];
   public openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   public closeSidePanel: () => void;
 
@@ -146,18 +128,10 @@ export default class Explorer {
   public isTabsContentExpanded: ko.Observable<boolean>;
   public tabsManager: TabsManager;
 
-  // Contextual panes
-  public cassandraAddCollectionPane: CassandraAddCollectionPane;
-  private gitHubClient: GitHubClient;
   public gitHubOAuthService: GitHubOAuthService;
-  public junoClient: JunoClient;
 
   // features
-  public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
-  public isMongoIndexingEnabled: ko.Observable<boolean>;
-  public canExceedMaximumValue: ko.Computed<boolean>;
-  public isAutoscaleDefaultEnabled: ko.Observable<boolean>;
   public isSchemaEnabled: ko.Computed<boolean>;
 
   // Notebooks
@@ -166,20 +140,14 @@ export default class Explorer {
   public notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>;
   public notebookWorkspaceManager: NotebookWorkspaceManager;
   public sparkClusterConnectionInfo: ko.Observable<DataModels.SparkClusterConnectionInfo>;
-  public isSparkEnabled: ko.Observable<boolean>;
-  public isSparkEnabledForAccount: ko.Observable<boolean>;
-  public arcadiaToken: ko.Observable<string>;
-  public arcadiaWorkspaces: ko.ObservableArray<ArcadiaWorkspaceItem>;
-  public hasStorageAnalyticsAfecFeature: ko.Observable<boolean>;
   public isSynapseLinkUpdating: ko.Observable<boolean>;
   public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: NotebookManager;
-  public openDialog: ExplorerParams["openDialog"];
-  public closeDialog: ExplorerParams["closeDialog"];
+
+  public isShellEnabled: ko.Observable<boolean>;
 
   private _isInitializingNotebooks: boolean;
   private notebookBasePath: ko.Observable<string>;
-  private _arcadiaManager: ArcadiaResourceManager;
   private notebookToImport: {
     name: string;
     content: string;
@@ -191,44 +159,20 @@ export default class Explorer {
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
-    this.gitHubClient = new GitHubClient(this.onGitHubClientError);
-    this.junoClient = new JunoClient();
     this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
     this.setNotificationConsoleData = params?.setNotificationConsoleData;
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
     this.openSidePanel = params?.openSidePanel;
     this.closeSidePanel = params?.closeSidePanel;
-    this.closeDialog = params?.closeDialog;
-    this.openDialog = params?.openDialog;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this.addCollectionText = ko.observable<string>("New Collection");
-    this.collectionTitle = ko.observable<string>("Collections");
-    this.collectionTreeNodeAltText = ko.observable<string>("Collection");
-    this.deleteCollectionText = ko.observable<string>("Delete Collection");
-    this.deleteDatabaseText = ko.observable<string>("Delete Database");
-    this.refreshTreeTitle = ko.observable<string>("Refresh collections");
-
     this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
-    this.arcadiaToken = ko.observable<string>();
-    this.arcadiaToken.subscribe((token: string) => {
-      if (token) {
-        const notebookTabs = this.tabsManager.getTabs(ViewModels.CollectionTabKind.NotebookV2);
-        (notebookTabs || []).forEach((tab: NotebookV2Tab) => {
-          tab.reconfigureServiceEndpoints();
-        });
-      }
-    });
-
+    this.isShellEnabled = ko.observable(false);
     this.isNotebooksEnabledForAccount = ko.observable(false);
     this.isNotebooksEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
-    this.isSparkEnabledForAccount = ko.observable(false);
-    this.isSparkEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
-    this.hasStorageAnalyticsAfecFeature = ko.observable(false);
-    this.hasStorageAnalyticsAfecFeature.subscribe((enabled: boolean) => this.refreshCommandBarButtons());
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
@@ -237,57 +181,26 @@ export default class Explorer {
           : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
         this.notebookWorkspaceManager = new NotebookWorkspaceManager();
-        this.arcadiaWorkspaces = ko.observableArray();
-        this._arcadiaManager = new ArcadiaResourceManager();
-        this._isAfecFeatureRegistered(Constants.AfecFeatures.StorageAnalytics).then((isRegistered) =>
-          this.hasStorageAnalyticsAfecFeature(isRegistered)
+        await this._refreshNotebooksEnabledStateForAccount();
+        this.isNotebookEnabled(
+          userContext.authType !== AuthType.ResourceToken &&
+            ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+              userContext.features.enableNotebooks)
         );
-        Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
-          async () => {
-            this.isNotebookEnabled(
-              userContext.authType !== AuthType.ResourceToken &&
-                ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-                  userContext.features.enableNotebooks)
-            );
-            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
-              isNotebookEnabled: this.isNotebookEnabled(),
-              dataExplorerArea: Constants.Areas.Notebook,
-            });
 
-            if (this.isNotebookEnabled()) {
-              await this.initNotebooks(userContext.databaseAccount);
-              const workspaces = await this._getArcadiaWorkspaces();
-              this.arcadiaWorkspaces(workspaces);
-            } else if (this.notebookToImport) {
-              // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
-              this._openSetupNotebooksPaneForQuickstart();
-            }
+        this.isShellEnabled(this.isNotebookEnabled() && isPublicInternetAccessAllowed());
 
-            this.isSparkEnabled(
-              (this.isNotebookEnabled() &&
-                this.isSparkEnabledForAccount() &&
-                this.arcadiaWorkspaces() &&
-                this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
-            );
-            if (this.isSparkEnabled()) {
-              trackEvent(
-                { name: "LoadedWithSparkEnabled" },
-                {
-                  subscriptionId: userContext.subscriptionId,
-                  accountName: userContext.databaseAccount?.name,
-                  accountId: userContext.databaseAccount?.id,
-                  platform: configContext.platform,
-                }
-              );
-              const pollArcadiaTokenRefresh = async () => {
-                this.arcadiaToken(await this.getArcadiaToken());
-                setTimeout(() => pollArcadiaTokenRefresh(), this.getTokenRefreshInterval(this.arcadiaToken()));
-              };
-              await pollArcadiaTokenRefresh();
-            }
-          }
-        );
+        TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
+          isNotebookEnabled: this.isNotebookEnabled(),
+          dataExplorerArea: Constants.Areas.Notebook,
+        });
+
+        if (this.isNotebookEnabled()) {
+          await this.initNotebooks(userContext.databaseAccount);
+        } else if (this.notebookToImport) {
+          // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+          this._openSetupNotebooksPaneForQuickstart();
+        }
       }
     });
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
@@ -298,15 +211,8 @@ export default class Explorer {
     this.resourceTokenCollectionId = ko.observable<string>();
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
-    this.isMongoIndexingEnabled = ko.observable<boolean>(false);
-    this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
-
-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
-
     this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
 
-    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
-
     this.databases = ko.observableArray<ViewModels.Database>();
     this.canSaveQueries = ko.computed<boolean>(() => {
       const savedQueriesDatabase: ViewModels.Database = _.find(
@@ -397,13 +303,6 @@ export default class Explorer {
       }
     });
 
-    this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
-      id: "cassandraaddcollectionpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.tabsManager = params?.tabsManager ?? new TabsManager();
     this.tabsManager.openedTabs.subscribe((tabs) => {
       if (tabs.length === 0) {
@@ -427,46 +326,10 @@ export default class Explorer {
     });
 
     switch (userContext.apiType) {
-      case "SQL":
-        this.addCollectionText("New Container");
-        this.collectionTitle("SQL API");
-        this.collectionTreeNodeAltText("Container");
-        this.deleteCollectionText("Delete Container");
-        this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh containers");
-        break;
-      case "Mongo":
-        this.addCollectionText("New Collection");
-        this.collectionTitle("Collections");
-        this.collectionTreeNodeAltText("Collection");
-        this.deleteCollectionText("Delete Collection");
-        this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh collections");
-        break;
-      case "Gremlin":
-        this.addCollectionText("New Graph");
-        this.deleteCollectionText("Delete Graph");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Gremlin API");
-        this.collectionTreeNodeAltText("Graph");
-        this.refreshTreeTitle("Refresh graphs");
-        break;
       case "Tables":
-        this.addCollectionText("New Table");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Azure Table API");
-        this.collectionTreeNodeAltText("Table");
-        this.refreshTreeTitle("Refresh tables");
         this.tableDataClient = new TablesAPIDataClient();
         break;
       case "Cassandra":
-        this.addCollectionText("New Table");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Keyspace");
-        this.collectionTitle("Cassandra API");
-        this.collectionTreeNodeAltText("Table");
-        this.refreshTreeTitle("Refresh tables");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }
@@ -501,8 +364,6 @@ export default class Explorer {
       this.refreshNotebookList();
     });
 
-    this.isSparkEnabled = ko.observable(false);
-    this.isSparkEnabled.subscribe((isEnabled: boolean) => this.refreshCommandBarButtons());
     this.resourceTree = new ResourceTreeAdapter(this);
     this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
     this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
@@ -540,24 +401,11 @@ export default class Explorer {
         ],
       });
     }
-  }
 
-  private onGitHubClientError = (error: any): void => {
-    Logger.logError(getErrorMessage(error), "NotebookManager/onGitHubClientError");
-
-    if (error.status === HttpStatusCodes.Unauthorized) {
-      this.gitHubOAuthService.resetToken();
-
-      this.showOkCancelModalDialog(
-        undefined,
-        "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
-        "Connect to GitHub",
-        () => this.openGitHubReposPanel("Connect to GitHub"),
-        "Cancel",
-        undefined
-      );
+    if (configContext.enableSchemaAnalyzer) {
+      userContext.features.enableSchemaAnalyzer = true;
     }
-  };
+  }
 
   public openEnableSynapseLinkDialog(): void {
     const addSynapseLinkDialogProps: DialogProps = {
@@ -566,7 +414,6 @@ export default class Explorer {
         linkUrl: "https://aka.ms/cosmosdb-synapselink",
       },
       isModal: true,
-      visible: true,
       title: `Enable Azure Synapse Link on your Cosmos DB account`,
       subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads.
       Azure Synapse Link brings together Cosmos Db Analytical Store and Synapse Analytics`,
@@ -579,24 +426,19 @@ export default class Explorer {
           "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account."
         );
         this.isSynapseLinkUpdating(true);
-        this._closeSynapseLinkModalDialog();
-
-        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(userContext.databaseAccount.id);
+        useDialog.getState().closeDialog();
 
         try {
-          const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
-            userContext.databaseAccount.id,
-            "2019-12-12",
-            {
-              properties: {
-                enableAnalyticalStorage: true,
-              },
-            }
-          );
+          await update(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.id, {
+            properties: {
+              enableAnalyticalStorage: true,
+            },
+          });
+
           clearInProgressMessage();
           logConsoleInfo("Enabled Azure Synapse Link for this account");
           TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
-          updateUserContext({ databaseAccount });
+          userContext.databaseAccount.properties.enableAnalyticalStorage = true;
         } catch (error) {
           clearInProgressMessage();
           logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
@@ -607,11 +449,11 @@ export default class Explorer {
       },
 
       onSecondaryButtonClick: () => {
-        this._closeSynapseLinkModalDialog();
+        useDialog.getState().closeDialog();
         TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink);
       },
     };
-    this.openDialog(addSynapseLinkDialogProps);
+    useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
 
     // TODO: return result
@@ -770,52 +612,6 @@ export default class Explorer {
     window.open(Constants.Urls.feedbackEmail, "_blank");
   };
 
-  public async getArcadiaToken(): Promise<string> {
-    return new Promise<string>((resolve: (token: string) => void, reject: (error: any) => void) => {
-      sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
-        (token: string) => {
-          resolve(token);
-        },
-        (error: any) => {
-          Logger.logError(getErrorMessage(error), "Explorer/getArcadiaToken");
-          resolve(undefined);
-        }
-      );
-    });
-  }
-
-  private async _getArcadiaWorkspaces(): Promise<ArcadiaWorkspaceItem[]> {
-    try {
-      const workspaces = await this._arcadiaManager.listWorkspacesAsync([userContext.subscriptionId]);
-      let workspaceItems: ArcadiaWorkspaceItem[] = new Array(workspaces.length);
-      const sparkPromises: Promise<void>[] = [];
-      workspaces.forEach((workspace, i) => {
-        let promise = this._arcadiaManager.listSparkPoolsAsync(workspaces[i].id).then(
-          (sparkpools) => {
-            workspaceItems[i] = { ...workspace, sparkPools: sparkpools };
-          },
-          (error) => {
-            Logger.logError(getErrorMessage(error), "Explorer/this._arcadiaManager.listSparkPoolsAsync");
-          }
-        );
-        sparkPromises.push(promise);
-      });
-
-      return Promise.all(sparkPromises).then(() => workspaceItems);
-    } catch (error) {
-      handleError(error, "Explorer/this._arcadiaManager.listWorkspacesAsync", "Get Arcadia workspaces failed");
-      return Promise.resolve([]);
-    }
-  }
-
-  public async createWorkspace(): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
-  }
-
-  public async createSparkPool(workspaceId: string): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
-  }
-
   public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
     if (!databaseAccount) {
       throw new Error("No database account specified");
@@ -873,15 +669,14 @@ export default class Explorer {
 
     const resetConfirmationDialogProps: DialogProps = {
       isModal: true,
-      visible: true,
       title: "Reset Workspace",
       subText: "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?",
       primaryButtonText: "OK",
       secondaryButtonText: "Cancel",
       onPrimaryButtonClick: this._resetNotebookWorkspace,
-      onSecondaryButtonClick: this._closeModalDialog,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
     };
-    this.openDialog(resetConfirmationDialogProps);
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
   }
 
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
@@ -926,7 +721,7 @@ export default class Explorer {
   }
 
   private _resetNotebookWorkspace = async () => {
-    this._closeModalDialog();
+    useDialog.getState().closeDialog();
     const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
     try {
       await this.notebookManager?.notebookClient.resetWorkspace();
@@ -944,14 +739,6 @@ export default class Explorer {
     }
   };
 
-  private _closeModalDialog = () => {
-    this.closeDialog();
-  };
-
-  private _closeSynapseLinkModalDialog = () => {
-    this.closeDialog();
-  };
-
   public findSelectedDatabase(): ViewModels.Database {
     if (!this.selectedNode()) {
       return null;
@@ -1001,29 +788,10 @@ export default class Explorer {
       if (process.env.NODE_ENV === "development") {
         sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
       }
-      if (inputs.defaultCollectionThroughput) {
-        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
-      }
-      this.setFeatureFlagsFromFlights(inputs.flights);
       this.isAccountReady(true);
     }
   }
 
-  public setFeatureFlagsFromFlights(flights: readonly string[]): void {
-    if (!flights) {
-      return;
-    }
-    if (flights.indexOf(Constants.Flights.AutoscaleTest) !== -1) {
-      this.isAutoscaleDefaultEnabled(true);
-    }
-    if (flights.indexOf(Constants.Flights.MongoIndexing) !== -1) {
-      this.isMongoIndexingEnabled(true);
-    }
-    if (flights.indexOf(Constants.Flights.SchemaAnalyzer) !== -1) {
-      userContext.features.enableSchemaAnalyzer = true;
-    }
-  }
-
   public findSelectedCollection(): ViewModels.Collection {
     return (
       this.selectedNode().nodeKind === "Collection" ? this.selectedNode() : this.selectedNode().collection
@@ -1238,7 +1006,6 @@ export default class Explorer {
         onTakeSnapshot,
         onClosePanel
       );
-      this.isPublishNotebookPaneEnabled(true);
     }
   }
 
@@ -1247,14 +1014,15 @@ export default class Explorer {
   }
 
   public showOkModalDialog(title: string, msg: string): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: "Close",
       secondaryButtonText: undefined,
-      onPrimaryButtonClick: this._closeModalDialog,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+      },
       onSecondaryButtonClick: undefined,
     });
   }
@@ -1270,19 +1038,18 @@ export default class Explorer {
     textFieldProps?: TextFieldProps,
     isPrimaryButtonDisabled?: boolean
   ): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: okLabel,
       secondaryButtonText: cancelLabel,
       onPrimaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onOk && onOk();
       },
       onSecondaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onCancel && onCancel();
       },
       choiceGroupProps,
@@ -1368,7 +1135,7 @@ export default class Explorer {
       this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       this.openSidePanel(
-        "",
+        "Rename Notebook",
         <StringInputPane
           explorer={this}
           closePanel={() => {
@@ -1399,7 +1166,7 @@ export default class Explorer {
     }
 
     this.openSidePanel(
-      "",
+      "Create new directory",
       <StringInputPane
         explorer={this}
         closePanel={() => {
@@ -1517,57 +1284,6 @@ export default class Explorer {
     }
   }
 
-  public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
-    const { subscriptionId, authType } = userContext;
-    const armEndpoint = configContext.ARM_ENDPOINT;
-    if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
-      // explorer is not aware of the database account yet
-      this.isSparkEnabledForAccount(false);
-      return;
-    }
-
-    const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${Constants.AfecFeatures.Spark}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
-    try {
-      const sparkNotebooksFeature: DataModels.AfecFeature = await resourceProviderClient.getAsync(
-        featureUri,
-        Constants.ArmApiVersions.armFeatures
-      );
-      const isEnabled =
-        (sparkNotebooksFeature &&
-          sparkNotebooksFeature.properties &&
-          sparkNotebooksFeature.properties.state === "Registered") ||
-        false;
-      this.isSparkEnabledForAccount(isEnabled);
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/isSparkEnabledForAccount");
-      this.isSparkEnabledForAccount(false);
-    }
-  };
-
-  public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
-    const { subscriptionId, authType } = userContext;
-    const armEndpoint = configContext.ARM_ENDPOINT;
-    if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
-      // explorer is not aware of the database account yet
-      return false;
-    }
-
-    const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${featureName}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
-    try {
-      const featureStatus: DataModels.AfecFeature = await resourceProviderClient.getAsync(
-        featureUri,
-        Constants.ArmApiVersions.armFeatures
-      );
-      const isEnabled =
-        (featureStatus && featureStatus.properties && featureStatus.properties.state === "Registered") || false;
-      return isEnabled;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/isSparkEnabledForAccount");
-      return false;
-    }
-  };
   private refreshNotebookList = async (): Promise<void> => {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       return;
@@ -1600,14 +1316,13 @@ export default class Explorer {
     }
 
     if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
-      this.openDialog({
+      useDialog.getState().openDialog({
         isModal: true,
-        visible: true,
         title: "Unable to delete file",
         subText: "Directory is not empty.",
         primaryButtonText: "Close",
         secondaryButtonText: undefined,
-        onPrimaryButtonClick: this._closeModalDialog,
+        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
         onSecondaryButtonClick: undefined,
       });
       return Promise.reject();
@@ -1704,32 +1419,27 @@ export default class Explorer {
         throw new Error("Terminal kind: ${kind} not supported");
     }
 
-    const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(
-      ViewModels.CollectionTabKind.Terminal,
-      (tab) => tab.hashLocation() == hashLocation
+    const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(ViewModels.CollectionTabKind.Terminal, (tab) =>
+      tab.hashLocation().startsWith(hashLocation)
     ) as TerminalTab[];
-    let terminalTab: TerminalTab = terminalTabs && terminalTabs[0];
 
-    if (terminalTab) {
-      this.tabsManager.activateTab(terminalTab);
-    } else {
-      const newTab = new TerminalTab({
-        account: userContext.databaseAccount,
-        tabKind: ViewModels.CollectionTabKind.Terminal,
-        node: null,
-        title: title,
-        tabPath: title,
-        collection: null,
-        hashLocation: hashLocation,
-        isTabsContentExpanded: ko.observable(true),
-        onLoadStartKey: null,
-        onUpdateTabsButtons: this.onUpdateTabsButtons,
-        container: this,
-        kind: kind,
-      });
+    const index = terminalTabs.length + 1;
+    const newTab = new TerminalTab({
+      account: userContext.databaseAccount,
+      tabKind: ViewModels.CollectionTabKind.Terminal,
+      node: null,
+      title: `${title} ${index}`,
+      tabPath: `${title} ${index}`,
+      collection: null,
+      hashLocation: `${hashLocation} ${index}`,
+      isTabsContentExpanded: ko.observable(true),
+      onLoadStartKey: null,
+      onUpdateTabsButtons: this.onUpdateTabsButtons,
+      container: this,
+      kind: kind,
+    });
 
-      this.tabsManager.activateNewTab(newTab);
-    }
+    this.tabsManager.activateNewTab(newTab);
   }
 
   public async openGallery(
@@ -1775,7 +1485,7 @@ export default class Explorer {
 
   public onNewCollectionClicked(databaseId?: string): void {
     if (userContext.apiType === "Cassandra") {
-      this.cassandraAddCollectionPane.open();
+      this.openCassandraAddCollectionPane();
     } else {
       this.openAddCollectionPanel(databaseId);
     }
@@ -1790,30 +1500,6 @@ export default class Explorer {
     }
   }
 
-  private getTokenRefreshInterval(token: string): number {
-    let tokenRefreshInterval = Constants.ClientDefaults.arcadiaTokenRefreshInterval;
-    if (!token) {
-      return tokenRefreshInterval;
-    }
-
-    try {
-      const tokenPayload = decryptJWTToken(this.arcadiaToken());
-      if (tokenPayload && tokenPayload.hasOwnProperty("exp")) {
-        const expirationTime = tokenPayload.exp as number; // seconds since unix epoch
-        const now = new Date().getTime() / 1000;
-        const tokenExpirationIntervalInMs = (expirationTime - now) * 1000;
-        if (tokenExpirationIntervalInMs < tokenRefreshInterval) {
-          tokenRefreshInterval =
-            tokenExpirationIntervalInMs - Constants.ClientDefaults.arcadiaTokenRefreshIntervalPaddingMs;
-        }
-      }
-      return tokenRefreshInterval;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/getTokenRefreshInterval");
-      return tokenRefreshInterval;
-    }
-  }
-
   private _openSetupNotebooksPaneForQuickstart(): void {
     const title = "Enable Notebooks (Preview)";
     const description =
@@ -1845,11 +1531,6 @@ export default class Explorer {
     }
   }
 
-  public async loadSelectedDatabaseOffer(): Promise<void> {
-    const database = this.findSelectedDatabase();
-    await database?.loadOffer();
-  }
-
   public async loadDatabaseOffers(): Promise<void> {
     await Promise.all(
       this.databases()?.map(async (database: ViewModels.Database) => {
@@ -1891,7 +1572,7 @@ export default class Explorer {
       "Delete " + getDatabaseName(),
       <DeleteDatabaseConfirmationPanel
         explorer={this}
-        openNotificationConsole={this.expandConsole}
+        openNotificationConsole={() => this.expandConsole()}
         closePanel={this.closeSidePanel}
         selectedDatabase={this.findSelectedDatabase()}
       />
@@ -1967,6 +1648,16 @@ export default class Explorer {
     );
   }
 
+  public openCassandraAddCollectionPane(): void {
+    this.openSidePanel(
+      "Add Table",
+      <CassandraAddCollectionPane
+        explorer={this}
+        closePanel={() => this.closeSidePanel()}
+        cassandraApiClient={new CassandraAPIDataClient()}
+      />
+    );
+  }
   public openGitHubReposPanel(header: string, junoClient?: JunoClient): void {
     this.openSidePanel(
       header,
diff --git a/src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx b/src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx
index 14dd36ca1..ee2533e72 100644
--- a/src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx
+++ b/src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx
@@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
     expect(asFragment).toMatchSnapshot();
   });
 
-  it("should render node properties dropdown list ", () => {
+  it("should render node properties dropdown list", () => {
     const dropDownList = screen.getByText("Show vertex (node) as");
     expect(dropDownList).toBeDefined();
   });
diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
index 4d6da79f9..b9ad88dd8 100644
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -132,6 +132,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                 onLabelChange(event);
               }}
+              autoFocus
             />
             <div className="actionCol"></div>
           </div>
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index 269466866..d4e4c444d 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -30,9 +30,6 @@ export class CommandBarComponentAdapter implements ReactAdapter {
 
     // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
     const toWatch = [
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
       container.isDatabaseNodeOrNoneSelected,
       container.isDatabaseNodeSelected,
       container.isNoneSelected,
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
index 268f149b7..5af290993 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -15,7 +15,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -23,7 +22,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
@@ -58,7 +56,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -67,7 +64,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
@@ -126,7 +122,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -134,11 +129,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.isShellEnabled = ko.observable(true);
     });
 
     afterAll(() => {
@@ -154,6 +149,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
+      mockExplorer.isShellEnabled = ko.observable(true);
     });
 
     it("Mongo Api not available - button should be hidden", () => {
@@ -173,24 +169,18 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(openMongoShellBtn).toBeUndefined();
     });
 
-    it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
+    it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
-      expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(true);
-      expect(openMongoShellBtn.tooltipText).toBe(
-        "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
-      );
+      expect(openMongoShellBtn).toBeUndefined();
     });
 
-    it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
+    it("Notebooks is not enabled and is available - button should be hidden", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
-      expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      expect(openMongoShellBtn).toBeUndefined();
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
@@ -213,6 +203,16 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(openMongoShellBtn.disabled).toBe(false);
       expect(openMongoShellBtn.tooltipText).toBe("");
     });
+
+    it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
+      mockExplorer.isNotebookEnabled = ko.observable(true);
+      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      mockExplorer.isShellEnabled = ko.observable(false);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
   });
 
   describe("Open Cassandra Shell button", () => {
@@ -220,7 +220,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -229,7 +228,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -273,11 +271,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
-      expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(true);
-      expect(openCassandraShellBtn.tooltipText).toBe(
-        "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
-      );
+      expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
@@ -285,9 +279,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
-      expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
@@ -318,7 +310,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -328,7 +319,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       });
 
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
@@ -380,7 +370,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
   describe("Resource token", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index f24afabfc..7161d8d27 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -22,7 +22,7 @@ import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
-import { getDatabaseName } from "../../../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
@@ -61,48 +61,40 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
     if (container.notebookManager?.gitHubOAuthService) {
       buttons.push(createManageGitHubAccountButton(container));
     }
-  }
 
-  if (!container.isRunningOnNationalCloud()) {
-    if (!container.isNotebookEnabled()) {
-      buttons.push(createEnableNotebooksButton(container));
-    }
-
-    if (userContext.apiType === "Mongo") {
-      buttons.push(createOpenMongoTerminalButton(container));
-    }
-
-    if (userContext.apiType === "Cassandra") {
-      buttons.push(createOpenCassandraTerminalButton(container));
-    }
-  }
-
-  if (container.isNotebookEnabled()) {
     buttons.push(createOpenTerminalButton(container));
 
     buttons.push(createNotebookWorkspaceResetButton(container));
+    if (
+      (userContext.apiType === "Mongo" && container.isShellEnabled() && container.isDatabaseNodeOrNoneSelected()) ||
+      userContext.apiType === "Cassandra"
+    ) {
+      buttons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        buttons.push(createOpenCassandraTerminalButton(container));
+      } else {
+        buttons.push(createOpenMongoTerminalButton(container));
+      }
+    }
+  } else {
+    if (!container.isRunningOnNationalCloud()) {
+      buttons.push(createEnableNotebooksButton(container));
+    }
   }
 
   if (!container.isDatabaseNodeOrNoneSelected()) {
-    if (container.isNotebookEnabled()) {
-      buttons.push(createDivider());
-    }
+    const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
-    const isSqlQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-    if (isSqlQuerySupported) {
+    if (isQuerySupported) {
+      buttons.push(createDivider());
       const newSqlQueryBtn = createNewSQLQueryButton(container);
       buttons.push(newSqlQueryBtn);
     }
 
-    const isSupportedOpenQueryApi =
-      userContext.apiType === "SQL" || userContext.apiType === "Mongo" || userContext.apiType === "Gremlin";
-    const isSupportedOpenQueryFromDiskApi = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-    if (isSupportedOpenQueryApi && container.selectedNode() && container.findSelectedCollection()) {
+    if (isQuerySupported && container.selectedNode() && container.findSelectedCollection()) {
       const openQueryBtn = createOpenQueryButton(container);
       openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
       buttons.push(openQueryBtn);
-    } else if (isSupportedOpenQueryFromDiskApi && container.selectedNode() && container.findSelectedCollection()) {
-      buttons.push(createOpenQueryFromDiskButton(container));
     }
 
     if (areScriptsSupported()) {
@@ -132,13 +124,17 @@ export function createContextCommandBarButtons(container: Explorer): CommandButt
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!container.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = "New Shell";
+    const label = container.isShellEnabled() ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (container.isShellEnabled()) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
       },
       commandButtonLabel: label,
       ariaLabel: label,
@@ -219,7 +215,7 @@ function areScriptsSupported(): boolean {
 }
 
 function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
-  const label = container.addCollectionText();
+  const label = `New ${getCollectionName()}`;
   return {
     iconSrc: AddCollectionIcon,
     iconAlt: label,
diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
index a311cb329..abe90f3c0 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -1,11 +1,4 @@
-import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
-} from "@fluentui/react";
+import { ICommandBarItemProps, IconType, IDropdownOption, IDropdownStyles } from "@fluentui/react";
 import ChevronDownIcon from "images/Chevron_down.svg";
 import { Observable } from "knockout";
 import * as React from "react";
@@ -14,7 +7,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 
@@ -151,24 +143,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
         };
 
-        result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
-          return (
-            <Dropdown
-              placeholder={btn.dropdownPlaceholder}
-              defaultSelectedKey={btn.dropdownSelectedKey}
-              onChange={onDropdownChange}
-              options={btn.children.map((child: CommandButtonComponentProps) => ({
-                key: child.dropdownItemKey,
-                text: child.commandButtonLabel,
-              }))}
-              styles={dropdownStyles}
-            />
-          );
-        };
-      }
-
-      if (btn.isArcadiaPicker && btn.arcadiaProps) {
-        result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
+        return result;
       }
 
       return result;
diff --git a/src/Explorer/Notebook/NotebookComponent/epics.ts b/src/Explorer/Notebook/NotebookComponent/epics.ts
index 8c8610c0a..33eac5fac 100644
--- a/src/Explorer/Notebook/NotebookComponent/epics.ts
+++ b/src/Explorer/Notebook/NotebookComponent/epics.ts
@@ -36,7 +36,6 @@ import * as Constants from "../../../Common/Constants";
 import { Areas } from "../../../Common/Constants";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
@@ -105,11 +104,6 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
     params.append("session_id", sessionId);
   }
 
-  const userId = getUserPuid();
-  if (userId) {
-    params.append("user_id", userId);
-  }
-
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
@@ -289,7 +283,6 @@ export const launchWebSocketKernelEpic = (
         return EMPTY;
       }
       const serverConfig: NotebookServiceConfig = selectors.serverConfig(host);
-      serverConfig.userPuid = getUserPuid();
 
       const {
         payload: { kernelSpecName, cwd, kernelRef, contentRef },
@@ -766,25 +759,6 @@ const executeFocusedCellAndFocusNextEpic = (
   );
 };
 
-function getUserPuid(): string {
-  const arcadiaToken = window.dataExplorer && window.dataExplorer.arcadiaToken();
-  if (!arcadiaToken) {
-    return undefined;
-  }
-
-  let userPuid;
-  try {
-    const tokenPayload = decryptJWTToken(arcadiaToken);
-    if (tokenPayload && tokenPayload.hasOwnProperty("puid")) {
-      userPuid = tokenPayload.puid;
-    }
-  } catch (error) {
-    // ignore
-  }
-
-  return userPuid;
-}
-
 /**
  * Close tab if mimetype not supported
  * @param action$
diff --git a/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx b/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
index 99a6005d0..d45e79b01 100644
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
@@ -1,12 +1,11 @@
 /* eslint jsx-a11y/no-static-element-interactions: 0 */
 /* eslint jsx-a11y/click-events-have-key-events: 0 */
 
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 
-import { actions, selectors, ContentRef, AppState } from "@nteract/core";
-
 interface ComponentProps {
   id: string;
   contentRef: ContentRef;
@@ -70,7 +69,7 @@ export class HijackScroll extends React.Component<Props> {
   }
 }
 
-const makeMapStateToProps = (initialState: AppState, ownProps: ComponentProps) => {
+const makeMapStateToProps = (_initialState: AppState, ownProps: ComponentProps) => {
   const mapStateToProps = (state: AppState) => {
     const { id, contentRef } = ownProps;
     const model = selectors.model(state, { contentRef });
@@ -87,7 +86,7 @@ const makeMapStateToProps = (initialState: AppState, ownProps: ComponentProps) =
   return mapStateToProps;
 };
 
-const makeMapDispatchToProps = (initialDispatch: Dispatch, ownProps: ComponentProps) => {
+const makeMapDispatchToProps = (_initialDispatch: Dispatch, ownProps: ComponentProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => ({
     selectCell: () => dispatch(actions.focusCell({ id: ownProps.id, contentRef: ownProps.contentRef })),
   });
diff --git a/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx b/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
index a540d7306..cd188a818 100644
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
@@ -1,11 +1,10 @@
+import { CellId } from "@nteract/commutable";
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import Immutable from "immutable";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 
-import { CellId } from "@nteract/commutable";
-import { actions, AppState, ContentRef, selectors } from "@nteract/core";
-
 interface ComponentProps {
   contentRef: ContentRef;
   children: React.ReactNode;
@@ -100,7 +99,7 @@ export class KeyboardShortcuts extends React.Component<Props> {
   }
 }
 
-export const makeMapStateToProps = (state: AppState, ownProps: ComponentProps) => {
+export const makeMapStateToProps = (_state: AppState, ownProps: ComponentProps) => {
   const { contentRef } = ownProps;
   const mapStateToProps = (state: AppState) => {
     const model = selectors.model(state, { contentRef });
diff --git a/src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx b/src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx
index 2c91fdcaa..73f5a317e 100644
--- a/src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx
+++ b/src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx
@@ -13,7 +13,7 @@ import * as React from "react";
 type SchemaAnalyzerHeaderProps = {
   isKernelIdle: boolean;
   isKernelBusy: boolean;
-  onSampleSizeUpdated: (sampleSize: string) => void;
+  onSampleSizeUpdated: (sampleSize?: string) => void;
   onAnalyzeButtonClick: (filter: string, sampleSize: string) => void;
 };
 
@@ -30,15 +30,15 @@ export const SchemaAnalyzerHeader = ({
   onSampleSizeUpdated,
   onAnalyzeButtonClick,
 }: SchemaAnalyzerHeaderProps): JSX.Element => {
-  const [filter, setFilter] = React.useState<string>(DefaultFilter);
-  const [sampleSize, setSampleSize] = React.useState<string>(DefaultSampleSize);
+  const [filter, setFilter] = React.useState<string | undefined>(DefaultFilter);
+  const [sampleSize, setSampleSize] = React.useState<string | undefined>(DefaultSampleSize);
 
   return (
     <Stack horizontal tokens={{ childrenGap: 10 }}>
       <Stack.Item grow>
         <TextField
           value={filter}
-          onChange={(event, newValue) => setFilter(newValue)}
+          onChange={(_event, newValue?: string) => setFilter(newValue)}
           label="Filter"
           placeholder={FilterPlaceholder}
           disabled={!isKernelIdle}
@@ -47,7 +47,7 @@ export const SchemaAnalyzerHeader = ({
       <Stack.Item>
         <TextField
           value={sampleSize}
-          onChange={(event, newValue) => {
+          onChange={(_event, newValue?: string) => {
             const num = Number(newValue);
             if (!newValue || (num >= MinSampleSize && num <= MaxSampleSize)) {
               setSampleSize(newValue);
diff --git a/src/Explorer/OpenActions.test.ts b/src/Explorer/OpenActions.test.ts
index 0ea2057b7..d06e8b239 100644
--- a/src/Explorer/OpenActions.test.ts
+++ b/src/Explorer/OpenActions.test.ts
@@ -3,7 +3,6 @@ import { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "./Explorer";
 import { handleOpenAction } from "./OpenActions";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 
 describe("OpenActions", () => {
   describe("handleOpenAction", () => {
@@ -15,8 +14,6 @@ describe("OpenActions", () => {
     beforeEach(() => {
       explorer = {} as Explorer;
       explorer.onNewCollectionClicked = jest.fn();
-      explorer.cassandraAddCollectionPane = {} as CassandraAddCollectionPane;
-      explorer.cassandraAddCollectionPane.open = jest.fn();
 
       database = {
         id: ko.observable("db"),
@@ -64,28 +61,6 @@ describe("OpenActions", () => {
         expect(actionHandled).toBe(true);
       });
 
-      describe("CassandraAddCollection pane kind", () => {
-        it("string value should call cassandraAddCollectionPane.open", () => {
-          const action = {
-            actionType: "OpenPane",
-            paneKind: "CassandraAddCollection",
-          };
-
-          const actionHandled = handleOpenAction(action, [], explorer);
-          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
-        });
-
-        it("enum value should call cassandraAddCollectionPane.open", () => {
-          const action = {
-            actionType: "OpenPane",
-            paneKind: ActionContracts.PaneKind.CassandraAddCollection,
-          };
-
-          const actionHandled = handleOpenAction(action, [], explorer);
-          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
-        });
-      });
-
       describe("AddCollection pane kind", () => {
         it("string value should call explorer.onNewCollectionClicked", () => {
           const action = {
diff --git a/src/Explorer/OpenActions.ts b/src/Explorer/OpenActions.ts
index afc3251c2..033cb8135 100644
--- a/src/Explorer/OpenActions.ts
+++ b/src/Explorer/OpenActions.ts
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     action.paneKind === ActionContracts.PaneKind.CassandraAddCollection ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
   ) {
-    explorer.cassandraAddCollectionPane.open();
+    explorer.openCassandraAddCollectionPane();
   } else if (
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index eb3e61f1d..77d9d2577 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -20,7 +20,7 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import { CollectionCreation, IndexingPolicies } from "../../Shared/Constants";
+import { CollectionCreation } from "../../Shared/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -41,6 +41,40 @@ export interface AddCollectionPanelProps {
   databaseId?: string;
 }
 
+const SharedDatabaseDefault: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [],
+  excludedPaths: [
+    {
+      path: "/*",
+    },
+  ],
+};
+
+const AllPropertiesIndexed: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [
+    {
+      path: "/*",
+      indexes: [
+        {
+          kind: "Range",
+          dataType: "Number",
+          precision: -1,
+        },
+        {
+          kind: "Range",
+          dataType: "String",
+          precision: -1,
+        },
+      ],
+    },
+  ],
+  excludedPaths: [],
+};
+
 export interface AddCollectionPanelState {
   createNewDatabase: boolean;
   newDatabaseId: string;
@@ -826,8 +860,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       case "SQL":
       case "Mongo":
         return true;
-      case "Cassandra":
-        return this.props.explorer.hasStorageAnalyticsAfecFeature();
       default:
         return false;
     }
@@ -953,14 +985,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {
           paths: [partitionKeyString],
-          kind: Constants.BackendDefaults.partitionKeyKind,
+          kind: "Hash",
           version: partitionKeyVersion,
         }
       : undefined;
 
     const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
-      ? IndexingPolicies.AllPropertiesIndexed
-      : IndexingPolicies.SharedDatabaseDefault;
+      ? AllPropertiesIndexed
+      : SharedDatabaseDefault;
 
     const telemetryData = {
       database: {
@@ -990,13 +1022,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
     let offerThroughput: number;
     let autoPilotMaxThroughput: number;
-    if (this.state.createNewDatabase) {
-      if (this.isNewDatabaseAutoscale) {
-        autoPilotMaxThroughput = this.newDatabaseThroughput;
-      } else {
-        offerThroughput = this.newDatabaseThroughput;
+
+    if (databaseLevelThroughput) {
+      if (this.state.createNewDatabase) {
+        if (this.isNewDatabaseAutoscale) {
+          autoPilotMaxThroughput = this.newDatabaseThroughput;
+        } else {
+          offerThroughput = this.newDatabaseThroughput;
+        }
       }
-    } else if (!databaseLevelThroughput) {
+    } else {
       if (this.isCollectionAutoscale) {
         autoPilotMaxThroughput = this.collectionThroughput;
       } else {
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane.ts b/src/Explorer/Panes/CassandraAddCollectionPane.ts
deleted file mode 100644
index 18879e6d3..000000000
--- a/src/Explorer/Panes/CassandraAddCollectionPane.ts
+++ /dev/null
@@ -1,539 +0,0 @@
-import * as ko from "knockout";
-import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as PricingUtils from "../../Utils/PricingUtils";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-
-export default class CassandraAddCollectionPane extends ContextualPaneBase {
-  public createTableQuery: ko.Observable<string>;
-  public keyspaceId: ko.Observable<string>;
-  public maxThroughputRU: ko.Observable<number>;
-  public minThroughputRU: ko.Observable<number>;
-  public tableId: ko.Observable<string>;
-  public throughput: ko.Observable<number>;
-  public throughputRangeText: ko.Computed<string>;
-  public sharedThroughputRangeText: ko.Computed<string>;
-  public userTableQuery: ko.Observable<string>;
-  public requestUnitsUsageCostDedicated: ko.Computed<string>;
-  public requestUnitsUsageCostShared: ko.Computed<string>;
-  public costsVisible: ko.PureComputed<boolean>;
-  public keyspaceHasSharedOffer: ko.Observable<boolean>;
-  public keyspaceIds: ko.ObservableArray<string>;
-  public keyspaceThroughput: ko.Observable<number>;
-  public keyspaceCreateNew: ko.Observable<boolean>;
-  public dedicateTableThroughput: ko.Observable<boolean>;
-  public canRequestSupport: ko.PureComputed<boolean>;
-  public throughputSpendAckText: ko.Observable<string>;
-  public throughputSpendAck: ko.Observable<boolean>;
-  public sharedThroughputSpendAck: ko.Observable<boolean>;
-  public sharedThroughputSpendAckText: ko.Observable<string>;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public isSharedAutoPilotSelected: ko.Observable<boolean>;
-  public selectedAutoPilotThroughput: ko.Observable<number>;
-  public sharedAutoPilotThroughput: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public sharedThroughputSpendAckVisible: ko.Computed<boolean>;
-  public throughputSpendAckVisible: ko.Computed<boolean>;
-  public canExceedMaximumValue: ko.PureComputed<boolean>;
-  public isFreeTierAccount: ko.Computed<boolean>;
-  public ruToolTipText: ko.Computed<string>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
-
-  private keyspaceOffers: Map<string, DataModels.Offer>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Add Table");
-    this.createTableQuery = ko.observable<string>("CREATE TABLE ");
-    this.keyspaceCreateNew = ko.observable<boolean>(true);
-    this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText());
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
-    this.keyspaceOffers = new Map();
-    this.keyspaceIds = ko.observableArray<string>();
-    this.keyspaceHasSharedOffer = ko.observable<boolean>(false);
-    this.keyspaceThroughput = ko.observable<number>();
-    this.keyspaceId = ko.observable<string>("");
-    this.keyspaceId.subscribe((keyspaceId: string) => {
-      if (this.keyspaceIds.indexOf(keyspaceId) >= 0) {
-        this.keyspaceHasSharedOffer(this.keyspaceOffers.has(keyspaceId));
-      }
-    });
-    this.keyspaceId.extend({ rateLimit: 100 });
-    this.dedicateTableThroughput = ko.observable<boolean>(false);
-    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.maxThroughputRU = ko.observable<number>(throughputDefaults.unlimitedmax);
-    this.minThroughputRU = ko.observable<number>(throughputDefaults.unlimitedmin);
-
-    this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());
-
-    this.isFreeTierAccount = ko.computed<boolean>(() => {
-      return userContext?.databaseAccount?.properties?.enableFreeTier;
-    });
-
-    this.tableId = ko.observable<string>("");
-    this.isAutoPilotSelected = ko.observable<boolean>(false);
-    this.isSharedAutoPilotSelected = ko.observable<boolean>(false);
-    this.selectedAutoPilotThroughput = ko.observable<number>();
-    this.sharedAutoPilotThroughput = ko.observable<number>();
-    this.throughput = ko.observable<number>();
-    this.throughputRangeText = ko.pureComputed<string>(() => {
-      const enableAutoPilot = this.isAutoPilotSelected();
-      if (!enableAutoPilot) {
-        return `Throughput (${this.minThroughputRU().toLocaleString()} - ${this.maxThroughputRU().toLocaleString()} RU/s)`;
-      }
-      return AutoPilotUtils.getAutoPilotHeaderText();
-    });
-    this.sharedThroughputRangeText = ko.pureComputed<string>(() => {
-      if (this.isSharedAutoPilotSelected()) {
-        return AutoPilotUtils.getAutoPilotHeaderText();
-      }
-      return `Throughput (${this.minThroughputRU().toLocaleString()} - ${this.maxThroughputRU().toLocaleString()} RU/s)`;
-    });
-    this.userTableQuery = ko.observable<string>("(userid int, name text, email text, PRIMARY KEY (userid))");
-    this.keyspaceId.subscribe((keyspaceId) => {
-      this.createTableQuery(`CREATE TABLE ${keyspaceId}.`);
-    });
-
-    this.throughputSpendAckText = ko.observable<string>();
-    this.throughputSpendAck = ko.observable<boolean>(false);
-    this.sharedThroughputSpendAck = ko.observable<boolean>(false);
-    this.sharedThroughputSpendAckText = ko.observable<string>();
-
-    this.resetData();
-
-    this.requestUnitsUsageCostDedicated = ko.computed(() => {
-      const { databaseAccount: account } = userContext;
-      if (!account) {
-        return "";
-      }
-
-      const regions =
-        (account &&
-          account.properties &&
-          account.properties.readLocations &&
-          account.properties.readLocations.length) ||
-        1;
-      const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false;
-      const offerThroughput: number = this.throughput();
-      let estimatedSpend: string;
-      let estimatedDedicatedSpendAcknowledge: string;
-      if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      } else {
-        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
-          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      }
-      this.throughputSpendAckText(estimatedDedicatedSpendAcknowledge);
-      return estimatedSpend;
-    });
-
-    this.requestUnitsUsageCostShared = ko.computed(() => {
-      const { databaseAccount: account } = userContext;
-      if (!account) {
-        return "";
-      }
-
-      const regions = account?.properties?.readLocations?.length || 1;
-      const multimaster = account?.properties?.enableMultipleWriteLocations || false;
-      let estimatedSpend: string;
-      let estimatedSharedSpendAcknowledge: string;
-      if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isSharedAutoPilotSelected()
-        );
-      } else {
-        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
-          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isSharedAutoPilotSelected()
-        );
-      }
-      this.sharedThroughputSpendAckText(estimatedSharedSpendAcknowledge);
-      return estimatedSpend;
-    });
-
-    this.costsVisible = ko.pureComputed(() => {
-      return configContext.platform !== Platform.Emulator;
-    });
-
-    this.canRequestSupport = ko.pureComputed(() => {
-      if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
-        const offerThroughput: number = this.throughput();
-        return offerThroughput <= 100000;
-      }
-
-      return false;
-    });
-
-    this.sharedThroughputSpendAckVisible = ko.computed<boolean>(() => {
-      const autoscaleThroughput = this.sharedAutoPilotThroughput() * 1;
-      if (this.isSharedAutoPilotSelected()) {
-        return autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      }
-
-      return this.keyspaceThroughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-    });
-
-    this.throughputSpendAckVisible = ko.pureComputed<boolean>(() => {
-      const autoscaleThroughput = this.selectedAutoPilotThroughput() * 1;
-      if (this.isAutoPilotSelected()) {
-        return autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      }
-
-      return this.throughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-    });
-
-    if (!!this.container) {
-      const updateKeyspaceIds: (keyspaces: ViewModels.Database[]) => void = (
-        newKeyspaceIds: ViewModels.Database[]
-      ): void => {
-        const cachedKeyspaceIdsList = _.map(newKeyspaceIds, (keyspace: ViewModels.Database) => {
-          if (keyspace && keyspace.offer && !!keyspace.offer()) {
-            this.keyspaceOffers.set(keyspace.id(), keyspace.offer());
-          }
-          return keyspace.id();
-        });
-        this.keyspaceIds(cachedKeyspaceIdsList);
-      };
-      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
-      updateKeyspaceIds(this.container.databases());
-    }
-
-    this.autoPilotUsageCost = ko.pureComputed<string>(() => {
-      const autoPilot = this._getAutoPilot();
-      if (!autoPilot) {
-        return "";
-      }
-      const isDatabaseThroughput: boolean = this.keyspaceCreateNew();
-      return PricingUtils.getAutoPilotV3SpendHtml(autoPilot.maxThroughput, isDatabaseThroughput);
-    });
-  }
-
-  public decreaseThroughput() {
-    let offerThroughput: number = this.throughput();
-
-    if (offerThroughput > this.minThroughputRU()) {
-      offerThroughput -= 100;
-      this.throughput(offerThroughput);
-    }
-  }
-
-  public increaseThroughput() {
-    let offerThroughput: number = this.throughput();
-
-    if (offerThroughput < this.maxThroughputRU()) {
-      offerThroughput += 100;
-      this.throughput(offerThroughput);
-    }
-  }
-
-  public open() {
-    super.open();
-    if (!this.container.isServerlessEnabled()) {
-      this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    }
-    const addCollectionPaneOpenMessage = {
-      collection: ko.toJS({
-        id: this.tableId(),
-        storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-        offerThroughput: this.throughput(),
-        partitionKey: "",
-        databaseId: this.keyspaceId(),
-      }),
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        storage: "u",
-        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-    const focusElement = document.getElementById("keyspace-id");
-    focusElement && focusElement.focus();
-    TelemetryProcessor.trace(Action.CreateCollection, ActionModifiers.Open, addCollectionPaneOpenMessage);
-  }
-
-  public submit() {
-    if (!this._isValid()) {
-      return;
-    }
-    this.isExecuting(true);
-    const autoPilotCommand = `cosmosdb_autoscale_max_throughput`;
-    let createTableAndKeyspacePromise: Q.Promise<any>;
-    const toCreateKeyspace: boolean = this.keyspaceCreateNew();
-    const useAutoPilotForKeyspace: boolean = this.isSharedAutoPilotSelected() && !!this.sharedAutoPilotThroughput();
-    const createKeyspaceQueryPrefix: string = `CREATE KEYSPACE ${this.keyspaceId().trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`;
-    const createKeyspaceQuery: string = this.keyspaceHasSharedOffer()
-      ? useAutoPilotForKeyspace
-        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${this.sharedAutoPilotThroughput()};`
-        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${this.keyspaceThroughput()};`
-      : `${createKeyspaceQueryPrefix};`;
-    const createTableQueryPrefix: string = `${this.createTableQuery()}${this.tableId().trim()} ${this.userTableQuery()}`;
-    let createTableQuery: string;
-
-    if (this.canConfigureThroughput() && (this.dedicateTableThroughput() || !this.keyspaceHasSharedOffer())) {
-      if (this.isAutoPilotSelected() && this.selectedAutoPilotThroughput()) {
-        createTableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${this.selectedAutoPilotThroughput()};`;
-      } else {
-        createTableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${this.throughput()};`;
-      }
-    } else {
-      createTableQuery = `${createTableQueryPrefix};`;
-    }
-
-    const addCollectionPaneStartMessage = {
-      collection: ko.toJS({
-        id: this.tableId(),
-        storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-        offerThroughput: this.throughput(),
-        partitionKey: "",
-        databaseId: this.keyspaceId(),
-        hasDedicatedThroughput: this.dedicateTableThroughput(),
-      }),
-      keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        storage: "u",
-        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      toCreateKeyspace: toCreateKeyspace,
-      createKeyspaceQuery: createKeyspaceQuery,
-      createTableQuery: createTableQuery,
-    };
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage);
-    const { databaseAccount } = userContext;
-    if (toCreateKeyspace) {
-      createTableAndKeyspacePromise = (<CassandraAPIDataClient>this.container.tableDataClient).createTableAndKeyspace(
-        databaseAccount?.properties.cassandraEndpoint,
-        databaseAccount?.id,
-        this.container,
-        createTableQuery,
-        createKeyspaceQuery
-      );
-    } else {
-      createTableAndKeyspacePromise = (<CassandraAPIDataClient>this.container.tableDataClient).createTableAndKeyspace(
-        databaseAccount?.properties.cassandraEndpoint,
-        databaseAccount?.id,
-        this.container,
-        createTableQuery
-      );
-    }
-    createTableAndKeyspacePromise.then(
-      () => {
-        this.container.refreshAllDatabases();
-        this.isExecuting(false);
-        this.close();
-        const addCollectionPaneSuccessMessage = {
-          collection: ko.toJS({
-            id: this.tableId(),
-            storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-            offerThroughput: this.throughput(),
-            partitionKey: "",
-            databaseId: this.keyspaceId(),
-            hasDedicatedThroughput: this.dedicateTableThroughput(),
-          }),
-          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
-          subscriptionQuotaId: userContext.quotaId,
-          defaultsCheck: {
-            storage: "u",
-            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
-          },
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          toCreateKeyspace: toCreateKeyspace,
-          createKeyspaceQuery: createKeyspaceQuery,
-          createTableQuery: createTableQuery,
-        };
-        TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneSuccessMessage, startKey);
-      },
-      (error) => {
-        const errorMessage = getErrorMessage(error);
-        this.formErrors(errorMessage);
-        this.isExecuting(false);
-        const addCollectionPaneFailedMessage = {
-          collection: {
-            id: this.tableId(),
-            storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-            offerThroughput: this.throughput(),
-            partitionKey: "",
-            databaseId: this.keyspaceId(),
-            hasDedicatedThroughput: this.dedicateTableThroughput(),
-          },
-          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
-          subscriptionQuotaId: userContext.quotaId,
-          defaultsCheck: {
-            storage: "u",
-            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
-          },
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          toCreateKeyspace: toCreateKeyspace,
-          createKeyspaceQuery: createKeyspaceQuery,
-          createTableQuery: createTableQuery,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        };
-        TelemetryProcessor.traceFailure(Action.CreateCollection, addCollectionPaneFailedMessage, startKey);
-      }
-    );
-  }
-
-  public resetData() {
-    super.resetData();
-    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.selectedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
-    this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
-    this.throughput(AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container));
-    this.keyspaceThroughput(throughputDefaults.shared);
-    this.maxThroughputRU(throughputDefaults.unlimitedmax);
-    this.minThroughputRU(throughputDefaults.unlimitedmin);
-    this.createTableQuery("CREATE TABLE ");
-    this.userTableQuery("(userid int, name text, email text, PRIMARY KEY (userid))");
-    this.tableId("");
-    this.keyspaceId("");
-    this.throughputSpendAck(false);
-    this.keyspaceHasSharedOffer(false);
-    this.keyspaceCreateNew(true);
-  }
-
-  private _isValid(): boolean {
-    const throughput = this.throughput();
-    const keyspaceThroughput = this.keyspaceThroughput();
-
-    const sharedAutoscaleThroughput = this.sharedAutoPilotThroughput() * 1;
-    if (
-      this.isSharedAutoPilotSelected() &&
-      sharedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.sharedThroughputSpendAck()
-    ) {
-      this.formErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    const dedicatedAutoscaleThroughput = this.selectedAutoPilotThroughput() * 1;
-    if (
-      this.isAutoPilotSelected() &&
-      dedicatedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.throughputSpendAck()
-    ) {
-      this.formErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    if (
-      (this.keyspaceCreateNew() && this.keyspaceHasSharedOffer() && this.isSharedAutoPilotSelected()) ||
-      this.isAutoPilotSelected()
-    ) {
-      const autoPilot = this._getAutoPilot();
-      if (
-        !autoPilot ||
-        !autoPilot.maxThroughput ||
-        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
-      ) {
-        this.formErrors(
-          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
-        );
-        return false;
-      }
-      return true;
-    }
-
-    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !this.throughputSpendAck()) {
-      this.formErrors(`Please acknowledge the estimated daily spend.`);
-      return false;
-    }
-
-    if (
-      this.keyspaceHasSharedOffer() &&
-      this.keyspaceCreateNew() &&
-      keyspaceThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.sharedThroughputSpendAck()
-    ) {
-      this.formErrors("Please acknowledge the estimated daily spend");
-      return false;
-    }
-
-    return true;
-  }
-
-  private _getAutoPilot(): DataModels.AutoPilotCreationSettings {
-    if (
-      this.keyspaceCreateNew() &&
-      this.keyspaceHasSharedOffer() &&
-      this.isSharedAutoPilotSelected() &&
-      this.sharedAutoPilotThroughput()
-    ) {
-      return {
-        maxThroughput: this.sharedAutoPilotThroughput() * 1,
-      };
-    }
-
-    if (this.selectedAutoPilotThroughput()) {
-      return {
-        maxThroughput: this.selectedAutoPilotThroughput() * 1,
-      };
-    }
-
-    return undefined;
-  }
-}
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx
new file mode 100644
index 000000000..4aadd996d
--- /dev/null
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { shallow } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
+import { CassandraAddCollectionPane } from "./CassandraAddCollectionPane";
+const props = {
+  explorer: new Explorer(),
+  closePanel: (): void => undefined,
+  cassandraApiClient: new CassandraAPIDataClient(),
+};
+
+describe("CassandraAddCollectionPane  Pane", () => {
+  beforeEach(() => render(<CassandraAddCollectionPane {...props} />));
+
+  it("should render Default properly", () => {
+    const wrapper = shallow(<CassandraAddCollectionPane {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("click on is Create new keyspace", () => {
+    fireEvent.click(screen.getByLabelText("Create new keyspace"));
+    expect(screen.getByLabelText("Provision keyspace throughput")).toBeDefined();
+  });
+  it("click on Use existing", () => {
+    fireEvent.click(screen.getByLabelText("Use existing keyspace"));
+  });
+
+  it("Enter Keyspace name", () => {
+    fireEvent.change(screen.getByLabelText("Keyspace id"), { target: { value: "unittest1" } });
+    expect(screen.getByLabelText("CREATE TABLE unittest1.")).toBeDefined();
+  });
+});
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
new file mode 100644
index 000000000..03fb49ebe
--- /dev/null
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -0,0 +1,427 @@
+import { Label, Stack, TextField } from "@fluentui/react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import * as _ from "underscore";
+import * as Constants from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as AddCollectionUtility from "../../../Shared/AddCollectionUtility";
+import * as SharedConstants from "../../../Shared/Constants";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
+import Explorer from "../../Explorer";
+import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+
+export interface CassandraAddCollectionPaneProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  cassandraApiClient: CassandraAPIDataClient;
+}
+
+export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectionPaneProps> = ({
+  explorer: container,
+  closePanel,
+  cassandraApiClient,
+}: CassandraAddCollectionPaneProps) => {
+  const throughputDefaults = userContext.collectionCreationDefaults.throughput;
+  const [createTableQuery, setCreateTableQuery] = useState<string>("CREATE TABLE ");
+  const [keyspaceId, setKeyspaceId] = useState<string>("");
+  const [tableId, setTableId] = useState<string>("");
+  const [throughput, setThroughput] = useState<number>(
+    AddCollectionUtility.getMaxThroughput(userContext.collectionCreationDefaults, container)
+  );
+
+  const [isAutoPilotSelected, setIsAutoPilotSelected] = useState<boolean>(userContext.features.autoscaleDefault);
+
+  const [isSharedAutoPilotSelected, setIsSharedAutoPilotSelected] = useState<boolean>(
+    userContext.features.autoscaleDefault
+  );
+
+  const [userTableQuery, setUserTableQuery] = useState<string>(
+    "(userid int, name text, email text, PRIMARY KEY (userid))"
+  );
+
+  const [keyspaceHasSharedOffer, setKeyspaceHasSharedOffer] = useState<boolean>(false);
+  const [keyspaceIds, setKeyspaceIds] = useState<string[]>([]);
+  const [keyspaceThroughput, setKeyspaceThroughput] = useState<number>(throughputDefaults.shared);
+  const [keyspaceCreateNew, setKeyspaceCreateNew] = useState<boolean>(true);
+  const [dedicateTableThroughput, setDedicateTableThroughput] = useState<boolean>(false);
+  const [throughputSpendAck, setThroughputSpendAck] = useState<boolean>(false);
+  const [sharedThroughputSpendAck, setSharedThroughputSpendAck] = useState<boolean>(false);
+
+  const { minAutoPilotThroughput: selectedAutoPilotThroughput } = AutoPilotUtils;
+  const { minAutoPilotThroughput: sharedAutoPilotThroughput } = AutoPilotUtils;
+
+  const _getAutoPilot = (): DataModels.AutoPilotCreationSettings => {
+    if (keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected && sharedAutoPilotThroughput) {
+      return {
+        maxThroughput: sharedAutoPilotThroughput * 1,
+      };
+    }
+
+    if (selectedAutoPilotThroughput) {
+      return {
+        maxThroughput: selectedAutoPilotThroughput * 1,
+      };
+    }
+
+    return undefined;
+  };
+
+  const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
+
+  const canConfigureThroughput = !container.isServerlessEnabled();
+
+  const keyspaceOffers = new Map();
+  const [isExecuting, setIsExecuting] = useState<boolean>();
+  const [formErrors, setFormErrors] = useState<string>("");
+
+  useEffect(() => {
+    if (keyspaceIds.indexOf(keyspaceId) >= 0) {
+      setKeyspaceHasSharedOffer(keyspaceOffers.has(keyspaceId));
+    }
+    setCreateTableQuery(`CREATE TABLE ${keyspaceId}.`);
+  }, [keyspaceId]);
+
+  const addCollectionPaneOpenMessage = {
+    collection: {
+      id: tableId,
+      storage: Constants.BackendDefaults.multiPartitionStorageInGb,
+      offerThroughput: throughput,
+      partitionKey: "",
+      databaseId: keyspaceId,
+    },
+    subscriptionType: userContext.subscriptionType,
+    subscriptionQuotaId: userContext.quotaId,
+    defaultsCheck: {
+      storage: "u",
+      throughput,
+      flight: userContext.addCollectionFlight,
+    },
+    dataExplorerArea: Constants.Areas.ContextualPane,
+  };
+
+  useEffect(() => {
+    if (!container.isServerlessEnabled()) {
+      setIsAutoPilotSelected(userContext.features.autoscaleDefault);
+    }
+
+    TelemetryProcessor.trace(Action.CreateCollection, ActionModifiers.Open, addCollectionPaneOpenMessage);
+  }, []);
+
+  useEffect(() => {
+    if (container) {
+      const newKeyspaceIds: ViewModels.Database[] = container.databases();
+      const cachedKeyspaceIdsList = _.map(newKeyspaceIds, (keyspace: ViewModels.Database) => {
+        if (keyspace && keyspace.offer && !!keyspace.offer()) {
+          keyspaceOffers.set(keyspace.id(), keyspace.offer());
+        }
+        return keyspace.id();
+      });
+      setKeyspaceIds(cachedKeyspaceIdsList);
+    }
+  }, []);
+
+  const _isValid = () => {
+    const sharedAutoscaleThroughput = sharedAutoPilotThroughput * 1;
+    if (
+      isSharedAutoPilotSelected &&
+      sharedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !sharedThroughputSpendAck
+    ) {
+      setFormErrors(`Please acknowledge the estimated monthly spend.`);
+      return false;
+    }
+
+    const dedicatedAutoscaleThroughput = selectedAutoPilotThroughput * 1;
+    if (
+      isAutoPilotSelected &&
+      dedicatedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !throughputSpendAck
+    ) {
+      setFormErrors(`Please acknowledge the estimated monthly spend.`);
+      return false;
+    }
+
+    if ((keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected) || isAutoPilotSelected) {
+      const autoPilot = _getAutoPilot();
+      if (
+        !autoPilot ||
+        !autoPilot.maxThroughput ||
+        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
+      ) {
+        setFormErrors(
+          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
+        );
+        return false;
+      }
+      return true;
+    }
+
+    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !throughputSpendAck) {
+      setFormErrors(`Please acknowledge the estimated daily spend.`);
+      return false;
+    }
+
+    if (
+      keyspaceHasSharedOffer &&
+      keyspaceCreateNew &&
+      keyspaceThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !sharedThroughputSpendAck
+    ) {
+      setFormErrors("Please acknowledge the estimated daily spend");
+      return false;
+    }
+
+    return true;
+  };
+
+  const onSubmit = async () => {
+    if (!_isValid()) {
+      return;
+    }
+    setIsExecuting(true);
+    const autoPilotCommand = `cosmosdb_autoscale_max_throughput`;
+
+    const toCreateKeyspace: boolean = keyspaceCreateNew;
+    const useAutoPilotForKeyspace: boolean = isSharedAutoPilotSelected && !!sharedAutoPilotThroughput;
+    const createKeyspaceQueryPrefix = `CREATE KEYSPACE ${keyspaceId.trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`;
+    const createKeyspaceQuery: string = keyspaceHasSharedOffer
+      ? useAutoPilotForKeyspace
+        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${keyspaceThroughput};`
+        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${keyspaceThroughput};`
+      : `${createKeyspaceQueryPrefix};`;
+    let tableQuery: string;
+    const createTableQueryPrefix = `${createTableQuery}${tableId.trim()} ${userTableQuery}`;
+
+    if (canConfigureThroughput && (dedicateTableThroughput || !keyspaceHasSharedOffer)) {
+      if (isAutoPilotSelected && selectedAutoPilotThroughput) {
+        tableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${throughput};`;
+      } else {
+        tableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${throughput};`;
+      }
+    } else {
+      tableQuery = `${createTableQueryPrefix};`;
+    }
+
+    const addCollectionPaneStartMessage = {
+      ...addCollectionPaneOpenMessage,
+      collection: {
+        ...addCollectionPaneOpenMessage.collection,
+        hasDedicatedThroughput: dedicateTableThroughput,
+      },
+      keyspaceHasSharedOffer,
+      toCreateKeyspace,
+      createKeyspaceQuery,
+      createTableQuery: tableQuery,
+    };
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage);
+    try {
+      if (toCreateKeyspace) {
+        await cassandraApiClient.createTableAndKeyspace(
+          userContext?.databaseAccount?.properties?.cassandraEndpoint,
+          userContext?.databaseAccount?.id,
+          container,
+          tableQuery,
+          createKeyspaceQuery
+        );
+      } else {
+        await cassandraApiClient.createTableAndKeyspace(
+          userContext?.databaseAccount?.properties?.cassandraEndpoint,
+          userContext?.databaseAccount?.id,
+          container,
+          tableQuery
+        );
+      }
+      container.refreshAllDatabases();
+      setIsExecuting(false);
+      closePanel();
+
+      TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneStartMessage, startKey);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormErrors(errorMessage);
+      setIsExecuting(false);
+      const addCollectionPaneFailedMessage = {
+        ...addCollectionPaneStartMessage,
+        error: errorMessage,
+        errorStack: getErrorStack(error),
+      };
+      TelemetryProcessor.traceFailure(Action.CreateCollection, addCollectionPaneFailedMessage, startKey);
+    }
+  };
+  const handleOnChangeKeyspaceType = (ev: React.FormEvent<HTMLInputElement>, mode: string): void => {
+    setKeyspaceCreateNew(mode === "Create new");
+  };
+
+  const props: RightPaneFormProps = {
+    expandConsole: () => container.expandConsole(),
+    formError: formErrors,
+    isExecuting,
+    submitButtonText: "Apply",
+    onSubmit,
+  };
+  return (
+    <RightPaneForm {...props}>
+      <div className="paneMainContent">
+        <div className="seconddivpadding">
+          <p>
+            <Label required>
+              Keyspace name <InfoTooltip>Select an existing keyspace or enter a new keyspace id.</InfoTooltip>
+            </Label>
+          </p>
+
+          <Stack horizontal verticalAlign="center">
+            <input
+              className="throughputInputRadioBtn"
+              aria-label="Create new keyspace"
+              checked={keyspaceCreateNew}
+              type="radio"
+              role="radio"
+              tabIndex={0}
+              onChange={(e) => handleOnChangeKeyspaceType(e, "Create new")}
+            />
+            <span className="throughputInputRadioBtnLabel">Create new</span>
+
+            <input
+              className="throughputInputRadioBtn"
+              aria-label="Use existing keyspace"
+              checked={!keyspaceCreateNew}
+              type="radio"
+              role="radio"
+              tabIndex={0}
+              onChange={(e) => handleOnChangeKeyspaceType(e, "Use existing")}
+            />
+            <span className="throughputInputRadioBtnLabel">Use existing</span>
+          </Stack>
+
+          <TextField
+            aria-required="true"
+            autoComplete="off"
+            pattern="[^/?#\\]*[^/?# \\]"
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
+            list={keyspaceCreateNew ? "" : "keyspacesList"}
+            placeholder={keyspaceCreateNew ? "Type a new keyspace id" : "Choose existing keyspace id"}
+            size={40}
+            data-test="addCollection-keyspaceId"
+            value={keyspaceId}
+            onChange={(e, newValue) => setKeyspaceId(newValue)}
+            ariaLabel="Keyspace id"
+            autoFocus
+          />
+          <datalist id="keyspacesList">
+            {keyspaceIds?.map((id: string, index: number) => (
+              <option key={index}>{id}</option>
+            ))}
+          </datalist>
+          {canConfigureThroughput && keyspaceCreateNew && (
+            <div className="databaseProvision">
+              <input
+                tabIndex={0}
+                type="checkbox"
+                id="keyspaceSharedThroughput"
+                title="Provision shared throughput"
+                checked={keyspaceHasSharedOffer}
+                onChange={(e) => setKeyspaceHasSharedOffer(e.target.checked)}
+              />
+              <span className="databaseProvisionText" aria-label="Provision keyspace throughput">
+                Provision keyspace throughput
+              </span>
+              <InfoTooltip>
+                Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the
+                keyspace
+              </InfoTooltip>
+            </div>
+          )}
+          {canConfigureThroughput && keyspaceCreateNew && keyspaceHasSharedOffer && (
+            <div>
+              <ThroughputInput
+                showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
+                isDatabase
+                isSharded
+                setThroughputValue={(throughput: number) => setKeyspaceThroughput(throughput)}
+                setIsAutoscale={(isAutoscale: boolean) => setIsSharedAutoPilotSelected(isAutoscale)}
+                onCostAcknowledgeChange={(isAcknowledge: boolean) => {
+                  setSharedThroughputSpendAck(isAcknowledge);
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <div className="seconddivpadding">
+          <p>
+            <Label required>
+              Enter CQL command to create the table.
+              <a href="https://aka.ms/cassandra-create-table" target="_blank" rel="noreferrer">
+                Learn More
+              </a>
+            </Label>
+          </p>
+          <div aria-label={createTableQuery} style={{ float: "left", paddingTop: "3px", paddingRight: "3px" }}>
+            {createTableQuery}
+          </div>
+          <TextField
+            aria-required="true"
+            ariaLabel="addCollection-tableId"
+            autoComplete="off"
+            pattern="[^/?#\\]*[^/?# \\]"
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
+            placeholder="Enter tableId"
+            size={20}
+            className="textfontclr"
+            value={tableId}
+            onChange={(e, newValue) => setTableId(newValue)}
+            style={{ marginBottom: "5px" }}
+          />
+          <TextField
+            multiline
+            id="editor-area"
+            rows={5}
+            aria-label="Table Schema"
+            value={userTableQuery}
+            onChange={(e, newValue) => setUserTableQuery(newValue)}
+          />
+        </div>
+
+        {canConfigureThroughput && keyspaceHasSharedOffer && !keyspaceCreateNew && (
+          <div className="seconddivpadding">
+            <input
+              type="checkbox"
+              id="tableSharedThroughput"
+              title="Provision dedicated throughput for this table"
+              checked={dedicateTableThroughput}
+              onChange={(e) => setDedicateTableThroughput(e.target.checked)}
+            />
+            <span>Provision dedicated throughput for this table</span>
+            <InfoTooltip>
+              You can optionally provision dedicated throughput for a table within a keyspace that has throughput
+              provisioned. This dedicated throughput amount will not be shared with other tables in the keyspace and
+              does not count towards the throughput you provisioned for the keyspace. This throughput amount will be
+              billed in addition to the throughput amount you provisioned at the keyspace level.
+            </InfoTooltip>
+          </div>
+        )}
+        {canConfigureThroughput && (!keyspaceHasSharedOffer || dedicateTableThroughput) && (
+          <div>
+            <ThroughputInput
+              showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
+              isDatabase={false}
+              isSharded={false}
+              setThroughputValue={(throughput: number) => setThroughput(throughput)}
+              setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
+              onCostAcknowledgeChange={(isAcknowledge: boolean) => {
+                setThroughputSpendAck(isAcknowledge);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </RightPaneForm>
+  );
+};
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/__snapshots__/CassandraAddCollectionPane.test.tsx.snap b/src/Explorer/Panes/CassandraAddCollectionPane/__snapshots__/CassandraAddCollectionPane.test.tsx.snap
new file mode 100644
index 000000000..19e1b1e10
--- /dev/null
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/__snapshots__/CassandraAddCollectionPane.test.tsx.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CassandraAddCollectionPane  Pane should render Default properly 1`] = `
+<RightPaneForm
+  expandConsole={[Function]}
+  formError=""
+  onSubmit={[Function]}
+  submitButtonText="Apply"
+>
+  <div
+    className="paneMainContent"
+  >
+    <div
+      className="seconddivpadding"
+    >
+      <p>
+        <StyledLabelBase
+          required={true}
+        >
+          Keyspace name 
+          <InfoTooltip>
+            Select an existing keyspace or enter a new keyspace id.
+          </InfoTooltip>
+        </StyledLabelBase>
+      </p>
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <input
+          aria-label="Create new keyspace"
+          checked={true}
+          className="throughputInputRadioBtn"
+          onChange={[Function]}
+          role="radio"
+          tabIndex={0}
+          type="radio"
+        />
+        <span
+          className="throughputInputRadioBtnLabel"
+        >
+          Create new
+        </span>
+        <input
+          aria-label="Use existing keyspace"
+          checked={false}
+          className="throughputInputRadioBtn"
+          onChange={[Function]}
+          role="radio"
+          tabIndex={0}
+          type="radio"
+        />
+        <span
+          className="throughputInputRadioBtnLabel"
+        >
+          Use existing
+        </span>
+      </Stack>
+      <StyledTextFieldBase
+        aria-required="true"
+        ariaLabel="Keyspace id"
+        autoComplete="off"
+        autoFocus={true}
+        data-test="addCollection-keyspaceId"
+        list=""
+        onChange={[Function]}
+        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        placeholder="Type a new keyspace id"
+        size={40}
+        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        value=""
+      />
+      <datalist
+        id="keyspacesList"
+      />
+      <div
+        className="databaseProvision"
+      >
+        <input
+          checked={false}
+          id="keyspaceSharedThroughput"
+          onChange={[Function]}
+          tabIndex={0}
+          title="Provision shared throughput"
+          type="checkbox"
+        />
+        <span
+          aria-label="Provision keyspace throughput"
+          className="databaseProvisionText"
+        >
+          Provision keyspace throughput
+        </span>
+        <InfoTooltip>
+          Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the keyspace
+        </InfoTooltip>
+      </div>
+    </div>
+    <div
+      className="seconddivpadding"
+    >
+      <p>
+        <StyledLabelBase
+          required={true}
+        >
+          Enter CQL command to create the table.
+          <a
+            href="https://aka.ms/cassandra-create-table"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </StyledLabelBase>
+      </p>
+      <div
+        aria-label="CREATE TABLE "
+        style={
+          Object {
+            "float": "left",
+            "paddingRight": "3px",
+            "paddingTop": "3px",
+          }
+        }
+      >
+        CREATE TABLE 
+      </div>
+      <StyledTextFieldBase
+        aria-required="true"
+        ariaLabel="addCollection-tableId"
+        autoComplete="off"
+        className="textfontclr"
+        onChange={[Function]}
+        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        placeholder="Enter tableId"
+        size={20}
+        style={
+          Object {
+            "marginBottom": "5px",
+          }
+        }
+        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        value=""
+      />
+      <StyledTextFieldBase
+        aria-label="Table Schema"
+        id="editor-area"
+        multiline={true}
+        onChange={[Function]}
+        rows={5}
+        value="(userid int, name text, email text, PRIMARY KEY (userid))"
+      />
+    </div>
+    <div>
+      <ThroughputInput
+        isDatabase={false}
+        isSharded={false}
+        onCostAcknowledgeChange={[Function]}
+        setIsAutoscale={[Function]}
+        setThroughputValue={[Function]}
+      />
+    </div>
+  </div>
+</RightPaneForm>
+`;
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
index 41b52a189..8026401b6 100644
--- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
+++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
@@ -9,10 +9,7 @@ import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUti
 import Explorer from "../../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
 
 interface Location {
@@ -42,7 +39,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
 }: CopyNotebookPanelProps) => {
   const [isExecuting, setIsExecuting] = useState<boolean>();
   const [formError, setFormError] = useState<string>("");
-  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
   const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
   const [selectedLocation, setSelectedLocation] = useState<Location>();
 
@@ -92,7 +88,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setFormError(`Failed to copy ${name} to ${destination}`);
-      setFormErrorDetail(`${errorMessage}`);
       handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
     } finally {
       clearMessage && clearMessage();
@@ -130,14 +125,10 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     setSelectedLocation(option?.data);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError,
-    formErrorDetail,
-    id: "copynotebookpane",
     isExecuting: isExecuting,
-    title: "Copy notebook",
     submitButtonText: "OK",
-    onClose: closePanel,
     onSubmit: () => submit(),
     expandConsole: () => container.expandConsole(),
   };
@@ -149,8 +140,8 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx
index 619650451..c75f998e3 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx
@@ -130,8 +130,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: selectedCollectionId } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       wrapper.unmount();
@@ -151,8 +151,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: feedbackText } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       const deleteFeedback = new DeleteFeedback(
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
index 1fdc2488b..5fe8c76f5 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
@@ -12,10 +12,7 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -35,7 +32,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   };
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
-  const submit = async (): Promise<void> => {
+  const onSubmit = async (): Promise<void> => {
     const collection = explorer.findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
       const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName;
@@ -100,19 +97,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
       );
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formError,
-    formErrorDetail: formError,
-    id: "deleteCollectionpane",
     isExecuting,
-    title: paneTitle,
     submitButtonText: "OK",
-    onClose: closePanel,
-    onSubmit: submit,
+    onSubmit,
     expandConsole: () => explorer.expandConsole(),
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -150,6 +143,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index 2cf3a5962..0157faed6 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
@@ -15,70 +15,62 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
     }
   }
 >
-  <GenericRightPaneComponent
+  <RightPaneForm
     expandConsole={[Function]}
     formError=""
-    formErrorDetail=""
-    id="deleteCollectionpane"
     isExecuting={false}
-    onClose={[Function]}
     onSubmit={[Function]}
     submitButtonText="OK"
-    title="Delete container"
   >
-    <div
-      onKeyDown={[Function]}
-      tabIndex={-1}
+    <form
+      className="panelFormWrapper"
+      onSubmit={[Function]}
     >
       <div
-        className="contextual-pane-out"
-        onClick={[Function]}
-      />
-      <div
-        className="contextual-pane"
-        id="deleteCollectionpane"
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "height": NaN,
-          }
-        }
+        className="panelFormWrapper"
       >
         <div
-          className="panelContentWrapper"
+          className="panelMainContent"
         >
           <div
-            className="firstdivbg headerline"
+            className="confirmDeleteInput"
           >
             <span
-              aria-level={2}
-              id="databaseTitle"
-              role="heading"
+              className="mandatoryStar"
             >
-              Delete container
+              * 
             </span>
-            <CustomizedIconButton
-              ariaLabel="Close pane"
-              className="closePaneBtn"
-              iconProps={
+            <Text
+              variant="small"
+            >
+              <span
+                className="css-102"
+              >
+                Confirm by typing the 
+                container
+                 id
+              </span>
+            </Text>
+            <StyledTextFieldBase
+              autoFocus={true}
+              id="confirmCollectionId"
+              onChange={[Function]}
+              styles={
                 Object {
-                  "iconName": "Cancel",
+                  "fieldGroup": Object {
+                    "width": 300,
+                  },
                 }
               }
-              onClick={[Function]}
-              tabIndex={0}
-              title="Close pane"
+              value=""
             >
-              <IconButton
-                ariaLabel="Close pane"
-                className="closePaneBtn"
-                iconProps={
-                  Object {
-                    "iconName": "Cancel",
-                  }
-                }
-                onClick={[Function]}
-                tabIndex={0}
+              <TextFieldBase
+                autoFocus={true}
+                deferredValidationTime={200}
+                id="confirmCollectionId"
+                onChange={[Function]}
+                resizable={true}
+                styles={[Function]}
                 theme={
                   Object {
                     "disableGlobalClassNames": false,
@@ -352,1554 +344,964 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     },
                   }
                 }
-                title="Close pane"
+                validateOnLoad={true}
+                value=""
               >
-                <BaseButton
-                  ariaLabel="Close pane"
-                  baseClassName="ms-Button"
-                  className="closePaneBtn"
-                  iconProps={
-                    Object {
-                      "iconName": "Cancel",
-                    }
-                  }
-                  onClick={[Function]}
-                  onRenderDescription={[Function]}
-                  onRenderText={[Function]}
-                  split={false}
-                  styles={
-                    Object {
-                      "description": Object {
-                        "display": "block",
-                      },
-                      "flexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "icon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "16px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "iconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "label": Object {
-                        "display": "block",
-                        "lineHeight": "100%",
-                        "margin": "0 4px",
-                      },
-                      "menuIcon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "12px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "menuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "root": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        Object {
-                          "border": "1px solid #8a8886",
-                          "borderRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "padding": "0 16px",
-                          "selectors": Object {
-                            ":active > *": Object {
-                              "left": 0,
-                              "position": "relative",
-                              "top": 0,
-                            },
-                          },
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                        },
-                        Object {
-                          "backgroundColor": "transparent",
-                          "border": "none",
-                          "color": "#0078d4",
-                          "height": "32px",
-                          "padding": "0 4px",
-                          "width": "32px",
-                        },
-                      ],
-                      "rootChecked": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootCheckedHovered": Object {
-                        "backgroundColor": "#e1dfdd",
-                        "color": "#005a9e",
-                      },
-                      "rootDisabled": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "borderColor": "#f3f2f1",
-                          "color": "#a19f9d",
-                          "cursor": "default",
-                          "selectors": Object {
-                            ":focus": Object {
-                              "outline": 0,
-                            },
-                            ":hover": Object {
-                              "outline": 0,
-                            },
-                          },
-                        },
-                        Object {
-                          "color": "#c8c6c4",
-                        },
-                      ],
-                      "rootExpanded": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootHasMenu": Object {
-                        "width": "auto",
-                      },
-                      "rootHovered": Object {
-                        "backgroundColor": "#f3f2f1",
-                        "color": "#106ebe",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "borderColor": "Highlight",
-                            "color": "Highlight",
-                          },
-                        },
-                      },
-                      "rootPressed": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "screenReaderText": Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "width": 1,
-                      },
-                      "splitButtonContainer": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid #ffffff",
-                              "bottom": 3,
-                              "content": "\\"\\"",
-                              "left": 3,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 3,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "none",
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 3,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "display": "inline-flex",
-                          "selectors": Object {
-                            ".ms-Button--default": Object {
-                              "borderBottomRightRadius": "0",
-                              "borderRight": "none",
-                              "borderTopRightRadius": "0",
-                            },
-                            ".ms-Button--primary": Object {
-                              "border": "none",
-                              "borderBottomRightRadius": "0",
-                              "borderTopRightRadius": "0",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "border": "1px solid WindowText",
-                                  "borderRightWidth": "0",
-                                  "color": "WindowText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            ".ms-Button--primary + .ms-Button": Object {
-                              "border": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "1px solid WindowText",
-                                  "borderLeftWidth": "0",
-                                },
-                              },
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonContainerChecked": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerCheckedHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerDisabled": Object {
-                        "border": "none",
-                        "outline": "none",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "Window",
-                            "borderColor": "GrayText",
-                            "color": "GrayText",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "splitButtonContainerFocused": Object {
-                        "outline": "none!important",
-                      },
-                      "splitButtonContainerHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Highlight",
-                                "color": "Window",
-                              },
-                            },
-                          },
-                          ".ms-Button.is-disabled": Object {
-                            "color": "#a19f9d",
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonDivider": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "WindowText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonDividerDisabled": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "GrayText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonFlexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "splitButtonMenuButton": Object {
-                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                          ".ms-Button-menuIcon": Object {
-                            "color": "WindowText",
-                          },
-                        },
-                        "border": "1px solid #8a8886",
-                        "borderBottomRightRadius": "2px",
-                        "borderLeft": "none",
-                        "borderRadius": 0,
-                        "borderTopRightRadius": "2px",
-                        "boxSizing": "border-box",
-                        "cursor": "pointer",
-                        "display": "inline-block",
-                        "height": "auto",
-                        "marginBottom": 0,
-                        "marginLeft": -1,
-                        "marginRight": 0,
-                        "marginTop": 0,
-                        "outline": "transparent",
-                        "padding": 6,
-                        "textAlign": "center",
-                        "textDecoration": "none",
-                        "userSelect": "none",
-                        "verticalAlign": "top",
-                        "width": 32,
-                      },
-                      "splitButtonMenuButtonDisabled": Object {
-                        "border": "none",
-                        "pointerEvents": "none",
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ".ms-Button-menuIcon": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ":hover": Object {
-                            "cursor": "default",
-                          },
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "Window",
-                            "border": "1px solid GrayText",
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "splitButtonMenuFocused": Object {
-                        "outline": "transparent",
-                        "position": "relative",
-                        "selectors": Object {
-                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                            "border": "1px solid #ffffff",
-                            "bottom": 3,
-                            "content": "\\"\\"",
-                            "left": 3,
-                            "outline": "1px solid #605e5c",
-                            "position": "absolute",
-                            "right": 3,
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "border": "none",
-                                "bottom": -2,
-                                "left": -2,
-                                "right": -2,
-                                "top": -2,
-                              },
-                            },
-                            "top": 3,
-                            "zIndex": 1,
-                          },
-                          "::-moz-focus-inner": Object {
-                            "border": "0",
-                          },
-                        },
-                      },
-                      "textContainer": Object {
-                        "display": "block",
-                        "flexGrow": 1,
-                      },
-                    }
-                  }
-                  tabIndex={0}
-                  theme={
-                    Object {
-                      "disableGlobalClassNames": false,
-                      "effects": Object {
-                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "roundedCorner2": "2px",
-                        "roundedCorner4": "4px",
-                        "roundedCorner6": "6px",
-                      },
-                      "fonts": Object {
-                        "large": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "18px",
-                          "fontWeight": 400,
-                        },
-                        "medium": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        "mediumPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "16px",
-                          "fontWeight": 400,
-                        },
-                        "mega": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "68px",
-                          "fontWeight": 600,
-                        },
-                        "small": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "smallPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "superLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "42px",
-                          "fontWeight": 600,
-                        },
-                        "tiny": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "20px",
-                          "fontWeight": 600,
-                        },
-                        "xLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "24px",
-                          "fontWeight": 600,
-                        },
-                        "xSmall": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xxLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "28px",
-                          "fontWeight": 600,
-                        },
-                        "xxLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "32px",
-                          "fontWeight": 600,
-                        },
-                      },
-                      "isInverted": false,
-                      "palette": Object {
-                        "accent": "#0078d4",
-                        "black": "#000000",
-                        "blackTranslucent40": "rgba(0,0,0,.4)",
-                        "blue": "#0078d4",
-                        "blueDark": "#002050",
-                        "blueLight": "#00bcf2",
-                        "blueMid": "#00188f",
-                        "green": "#107c10",
-                        "greenDark": "#004b1c",
-                        "greenLight": "#bad80a",
-                        "magenta": "#b4009e",
-                        "magentaDark": "#5c005c",
-                        "magentaLight": "#e3008c",
-                        "neutralDark": "#201f1e",
-                        "neutralLight": "#edebe9",
-                        "neutralLighter": "#f3f2f1",
-                        "neutralLighterAlt": "#faf9f8",
-                        "neutralPrimary": "#323130",
-                        "neutralPrimaryAlt": "#3b3a39",
-                        "neutralQuaternary": "#d2d0ce",
-                        "neutralQuaternaryAlt": "#e1dfdd",
-                        "neutralSecondary": "#605e5c",
-                        "neutralSecondaryAlt": "#8a8886",
-                        "neutralTertiary": "#a19f9d",
-                        "neutralTertiaryAlt": "#c8c6c4",
-                        "orange": "#d83b01",
-                        "orangeLight": "#ea4300",
-                        "orangeLighter": "#ff8c00",
-                        "purple": "#5c2d91",
-                        "purpleDark": "#32145a",
-                        "purpleLight": "#b4a0ff",
-                        "red": "#e81123",
-                        "redDark": "#a4262c",
-                        "teal": "#008272",
-                        "tealDark": "#004b50",
-                        "tealLight": "#00b294",
-                        "themeDark": "#005a9e",
-                        "themeDarkAlt": "#106ebe",
-                        "themeDarker": "#004578",
-                        "themeLight": "#c7e0f4",
-                        "themeLighter": "#deecf9",
-                        "themeLighterAlt": "#eff6fc",
-                        "themePrimary": "#0078d4",
-                        "themeSecondary": "#2b88d8",
-                        "themeTertiary": "#71afe5",
-                        "white": "#ffffff",
-                        "whiteTranslucent40": "rgba(255,255,255,.4)",
-                        "yellow": "#ffb900",
-                        "yellowDark": "#d29200",
-                        "yellowLight": "#fff100",
-                      },
-                      "rtl": undefined,
-                      "semanticColors": Object {
-                        "accentButtonBackground": "#0078d4",
-                        "accentButtonText": "#ffffff",
-                        "actionLink": "#323130",
-                        "actionLinkHovered": "#201f1e",
-                        "blockingBackground": "#FDE7E9",
-                        "blockingIcon": "#FDE7E9",
-                        "bodyBackground": "#ffffff",
-                        "bodyBackgroundChecked": "#edebe9",
-                        "bodyBackgroundHovered": "#f3f2f1",
-                        "bodyDivider": "#edebe9",
-                        "bodyFrameBackground": "#ffffff",
-                        "bodyFrameDivider": "#edebe9",
-                        "bodyStandoutBackground": "#faf9f8",
-                        "bodySubtext": "#605e5c",
-                        "bodyText": "#323130",
-                        "bodyTextChecked": "#000000",
-                        "buttonBackground": "#ffffff",
-                        "buttonBackgroundChecked": "#c8c6c4",
-                        "buttonBackgroundCheckedHovered": "#edebe9",
-                        "buttonBackgroundDisabled": "#f3f2f1",
-                        "buttonBackgroundHovered": "#f3f2f1",
-                        "buttonBackgroundPressed": "#edebe9",
-                        "buttonBorder": "#8a8886",
-                        "buttonBorderDisabled": "#f3f2f1",
-                        "buttonText": "#323130",
-                        "buttonTextChecked": "#201f1e",
-                        "buttonTextCheckedHovered": "#000000",
-                        "buttonTextDisabled": "#a19f9d",
-                        "buttonTextHovered": "#201f1e",
-                        "buttonTextPressed": "#201f1e",
-                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "cardStandoutBackground": "#ffffff",
-                        "defaultStateBackground": "#faf9f8",
-                        "disabledBackground": "#f3f2f1",
-                        "disabledBodySubtext": "#c8c6c4",
-                        "disabledBodyText": "#a19f9d",
-                        "disabledBorder": "#c8c6c4",
-                        "disabledSubtext": "#d2d0ce",
-                        "disabledText": "#a19f9d",
-                        "errorBackground": "#FDE7E9",
-                        "errorIcon": "#A80000",
-                        "errorText": "#a4262c",
-                        "focusBorder": "#605e5c",
-                        "infoBackground": "#f3f2f1",
-                        "infoIcon": "#605e5c",
-                        "inputBackground": "#ffffff",
-                        "inputBackgroundChecked": "#0078d4",
-                        "inputBackgroundCheckedHovered": "#005a9e",
-                        "inputBorder": "#605e5c",
-                        "inputBorderHovered": "#323130",
-                        "inputFocusBorderAlt": "#0078d4",
-                        "inputForegroundChecked": "#ffffff",
-                        "inputIcon": "#0078d4",
-                        "inputIconDisabled": "#a19f9d",
-                        "inputIconHovered": "#005a9e",
-                        "inputPlaceholderBackgroundChecked": "#deecf9",
-                        "inputPlaceholderText": "#605e5c",
-                        "inputText": "#323130",
-                        "inputTextHovered": "#201f1e",
-                        "link": "#0078d4",
-                        "linkHovered": "#004578",
-                        "listBackground": "#ffffff",
-                        "listHeaderBackgroundHovered": "#f3f2f1",
-                        "listHeaderBackgroundPressed": "#edebe9",
-                        "listItemBackgroundChecked": "#edebe9",
-                        "listItemBackgroundCheckedHovered": "#e1dfdd",
-                        "listItemBackgroundHovered": "#f3f2f1",
-                        "listText": "#323130",
-                        "listTextColor": "#323130",
-                        "menuBackground": "#ffffff",
-                        "menuDivider": "#c8c6c4",
-                        "menuHeader": "#0078d4",
-                        "menuIcon": "#0078d4",
-                        "menuItemBackgroundChecked": "#edebe9",
-                        "menuItemBackgroundHovered": "#f3f2f1",
-                        "menuItemBackgroundPressed": "#edebe9",
-                        "menuItemText": "#323130",
-                        "menuItemTextHovered": "#201f1e",
-                        "messageLink": "#005A9E",
-                        "messageLinkHovered": "#004578",
-                        "messageText": "#323130",
-                        "primaryButtonBackground": "#0078d4",
-                        "primaryButtonBackgroundDisabled": "#f3f2f1",
-                        "primaryButtonBackgroundHovered": "#106ebe",
-                        "primaryButtonBackgroundPressed": "#005a9e",
-                        "primaryButtonBorder": "transparent",
-                        "primaryButtonText": "#ffffff",
-                        "primaryButtonTextDisabled": "#d2d0ce",
-                        "primaryButtonTextHovered": "#ffffff",
-                        "primaryButtonTextPressed": "#ffffff",
-                        "severeWarningBackground": "#FED9CC",
-                        "severeWarningIcon": "#D83B01",
-                        "smallInputBorder": "#605e5c",
-                        "successBackground": "#DFF6DD",
-                        "successIcon": "#107C10",
-                        "successText": "#107C10",
-                        "variantBorder": "#edebe9",
-                        "variantBorderHovered": "#a19f9d",
-                        "warningBackground": "#FFF4CE",
-                        "warningHighlight": "#ffb900",
-                        "warningIcon": "#797775",
-                        "warningText": "#323130",
-                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
-                      },
-                    }
-                  }
-                  title="Close pane"
-                  variantClassName="ms-Button--icon"
+                <div
+                  className="ms-TextField root-104"
                 >
-                  <button
-                    aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-102"
-                    data-is-focusable={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    tabIndex={0}
-                    title="Close pane"
-                    type="button"
+                  <div
+                    className="ms-TextField-wrapper"
                   >
-                    <span
-                      className="ms-Button-flexContainer flexContainer-103"
-                      data-automationid="splitbuttonprimary"
+                    <div
+                      className="ms-TextField-fieldGroup fieldGroup-105"
                     >
-                      <FontIcon
-                        className="ms-Button-icon icon-105"
-                        iconName="Cancel"
-                      >
-                        <i
-                          aria-hidden={true}
-                          className="ms-Icon root-37 css-110 ms-Button-icon icon-105"
-                          data-icon-name="Cancel"
-                          style={
-                            Object {
-                              "fontFamily": "\\"FabricMDL2Icons\\"",
-                            }
-                          }
-                        >
-                          
-                        </i>
-                      </FontIcon>
-                    </span>
-                  </button>
-                  <FocusRects />
-                </BaseButton>
-              </IconButton>
-            </CustomizedIconButton>
+                      <input
+                        aria-invalid={false}
+                        autoFocus={true}
+                        className="ms-TextField-field field-106"
+                        id="confirmCollectionId"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onInput={[Function]}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </TextFieldBase>
+            </StyledTextFieldBase>
           </div>
           <div
-            aria-live="assertive"
-            className="warningErrorContainer"
-            hidden={true}
+            className="deleteCollectionFeedback"
           >
-            <div
-              className="warningErrorContent"
+            <Text
+              block={true}
+              variant="small"
             >
-              <span>
-                <img
-                  alt="Error"
-                  className="paneErrorIcon"
-                  src=""
-                />
-              </span>
               <span
-                className="warningErrorDetailsLinkContainer"
+                className="css-115"
               >
-                <span
-                  className="formErrors"
-                  title=""
-                />
-                <a
-                  className="errorLink"
-                  hidden={true}
-                  onClick={[Function]}
-                  role="link"
-                >
-                  More details
-                </a>
+                Help us improve Azure Cosmos DB!
               </span>
-            </div>
-          </div>
-          <div
-            className="panelFormWrapper"
-          >
-            <div
-              className="panelMainContent"
+            </Text>
+            <Text
+              block={true}
+              variant="small"
             >
-              <div
-                className="confirmDeleteInput"
+              <span
+                className="css-115"
               >
-                <span
-                  className="mandatoryStar"
-                >
-                  * 
-                </span>
-                <Text
-                  variant="small"
-                >
-                  <span
-                    className="css-111"
-                  >
-                    Confirm by typing the 
-                    container
-                     id
-                  </span>
-                </Text>
-                <StyledTextFieldBase
-                  autoFocus={true}
-                  id="confirmCollectionId"
-                  onChange={[Function]}
-                  styles={
-                    Object {
-                      "fieldGroup": Object {
-                        "width": 300,
-                      },
-                    }
-                  }
-                  value=""
-                >
-                  <TextFieldBase
-                    autoFocus={true}
-                    deferredValidationTime={200}
-                    id="confirmCollectionId"
-                    onChange={[Function]}
-                    resizable={true}
-                    styles={[Function]}
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                    validateOnLoad={true}
-                    value=""
-                  >
-                    <div
-                      className="ms-TextField root-113"
-                    >
-                      <div
-                        className="ms-TextField-wrapper"
-                      >
-                        <div
-                          className="ms-TextField-fieldGroup fieldGroup-114"
-                        >
-                          <input
-                            aria-invalid={false}
-                            autoFocus={true}
-                            className="ms-TextField-field field-115"
-                            id="confirmCollectionId"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            onInput={[Function]}
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </TextFieldBase>
-                </StyledTextFieldBase>
-              </div>
-              <div
-                className="deleteCollectionFeedback"
-              >
-                <Text
-                  block={true}
-                  variant="small"
-                >
-                  <span
-                    className="css-124"
-                  >
-                    Help us improve Azure Cosmos DB!
-                  </span>
-                </Text>
-                <Text
-                  block={true}
-                  variant="small"
-                >
-                  <span
-                    className="css-124"
-                  >
-                    What is the reason why you are deleting this 
-                    container
-                    ?
-                  </span>
-                </Text>
-                <StyledTextFieldBase
-                  id="deleteCollectionFeedbackInput"
-                  multiline={true}
-                  onChange={[Function]}
-                  rows={3}
-                  styles={
-                    Object {
-                      "fieldGroup": Object {
-                        "width": 300,
-                      },
-                    }
-                  }
-                  value=""
-                >
-                  <TextFieldBase
-                    deferredValidationTime={200}
-                    id="deleteCollectionFeedbackInput"
-                    multiline={true}
-                    onChange={[Function]}
-                    resizable={true}
-                    rows={3}
-                    styles={[Function]}
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                    validateOnLoad={true}
-                    value=""
-                  >
-                    <div
-                      className="ms-TextField ms-TextField--multiline root-113"
-                    >
-                      <div
-                        className="ms-TextField-wrapper"
-                      >
-                        <div
-                          className="ms-TextField-fieldGroup fieldGroup-125"
-                        >
-                          <textarea
-                            aria-invalid={false}
-                            className="ms-TextField-field field-126"
-                            id="deleteCollectionFeedbackInput"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            onInput={[Function]}
-                            rows={3}
-                            value=""
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </TextFieldBase>
-                </StyledTextFieldBase>
-              </div>
-            </div>
-          </div>
-          <div
-            className="paneFooter"
-          >
-            <div
-              className="leftpanel-okbut"
+                What is the reason why you are deleting this 
+                container
+                ?
+              </span>
+            </Text>
+            <StyledTextFieldBase
+              id="deleteCollectionFeedbackInput"
+              multiline={true}
+              onChange={[Function]}
+              rows={3}
+              styles={
+                Object {
+                  "fieldGroup": Object {
+                    "width": 300,
+                  },
+                }
+              }
+              value=""
             >
-              <CustomizedPrimaryButton
-                ariaLabel="Submit"
-                className="genericPaneSubmitBtn"
-                onClick={[Function]}
-                style={
+              <TextFieldBase
+                deferredValidationTime={200}
+                id="deleteCollectionFeedbackInput"
+                multiline={true}
+                onChange={[Function]}
+                resizable={true}
+                rows={3}
+                styles={[Function]}
+                theme={
                   Object {
-                    "visibility": "visible",
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
                   }
                 }
-                tabIndex={0}
-                text="OK"
-                title="Submit"
+                validateOnLoad={true}
+                value=""
               >
-                <PrimaryButton
-                  ariaLabel="Submit"
-                  className="genericPaneSubmitBtn"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
+                <div
+                  className="ms-TextField ms-TextField--multiline root-104"
+                >
+                  <div
+                    className="ms-TextField-wrapper"
+                  >
+                    <div
+                      className="ms-TextField-fieldGroup fieldGroup-116"
+                    >
+                      <textarea
+                        aria-invalid={false}
+                        className="ms-TextField-field field-117"
+                        id="deleteCollectionFeedbackInput"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onInput={[Function]}
+                        rows={3}
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </TextFieldBase>
+            </StyledTextFieldBase>
+          </div>
+        </div>
+      </div>
+      <PanelFooterComponent
+        buttonLabel="OK"
+      >
+        <div
+          className="panelFooter"
+        >
+          <CustomizedPrimaryButton
+            ariaLabel="OK"
+            id="sidePanelOkButton"
+            text="OK"
+            type="submit"
+          >
+            <PrimaryButton
+              ariaLabel="OK"
+              id="sidePanelOkButton"
+              text="OK"
+              theme={
+                Object {
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
+                  },
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
+                  },
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
+                  },
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
+                  },
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
+                  },
+                }
+              }
+              type="submit"
+            >
+              <CustomizedDefaultButton
+                ariaLabel="OK"
+                id="sidePanelOkButton"
+                onRenderDescription={[Function]}
+                primary={true}
+                text="OK"
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
                   }
-                  tabIndex={0}
+                }
+                type="submit"
+              >
+                <DefaultButton
+                  ariaLabel="OK"
+                  id="sidePanelOkButton"
+                  onRenderDescription={[Function]}
+                  primary={true}
                   text="OK"
                   theme={
                     Object {
@@ -2174,20 +1576,586 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       },
                     }
                   }
-                  title="Submit"
+                  type="submit"
                 >
-                  <CustomizedDefaultButton
-                    ariaLabel="Submit"
-                    className="genericPaneSubmitBtn"
-                    onClick={[Function]}
+                  <BaseButton
+                    ariaLabel="OK"
+                    baseClassName="ms-Button"
+                    id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}
-                    style={
+                    split={false}
+                    styles={
                       Object {
-                        "visibility": "visible",
+                        "description": Object {
+                          "display": "block",
+                        },
+                        "flexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "icon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "16px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "iconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "label": Array [
+                          Object {
+                            "display": "block",
+                            "lineHeight": "100%",
+                            "margin": "0 4px",
+                          },
+                          Object {
+                            "fontWeight": 600,
+                          },
+                        ],
+                        "menuIcon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "12px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "menuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "root": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          Object {
+                            "border": "1px solid #8a8886",
+                            "borderRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "padding": "0 16px",
+                            "selectors": Object {
+                              ":active > *": Object {
+                                "left": 0,
+                                "position": "relative",
+                                "top": 0,
+                              },
+                            },
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                          },
+                          Object {
+                            "height": "32px",
+                            "minWidth": "80px",
+                          },
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "border": "1px solid #0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus": Object {
+                                "selectors": Object {
+                                  ":after": Object {
+                                    "border": "none",
+                                    "outlineColor": "#ffffff",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "WindowText",
+                                "borderColor": "WindowText",
+                                "color": "Window",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                        ],
+                        "rootChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootCheckedHovered": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootDisabled": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "borderColor": "#f3f2f1",
+                            "color": "#a19f9d",
+                            "cursor": "default",
+                            "selectors": Object {
+                              ":focus": Object {
+                                "outline": 0,
+                              },
+                              ":hover": Object {
+                                "outline": 0,
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "color": "#d2d0ce",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "borderColor": "GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "rootExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootHovered": Object {
+                          "backgroundColor": "#106ebe",
+                          "border": "1px solid #106ebe",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "borderColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        "rootPressed": Object {
+                          "backgroundColor": "#005a9e",
+                          "border": "1px solid #005a9e",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "borderColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "screenReaderText": Object {
+                          "border": 0,
+                          "height": 1,
+                          "margin": -1,
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "absolute",
+                          "width": 1,
+                        },
+                        "splitButtonContainer": Array [
+                          Object {
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                              },
+                            },
+                          },
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid #ffffff",
+                                "bottom": 3,
+                                "content": "\\"\\"",
+                                "left": 3,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 3,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 3,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "display": "inline-flex",
+                            "selectors": Object {
+                              ".ms-Button--default": Object {
+                                "borderBottomRightRadius": "0",
+                                "borderRight": "none",
+                                "borderTopRightRadius": "0",
+                              },
+                              ".ms-Button--primary": Object {
+                                "border": "none",
+                                "borderBottomRightRadius": "0",
+                                "borderTopRightRadius": "0",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid WindowText",
+                                    "borderRightWidth": "0",
+                                    "color": "WindowText",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                              ".ms-Button--primary + .ms-Button": Object {
+                                "border": "none",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "1px solid WindowText",
+                                    "borderLeftWidth": "0",
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonContainerChecked": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerCheckedHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerDisabled": Object {
+                          "border": "none",
+                          "outline": "none",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "splitButtonContainerFocused": Object {
+                          "outline": "none!important",
+                        },
+                        "splitButtonContainerHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            ".ms-Button.is-disabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonDivider": Array [
+                          Object {
+                            "backgroundColor": "#ffffff",
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                          Object {
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                        ],
+                        "splitButtonDividerDisabled": Object {
+                          "bottom": 8,
+                          "position": "absolute",
+                          "right": 31,
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "GrayText",
+                            },
+                          },
+                          "top": 8,
+                          "width": 1,
+                        },
+                        "splitButtonFlexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "splitButtonMenuButton": Array [
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#106ebe",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "Highlight",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                          },
+                          Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              ".ms-Button-menuIcon": Object {
+                                "color": "WindowText",
+                              },
+                            },
+                            "border": "1px solid #8a8886",
+                            "borderBottomRightRadius": "2px",
+                            "borderLeft": "none",
+                            "borderRadius": 0,
+                            "borderTopRightRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": "auto",
+                            "marginBottom": 0,
+                            "marginLeft": -1,
+                            "marginRight": 0,
+                            "marginTop": 0,
+                            "outline": "transparent",
+                            "padding": 6,
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                            "verticalAlign": "top",
+                            "width": 32,
+                          },
+                        ],
+                        "splitButtonMenuButtonChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuButtonDisabled": Array [
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#f3f2f1",
+                              },
+                            },
+                          },
+                          Object {
+                            "border": "none",
+                            "pointerEvents": "none",
+                            "selectors": Object {
+                              ".ms-Button--primary": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ".ms-Button-menuIcon": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ":hover": Object {
+                                "cursor": "default",
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "border": "1px solid GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonMenuButtonExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuFocused": Object {
+                          "outline": "transparent",
+                          "position": "relative",
+                          "selectors": Object {
+                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                              "border": "1px solid #ffffff",
+                              "bottom": 3,
+                              "content": "\\"\\"",
+                              "left": 3,
+                              "outline": "1px solid #605e5c",
+                              "position": "absolute",
+                              "right": 3,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "border": "none",
+                                  "bottom": -2,
+                                  "left": -2,
+                                  "right": -2,
+                                  "top": -2,
+                                },
+                              },
+                              "top": 3,
+                              "zIndex": 1,
+                            },
+                            "::-moz-focus-inner": Object {
+                              "border": "0",
+                            },
+                          },
+                        },
+                        "splitButtonMenuIcon": Object {
+                          "color": "#ffffff",
+                        },
+                        "splitButtonMenuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "textContainer": Object {
+                          "display": "block",
+                          "flexGrow": 1,
+                        },
                       }
                     }
-                    tabIndex={0}
                     text="OK"
                     theme={
                       Object {
@@ -2462,1214 +2430,48 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         },
                       }
                     }
-                    title="Submit"
+                    type="submit"
+                    variantClassName="ms-Button--primary"
                   >
-                    <DefaultButton
-                      ariaLabel="Submit"
-                      className="genericPaneSubmitBtn"
+                    <button
+                      aria-label="OK"
+                      className="ms-Button ms-Button--primary root-119"
+                      data-is-focusable={true}
+                      id="sidePanelOkButton"
                       onClick={[Function]}
-                      onRenderDescription={[Function]}
-                      primary={true}
-                      style={
-                        Object {
-                          "visibility": "visible",
-                        }
-                      }
-                      tabIndex={0}
-                      text="OK"
-                      theme={
-                        Object {
-                          "disableGlobalClassNames": false,
-                          "effects": Object {
-                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "roundedCorner2": "2px",
-                            "roundedCorner4": "4px",
-                            "roundedCorner6": "6px",
-                          },
-                          "fonts": Object {
-                            "large": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "18px",
-                              "fontWeight": 400,
-                            },
-                            "medium": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "14px",
-                              "fontWeight": 400,
-                            },
-                            "mediumPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "16px",
-                              "fontWeight": 400,
-                            },
-                            "mega": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "68px",
-                              "fontWeight": 600,
-                            },
-                            "small": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "smallPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "superLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "42px",
-                              "fontWeight": 600,
-                            },
-                            "tiny": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "20px",
-                              "fontWeight": 600,
-                            },
-                            "xLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "24px",
-                              "fontWeight": 600,
-                            },
-                            "xSmall": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xxLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "28px",
-                              "fontWeight": 600,
-                            },
-                            "xxLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "32px",
-                              "fontWeight": 600,
-                            },
-                          },
-                          "isInverted": false,
-                          "palette": Object {
-                            "accent": "#0078d4",
-                            "black": "#000000",
-                            "blackTranslucent40": "rgba(0,0,0,.4)",
-                            "blue": "#0078d4",
-                            "blueDark": "#002050",
-                            "blueLight": "#00bcf2",
-                            "blueMid": "#00188f",
-                            "green": "#107c10",
-                            "greenDark": "#004b1c",
-                            "greenLight": "#bad80a",
-                            "magenta": "#b4009e",
-                            "magentaDark": "#5c005c",
-                            "magentaLight": "#e3008c",
-                            "neutralDark": "#201f1e",
-                            "neutralLight": "#edebe9",
-                            "neutralLighter": "#f3f2f1",
-                            "neutralLighterAlt": "#faf9f8",
-                            "neutralPrimary": "#323130",
-                            "neutralPrimaryAlt": "#3b3a39",
-                            "neutralQuaternary": "#d2d0ce",
-                            "neutralQuaternaryAlt": "#e1dfdd",
-                            "neutralSecondary": "#605e5c",
-                            "neutralSecondaryAlt": "#8a8886",
-                            "neutralTertiary": "#a19f9d",
-                            "neutralTertiaryAlt": "#c8c6c4",
-                            "orange": "#d83b01",
-                            "orangeLight": "#ea4300",
-                            "orangeLighter": "#ff8c00",
-                            "purple": "#5c2d91",
-                            "purpleDark": "#32145a",
-                            "purpleLight": "#b4a0ff",
-                            "red": "#e81123",
-                            "redDark": "#a4262c",
-                            "teal": "#008272",
-                            "tealDark": "#004b50",
-                            "tealLight": "#00b294",
-                            "themeDark": "#005a9e",
-                            "themeDarkAlt": "#106ebe",
-                            "themeDarker": "#004578",
-                            "themeLight": "#c7e0f4",
-                            "themeLighter": "#deecf9",
-                            "themeLighterAlt": "#eff6fc",
-                            "themePrimary": "#0078d4",
-                            "themeSecondary": "#2b88d8",
-                            "themeTertiary": "#71afe5",
-                            "white": "#ffffff",
-                            "whiteTranslucent40": "rgba(255,255,255,.4)",
-                            "yellow": "#ffb900",
-                            "yellowDark": "#d29200",
-                            "yellowLight": "#fff100",
-                          },
-                          "rtl": undefined,
-                          "semanticColors": Object {
-                            "accentButtonBackground": "#0078d4",
-                            "accentButtonText": "#ffffff",
-                            "actionLink": "#323130",
-                            "actionLinkHovered": "#201f1e",
-                            "blockingBackground": "#FDE7E9",
-                            "blockingIcon": "#FDE7E9",
-                            "bodyBackground": "#ffffff",
-                            "bodyBackgroundChecked": "#edebe9",
-                            "bodyBackgroundHovered": "#f3f2f1",
-                            "bodyDivider": "#edebe9",
-                            "bodyFrameBackground": "#ffffff",
-                            "bodyFrameDivider": "#edebe9",
-                            "bodyStandoutBackground": "#faf9f8",
-                            "bodySubtext": "#605e5c",
-                            "bodyText": "#323130",
-                            "bodyTextChecked": "#000000",
-                            "buttonBackground": "#ffffff",
-                            "buttonBackgroundChecked": "#c8c6c4",
-                            "buttonBackgroundCheckedHovered": "#edebe9",
-                            "buttonBackgroundDisabled": "#f3f2f1",
-                            "buttonBackgroundHovered": "#f3f2f1",
-                            "buttonBackgroundPressed": "#edebe9",
-                            "buttonBorder": "#8a8886",
-                            "buttonBorderDisabled": "#f3f2f1",
-                            "buttonText": "#323130",
-                            "buttonTextChecked": "#201f1e",
-                            "buttonTextCheckedHovered": "#000000",
-                            "buttonTextDisabled": "#a19f9d",
-                            "buttonTextHovered": "#201f1e",
-                            "buttonTextPressed": "#201f1e",
-                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "cardStandoutBackground": "#ffffff",
-                            "defaultStateBackground": "#faf9f8",
-                            "disabledBackground": "#f3f2f1",
-                            "disabledBodySubtext": "#c8c6c4",
-                            "disabledBodyText": "#a19f9d",
-                            "disabledBorder": "#c8c6c4",
-                            "disabledSubtext": "#d2d0ce",
-                            "disabledText": "#a19f9d",
-                            "errorBackground": "#FDE7E9",
-                            "errorIcon": "#A80000",
-                            "errorText": "#a4262c",
-                            "focusBorder": "#605e5c",
-                            "infoBackground": "#f3f2f1",
-                            "infoIcon": "#605e5c",
-                            "inputBackground": "#ffffff",
-                            "inputBackgroundChecked": "#0078d4",
-                            "inputBackgroundCheckedHovered": "#005a9e",
-                            "inputBorder": "#605e5c",
-                            "inputBorderHovered": "#323130",
-                            "inputFocusBorderAlt": "#0078d4",
-                            "inputForegroundChecked": "#ffffff",
-                            "inputIcon": "#0078d4",
-                            "inputIconDisabled": "#a19f9d",
-                            "inputIconHovered": "#005a9e",
-                            "inputPlaceholderBackgroundChecked": "#deecf9",
-                            "inputPlaceholderText": "#605e5c",
-                            "inputText": "#323130",
-                            "inputTextHovered": "#201f1e",
-                            "link": "#0078d4",
-                            "linkHovered": "#004578",
-                            "listBackground": "#ffffff",
-                            "listHeaderBackgroundHovered": "#f3f2f1",
-                            "listHeaderBackgroundPressed": "#edebe9",
-                            "listItemBackgroundChecked": "#edebe9",
-                            "listItemBackgroundCheckedHovered": "#e1dfdd",
-                            "listItemBackgroundHovered": "#f3f2f1",
-                            "listText": "#323130",
-                            "listTextColor": "#323130",
-                            "menuBackground": "#ffffff",
-                            "menuDivider": "#c8c6c4",
-                            "menuHeader": "#0078d4",
-                            "menuIcon": "#0078d4",
-                            "menuItemBackgroundChecked": "#edebe9",
-                            "menuItemBackgroundHovered": "#f3f2f1",
-                            "menuItemBackgroundPressed": "#edebe9",
-                            "menuItemText": "#323130",
-                            "menuItemTextHovered": "#201f1e",
-                            "messageLink": "#005A9E",
-                            "messageLinkHovered": "#004578",
-                            "messageText": "#323130",
-                            "primaryButtonBackground": "#0078d4",
-                            "primaryButtonBackgroundDisabled": "#f3f2f1",
-                            "primaryButtonBackgroundHovered": "#106ebe",
-                            "primaryButtonBackgroundPressed": "#005a9e",
-                            "primaryButtonBorder": "transparent",
-                            "primaryButtonText": "#ffffff",
-                            "primaryButtonTextDisabled": "#d2d0ce",
-                            "primaryButtonTextHovered": "#ffffff",
-                            "primaryButtonTextPressed": "#ffffff",
-                            "severeWarningBackground": "#FED9CC",
-                            "severeWarningIcon": "#D83B01",
-                            "smallInputBorder": "#605e5c",
-                            "successBackground": "#DFF6DD",
-                            "successIcon": "#107C10",
-                            "successText": "#107C10",
-                            "variantBorder": "#edebe9",
-                            "variantBorderHovered": "#a19f9d",
-                            "warningBackground": "#FFF4CE",
-                            "warningHighlight": "#ffb900",
-                            "warningIcon": "#797775",
-                            "warningText": "#323130",
-                          },
-                          "spacing": Object {
-                            "l1": "20px",
-                            "l2": "32px",
-                            "m": "16px",
-                            "s1": "8px",
-                            "s2": "4px",
-                          },
-                        }
-                      }
-                      title="Submit"
+                      onKeyDown={[Function]}
+                      onKeyPress={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      type="submit"
                     >
-                      <BaseButton
-                        ariaLabel="Submit"
-                        baseClassName="ms-Button"
-                        className="genericPaneSubmitBtn"
-                        onClick={[Function]}
-                        onRenderDescription={[Function]}
-                        primary={true}
-                        split={false}
-                        style={
-                          Object {
-                            "visibility": "visible",
-                          }
-                        }
-                        styles={
-                          Object {
-                            "description": Object {
-                              "display": "block",
-                            },
-                            "flexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "icon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "16px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "iconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "label": Array [
-                              Object {
-                                "display": "block",
-                                "lineHeight": "100%",
-                                "margin": "0 4px",
-                              },
-                              Object {
-                                "fontWeight": 600,
-                              },
-                            ],
-                            "menuIcon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "12px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "menuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "root": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              Object {
-                                "border": "1px solid #8a8886",
-                                "borderRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "padding": "0 16px",
-                                "selectors": Object {
-                                  ":active > *": Object {
-                                    "left": 0,
-                                    "position": "relative",
-                                    "top": 0,
-                                  },
-                                },
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                              },
-                              Object {
-                                "height": "32px",
-                                "minWidth": "80px",
-                              },
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "border": "1px solid #0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus": Object {
-                                    "selectors": Object {
-                                      ":after": Object {
-                                        "border": "none",
-                                        "outlineColor": "#ffffff",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
-                                    "backgroundColor": "WindowText",
-                                    "borderColor": "WindowText",
-                                    "color": "Window",
-                                    "forcedColorAdjust": "none",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootCheckedHovered": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootDisabled": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "borderColor": "#f3f2f1",
-                                "color": "#a19f9d",
-                                "cursor": "default",
-                                "selectors": Object {
-                                  ":focus": Object {
-                                    "outline": 0,
-                                  },
-                                  ":hover": Object {
-                                    "outline": 0,
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "color": "#d2d0ce",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "borderColor": "GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootHovered": Object {
-                              "backgroundColor": "#106ebe",
-                              "border": "1px solid #106ebe",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "Highlight",
-                                  "borderColor": "Highlight",
-                                  "color": "Window",
-                                },
-                              },
-                            },
-                            "rootPressed": Object {
-                              "backgroundColor": "#005a9e",
-                              "border": "1px solid #005a9e",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "WindowText",
-                                  "borderColor": "WindowText",
-                                  "color": "Window",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "screenReaderText": Object {
-                              "border": 0,
-                              "height": 1,
-                              "margin": -1,
-                              "overflow": "hidden",
-                              "padding": 0,
-                              "position": "absolute",
-                              "width": 1,
-                            },
-                            "splitButtonContainer": Array [
-                              Object {
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                },
-                              },
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "display": "inline-flex",
-                                "selectors": Object {
-                                  ".ms-Button--default": Object {
-                                    "borderBottomRightRadius": "0",
-                                    "borderRight": "none",
-                                    "borderTopRightRadius": "0",
-                                  },
-                                  ".ms-Button--primary": Object {
-                                    "border": "none",
-                                    "borderBottomRightRadius": "0",
-                                    "borderTopRightRadius": "0",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "Window",
-                                        "border": "1px solid WindowText",
-                                        "borderRightWidth": "0",
-                                        "color": "WindowText",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button--primary + .ms-Button": Object {
-                                    "border": "none",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "1px solid WindowText",
-                                        "borderLeftWidth": "0",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonContainerChecked": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerCheckedHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerDisabled": Object {
-                              "border": "none",
-                              "outline": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "borderColor": "GrayText",
-                                  "color": "GrayText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "splitButtonContainerFocused": Object {
-                              "outline": "none!important",
-                            },
-                            "splitButtonContainerHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Highlight",
-                                      "color": "Window",
-                                    },
-                                  },
-                                },
-                                ".ms-Button.is-disabled": Object {
-                                  "color": "#a19f9d",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "borderColor": "GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonDivider": Array [
-                              Object {
-                                "backgroundColor": "#ffffff",
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                              Object {
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                            ],
-                            "splitButtonDividerDisabled": Object {
-                              "bottom": 8,
-                              "position": "absolute",
-                              "right": 31,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "GrayText",
-                                },
-                              },
-                              "top": 8,
-                              "width": 1,
-                            },
-                            "splitButtonFlexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "splitButtonMenuButton": Array [
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#106ebe",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "Highlight",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                              },
-                              Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  ".ms-Button-menuIcon": Object {
-                                    "color": "WindowText",
-                                  },
-                                },
-                                "border": "1px solid #8a8886",
-                                "borderBottomRightRadius": "2px",
-                                "borderLeft": "none",
-                                "borderRadius": 0,
-                                "borderTopRightRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "height": "auto",
-                                "marginBottom": 0,
-                                "marginLeft": -1,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "outline": "transparent",
-                                "padding": 6,
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                                "verticalAlign": "top",
-                                "width": 32,
-                              },
-                            ],
-                            "splitButtonMenuButtonChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuButtonDisabled": Array [
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#f3f2f1",
-                                  },
-                                },
-                              },
-                              Object {
-                                "border": "none",
-                                "pointerEvents": "none",
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Window",
-                                        "borderColor": "GrayText",
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button-menuIcon": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ":hover": Object {
-                                    "cursor": "default",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "border": "1px solid GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonMenuButtonExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuFocused": Object {
-                              "outline": "transparent",
-                              "position": "relative",
-                              "selectors": Object {
-                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                  "border": "1px solid #ffffff",
-                                  "bottom": 3,
-                                  "content": "\\"\\"",
-                                  "left": 3,
-                                  "outline": "1px solid #605e5c",
-                                  "position": "absolute",
-                                  "right": 3,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "border": "none",
-                                      "bottom": -2,
-                                      "left": -2,
-                                      "right": -2,
-                                      "top": -2,
-                                    },
-                                  },
-                                  "top": 3,
-                                  "zIndex": 1,
-                                },
-                                "::-moz-focus-inner": Object {
-                                  "border": "0",
-                                },
-                              },
-                            },
-                            "splitButtonMenuIcon": Object {
-                              "color": "#ffffff",
-                            },
-                            "splitButtonMenuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "textContainer": Object {
-                              "display": "block",
-                              "flexGrow": 1,
-                            },
-                          }
-                        }
-                        tabIndex={0}
-                        text="OK"
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        title="Submit"
-                        variantClassName="ms-Button--primary"
+                      <span
+                        className="ms-Button-flexContainer flexContainer-120"
+                        data-automationid="splitbuttonprimary"
                       >
-                        <button
-                          aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-128"
-                          data-is-focusable={true}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyPress={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseUp={[Function]}
-                          style={
-                            Object {
-                              "visibility": "visible",
-                            }
-                          }
-                          tabIndex={0}
-                          title="Submit"
-                          type="button"
+                        <span
+                          className="ms-Button-textContainer textContainer-121"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-103"
-                            data-automationid="splitbuttonprimary"
+                            className="ms-Button-label label-123"
+                            id="id__6"
+                            key="id__6"
                           >
-                            <span
-                              className="ms-Button-textContainer textContainer-104"
-                            >
-                              <span
-                                className="ms-Button-label label-129"
-                                id="id__9"
-                                key="id__9"
-                              >
-                                OK
-                              </span>
-                            </span>
+                            OK
                           </span>
-                        </button>
-                        <FocusRects />
-                      </BaseButton>
-                    </DefaultButton>
-                  </CustomizedDefaultButton>
-                </PrimaryButton>
-              </CustomizedPrimaryButton>
-            </div>
-          </div>
+                        </span>
+                      </span>
+                    </button>
+                    <FocusRects />
+                  </BaseButton>
+                </DefaultButton>
+              </CustomizedDefaultButton>
+            </PrimaryButton>
+          </CustomizedPrimaryButton>
         </div>
-        <div
-          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-          hidden={true}
-        >
-          <img
-            className="dataExplorerLoader"
-            src=""
-          />
-        </div>
-      </div>
-    </div>
-  </GenericRightPaneComponent>
+      </PanelFooterComponent>
+    </form>
+  </RightPaneForm>
 </DeleteCollectionConfirmationPane>
 `;
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
index 736370e0d..f7082c8ff 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
@@ -98,8 +98,8 @@ describe("Delete Database Confirmation Pane", () => {
         .find("#confirmDatabaseId")
         .hostNodes()
         .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      expect(wrapper.exists("button")).toBe(true);
+      wrapper.find("button").hostNodes().simulate("submit");
       expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
       wrapper.unmount();
     });
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
index 1aef7a411..4cac98b6b 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -12,9 +12,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface DeleteDatabaseConfirmationPanelProps {
   explorer: Explorer;
@@ -23,36 +22,19 @@ interface DeleteDatabaseConfirmationPanelProps {
   selectedDatabase: Database;
 }
 
-export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
-  props: DeleteDatabaseConfirmationPanelProps
-): JSX.Element => {
+export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
+  explorer,
+  openNotificationConsole,
+  closePanel,
+  selectedDatabase,
+}: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
 
   const [formError, setFormError] = useState<string>("");
   const [databaseInput, setDatabaseInput] = useState<string>("");
   const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
 
-  const getPanelErrorProps = (): PanelInfoErrorProps => {
-    if (formError) {
-      return {
-        messageType: "error",
-        message: formError,
-        showErrorDetails: true,
-        openNotificationConsole: props.openNotificationConsole,
-      };
-    }
-
-    return {
-      messageType: "warning",
-      showErrorDetails: false,
-      message:
-        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
-    };
-  };
-
-  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    const { selectedDatabase, explorer } = props;
-    event.preventDefault();
+  const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
       setFormError("Input database name does not match the selected database");
       logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
@@ -69,7 +51,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
 
     try {
       await deleteDatabase(selectedDatabase.id());
-      props.closePanel();
+      closePanel();
       explorer.refreshAllDatabases();
       explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
       explorer.selectedNode(undefined);
@@ -121,13 +103,27 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   };
 
   const shouldRecordFeedback = (): boolean => {
-    const { explorer } = props;
     return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
   };
 
+  const props: RightPaneFormProps = {
+    formError,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
+
+  const errorProps: PanelInfoErrorProps = {
+    messageType: "warning",
+    showErrorDetails: false,
+    message:
+      "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
+  };
+
   return (
-    <form className="panelFormWrapper" onSubmit={submit}>
-      <PanelInfoErrorComponent {...getPanelErrorProps()} />
+    <RightPaneForm {...props}>
+      {!formError && <PanelInfoErrorComponent {...errorProps} />}
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
@@ -161,8 +157,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
           </div>
         )}
       </div>
-      <PanelFooterComponent buttonLabel="OK" />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx b/src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx
index a9a78c203..4922eeb47 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx
@@ -2,11 +2,9 @@ import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/reac
 import { useBoolean } from "@fluentui/react-hooks";
 import AddPropertyIcon from "images/Add-property.svg";
 import React, { FunctionComponent, useState } from "react";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -35,24 +33,11 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
   const [partitionValue, setPartitionValue] = useState<string>(); // Defaulting to undefined here is important. It is not the same partition key as ""
   const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
 
   const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
     setSelectedKey(item);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "executesprocparamspane",
-    isExecuting: isLoading,
-    title: "Input parameters",
-    submitButtonText: "Execute",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
   const validateUnwrappedParams = (): boolean => {
     const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
     for (let i = 0; i < unwrappedParams.length; i++) {
@@ -66,7 +51,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
 
   const setInvalidParamError = (invalidParam: string): void => {
     setFormError(`Invalid param specified: ${invalidParam}`);
-    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
+    logConsoleError(`Invalid param specified: ${invalidParam} is not a valid literal value`);
   };
 
   const submit = (): void => {
@@ -128,8 +113,16 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
     setParamKeyValues(cloneParamKeyValue);
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole,
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: "Execute",
+    onSubmit: () => submit(),
+  };
+
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -169,6 +162,6 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
index 7765c33f9..1544a9403 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
@@ -6,70 +6,35 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
   expandConsole={[Function]}
   storedProcedure={Object {}}
 >
-  <GenericRightPaneComponent
+  <RightPaneForm
     expandConsole={[Function]}
     formError=""
-    formErrorDetail=""
-    id="executesprocparamspane"
     isExecuting={false}
-    onClose={[Function]}
     onSubmit={[Function]}
     submitButtonText="Execute"
-    title="Input parameters"
   >
-    <div
-      onKeyDown={[Function]}
-      tabIndex={-1}
+    <form
+      className="panelFormWrapper"
+      onSubmit={[Function]}
     >
       <div
-        className="contextual-pane-out"
-        onClick={[Function]}
-      />
-      <div
-        className="contextual-pane"
-        id="executesprocparamspane"
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "height": NaN,
-          }
-        }
+        className="panelFormWrapper"
       >
         <div
-          className="panelContentWrapper"
+          className="panelMainContent"
         >
-          <div
-            className="firstdivbg headerline"
+          <InputParameter
+            dropdownLabel="Key"
+            inputLabel="Value"
+            inputParameterTitle="Partition key value"
+            isAddRemoveVisible={false}
+            onParamKeyChange={[Function]}
+            onParamValueChange={[Function]}
+            selectedKey="string"
           >
-            <span
-              aria-level={2}
-              id="databaseTitle"
-              role="heading"
-            >
-              Input parameters
-            </span>
-            <CustomizedIconButton
-              ariaLabel="Close pane"
-              className="closePaneBtn"
-              iconProps={
-                Object {
-                  "iconName": "Cancel",
-                }
-              }
-              onClick={[Function]}
-              tabIndex={0}
-              title="Close pane"
-            >
-              <IconButton
-                ariaLabel="Close pane"
-                className="closePaneBtn"
-                iconProps={
-                  Object {
-                    "iconName": "Cancel",
-                  }
-                }
-                onClick={[Function]}
-                tabIndex={0}
+            <StyledLabelBase>
+              <LabelBase
+                styles={[Function]}
                 theme={
                   Object {
                     "disableGlobalClassNames": false,
@@ -343,843 +308,61 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     },
                   }
                 }
-                title="Close pane"
               >
-                <BaseButton
-                  ariaLabel="Close pane"
-                  baseClassName="ms-Button"
-                  className="closePaneBtn"
-                  iconProps={
-                    Object {
-                      "iconName": "Cancel",
-                    }
+                <label
+                  className="ms-Label root-53"
+                >
+                  Partition key value
+                </label>
+              </LabelBase>
+            </StyledLabelBase>
+            <Stack
+              horizontal={true}
+            >
+              <div
+                className="ms-Stack css-54"
+              >
+                <Dropdown
+                  key=".0:$.0"
+                  label="Key"
+                  onChange={[Function]}
+                  options={
+                    Array [
+                      Object {
+                        "key": "string",
+                        "text": "String",
+                      },
+                      Object {
+                        "key": "custom",
+                        "text": "Custom",
+                      },
+                    ]
                   }
-                  onClick={[Function]}
-                  onRenderDescription={[Function]}
-                  onRenderText={[Function]}
-                  split={false}
+                  selectedKey="string"
                   styles={
                     Object {
-                      "description": Object {
-                        "display": "block",
-                      },
-                      "flexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "icon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "16px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "iconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "label": Object {
-                        "display": "block",
-                        "lineHeight": "100%",
-                        "margin": "0 4px",
-                      },
-                      "menuIcon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "12px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "menuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "root": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        Object {
-                          "border": "1px solid #8a8886",
-                          "borderRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "padding": "0 16px",
-                          "selectors": Object {
-                            ":active > *": Object {
-                              "left": 0,
-                              "position": "relative",
-                              "top": 0,
-                            },
-                          },
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                        },
-                        Object {
-                          "backgroundColor": "transparent",
-                          "border": "none",
-                          "color": "#0078d4",
-                          "height": "32px",
-                          "padding": "0 4px",
-                          "width": "32px",
-                        },
-                      ],
-                      "rootChecked": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootCheckedHovered": Object {
-                        "backgroundColor": "#e1dfdd",
-                        "color": "#005a9e",
-                      },
-                      "rootDisabled": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "borderColor": "#f3f2f1",
-                          "color": "#a19f9d",
-                          "cursor": "default",
-                          "selectors": Object {
-                            ":focus": Object {
-                              "outline": 0,
-                            },
-                            ":hover": Object {
-                              "outline": 0,
-                            },
-                          },
-                        },
-                        Object {
-                          "color": "#c8c6c4",
-                        },
-                      ],
-                      "rootExpanded": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootHasMenu": Object {
-                        "width": "auto",
-                      },
-                      "rootHovered": Object {
-                        "backgroundColor": "#f3f2f1",
-                        "color": "#106ebe",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "borderColor": "Highlight",
-                            "color": "Highlight",
-                          },
-                        },
-                      },
-                      "rootPressed": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "screenReaderText": Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "width": 1,
-                      },
-                      "splitButtonContainer": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid #ffffff",
-                              "bottom": 3,
-                              "content": "\\"\\"",
-                              "left": 3,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 3,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "none",
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 3,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "display": "inline-flex",
-                          "selectors": Object {
-                            ".ms-Button--default": Object {
-                              "borderBottomRightRadius": "0",
-                              "borderRight": "none",
-                              "borderTopRightRadius": "0",
-                            },
-                            ".ms-Button--primary": Object {
-                              "border": "none",
-                              "borderBottomRightRadius": "0",
-                              "borderTopRightRadius": "0",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "border": "1px solid WindowText",
-                                  "borderRightWidth": "0",
-                                  "color": "WindowText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            ".ms-Button--primary + .ms-Button": Object {
-                              "border": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "1px solid WindowText",
-                                  "borderLeftWidth": "0",
-                                },
-                              },
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonContainerChecked": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerCheckedHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerDisabled": Object {
-                        "border": "none",
-                        "outline": "none",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "Window",
-                            "borderColor": "GrayText",
-                            "color": "GrayText",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "splitButtonContainerFocused": Object {
-                        "outline": "none!important",
-                      },
-                      "splitButtonContainerHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Highlight",
-                                "color": "Window",
-                              },
-                            },
-                          },
-                          ".ms-Button.is-disabled": Object {
-                            "color": "#a19f9d",
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonDivider": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "WindowText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonDividerDisabled": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "GrayText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonFlexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "splitButtonMenuButton": Object {
-                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                          ".ms-Button-menuIcon": Object {
-                            "color": "WindowText",
-                          },
-                        },
-                        "border": "1px solid #8a8886",
-                        "borderBottomRightRadius": "2px",
-                        "borderLeft": "none",
-                        "borderRadius": 0,
-                        "borderTopRightRadius": "2px",
-                        "boxSizing": "border-box",
-                        "cursor": "pointer",
-                        "display": "inline-block",
-                        "height": "auto",
-                        "marginBottom": 0,
-                        "marginLeft": -1,
-                        "marginRight": 0,
-                        "marginTop": 0,
-                        "outline": "transparent",
-                        "padding": 6,
-                        "textAlign": "center",
-                        "textDecoration": "none",
-                        "userSelect": "none",
-                        "verticalAlign": "top",
-                        "width": 32,
-                      },
-                      "splitButtonMenuButtonDisabled": Object {
-                        "border": "none",
-                        "pointerEvents": "none",
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ".ms-Button-menuIcon": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ":hover": Object {
-                            "cursor": "default",
-                          },
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "Window",
-                            "border": "1px solid GrayText",
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "splitButtonMenuFocused": Object {
-                        "outline": "transparent",
-                        "position": "relative",
-                        "selectors": Object {
-                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                            "border": "1px solid #ffffff",
-                            "bottom": 3,
-                            "content": "\\"\\"",
-                            "left": 3,
-                            "outline": "1px solid #605e5c",
-                            "position": "absolute",
-                            "right": 3,
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "border": "none",
-                                "bottom": -2,
-                                "left": -2,
-                                "right": -2,
-                                "top": -2,
-                              },
-                            },
-                            "top": 3,
-                            "zIndex": 1,
-                          },
-                          "::-moz-focus-inner": Object {
-                            "border": "0",
-                          },
-                        },
-                      },
-                      "textContainer": Object {
-                        "display": "block",
-                        "flexGrow": 1,
+                      "dropdown": Object {
+                        "width": 100,
                       },
                     }
                   }
-                  tabIndex={0}
-                  theme={
-                    Object {
-                      "disableGlobalClassNames": false,
-                      "effects": Object {
-                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "roundedCorner2": "2px",
-                        "roundedCorner4": "4px",
-                        "roundedCorner6": "6px",
-                      },
-                      "fonts": Object {
-                        "large": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "18px",
-                          "fontWeight": 400,
+                >
+                  <DropdownBase
+                    label="Key"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "key": "string",
+                          "text": "String",
                         },
-                        "medium": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
+                        Object {
+                          "key": "custom",
+                          "text": "Custom",
                         },
-                        "mediumPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "16px",
-                          "fontWeight": 400,
-                        },
-                        "mega": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "68px",
-                          "fontWeight": 600,
-                        },
-                        "small": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "smallPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "superLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "42px",
-                          "fontWeight": 600,
-                        },
-                        "tiny": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "20px",
-                          "fontWeight": 600,
-                        },
-                        "xLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "24px",
-                          "fontWeight": 600,
-                        },
-                        "xSmall": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xxLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "28px",
-                          "fontWeight": 600,
-                        },
-                        "xxLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "32px",
-                          "fontWeight": 600,
-                        },
-                      },
-                      "isInverted": false,
-                      "palette": Object {
-                        "accent": "#0078d4",
-                        "black": "#000000",
-                        "blackTranslucent40": "rgba(0,0,0,.4)",
-                        "blue": "#0078d4",
-                        "blueDark": "#002050",
-                        "blueLight": "#00bcf2",
-                        "blueMid": "#00188f",
-                        "green": "#107c10",
-                        "greenDark": "#004b1c",
-                        "greenLight": "#bad80a",
-                        "magenta": "#b4009e",
-                        "magentaDark": "#5c005c",
-                        "magentaLight": "#e3008c",
-                        "neutralDark": "#201f1e",
-                        "neutralLight": "#edebe9",
-                        "neutralLighter": "#f3f2f1",
-                        "neutralLighterAlt": "#faf9f8",
-                        "neutralPrimary": "#323130",
-                        "neutralPrimaryAlt": "#3b3a39",
-                        "neutralQuaternary": "#d2d0ce",
-                        "neutralQuaternaryAlt": "#e1dfdd",
-                        "neutralSecondary": "#605e5c",
-                        "neutralSecondaryAlt": "#8a8886",
-                        "neutralTertiary": "#a19f9d",
-                        "neutralTertiaryAlt": "#c8c6c4",
-                        "orange": "#d83b01",
-                        "orangeLight": "#ea4300",
-                        "orangeLighter": "#ff8c00",
-                        "purple": "#5c2d91",
-                        "purpleDark": "#32145a",
-                        "purpleLight": "#b4a0ff",
-                        "red": "#e81123",
-                        "redDark": "#a4262c",
-                        "teal": "#008272",
-                        "tealDark": "#004b50",
-                        "tealLight": "#00b294",
-                        "themeDark": "#005a9e",
-                        "themeDarkAlt": "#106ebe",
-                        "themeDarker": "#004578",
-                        "themeLight": "#c7e0f4",
-                        "themeLighter": "#deecf9",
-                        "themeLighterAlt": "#eff6fc",
-                        "themePrimary": "#0078d4",
-                        "themeSecondary": "#2b88d8",
-                        "themeTertiary": "#71afe5",
-                        "white": "#ffffff",
-                        "whiteTranslucent40": "rgba(255,255,255,.4)",
-                        "yellow": "#ffb900",
-                        "yellowDark": "#d29200",
-                        "yellowLight": "#fff100",
-                      },
-                      "rtl": undefined,
-                      "semanticColors": Object {
-                        "accentButtonBackground": "#0078d4",
-                        "accentButtonText": "#ffffff",
-                        "actionLink": "#323130",
-                        "actionLinkHovered": "#201f1e",
-                        "blockingBackground": "#FDE7E9",
-                        "blockingIcon": "#FDE7E9",
-                        "bodyBackground": "#ffffff",
-                        "bodyBackgroundChecked": "#edebe9",
-                        "bodyBackgroundHovered": "#f3f2f1",
-                        "bodyDivider": "#edebe9",
-                        "bodyFrameBackground": "#ffffff",
-                        "bodyFrameDivider": "#edebe9",
-                        "bodyStandoutBackground": "#faf9f8",
-                        "bodySubtext": "#605e5c",
-                        "bodyText": "#323130",
-                        "bodyTextChecked": "#000000",
-                        "buttonBackground": "#ffffff",
-                        "buttonBackgroundChecked": "#c8c6c4",
-                        "buttonBackgroundCheckedHovered": "#edebe9",
-                        "buttonBackgroundDisabled": "#f3f2f1",
-                        "buttonBackgroundHovered": "#f3f2f1",
-                        "buttonBackgroundPressed": "#edebe9",
-                        "buttonBorder": "#8a8886",
-                        "buttonBorderDisabled": "#f3f2f1",
-                        "buttonText": "#323130",
-                        "buttonTextChecked": "#201f1e",
-                        "buttonTextCheckedHovered": "#000000",
-                        "buttonTextDisabled": "#a19f9d",
-                        "buttonTextHovered": "#201f1e",
-                        "buttonTextPressed": "#201f1e",
-                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "cardStandoutBackground": "#ffffff",
-                        "defaultStateBackground": "#faf9f8",
-                        "disabledBackground": "#f3f2f1",
-                        "disabledBodySubtext": "#c8c6c4",
-                        "disabledBodyText": "#a19f9d",
-                        "disabledBorder": "#c8c6c4",
-                        "disabledSubtext": "#d2d0ce",
-                        "disabledText": "#a19f9d",
-                        "errorBackground": "#FDE7E9",
-                        "errorIcon": "#A80000",
-                        "errorText": "#a4262c",
-                        "focusBorder": "#605e5c",
-                        "infoBackground": "#f3f2f1",
-                        "infoIcon": "#605e5c",
-                        "inputBackground": "#ffffff",
-                        "inputBackgroundChecked": "#0078d4",
-                        "inputBackgroundCheckedHovered": "#005a9e",
-                        "inputBorder": "#605e5c",
-                        "inputBorderHovered": "#323130",
-                        "inputFocusBorderAlt": "#0078d4",
-                        "inputForegroundChecked": "#ffffff",
-                        "inputIcon": "#0078d4",
-                        "inputIconDisabled": "#a19f9d",
-                        "inputIconHovered": "#005a9e",
-                        "inputPlaceholderBackgroundChecked": "#deecf9",
-                        "inputPlaceholderText": "#605e5c",
-                        "inputText": "#323130",
-                        "inputTextHovered": "#201f1e",
-                        "link": "#0078d4",
-                        "linkHovered": "#004578",
-                        "listBackground": "#ffffff",
-                        "listHeaderBackgroundHovered": "#f3f2f1",
-                        "listHeaderBackgroundPressed": "#edebe9",
-                        "listItemBackgroundChecked": "#edebe9",
-                        "listItemBackgroundCheckedHovered": "#e1dfdd",
-                        "listItemBackgroundHovered": "#f3f2f1",
-                        "listText": "#323130",
-                        "listTextColor": "#323130",
-                        "menuBackground": "#ffffff",
-                        "menuDivider": "#c8c6c4",
-                        "menuHeader": "#0078d4",
-                        "menuIcon": "#0078d4",
-                        "menuItemBackgroundChecked": "#edebe9",
-                        "menuItemBackgroundHovered": "#f3f2f1",
-                        "menuItemBackgroundPressed": "#edebe9",
-                        "menuItemText": "#323130",
-                        "menuItemTextHovered": "#201f1e",
-                        "messageLink": "#005A9E",
-                        "messageLinkHovered": "#004578",
-                        "messageText": "#323130",
-                        "primaryButtonBackground": "#0078d4",
-                        "primaryButtonBackgroundDisabled": "#f3f2f1",
-                        "primaryButtonBackgroundHovered": "#106ebe",
-                        "primaryButtonBackgroundPressed": "#005a9e",
-                        "primaryButtonBorder": "transparent",
-                        "primaryButtonText": "#ffffff",
-                        "primaryButtonTextDisabled": "#d2d0ce",
-                        "primaryButtonTextHovered": "#ffffff",
-                        "primaryButtonTextPressed": "#ffffff",
-                        "severeWarningBackground": "#FED9CC",
-                        "severeWarningIcon": "#D83B01",
-                        "smallInputBorder": "#605e5c",
-                        "successBackground": "#DFF6DD",
-                        "successIcon": "#107C10",
-                        "successText": "#107C10",
-                        "variantBorder": "#edebe9",
-                        "variantBorderHovered": "#a19f9d",
-                        "warningBackground": "#FFF4CE",
-                        "warningHighlight": "#ffb900",
-                        "warningIcon": "#797775",
-                        "warningText": "#323130",
-                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
-                      },
+                      ]
                     }
-                  }
-                  title="Close pane"
-                  variantClassName="ms-Button--icon"
-                >
-                  <button
-                    aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-53"
-                    data-is-focusable={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    tabIndex={0}
-                    title="Close pane"
-                    type="button"
-                  >
-                    <span
-                      className="ms-Button-flexContainer flexContainer-54"
-                      data-automationid="splitbuttonprimary"
-                    >
-                      <FontIcon
-                        className="ms-Button-icon icon-56"
-                        iconName="Cancel"
-                      >
-                        <i
-                          aria-hidden={true}
-                          className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
-                          data-icon-name="Cancel"
-                          style={
-                            Object {
-                              "fontFamily": "\\"FabricMDL2Icons\\"",
-                            }
-                          }
-                        >
-                          
-                        </i>
-                      </FontIcon>
-                    </span>
-                  </button>
-                  <FocusRects />
-                </BaseButton>
-              </IconButton>
-            </CustomizedIconButton>
-          </div>
-          <div
-            aria-live="assertive"
-            className="warningErrorContainer"
-            hidden={true}
-          >
-            <div
-              className="warningErrorContent"
-            >
-              <span>
-                <img
-                  alt="Error"
-                  className="paneErrorIcon"
-                  src=""
-                />
-              </span>
-              <span
-                className="warningErrorDetailsLinkContainer"
-              >
-                <span
-                  className="formErrors"
-                  title=""
-                />
-                <a
-                  className="errorLink"
-                  hidden={true}
-                  onClick={[Function]}
-                  role="link"
-                >
-                  More details
-                </a>
-              </span>
-            </div>
-          </div>
-          <div
-            className="panelFormWrapper"
-          >
-            <div
-              className="panelMainContent"
-            >
-              <InputParameter
-                dropdownLabel="Key"
-                inputLabel="Value"
-                inputParameterTitle="Partition key value"
-                isAddRemoveVisible={false}
-                onParamKeyChange={[Function]}
-                onParamValueChange={[Function]}
-                selectedKey="string"
-              >
-                <StyledLabelBase>
-                  <LabelBase
+                    selectedKey="string"
                     styles={[Function]}
                     theme={
                       Object {
@@ -1455,21 +638,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       }
                     }
                   >
-                    <label
-                      className="ms-Label root-62"
-                    >
-                      Partition key value
-                    </label>
-                  </LabelBase>
-                </StyledLabelBase>
-                <Stack
-                  horizontal={true}
-                >
-                  <div
-                    className="ms-Stack css-63"
-                  >
-                    <Dropdown
-                      key=".0:$.0"
+                    <DropdownInternal
+                      hoisted={
+                        Object {
+                          "rootRef": [Function],
+                          "selectedIndices": Array [
+                            0,
+                          ],
+                          "setSelectedIndices": [Function],
+                        }
+                      }
                       label="Key"
                       onChange={[Function]}
                       options={
@@ -1484,4646 +662,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           },
                         ]
                       }
+                      responsiveMode={3}
                       selectedKey="string"
-                      styles={
-                        Object {
-                          "dropdown": Object {
-                            "width": 100,
-                          },
-                        }
-                      }
-                    >
-                      <DropdownBase
-                        label="Key"
-                        onChange={[Function]}
-                        options={
-                          Array [
-                            Object {
-                              "key": "string",
-                              "text": "String",
-                            },
-                            Object {
-                              "key": "custom",
-                              "text": "Custom",
-                            },
-                          ]
-                        }
-                        selectedKey="string"
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                      >
-                        <DropdownInternal
-                          hoisted={
-                            Object {
-                              "rootRef": [Function],
-                              "selectedIndices": Array [
-                                0,
-                              ],
-                              "setSelectedIndices": [Function],
-                            }
-                          }
-                          label="Key"
-                          onChange={[Function]}
-                          options={
-                            Array [
-                              Object {
-                                "key": "string",
-                                "text": "String",
-                              },
-                              Object {
-                                "key": "custom",
-                                "text": "Custom",
-                              },
-                            ]
-                          }
-                          responsiveMode={3}
-                          selectedKey="string"
-                          styles={[Function]}
-                          theme={
-                            Object {
-                              "disableGlobalClassNames": false,
-                              "effects": Object {
-                                "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "roundedCorner2": "2px",
-                                "roundedCorner4": "4px",
-                                "roundedCorner6": "6px",
-                              },
-                              "fonts": Object {
-                                "large": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "18px",
-                                  "fontWeight": 400,
-                                },
-                                "medium": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "14px",
-                                  "fontWeight": 400,
-                                },
-                                "mediumPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "16px",
-                                  "fontWeight": 400,
-                                },
-                                "mega": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "68px",
-                                  "fontWeight": 600,
-                                },
-                                "small": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "smallPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "superLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "42px",
-                                  "fontWeight": 600,
-                                },
-                                "tiny": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "20px",
-                                  "fontWeight": 600,
-                                },
-                                "xLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "24px",
-                                  "fontWeight": 600,
-                                },
-                                "xSmall": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xxLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "28px",
-                                  "fontWeight": 600,
-                                },
-                                "xxLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "32px",
-                                  "fontWeight": 600,
-                                },
-                              },
-                              "isInverted": false,
-                              "palette": Object {
-                                "accent": "#0078d4",
-                                "black": "#000000",
-                                "blackTranslucent40": "rgba(0,0,0,.4)",
-                                "blue": "#0078d4",
-                                "blueDark": "#002050",
-                                "blueLight": "#00bcf2",
-                                "blueMid": "#00188f",
-                                "green": "#107c10",
-                                "greenDark": "#004b1c",
-                                "greenLight": "#bad80a",
-                                "magenta": "#b4009e",
-                                "magentaDark": "#5c005c",
-                                "magentaLight": "#e3008c",
-                                "neutralDark": "#201f1e",
-                                "neutralLight": "#edebe9",
-                                "neutralLighter": "#f3f2f1",
-                                "neutralLighterAlt": "#faf9f8",
-                                "neutralPrimary": "#323130",
-                                "neutralPrimaryAlt": "#3b3a39",
-                                "neutralQuaternary": "#d2d0ce",
-                                "neutralQuaternaryAlt": "#e1dfdd",
-                                "neutralSecondary": "#605e5c",
-                                "neutralSecondaryAlt": "#8a8886",
-                                "neutralTertiary": "#a19f9d",
-                                "neutralTertiaryAlt": "#c8c6c4",
-                                "orange": "#d83b01",
-                                "orangeLight": "#ea4300",
-                                "orangeLighter": "#ff8c00",
-                                "purple": "#5c2d91",
-                                "purpleDark": "#32145a",
-                                "purpleLight": "#b4a0ff",
-                                "red": "#e81123",
-                                "redDark": "#a4262c",
-                                "teal": "#008272",
-                                "tealDark": "#004b50",
-                                "tealLight": "#00b294",
-                                "themeDark": "#005a9e",
-                                "themeDarkAlt": "#106ebe",
-                                "themeDarker": "#004578",
-                                "themeLight": "#c7e0f4",
-                                "themeLighter": "#deecf9",
-                                "themeLighterAlt": "#eff6fc",
-                                "themePrimary": "#0078d4",
-                                "themeSecondary": "#2b88d8",
-                                "themeTertiary": "#71afe5",
-                                "white": "#ffffff",
-                                "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                "yellow": "#ffb900",
-                                "yellowDark": "#d29200",
-                                "yellowLight": "#fff100",
-                              },
-                              "rtl": undefined,
-                              "semanticColors": Object {
-                                "accentButtonBackground": "#0078d4",
-                                "accentButtonText": "#ffffff",
-                                "actionLink": "#323130",
-                                "actionLinkHovered": "#201f1e",
-                                "blockingBackground": "#FDE7E9",
-                                "blockingIcon": "#FDE7E9",
-                                "bodyBackground": "#ffffff",
-                                "bodyBackgroundChecked": "#edebe9",
-                                "bodyBackgroundHovered": "#f3f2f1",
-                                "bodyDivider": "#edebe9",
-                                "bodyFrameBackground": "#ffffff",
-                                "bodyFrameDivider": "#edebe9",
-                                "bodyStandoutBackground": "#faf9f8",
-                                "bodySubtext": "#605e5c",
-                                "bodyText": "#323130",
-                                "bodyTextChecked": "#000000",
-                                "buttonBackground": "#ffffff",
-                                "buttonBackgroundChecked": "#c8c6c4",
-                                "buttonBackgroundCheckedHovered": "#edebe9",
-                                "buttonBackgroundDisabled": "#f3f2f1",
-                                "buttonBackgroundHovered": "#f3f2f1",
-                                "buttonBackgroundPressed": "#edebe9",
-                                "buttonBorder": "#8a8886",
-                                "buttonBorderDisabled": "#f3f2f1",
-                                "buttonText": "#323130",
-                                "buttonTextChecked": "#201f1e",
-                                "buttonTextCheckedHovered": "#000000",
-                                "buttonTextDisabled": "#a19f9d",
-                                "buttonTextHovered": "#201f1e",
-                                "buttonTextPressed": "#201f1e",
-                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "cardStandoutBackground": "#ffffff",
-                                "defaultStateBackground": "#faf9f8",
-                                "disabledBackground": "#f3f2f1",
-                                "disabledBodySubtext": "#c8c6c4",
-                                "disabledBodyText": "#a19f9d",
-                                "disabledBorder": "#c8c6c4",
-                                "disabledSubtext": "#d2d0ce",
-                                "disabledText": "#a19f9d",
-                                "errorBackground": "#FDE7E9",
-                                "errorIcon": "#A80000",
-                                "errorText": "#a4262c",
-                                "focusBorder": "#605e5c",
-                                "infoBackground": "#f3f2f1",
-                                "infoIcon": "#605e5c",
-                                "inputBackground": "#ffffff",
-                                "inputBackgroundChecked": "#0078d4",
-                                "inputBackgroundCheckedHovered": "#005a9e",
-                                "inputBorder": "#605e5c",
-                                "inputBorderHovered": "#323130",
-                                "inputFocusBorderAlt": "#0078d4",
-                                "inputForegroundChecked": "#ffffff",
-                                "inputIcon": "#0078d4",
-                                "inputIconDisabled": "#a19f9d",
-                                "inputIconHovered": "#005a9e",
-                                "inputPlaceholderBackgroundChecked": "#deecf9",
-                                "inputPlaceholderText": "#605e5c",
-                                "inputText": "#323130",
-                                "inputTextHovered": "#201f1e",
-                                "link": "#0078d4",
-                                "linkHovered": "#004578",
-                                "listBackground": "#ffffff",
-                                "listHeaderBackgroundHovered": "#f3f2f1",
-                                "listHeaderBackgroundPressed": "#edebe9",
-                                "listItemBackgroundChecked": "#edebe9",
-                                "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                "listItemBackgroundHovered": "#f3f2f1",
-                                "listText": "#323130",
-                                "listTextColor": "#323130",
-                                "menuBackground": "#ffffff",
-                                "menuDivider": "#c8c6c4",
-                                "menuHeader": "#0078d4",
-                                "menuIcon": "#0078d4",
-                                "menuItemBackgroundChecked": "#edebe9",
-                                "menuItemBackgroundHovered": "#f3f2f1",
-                                "menuItemBackgroundPressed": "#edebe9",
-                                "menuItemText": "#323130",
-                                "menuItemTextHovered": "#201f1e",
-                                "messageLink": "#005A9E",
-                                "messageLinkHovered": "#004578",
-                                "messageText": "#323130",
-                                "primaryButtonBackground": "#0078d4",
-                                "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                "primaryButtonBackgroundHovered": "#106ebe",
-                                "primaryButtonBackgroundPressed": "#005a9e",
-                                "primaryButtonBorder": "transparent",
-                                "primaryButtonText": "#ffffff",
-                                "primaryButtonTextDisabled": "#d2d0ce",
-                                "primaryButtonTextHovered": "#ffffff",
-                                "primaryButtonTextPressed": "#ffffff",
-                                "severeWarningBackground": "#FED9CC",
-                                "severeWarningIcon": "#D83B01",
-                                "smallInputBorder": "#605e5c",
-                                "successBackground": "#DFF6DD",
-                                "successIcon": "#107C10",
-                                "successText": "#107C10",
-                                "variantBorder": "#edebe9",
-                                "variantBorderHovered": "#a19f9d",
-                                "warningBackground": "#FFF4CE",
-                                "warningHighlight": "#ffb900",
-                                "warningIcon": "#797775",
-                                "warningText": "#323130",
-                              },
-                              "spacing": Object {
-                                "l1": "20px",
-                                "l2": "32px",
-                                "m": "16px",
-                                "s1": "8px",
-                                "s2": "4px",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="ms-Dropdown-container"
-                          >
-                            <StyledLabelBase
-                              className="ms-Dropdown-label"
-                              id="Dropdown3-label"
-                              styles={[Function]}
-                            >
-                              <LabelBase
-                                className="ms-Dropdown-label"
-                                id="Dropdown3-label"
-                                styles={[Function]}
-                                theme={
-                                  Object {
-                                    "disableGlobalClassNames": false,
-                                    "effects": Object {
-                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "roundedCorner2": "2px",
-                                      "roundedCorner4": "4px",
-                                      "roundedCorner6": "6px",
-                                    },
-                                    "fonts": Object {
-                                      "large": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "18px",
-                                        "fontWeight": 400,
-                                      },
-                                      "medium": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "14px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mediumPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "16px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mega": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "68px",
-                                        "fontWeight": 600,
-                                      },
-                                      "small": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "smallPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "superLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "42px",
-                                        "fontWeight": 600,
-                                      },
-                                      "tiny": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "20px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "24px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xSmall": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xxLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "28px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xxLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "32px",
-                                        "fontWeight": 600,
-                                      },
-                                    },
-                                    "isInverted": false,
-                                    "palette": Object {
-                                      "accent": "#0078d4",
-                                      "black": "#000000",
-                                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                                      "blue": "#0078d4",
-                                      "blueDark": "#002050",
-                                      "blueLight": "#00bcf2",
-                                      "blueMid": "#00188f",
-                                      "green": "#107c10",
-                                      "greenDark": "#004b1c",
-                                      "greenLight": "#bad80a",
-                                      "magenta": "#b4009e",
-                                      "magentaDark": "#5c005c",
-                                      "magentaLight": "#e3008c",
-                                      "neutralDark": "#201f1e",
-                                      "neutralLight": "#edebe9",
-                                      "neutralLighter": "#f3f2f1",
-                                      "neutralLighterAlt": "#faf9f8",
-                                      "neutralPrimary": "#323130",
-                                      "neutralPrimaryAlt": "#3b3a39",
-                                      "neutralQuaternary": "#d2d0ce",
-                                      "neutralQuaternaryAlt": "#e1dfdd",
-                                      "neutralSecondary": "#605e5c",
-                                      "neutralSecondaryAlt": "#8a8886",
-                                      "neutralTertiary": "#a19f9d",
-                                      "neutralTertiaryAlt": "#c8c6c4",
-                                      "orange": "#d83b01",
-                                      "orangeLight": "#ea4300",
-                                      "orangeLighter": "#ff8c00",
-                                      "purple": "#5c2d91",
-                                      "purpleDark": "#32145a",
-                                      "purpleLight": "#b4a0ff",
-                                      "red": "#e81123",
-                                      "redDark": "#a4262c",
-                                      "teal": "#008272",
-                                      "tealDark": "#004b50",
-                                      "tealLight": "#00b294",
-                                      "themeDark": "#005a9e",
-                                      "themeDarkAlt": "#106ebe",
-                                      "themeDarker": "#004578",
-                                      "themeLight": "#c7e0f4",
-                                      "themeLighter": "#deecf9",
-                                      "themeLighterAlt": "#eff6fc",
-                                      "themePrimary": "#0078d4",
-                                      "themeSecondary": "#2b88d8",
-                                      "themeTertiary": "#71afe5",
-                                      "white": "#ffffff",
-                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                      "yellow": "#ffb900",
-                                      "yellowDark": "#d29200",
-                                      "yellowLight": "#fff100",
-                                    },
-                                    "rtl": undefined,
-                                    "semanticColors": Object {
-                                      "accentButtonBackground": "#0078d4",
-                                      "accentButtonText": "#ffffff",
-                                      "actionLink": "#323130",
-                                      "actionLinkHovered": "#201f1e",
-                                      "blockingBackground": "#FDE7E9",
-                                      "blockingIcon": "#FDE7E9",
-                                      "bodyBackground": "#ffffff",
-                                      "bodyBackgroundChecked": "#edebe9",
-                                      "bodyBackgroundHovered": "#f3f2f1",
-                                      "bodyDivider": "#edebe9",
-                                      "bodyFrameBackground": "#ffffff",
-                                      "bodyFrameDivider": "#edebe9",
-                                      "bodyStandoutBackground": "#faf9f8",
-                                      "bodySubtext": "#605e5c",
-                                      "bodyText": "#323130",
-                                      "bodyTextChecked": "#000000",
-                                      "buttonBackground": "#ffffff",
-                                      "buttonBackgroundChecked": "#c8c6c4",
-                                      "buttonBackgroundCheckedHovered": "#edebe9",
-                                      "buttonBackgroundDisabled": "#f3f2f1",
-                                      "buttonBackgroundHovered": "#f3f2f1",
-                                      "buttonBackgroundPressed": "#edebe9",
-                                      "buttonBorder": "#8a8886",
-                                      "buttonBorderDisabled": "#f3f2f1",
-                                      "buttonText": "#323130",
-                                      "buttonTextChecked": "#201f1e",
-                                      "buttonTextCheckedHovered": "#000000",
-                                      "buttonTextDisabled": "#a19f9d",
-                                      "buttonTextHovered": "#201f1e",
-                                      "buttonTextPressed": "#201f1e",
-                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardStandoutBackground": "#ffffff",
-                                      "defaultStateBackground": "#faf9f8",
-                                      "disabledBackground": "#f3f2f1",
-                                      "disabledBodySubtext": "#c8c6c4",
-                                      "disabledBodyText": "#a19f9d",
-                                      "disabledBorder": "#c8c6c4",
-                                      "disabledSubtext": "#d2d0ce",
-                                      "disabledText": "#a19f9d",
-                                      "errorBackground": "#FDE7E9",
-                                      "errorIcon": "#A80000",
-                                      "errorText": "#a4262c",
-                                      "focusBorder": "#605e5c",
-                                      "infoBackground": "#f3f2f1",
-                                      "infoIcon": "#605e5c",
-                                      "inputBackground": "#ffffff",
-                                      "inputBackgroundChecked": "#0078d4",
-                                      "inputBackgroundCheckedHovered": "#005a9e",
-                                      "inputBorder": "#605e5c",
-                                      "inputBorderHovered": "#323130",
-                                      "inputFocusBorderAlt": "#0078d4",
-                                      "inputForegroundChecked": "#ffffff",
-                                      "inputIcon": "#0078d4",
-                                      "inputIconDisabled": "#a19f9d",
-                                      "inputIconHovered": "#005a9e",
-                                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                                      "inputPlaceholderText": "#605e5c",
-                                      "inputText": "#323130",
-                                      "inputTextHovered": "#201f1e",
-                                      "link": "#0078d4",
-                                      "linkHovered": "#004578",
-                                      "listBackground": "#ffffff",
-                                      "listHeaderBackgroundHovered": "#f3f2f1",
-                                      "listHeaderBackgroundPressed": "#edebe9",
-                                      "listItemBackgroundChecked": "#edebe9",
-                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                      "listItemBackgroundHovered": "#f3f2f1",
-                                      "listText": "#323130",
-                                      "listTextColor": "#323130",
-                                      "menuBackground": "#ffffff",
-                                      "menuDivider": "#c8c6c4",
-                                      "menuHeader": "#0078d4",
-                                      "menuIcon": "#0078d4",
-                                      "menuItemBackgroundChecked": "#edebe9",
-                                      "menuItemBackgroundHovered": "#f3f2f1",
-                                      "menuItemBackgroundPressed": "#edebe9",
-                                      "menuItemText": "#323130",
-                                      "menuItemTextHovered": "#201f1e",
-                                      "messageLink": "#005A9E",
-                                      "messageLinkHovered": "#004578",
-                                      "messageText": "#323130",
-                                      "primaryButtonBackground": "#0078d4",
-                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                      "primaryButtonBackgroundHovered": "#106ebe",
-                                      "primaryButtonBackgroundPressed": "#005a9e",
-                                      "primaryButtonBorder": "transparent",
-                                      "primaryButtonText": "#ffffff",
-                                      "primaryButtonTextDisabled": "#d2d0ce",
-                                      "primaryButtonTextHovered": "#ffffff",
-                                      "primaryButtonTextPressed": "#ffffff",
-                                      "severeWarningBackground": "#FED9CC",
-                                      "severeWarningIcon": "#D83B01",
-                                      "smallInputBorder": "#605e5c",
-                                      "successBackground": "#DFF6DD",
-                                      "successIcon": "#107C10",
-                                      "successText": "#107C10",
-                                      "variantBorder": "#edebe9",
-                                      "variantBorderHovered": "#a19f9d",
-                                      "warningBackground": "#FFF4CE",
-                                      "warningHighlight": "#ffb900",
-                                      "warningIcon": "#797775",
-                                      "warningText": "#323130",
-                                    },
-                                    "spacing": Object {
-                                      "l1": "20px",
-                                      "l2": "32px",
-                                      "m": "16px",
-                                      "s1": "8px",
-                                      "s2": "4px",
-                                    },
-                                  }
-                                }
-                              >
-                                <label
-                                  className="ms-Label ms-Dropdown-label root-80"
-                                  id="Dropdown3-label"
-                                >
-                                  Key
-                                </label>
-                              </LabelBase>
-                            </StyledLabelBase>
-                            <div
-                              aria-expanded="false"
-                              aria-haspopup="listbox"
-                              aria-labelledby="Dropdown3-label Dropdown3-option"
-                              className="ms-Dropdown dropdown-64"
-                              data-is-focusable={true}
-                              data-ktp-target={true}
-                              id="Dropdown3"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onKeyDown={[Function]}
-                              onKeyUp={[Function]}
-                              onMouseDown={[Function]}
-                              role="combobox"
-                              tabIndex={0}
-                            >
-                              <span
-                                aria-atomic={true}
-                                aria-invalid={false}
-                                aria-live="polite"
-                                className="ms-Dropdown-title title-99"
-                                id="Dropdown3-option"
-                              >
-                                String
-                              </span>
-                              <span
-                                className="ms-Dropdown-caretDownWrapper caretDownWrapper-66"
-                              >
-                                <StyledIconBase
-                                  aria-hidden={true}
-                                  className="ms-Dropdown-caretDown caretDown-67"
-                                  iconName="ChevronDown"
-                                >
-                                  <IconBase
-                                    aria-hidden={true}
-                                    className="ms-Dropdown-caretDown caretDown-67"
-                                    iconName="ChevronDown"
-                                    styles={[Function]}
-                                    theme={
-                                      Object {
-                                        "disableGlobalClassNames": false,
-                                        "effects": Object {
-                                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                          "roundedCorner2": "2px",
-                                          "roundedCorner4": "4px",
-                                          "roundedCorner6": "6px",
-                                        },
-                                        "fonts": Object {
-                                          "large": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "18px",
-                                            "fontWeight": 400,
-                                          },
-                                          "medium": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "14px",
-                                            "fontWeight": 400,
-                                          },
-                                          "mediumPlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "16px",
-                                            "fontWeight": 400,
-                                          },
-                                          "mega": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "68px",
-                                            "fontWeight": 600,
-                                          },
-                                          "small": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "12px",
-                                            "fontWeight": 400,
-                                          },
-                                          "smallPlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "12px",
-                                            "fontWeight": 400,
-                                          },
-                                          "superLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "42px",
-                                            "fontWeight": 600,
-                                          },
-                                          "tiny": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "10px",
-                                            "fontWeight": 400,
-                                          },
-                                          "xLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "20px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xLargePlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "24px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xSmall": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "10px",
-                                            "fontWeight": 400,
-                                          },
-                                          "xxLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "28px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xxLargePlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "32px",
-                                            "fontWeight": 600,
-                                          },
-                                        },
-                                        "isInverted": false,
-                                        "palette": Object {
-                                          "accent": "#0078d4",
-                                          "black": "#000000",
-                                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                                          "blue": "#0078d4",
-                                          "blueDark": "#002050",
-                                          "blueLight": "#00bcf2",
-                                          "blueMid": "#00188f",
-                                          "green": "#107c10",
-                                          "greenDark": "#004b1c",
-                                          "greenLight": "#bad80a",
-                                          "magenta": "#b4009e",
-                                          "magentaDark": "#5c005c",
-                                          "magentaLight": "#e3008c",
-                                          "neutralDark": "#201f1e",
-                                          "neutralLight": "#edebe9",
-                                          "neutralLighter": "#f3f2f1",
-                                          "neutralLighterAlt": "#faf9f8",
-                                          "neutralPrimary": "#323130",
-                                          "neutralPrimaryAlt": "#3b3a39",
-                                          "neutralQuaternary": "#d2d0ce",
-                                          "neutralQuaternaryAlt": "#e1dfdd",
-                                          "neutralSecondary": "#605e5c",
-                                          "neutralSecondaryAlt": "#8a8886",
-                                          "neutralTertiary": "#a19f9d",
-                                          "neutralTertiaryAlt": "#c8c6c4",
-                                          "orange": "#d83b01",
-                                          "orangeLight": "#ea4300",
-                                          "orangeLighter": "#ff8c00",
-                                          "purple": "#5c2d91",
-                                          "purpleDark": "#32145a",
-                                          "purpleLight": "#b4a0ff",
-                                          "red": "#e81123",
-                                          "redDark": "#a4262c",
-                                          "teal": "#008272",
-                                          "tealDark": "#004b50",
-                                          "tealLight": "#00b294",
-                                          "themeDark": "#005a9e",
-                                          "themeDarkAlt": "#106ebe",
-                                          "themeDarker": "#004578",
-                                          "themeLight": "#c7e0f4",
-                                          "themeLighter": "#deecf9",
-                                          "themeLighterAlt": "#eff6fc",
-                                          "themePrimary": "#0078d4",
-                                          "themeSecondary": "#2b88d8",
-                                          "themeTertiary": "#71afe5",
-                                          "white": "#ffffff",
-                                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                          "yellow": "#ffb900",
-                                          "yellowDark": "#d29200",
-                                          "yellowLight": "#fff100",
-                                        },
-                                        "rtl": undefined,
-                                        "semanticColors": Object {
-                                          "accentButtonBackground": "#0078d4",
-                                          "accentButtonText": "#ffffff",
-                                          "actionLink": "#323130",
-                                          "actionLinkHovered": "#201f1e",
-                                          "blockingBackground": "#FDE7E9",
-                                          "blockingIcon": "#FDE7E9",
-                                          "bodyBackground": "#ffffff",
-                                          "bodyBackgroundChecked": "#edebe9",
-                                          "bodyBackgroundHovered": "#f3f2f1",
-                                          "bodyDivider": "#edebe9",
-                                          "bodyFrameBackground": "#ffffff",
-                                          "bodyFrameDivider": "#edebe9",
-                                          "bodyStandoutBackground": "#faf9f8",
-                                          "bodySubtext": "#605e5c",
-                                          "bodyText": "#323130",
-                                          "bodyTextChecked": "#000000",
-                                          "buttonBackground": "#ffffff",
-                                          "buttonBackgroundChecked": "#c8c6c4",
-                                          "buttonBackgroundCheckedHovered": "#edebe9",
-                                          "buttonBackgroundDisabled": "#f3f2f1",
-                                          "buttonBackgroundHovered": "#f3f2f1",
-                                          "buttonBackgroundPressed": "#edebe9",
-                                          "buttonBorder": "#8a8886",
-                                          "buttonBorderDisabled": "#f3f2f1",
-                                          "buttonText": "#323130",
-                                          "buttonTextChecked": "#201f1e",
-                                          "buttonTextCheckedHovered": "#000000",
-                                          "buttonTextDisabled": "#a19f9d",
-                                          "buttonTextHovered": "#201f1e",
-                                          "buttonTextPressed": "#201f1e",
-                                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                          "cardStandoutBackground": "#ffffff",
-                                          "defaultStateBackground": "#faf9f8",
-                                          "disabledBackground": "#f3f2f1",
-                                          "disabledBodySubtext": "#c8c6c4",
-                                          "disabledBodyText": "#a19f9d",
-                                          "disabledBorder": "#c8c6c4",
-                                          "disabledSubtext": "#d2d0ce",
-                                          "disabledText": "#a19f9d",
-                                          "errorBackground": "#FDE7E9",
-                                          "errorIcon": "#A80000",
-                                          "errorText": "#a4262c",
-                                          "focusBorder": "#605e5c",
-                                          "infoBackground": "#f3f2f1",
-                                          "infoIcon": "#605e5c",
-                                          "inputBackground": "#ffffff",
-                                          "inputBackgroundChecked": "#0078d4",
-                                          "inputBackgroundCheckedHovered": "#005a9e",
-                                          "inputBorder": "#605e5c",
-                                          "inputBorderHovered": "#323130",
-                                          "inputFocusBorderAlt": "#0078d4",
-                                          "inputForegroundChecked": "#ffffff",
-                                          "inputIcon": "#0078d4",
-                                          "inputIconDisabled": "#a19f9d",
-                                          "inputIconHovered": "#005a9e",
-                                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                                          "inputPlaceholderText": "#605e5c",
-                                          "inputText": "#323130",
-                                          "inputTextHovered": "#201f1e",
-                                          "link": "#0078d4",
-                                          "linkHovered": "#004578",
-                                          "listBackground": "#ffffff",
-                                          "listHeaderBackgroundHovered": "#f3f2f1",
-                                          "listHeaderBackgroundPressed": "#edebe9",
-                                          "listItemBackgroundChecked": "#edebe9",
-                                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                          "listItemBackgroundHovered": "#f3f2f1",
-                                          "listText": "#323130",
-                                          "listTextColor": "#323130",
-                                          "menuBackground": "#ffffff",
-                                          "menuDivider": "#c8c6c4",
-                                          "menuHeader": "#0078d4",
-                                          "menuIcon": "#0078d4",
-                                          "menuItemBackgroundChecked": "#edebe9",
-                                          "menuItemBackgroundHovered": "#f3f2f1",
-                                          "menuItemBackgroundPressed": "#edebe9",
-                                          "menuItemText": "#323130",
-                                          "menuItemTextHovered": "#201f1e",
-                                          "messageLink": "#005A9E",
-                                          "messageLinkHovered": "#004578",
-                                          "messageText": "#323130",
-                                          "primaryButtonBackground": "#0078d4",
-                                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                          "primaryButtonBackgroundHovered": "#106ebe",
-                                          "primaryButtonBackgroundPressed": "#005a9e",
-                                          "primaryButtonBorder": "transparent",
-                                          "primaryButtonText": "#ffffff",
-                                          "primaryButtonTextDisabled": "#d2d0ce",
-                                          "primaryButtonTextHovered": "#ffffff",
-                                          "primaryButtonTextPressed": "#ffffff",
-                                          "severeWarningBackground": "#FED9CC",
-                                          "severeWarningIcon": "#D83B01",
-                                          "smallInputBorder": "#605e5c",
-                                          "successBackground": "#DFF6DD",
-                                          "successIcon": "#107C10",
-                                          "successText": "#107C10",
-                                          "variantBorder": "#edebe9",
-                                          "variantBorderHovered": "#a19f9d",
-                                          "warningBackground": "#FFF4CE",
-                                          "warningHighlight": "#ffb900",
-                                          "warningIcon": "#797775",
-                                          "warningText": "#323130",
-                                        },
-                                        "spacing": Object {
-                                          "l1": "20px",
-                                          "l2": "32px",
-                                          "m": "16px",
-                                          "s1": "8px",
-                                          "s2": "4px",
-                                        },
-                                      }
-                                    }
-                                  >
-                                    <i
-                                      aria-hidden={true}
-                                      className="ms-Dropdown-caretDown caretDown-81"
-                                      data-icon-name="ChevronDown"
-                                    >
-                                      
-                                    </i>
-                                  </IconBase>
-                                </StyledIconBase>
-                              </span>
-                            </div>
-                          </div>
-                        </DropdownInternal>
-                      </DropdownBase>
-                    </Dropdown>
-                    <StyledTextFieldBase
-                      autoFocus={true}
-                      id="confirmCollectionId"
-                      key=".0:$.1"
-                      label="Value"
-                      onChange={[Function]}
-                    >
-                      <TextFieldBase
-                        autoFocus={true}
-                        deferredValidationTime={200}
-                        id="confirmCollectionId"
-                        label="Value"
-                        onChange={[Function]}
-                        resizable={true}
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        validateOnLoad={true}
-                      >
-                        <div
-                          className="ms-TextField root-83"
-                        >
-                          <div
-                            className="ms-TextField-wrapper"
-                          >
-                            <StyledLabelBase
-                              htmlFor="confirmCollectionId"
-                              id="TextFieldLabel6"
-                              styles={[Function]}
-                            >
-                              <LabelBase
-                                htmlFor="confirmCollectionId"
-                                id="TextFieldLabel6"
-                                styles={[Function]}
-                                theme={
-                                  Object {
-                                    "disableGlobalClassNames": false,
-                                    "effects": Object {
-                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "roundedCorner2": "2px",
-                                      "roundedCorner4": "4px",
-                                      "roundedCorner6": "6px",
-                                    },
-                                    "fonts": Object {
-                                      "large": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "18px",
-                                        "fontWeight": 400,
-                                      },
-                                      "medium": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "14px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mediumPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "16px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mega": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "68px",
-                                        "fontWeight": 600,
-                                      },
-                                      "small": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "smallPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "superLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "42px",
-                                        "fontWeight": 600,
-                                      },
-                                      "tiny": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "20px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "24px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xSmall": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xxLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "28px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xxLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "32px",
-                                        "fontWeight": 600,
-                                      },
-                                    },
-                                    "isInverted": false,
-                                    "palette": Object {
-                                      "accent": "#0078d4",
-                                      "black": "#000000",
-                                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                                      "blue": "#0078d4",
-                                      "blueDark": "#002050",
-                                      "blueLight": "#00bcf2",
-                                      "blueMid": "#00188f",
-                                      "green": "#107c10",
-                                      "greenDark": "#004b1c",
-                                      "greenLight": "#bad80a",
-                                      "magenta": "#b4009e",
-                                      "magentaDark": "#5c005c",
-                                      "magentaLight": "#e3008c",
-                                      "neutralDark": "#201f1e",
-                                      "neutralLight": "#edebe9",
-                                      "neutralLighter": "#f3f2f1",
-                                      "neutralLighterAlt": "#faf9f8",
-                                      "neutralPrimary": "#323130",
-                                      "neutralPrimaryAlt": "#3b3a39",
-                                      "neutralQuaternary": "#d2d0ce",
-                                      "neutralQuaternaryAlt": "#e1dfdd",
-                                      "neutralSecondary": "#605e5c",
-                                      "neutralSecondaryAlt": "#8a8886",
-                                      "neutralTertiary": "#a19f9d",
-                                      "neutralTertiaryAlt": "#c8c6c4",
-                                      "orange": "#d83b01",
-                                      "orangeLight": "#ea4300",
-                                      "orangeLighter": "#ff8c00",
-                                      "purple": "#5c2d91",
-                                      "purpleDark": "#32145a",
-                                      "purpleLight": "#b4a0ff",
-                                      "red": "#e81123",
-                                      "redDark": "#a4262c",
-                                      "teal": "#008272",
-                                      "tealDark": "#004b50",
-                                      "tealLight": "#00b294",
-                                      "themeDark": "#005a9e",
-                                      "themeDarkAlt": "#106ebe",
-                                      "themeDarker": "#004578",
-                                      "themeLight": "#c7e0f4",
-                                      "themeLighter": "#deecf9",
-                                      "themeLighterAlt": "#eff6fc",
-                                      "themePrimary": "#0078d4",
-                                      "themeSecondary": "#2b88d8",
-                                      "themeTertiary": "#71afe5",
-                                      "white": "#ffffff",
-                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                      "yellow": "#ffb900",
-                                      "yellowDark": "#d29200",
-                                      "yellowLight": "#fff100",
-                                    },
-                                    "rtl": undefined,
-                                    "semanticColors": Object {
-                                      "accentButtonBackground": "#0078d4",
-                                      "accentButtonText": "#ffffff",
-                                      "actionLink": "#323130",
-                                      "actionLinkHovered": "#201f1e",
-                                      "blockingBackground": "#FDE7E9",
-                                      "blockingIcon": "#FDE7E9",
-                                      "bodyBackground": "#ffffff",
-                                      "bodyBackgroundChecked": "#edebe9",
-                                      "bodyBackgroundHovered": "#f3f2f1",
-                                      "bodyDivider": "#edebe9",
-                                      "bodyFrameBackground": "#ffffff",
-                                      "bodyFrameDivider": "#edebe9",
-                                      "bodyStandoutBackground": "#faf9f8",
-                                      "bodySubtext": "#605e5c",
-                                      "bodyText": "#323130",
-                                      "bodyTextChecked": "#000000",
-                                      "buttonBackground": "#ffffff",
-                                      "buttonBackgroundChecked": "#c8c6c4",
-                                      "buttonBackgroundCheckedHovered": "#edebe9",
-                                      "buttonBackgroundDisabled": "#f3f2f1",
-                                      "buttonBackgroundHovered": "#f3f2f1",
-                                      "buttonBackgroundPressed": "#edebe9",
-                                      "buttonBorder": "#8a8886",
-                                      "buttonBorderDisabled": "#f3f2f1",
-                                      "buttonText": "#323130",
-                                      "buttonTextChecked": "#201f1e",
-                                      "buttonTextCheckedHovered": "#000000",
-                                      "buttonTextDisabled": "#a19f9d",
-                                      "buttonTextHovered": "#201f1e",
-                                      "buttonTextPressed": "#201f1e",
-                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardStandoutBackground": "#ffffff",
-                                      "defaultStateBackground": "#faf9f8",
-                                      "disabledBackground": "#f3f2f1",
-                                      "disabledBodySubtext": "#c8c6c4",
-                                      "disabledBodyText": "#a19f9d",
-                                      "disabledBorder": "#c8c6c4",
-                                      "disabledSubtext": "#d2d0ce",
-                                      "disabledText": "#a19f9d",
-                                      "errorBackground": "#FDE7E9",
-                                      "errorIcon": "#A80000",
-                                      "errorText": "#a4262c",
-                                      "focusBorder": "#605e5c",
-                                      "infoBackground": "#f3f2f1",
-                                      "infoIcon": "#605e5c",
-                                      "inputBackground": "#ffffff",
-                                      "inputBackgroundChecked": "#0078d4",
-                                      "inputBackgroundCheckedHovered": "#005a9e",
-                                      "inputBorder": "#605e5c",
-                                      "inputBorderHovered": "#323130",
-                                      "inputFocusBorderAlt": "#0078d4",
-                                      "inputForegroundChecked": "#ffffff",
-                                      "inputIcon": "#0078d4",
-                                      "inputIconDisabled": "#a19f9d",
-                                      "inputIconHovered": "#005a9e",
-                                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                                      "inputPlaceholderText": "#605e5c",
-                                      "inputText": "#323130",
-                                      "inputTextHovered": "#201f1e",
-                                      "link": "#0078d4",
-                                      "linkHovered": "#004578",
-                                      "listBackground": "#ffffff",
-                                      "listHeaderBackgroundHovered": "#f3f2f1",
-                                      "listHeaderBackgroundPressed": "#edebe9",
-                                      "listItemBackgroundChecked": "#edebe9",
-                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                      "listItemBackgroundHovered": "#f3f2f1",
-                                      "listText": "#323130",
-                                      "listTextColor": "#323130",
-                                      "menuBackground": "#ffffff",
-                                      "menuDivider": "#c8c6c4",
-                                      "menuHeader": "#0078d4",
-                                      "menuIcon": "#0078d4",
-                                      "menuItemBackgroundChecked": "#edebe9",
-                                      "menuItemBackgroundHovered": "#f3f2f1",
-                                      "menuItemBackgroundPressed": "#edebe9",
-                                      "menuItemText": "#323130",
-                                      "menuItemTextHovered": "#201f1e",
-                                      "messageLink": "#005A9E",
-                                      "messageLinkHovered": "#004578",
-                                      "messageText": "#323130",
-                                      "primaryButtonBackground": "#0078d4",
-                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                      "primaryButtonBackgroundHovered": "#106ebe",
-                                      "primaryButtonBackgroundPressed": "#005a9e",
-                                      "primaryButtonBorder": "transparent",
-                                      "primaryButtonText": "#ffffff",
-                                      "primaryButtonTextDisabled": "#d2d0ce",
-                                      "primaryButtonTextHovered": "#ffffff",
-                                      "primaryButtonTextPressed": "#ffffff",
-                                      "severeWarningBackground": "#FED9CC",
-                                      "severeWarningIcon": "#D83B01",
-                                      "smallInputBorder": "#605e5c",
-                                      "successBackground": "#DFF6DD",
-                                      "successIcon": "#107C10",
-                                      "successText": "#107C10",
-                                      "variantBorder": "#edebe9",
-                                      "variantBorderHovered": "#a19f9d",
-                                      "warningBackground": "#FFF4CE",
-                                      "warningHighlight": "#ffb900",
-                                      "warningIcon": "#797775",
-                                      "warningText": "#323130",
-                                    },
-                                    "spacing": Object {
-                                      "l1": "20px",
-                                      "l2": "32px",
-                                      "m": "16px",
-                                      "s1": "8px",
-                                      "s2": "4px",
-                                    },
-                                  }
-                                }
-                              >
-                                <label
-                                  className="ms-Label root-62"
-                                  htmlFor="confirmCollectionId"
-                                  id="TextFieldLabel6"
-                                >
-                                  Value
-                                </label>
-                              </LabelBase>
-                            </StyledLabelBase>
-                            <div
-                              className="ms-TextField-fieldGroup fieldGroup-84"
-                            >
-                              <input
-                                aria-invalid={false}
-                                aria-labelledby="TextFieldLabel6"
-                                autoFocus={true}
-                                className="ms-TextField-field field-85"
-                                id="confirmCollectionId"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                onInput={[Function]}
-                                type="text"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </TextFieldBase>
-                    </StyledTextFieldBase>
-                  </div>
-                </Stack>
-              </InputParameter>
-              <InputParameter
-                dropdownLabel="Key"
-                inputLabel="Param"
-                inputParameterTitle="Enter input parameters (if any)"
-                isAddRemoveVisible={true}
-                key="0"
-                onAddNewParamKeyPress={[Function]}
-                onDeleteParamKeyPress={[Function]}
-                onParamKeyChange={[Function]}
-                onParamValueChange={[Function]}
-                paramValue=""
-                selectedKey="string"
-              >
-                <StyledLabelBase>
-                  <LabelBase
-                    styles={[Function]}
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                  >
-                    <label
-                      className="ms-Label root-62"
-                    >
-                      Enter input parameters (if any)
-                    </label>
-                  </LabelBase>
-                </StyledLabelBase>
-                <Stack
-                  horizontal={true}
-                >
-                  <div
-                    className="ms-Stack css-63"
-                  >
-                    <Dropdown
-                      key=".0:$.0"
-                      label="Key"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "key": "string",
-                            "text": "String",
-                          },
-                          Object {
-                            "key": "custom",
-                            "text": "Custom",
-                          },
-                        ]
-                      }
-                      selectedKey="string"
-                      styles={
-                        Object {
-                          "dropdown": Object {
-                            "width": 100,
-                          },
-                        }
-                      }
-                    >
-                      <DropdownBase
-                        label="Key"
-                        onChange={[Function]}
-                        options={
-                          Array [
-                            Object {
-                              "key": "string",
-                              "text": "String",
-                            },
-                            Object {
-                              "key": "custom",
-                              "text": "Custom",
-                            },
-                          ]
-                        }
-                        selectedKey="string"
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                      >
-                        <DropdownInternal
-                          hoisted={
-                            Object {
-                              "rootRef": [Function],
-                              "selectedIndices": Array [
-                                0,
-                              ],
-                              "setSelectedIndices": [Function],
-                            }
-                          }
-                          label="Key"
-                          onChange={[Function]}
-                          options={
-                            Array [
-                              Object {
-                                "key": "string",
-                                "text": "String",
-                              },
-                              Object {
-                                "key": "custom",
-                                "text": "Custom",
-                              },
-                            ]
-                          }
-                          responsiveMode={3}
-                          selectedKey="string"
-                          styles={[Function]}
-                          theme={
-                            Object {
-                              "disableGlobalClassNames": false,
-                              "effects": Object {
-                                "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "roundedCorner2": "2px",
-                                "roundedCorner4": "4px",
-                                "roundedCorner6": "6px",
-                              },
-                              "fonts": Object {
-                                "large": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "18px",
-                                  "fontWeight": 400,
-                                },
-                                "medium": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "14px",
-                                  "fontWeight": 400,
-                                },
-                                "mediumPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "16px",
-                                  "fontWeight": 400,
-                                },
-                                "mega": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "68px",
-                                  "fontWeight": 600,
-                                },
-                                "small": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "smallPlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "12px",
-                                  "fontWeight": 400,
-                                },
-                                "superLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "42px",
-                                  "fontWeight": 600,
-                                },
-                                "tiny": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "20px",
-                                  "fontWeight": 600,
-                                },
-                                "xLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "24px",
-                                  "fontWeight": 600,
-                                },
-                                "xSmall": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "10px",
-                                  "fontWeight": 400,
-                                },
-                                "xxLarge": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "28px",
-                                  "fontWeight": 600,
-                                },
-                                "xxLargePlus": Object {
-                                  "MozOsxFontSmoothing": "grayscale",
-                                  "WebkitFontSmoothing": "antialiased",
-                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                  "fontSize": "32px",
-                                  "fontWeight": 600,
-                                },
-                              },
-                              "isInverted": false,
-                              "palette": Object {
-                                "accent": "#0078d4",
-                                "black": "#000000",
-                                "blackTranslucent40": "rgba(0,0,0,.4)",
-                                "blue": "#0078d4",
-                                "blueDark": "#002050",
-                                "blueLight": "#00bcf2",
-                                "blueMid": "#00188f",
-                                "green": "#107c10",
-                                "greenDark": "#004b1c",
-                                "greenLight": "#bad80a",
-                                "magenta": "#b4009e",
-                                "magentaDark": "#5c005c",
-                                "magentaLight": "#e3008c",
-                                "neutralDark": "#201f1e",
-                                "neutralLight": "#edebe9",
-                                "neutralLighter": "#f3f2f1",
-                                "neutralLighterAlt": "#faf9f8",
-                                "neutralPrimary": "#323130",
-                                "neutralPrimaryAlt": "#3b3a39",
-                                "neutralQuaternary": "#d2d0ce",
-                                "neutralQuaternaryAlt": "#e1dfdd",
-                                "neutralSecondary": "#605e5c",
-                                "neutralSecondaryAlt": "#8a8886",
-                                "neutralTertiary": "#a19f9d",
-                                "neutralTertiaryAlt": "#c8c6c4",
-                                "orange": "#d83b01",
-                                "orangeLight": "#ea4300",
-                                "orangeLighter": "#ff8c00",
-                                "purple": "#5c2d91",
-                                "purpleDark": "#32145a",
-                                "purpleLight": "#b4a0ff",
-                                "red": "#e81123",
-                                "redDark": "#a4262c",
-                                "teal": "#008272",
-                                "tealDark": "#004b50",
-                                "tealLight": "#00b294",
-                                "themeDark": "#005a9e",
-                                "themeDarkAlt": "#106ebe",
-                                "themeDarker": "#004578",
-                                "themeLight": "#c7e0f4",
-                                "themeLighter": "#deecf9",
-                                "themeLighterAlt": "#eff6fc",
-                                "themePrimary": "#0078d4",
-                                "themeSecondary": "#2b88d8",
-                                "themeTertiary": "#71afe5",
-                                "white": "#ffffff",
-                                "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                "yellow": "#ffb900",
-                                "yellowDark": "#d29200",
-                                "yellowLight": "#fff100",
-                              },
-                              "rtl": undefined,
-                              "semanticColors": Object {
-                                "accentButtonBackground": "#0078d4",
-                                "accentButtonText": "#ffffff",
-                                "actionLink": "#323130",
-                                "actionLinkHovered": "#201f1e",
-                                "blockingBackground": "#FDE7E9",
-                                "blockingIcon": "#FDE7E9",
-                                "bodyBackground": "#ffffff",
-                                "bodyBackgroundChecked": "#edebe9",
-                                "bodyBackgroundHovered": "#f3f2f1",
-                                "bodyDivider": "#edebe9",
-                                "bodyFrameBackground": "#ffffff",
-                                "bodyFrameDivider": "#edebe9",
-                                "bodyStandoutBackground": "#faf9f8",
-                                "bodySubtext": "#605e5c",
-                                "bodyText": "#323130",
-                                "bodyTextChecked": "#000000",
-                                "buttonBackground": "#ffffff",
-                                "buttonBackgroundChecked": "#c8c6c4",
-                                "buttonBackgroundCheckedHovered": "#edebe9",
-                                "buttonBackgroundDisabled": "#f3f2f1",
-                                "buttonBackgroundHovered": "#f3f2f1",
-                                "buttonBackgroundPressed": "#edebe9",
-                                "buttonBorder": "#8a8886",
-                                "buttonBorderDisabled": "#f3f2f1",
-                                "buttonText": "#323130",
-                                "buttonTextChecked": "#201f1e",
-                                "buttonTextCheckedHovered": "#000000",
-                                "buttonTextDisabled": "#a19f9d",
-                                "buttonTextHovered": "#201f1e",
-                                "buttonTextPressed": "#201f1e",
-                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                "cardStandoutBackground": "#ffffff",
-                                "defaultStateBackground": "#faf9f8",
-                                "disabledBackground": "#f3f2f1",
-                                "disabledBodySubtext": "#c8c6c4",
-                                "disabledBodyText": "#a19f9d",
-                                "disabledBorder": "#c8c6c4",
-                                "disabledSubtext": "#d2d0ce",
-                                "disabledText": "#a19f9d",
-                                "errorBackground": "#FDE7E9",
-                                "errorIcon": "#A80000",
-                                "errorText": "#a4262c",
-                                "focusBorder": "#605e5c",
-                                "infoBackground": "#f3f2f1",
-                                "infoIcon": "#605e5c",
-                                "inputBackground": "#ffffff",
-                                "inputBackgroundChecked": "#0078d4",
-                                "inputBackgroundCheckedHovered": "#005a9e",
-                                "inputBorder": "#605e5c",
-                                "inputBorderHovered": "#323130",
-                                "inputFocusBorderAlt": "#0078d4",
-                                "inputForegroundChecked": "#ffffff",
-                                "inputIcon": "#0078d4",
-                                "inputIconDisabled": "#a19f9d",
-                                "inputIconHovered": "#005a9e",
-                                "inputPlaceholderBackgroundChecked": "#deecf9",
-                                "inputPlaceholderText": "#605e5c",
-                                "inputText": "#323130",
-                                "inputTextHovered": "#201f1e",
-                                "link": "#0078d4",
-                                "linkHovered": "#004578",
-                                "listBackground": "#ffffff",
-                                "listHeaderBackgroundHovered": "#f3f2f1",
-                                "listHeaderBackgroundPressed": "#edebe9",
-                                "listItemBackgroundChecked": "#edebe9",
-                                "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                "listItemBackgroundHovered": "#f3f2f1",
-                                "listText": "#323130",
-                                "listTextColor": "#323130",
-                                "menuBackground": "#ffffff",
-                                "menuDivider": "#c8c6c4",
-                                "menuHeader": "#0078d4",
-                                "menuIcon": "#0078d4",
-                                "menuItemBackgroundChecked": "#edebe9",
-                                "menuItemBackgroundHovered": "#f3f2f1",
-                                "menuItemBackgroundPressed": "#edebe9",
-                                "menuItemText": "#323130",
-                                "menuItemTextHovered": "#201f1e",
-                                "messageLink": "#005A9E",
-                                "messageLinkHovered": "#004578",
-                                "messageText": "#323130",
-                                "primaryButtonBackground": "#0078d4",
-                                "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                "primaryButtonBackgroundHovered": "#106ebe",
-                                "primaryButtonBackgroundPressed": "#005a9e",
-                                "primaryButtonBorder": "transparent",
-                                "primaryButtonText": "#ffffff",
-                                "primaryButtonTextDisabled": "#d2d0ce",
-                                "primaryButtonTextHovered": "#ffffff",
-                                "primaryButtonTextPressed": "#ffffff",
-                                "severeWarningBackground": "#FED9CC",
-                                "severeWarningIcon": "#D83B01",
-                                "smallInputBorder": "#605e5c",
-                                "successBackground": "#DFF6DD",
-                                "successIcon": "#107C10",
-                                "successText": "#107C10",
-                                "variantBorder": "#edebe9",
-                                "variantBorderHovered": "#a19f9d",
-                                "warningBackground": "#FFF4CE",
-                                "warningHighlight": "#ffb900",
-                                "warningIcon": "#797775",
-                                "warningText": "#323130",
-                              },
-                              "spacing": Object {
-                                "l1": "20px",
-                                "l2": "32px",
-                                "m": "16px",
-                                "s1": "8px",
-                                "s2": "4px",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="ms-Dropdown-container"
-                          >
-                            <StyledLabelBase
-                              className="ms-Dropdown-label"
-                              id="Dropdown7-label"
-                              styles={[Function]}
-                            >
-                              <LabelBase
-                                className="ms-Dropdown-label"
-                                id="Dropdown7-label"
-                                styles={[Function]}
-                                theme={
-                                  Object {
-                                    "disableGlobalClassNames": false,
-                                    "effects": Object {
-                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "roundedCorner2": "2px",
-                                      "roundedCorner4": "4px",
-                                      "roundedCorner6": "6px",
-                                    },
-                                    "fonts": Object {
-                                      "large": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "18px",
-                                        "fontWeight": 400,
-                                      },
-                                      "medium": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "14px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mediumPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "16px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mega": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "68px",
-                                        "fontWeight": 600,
-                                      },
-                                      "small": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "smallPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "superLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "42px",
-                                        "fontWeight": 600,
-                                      },
-                                      "tiny": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "20px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "24px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xSmall": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xxLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "28px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xxLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "32px",
-                                        "fontWeight": 600,
-                                      },
-                                    },
-                                    "isInverted": false,
-                                    "palette": Object {
-                                      "accent": "#0078d4",
-                                      "black": "#000000",
-                                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                                      "blue": "#0078d4",
-                                      "blueDark": "#002050",
-                                      "blueLight": "#00bcf2",
-                                      "blueMid": "#00188f",
-                                      "green": "#107c10",
-                                      "greenDark": "#004b1c",
-                                      "greenLight": "#bad80a",
-                                      "magenta": "#b4009e",
-                                      "magentaDark": "#5c005c",
-                                      "magentaLight": "#e3008c",
-                                      "neutralDark": "#201f1e",
-                                      "neutralLight": "#edebe9",
-                                      "neutralLighter": "#f3f2f1",
-                                      "neutralLighterAlt": "#faf9f8",
-                                      "neutralPrimary": "#323130",
-                                      "neutralPrimaryAlt": "#3b3a39",
-                                      "neutralQuaternary": "#d2d0ce",
-                                      "neutralQuaternaryAlt": "#e1dfdd",
-                                      "neutralSecondary": "#605e5c",
-                                      "neutralSecondaryAlt": "#8a8886",
-                                      "neutralTertiary": "#a19f9d",
-                                      "neutralTertiaryAlt": "#c8c6c4",
-                                      "orange": "#d83b01",
-                                      "orangeLight": "#ea4300",
-                                      "orangeLighter": "#ff8c00",
-                                      "purple": "#5c2d91",
-                                      "purpleDark": "#32145a",
-                                      "purpleLight": "#b4a0ff",
-                                      "red": "#e81123",
-                                      "redDark": "#a4262c",
-                                      "teal": "#008272",
-                                      "tealDark": "#004b50",
-                                      "tealLight": "#00b294",
-                                      "themeDark": "#005a9e",
-                                      "themeDarkAlt": "#106ebe",
-                                      "themeDarker": "#004578",
-                                      "themeLight": "#c7e0f4",
-                                      "themeLighter": "#deecf9",
-                                      "themeLighterAlt": "#eff6fc",
-                                      "themePrimary": "#0078d4",
-                                      "themeSecondary": "#2b88d8",
-                                      "themeTertiary": "#71afe5",
-                                      "white": "#ffffff",
-                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                      "yellow": "#ffb900",
-                                      "yellowDark": "#d29200",
-                                      "yellowLight": "#fff100",
-                                    },
-                                    "rtl": undefined,
-                                    "semanticColors": Object {
-                                      "accentButtonBackground": "#0078d4",
-                                      "accentButtonText": "#ffffff",
-                                      "actionLink": "#323130",
-                                      "actionLinkHovered": "#201f1e",
-                                      "blockingBackground": "#FDE7E9",
-                                      "blockingIcon": "#FDE7E9",
-                                      "bodyBackground": "#ffffff",
-                                      "bodyBackgroundChecked": "#edebe9",
-                                      "bodyBackgroundHovered": "#f3f2f1",
-                                      "bodyDivider": "#edebe9",
-                                      "bodyFrameBackground": "#ffffff",
-                                      "bodyFrameDivider": "#edebe9",
-                                      "bodyStandoutBackground": "#faf9f8",
-                                      "bodySubtext": "#605e5c",
-                                      "bodyText": "#323130",
-                                      "bodyTextChecked": "#000000",
-                                      "buttonBackground": "#ffffff",
-                                      "buttonBackgroundChecked": "#c8c6c4",
-                                      "buttonBackgroundCheckedHovered": "#edebe9",
-                                      "buttonBackgroundDisabled": "#f3f2f1",
-                                      "buttonBackgroundHovered": "#f3f2f1",
-                                      "buttonBackgroundPressed": "#edebe9",
-                                      "buttonBorder": "#8a8886",
-                                      "buttonBorderDisabled": "#f3f2f1",
-                                      "buttonText": "#323130",
-                                      "buttonTextChecked": "#201f1e",
-                                      "buttonTextCheckedHovered": "#000000",
-                                      "buttonTextDisabled": "#a19f9d",
-                                      "buttonTextHovered": "#201f1e",
-                                      "buttonTextPressed": "#201f1e",
-                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardStandoutBackground": "#ffffff",
-                                      "defaultStateBackground": "#faf9f8",
-                                      "disabledBackground": "#f3f2f1",
-                                      "disabledBodySubtext": "#c8c6c4",
-                                      "disabledBodyText": "#a19f9d",
-                                      "disabledBorder": "#c8c6c4",
-                                      "disabledSubtext": "#d2d0ce",
-                                      "disabledText": "#a19f9d",
-                                      "errorBackground": "#FDE7E9",
-                                      "errorIcon": "#A80000",
-                                      "errorText": "#a4262c",
-                                      "focusBorder": "#605e5c",
-                                      "infoBackground": "#f3f2f1",
-                                      "infoIcon": "#605e5c",
-                                      "inputBackground": "#ffffff",
-                                      "inputBackgroundChecked": "#0078d4",
-                                      "inputBackgroundCheckedHovered": "#005a9e",
-                                      "inputBorder": "#605e5c",
-                                      "inputBorderHovered": "#323130",
-                                      "inputFocusBorderAlt": "#0078d4",
-                                      "inputForegroundChecked": "#ffffff",
-                                      "inputIcon": "#0078d4",
-                                      "inputIconDisabled": "#a19f9d",
-                                      "inputIconHovered": "#005a9e",
-                                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                                      "inputPlaceholderText": "#605e5c",
-                                      "inputText": "#323130",
-                                      "inputTextHovered": "#201f1e",
-                                      "link": "#0078d4",
-                                      "linkHovered": "#004578",
-                                      "listBackground": "#ffffff",
-                                      "listHeaderBackgroundHovered": "#f3f2f1",
-                                      "listHeaderBackgroundPressed": "#edebe9",
-                                      "listItemBackgroundChecked": "#edebe9",
-                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                      "listItemBackgroundHovered": "#f3f2f1",
-                                      "listText": "#323130",
-                                      "listTextColor": "#323130",
-                                      "menuBackground": "#ffffff",
-                                      "menuDivider": "#c8c6c4",
-                                      "menuHeader": "#0078d4",
-                                      "menuIcon": "#0078d4",
-                                      "menuItemBackgroundChecked": "#edebe9",
-                                      "menuItemBackgroundHovered": "#f3f2f1",
-                                      "menuItemBackgroundPressed": "#edebe9",
-                                      "menuItemText": "#323130",
-                                      "menuItemTextHovered": "#201f1e",
-                                      "messageLink": "#005A9E",
-                                      "messageLinkHovered": "#004578",
-                                      "messageText": "#323130",
-                                      "primaryButtonBackground": "#0078d4",
-                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                      "primaryButtonBackgroundHovered": "#106ebe",
-                                      "primaryButtonBackgroundPressed": "#005a9e",
-                                      "primaryButtonBorder": "transparent",
-                                      "primaryButtonText": "#ffffff",
-                                      "primaryButtonTextDisabled": "#d2d0ce",
-                                      "primaryButtonTextHovered": "#ffffff",
-                                      "primaryButtonTextPressed": "#ffffff",
-                                      "severeWarningBackground": "#FED9CC",
-                                      "severeWarningIcon": "#D83B01",
-                                      "smallInputBorder": "#605e5c",
-                                      "successBackground": "#DFF6DD",
-                                      "successIcon": "#107C10",
-                                      "successText": "#107C10",
-                                      "variantBorder": "#edebe9",
-                                      "variantBorderHovered": "#a19f9d",
-                                      "warningBackground": "#FFF4CE",
-                                      "warningHighlight": "#ffb900",
-                                      "warningIcon": "#797775",
-                                      "warningText": "#323130",
-                                    },
-                                    "spacing": Object {
-                                      "l1": "20px",
-                                      "l2": "32px",
-                                      "m": "16px",
-                                      "s1": "8px",
-                                      "s2": "4px",
-                                    },
-                                  }
-                                }
-                              >
-                                <label
-                                  className="ms-Label ms-Dropdown-label root-80"
-                                  id="Dropdown7-label"
-                                >
-                                  Key
-                                </label>
-                              </LabelBase>
-                            </StyledLabelBase>
-                            <div
-                              aria-expanded="false"
-                              aria-haspopup="listbox"
-                              aria-labelledby="Dropdown7-label Dropdown7-option"
-                              className="ms-Dropdown dropdown-64"
-                              data-is-focusable={true}
-                              data-ktp-target={true}
-                              id="Dropdown7"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onKeyDown={[Function]}
-                              onKeyUp={[Function]}
-                              onMouseDown={[Function]}
-                              role="combobox"
-                              tabIndex={0}
-                            >
-                              <span
-                                aria-atomic={true}
-                                aria-invalid={false}
-                                aria-live="polite"
-                                className="ms-Dropdown-title title-99"
-                                id="Dropdown7-option"
-                              >
-                                String
-                              </span>
-                              <span
-                                className="ms-Dropdown-caretDownWrapper caretDownWrapper-66"
-                              >
-                                <StyledIconBase
-                                  aria-hidden={true}
-                                  className="ms-Dropdown-caretDown caretDown-67"
-                                  iconName="ChevronDown"
-                                >
-                                  <IconBase
-                                    aria-hidden={true}
-                                    className="ms-Dropdown-caretDown caretDown-67"
-                                    iconName="ChevronDown"
-                                    styles={[Function]}
-                                    theme={
-                                      Object {
-                                        "disableGlobalClassNames": false,
-                                        "effects": Object {
-                                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                          "roundedCorner2": "2px",
-                                          "roundedCorner4": "4px",
-                                          "roundedCorner6": "6px",
-                                        },
-                                        "fonts": Object {
-                                          "large": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "18px",
-                                            "fontWeight": 400,
-                                          },
-                                          "medium": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "14px",
-                                            "fontWeight": 400,
-                                          },
-                                          "mediumPlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "16px",
-                                            "fontWeight": 400,
-                                          },
-                                          "mega": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "68px",
-                                            "fontWeight": 600,
-                                          },
-                                          "small": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "12px",
-                                            "fontWeight": 400,
-                                          },
-                                          "smallPlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "12px",
-                                            "fontWeight": 400,
-                                          },
-                                          "superLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "42px",
-                                            "fontWeight": 600,
-                                          },
-                                          "tiny": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "10px",
-                                            "fontWeight": 400,
-                                          },
-                                          "xLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "20px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xLargePlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "24px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xSmall": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "10px",
-                                            "fontWeight": 400,
-                                          },
-                                          "xxLarge": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "28px",
-                                            "fontWeight": 600,
-                                          },
-                                          "xxLargePlus": Object {
-                                            "MozOsxFontSmoothing": "grayscale",
-                                            "WebkitFontSmoothing": "antialiased",
-                                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                            "fontSize": "32px",
-                                            "fontWeight": 600,
-                                          },
-                                        },
-                                        "isInverted": false,
-                                        "palette": Object {
-                                          "accent": "#0078d4",
-                                          "black": "#000000",
-                                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                                          "blue": "#0078d4",
-                                          "blueDark": "#002050",
-                                          "blueLight": "#00bcf2",
-                                          "blueMid": "#00188f",
-                                          "green": "#107c10",
-                                          "greenDark": "#004b1c",
-                                          "greenLight": "#bad80a",
-                                          "magenta": "#b4009e",
-                                          "magentaDark": "#5c005c",
-                                          "magentaLight": "#e3008c",
-                                          "neutralDark": "#201f1e",
-                                          "neutralLight": "#edebe9",
-                                          "neutralLighter": "#f3f2f1",
-                                          "neutralLighterAlt": "#faf9f8",
-                                          "neutralPrimary": "#323130",
-                                          "neutralPrimaryAlt": "#3b3a39",
-                                          "neutralQuaternary": "#d2d0ce",
-                                          "neutralQuaternaryAlt": "#e1dfdd",
-                                          "neutralSecondary": "#605e5c",
-                                          "neutralSecondaryAlt": "#8a8886",
-                                          "neutralTertiary": "#a19f9d",
-                                          "neutralTertiaryAlt": "#c8c6c4",
-                                          "orange": "#d83b01",
-                                          "orangeLight": "#ea4300",
-                                          "orangeLighter": "#ff8c00",
-                                          "purple": "#5c2d91",
-                                          "purpleDark": "#32145a",
-                                          "purpleLight": "#b4a0ff",
-                                          "red": "#e81123",
-                                          "redDark": "#a4262c",
-                                          "teal": "#008272",
-                                          "tealDark": "#004b50",
-                                          "tealLight": "#00b294",
-                                          "themeDark": "#005a9e",
-                                          "themeDarkAlt": "#106ebe",
-                                          "themeDarker": "#004578",
-                                          "themeLight": "#c7e0f4",
-                                          "themeLighter": "#deecf9",
-                                          "themeLighterAlt": "#eff6fc",
-                                          "themePrimary": "#0078d4",
-                                          "themeSecondary": "#2b88d8",
-                                          "themeTertiary": "#71afe5",
-                                          "white": "#ffffff",
-                                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                          "yellow": "#ffb900",
-                                          "yellowDark": "#d29200",
-                                          "yellowLight": "#fff100",
-                                        },
-                                        "rtl": undefined,
-                                        "semanticColors": Object {
-                                          "accentButtonBackground": "#0078d4",
-                                          "accentButtonText": "#ffffff",
-                                          "actionLink": "#323130",
-                                          "actionLinkHovered": "#201f1e",
-                                          "blockingBackground": "#FDE7E9",
-                                          "blockingIcon": "#FDE7E9",
-                                          "bodyBackground": "#ffffff",
-                                          "bodyBackgroundChecked": "#edebe9",
-                                          "bodyBackgroundHovered": "#f3f2f1",
-                                          "bodyDivider": "#edebe9",
-                                          "bodyFrameBackground": "#ffffff",
-                                          "bodyFrameDivider": "#edebe9",
-                                          "bodyStandoutBackground": "#faf9f8",
-                                          "bodySubtext": "#605e5c",
-                                          "bodyText": "#323130",
-                                          "bodyTextChecked": "#000000",
-                                          "buttonBackground": "#ffffff",
-                                          "buttonBackgroundChecked": "#c8c6c4",
-                                          "buttonBackgroundCheckedHovered": "#edebe9",
-                                          "buttonBackgroundDisabled": "#f3f2f1",
-                                          "buttonBackgroundHovered": "#f3f2f1",
-                                          "buttonBackgroundPressed": "#edebe9",
-                                          "buttonBorder": "#8a8886",
-                                          "buttonBorderDisabled": "#f3f2f1",
-                                          "buttonText": "#323130",
-                                          "buttonTextChecked": "#201f1e",
-                                          "buttonTextCheckedHovered": "#000000",
-                                          "buttonTextDisabled": "#a19f9d",
-                                          "buttonTextHovered": "#201f1e",
-                                          "buttonTextPressed": "#201f1e",
-                                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                          "cardStandoutBackground": "#ffffff",
-                                          "defaultStateBackground": "#faf9f8",
-                                          "disabledBackground": "#f3f2f1",
-                                          "disabledBodySubtext": "#c8c6c4",
-                                          "disabledBodyText": "#a19f9d",
-                                          "disabledBorder": "#c8c6c4",
-                                          "disabledSubtext": "#d2d0ce",
-                                          "disabledText": "#a19f9d",
-                                          "errorBackground": "#FDE7E9",
-                                          "errorIcon": "#A80000",
-                                          "errorText": "#a4262c",
-                                          "focusBorder": "#605e5c",
-                                          "infoBackground": "#f3f2f1",
-                                          "infoIcon": "#605e5c",
-                                          "inputBackground": "#ffffff",
-                                          "inputBackgroundChecked": "#0078d4",
-                                          "inputBackgroundCheckedHovered": "#005a9e",
-                                          "inputBorder": "#605e5c",
-                                          "inputBorderHovered": "#323130",
-                                          "inputFocusBorderAlt": "#0078d4",
-                                          "inputForegroundChecked": "#ffffff",
-                                          "inputIcon": "#0078d4",
-                                          "inputIconDisabled": "#a19f9d",
-                                          "inputIconHovered": "#005a9e",
-                                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                                          "inputPlaceholderText": "#605e5c",
-                                          "inputText": "#323130",
-                                          "inputTextHovered": "#201f1e",
-                                          "link": "#0078d4",
-                                          "linkHovered": "#004578",
-                                          "listBackground": "#ffffff",
-                                          "listHeaderBackgroundHovered": "#f3f2f1",
-                                          "listHeaderBackgroundPressed": "#edebe9",
-                                          "listItemBackgroundChecked": "#edebe9",
-                                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                          "listItemBackgroundHovered": "#f3f2f1",
-                                          "listText": "#323130",
-                                          "listTextColor": "#323130",
-                                          "menuBackground": "#ffffff",
-                                          "menuDivider": "#c8c6c4",
-                                          "menuHeader": "#0078d4",
-                                          "menuIcon": "#0078d4",
-                                          "menuItemBackgroundChecked": "#edebe9",
-                                          "menuItemBackgroundHovered": "#f3f2f1",
-                                          "menuItemBackgroundPressed": "#edebe9",
-                                          "menuItemText": "#323130",
-                                          "menuItemTextHovered": "#201f1e",
-                                          "messageLink": "#005A9E",
-                                          "messageLinkHovered": "#004578",
-                                          "messageText": "#323130",
-                                          "primaryButtonBackground": "#0078d4",
-                                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                          "primaryButtonBackgroundHovered": "#106ebe",
-                                          "primaryButtonBackgroundPressed": "#005a9e",
-                                          "primaryButtonBorder": "transparent",
-                                          "primaryButtonText": "#ffffff",
-                                          "primaryButtonTextDisabled": "#d2d0ce",
-                                          "primaryButtonTextHovered": "#ffffff",
-                                          "primaryButtonTextPressed": "#ffffff",
-                                          "severeWarningBackground": "#FED9CC",
-                                          "severeWarningIcon": "#D83B01",
-                                          "smallInputBorder": "#605e5c",
-                                          "successBackground": "#DFF6DD",
-                                          "successIcon": "#107C10",
-                                          "successText": "#107C10",
-                                          "variantBorder": "#edebe9",
-                                          "variantBorderHovered": "#a19f9d",
-                                          "warningBackground": "#FFF4CE",
-                                          "warningHighlight": "#ffb900",
-                                          "warningIcon": "#797775",
-                                          "warningText": "#323130",
-                                        },
-                                        "spacing": Object {
-                                          "l1": "20px",
-                                          "l2": "32px",
-                                          "m": "16px",
-                                          "s1": "8px",
-                                          "s2": "4px",
-                                        },
-                                      }
-                                    }
-                                  >
-                                    <i
-                                      aria-hidden={true}
-                                      className="ms-Dropdown-caretDown caretDown-81"
-                                      data-icon-name="ChevronDown"
-                                    >
-                                      
-                                    </i>
-                                  </IconBase>
-                                </StyledIconBase>
-                              </span>
-                            </div>
-                          </div>
-                        </DropdownInternal>
-                      </DropdownBase>
-                    </Dropdown>
-                    <StyledTextFieldBase
-                      autoFocus={true}
-                      id="confirmCollectionId"
-                      key=".0:$.1"
-                      label="Param"
-                      onChange={[Function]}
-                      value=""
-                    >
-                      <TextFieldBase
-                        autoFocus={true}
-                        deferredValidationTime={200}
-                        id="confirmCollectionId"
-                        label="Param"
-                        onChange={[Function]}
-                        resizable={true}
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        validateOnLoad={true}
-                        value=""
-                      >
-                        <div
-                          className="ms-TextField root-83"
-                        >
-                          <div
-                            className="ms-TextField-wrapper"
-                          >
-                            <StyledLabelBase
-                              htmlFor="confirmCollectionId"
-                              id="TextFieldLabel10"
-                              styles={[Function]}
-                            >
-                              <LabelBase
-                                htmlFor="confirmCollectionId"
-                                id="TextFieldLabel10"
-                                styles={[Function]}
-                                theme={
-                                  Object {
-                                    "disableGlobalClassNames": false,
-                                    "effects": Object {
-                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "roundedCorner2": "2px",
-                                      "roundedCorner4": "4px",
-                                      "roundedCorner6": "6px",
-                                    },
-                                    "fonts": Object {
-                                      "large": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "18px",
-                                        "fontWeight": 400,
-                                      },
-                                      "medium": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "14px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mediumPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "16px",
-                                        "fontWeight": 400,
-                                      },
-                                      "mega": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "68px",
-                                        "fontWeight": 600,
-                                      },
-                                      "small": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "smallPlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "12px",
-                                        "fontWeight": 400,
-                                      },
-                                      "superLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "42px",
-                                        "fontWeight": 600,
-                                      },
-                                      "tiny": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "20px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "24px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xSmall": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "10px",
-                                        "fontWeight": 400,
-                                      },
-                                      "xxLarge": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "28px",
-                                        "fontWeight": 600,
-                                      },
-                                      "xxLargePlus": Object {
-                                        "MozOsxFontSmoothing": "grayscale",
-                                        "WebkitFontSmoothing": "antialiased",
-                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                        "fontSize": "32px",
-                                        "fontWeight": 600,
-                                      },
-                                    },
-                                    "isInverted": false,
-                                    "palette": Object {
-                                      "accent": "#0078d4",
-                                      "black": "#000000",
-                                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                                      "blue": "#0078d4",
-                                      "blueDark": "#002050",
-                                      "blueLight": "#00bcf2",
-                                      "blueMid": "#00188f",
-                                      "green": "#107c10",
-                                      "greenDark": "#004b1c",
-                                      "greenLight": "#bad80a",
-                                      "magenta": "#b4009e",
-                                      "magentaDark": "#5c005c",
-                                      "magentaLight": "#e3008c",
-                                      "neutralDark": "#201f1e",
-                                      "neutralLight": "#edebe9",
-                                      "neutralLighter": "#f3f2f1",
-                                      "neutralLighterAlt": "#faf9f8",
-                                      "neutralPrimary": "#323130",
-                                      "neutralPrimaryAlt": "#3b3a39",
-                                      "neutralQuaternary": "#d2d0ce",
-                                      "neutralQuaternaryAlt": "#e1dfdd",
-                                      "neutralSecondary": "#605e5c",
-                                      "neutralSecondaryAlt": "#8a8886",
-                                      "neutralTertiary": "#a19f9d",
-                                      "neutralTertiaryAlt": "#c8c6c4",
-                                      "orange": "#d83b01",
-                                      "orangeLight": "#ea4300",
-                                      "orangeLighter": "#ff8c00",
-                                      "purple": "#5c2d91",
-                                      "purpleDark": "#32145a",
-                                      "purpleLight": "#b4a0ff",
-                                      "red": "#e81123",
-                                      "redDark": "#a4262c",
-                                      "teal": "#008272",
-                                      "tealDark": "#004b50",
-                                      "tealLight": "#00b294",
-                                      "themeDark": "#005a9e",
-                                      "themeDarkAlt": "#106ebe",
-                                      "themeDarker": "#004578",
-                                      "themeLight": "#c7e0f4",
-                                      "themeLighter": "#deecf9",
-                                      "themeLighterAlt": "#eff6fc",
-                                      "themePrimary": "#0078d4",
-                                      "themeSecondary": "#2b88d8",
-                                      "themeTertiary": "#71afe5",
-                                      "white": "#ffffff",
-                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                      "yellow": "#ffb900",
-                                      "yellowDark": "#d29200",
-                                      "yellowLight": "#fff100",
-                                    },
-                                    "rtl": undefined,
-                                    "semanticColors": Object {
-                                      "accentButtonBackground": "#0078d4",
-                                      "accentButtonText": "#ffffff",
-                                      "actionLink": "#323130",
-                                      "actionLinkHovered": "#201f1e",
-                                      "blockingBackground": "#FDE7E9",
-                                      "blockingIcon": "#FDE7E9",
-                                      "bodyBackground": "#ffffff",
-                                      "bodyBackgroundChecked": "#edebe9",
-                                      "bodyBackgroundHovered": "#f3f2f1",
-                                      "bodyDivider": "#edebe9",
-                                      "bodyFrameBackground": "#ffffff",
-                                      "bodyFrameDivider": "#edebe9",
-                                      "bodyStandoutBackground": "#faf9f8",
-                                      "bodySubtext": "#605e5c",
-                                      "bodyText": "#323130",
-                                      "bodyTextChecked": "#000000",
-                                      "buttonBackground": "#ffffff",
-                                      "buttonBackgroundChecked": "#c8c6c4",
-                                      "buttonBackgroundCheckedHovered": "#edebe9",
-                                      "buttonBackgroundDisabled": "#f3f2f1",
-                                      "buttonBackgroundHovered": "#f3f2f1",
-                                      "buttonBackgroundPressed": "#edebe9",
-                                      "buttonBorder": "#8a8886",
-                                      "buttonBorderDisabled": "#f3f2f1",
-                                      "buttonText": "#323130",
-                                      "buttonTextChecked": "#201f1e",
-                                      "buttonTextCheckedHovered": "#000000",
-                                      "buttonTextDisabled": "#a19f9d",
-                                      "buttonTextHovered": "#201f1e",
-                                      "buttonTextPressed": "#201f1e",
-                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                      "cardStandoutBackground": "#ffffff",
-                                      "defaultStateBackground": "#faf9f8",
-                                      "disabledBackground": "#f3f2f1",
-                                      "disabledBodySubtext": "#c8c6c4",
-                                      "disabledBodyText": "#a19f9d",
-                                      "disabledBorder": "#c8c6c4",
-                                      "disabledSubtext": "#d2d0ce",
-                                      "disabledText": "#a19f9d",
-                                      "errorBackground": "#FDE7E9",
-                                      "errorIcon": "#A80000",
-                                      "errorText": "#a4262c",
-                                      "focusBorder": "#605e5c",
-                                      "infoBackground": "#f3f2f1",
-                                      "infoIcon": "#605e5c",
-                                      "inputBackground": "#ffffff",
-                                      "inputBackgroundChecked": "#0078d4",
-                                      "inputBackgroundCheckedHovered": "#005a9e",
-                                      "inputBorder": "#605e5c",
-                                      "inputBorderHovered": "#323130",
-                                      "inputFocusBorderAlt": "#0078d4",
-                                      "inputForegroundChecked": "#ffffff",
-                                      "inputIcon": "#0078d4",
-                                      "inputIconDisabled": "#a19f9d",
-                                      "inputIconHovered": "#005a9e",
-                                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                                      "inputPlaceholderText": "#605e5c",
-                                      "inputText": "#323130",
-                                      "inputTextHovered": "#201f1e",
-                                      "link": "#0078d4",
-                                      "linkHovered": "#004578",
-                                      "listBackground": "#ffffff",
-                                      "listHeaderBackgroundHovered": "#f3f2f1",
-                                      "listHeaderBackgroundPressed": "#edebe9",
-                                      "listItemBackgroundChecked": "#edebe9",
-                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                      "listItemBackgroundHovered": "#f3f2f1",
-                                      "listText": "#323130",
-                                      "listTextColor": "#323130",
-                                      "menuBackground": "#ffffff",
-                                      "menuDivider": "#c8c6c4",
-                                      "menuHeader": "#0078d4",
-                                      "menuIcon": "#0078d4",
-                                      "menuItemBackgroundChecked": "#edebe9",
-                                      "menuItemBackgroundHovered": "#f3f2f1",
-                                      "menuItemBackgroundPressed": "#edebe9",
-                                      "menuItemText": "#323130",
-                                      "menuItemTextHovered": "#201f1e",
-                                      "messageLink": "#005A9E",
-                                      "messageLinkHovered": "#004578",
-                                      "messageText": "#323130",
-                                      "primaryButtonBackground": "#0078d4",
-                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                      "primaryButtonBackgroundHovered": "#106ebe",
-                                      "primaryButtonBackgroundPressed": "#005a9e",
-                                      "primaryButtonBorder": "transparent",
-                                      "primaryButtonText": "#ffffff",
-                                      "primaryButtonTextDisabled": "#d2d0ce",
-                                      "primaryButtonTextHovered": "#ffffff",
-                                      "primaryButtonTextPressed": "#ffffff",
-                                      "severeWarningBackground": "#FED9CC",
-                                      "severeWarningIcon": "#D83B01",
-                                      "smallInputBorder": "#605e5c",
-                                      "successBackground": "#DFF6DD",
-                                      "successIcon": "#107C10",
-                                      "successText": "#107C10",
-                                      "variantBorder": "#edebe9",
-                                      "variantBorderHovered": "#a19f9d",
-                                      "warningBackground": "#FFF4CE",
-                                      "warningHighlight": "#ffb900",
-                                      "warningIcon": "#797775",
-                                      "warningText": "#323130",
-                                    },
-                                    "spacing": Object {
-                                      "l1": "20px",
-                                      "l2": "32px",
-                                      "m": "16px",
-                                      "s1": "8px",
-                                      "s2": "4px",
-                                    },
-                                  }
-                                }
-                              >
-                                <label
-                                  className="ms-Label root-62"
-                                  htmlFor="confirmCollectionId"
-                                  id="TextFieldLabel10"
-                                >
-                                  Param
-                                </label>
-                              </LabelBase>
-                            </StyledLabelBase>
-                            <div
-                              className="ms-TextField-fieldGroup fieldGroup-84"
-                            >
-                              <input
-                                aria-invalid={false}
-                                aria-labelledby="TextFieldLabel10"
-                                autoFocus={true}
-                                className="ms-TextField-field field-85"
-                                id="confirmCollectionId"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                onInput={[Function]}
-                                type="text"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </TextFieldBase>
-                    </StyledTextFieldBase>
-                    <StyledImageBase
-                      alt="Delete param"
-                      className="addRemoveIconLabel"
-                      height={30}
-                      id="deleteparam"
-                      onClick={[Function]}
-                      src=""
-                      width={20}
-                    >
-                      <ImageBase
-                        alt="Delete param"
-                        className="addRemoveIconLabel"
-                        height={30}
-                        id="deleteparam"
-                        onClick={[Function]}
-                        src=""
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        width={20}
-                      >
-                        <div
-                          className="ms-Image addRemoveIconLabel root-94"
-                          style={
-                            Object {
-                              "height": 30,
-                              "width": 20,
-                            }
-                          }
-                        >
-                          <img
-                            alt="Delete param"
-                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-95"
-                            id="deleteparam"
-                            key="fabricImage"
-                            onClick={[Function]}
-                            onError={[Function]}
-                            onLoad={[Function]}
-                            src=""
-                          />
-                        </div>
-                      </ImageBase>
-                    </StyledImageBase>
-                    <StyledImageBase
-                      alt="Add param"
-                      className="addRemoveIconLabel"
-                      height={30}
-                      id="addparam"
-                      onClick={[Function]}
-                      src=""
-                      width={20}
-                    >
-                      <ImageBase
-                        alt="Add param"
-                        className="addRemoveIconLabel"
-                        height={30}
-                        id="addparam"
-                        onClick={[Function]}
-                        src=""
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        width={20}
-                      >
-                        <div
-                          className="ms-Image addRemoveIconLabel root-94"
-                          style={
-                            Object {
-                              "height": 30,
-                              "width": 20,
-                            }
-                          }
-                        >
-                          <img
-                            alt="Add param"
-                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-95"
-                            id="addparam"
-                            key="fabricImage"
-                            onClick={[Function]}
-                            onError={[Function]}
-                            onLoad={[Function]}
-                            src=""
-                          />
-                        </div>
-                      </ImageBase>
-                    </StyledImageBase>
-                  </div>
-                </Stack>
-              </InputParameter>
-              <Stack
-                horizontal={true}
-                onClick={[Function]}
-              >
-                <div
-                  className="ms-Stack css-63"
-                  onClick={[Function]}
-                >
-                  <StyledImageBase
-                    alt="Add param"
-                    height={30}
-                    key=".0:$.0"
-                    src=""
-                    width={20}
-                  >
-                    <ImageBase
-                      alt="Add param"
-                      height={30}
-                      src=""
                       styles={[Function]}
                       theme={
                         Object {
@@ -6398,71 +938,4933 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           },
                         }
                       }
-                      width={20}
                     >
                       <div
-                        className="ms-Image root-94"
-                        style={
-                          Object {
-                            "height": 30,
-                            "width": 20,
-                          }
-                        }
+                        className="ms-Dropdown-container"
                       >
-                        <img
-                          alt="Add param"
-                          className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-95"
-                          key="fabricImage"
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          src=""
-                        />
+                        <StyledLabelBase
+                          className="ms-Dropdown-label"
+                          id="Dropdown0-label"
+                          styles={[Function]}
+                        >
+                          <LabelBase
+                            className="ms-Dropdown-label"
+                            id="Dropdown0-label"
+                            styles={[Function]}
+                            theme={
+                              Object {
+                                "disableGlobalClassNames": false,
+                                "effects": Object {
+                                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "roundedCorner2": "2px",
+                                  "roundedCorner4": "4px",
+                                  "roundedCorner6": "6px",
+                                },
+                                "fonts": Object {
+                                  "large": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "18px",
+                                    "fontWeight": 400,
+                                  },
+                                  "medium": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "14px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mediumPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "16px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mega": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "68px",
+                                    "fontWeight": 600,
+                                  },
+                                  "small": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "smallPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "superLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "42px",
+                                    "fontWeight": 600,
+                                  },
+                                  "tiny": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "20px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "24px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xSmall": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xxLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "28px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xxLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "32px",
+                                    "fontWeight": 600,
+                                  },
+                                },
+                                "isInverted": false,
+                                "palette": Object {
+                                  "accent": "#0078d4",
+                                  "black": "#000000",
+                                  "blackTranslucent40": "rgba(0,0,0,.4)",
+                                  "blue": "#0078d4",
+                                  "blueDark": "#002050",
+                                  "blueLight": "#00bcf2",
+                                  "blueMid": "#00188f",
+                                  "green": "#107c10",
+                                  "greenDark": "#004b1c",
+                                  "greenLight": "#bad80a",
+                                  "magenta": "#b4009e",
+                                  "magentaDark": "#5c005c",
+                                  "magentaLight": "#e3008c",
+                                  "neutralDark": "#201f1e",
+                                  "neutralLight": "#edebe9",
+                                  "neutralLighter": "#f3f2f1",
+                                  "neutralLighterAlt": "#faf9f8",
+                                  "neutralPrimary": "#323130",
+                                  "neutralPrimaryAlt": "#3b3a39",
+                                  "neutralQuaternary": "#d2d0ce",
+                                  "neutralQuaternaryAlt": "#e1dfdd",
+                                  "neutralSecondary": "#605e5c",
+                                  "neutralSecondaryAlt": "#8a8886",
+                                  "neutralTertiary": "#a19f9d",
+                                  "neutralTertiaryAlt": "#c8c6c4",
+                                  "orange": "#d83b01",
+                                  "orangeLight": "#ea4300",
+                                  "orangeLighter": "#ff8c00",
+                                  "purple": "#5c2d91",
+                                  "purpleDark": "#32145a",
+                                  "purpleLight": "#b4a0ff",
+                                  "red": "#e81123",
+                                  "redDark": "#a4262c",
+                                  "teal": "#008272",
+                                  "tealDark": "#004b50",
+                                  "tealLight": "#00b294",
+                                  "themeDark": "#005a9e",
+                                  "themeDarkAlt": "#106ebe",
+                                  "themeDarker": "#004578",
+                                  "themeLight": "#c7e0f4",
+                                  "themeLighter": "#deecf9",
+                                  "themeLighterAlt": "#eff6fc",
+                                  "themePrimary": "#0078d4",
+                                  "themeSecondary": "#2b88d8",
+                                  "themeTertiary": "#71afe5",
+                                  "white": "#ffffff",
+                                  "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                  "yellow": "#ffb900",
+                                  "yellowDark": "#d29200",
+                                  "yellowLight": "#fff100",
+                                },
+                                "rtl": undefined,
+                                "semanticColors": Object {
+                                  "accentButtonBackground": "#0078d4",
+                                  "accentButtonText": "#ffffff",
+                                  "actionLink": "#323130",
+                                  "actionLinkHovered": "#201f1e",
+                                  "blockingBackground": "#FDE7E9",
+                                  "blockingIcon": "#FDE7E9",
+                                  "bodyBackground": "#ffffff",
+                                  "bodyBackgroundChecked": "#edebe9",
+                                  "bodyBackgroundHovered": "#f3f2f1",
+                                  "bodyDivider": "#edebe9",
+                                  "bodyFrameBackground": "#ffffff",
+                                  "bodyFrameDivider": "#edebe9",
+                                  "bodyStandoutBackground": "#faf9f8",
+                                  "bodySubtext": "#605e5c",
+                                  "bodyText": "#323130",
+                                  "bodyTextChecked": "#000000",
+                                  "buttonBackground": "#ffffff",
+                                  "buttonBackgroundChecked": "#c8c6c4",
+                                  "buttonBackgroundCheckedHovered": "#edebe9",
+                                  "buttonBackgroundDisabled": "#f3f2f1",
+                                  "buttonBackgroundHovered": "#f3f2f1",
+                                  "buttonBackgroundPressed": "#edebe9",
+                                  "buttonBorder": "#8a8886",
+                                  "buttonBorderDisabled": "#f3f2f1",
+                                  "buttonText": "#323130",
+                                  "buttonTextChecked": "#201f1e",
+                                  "buttonTextCheckedHovered": "#000000",
+                                  "buttonTextDisabled": "#a19f9d",
+                                  "buttonTextHovered": "#201f1e",
+                                  "buttonTextPressed": "#201f1e",
+                                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardStandoutBackground": "#ffffff",
+                                  "defaultStateBackground": "#faf9f8",
+                                  "disabledBackground": "#f3f2f1",
+                                  "disabledBodySubtext": "#c8c6c4",
+                                  "disabledBodyText": "#a19f9d",
+                                  "disabledBorder": "#c8c6c4",
+                                  "disabledSubtext": "#d2d0ce",
+                                  "disabledText": "#a19f9d",
+                                  "errorBackground": "#FDE7E9",
+                                  "errorIcon": "#A80000",
+                                  "errorText": "#a4262c",
+                                  "focusBorder": "#605e5c",
+                                  "infoBackground": "#f3f2f1",
+                                  "infoIcon": "#605e5c",
+                                  "inputBackground": "#ffffff",
+                                  "inputBackgroundChecked": "#0078d4",
+                                  "inputBackgroundCheckedHovered": "#005a9e",
+                                  "inputBorder": "#605e5c",
+                                  "inputBorderHovered": "#323130",
+                                  "inputFocusBorderAlt": "#0078d4",
+                                  "inputForegroundChecked": "#ffffff",
+                                  "inputIcon": "#0078d4",
+                                  "inputIconDisabled": "#a19f9d",
+                                  "inputIconHovered": "#005a9e",
+                                  "inputPlaceholderBackgroundChecked": "#deecf9",
+                                  "inputPlaceholderText": "#605e5c",
+                                  "inputText": "#323130",
+                                  "inputTextHovered": "#201f1e",
+                                  "link": "#0078d4",
+                                  "linkHovered": "#004578",
+                                  "listBackground": "#ffffff",
+                                  "listHeaderBackgroundHovered": "#f3f2f1",
+                                  "listHeaderBackgroundPressed": "#edebe9",
+                                  "listItemBackgroundChecked": "#edebe9",
+                                  "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                  "listItemBackgroundHovered": "#f3f2f1",
+                                  "listText": "#323130",
+                                  "listTextColor": "#323130",
+                                  "menuBackground": "#ffffff",
+                                  "menuDivider": "#c8c6c4",
+                                  "menuHeader": "#0078d4",
+                                  "menuIcon": "#0078d4",
+                                  "menuItemBackgroundChecked": "#edebe9",
+                                  "menuItemBackgroundHovered": "#f3f2f1",
+                                  "menuItemBackgroundPressed": "#edebe9",
+                                  "menuItemText": "#323130",
+                                  "menuItemTextHovered": "#201f1e",
+                                  "messageLink": "#005A9E",
+                                  "messageLinkHovered": "#004578",
+                                  "messageText": "#323130",
+                                  "primaryButtonBackground": "#0078d4",
+                                  "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                  "primaryButtonBackgroundHovered": "#106ebe",
+                                  "primaryButtonBackgroundPressed": "#005a9e",
+                                  "primaryButtonBorder": "transparent",
+                                  "primaryButtonText": "#ffffff",
+                                  "primaryButtonTextDisabled": "#d2d0ce",
+                                  "primaryButtonTextHovered": "#ffffff",
+                                  "primaryButtonTextPressed": "#ffffff",
+                                  "severeWarningBackground": "#FED9CC",
+                                  "severeWarningIcon": "#D83B01",
+                                  "smallInputBorder": "#605e5c",
+                                  "successBackground": "#DFF6DD",
+                                  "successIcon": "#107C10",
+                                  "successText": "#107C10",
+                                  "variantBorder": "#edebe9",
+                                  "variantBorderHovered": "#a19f9d",
+                                  "warningBackground": "#FFF4CE",
+                                  "warningHighlight": "#ffb900",
+                                  "warningIcon": "#797775",
+                                  "warningText": "#323130",
+                                },
+                                "spacing": Object {
+                                  "l1": "20px",
+                                  "l2": "32px",
+                                  "m": "16px",
+                                  "s1": "8px",
+                                  "s2": "4px",
+                                },
+                              }
+                            }
+                          >
+                            <label
+                              className="ms-Label ms-Dropdown-label root-71"
+                              id="Dropdown0-label"
+                            >
+                              Key
+                            </label>
+                          </LabelBase>
+                        </StyledLabelBase>
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          aria-labelledby="Dropdown0-label Dropdown0-option"
+                          className="ms-Dropdown dropdown-55"
+                          data-is-focusable={true}
+                          data-ktp-target={true}
+                          id="Dropdown0"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          role="combobox"
+                          tabIndex={0}
+                        >
+                          <span
+                            aria-atomic={true}
+                            aria-invalid={false}
+                            aria-live="polite"
+                            className="ms-Dropdown-title title-97"
+                            id="Dropdown0-option"
+                          >
+                            String
+                          </span>
+                          <span
+                            className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
+                          >
+                            <StyledIconBase
+                              aria-hidden={true}
+                              className="ms-Dropdown-caretDown caretDown-58"
+                              iconName="ChevronDown"
+                            >
+                              <IconBase
+                                aria-hidden={true}
+                                className="ms-Dropdown-caretDown caretDown-58"
+                                iconName="ChevronDown"
+                                styles={[Function]}
+                                theme={
+                                  Object {
+                                    "disableGlobalClassNames": false,
+                                    "effects": Object {
+                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                      "roundedCorner2": "2px",
+                                      "roundedCorner4": "4px",
+                                      "roundedCorner6": "6px",
+                                    },
+                                    "fonts": Object {
+                                      "large": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "18px",
+                                        "fontWeight": 400,
+                                      },
+                                      "medium": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "14px",
+                                        "fontWeight": 400,
+                                      },
+                                      "mediumPlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "16px",
+                                        "fontWeight": 400,
+                                      },
+                                      "mega": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "68px",
+                                        "fontWeight": 600,
+                                      },
+                                      "small": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "12px",
+                                        "fontWeight": 400,
+                                      },
+                                      "smallPlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "12px",
+                                        "fontWeight": 400,
+                                      },
+                                      "superLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "42px",
+                                        "fontWeight": 600,
+                                      },
+                                      "tiny": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "10px",
+                                        "fontWeight": 400,
+                                      },
+                                      "xLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "20px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xLargePlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "24px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xSmall": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "10px",
+                                        "fontWeight": 400,
+                                      },
+                                      "xxLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "28px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xxLargePlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "32px",
+                                        "fontWeight": 600,
+                                      },
+                                    },
+                                    "isInverted": false,
+                                    "palette": Object {
+                                      "accent": "#0078d4",
+                                      "black": "#000000",
+                                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                                      "blue": "#0078d4",
+                                      "blueDark": "#002050",
+                                      "blueLight": "#00bcf2",
+                                      "blueMid": "#00188f",
+                                      "green": "#107c10",
+                                      "greenDark": "#004b1c",
+                                      "greenLight": "#bad80a",
+                                      "magenta": "#b4009e",
+                                      "magentaDark": "#5c005c",
+                                      "magentaLight": "#e3008c",
+                                      "neutralDark": "#201f1e",
+                                      "neutralLight": "#edebe9",
+                                      "neutralLighter": "#f3f2f1",
+                                      "neutralLighterAlt": "#faf9f8",
+                                      "neutralPrimary": "#323130",
+                                      "neutralPrimaryAlt": "#3b3a39",
+                                      "neutralQuaternary": "#d2d0ce",
+                                      "neutralQuaternaryAlt": "#e1dfdd",
+                                      "neutralSecondary": "#605e5c",
+                                      "neutralSecondaryAlt": "#8a8886",
+                                      "neutralTertiary": "#a19f9d",
+                                      "neutralTertiaryAlt": "#c8c6c4",
+                                      "orange": "#d83b01",
+                                      "orangeLight": "#ea4300",
+                                      "orangeLighter": "#ff8c00",
+                                      "purple": "#5c2d91",
+                                      "purpleDark": "#32145a",
+                                      "purpleLight": "#b4a0ff",
+                                      "red": "#e81123",
+                                      "redDark": "#a4262c",
+                                      "teal": "#008272",
+                                      "tealDark": "#004b50",
+                                      "tealLight": "#00b294",
+                                      "themeDark": "#005a9e",
+                                      "themeDarkAlt": "#106ebe",
+                                      "themeDarker": "#004578",
+                                      "themeLight": "#c7e0f4",
+                                      "themeLighter": "#deecf9",
+                                      "themeLighterAlt": "#eff6fc",
+                                      "themePrimary": "#0078d4",
+                                      "themeSecondary": "#2b88d8",
+                                      "themeTertiary": "#71afe5",
+                                      "white": "#ffffff",
+                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                      "yellow": "#ffb900",
+                                      "yellowDark": "#d29200",
+                                      "yellowLight": "#fff100",
+                                    },
+                                    "rtl": undefined,
+                                    "semanticColors": Object {
+                                      "accentButtonBackground": "#0078d4",
+                                      "accentButtonText": "#ffffff",
+                                      "actionLink": "#323130",
+                                      "actionLinkHovered": "#201f1e",
+                                      "blockingBackground": "#FDE7E9",
+                                      "blockingIcon": "#FDE7E9",
+                                      "bodyBackground": "#ffffff",
+                                      "bodyBackgroundChecked": "#edebe9",
+                                      "bodyBackgroundHovered": "#f3f2f1",
+                                      "bodyDivider": "#edebe9",
+                                      "bodyFrameBackground": "#ffffff",
+                                      "bodyFrameDivider": "#edebe9",
+                                      "bodyStandoutBackground": "#faf9f8",
+                                      "bodySubtext": "#605e5c",
+                                      "bodyText": "#323130",
+                                      "bodyTextChecked": "#000000",
+                                      "buttonBackground": "#ffffff",
+                                      "buttonBackgroundChecked": "#c8c6c4",
+                                      "buttonBackgroundCheckedHovered": "#edebe9",
+                                      "buttonBackgroundDisabled": "#f3f2f1",
+                                      "buttonBackgroundHovered": "#f3f2f1",
+                                      "buttonBackgroundPressed": "#edebe9",
+                                      "buttonBorder": "#8a8886",
+                                      "buttonBorderDisabled": "#f3f2f1",
+                                      "buttonText": "#323130",
+                                      "buttonTextChecked": "#201f1e",
+                                      "buttonTextCheckedHovered": "#000000",
+                                      "buttonTextDisabled": "#a19f9d",
+                                      "buttonTextHovered": "#201f1e",
+                                      "buttonTextPressed": "#201f1e",
+                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                      "cardStandoutBackground": "#ffffff",
+                                      "defaultStateBackground": "#faf9f8",
+                                      "disabledBackground": "#f3f2f1",
+                                      "disabledBodySubtext": "#c8c6c4",
+                                      "disabledBodyText": "#a19f9d",
+                                      "disabledBorder": "#c8c6c4",
+                                      "disabledSubtext": "#d2d0ce",
+                                      "disabledText": "#a19f9d",
+                                      "errorBackground": "#FDE7E9",
+                                      "errorIcon": "#A80000",
+                                      "errorText": "#a4262c",
+                                      "focusBorder": "#605e5c",
+                                      "infoBackground": "#f3f2f1",
+                                      "infoIcon": "#605e5c",
+                                      "inputBackground": "#ffffff",
+                                      "inputBackgroundChecked": "#0078d4",
+                                      "inputBackgroundCheckedHovered": "#005a9e",
+                                      "inputBorder": "#605e5c",
+                                      "inputBorderHovered": "#323130",
+                                      "inputFocusBorderAlt": "#0078d4",
+                                      "inputForegroundChecked": "#ffffff",
+                                      "inputIcon": "#0078d4",
+                                      "inputIconDisabled": "#a19f9d",
+                                      "inputIconHovered": "#005a9e",
+                                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                                      "inputPlaceholderText": "#605e5c",
+                                      "inputText": "#323130",
+                                      "inputTextHovered": "#201f1e",
+                                      "link": "#0078d4",
+                                      "linkHovered": "#004578",
+                                      "listBackground": "#ffffff",
+                                      "listHeaderBackgroundHovered": "#f3f2f1",
+                                      "listHeaderBackgroundPressed": "#edebe9",
+                                      "listItemBackgroundChecked": "#edebe9",
+                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                      "listItemBackgroundHovered": "#f3f2f1",
+                                      "listText": "#323130",
+                                      "listTextColor": "#323130",
+                                      "menuBackground": "#ffffff",
+                                      "menuDivider": "#c8c6c4",
+                                      "menuHeader": "#0078d4",
+                                      "menuIcon": "#0078d4",
+                                      "menuItemBackgroundChecked": "#edebe9",
+                                      "menuItemBackgroundHovered": "#f3f2f1",
+                                      "menuItemBackgroundPressed": "#edebe9",
+                                      "menuItemText": "#323130",
+                                      "menuItemTextHovered": "#201f1e",
+                                      "messageLink": "#005A9E",
+                                      "messageLinkHovered": "#004578",
+                                      "messageText": "#323130",
+                                      "primaryButtonBackground": "#0078d4",
+                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                      "primaryButtonBackgroundHovered": "#106ebe",
+                                      "primaryButtonBackgroundPressed": "#005a9e",
+                                      "primaryButtonBorder": "transparent",
+                                      "primaryButtonText": "#ffffff",
+                                      "primaryButtonTextDisabled": "#d2d0ce",
+                                      "primaryButtonTextHovered": "#ffffff",
+                                      "primaryButtonTextPressed": "#ffffff",
+                                      "severeWarningBackground": "#FED9CC",
+                                      "severeWarningIcon": "#D83B01",
+                                      "smallInputBorder": "#605e5c",
+                                      "successBackground": "#DFF6DD",
+                                      "successIcon": "#107C10",
+                                      "successText": "#107C10",
+                                      "variantBorder": "#edebe9",
+                                      "variantBorderHovered": "#a19f9d",
+                                      "warningBackground": "#FFF4CE",
+                                      "warningHighlight": "#ffb900",
+                                      "warningIcon": "#797775",
+                                      "warningText": "#323130",
+                                    },
+                                    "spacing": Object {
+                                      "l1": "20px",
+                                      "l2": "32px",
+                                      "m": "16px",
+                                      "s1": "8px",
+                                      "s2": "4px",
+                                    },
+                                  }
+                                }
+                              >
+                                <i
+                                  aria-hidden={true}
+                                  className="ms-Dropdown-caretDown caretDown-73"
+                                  data-icon-name="ChevronDown"
+                                >
+                                  
+                                </i>
+                              </IconBase>
+                            </StyledIconBase>
+                          </span>
+                        </div>
                       </div>
-                    </ImageBase>
-                  </StyledImageBase>
-                  <Text
-                    className="addNewParamStyle"
-                    key=".0:$.1"
+                    </DropdownInternal>
+                  </DropdownBase>
+                </Dropdown>
+                <StyledTextFieldBase
+                  autoFocus={true}
+                  id="confirmCollectionId"
+                  key=".0:$.1"
+                  label="Value"
+                  onChange={[Function]}
+                >
+                  <TextFieldBase
+                    autoFocus={true}
+                    deferredValidationTime={200}
+                    id="confirmCollectionId"
+                    label="Value"
+                    onChange={[Function]}
+                    resizable={true}
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                    validateOnLoad={true}
                   >
-                    <span
-                      className="addNewParamStyle css-96"
+                    <div
+                      className="ms-TextField root-75"
                     >
-                      Add New Param
-                    </span>
-                  </Text>
-                </div>
-              </Stack>
-            </div>
-          </div>
-          <div
-            className="paneFooter"
+                      <div
+                        className="ms-TextField-wrapper"
+                      >
+                        <StyledLabelBase
+                          htmlFor="confirmCollectionId"
+                          id="TextFieldLabel3"
+                          styles={[Function]}
+                        >
+                          <LabelBase
+                            htmlFor="confirmCollectionId"
+                            id="TextFieldLabel3"
+                            styles={[Function]}
+                            theme={
+                              Object {
+                                "disableGlobalClassNames": false,
+                                "effects": Object {
+                                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "roundedCorner2": "2px",
+                                  "roundedCorner4": "4px",
+                                  "roundedCorner6": "6px",
+                                },
+                                "fonts": Object {
+                                  "large": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "18px",
+                                    "fontWeight": 400,
+                                  },
+                                  "medium": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "14px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mediumPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "16px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mega": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "68px",
+                                    "fontWeight": 600,
+                                  },
+                                  "small": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "smallPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "superLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "42px",
+                                    "fontWeight": 600,
+                                  },
+                                  "tiny": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "20px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "24px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xSmall": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xxLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "28px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xxLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "32px",
+                                    "fontWeight": 600,
+                                  },
+                                },
+                                "isInverted": false,
+                                "palette": Object {
+                                  "accent": "#0078d4",
+                                  "black": "#000000",
+                                  "blackTranslucent40": "rgba(0,0,0,.4)",
+                                  "blue": "#0078d4",
+                                  "blueDark": "#002050",
+                                  "blueLight": "#00bcf2",
+                                  "blueMid": "#00188f",
+                                  "green": "#107c10",
+                                  "greenDark": "#004b1c",
+                                  "greenLight": "#bad80a",
+                                  "magenta": "#b4009e",
+                                  "magentaDark": "#5c005c",
+                                  "magentaLight": "#e3008c",
+                                  "neutralDark": "#201f1e",
+                                  "neutralLight": "#edebe9",
+                                  "neutralLighter": "#f3f2f1",
+                                  "neutralLighterAlt": "#faf9f8",
+                                  "neutralPrimary": "#323130",
+                                  "neutralPrimaryAlt": "#3b3a39",
+                                  "neutralQuaternary": "#d2d0ce",
+                                  "neutralQuaternaryAlt": "#e1dfdd",
+                                  "neutralSecondary": "#605e5c",
+                                  "neutralSecondaryAlt": "#8a8886",
+                                  "neutralTertiary": "#a19f9d",
+                                  "neutralTertiaryAlt": "#c8c6c4",
+                                  "orange": "#d83b01",
+                                  "orangeLight": "#ea4300",
+                                  "orangeLighter": "#ff8c00",
+                                  "purple": "#5c2d91",
+                                  "purpleDark": "#32145a",
+                                  "purpleLight": "#b4a0ff",
+                                  "red": "#e81123",
+                                  "redDark": "#a4262c",
+                                  "teal": "#008272",
+                                  "tealDark": "#004b50",
+                                  "tealLight": "#00b294",
+                                  "themeDark": "#005a9e",
+                                  "themeDarkAlt": "#106ebe",
+                                  "themeDarker": "#004578",
+                                  "themeLight": "#c7e0f4",
+                                  "themeLighter": "#deecf9",
+                                  "themeLighterAlt": "#eff6fc",
+                                  "themePrimary": "#0078d4",
+                                  "themeSecondary": "#2b88d8",
+                                  "themeTertiary": "#71afe5",
+                                  "white": "#ffffff",
+                                  "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                  "yellow": "#ffb900",
+                                  "yellowDark": "#d29200",
+                                  "yellowLight": "#fff100",
+                                },
+                                "rtl": undefined,
+                                "semanticColors": Object {
+                                  "accentButtonBackground": "#0078d4",
+                                  "accentButtonText": "#ffffff",
+                                  "actionLink": "#323130",
+                                  "actionLinkHovered": "#201f1e",
+                                  "blockingBackground": "#FDE7E9",
+                                  "blockingIcon": "#FDE7E9",
+                                  "bodyBackground": "#ffffff",
+                                  "bodyBackgroundChecked": "#edebe9",
+                                  "bodyBackgroundHovered": "#f3f2f1",
+                                  "bodyDivider": "#edebe9",
+                                  "bodyFrameBackground": "#ffffff",
+                                  "bodyFrameDivider": "#edebe9",
+                                  "bodyStandoutBackground": "#faf9f8",
+                                  "bodySubtext": "#605e5c",
+                                  "bodyText": "#323130",
+                                  "bodyTextChecked": "#000000",
+                                  "buttonBackground": "#ffffff",
+                                  "buttonBackgroundChecked": "#c8c6c4",
+                                  "buttonBackgroundCheckedHovered": "#edebe9",
+                                  "buttonBackgroundDisabled": "#f3f2f1",
+                                  "buttonBackgroundHovered": "#f3f2f1",
+                                  "buttonBackgroundPressed": "#edebe9",
+                                  "buttonBorder": "#8a8886",
+                                  "buttonBorderDisabled": "#f3f2f1",
+                                  "buttonText": "#323130",
+                                  "buttonTextChecked": "#201f1e",
+                                  "buttonTextCheckedHovered": "#000000",
+                                  "buttonTextDisabled": "#a19f9d",
+                                  "buttonTextHovered": "#201f1e",
+                                  "buttonTextPressed": "#201f1e",
+                                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardStandoutBackground": "#ffffff",
+                                  "defaultStateBackground": "#faf9f8",
+                                  "disabledBackground": "#f3f2f1",
+                                  "disabledBodySubtext": "#c8c6c4",
+                                  "disabledBodyText": "#a19f9d",
+                                  "disabledBorder": "#c8c6c4",
+                                  "disabledSubtext": "#d2d0ce",
+                                  "disabledText": "#a19f9d",
+                                  "errorBackground": "#FDE7E9",
+                                  "errorIcon": "#A80000",
+                                  "errorText": "#a4262c",
+                                  "focusBorder": "#605e5c",
+                                  "infoBackground": "#f3f2f1",
+                                  "infoIcon": "#605e5c",
+                                  "inputBackground": "#ffffff",
+                                  "inputBackgroundChecked": "#0078d4",
+                                  "inputBackgroundCheckedHovered": "#005a9e",
+                                  "inputBorder": "#605e5c",
+                                  "inputBorderHovered": "#323130",
+                                  "inputFocusBorderAlt": "#0078d4",
+                                  "inputForegroundChecked": "#ffffff",
+                                  "inputIcon": "#0078d4",
+                                  "inputIconDisabled": "#a19f9d",
+                                  "inputIconHovered": "#005a9e",
+                                  "inputPlaceholderBackgroundChecked": "#deecf9",
+                                  "inputPlaceholderText": "#605e5c",
+                                  "inputText": "#323130",
+                                  "inputTextHovered": "#201f1e",
+                                  "link": "#0078d4",
+                                  "linkHovered": "#004578",
+                                  "listBackground": "#ffffff",
+                                  "listHeaderBackgroundHovered": "#f3f2f1",
+                                  "listHeaderBackgroundPressed": "#edebe9",
+                                  "listItemBackgroundChecked": "#edebe9",
+                                  "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                  "listItemBackgroundHovered": "#f3f2f1",
+                                  "listText": "#323130",
+                                  "listTextColor": "#323130",
+                                  "menuBackground": "#ffffff",
+                                  "menuDivider": "#c8c6c4",
+                                  "menuHeader": "#0078d4",
+                                  "menuIcon": "#0078d4",
+                                  "menuItemBackgroundChecked": "#edebe9",
+                                  "menuItemBackgroundHovered": "#f3f2f1",
+                                  "menuItemBackgroundPressed": "#edebe9",
+                                  "menuItemText": "#323130",
+                                  "menuItemTextHovered": "#201f1e",
+                                  "messageLink": "#005A9E",
+                                  "messageLinkHovered": "#004578",
+                                  "messageText": "#323130",
+                                  "primaryButtonBackground": "#0078d4",
+                                  "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                  "primaryButtonBackgroundHovered": "#106ebe",
+                                  "primaryButtonBackgroundPressed": "#005a9e",
+                                  "primaryButtonBorder": "transparent",
+                                  "primaryButtonText": "#ffffff",
+                                  "primaryButtonTextDisabled": "#d2d0ce",
+                                  "primaryButtonTextHovered": "#ffffff",
+                                  "primaryButtonTextPressed": "#ffffff",
+                                  "severeWarningBackground": "#FED9CC",
+                                  "severeWarningIcon": "#D83B01",
+                                  "smallInputBorder": "#605e5c",
+                                  "successBackground": "#DFF6DD",
+                                  "successIcon": "#107C10",
+                                  "successText": "#107C10",
+                                  "variantBorder": "#edebe9",
+                                  "variantBorderHovered": "#a19f9d",
+                                  "warningBackground": "#FFF4CE",
+                                  "warningHighlight": "#ffb900",
+                                  "warningIcon": "#797775",
+                                  "warningText": "#323130",
+                                },
+                                "spacing": Object {
+                                  "l1": "20px",
+                                  "l2": "32px",
+                                  "m": "16px",
+                                  "s1": "8px",
+                                  "s2": "4px",
+                                },
+                              }
+                            }
+                          >
+                            <label
+                              className="ms-Label root-53"
+                              htmlFor="confirmCollectionId"
+                              id="TextFieldLabel3"
+                            >
+                              Value
+                            </label>
+                          </LabelBase>
+                        </StyledLabelBase>
+                        <div
+                          className="ms-TextField-fieldGroup fieldGroup-76"
+                        >
+                          <input
+                            aria-invalid={false}
+                            aria-labelledby="TextFieldLabel3"
+                            autoFocus={true}
+                            className="ms-TextField-field field-77"
+                            id="confirmCollectionId"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            onInput={[Function]}
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </TextFieldBase>
+                </StyledTextFieldBase>
+              </div>
+            </Stack>
+          </InputParameter>
+          <InputParameter
+            dropdownLabel="Key"
+            inputLabel="Param"
+            inputParameterTitle="Enter input parameters (if any)"
+            isAddRemoveVisible={true}
+            key="0"
+            onAddNewParamKeyPress={[Function]}
+            onDeleteParamKeyPress={[Function]}
+            onParamKeyChange={[Function]}
+            onParamValueChange={[Function]}
+            paramValue=""
+            selectedKey="string"
           >
-            <div
-              className="leftpanel-okbut"
-            >
-              <CustomizedPrimaryButton
-                ariaLabel="Submit"
-                className="genericPaneSubmitBtn"
-                onClick={[Function]}
-                style={
+            <StyledLabelBase>
+              <LabelBase
+                styles={[Function]}
+                theme={
                   Object {
-                    "visibility": "visible",
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
                   }
                 }
-                tabIndex={0}
-                text="Execute"
-                title="Submit"
               >
-                <PrimaryButton
-                  ariaLabel="Submit"
-                  className="genericPaneSubmitBtn"
-                  onClick={[Function]}
-                  style={
+                <label
+                  className="ms-Label root-53"
+                >
+                  Enter input parameters (if any)
+                </label>
+              </LabelBase>
+            </StyledLabelBase>
+            <Stack
+              horizontal={true}
+            >
+              <div
+                className="ms-Stack css-54"
+              >
+                <Dropdown
+                  key=".0:$.0"
+                  label="Key"
+                  onChange={[Function]}
+                  options={
+                    Array [
+                      Object {
+                        "key": "string",
+                        "text": "String",
+                      },
+                      Object {
+                        "key": "custom",
+                        "text": "Custom",
+                      },
+                    ]
+                  }
+                  selectedKey="string"
+                  styles={
                     Object {
-                      "visibility": "visible",
+                      "dropdown": Object {
+                        "width": 100,
+                      },
                     }
                   }
-                  tabIndex={0}
+                >
+                  <DropdownBase
+                    label="Key"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "key": "string",
+                          "text": "String",
+                        },
+                        Object {
+                          "key": "custom",
+                          "text": "Custom",
+                        },
+                      ]
+                    }
+                    selectedKey="string"
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                  >
+                    <DropdownInternal
+                      hoisted={
+                        Object {
+                          "rootRef": [Function],
+                          "selectedIndices": Array [
+                            0,
+                          ],
+                          "setSelectedIndices": [Function],
+                        }
+                      }
+                      label="Key"
+                      onChange={[Function]}
+                      options={
+                        Array [
+                          Object {
+                            "key": "string",
+                            "text": "String",
+                          },
+                          Object {
+                            "key": "custom",
+                            "text": "Custom",
+                          },
+                        ]
+                      }
+                      responsiveMode={3}
+                      selectedKey="string"
+                      styles={[Function]}
+                      theme={
+                        Object {
+                          "disableGlobalClassNames": false,
+                          "effects": Object {
+                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                            "roundedCorner2": "2px",
+                            "roundedCorner4": "4px",
+                            "roundedCorner6": "6px",
+                          },
+                          "fonts": Object {
+                            "large": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "18px",
+                              "fontWeight": 400,
+                            },
+                            "medium": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "14px",
+                              "fontWeight": 400,
+                            },
+                            "mediumPlus": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "16px",
+                              "fontWeight": 400,
+                            },
+                            "mega": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "68px",
+                              "fontWeight": 600,
+                            },
+                            "small": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "12px",
+                              "fontWeight": 400,
+                            },
+                            "smallPlus": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "12px",
+                              "fontWeight": 400,
+                            },
+                            "superLarge": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "42px",
+                              "fontWeight": 600,
+                            },
+                            "tiny": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "10px",
+                              "fontWeight": 400,
+                            },
+                            "xLarge": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "20px",
+                              "fontWeight": 600,
+                            },
+                            "xLargePlus": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "24px",
+                              "fontWeight": 600,
+                            },
+                            "xSmall": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "10px",
+                              "fontWeight": 400,
+                            },
+                            "xxLarge": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "28px",
+                              "fontWeight": 600,
+                            },
+                            "xxLargePlus": Object {
+                              "MozOsxFontSmoothing": "grayscale",
+                              "WebkitFontSmoothing": "antialiased",
+                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                              "fontSize": "32px",
+                              "fontWeight": 600,
+                            },
+                          },
+                          "isInverted": false,
+                          "palette": Object {
+                            "accent": "#0078d4",
+                            "black": "#000000",
+                            "blackTranslucent40": "rgba(0,0,0,.4)",
+                            "blue": "#0078d4",
+                            "blueDark": "#002050",
+                            "blueLight": "#00bcf2",
+                            "blueMid": "#00188f",
+                            "green": "#107c10",
+                            "greenDark": "#004b1c",
+                            "greenLight": "#bad80a",
+                            "magenta": "#b4009e",
+                            "magentaDark": "#5c005c",
+                            "magentaLight": "#e3008c",
+                            "neutralDark": "#201f1e",
+                            "neutralLight": "#edebe9",
+                            "neutralLighter": "#f3f2f1",
+                            "neutralLighterAlt": "#faf9f8",
+                            "neutralPrimary": "#323130",
+                            "neutralPrimaryAlt": "#3b3a39",
+                            "neutralQuaternary": "#d2d0ce",
+                            "neutralQuaternaryAlt": "#e1dfdd",
+                            "neutralSecondary": "#605e5c",
+                            "neutralSecondaryAlt": "#8a8886",
+                            "neutralTertiary": "#a19f9d",
+                            "neutralTertiaryAlt": "#c8c6c4",
+                            "orange": "#d83b01",
+                            "orangeLight": "#ea4300",
+                            "orangeLighter": "#ff8c00",
+                            "purple": "#5c2d91",
+                            "purpleDark": "#32145a",
+                            "purpleLight": "#b4a0ff",
+                            "red": "#e81123",
+                            "redDark": "#a4262c",
+                            "teal": "#008272",
+                            "tealDark": "#004b50",
+                            "tealLight": "#00b294",
+                            "themeDark": "#005a9e",
+                            "themeDarkAlt": "#106ebe",
+                            "themeDarker": "#004578",
+                            "themeLight": "#c7e0f4",
+                            "themeLighter": "#deecf9",
+                            "themeLighterAlt": "#eff6fc",
+                            "themePrimary": "#0078d4",
+                            "themeSecondary": "#2b88d8",
+                            "themeTertiary": "#71afe5",
+                            "white": "#ffffff",
+                            "whiteTranslucent40": "rgba(255,255,255,.4)",
+                            "yellow": "#ffb900",
+                            "yellowDark": "#d29200",
+                            "yellowLight": "#fff100",
+                          },
+                          "rtl": undefined,
+                          "semanticColors": Object {
+                            "accentButtonBackground": "#0078d4",
+                            "accentButtonText": "#ffffff",
+                            "actionLink": "#323130",
+                            "actionLinkHovered": "#201f1e",
+                            "blockingBackground": "#FDE7E9",
+                            "blockingIcon": "#FDE7E9",
+                            "bodyBackground": "#ffffff",
+                            "bodyBackgroundChecked": "#edebe9",
+                            "bodyBackgroundHovered": "#f3f2f1",
+                            "bodyDivider": "#edebe9",
+                            "bodyFrameBackground": "#ffffff",
+                            "bodyFrameDivider": "#edebe9",
+                            "bodyStandoutBackground": "#faf9f8",
+                            "bodySubtext": "#605e5c",
+                            "bodyText": "#323130",
+                            "bodyTextChecked": "#000000",
+                            "buttonBackground": "#ffffff",
+                            "buttonBackgroundChecked": "#c8c6c4",
+                            "buttonBackgroundCheckedHovered": "#edebe9",
+                            "buttonBackgroundDisabled": "#f3f2f1",
+                            "buttonBackgroundHovered": "#f3f2f1",
+                            "buttonBackgroundPressed": "#edebe9",
+                            "buttonBorder": "#8a8886",
+                            "buttonBorderDisabled": "#f3f2f1",
+                            "buttonText": "#323130",
+                            "buttonTextChecked": "#201f1e",
+                            "buttonTextCheckedHovered": "#000000",
+                            "buttonTextDisabled": "#a19f9d",
+                            "buttonTextHovered": "#201f1e",
+                            "buttonTextPressed": "#201f1e",
+                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                            "cardStandoutBackground": "#ffffff",
+                            "defaultStateBackground": "#faf9f8",
+                            "disabledBackground": "#f3f2f1",
+                            "disabledBodySubtext": "#c8c6c4",
+                            "disabledBodyText": "#a19f9d",
+                            "disabledBorder": "#c8c6c4",
+                            "disabledSubtext": "#d2d0ce",
+                            "disabledText": "#a19f9d",
+                            "errorBackground": "#FDE7E9",
+                            "errorIcon": "#A80000",
+                            "errorText": "#a4262c",
+                            "focusBorder": "#605e5c",
+                            "infoBackground": "#f3f2f1",
+                            "infoIcon": "#605e5c",
+                            "inputBackground": "#ffffff",
+                            "inputBackgroundChecked": "#0078d4",
+                            "inputBackgroundCheckedHovered": "#005a9e",
+                            "inputBorder": "#605e5c",
+                            "inputBorderHovered": "#323130",
+                            "inputFocusBorderAlt": "#0078d4",
+                            "inputForegroundChecked": "#ffffff",
+                            "inputIcon": "#0078d4",
+                            "inputIconDisabled": "#a19f9d",
+                            "inputIconHovered": "#005a9e",
+                            "inputPlaceholderBackgroundChecked": "#deecf9",
+                            "inputPlaceholderText": "#605e5c",
+                            "inputText": "#323130",
+                            "inputTextHovered": "#201f1e",
+                            "link": "#0078d4",
+                            "linkHovered": "#004578",
+                            "listBackground": "#ffffff",
+                            "listHeaderBackgroundHovered": "#f3f2f1",
+                            "listHeaderBackgroundPressed": "#edebe9",
+                            "listItemBackgroundChecked": "#edebe9",
+                            "listItemBackgroundCheckedHovered": "#e1dfdd",
+                            "listItemBackgroundHovered": "#f3f2f1",
+                            "listText": "#323130",
+                            "listTextColor": "#323130",
+                            "menuBackground": "#ffffff",
+                            "menuDivider": "#c8c6c4",
+                            "menuHeader": "#0078d4",
+                            "menuIcon": "#0078d4",
+                            "menuItemBackgroundChecked": "#edebe9",
+                            "menuItemBackgroundHovered": "#f3f2f1",
+                            "menuItemBackgroundPressed": "#edebe9",
+                            "menuItemText": "#323130",
+                            "menuItemTextHovered": "#201f1e",
+                            "messageLink": "#005A9E",
+                            "messageLinkHovered": "#004578",
+                            "messageText": "#323130",
+                            "primaryButtonBackground": "#0078d4",
+                            "primaryButtonBackgroundDisabled": "#f3f2f1",
+                            "primaryButtonBackgroundHovered": "#106ebe",
+                            "primaryButtonBackgroundPressed": "#005a9e",
+                            "primaryButtonBorder": "transparent",
+                            "primaryButtonText": "#ffffff",
+                            "primaryButtonTextDisabled": "#d2d0ce",
+                            "primaryButtonTextHovered": "#ffffff",
+                            "primaryButtonTextPressed": "#ffffff",
+                            "severeWarningBackground": "#FED9CC",
+                            "severeWarningIcon": "#D83B01",
+                            "smallInputBorder": "#605e5c",
+                            "successBackground": "#DFF6DD",
+                            "successIcon": "#107C10",
+                            "successText": "#107C10",
+                            "variantBorder": "#edebe9",
+                            "variantBorderHovered": "#a19f9d",
+                            "warningBackground": "#FFF4CE",
+                            "warningHighlight": "#ffb900",
+                            "warningIcon": "#797775",
+                            "warningText": "#323130",
+                          },
+                          "spacing": Object {
+                            "l1": "20px",
+                            "l2": "32px",
+                            "m": "16px",
+                            "s1": "8px",
+                            "s2": "4px",
+                          },
+                        }
+                      }
+                    >
+                      <div
+                        className="ms-Dropdown-container"
+                      >
+                        <StyledLabelBase
+                          className="ms-Dropdown-label"
+                          id="Dropdown4-label"
+                          styles={[Function]}
+                        >
+                          <LabelBase
+                            className="ms-Dropdown-label"
+                            id="Dropdown4-label"
+                            styles={[Function]}
+                            theme={
+                              Object {
+                                "disableGlobalClassNames": false,
+                                "effects": Object {
+                                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "roundedCorner2": "2px",
+                                  "roundedCorner4": "4px",
+                                  "roundedCorner6": "6px",
+                                },
+                                "fonts": Object {
+                                  "large": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "18px",
+                                    "fontWeight": 400,
+                                  },
+                                  "medium": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "14px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mediumPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "16px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mega": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "68px",
+                                    "fontWeight": 600,
+                                  },
+                                  "small": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "smallPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "superLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "42px",
+                                    "fontWeight": 600,
+                                  },
+                                  "tiny": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "20px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "24px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xSmall": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xxLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "28px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xxLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "32px",
+                                    "fontWeight": 600,
+                                  },
+                                },
+                                "isInverted": false,
+                                "palette": Object {
+                                  "accent": "#0078d4",
+                                  "black": "#000000",
+                                  "blackTranslucent40": "rgba(0,0,0,.4)",
+                                  "blue": "#0078d4",
+                                  "blueDark": "#002050",
+                                  "blueLight": "#00bcf2",
+                                  "blueMid": "#00188f",
+                                  "green": "#107c10",
+                                  "greenDark": "#004b1c",
+                                  "greenLight": "#bad80a",
+                                  "magenta": "#b4009e",
+                                  "magentaDark": "#5c005c",
+                                  "magentaLight": "#e3008c",
+                                  "neutralDark": "#201f1e",
+                                  "neutralLight": "#edebe9",
+                                  "neutralLighter": "#f3f2f1",
+                                  "neutralLighterAlt": "#faf9f8",
+                                  "neutralPrimary": "#323130",
+                                  "neutralPrimaryAlt": "#3b3a39",
+                                  "neutralQuaternary": "#d2d0ce",
+                                  "neutralQuaternaryAlt": "#e1dfdd",
+                                  "neutralSecondary": "#605e5c",
+                                  "neutralSecondaryAlt": "#8a8886",
+                                  "neutralTertiary": "#a19f9d",
+                                  "neutralTertiaryAlt": "#c8c6c4",
+                                  "orange": "#d83b01",
+                                  "orangeLight": "#ea4300",
+                                  "orangeLighter": "#ff8c00",
+                                  "purple": "#5c2d91",
+                                  "purpleDark": "#32145a",
+                                  "purpleLight": "#b4a0ff",
+                                  "red": "#e81123",
+                                  "redDark": "#a4262c",
+                                  "teal": "#008272",
+                                  "tealDark": "#004b50",
+                                  "tealLight": "#00b294",
+                                  "themeDark": "#005a9e",
+                                  "themeDarkAlt": "#106ebe",
+                                  "themeDarker": "#004578",
+                                  "themeLight": "#c7e0f4",
+                                  "themeLighter": "#deecf9",
+                                  "themeLighterAlt": "#eff6fc",
+                                  "themePrimary": "#0078d4",
+                                  "themeSecondary": "#2b88d8",
+                                  "themeTertiary": "#71afe5",
+                                  "white": "#ffffff",
+                                  "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                  "yellow": "#ffb900",
+                                  "yellowDark": "#d29200",
+                                  "yellowLight": "#fff100",
+                                },
+                                "rtl": undefined,
+                                "semanticColors": Object {
+                                  "accentButtonBackground": "#0078d4",
+                                  "accentButtonText": "#ffffff",
+                                  "actionLink": "#323130",
+                                  "actionLinkHovered": "#201f1e",
+                                  "blockingBackground": "#FDE7E9",
+                                  "blockingIcon": "#FDE7E9",
+                                  "bodyBackground": "#ffffff",
+                                  "bodyBackgroundChecked": "#edebe9",
+                                  "bodyBackgroundHovered": "#f3f2f1",
+                                  "bodyDivider": "#edebe9",
+                                  "bodyFrameBackground": "#ffffff",
+                                  "bodyFrameDivider": "#edebe9",
+                                  "bodyStandoutBackground": "#faf9f8",
+                                  "bodySubtext": "#605e5c",
+                                  "bodyText": "#323130",
+                                  "bodyTextChecked": "#000000",
+                                  "buttonBackground": "#ffffff",
+                                  "buttonBackgroundChecked": "#c8c6c4",
+                                  "buttonBackgroundCheckedHovered": "#edebe9",
+                                  "buttonBackgroundDisabled": "#f3f2f1",
+                                  "buttonBackgroundHovered": "#f3f2f1",
+                                  "buttonBackgroundPressed": "#edebe9",
+                                  "buttonBorder": "#8a8886",
+                                  "buttonBorderDisabled": "#f3f2f1",
+                                  "buttonText": "#323130",
+                                  "buttonTextChecked": "#201f1e",
+                                  "buttonTextCheckedHovered": "#000000",
+                                  "buttonTextDisabled": "#a19f9d",
+                                  "buttonTextHovered": "#201f1e",
+                                  "buttonTextPressed": "#201f1e",
+                                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardStandoutBackground": "#ffffff",
+                                  "defaultStateBackground": "#faf9f8",
+                                  "disabledBackground": "#f3f2f1",
+                                  "disabledBodySubtext": "#c8c6c4",
+                                  "disabledBodyText": "#a19f9d",
+                                  "disabledBorder": "#c8c6c4",
+                                  "disabledSubtext": "#d2d0ce",
+                                  "disabledText": "#a19f9d",
+                                  "errorBackground": "#FDE7E9",
+                                  "errorIcon": "#A80000",
+                                  "errorText": "#a4262c",
+                                  "focusBorder": "#605e5c",
+                                  "infoBackground": "#f3f2f1",
+                                  "infoIcon": "#605e5c",
+                                  "inputBackground": "#ffffff",
+                                  "inputBackgroundChecked": "#0078d4",
+                                  "inputBackgroundCheckedHovered": "#005a9e",
+                                  "inputBorder": "#605e5c",
+                                  "inputBorderHovered": "#323130",
+                                  "inputFocusBorderAlt": "#0078d4",
+                                  "inputForegroundChecked": "#ffffff",
+                                  "inputIcon": "#0078d4",
+                                  "inputIconDisabled": "#a19f9d",
+                                  "inputIconHovered": "#005a9e",
+                                  "inputPlaceholderBackgroundChecked": "#deecf9",
+                                  "inputPlaceholderText": "#605e5c",
+                                  "inputText": "#323130",
+                                  "inputTextHovered": "#201f1e",
+                                  "link": "#0078d4",
+                                  "linkHovered": "#004578",
+                                  "listBackground": "#ffffff",
+                                  "listHeaderBackgroundHovered": "#f3f2f1",
+                                  "listHeaderBackgroundPressed": "#edebe9",
+                                  "listItemBackgroundChecked": "#edebe9",
+                                  "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                  "listItemBackgroundHovered": "#f3f2f1",
+                                  "listText": "#323130",
+                                  "listTextColor": "#323130",
+                                  "menuBackground": "#ffffff",
+                                  "menuDivider": "#c8c6c4",
+                                  "menuHeader": "#0078d4",
+                                  "menuIcon": "#0078d4",
+                                  "menuItemBackgroundChecked": "#edebe9",
+                                  "menuItemBackgroundHovered": "#f3f2f1",
+                                  "menuItemBackgroundPressed": "#edebe9",
+                                  "menuItemText": "#323130",
+                                  "menuItemTextHovered": "#201f1e",
+                                  "messageLink": "#005A9E",
+                                  "messageLinkHovered": "#004578",
+                                  "messageText": "#323130",
+                                  "primaryButtonBackground": "#0078d4",
+                                  "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                  "primaryButtonBackgroundHovered": "#106ebe",
+                                  "primaryButtonBackgroundPressed": "#005a9e",
+                                  "primaryButtonBorder": "transparent",
+                                  "primaryButtonText": "#ffffff",
+                                  "primaryButtonTextDisabled": "#d2d0ce",
+                                  "primaryButtonTextHovered": "#ffffff",
+                                  "primaryButtonTextPressed": "#ffffff",
+                                  "severeWarningBackground": "#FED9CC",
+                                  "severeWarningIcon": "#D83B01",
+                                  "smallInputBorder": "#605e5c",
+                                  "successBackground": "#DFF6DD",
+                                  "successIcon": "#107C10",
+                                  "successText": "#107C10",
+                                  "variantBorder": "#edebe9",
+                                  "variantBorderHovered": "#a19f9d",
+                                  "warningBackground": "#FFF4CE",
+                                  "warningHighlight": "#ffb900",
+                                  "warningIcon": "#797775",
+                                  "warningText": "#323130",
+                                },
+                                "spacing": Object {
+                                  "l1": "20px",
+                                  "l2": "32px",
+                                  "m": "16px",
+                                  "s1": "8px",
+                                  "s2": "4px",
+                                },
+                              }
+                            }
+                          >
+                            <label
+                              className="ms-Label ms-Dropdown-label root-71"
+                              id="Dropdown4-label"
+                            >
+                              Key
+                            </label>
+                          </LabelBase>
+                        </StyledLabelBase>
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          aria-labelledby="Dropdown4-label Dropdown4-option"
+                          className="ms-Dropdown dropdown-55"
+                          data-is-focusable={true}
+                          data-ktp-target={true}
+                          id="Dropdown4"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          role="combobox"
+                          tabIndex={0}
+                        >
+                          <span
+                            aria-atomic={true}
+                            aria-invalid={false}
+                            aria-live="polite"
+                            className="ms-Dropdown-title title-97"
+                            id="Dropdown4-option"
+                          >
+                            String
+                          </span>
+                          <span
+                            className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
+                          >
+                            <StyledIconBase
+                              aria-hidden={true}
+                              className="ms-Dropdown-caretDown caretDown-58"
+                              iconName="ChevronDown"
+                            >
+                              <IconBase
+                                aria-hidden={true}
+                                className="ms-Dropdown-caretDown caretDown-58"
+                                iconName="ChevronDown"
+                                styles={[Function]}
+                                theme={
+                                  Object {
+                                    "disableGlobalClassNames": false,
+                                    "effects": Object {
+                                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                      "roundedCorner2": "2px",
+                                      "roundedCorner4": "4px",
+                                      "roundedCorner6": "6px",
+                                    },
+                                    "fonts": Object {
+                                      "large": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "18px",
+                                        "fontWeight": 400,
+                                      },
+                                      "medium": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "14px",
+                                        "fontWeight": 400,
+                                      },
+                                      "mediumPlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "16px",
+                                        "fontWeight": 400,
+                                      },
+                                      "mega": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "68px",
+                                        "fontWeight": 600,
+                                      },
+                                      "small": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "12px",
+                                        "fontWeight": 400,
+                                      },
+                                      "smallPlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "12px",
+                                        "fontWeight": 400,
+                                      },
+                                      "superLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "42px",
+                                        "fontWeight": 600,
+                                      },
+                                      "tiny": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "10px",
+                                        "fontWeight": 400,
+                                      },
+                                      "xLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "20px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xLargePlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "24px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xSmall": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "10px",
+                                        "fontWeight": 400,
+                                      },
+                                      "xxLarge": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "28px",
+                                        "fontWeight": 600,
+                                      },
+                                      "xxLargePlus": Object {
+                                        "MozOsxFontSmoothing": "grayscale",
+                                        "WebkitFontSmoothing": "antialiased",
+                                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                        "fontSize": "32px",
+                                        "fontWeight": 600,
+                                      },
+                                    },
+                                    "isInverted": false,
+                                    "palette": Object {
+                                      "accent": "#0078d4",
+                                      "black": "#000000",
+                                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                                      "blue": "#0078d4",
+                                      "blueDark": "#002050",
+                                      "blueLight": "#00bcf2",
+                                      "blueMid": "#00188f",
+                                      "green": "#107c10",
+                                      "greenDark": "#004b1c",
+                                      "greenLight": "#bad80a",
+                                      "magenta": "#b4009e",
+                                      "magentaDark": "#5c005c",
+                                      "magentaLight": "#e3008c",
+                                      "neutralDark": "#201f1e",
+                                      "neutralLight": "#edebe9",
+                                      "neutralLighter": "#f3f2f1",
+                                      "neutralLighterAlt": "#faf9f8",
+                                      "neutralPrimary": "#323130",
+                                      "neutralPrimaryAlt": "#3b3a39",
+                                      "neutralQuaternary": "#d2d0ce",
+                                      "neutralQuaternaryAlt": "#e1dfdd",
+                                      "neutralSecondary": "#605e5c",
+                                      "neutralSecondaryAlt": "#8a8886",
+                                      "neutralTertiary": "#a19f9d",
+                                      "neutralTertiaryAlt": "#c8c6c4",
+                                      "orange": "#d83b01",
+                                      "orangeLight": "#ea4300",
+                                      "orangeLighter": "#ff8c00",
+                                      "purple": "#5c2d91",
+                                      "purpleDark": "#32145a",
+                                      "purpleLight": "#b4a0ff",
+                                      "red": "#e81123",
+                                      "redDark": "#a4262c",
+                                      "teal": "#008272",
+                                      "tealDark": "#004b50",
+                                      "tealLight": "#00b294",
+                                      "themeDark": "#005a9e",
+                                      "themeDarkAlt": "#106ebe",
+                                      "themeDarker": "#004578",
+                                      "themeLight": "#c7e0f4",
+                                      "themeLighter": "#deecf9",
+                                      "themeLighterAlt": "#eff6fc",
+                                      "themePrimary": "#0078d4",
+                                      "themeSecondary": "#2b88d8",
+                                      "themeTertiary": "#71afe5",
+                                      "white": "#ffffff",
+                                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                      "yellow": "#ffb900",
+                                      "yellowDark": "#d29200",
+                                      "yellowLight": "#fff100",
+                                    },
+                                    "rtl": undefined,
+                                    "semanticColors": Object {
+                                      "accentButtonBackground": "#0078d4",
+                                      "accentButtonText": "#ffffff",
+                                      "actionLink": "#323130",
+                                      "actionLinkHovered": "#201f1e",
+                                      "blockingBackground": "#FDE7E9",
+                                      "blockingIcon": "#FDE7E9",
+                                      "bodyBackground": "#ffffff",
+                                      "bodyBackgroundChecked": "#edebe9",
+                                      "bodyBackgroundHovered": "#f3f2f1",
+                                      "bodyDivider": "#edebe9",
+                                      "bodyFrameBackground": "#ffffff",
+                                      "bodyFrameDivider": "#edebe9",
+                                      "bodyStandoutBackground": "#faf9f8",
+                                      "bodySubtext": "#605e5c",
+                                      "bodyText": "#323130",
+                                      "bodyTextChecked": "#000000",
+                                      "buttonBackground": "#ffffff",
+                                      "buttonBackgroundChecked": "#c8c6c4",
+                                      "buttonBackgroundCheckedHovered": "#edebe9",
+                                      "buttonBackgroundDisabled": "#f3f2f1",
+                                      "buttonBackgroundHovered": "#f3f2f1",
+                                      "buttonBackgroundPressed": "#edebe9",
+                                      "buttonBorder": "#8a8886",
+                                      "buttonBorderDisabled": "#f3f2f1",
+                                      "buttonText": "#323130",
+                                      "buttonTextChecked": "#201f1e",
+                                      "buttonTextCheckedHovered": "#000000",
+                                      "buttonTextDisabled": "#a19f9d",
+                                      "buttonTextHovered": "#201f1e",
+                                      "buttonTextPressed": "#201f1e",
+                                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                      "cardStandoutBackground": "#ffffff",
+                                      "defaultStateBackground": "#faf9f8",
+                                      "disabledBackground": "#f3f2f1",
+                                      "disabledBodySubtext": "#c8c6c4",
+                                      "disabledBodyText": "#a19f9d",
+                                      "disabledBorder": "#c8c6c4",
+                                      "disabledSubtext": "#d2d0ce",
+                                      "disabledText": "#a19f9d",
+                                      "errorBackground": "#FDE7E9",
+                                      "errorIcon": "#A80000",
+                                      "errorText": "#a4262c",
+                                      "focusBorder": "#605e5c",
+                                      "infoBackground": "#f3f2f1",
+                                      "infoIcon": "#605e5c",
+                                      "inputBackground": "#ffffff",
+                                      "inputBackgroundChecked": "#0078d4",
+                                      "inputBackgroundCheckedHovered": "#005a9e",
+                                      "inputBorder": "#605e5c",
+                                      "inputBorderHovered": "#323130",
+                                      "inputFocusBorderAlt": "#0078d4",
+                                      "inputForegroundChecked": "#ffffff",
+                                      "inputIcon": "#0078d4",
+                                      "inputIconDisabled": "#a19f9d",
+                                      "inputIconHovered": "#005a9e",
+                                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                                      "inputPlaceholderText": "#605e5c",
+                                      "inputText": "#323130",
+                                      "inputTextHovered": "#201f1e",
+                                      "link": "#0078d4",
+                                      "linkHovered": "#004578",
+                                      "listBackground": "#ffffff",
+                                      "listHeaderBackgroundHovered": "#f3f2f1",
+                                      "listHeaderBackgroundPressed": "#edebe9",
+                                      "listItemBackgroundChecked": "#edebe9",
+                                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                      "listItemBackgroundHovered": "#f3f2f1",
+                                      "listText": "#323130",
+                                      "listTextColor": "#323130",
+                                      "menuBackground": "#ffffff",
+                                      "menuDivider": "#c8c6c4",
+                                      "menuHeader": "#0078d4",
+                                      "menuIcon": "#0078d4",
+                                      "menuItemBackgroundChecked": "#edebe9",
+                                      "menuItemBackgroundHovered": "#f3f2f1",
+                                      "menuItemBackgroundPressed": "#edebe9",
+                                      "menuItemText": "#323130",
+                                      "menuItemTextHovered": "#201f1e",
+                                      "messageLink": "#005A9E",
+                                      "messageLinkHovered": "#004578",
+                                      "messageText": "#323130",
+                                      "primaryButtonBackground": "#0078d4",
+                                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                      "primaryButtonBackgroundHovered": "#106ebe",
+                                      "primaryButtonBackgroundPressed": "#005a9e",
+                                      "primaryButtonBorder": "transparent",
+                                      "primaryButtonText": "#ffffff",
+                                      "primaryButtonTextDisabled": "#d2d0ce",
+                                      "primaryButtonTextHovered": "#ffffff",
+                                      "primaryButtonTextPressed": "#ffffff",
+                                      "severeWarningBackground": "#FED9CC",
+                                      "severeWarningIcon": "#D83B01",
+                                      "smallInputBorder": "#605e5c",
+                                      "successBackground": "#DFF6DD",
+                                      "successIcon": "#107C10",
+                                      "successText": "#107C10",
+                                      "variantBorder": "#edebe9",
+                                      "variantBorderHovered": "#a19f9d",
+                                      "warningBackground": "#FFF4CE",
+                                      "warningHighlight": "#ffb900",
+                                      "warningIcon": "#797775",
+                                      "warningText": "#323130",
+                                    },
+                                    "spacing": Object {
+                                      "l1": "20px",
+                                      "l2": "32px",
+                                      "m": "16px",
+                                      "s1": "8px",
+                                      "s2": "4px",
+                                    },
+                                  }
+                                }
+                              >
+                                <i
+                                  aria-hidden={true}
+                                  className="ms-Dropdown-caretDown caretDown-73"
+                                  data-icon-name="ChevronDown"
+                                >
+                                  
+                                </i>
+                              </IconBase>
+                            </StyledIconBase>
+                          </span>
+                        </div>
+                      </div>
+                    </DropdownInternal>
+                  </DropdownBase>
+                </Dropdown>
+                <StyledTextFieldBase
+                  autoFocus={true}
+                  id="confirmCollectionId"
+                  key=".0:$.1"
+                  label="Param"
+                  onChange={[Function]}
+                  value=""
+                >
+                  <TextFieldBase
+                    autoFocus={true}
+                    deferredValidationTime={200}
+                    id="confirmCollectionId"
+                    label="Param"
+                    onChange={[Function]}
+                    resizable={true}
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                    validateOnLoad={true}
+                    value=""
+                  >
+                    <div
+                      className="ms-TextField root-75"
+                    >
+                      <div
+                        className="ms-TextField-wrapper"
+                      >
+                        <StyledLabelBase
+                          htmlFor="confirmCollectionId"
+                          id="TextFieldLabel7"
+                          styles={[Function]}
+                        >
+                          <LabelBase
+                            htmlFor="confirmCollectionId"
+                            id="TextFieldLabel7"
+                            styles={[Function]}
+                            theme={
+                              Object {
+                                "disableGlobalClassNames": false,
+                                "effects": Object {
+                                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "roundedCorner2": "2px",
+                                  "roundedCorner4": "4px",
+                                  "roundedCorner6": "6px",
+                                },
+                                "fonts": Object {
+                                  "large": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "18px",
+                                    "fontWeight": 400,
+                                  },
+                                  "medium": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "14px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mediumPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "16px",
+                                    "fontWeight": 400,
+                                  },
+                                  "mega": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "68px",
+                                    "fontWeight": 600,
+                                  },
+                                  "small": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "smallPlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "12px",
+                                    "fontWeight": 400,
+                                  },
+                                  "superLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "42px",
+                                    "fontWeight": 600,
+                                  },
+                                  "tiny": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "20px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "24px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xSmall": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "10px",
+                                    "fontWeight": 400,
+                                  },
+                                  "xxLarge": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "28px",
+                                    "fontWeight": 600,
+                                  },
+                                  "xxLargePlus": Object {
+                                    "MozOsxFontSmoothing": "grayscale",
+                                    "WebkitFontSmoothing": "antialiased",
+                                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                    "fontSize": "32px",
+                                    "fontWeight": 600,
+                                  },
+                                },
+                                "isInverted": false,
+                                "palette": Object {
+                                  "accent": "#0078d4",
+                                  "black": "#000000",
+                                  "blackTranslucent40": "rgba(0,0,0,.4)",
+                                  "blue": "#0078d4",
+                                  "blueDark": "#002050",
+                                  "blueLight": "#00bcf2",
+                                  "blueMid": "#00188f",
+                                  "green": "#107c10",
+                                  "greenDark": "#004b1c",
+                                  "greenLight": "#bad80a",
+                                  "magenta": "#b4009e",
+                                  "magentaDark": "#5c005c",
+                                  "magentaLight": "#e3008c",
+                                  "neutralDark": "#201f1e",
+                                  "neutralLight": "#edebe9",
+                                  "neutralLighter": "#f3f2f1",
+                                  "neutralLighterAlt": "#faf9f8",
+                                  "neutralPrimary": "#323130",
+                                  "neutralPrimaryAlt": "#3b3a39",
+                                  "neutralQuaternary": "#d2d0ce",
+                                  "neutralQuaternaryAlt": "#e1dfdd",
+                                  "neutralSecondary": "#605e5c",
+                                  "neutralSecondaryAlt": "#8a8886",
+                                  "neutralTertiary": "#a19f9d",
+                                  "neutralTertiaryAlt": "#c8c6c4",
+                                  "orange": "#d83b01",
+                                  "orangeLight": "#ea4300",
+                                  "orangeLighter": "#ff8c00",
+                                  "purple": "#5c2d91",
+                                  "purpleDark": "#32145a",
+                                  "purpleLight": "#b4a0ff",
+                                  "red": "#e81123",
+                                  "redDark": "#a4262c",
+                                  "teal": "#008272",
+                                  "tealDark": "#004b50",
+                                  "tealLight": "#00b294",
+                                  "themeDark": "#005a9e",
+                                  "themeDarkAlt": "#106ebe",
+                                  "themeDarker": "#004578",
+                                  "themeLight": "#c7e0f4",
+                                  "themeLighter": "#deecf9",
+                                  "themeLighterAlt": "#eff6fc",
+                                  "themePrimary": "#0078d4",
+                                  "themeSecondary": "#2b88d8",
+                                  "themeTertiary": "#71afe5",
+                                  "white": "#ffffff",
+                                  "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                  "yellow": "#ffb900",
+                                  "yellowDark": "#d29200",
+                                  "yellowLight": "#fff100",
+                                },
+                                "rtl": undefined,
+                                "semanticColors": Object {
+                                  "accentButtonBackground": "#0078d4",
+                                  "accentButtonText": "#ffffff",
+                                  "actionLink": "#323130",
+                                  "actionLinkHovered": "#201f1e",
+                                  "blockingBackground": "#FDE7E9",
+                                  "blockingIcon": "#FDE7E9",
+                                  "bodyBackground": "#ffffff",
+                                  "bodyBackgroundChecked": "#edebe9",
+                                  "bodyBackgroundHovered": "#f3f2f1",
+                                  "bodyDivider": "#edebe9",
+                                  "bodyFrameBackground": "#ffffff",
+                                  "bodyFrameDivider": "#edebe9",
+                                  "bodyStandoutBackground": "#faf9f8",
+                                  "bodySubtext": "#605e5c",
+                                  "bodyText": "#323130",
+                                  "bodyTextChecked": "#000000",
+                                  "buttonBackground": "#ffffff",
+                                  "buttonBackgroundChecked": "#c8c6c4",
+                                  "buttonBackgroundCheckedHovered": "#edebe9",
+                                  "buttonBackgroundDisabled": "#f3f2f1",
+                                  "buttonBackgroundHovered": "#f3f2f1",
+                                  "buttonBackgroundPressed": "#edebe9",
+                                  "buttonBorder": "#8a8886",
+                                  "buttonBorderDisabled": "#f3f2f1",
+                                  "buttonText": "#323130",
+                                  "buttonTextChecked": "#201f1e",
+                                  "buttonTextCheckedHovered": "#000000",
+                                  "buttonTextDisabled": "#a19f9d",
+                                  "buttonTextHovered": "#201f1e",
+                                  "buttonTextPressed": "#201f1e",
+                                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                  "cardStandoutBackground": "#ffffff",
+                                  "defaultStateBackground": "#faf9f8",
+                                  "disabledBackground": "#f3f2f1",
+                                  "disabledBodySubtext": "#c8c6c4",
+                                  "disabledBodyText": "#a19f9d",
+                                  "disabledBorder": "#c8c6c4",
+                                  "disabledSubtext": "#d2d0ce",
+                                  "disabledText": "#a19f9d",
+                                  "errorBackground": "#FDE7E9",
+                                  "errorIcon": "#A80000",
+                                  "errorText": "#a4262c",
+                                  "focusBorder": "#605e5c",
+                                  "infoBackground": "#f3f2f1",
+                                  "infoIcon": "#605e5c",
+                                  "inputBackground": "#ffffff",
+                                  "inputBackgroundChecked": "#0078d4",
+                                  "inputBackgroundCheckedHovered": "#005a9e",
+                                  "inputBorder": "#605e5c",
+                                  "inputBorderHovered": "#323130",
+                                  "inputFocusBorderAlt": "#0078d4",
+                                  "inputForegroundChecked": "#ffffff",
+                                  "inputIcon": "#0078d4",
+                                  "inputIconDisabled": "#a19f9d",
+                                  "inputIconHovered": "#005a9e",
+                                  "inputPlaceholderBackgroundChecked": "#deecf9",
+                                  "inputPlaceholderText": "#605e5c",
+                                  "inputText": "#323130",
+                                  "inputTextHovered": "#201f1e",
+                                  "link": "#0078d4",
+                                  "linkHovered": "#004578",
+                                  "listBackground": "#ffffff",
+                                  "listHeaderBackgroundHovered": "#f3f2f1",
+                                  "listHeaderBackgroundPressed": "#edebe9",
+                                  "listItemBackgroundChecked": "#edebe9",
+                                  "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                  "listItemBackgroundHovered": "#f3f2f1",
+                                  "listText": "#323130",
+                                  "listTextColor": "#323130",
+                                  "menuBackground": "#ffffff",
+                                  "menuDivider": "#c8c6c4",
+                                  "menuHeader": "#0078d4",
+                                  "menuIcon": "#0078d4",
+                                  "menuItemBackgroundChecked": "#edebe9",
+                                  "menuItemBackgroundHovered": "#f3f2f1",
+                                  "menuItemBackgroundPressed": "#edebe9",
+                                  "menuItemText": "#323130",
+                                  "menuItemTextHovered": "#201f1e",
+                                  "messageLink": "#005A9E",
+                                  "messageLinkHovered": "#004578",
+                                  "messageText": "#323130",
+                                  "primaryButtonBackground": "#0078d4",
+                                  "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                  "primaryButtonBackgroundHovered": "#106ebe",
+                                  "primaryButtonBackgroundPressed": "#005a9e",
+                                  "primaryButtonBorder": "transparent",
+                                  "primaryButtonText": "#ffffff",
+                                  "primaryButtonTextDisabled": "#d2d0ce",
+                                  "primaryButtonTextHovered": "#ffffff",
+                                  "primaryButtonTextPressed": "#ffffff",
+                                  "severeWarningBackground": "#FED9CC",
+                                  "severeWarningIcon": "#D83B01",
+                                  "smallInputBorder": "#605e5c",
+                                  "successBackground": "#DFF6DD",
+                                  "successIcon": "#107C10",
+                                  "successText": "#107C10",
+                                  "variantBorder": "#edebe9",
+                                  "variantBorderHovered": "#a19f9d",
+                                  "warningBackground": "#FFF4CE",
+                                  "warningHighlight": "#ffb900",
+                                  "warningIcon": "#797775",
+                                  "warningText": "#323130",
+                                },
+                                "spacing": Object {
+                                  "l1": "20px",
+                                  "l2": "32px",
+                                  "m": "16px",
+                                  "s1": "8px",
+                                  "s2": "4px",
+                                },
+                              }
+                            }
+                          >
+                            <label
+                              className="ms-Label root-53"
+                              htmlFor="confirmCollectionId"
+                              id="TextFieldLabel7"
+                            >
+                              Param
+                            </label>
+                          </LabelBase>
+                        </StyledLabelBase>
+                        <div
+                          className="ms-TextField-fieldGroup fieldGroup-76"
+                        >
+                          <input
+                            aria-invalid={false}
+                            aria-labelledby="TextFieldLabel7"
+                            autoFocus={true}
+                            className="ms-TextField-field field-77"
+                            id="confirmCollectionId"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            onInput={[Function]}
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </TextFieldBase>
+                </StyledTextFieldBase>
+                <StyledImageBase
+                  alt="Delete param"
+                  className="addRemoveIconLabel"
+                  height={30}
+                  id="deleteparam"
+                  onClick={[Function]}
+                  src=""
+                  width={20}
+                >
+                  <ImageBase
+                    alt="Delete param"
+                    className="addRemoveIconLabel"
+                    height={30}
+                    id="deleteparam"
+                    onClick={[Function]}
+                    src=""
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                    width={20}
+                  >
+                    <div
+                      className="ms-Image addRemoveIconLabel root-86"
+                      style={
+                        Object {
+                          "height": 30,
+                          "width": 20,
+                        }
+                      }
+                    >
+                      <img
+                        alt="Delete param"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
+                        id="deleteparam"
+                        key="fabricImage"
+                        onClick={[Function]}
+                        onError={[Function]}
+                        onLoad={[Function]}
+                        src=""
+                      />
+                    </div>
+                  </ImageBase>
+                </StyledImageBase>
+                <StyledImageBase
+                  alt="Add param"
+                  className="addRemoveIconLabel"
+                  height={30}
+                  id="addparam"
+                  onClick={[Function]}
+                  src=""
+                  width={20}
+                >
+                  <ImageBase
+                    alt="Add param"
+                    className="addRemoveIconLabel"
+                    height={30}
+                    id="addparam"
+                    onClick={[Function]}
+                    src=""
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                    width={20}
+                  >
+                    <div
+                      className="ms-Image addRemoveIconLabel root-86"
+                      style={
+                        Object {
+                          "height": 30,
+                          "width": 20,
+                        }
+                      }
+                    >
+                      <img
+                        alt="Add param"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
+                        id="addparam"
+                        key="fabricImage"
+                        onClick={[Function]}
+                        onError={[Function]}
+                        onLoad={[Function]}
+                        src=""
+                      />
+                    </div>
+                  </ImageBase>
+                </StyledImageBase>
+              </div>
+            </Stack>
+          </InputParameter>
+          <Stack
+            horizontal={true}
+            onClick={[Function]}
+          >
+            <div
+              className="ms-Stack css-54"
+              onClick={[Function]}
+            >
+              <StyledImageBase
+                alt="Add param"
+                height={30}
+                key=".0:$.0"
+                src=""
+                width={20}
+              >
+                <ImageBase
+                  alt="Add param"
+                  height={30}
+                  src=""
+                  styles={[Function]}
+                  theme={
+                    Object {
+                      "disableGlobalClassNames": false,
+                      "effects": Object {
+                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "roundedCorner2": "2px",
+                        "roundedCorner4": "4px",
+                        "roundedCorner6": "6px",
+                      },
+                      "fonts": Object {
+                        "large": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "18px",
+                          "fontWeight": 400,
+                        },
+                        "medium": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "14px",
+                          "fontWeight": 400,
+                        },
+                        "mediumPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "16px",
+                          "fontWeight": 400,
+                        },
+                        "mega": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "68px",
+                          "fontWeight": 600,
+                        },
+                        "small": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "smallPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "superLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "42px",
+                          "fontWeight": 600,
+                        },
+                        "tiny": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "20px",
+                          "fontWeight": 600,
+                        },
+                        "xLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "24px",
+                          "fontWeight": 600,
+                        },
+                        "xSmall": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xxLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "28px",
+                          "fontWeight": 600,
+                        },
+                        "xxLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "32px",
+                          "fontWeight": 600,
+                        },
+                      },
+                      "isInverted": false,
+                      "palette": Object {
+                        "accent": "#0078d4",
+                        "black": "#000000",
+                        "blackTranslucent40": "rgba(0,0,0,.4)",
+                        "blue": "#0078d4",
+                        "blueDark": "#002050",
+                        "blueLight": "#00bcf2",
+                        "blueMid": "#00188f",
+                        "green": "#107c10",
+                        "greenDark": "#004b1c",
+                        "greenLight": "#bad80a",
+                        "magenta": "#b4009e",
+                        "magentaDark": "#5c005c",
+                        "magentaLight": "#e3008c",
+                        "neutralDark": "#201f1e",
+                        "neutralLight": "#edebe9",
+                        "neutralLighter": "#f3f2f1",
+                        "neutralLighterAlt": "#faf9f8",
+                        "neutralPrimary": "#323130",
+                        "neutralPrimaryAlt": "#3b3a39",
+                        "neutralQuaternary": "#d2d0ce",
+                        "neutralQuaternaryAlt": "#e1dfdd",
+                        "neutralSecondary": "#605e5c",
+                        "neutralSecondaryAlt": "#8a8886",
+                        "neutralTertiary": "#a19f9d",
+                        "neutralTertiaryAlt": "#c8c6c4",
+                        "orange": "#d83b01",
+                        "orangeLight": "#ea4300",
+                        "orangeLighter": "#ff8c00",
+                        "purple": "#5c2d91",
+                        "purpleDark": "#32145a",
+                        "purpleLight": "#b4a0ff",
+                        "red": "#e81123",
+                        "redDark": "#a4262c",
+                        "teal": "#008272",
+                        "tealDark": "#004b50",
+                        "tealLight": "#00b294",
+                        "themeDark": "#005a9e",
+                        "themeDarkAlt": "#106ebe",
+                        "themeDarker": "#004578",
+                        "themeLight": "#c7e0f4",
+                        "themeLighter": "#deecf9",
+                        "themeLighterAlt": "#eff6fc",
+                        "themePrimary": "#0078d4",
+                        "themeSecondary": "#2b88d8",
+                        "themeTertiary": "#71afe5",
+                        "white": "#ffffff",
+                        "whiteTranslucent40": "rgba(255,255,255,.4)",
+                        "yellow": "#ffb900",
+                        "yellowDark": "#d29200",
+                        "yellowLight": "#fff100",
+                      },
+                      "rtl": undefined,
+                      "semanticColors": Object {
+                        "accentButtonBackground": "#0078d4",
+                        "accentButtonText": "#ffffff",
+                        "actionLink": "#323130",
+                        "actionLinkHovered": "#201f1e",
+                        "blockingBackground": "#FDE7E9",
+                        "blockingIcon": "#FDE7E9",
+                        "bodyBackground": "#ffffff",
+                        "bodyBackgroundChecked": "#edebe9",
+                        "bodyBackgroundHovered": "#f3f2f1",
+                        "bodyDivider": "#edebe9",
+                        "bodyFrameBackground": "#ffffff",
+                        "bodyFrameDivider": "#edebe9",
+                        "bodyStandoutBackground": "#faf9f8",
+                        "bodySubtext": "#605e5c",
+                        "bodyText": "#323130",
+                        "bodyTextChecked": "#000000",
+                        "buttonBackground": "#ffffff",
+                        "buttonBackgroundChecked": "#c8c6c4",
+                        "buttonBackgroundCheckedHovered": "#edebe9",
+                        "buttonBackgroundDisabled": "#f3f2f1",
+                        "buttonBackgroundHovered": "#f3f2f1",
+                        "buttonBackgroundPressed": "#edebe9",
+                        "buttonBorder": "#8a8886",
+                        "buttonBorderDisabled": "#f3f2f1",
+                        "buttonText": "#323130",
+                        "buttonTextChecked": "#201f1e",
+                        "buttonTextCheckedHovered": "#000000",
+                        "buttonTextDisabled": "#a19f9d",
+                        "buttonTextHovered": "#201f1e",
+                        "buttonTextPressed": "#201f1e",
+                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "cardStandoutBackground": "#ffffff",
+                        "defaultStateBackground": "#faf9f8",
+                        "disabledBackground": "#f3f2f1",
+                        "disabledBodySubtext": "#c8c6c4",
+                        "disabledBodyText": "#a19f9d",
+                        "disabledBorder": "#c8c6c4",
+                        "disabledSubtext": "#d2d0ce",
+                        "disabledText": "#a19f9d",
+                        "errorBackground": "#FDE7E9",
+                        "errorIcon": "#A80000",
+                        "errorText": "#a4262c",
+                        "focusBorder": "#605e5c",
+                        "infoBackground": "#f3f2f1",
+                        "infoIcon": "#605e5c",
+                        "inputBackground": "#ffffff",
+                        "inputBackgroundChecked": "#0078d4",
+                        "inputBackgroundCheckedHovered": "#005a9e",
+                        "inputBorder": "#605e5c",
+                        "inputBorderHovered": "#323130",
+                        "inputFocusBorderAlt": "#0078d4",
+                        "inputForegroundChecked": "#ffffff",
+                        "inputIcon": "#0078d4",
+                        "inputIconDisabled": "#a19f9d",
+                        "inputIconHovered": "#005a9e",
+                        "inputPlaceholderBackgroundChecked": "#deecf9",
+                        "inputPlaceholderText": "#605e5c",
+                        "inputText": "#323130",
+                        "inputTextHovered": "#201f1e",
+                        "link": "#0078d4",
+                        "linkHovered": "#004578",
+                        "listBackground": "#ffffff",
+                        "listHeaderBackgroundHovered": "#f3f2f1",
+                        "listHeaderBackgroundPressed": "#edebe9",
+                        "listItemBackgroundChecked": "#edebe9",
+                        "listItemBackgroundCheckedHovered": "#e1dfdd",
+                        "listItemBackgroundHovered": "#f3f2f1",
+                        "listText": "#323130",
+                        "listTextColor": "#323130",
+                        "menuBackground": "#ffffff",
+                        "menuDivider": "#c8c6c4",
+                        "menuHeader": "#0078d4",
+                        "menuIcon": "#0078d4",
+                        "menuItemBackgroundChecked": "#edebe9",
+                        "menuItemBackgroundHovered": "#f3f2f1",
+                        "menuItemBackgroundPressed": "#edebe9",
+                        "menuItemText": "#323130",
+                        "menuItemTextHovered": "#201f1e",
+                        "messageLink": "#005A9E",
+                        "messageLinkHovered": "#004578",
+                        "messageText": "#323130",
+                        "primaryButtonBackground": "#0078d4",
+                        "primaryButtonBackgroundDisabled": "#f3f2f1",
+                        "primaryButtonBackgroundHovered": "#106ebe",
+                        "primaryButtonBackgroundPressed": "#005a9e",
+                        "primaryButtonBorder": "transparent",
+                        "primaryButtonText": "#ffffff",
+                        "primaryButtonTextDisabled": "#d2d0ce",
+                        "primaryButtonTextHovered": "#ffffff",
+                        "primaryButtonTextPressed": "#ffffff",
+                        "severeWarningBackground": "#FED9CC",
+                        "severeWarningIcon": "#D83B01",
+                        "smallInputBorder": "#605e5c",
+                        "successBackground": "#DFF6DD",
+                        "successIcon": "#107C10",
+                        "successText": "#107C10",
+                        "variantBorder": "#edebe9",
+                        "variantBorderHovered": "#a19f9d",
+                        "warningBackground": "#FFF4CE",
+                        "warningHighlight": "#ffb900",
+                        "warningIcon": "#797775",
+                        "warningText": "#323130",
+                      },
+                      "spacing": Object {
+                        "l1": "20px",
+                        "l2": "32px",
+                        "m": "16px",
+                        "s1": "8px",
+                        "s2": "4px",
+                      },
+                    }
+                  }
+                  width={20}
+                >
+                  <div
+                    className="ms-Image root-86"
+                    style={
+                      Object {
+                        "height": 30,
+                        "width": 20,
+                      }
+                    }
+                  >
+                    <img
+                      alt="Add param"
+                      className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
+                      key="fabricImage"
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      src=""
+                    />
+                  </div>
+                </ImageBase>
+              </StyledImageBase>
+              <Text
+                className="addNewParamStyle"
+                key=".0:$.1"
+              >
+                <span
+                  className="addNewParamStyle css-88"
+                >
+                  Add New Param
+                </span>
+              </Text>
+            </div>
+          </Stack>
+        </div>
+      </div>
+      <PanelFooterComponent
+        buttonLabel="Execute"
+      >
+        <div
+          className="panelFooter"
+        >
+          <CustomizedPrimaryButton
+            ariaLabel="Execute"
+            id="sidePanelOkButton"
+            text="Execute"
+            type="submit"
+          >
+            <PrimaryButton
+              ariaLabel="Execute"
+              id="sidePanelOkButton"
+              text="Execute"
+              theme={
+                Object {
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
+                  },
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
+                  },
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
+                  },
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
+                  },
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
+                  },
+                }
+              }
+              type="submit"
+            >
+              <CustomizedDefaultButton
+                ariaLabel="Execute"
+                id="sidePanelOkButton"
+                onRenderDescription={[Function]}
+                primary={true}
+                text="Execute"
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
+                  }
+                }
+                type="submit"
+              >
+                <DefaultButton
+                  ariaLabel="Execute"
+                  id="sidePanelOkButton"
+                  onRenderDescription={[Function]}
+                  primary={true}
                   text="Execute"
                   theme={
                     Object {
@@ -6737,20 +6139,586 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       },
                     }
                   }
-                  title="Submit"
+                  type="submit"
                 >
-                  <CustomizedDefaultButton
-                    ariaLabel="Submit"
-                    className="genericPaneSubmitBtn"
-                    onClick={[Function]}
+                  <BaseButton
+                    ariaLabel="Execute"
+                    baseClassName="ms-Button"
+                    id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}
-                    style={
+                    split={false}
+                    styles={
                       Object {
-                        "visibility": "visible",
+                        "description": Object {
+                          "display": "block",
+                        },
+                        "flexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "icon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "16px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "iconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "label": Array [
+                          Object {
+                            "display": "block",
+                            "lineHeight": "100%",
+                            "margin": "0 4px",
+                          },
+                          Object {
+                            "fontWeight": 600,
+                          },
+                        ],
+                        "menuIcon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "12px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "menuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "root": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          Object {
+                            "border": "1px solid #8a8886",
+                            "borderRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "padding": "0 16px",
+                            "selectors": Object {
+                              ":active > *": Object {
+                                "left": 0,
+                                "position": "relative",
+                                "top": 0,
+                              },
+                            },
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                          },
+                          Object {
+                            "height": "32px",
+                            "minWidth": "80px",
+                          },
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "border": "1px solid #0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus": Object {
+                                "selectors": Object {
+                                  ":after": Object {
+                                    "border": "none",
+                                    "outlineColor": "#ffffff",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "WindowText",
+                                "borderColor": "WindowText",
+                                "color": "Window",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                        ],
+                        "rootChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootCheckedHovered": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootDisabled": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "borderColor": "#f3f2f1",
+                            "color": "#a19f9d",
+                            "cursor": "default",
+                            "selectors": Object {
+                              ":focus": Object {
+                                "outline": 0,
+                              },
+                              ":hover": Object {
+                                "outline": 0,
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "color": "#d2d0ce",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "borderColor": "GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "rootExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootHovered": Object {
+                          "backgroundColor": "#106ebe",
+                          "border": "1px solid #106ebe",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "borderColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        "rootPressed": Object {
+                          "backgroundColor": "#005a9e",
+                          "border": "1px solid #005a9e",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "borderColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "screenReaderText": Object {
+                          "border": 0,
+                          "height": 1,
+                          "margin": -1,
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "absolute",
+                          "width": 1,
+                        },
+                        "splitButtonContainer": Array [
+                          Object {
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                              },
+                            },
+                          },
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid #ffffff",
+                                "bottom": 3,
+                                "content": "\\"\\"",
+                                "left": 3,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 3,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 3,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "display": "inline-flex",
+                            "selectors": Object {
+                              ".ms-Button--default": Object {
+                                "borderBottomRightRadius": "0",
+                                "borderRight": "none",
+                                "borderTopRightRadius": "0",
+                              },
+                              ".ms-Button--primary": Object {
+                                "border": "none",
+                                "borderBottomRightRadius": "0",
+                                "borderTopRightRadius": "0",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid WindowText",
+                                    "borderRightWidth": "0",
+                                    "color": "WindowText",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                              ".ms-Button--primary + .ms-Button": Object {
+                                "border": "none",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "1px solid WindowText",
+                                    "borderLeftWidth": "0",
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonContainerChecked": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerCheckedHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerDisabled": Object {
+                          "border": "none",
+                          "outline": "none",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "splitButtonContainerFocused": Object {
+                          "outline": "none!important",
+                        },
+                        "splitButtonContainerHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            ".ms-Button.is-disabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonDivider": Array [
+                          Object {
+                            "backgroundColor": "#ffffff",
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                          Object {
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                        ],
+                        "splitButtonDividerDisabled": Object {
+                          "bottom": 8,
+                          "position": "absolute",
+                          "right": 31,
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "GrayText",
+                            },
+                          },
+                          "top": 8,
+                          "width": 1,
+                        },
+                        "splitButtonFlexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "splitButtonMenuButton": Array [
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#106ebe",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "Highlight",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                          },
+                          Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              ".ms-Button-menuIcon": Object {
+                                "color": "WindowText",
+                              },
+                            },
+                            "border": "1px solid #8a8886",
+                            "borderBottomRightRadius": "2px",
+                            "borderLeft": "none",
+                            "borderRadius": 0,
+                            "borderTopRightRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": "auto",
+                            "marginBottom": 0,
+                            "marginLeft": -1,
+                            "marginRight": 0,
+                            "marginTop": 0,
+                            "outline": "transparent",
+                            "padding": 6,
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                            "verticalAlign": "top",
+                            "width": 32,
+                          },
+                        ],
+                        "splitButtonMenuButtonChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuButtonDisabled": Array [
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#f3f2f1",
+                              },
+                            },
+                          },
+                          Object {
+                            "border": "none",
+                            "pointerEvents": "none",
+                            "selectors": Object {
+                              ".ms-Button--primary": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ".ms-Button-menuIcon": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ":hover": Object {
+                                "cursor": "default",
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "border": "1px solid GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonMenuButtonExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuFocused": Object {
+                          "outline": "transparent",
+                          "position": "relative",
+                          "selectors": Object {
+                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                              "border": "1px solid #ffffff",
+                              "bottom": 3,
+                              "content": "\\"\\"",
+                              "left": 3,
+                              "outline": "1px solid #605e5c",
+                              "position": "absolute",
+                              "right": 3,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "border": "none",
+                                  "bottom": -2,
+                                  "left": -2,
+                                  "right": -2,
+                                  "top": -2,
+                                },
+                              },
+                              "top": 3,
+                              "zIndex": 1,
+                            },
+                            "::-moz-focus-inner": Object {
+                              "border": "0",
+                            },
+                          },
+                        },
+                        "splitButtonMenuIcon": Object {
+                          "color": "#ffffff",
+                        },
+                        "splitButtonMenuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "textContainer": Object {
+                          "display": "block",
+                          "flexGrow": 1,
+                        },
                       }
                     }
-                    tabIndex={0}
                     text="Execute"
                     theme={
                       Object {
@@ -7025,1214 +6993,48 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         },
                       }
                     }
-                    title="Submit"
+                    type="submit"
+                    variantClassName="ms-Button--primary"
                   >
-                    <DefaultButton
-                      ariaLabel="Submit"
-                      className="genericPaneSubmitBtn"
+                    <button
+                      aria-label="Execute"
+                      className="ms-Button ms-Button--primary root-89"
+                      data-is-focusable={true}
+                      id="sidePanelOkButton"
                       onClick={[Function]}
-                      onRenderDescription={[Function]}
-                      primary={true}
-                      style={
-                        Object {
-                          "visibility": "visible",
-                        }
-                      }
-                      tabIndex={0}
-                      text="Execute"
-                      theme={
-                        Object {
-                          "disableGlobalClassNames": false,
-                          "effects": Object {
-                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "roundedCorner2": "2px",
-                            "roundedCorner4": "4px",
-                            "roundedCorner6": "6px",
-                          },
-                          "fonts": Object {
-                            "large": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "18px",
-                              "fontWeight": 400,
-                            },
-                            "medium": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "14px",
-                              "fontWeight": 400,
-                            },
-                            "mediumPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "16px",
-                              "fontWeight": 400,
-                            },
-                            "mega": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "68px",
-                              "fontWeight": 600,
-                            },
-                            "small": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "smallPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "superLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "42px",
-                              "fontWeight": 600,
-                            },
-                            "tiny": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "20px",
-                              "fontWeight": 600,
-                            },
-                            "xLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "24px",
-                              "fontWeight": 600,
-                            },
-                            "xSmall": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xxLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "28px",
-                              "fontWeight": 600,
-                            },
-                            "xxLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "32px",
-                              "fontWeight": 600,
-                            },
-                          },
-                          "isInverted": false,
-                          "palette": Object {
-                            "accent": "#0078d4",
-                            "black": "#000000",
-                            "blackTranslucent40": "rgba(0,0,0,.4)",
-                            "blue": "#0078d4",
-                            "blueDark": "#002050",
-                            "blueLight": "#00bcf2",
-                            "blueMid": "#00188f",
-                            "green": "#107c10",
-                            "greenDark": "#004b1c",
-                            "greenLight": "#bad80a",
-                            "magenta": "#b4009e",
-                            "magentaDark": "#5c005c",
-                            "magentaLight": "#e3008c",
-                            "neutralDark": "#201f1e",
-                            "neutralLight": "#edebe9",
-                            "neutralLighter": "#f3f2f1",
-                            "neutralLighterAlt": "#faf9f8",
-                            "neutralPrimary": "#323130",
-                            "neutralPrimaryAlt": "#3b3a39",
-                            "neutralQuaternary": "#d2d0ce",
-                            "neutralQuaternaryAlt": "#e1dfdd",
-                            "neutralSecondary": "#605e5c",
-                            "neutralSecondaryAlt": "#8a8886",
-                            "neutralTertiary": "#a19f9d",
-                            "neutralTertiaryAlt": "#c8c6c4",
-                            "orange": "#d83b01",
-                            "orangeLight": "#ea4300",
-                            "orangeLighter": "#ff8c00",
-                            "purple": "#5c2d91",
-                            "purpleDark": "#32145a",
-                            "purpleLight": "#b4a0ff",
-                            "red": "#e81123",
-                            "redDark": "#a4262c",
-                            "teal": "#008272",
-                            "tealDark": "#004b50",
-                            "tealLight": "#00b294",
-                            "themeDark": "#005a9e",
-                            "themeDarkAlt": "#106ebe",
-                            "themeDarker": "#004578",
-                            "themeLight": "#c7e0f4",
-                            "themeLighter": "#deecf9",
-                            "themeLighterAlt": "#eff6fc",
-                            "themePrimary": "#0078d4",
-                            "themeSecondary": "#2b88d8",
-                            "themeTertiary": "#71afe5",
-                            "white": "#ffffff",
-                            "whiteTranslucent40": "rgba(255,255,255,.4)",
-                            "yellow": "#ffb900",
-                            "yellowDark": "#d29200",
-                            "yellowLight": "#fff100",
-                          },
-                          "rtl": undefined,
-                          "semanticColors": Object {
-                            "accentButtonBackground": "#0078d4",
-                            "accentButtonText": "#ffffff",
-                            "actionLink": "#323130",
-                            "actionLinkHovered": "#201f1e",
-                            "blockingBackground": "#FDE7E9",
-                            "blockingIcon": "#FDE7E9",
-                            "bodyBackground": "#ffffff",
-                            "bodyBackgroundChecked": "#edebe9",
-                            "bodyBackgroundHovered": "#f3f2f1",
-                            "bodyDivider": "#edebe9",
-                            "bodyFrameBackground": "#ffffff",
-                            "bodyFrameDivider": "#edebe9",
-                            "bodyStandoutBackground": "#faf9f8",
-                            "bodySubtext": "#605e5c",
-                            "bodyText": "#323130",
-                            "bodyTextChecked": "#000000",
-                            "buttonBackground": "#ffffff",
-                            "buttonBackgroundChecked": "#c8c6c4",
-                            "buttonBackgroundCheckedHovered": "#edebe9",
-                            "buttonBackgroundDisabled": "#f3f2f1",
-                            "buttonBackgroundHovered": "#f3f2f1",
-                            "buttonBackgroundPressed": "#edebe9",
-                            "buttonBorder": "#8a8886",
-                            "buttonBorderDisabled": "#f3f2f1",
-                            "buttonText": "#323130",
-                            "buttonTextChecked": "#201f1e",
-                            "buttonTextCheckedHovered": "#000000",
-                            "buttonTextDisabled": "#a19f9d",
-                            "buttonTextHovered": "#201f1e",
-                            "buttonTextPressed": "#201f1e",
-                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "cardStandoutBackground": "#ffffff",
-                            "defaultStateBackground": "#faf9f8",
-                            "disabledBackground": "#f3f2f1",
-                            "disabledBodySubtext": "#c8c6c4",
-                            "disabledBodyText": "#a19f9d",
-                            "disabledBorder": "#c8c6c4",
-                            "disabledSubtext": "#d2d0ce",
-                            "disabledText": "#a19f9d",
-                            "errorBackground": "#FDE7E9",
-                            "errorIcon": "#A80000",
-                            "errorText": "#a4262c",
-                            "focusBorder": "#605e5c",
-                            "infoBackground": "#f3f2f1",
-                            "infoIcon": "#605e5c",
-                            "inputBackground": "#ffffff",
-                            "inputBackgroundChecked": "#0078d4",
-                            "inputBackgroundCheckedHovered": "#005a9e",
-                            "inputBorder": "#605e5c",
-                            "inputBorderHovered": "#323130",
-                            "inputFocusBorderAlt": "#0078d4",
-                            "inputForegroundChecked": "#ffffff",
-                            "inputIcon": "#0078d4",
-                            "inputIconDisabled": "#a19f9d",
-                            "inputIconHovered": "#005a9e",
-                            "inputPlaceholderBackgroundChecked": "#deecf9",
-                            "inputPlaceholderText": "#605e5c",
-                            "inputText": "#323130",
-                            "inputTextHovered": "#201f1e",
-                            "link": "#0078d4",
-                            "linkHovered": "#004578",
-                            "listBackground": "#ffffff",
-                            "listHeaderBackgroundHovered": "#f3f2f1",
-                            "listHeaderBackgroundPressed": "#edebe9",
-                            "listItemBackgroundChecked": "#edebe9",
-                            "listItemBackgroundCheckedHovered": "#e1dfdd",
-                            "listItemBackgroundHovered": "#f3f2f1",
-                            "listText": "#323130",
-                            "listTextColor": "#323130",
-                            "menuBackground": "#ffffff",
-                            "menuDivider": "#c8c6c4",
-                            "menuHeader": "#0078d4",
-                            "menuIcon": "#0078d4",
-                            "menuItemBackgroundChecked": "#edebe9",
-                            "menuItemBackgroundHovered": "#f3f2f1",
-                            "menuItemBackgroundPressed": "#edebe9",
-                            "menuItemText": "#323130",
-                            "menuItemTextHovered": "#201f1e",
-                            "messageLink": "#005A9E",
-                            "messageLinkHovered": "#004578",
-                            "messageText": "#323130",
-                            "primaryButtonBackground": "#0078d4",
-                            "primaryButtonBackgroundDisabled": "#f3f2f1",
-                            "primaryButtonBackgroundHovered": "#106ebe",
-                            "primaryButtonBackgroundPressed": "#005a9e",
-                            "primaryButtonBorder": "transparent",
-                            "primaryButtonText": "#ffffff",
-                            "primaryButtonTextDisabled": "#d2d0ce",
-                            "primaryButtonTextHovered": "#ffffff",
-                            "primaryButtonTextPressed": "#ffffff",
-                            "severeWarningBackground": "#FED9CC",
-                            "severeWarningIcon": "#D83B01",
-                            "smallInputBorder": "#605e5c",
-                            "successBackground": "#DFF6DD",
-                            "successIcon": "#107C10",
-                            "successText": "#107C10",
-                            "variantBorder": "#edebe9",
-                            "variantBorderHovered": "#a19f9d",
-                            "warningBackground": "#FFF4CE",
-                            "warningHighlight": "#ffb900",
-                            "warningIcon": "#797775",
-                            "warningText": "#323130",
-                          },
-                          "spacing": Object {
-                            "l1": "20px",
-                            "l2": "32px",
-                            "m": "16px",
-                            "s1": "8px",
-                            "s2": "4px",
-                          },
-                        }
-                      }
-                      title="Submit"
+                      onKeyDown={[Function]}
+                      onKeyPress={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      type="submit"
                     >
-                      <BaseButton
-                        ariaLabel="Submit"
-                        baseClassName="ms-Button"
-                        className="genericPaneSubmitBtn"
-                        onClick={[Function]}
-                        onRenderDescription={[Function]}
-                        primary={true}
-                        split={false}
-                        style={
-                          Object {
-                            "visibility": "visible",
-                          }
-                        }
-                        styles={
-                          Object {
-                            "description": Object {
-                              "display": "block",
-                            },
-                            "flexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "icon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "16px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "iconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "label": Array [
-                              Object {
-                                "display": "block",
-                                "lineHeight": "100%",
-                                "margin": "0 4px",
-                              },
-                              Object {
-                                "fontWeight": 600,
-                              },
-                            ],
-                            "menuIcon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "12px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "menuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "root": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              Object {
-                                "border": "1px solid #8a8886",
-                                "borderRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "padding": "0 16px",
-                                "selectors": Object {
-                                  ":active > *": Object {
-                                    "left": 0,
-                                    "position": "relative",
-                                    "top": 0,
-                                  },
-                                },
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                              },
-                              Object {
-                                "height": "32px",
-                                "minWidth": "80px",
-                              },
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "border": "1px solid #0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus": Object {
-                                    "selectors": Object {
-                                      ":after": Object {
-                                        "border": "none",
-                                        "outlineColor": "#ffffff",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
-                                    "backgroundColor": "WindowText",
-                                    "borderColor": "WindowText",
-                                    "color": "Window",
-                                    "forcedColorAdjust": "none",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootCheckedHovered": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootDisabled": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "borderColor": "#f3f2f1",
-                                "color": "#a19f9d",
-                                "cursor": "default",
-                                "selectors": Object {
-                                  ":focus": Object {
-                                    "outline": 0,
-                                  },
-                                  ":hover": Object {
-                                    "outline": 0,
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "color": "#d2d0ce",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "borderColor": "GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootHovered": Object {
-                              "backgroundColor": "#106ebe",
-                              "border": "1px solid #106ebe",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "Highlight",
-                                  "borderColor": "Highlight",
-                                  "color": "Window",
-                                },
-                              },
-                            },
-                            "rootPressed": Object {
-                              "backgroundColor": "#005a9e",
-                              "border": "1px solid #005a9e",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "WindowText",
-                                  "borderColor": "WindowText",
-                                  "color": "Window",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "screenReaderText": Object {
-                              "border": 0,
-                              "height": 1,
-                              "margin": -1,
-                              "overflow": "hidden",
-                              "padding": 0,
-                              "position": "absolute",
-                              "width": 1,
-                            },
-                            "splitButtonContainer": Array [
-                              Object {
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                },
-                              },
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "display": "inline-flex",
-                                "selectors": Object {
-                                  ".ms-Button--default": Object {
-                                    "borderBottomRightRadius": "0",
-                                    "borderRight": "none",
-                                    "borderTopRightRadius": "0",
-                                  },
-                                  ".ms-Button--primary": Object {
-                                    "border": "none",
-                                    "borderBottomRightRadius": "0",
-                                    "borderTopRightRadius": "0",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "Window",
-                                        "border": "1px solid WindowText",
-                                        "borderRightWidth": "0",
-                                        "color": "WindowText",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button--primary + .ms-Button": Object {
-                                    "border": "none",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "1px solid WindowText",
-                                        "borderLeftWidth": "0",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonContainerChecked": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerCheckedHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerDisabled": Object {
-                              "border": "none",
-                              "outline": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "borderColor": "GrayText",
-                                  "color": "GrayText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "splitButtonContainerFocused": Object {
-                              "outline": "none!important",
-                            },
-                            "splitButtonContainerHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Highlight",
-                                      "color": "Window",
-                                    },
-                                  },
-                                },
-                                ".ms-Button.is-disabled": Object {
-                                  "color": "#a19f9d",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "borderColor": "GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonDivider": Array [
-                              Object {
-                                "backgroundColor": "#ffffff",
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                              Object {
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                            ],
-                            "splitButtonDividerDisabled": Object {
-                              "bottom": 8,
-                              "position": "absolute",
-                              "right": 31,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "GrayText",
-                                },
-                              },
-                              "top": 8,
-                              "width": 1,
-                            },
-                            "splitButtonFlexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "splitButtonMenuButton": Array [
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#106ebe",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "Highlight",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                              },
-                              Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  ".ms-Button-menuIcon": Object {
-                                    "color": "WindowText",
-                                  },
-                                },
-                                "border": "1px solid #8a8886",
-                                "borderBottomRightRadius": "2px",
-                                "borderLeft": "none",
-                                "borderRadius": 0,
-                                "borderTopRightRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "height": "auto",
-                                "marginBottom": 0,
-                                "marginLeft": -1,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "outline": "transparent",
-                                "padding": 6,
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                                "verticalAlign": "top",
-                                "width": 32,
-                              },
-                            ],
-                            "splitButtonMenuButtonChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuButtonDisabled": Array [
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#f3f2f1",
-                                  },
-                                },
-                              },
-                              Object {
-                                "border": "none",
-                                "pointerEvents": "none",
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Window",
-                                        "borderColor": "GrayText",
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button-menuIcon": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ":hover": Object {
-                                    "cursor": "default",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "border": "1px solid GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonMenuButtonExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuFocused": Object {
-                              "outline": "transparent",
-                              "position": "relative",
-                              "selectors": Object {
-                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                  "border": "1px solid #ffffff",
-                                  "bottom": 3,
-                                  "content": "\\"\\"",
-                                  "left": 3,
-                                  "outline": "1px solid #605e5c",
-                                  "position": "absolute",
-                                  "right": 3,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "border": "none",
-                                      "bottom": -2,
-                                      "left": -2,
-                                      "right": -2,
-                                      "top": -2,
-                                    },
-                                  },
-                                  "top": 3,
-                                  "zIndex": 1,
-                                },
-                                "::-moz-focus-inner": Object {
-                                  "border": "0",
-                                },
-                              },
-                            },
-                            "splitButtonMenuIcon": Object {
-                              "color": "#ffffff",
-                            },
-                            "splitButtonMenuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "textContainer": Object {
-                              "display": "block",
-                              "flexGrow": 1,
-                            },
-                          }
-                        }
-                        tabIndex={0}
-                        text="Execute"
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        title="Submit"
-                        variantClassName="ms-Button--primary"
+                      <span
+                        className="ms-Button-flexContainer flexContainer-90"
+                        data-automationid="splitbuttonprimary"
                       >
-                        <button
-                          aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-97"
-                          data-is-focusable={true}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyPress={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseUp={[Function]}
-                          style={
-                            Object {
-                              "visibility": "visible",
-                            }
-                          }
-                          tabIndex={0}
-                          title="Submit"
-                          type="button"
+                        <span
+                          className="ms-Button-textContainer textContainer-91"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-54"
-                            data-automationid="splitbuttonprimary"
+                            className="ms-Button-label label-93"
+                            id="id__8"
+                            key="id__8"
                           >
-                            <span
-                              className="ms-Button-textContainer textContainer-55"
-                            >
-                              <span
-                                className="ms-Button-label label-98"
-                                id="id__11"
-                                key="id__11"
-                              >
-                                Execute
-                              </span>
-                            </span>
+                            Execute
                           </span>
-                        </button>
-                        <FocusRects />
-                      </BaseButton>
-                    </DefaultButton>
-                  </CustomizedDefaultButton>
-                </PrimaryButton>
-              </CustomizedPrimaryButton>
-            </div>
-          </div>
+                        </span>
+                      </span>
+                    </button>
+                    <FocusRects />
+                  </BaseButton>
+                </DefaultButton>
+              </CustomizedDefaultButton>
+            </PrimaryButton>
+          </CustomizedPrimaryButton>
         </div>
-        <div
-          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-          hidden={true}
-        >
-          <img
-            className="dataExplorerLoader"
-            src=""
-          />
-        </div>
-      </div>
-    </div>
-  </GenericRightPaneComponent>
+      </PanelFooterComponent>
+    </form>
+  </RightPaneForm>
 </ExecuteSprocParamsPane>
 `;
diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
index 3ddac360f..8a69edf54 100644
--- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
@@ -17,76 +17,11 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
       addRepoProps={
         Object {
           "container": Explorer {
-            "_closeModalDialog": [Function],
-            "_closeSynapseLinkModalDialog": [Function],
-            "_isAfecFeatureRegistered": [Function],
             "_isInitializingNotebooks": false,
-            "_refreshSparkEnabledStateForAccount": [Function],
             "_resetNotebookWorkspace": [Function],
-            "addCollectionText": [Function],
-            "arcadiaToken": [Function],
-            "canExceedMaximumValue": [Function],
             "canSaveQueries": [Function],
-            "cassandraAddCollectionPane": CassandraAddCollectionPane {
-              "autoPilotUsageCost": [Function],
-              "canConfigureThroughput": [Function],
-              "canExceedMaximumValue": [Function],
-              "canRequestSupport": [Function],
-              "container": [Circular],
-              "costsVisible": [Function],
-              "createTableQuery": [Function],
-              "dedicateTableThroughput": [Function],
-              "firstFieldHasFocus": [Function],
-              "formErrors": [Function],
-              "formErrorsDetails": [Function],
-              "id": "cassandraaddcollectionpane",
-              "isAutoPilotSelected": [Function],
-              "isExecuting": [Function],
-              "isFreeTierAccount": [Function],
-              "isSharedAutoPilotSelected": [Function],
-              "isTemplateReady": [Function],
-              "keyspaceCreateNew": [Function],
-              "keyspaceHasSharedOffer": [Function],
-              "keyspaceId": [Function],
-              "keyspaceIds": [Function],
-              "keyspaceOffers": Map {},
-              "keyspaceThroughput": [Function],
-              "maxThroughputRU": [Function],
-              "minThroughputRU": [Function],
-              "requestUnitsUsageCostDedicated": [Function],
-              "requestUnitsUsageCostShared": [Function],
-              "ruToolTipText": [Function],
-              "selectedAutoPilotThroughput": [Function],
-              "sharedAutoPilotThroughput": [Function],
-              "sharedThroughputRangeText": [Function],
-              "sharedThroughputSpendAck": [Function],
-              "sharedThroughputSpendAckText": [Function],
-              "sharedThroughputSpendAckVisible": [Function],
-              "tableId": [Function],
-              "throughput": [Function],
-              "throughputRangeText": [Function],
-              "throughputSpendAck": [Function],
-              "throughputSpendAckText": [Function],
-              "throughputSpendAckVisible": [Function],
-              "title": [Function],
-              "userTableQuery": [Function],
-              "visible": [Function],
-            },
-            "closeDialog": undefined,
             "closeSidePanel": undefined,
             "collapsedResourceTreeWidth": 36,
-            "collectionCreationDefaults": Object {
-              "storage": "100",
-              "throughput": Object {
-                "fixed": 400,
-                "shared": 400,
-                "unlimited": 400,
-                "unlimitedmax": 1000000,
-                "unlimitedmin": 400,
-              },
-            },
-            "collectionTitle": [Function],
-            "collectionTreeNodeAltText": [Function],
             "commandBarComponentAdapter": CommandBarComponentAdapter {
               "container": [Circular],
               "isNotebookTabActive": [Function],
@@ -94,808 +29,28 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "tabsButtons": Array [],
             },
             "databases": [Function],
-            "deleteCollectionText": [Function],
-            "deleteDatabaseText": [Function],
-            "gitHubClient": GitHubClient {
-              "errorCallback": [Function],
-              "ocktokit": OctokitWithDefaults {
-                "actions": Object {
-                  "addSelectedRepoToOrgSecret": [Function],
-                  "cancelWorkflowRun": [Function],
-                  "createOrUpdateOrgSecret": [Function],
-                  "createOrUpdateRepoSecret": [Function],
-                  "createOrUpdateSecretForRepo": [Function],
-                  "createRegistrationToken": [Function],
-                  "createRegistrationTokenForOrg": [Function],
-                  "createRegistrationTokenForRepo": [Function],
-                  "createRemoveToken": [Function],
-                  "createRemoveTokenForOrg": [Function],
-                  "createRemoveTokenForRepo": [Function],
-                  "deleteArtifact": [Function],
-                  "deleteOrgSecret": [Function],
-                  "deleteRepoSecret": [Function],
-                  "deleteSecretFromRepo": [Function],
-                  "deleteSelfHostedRunnerFromOrg": [Function],
-                  "deleteSelfHostedRunnerFromRepo": [Function],
-                  "deleteWorkflowRunLogs": [Function],
-                  "downloadArtifact": [Function],
-                  "downloadJobLogsForWorkflowRun": [Function],
-                  "downloadWorkflowJobLogs": [Function],
-                  "downloadWorkflowRunLogs": [Function],
-                  "getArtifact": [Function],
-                  "getJobForWorkflowRun": [Function],
-                  "getOrgPublicKey": [Function],
-                  "getOrgSecret": [Function],
-                  "getPublicKey": [Function],
-                  "getRepoPublicKey": [Function],
-                  "getRepoSecret": [Function],
-                  "getSecret": [Function],
-                  "getSelfHostedRunner": [Function],
-                  "getSelfHostedRunnerForOrg": [Function],
-                  "getSelfHostedRunnerForRepo": [Function],
-                  "getWorkflow": [Function],
-                  "getWorkflowJob": [Function],
-                  "getWorkflowRun": [Function],
-                  "getWorkflowRunUsage": [Function],
-                  "getWorkflowUsage": [Function],
-                  "listArtifactsForRepo": [Function],
-                  "listDownloadsForSelfHostedRunnerApplication": [Function],
-                  "listJobsForWorkflowRun": [Function],
-                  "listOrgSecrets": [Function],
-                  "listRepoSecrets": [Function],
-                  "listRepoWorkflowRuns": [Function],
-                  "listRepoWorkflows": [Function],
-                  "listRunnerApplicationsForOrg": [Function],
-                  "listRunnerApplicationsForRepo": [Function],
-                  "listSecretsForRepo": [Function],
-                  "listSelectedReposForOrgSecret": [Function],
-                  "listSelfHostedRunnersForOrg": [Function],
-                  "listSelfHostedRunnersForRepo": [Function],
-                  "listWorkflowJobLogs": [Function],
-                  "listWorkflowRunArtifacts": [Function],
-                  "listWorkflowRunLogs": [Function],
-                  "listWorkflowRuns": [Function],
-                  "listWorkflowRunsForRepo": [Function],
-                  "reRunWorkflow": [Function],
-                  "removeSelectedRepoFromOrgSecret": [Function],
-                  "removeSelfHostedRunner": [Function],
-                  "setSelectedReposForOrgSecret": [Function],
-                },
-                "activity": Object {
-                  "checkRepoIsStarredByAuthenticatedUser": [Function],
-                  "checkStarringRepo": [Function],
-                  "deleteRepoSubscription": [Function],
-                  "deleteThreadSubscription": [Function],
-                  "getFeeds": [Function],
-                  "getRepoSubscription": [Function],
-                  "getThread": [Function],
-                  "getThreadSubscription": [Function],
-                  "getThreadSubscriptionForAuthenticatedUser": [Function],
-                  "listEventsForAuthenticatedUser": [Function],
-                  "listEventsForOrg": [Function],
-                  "listEventsForUser": [Function],
-                  "listFeeds": [Function],
-                  "listNotifications": [Function],
-                  "listNotificationsForAuthenticatedUser": [Function],
-                  "listNotificationsForRepo": [Function],
-                  "listOrgEventsForAuthenticatedUser": [Function],
-                  "listPublicEvents": [Function],
-                  "listPublicEventsForOrg": [Function],
-                  "listPublicEventsForRepoNetwork": [Function],
-                  "listPublicEventsForUser": [Function],
-                  "listPublicOrgEvents": [Function],
-                  "listReceivedEventsForUser": [Function],
-                  "listReceivedPublicEventsForUser": [Function],
-                  "listRepoEvents": [Function],
-                  "listRepoNotificationsForAuthenticatedUser": [Function],
-                  "listReposStarredByAuthenticatedUser": [Function],
-                  "listReposStarredByUser": [Function],
-                  "listReposWatchedByUser": [Function],
-                  "listStargazersForRepo": [Function],
-                  "listWatchedReposForAuthenticatedUser": [Function],
-                  "listWatchersForRepo": [Function],
-                  "markAsRead": [Function],
-                  "markNotificationsAsRead": [Function],
-                  "markNotificationsAsReadForRepo": [Function],
-                  "markRepoNotificationsAsRead": [Function],
-                  "markThreadAsRead": [Function],
-                  "setRepoSubscription": [Function],
-                  "setThreadSubscription": [Function],
-                  "starRepo": [Function],
-                  "starRepoForAuthenticatedUser": [Function],
-                  "unstarRepo": [Function],
-                  "unstarRepoForAuthenticatedUser": [Function],
-                },
-                "apps": Object {
-                  "addRepoToInstallation": [Function],
-                  "checkAccountIsAssociatedWithAny": [Function],
-                  "checkAccountIsAssociatedWithAnyStubbed": [Function],
-                  "checkToken": [Function],
-                  "createContentAttachment": [Function],
-                  "createFromManifest": [Function],
-                  "createInstallationAccessToken": [Function],
-                  "createInstallationToken": [Function],
-                  "deleteAuthorization": [Function],
-                  "deleteInstallation": [Function],
-                  "deleteToken": [Function],
-                  "getAuthenticated": [Function],
-                  "getBySlug": [Function],
-                  "getInstallation": [Function],
-                  "getOrgInstallation": [Function],
-                  "getRepoInstallation": [Function],
-                  "getSubscriptionPlanForAccount": [Function],
-                  "getSubscriptionPlanForAccountStubbed": [Function],
-                  "getUserInstallation": [Function],
-                  "listAccountsForPlan": [Function],
-                  "listAccountsForPlanStubbed": [Function],
-                  "listAccountsUserOrOrgOnPlan": [Function],
-                  "listAccountsUserOrOrgOnPlanStubbed": [Function],
-                  "listInstallationReposForAuthenticatedUser": [Function],
-                  "listInstallations": [Function],
-                  "listInstallationsForAuthenticatedUser": [Function],
-                  "listMarketplacePurchasesForAuthenticatedUser": [Function],
-                  "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-                  "listPlans": [Function],
-                  "listPlansStubbed": [Function],
-                  "listRepos": [Function],
-                  "listReposAccessibleToInstallation": [Function],
-                  "listSubscriptionsForAuthenticatedUser": [Function],
-                  "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-                  "removeRepoFromInstallation": [Function],
-                  "resetToken": [Function],
-                  "revokeInstallationAccessToken": [Function],
-                  "revokeInstallationToken": [Function],
-                  "suspendInstallation": [Function],
-                  "unsuspendInstallation": [Function],
-                },
-                "auth": [Function],
-                "checks": Object {
-                  "create": [Function],
-                  "createSuite": [Function],
-                  "get": [Function],
-                  "getSuite": [Function],
-                  "listAnnotations": [Function],
-                  "listForRef": [Function],
-                  "listForSuite": [Function],
-                  "listSuitesForRef": [Function],
-                  "rerequestSuite": [Function],
-                  "setSuitesPreferences": [Function],
-                  "update": [Function],
-                },
-                "codeScanning": Object {
-                  "getAlert": [Function],
-                  "listAlertsForRepo": [Function],
-                },
-                "codesOfConduct": Object {
-                  "getAllCodesOfConduct": [Function],
-                  "getConductCode": [Function],
-                  "getForRepo": [Function],
-                  "listConductCodes": [Function],
-                },
-                "emojis": Object {
-                  "get": [Function],
-                },
-                "gists": Object {
-                  "checkIsStarred": [Function],
-                  "create": [Function],
-                  "createComment": [Function],
-                  "delete": [Function],
-                  "deleteComment": [Function],
-                  "fork": [Function],
-                  "get": [Function],
-                  "getComment": [Function],
-                  "getRevision": [Function],
-                  "list": [Function],
-                  "listComments": [Function],
-                  "listCommits": [Function],
-                  "listForUser": [Function],
-                  "listForks": [Function],
-                  "listPublic": [Function],
-                  "listPublicForUser": [Function],
-                  "listStarred": [Function],
-                  "star": [Function],
-                  "unstar": [Function],
-                  "update": [Function],
-                  "updateComment": [Function],
-                },
-                "git": Object {
-                  "createBlob": [Function],
-                  "createCommit": [Function],
-                  "createRef": [Function],
-                  "createTag": [Function],
-                  "createTree": [Function],
-                  "deleteRef": [Function],
-                  "getBlob": [Function],
-                  "getCommit": [Function],
-                  "getRef": [Function],
-                  "getTag": [Function],
-                  "getTree": [Function],
-                  "listMatchingRefs": [Function],
-                  "updateRef": [Function],
-                },
-                "gitignore": Object {
-                  "getAllTemplates": [Function],
-                  "getTemplate": [Function],
-                  "listTemplates": [Function],
-                },
-                "graphql": [Function],
-                "hook": [Function],
-                "interactions": Object {
-                  "addOrUpdateRestrictionsForOrg": [Function],
-                  "addOrUpdateRestrictionsForRepo": [Function],
-                  "getRestrictionsForOrg": [Function],
-                  "getRestrictionsForRepo": [Function],
-                  "removeRestrictionsForOrg": [Function],
-                  "removeRestrictionsForRepo": [Function],
-                  "setRestrictionsForOrg": [Function],
-                  "setRestrictionsForRepo": [Function],
-                },
-                "issues": Object {
-                  "addAssignees": [Function],
-                  "addLabels": [Function],
-                  "checkAssignee": [Function],
-                  "checkUserCanBeAssigned": [Function],
-                  "create": [Function],
-                  "createComment": [Function],
-                  "createLabel": [Function],
-                  "createMilestone": [Function],
-                  "deleteComment": [Function],
-                  "deleteLabel": [Function],
-                  "deleteMilestone": [Function],
-                  "get": [Function],
-                  "getComment": [Function],
-                  "getEvent": [Function],
-                  "getLabel": [Function],
-                  "getMilestone": [Function],
-                  "list": [Function],
-                  "listAssignees": [Function],
-                  "listComments": [Function],
-                  "listCommentsForRepo": [Function],
-                  "listEvents": [Function],
-                  "listEventsForRepo": [Function],
-                  "listEventsForTimeline": [Function],
-                  "listForAuthenticatedUser": [Function],
-                  "listForOrg": [Function],
-                  "listForRepo": [Function],
-                  "listLabelsForMilestone": [Function],
-                  "listLabelsForRepo": [Function],
-                  "listLabelsOnIssue": [Function],
-                  "listMilestones": [Function],
-                  "listMilestonesForRepo": [Function],
-                  "lock": [Function],
-                  "removeAllLabels": [Function],
-                  "removeAssignees": [Function],
-                  "removeLabel": [Function],
-                  "removeLabels": [Function],
-                  "replaceAllLabels": [Function],
-                  "replaceLabels": [Function],
-                  "setLabels": [Function],
-                  "unlock": [Function],
-                  "update": [Function],
-                  "updateComment": [Function],
-                  "updateLabel": [Function],
-                  "updateMilestone": [Function],
-                },
-                "licenses": Object {
-                  "get": [Function],
-                  "getAllCommonlyUsed": [Function],
-                  "getForRepo": [Function],
-                  "listCommonlyUsed": [Function],
-                },
-                "log": Object {
-                  "debug": [Function],
-                  "error": [Function],
-                  "info": [Function],
-                  "warn": [Function],
-                },
-                "markdown": Object {
-                  "render": [Function],
-                  "renderRaw": [Function],
-                },
-                "meta": Object {
-                  "get": [Function],
-                },
-                "migrations": Object {
-                  "cancelImport": [Function],
-                  "deleteArchiveForAuthenticatedUser": [Function],
-                  "deleteArchiveForOrg": [Function],
-                  "downloadArchiveForOrg": [Function],
-                  "getArchiveForAuthenticatedUser": [Function],
-                  "getCommitAuthors": [Function],
-                  "getImportProgress": [Function],
-                  "getImportStatus": [Function],
-                  "getLargeFiles": [Function],
-                  "getStatusForAuthenticatedUser": [Function],
-                  "getStatusForOrg": [Function],
-                  "listForAuthenticatedUser": [Function],
-                  "listForOrg": [Function],
-                  "listReposForOrg": [Function],
-                  "listReposForUser": [Function],
-                  "mapCommitAuthor": [Function],
-                  "setLfsPreference": [Function],
-                  "startForAuthenticatedUser": [Function],
-                  "startForOrg": [Function],
-                  "startImport": [Function],
-                  "unlockRepoForAuthenticatedUser": [Function],
-                  "unlockRepoForOrg": [Function],
-                  "updateImport": [Function],
-                },
-                "orgs": Object {
-                  "addOrUpdateMembership": [Function],
-                  "blockUser": [Function],
-                  "checkBlockedUser": [Function],
-                  "checkMembership": [Function],
-                  "checkMembershipForUser": [Function],
-                  "checkPublicMembership": [Function],
-                  "checkPublicMembershipForUser": [Function],
-                  "concealMembership": [Function],
-                  "convertMemberToOutsideCollaborator": [Function],
-                  "createHook": [Function],
-                  "createInvitation": [Function],
-                  "createWebhook": [Function],
-                  "deleteHook": [Function],
-                  "deleteWebhook": [Function],
-                  "get": [Function],
-                  "getHook": [Function],
-                  "getMembership": [Function],
-                  "getMembershipForAuthenticatedUser": [Function],
-                  "getMembershipForUser": [Function],
-                  "getWebhook": [Function],
-                  "list": [Function],
-                  "listAppInstallations": [Function],
-                  "listBlockedUsers": [Function],
-                  "listForAuthenticatedUser": [Function],
-                  "listForUser": [Function],
-                  "listHooks": [Function],
-                  "listInstallations": [Function],
-                  "listInvitationTeams": [Function],
-                  "listMembers": [Function],
-                  "listMemberships": [Function],
-                  "listMembershipsForAuthenticatedUser": [Function],
-                  "listOutsideCollaborators": [Function],
-                  "listPendingInvitations": [Function],
-                  "listPublicMembers": [Function],
-                  "listWebhooks": [Function],
-                  "pingHook": [Function],
-                  "pingWebhook": [Function],
-                  "publicizeMembership": [Function],
-                  "removeMember": [Function],
-                  "removeMembership": [Function],
-                  "removeMembershipForUser": [Function],
-                  "removeOutsideCollaborator": [Function],
-                  "removePublicMembershipForAuthenticatedUser": [Function],
-                  "setMembershipForUser": [Function],
-                  "setPublicMembershipForAuthenticatedUser": [Function],
-                  "unblockUser": [Function],
-                  "update": [Function],
-                  "updateHook": [Function],
-                  "updateMembership": [Function],
-                  "updateMembershipForAuthenticatedUser": [Function],
-                  "updateWebhook": [Function],
-                },
-                "paginate": [Function],
-                "projects": Object {
-                  "addCollaborator": [Function],
-                  "createCard": [Function],
-                  "createColumn": [Function],
-                  "createForAuthenticatedUser": [Function],
-                  "createForOrg": [Function],
-                  "createForRepo": [Function],
-                  "delete": [Function],
-                  "deleteCard": [Function],
-                  "deleteColumn": [Function],
-                  "get": [Function],
-                  "getCard": [Function],
-                  "getColumn": [Function],
-                  "getPermissionForUser": [Function],
-                  "listCards": [Function],
-                  "listCollaborators": [Function],
-                  "listColumns": [Function],
-                  "listForOrg": [Function],
-                  "listForRepo": [Function],
-                  "listForUser": [Function],
-                  "moveCard": [Function],
-                  "moveColumn": [Function],
-                  "removeCollaborator": [Function],
-                  "reviewUserPermissionLevel": [Function],
-                  "update": [Function],
-                  "updateCard": [Function],
-                  "updateColumn": [Function],
-                },
-                "pulls": Object {
-                  "checkIfMerged": [Function],
-                  "create": [Function],
-                  "createComment": [Function],
-                  "createReplyForReviewComment": [Function],
-                  "createReview": [Function],
-                  "createReviewComment": [Function],
-                  "createReviewCommentReply": [Function],
-                  "createReviewRequest": [Function],
-                  "deleteComment": [Function],
-                  "deletePendingReview": [Function],
-                  "deleteReviewComment": [Function],
-                  "deleteReviewRequest": [Function],
-                  "dismissReview": [Function],
-                  "get": [Function],
-                  "getComment": [Function],
-                  "getCommentsForReview": [Function],
-                  "getReview": [Function],
-                  "getReviewComment": [Function],
-                  "list": [Function],
-                  "listComments": [Function],
-                  "listCommentsForRepo": [Function],
-                  "listCommentsForReview": [Function],
-                  "listCommits": [Function],
-                  "listFiles": [Function],
-                  "listRequestedReviewers": [Function],
-                  "listReviewComments": [Function],
-                  "listReviewCommentsForRepo": [Function],
-                  "listReviewRequests": [Function],
-                  "listReviews": [Function],
-                  "merge": [Function],
-                  "removeRequestedReviewers": [Function],
-                  "requestReviewers": [Function],
-                  "submitReview": [Function],
-                  "update": [Function],
-                  "updateBranch": [Function],
-                  "updateComment": [Function],
-                  "updateReview": [Function],
-                  "updateReviewComment": [Function],
-                },
-                "rateLimit": Object {
-                  "get": [Function],
-                },
-                "reactions": Object {
-                  "createForCommitComment": [Function],
-                  "createForIssue": [Function],
-                  "createForIssueComment": [Function],
-                  "createForPullRequestReviewComment": [Function],
-                  "createForTeamDiscussionCommentInOrg": [Function],
-                  "createForTeamDiscussionInOrg": [Function],
-                  "delete": [Function],
-                  "deleteForCommitComment": [Function],
-                  "deleteForIssue": [Function],
-                  "deleteForIssueComment": [Function],
-                  "deleteForPullRequestComment": [Function],
-                  "deleteForTeamDiscussion": [Function],
-                  "deleteForTeamDiscussionComment": [Function],
-                  "deleteLegacy": [Function],
-                  "listForCommitComment": [Function],
-                  "listForIssue": [Function],
-                  "listForIssueComment": [Function],
-                  "listForPullRequestReviewComment": [Function],
-                  "listForTeamDiscussionCommentInOrg": [Function],
-                  "listForTeamDiscussionInOrg": [Function],
-                },
-                "repos": Object {
-                  "acceptInvitation": [Function],
-                  "addAppAccessRestrictions": [Function],
-                  "addCollaborator": [Function],
-                  "addDeployKey": [Function],
-                  "addProtectedBranchAdminEnforcement": [Function],
-                  "addProtectedBranchAppRestrictions": [Function],
-                  "addProtectedBranchRequiredSignatures": [Function],
-                  "addProtectedBranchRequiredStatusChecksContexts": [Function],
-                  "addProtectedBranchTeamRestrictions": [Function],
-                  "addProtectedBranchUserRestrictions": [Function],
-                  "addStatusCheckContexts": [Function],
-                  "addTeamAccessRestrictions": [Function],
-                  "addUserAccessRestrictions": [Function],
-                  "checkCollaborator": [Function],
-                  "checkVulnerabilityAlerts": [Function],
-                  "compareCommits": [Function],
-                  "createCommitComment": [Function],
-                  "createCommitSignatureProtection": [Function],
-                  "createCommitStatus": [Function],
-                  "createDeployKey": [Function],
-                  "createDeployment": [Function],
-                  "createDeploymentStatus": [Function],
-                  "createDispatchEvent": [Function],
-                  "createForAuthenticatedUser": [Function],
-                  "createFork": [Function],
-                  "createHook": [Function],
-                  "createInOrg": [Function],
-                  "createOrUpdateFile": [Function],
-                  "createOrUpdateFileContents": [Function],
-                  "createPagesSite": [Function],
-                  "createRelease": [Function],
-                  "createStatus": [Function],
-                  "createUsingTemplate": [Function],
-                  "createWebhook": [Function],
-                  "declineInvitation": [Function],
-                  "delete": [Function],
-                  "deleteAccessRestrictions": [Function],
-                  "deleteAdminBranchProtection": [Function],
-                  "deleteBranchProtection": [Function],
-                  "deleteCommitComment": [Function],
-                  "deleteCommitSignatureProtection": [Function],
-                  "deleteDeployKey": [Function],
-                  "deleteDeployment": [Function],
-                  "deleteDownload": [Function],
-                  "deleteFile": [Function],
-                  "deleteHook": [Function],
-                  "deleteInvitation": [Function],
-                  "deletePagesSite": [Function],
-                  "deletePullRequestReviewProtection": [Function],
-                  "deleteRelease": [Function],
-                  "deleteReleaseAsset": [Function],
-                  "deleteWebhook": [Function],
-                  "disableAutomatedSecurityFixes": [Function],
-                  "disablePagesSite": [Function],
-                  "disableVulnerabilityAlerts": [Function],
-                  "downloadArchive": [Function],
-                  "enableAutomatedSecurityFixes": [Function],
-                  "enablePagesSite": [Function],
-                  "enableVulnerabilityAlerts": [Function],
-                  "get": [Function],
-                  "getAccessRestrictions": [Function],
-                  "getAdminBranchProtection": [Function],
-                  "getAllStatusCheckContexts": [Function],
-                  "getAllTopics": [Function],
-                  "getAppsWithAccessToProtectedBranch": [Function],
-                  "getArchiveLink": [Function],
-                  "getBranch": [Function],
-                  "getBranchProtection": [Function],
-                  "getClones": [Function],
-                  "getCodeFrequencyStats": [Function],
-                  "getCollaboratorPermissionLevel": [Function],
-                  "getCombinedStatusForRef": [Function],
-                  "getCommit": [Function],
-                  "getCommitActivityStats": [Function],
-                  "getCommitComment": [Function],
-                  "getCommitSignatureProtection": [Function],
-                  "getCommunityProfileMetrics": [Function],
-                  "getContent": [Function],
-                  "getContents": [Function],
-                  "getContributorsStats": [Function],
-                  "getDeployKey": [Function],
-                  "getDeployment": [Function],
-                  "getDeploymentStatus": [Function],
-                  "getDownload": [Function],
-                  "getHook": [Function],
-                  "getLatestPagesBuild": [Function],
-                  "getLatestRelease": [Function],
-                  "getPages": [Function],
-                  "getPagesBuild": [Function],
-                  "getParticipationStats": [Function],
-                  "getProtectedBranchAdminEnforcement": [Function],
-                  "getProtectedBranchPullRequestReviewEnforcement": [Function],
-                  "getProtectedBranchRequiredSignatures": [Function],
-                  "getProtectedBranchRequiredStatusChecks": [Function],
-                  "getProtectedBranchRestrictions": [Function],
-                  "getPullRequestReviewProtection": [Function],
-                  "getPunchCardStats": [Function],
-                  "getReadme": [Function],
-                  "getRelease": [Function],
-                  "getReleaseAsset": [Function],
-                  "getReleaseByTag": [Function],
-                  "getStatusChecksProtection": [Function],
-                  "getTeamsWithAccessToProtectedBranch": [Function],
-                  "getTopPaths": [Function],
-                  "getTopReferrers": [Function],
-                  "getUsersWithAccessToProtectedBranch": [Function],
-                  "getViews": [Function],
-                  "getWebhook": [Function],
-                  "list": [Function],
-                  "listAssetsForRelease": [Function],
-                  "listBranches": [Function],
-                  "listBranchesForHeadCommit": [Function],
-                  "listCollaborators": [Function],
-                  "listCommentsForCommit": [Function],
-                  "listCommitComments": [Function],
-                  "listCommitCommentsForRepo": [Function],
-                  "listCommitStatusesForRef": [Function],
-                  "listCommits": [Function],
-                  "listContributors": [Function],
-                  "listDeployKeys": [Function],
-                  "listDeploymentStatuses": [Function],
-                  "listDeployments": [Function],
-                  "listDownloads": [Function],
-                  "listForAuthenticatedUser": [Function],
-                  "listForOrg": [Function],
-                  "listForUser": [Function],
-                  "listForks": [Function],
-                  "listHooks": [Function],
-                  "listInvitations": [Function],
-                  "listInvitationsForAuthenticatedUser": [Function],
-                  "listLanguages": [Function],
-                  "listPagesBuilds": [Function],
-                  "listProtectedBranchRequiredStatusChecksContexts": [Function],
-                  "listPublic": [Function],
-                  "listPullRequestsAssociatedWithCommit": [Function],
-                  "listReleaseAssets": [Function],
-                  "listReleases": [Function],
-                  "listStatusesForRef": [Function],
-                  "listTags": [Function],
-                  "listTeams": [Function],
-                  "listTopics": [Function],
-                  "listWebhooks": [Function],
-                  "merge": [Function],
-                  "pingHook": [Function],
-                  "pingWebhook": [Function],
-                  "removeAppAccessRestrictions": [Function],
-                  "removeBranchProtection": [Function],
-                  "removeCollaborator": [Function],
-                  "removeDeployKey": [Function],
-                  "removeProtectedBranchAdminEnforcement": [Function],
-                  "removeProtectedBranchAppRestrictions": [Function],
-                  "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-                  "removeProtectedBranchRequiredSignatures": [Function],
-                  "removeProtectedBranchRequiredStatusChecks": [Function],
-                  "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-                  "removeProtectedBranchRestrictions": [Function],
-                  "removeProtectedBranchTeamRestrictions": [Function],
-                  "removeProtectedBranchUserRestrictions": [Function],
-                  "removeStatusCheckContexts": [Function],
-                  "removeStatusCheckProtection": [Function],
-                  "removeTeamAccessRestrictions": [Function],
-                  "removeUserAccessRestrictions": [Function],
-                  "replaceAllTopics": [Function],
-                  "replaceProtectedBranchAppRestrictions": [Function],
-                  "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-                  "replaceProtectedBranchTeamRestrictions": [Function],
-                  "replaceProtectedBranchUserRestrictions": [Function],
-                  "replaceTopics": [Function],
-                  "requestPageBuild": [Function],
-                  "requestPagesBuild": [Function],
-                  "retrieveCommunityProfileMetrics": [Function],
-                  "setAdminBranchProtection": [Function],
-                  "setAppAccessRestrictions": [Function],
-                  "setStatusCheckContexts": [Function],
-                  "setTeamAccessRestrictions": [Function],
-                  "setUserAccessRestrictions": [Function],
-                  "testPushHook": [Function],
-                  "testPushWebhook": [Function],
-                  "transfer": [Function],
-                  "update": [Function],
-                  "updateBranchProtection": [Function],
-                  "updateCommitComment": [Function],
-                  "updateHook": [Function],
-                  "updateInformationAboutPagesSite": [Function],
-                  "updateInvitation": [Function],
-                  "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-                  "updateProtectedBranchRequiredStatusChecks": [Function],
-                  "updatePullRequestReviewProtection": [Function],
-                  "updateRelease": [Function],
-                  "updateReleaseAsset": [Function],
-                  "updateStatusCheckPotection": [Function],
-                  "updateWebhook": [Function],
-                  "uploadReleaseAsset": [Function],
-                },
-                "request": [Function],
-                "search": Object {
-                  "code": [Function],
-                  "commits": [Function],
-                  "issuesAndPullRequests": [Function],
-                  "labels": [Function],
-                  "repos": [Function],
-                  "topics": [Function],
-                  "users": [Function],
-                },
-                "teams": Object {
-                  "addOrUpdateMembershipForUserInOrg": [Function],
-                  "addOrUpdateMembershipInOrg": [Function],
-                  "addOrUpdateProjectInOrg": [Function],
-                  "addOrUpdateProjectPermissionsInOrg": [Function],
-                  "addOrUpdateRepoInOrg": [Function],
-                  "addOrUpdateRepoPermissionsInOrg": [Function],
-                  "checkManagesRepoInOrg": [Function],
-                  "checkPermissionsForProjectInOrg": [Function],
-                  "checkPermissionsForRepoInOrg": [Function],
-                  "create": [Function],
-                  "createDiscussionCommentInOrg": [Function],
-                  "createDiscussionInOrg": [Function],
-                  "deleteDiscussionCommentInOrg": [Function],
-                  "deleteDiscussionInOrg": [Function],
-                  "deleteInOrg": [Function],
-                  "getByName": [Function],
-                  "getDiscussionCommentInOrg": [Function],
-                  "getDiscussionInOrg": [Function],
-                  "getMembershipForUserInOrg": [Function],
-                  "getMembershipInOrg": [Function],
-                  "list": [Function],
-                  "listChildInOrg": [Function],
-                  "listDiscussionCommentsInOrg": [Function],
-                  "listDiscussionsInOrg": [Function],
-                  "listForAuthenticatedUser": [Function],
-                  "listMembersInOrg": [Function],
-                  "listPendingInvitationsInOrg": [Function],
-                  "listProjectsInOrg": [Function],
-                  "listReposInOrg": [Function],
-                  "removeMembershipForUserInOrg": [Function],
-                  "removeMembershipInOrg": [Function],
-                  "removeProjectInOrg": [Function],
-                  "removeRepoInOrg": [Function],
-                  "reviewProjectInOrg": [Function],
-                  "updateDiscussionCommentInOrg": [Function],
-                  "updateDiscussionInOrg": [Function],
-                  "updateInOrg": [Function],
-                },
-                "users": Object {
-                  "addEmailForAuthenticated": [Function],
-                  "addEmails": [Function],
-                  "block": [Function],
-                  "checkBlocked": [Function],
-                  "checkFollowing": [Function],
-                  "checkFollowingForUser": [Function],
-                  "checkPersonIsFollowedByAuthenticated": [Function],
-                  "createGpgKey": [Function],
-                  "createGpgKeyForAuthenticated": [Function],
-                  "createPublicKey": [Function],
-                  "createPublicSshKeyForAuthenticated": [Function],
-                  "deleteEmailForAuthenticated": [Function],
-                  "deleteEmails": [Function],
-                  "deleteGpgKey": [Function],
-                  "deleteGpgKeyForAuthenticated": [Function],
-                  "deletePublicKey": [Function],
-                  "deletePublicSshKeyForAuthenticated": [Function],
-                  "follow": [Function],
-                  "getAuthenticated": [Function],
-                  "getByUsername": [Function],
-                  "getContextForUser": [Function],
-                  "getGpgKey": [Function],
-                  "getGpgKeyForAuthenticated": [Function],
-                  "getPublicKey": [Function],
-                  "getPublicSshKeyForAuthenticated": [Function],
-                  "list": [Function],
-                  "listBlocked": [Function],
-                  "listBlockedByAuthenticated": [Function],
-                  "listEmails": [Function],
-                  "listEmailsForAuthenticated": [Function],
-                  "listFollowedByAuthenticated": [Function],
-                  "listFollowersForAuthenticatedUser": [Function],
-                  "listFollowersForUser": [Function],
-                  "listFollowingForAuthenticatedUser": [Function],
-                  "listFollowingForUser": [Function],
-                  "listGpgKeys": [Function],
-                  "listGpgKeysForAuthenticated": [Function],
-                  "listGpgKeysForUser": [Function],
-                  "listPublicEmails": [Function],
-                  "listPublicEmailsForAuthenticated": [Function],
-                  "listPublicKeys": [Function],
-                  "listPublicKeysForUser": [Function],
-                  "listPublicSshKeysForAuthenticated": [Function],
-                  "setPrimaryEmailVisibilityForAuthenticated": [Function],
-                  "togglePrimaryEmailVisibility": [Function],
-                  "unblock": [Function],
-                  "unfollow": [Function],
-                  "updateAuthenticated": [Function],
-                },
-              },
-            },
-            "hasStorageAnalyticsAfecFeature": [Function],
             "isAccountReady": [Function],
-            "isAutoscaleDefaultEnabled": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isHostedDataExplorerEnabled": [Function],
-            "isMongoIndexingEnabled": [Function],
             "isNotebookEnabled": [Function],
             "isNotebooksEnabledForAccount": [Function],
-            "isPublishNotebookPaneEnabled": [Function],
             "isResourceTokenCollectionNodeSelected": [Function],
             "isSchemaEnabled": [Function],
             "isServerlessEnabled": [Function],
-            "isSparkEnabled": [Function],
-            "isSparkEnabledForAccount": [Function],
+            "isShellEnabled": [Function],
             "isSynapseLinkUpdating": [Function],
             "isTabsContentExpanded": [Function],
-            "junoClient": JunoClient {
-              "cachedPinnedRepos": [Function],
-            },
             "memoryUsageInfo": [Function],
             "notebookBasePath": [Function],
             "notebookServerInfo": [Function],
-            "onGitHubClientError": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "openDialog": undefined,
             "openSidePanel": undefined,
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],
             },
             "refreshNotebookList": [Function],
-            "refreshTreeTitle": [Function],
             "resourceTokenCollection": [Function],
             "resourceTokenCollectionId": [Function],
             "resourceTokenDatabaseId": [Function],
diff --git a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
index 5cf9f37de..98c8de469 100644
--- a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
+++ b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
@@ -8,10 +8,7 @@ import { userContext } from "../../../UserContext";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 interface LoadQueryPaneProps {
   explorer: Explorer;
@@ -24,7 +21,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 }: LoadQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [selectedFileName, setSelectedFileName] = useState<string>("");
   const [selectedFiles, setSelectedFiles] = useState<FileList>();
 
@@ -35,19 +31,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
     className: "fileIcon",
   };
 
-  const title = "Load Query";
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole: () => explorer.expandConsole(),
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "loadQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: "Load",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
   const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { files } = e.target;
     setSelectedFiles(files);
@@ -56,10 +39,8 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    setFormErrorsDetails("");
     if (!selectedFiles || selectedFiles.length === 0) {
       setFormError("No file specified");
-      setFormErrorsDetails("No file specified. Please input a file.");
       logConsoleError("Could not load query -- No file specified. Please input a file.");
       return;
     }
@@ -75,7 +56,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
     } catch (error) {
       setLoadingFalse();
       setFormError("Failed to load query");
-      setFormErrorsDetails(`Failed to load query: ${error}`);
       logConsoleError(`Failed to load query from file ${file.name}: ${error}`);
     }
   };
@@ -100,14 +80,20 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
 
     reader.onerror = (): void => {
       setFormError("Failed to load query");
-      setFormErrorsDetails(`Failed to load query`);
       logConsoleError(`Failed to load query from file ${file.name}`);
     };
     return reader.readAsText(file);
   };
+  const props: RightPaneFormProps = {
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: "Load",
+    onSubmit: () => submit(),
+    expandConsole: () => explorer.expandConsole(),
+  };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Stack horizontal>
@@ -132,6 +118,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap b/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
index 641b3ef6f..341dbde29 100644
--- a/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
+++ b/src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Load Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
-  id="loadQueryPane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Load"
-  title="Load Query"
 >
   <div
     className="panelFormWrapper"
@@ -58,5 +54,5 @@ exports[`Load Query Pane should render Default properly 1`] = `
       </Stack>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;
diff --git a/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx b/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx
index f58265933..830c82910 100644
--- a/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx
+++ b/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx
@@ -1,4 +1,4 @@
-import { shallow, ShallowWrapper } from "enzyme";
+import { mount, shallow, ShallowWrapper } from "enzyme";
 import React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
@@ -36,7 +36,7 @@ describe("New Vertex Panel", () => {
   it("should call form submit method", () => {
     const onSubmitSpy = jest.fn();
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}
@@ -61,7 +61,7 @@ describe("New Vertex Panel", () => {
 
     const result = onSubmitSpy(fakeNewVertexData, onErrorSpy, onSuccessSpy);
 
-    const newWrapper = shallow(
+    const newWrapper = mount(
       <NewVertexPanel
         explorer={fakeExplorer}
         partitionKeyPropertyProp={undefined}
diff --git a/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx b/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx
index cff15ed09..2ebe1f59b 100644
--- a/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx
+++ b/src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx
@@ -3,9 +3,7 @@ import React, { FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
 import { NewVertexComponent } from "../../Graph/NewVertexComponent/NewVertexComponent";
-import { PanelFooterComponent } from "../PanelFooterComponent";
-import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "../PanelLoadingScreen";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface INewVertexPanelProps {
   explorer: Explorer;
   partitionKeyPropertyProp: string;
@@ -21,14 +19,10 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 }: INewVertexPanelProps): JSX.Element => {
   let newVertexDataValue: ViewModels.NewVertexData;
   const [errorMessage, setErrorMessage] = useState<string>("");
-  const [showErrorDetails, setShowErrorDetails] = useState<boolean>(false);
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-  const buttonLabel = "OK";
 
-  const submit = (event: React.MouseEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const submit = () => {
     setErrorMessage(undefined);
-    setShowErrorDetails(false);
     if (onSubmit !== undefined) {
       setLoadingTrue();
       onSubmit(newVertexDataValue, onError, onSuccess);
@@ -37,7 +31,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
 
   const onError = (errorMsg: string) => {
     setErrorMessage(errorMsg);
-    setShowErrorDetails(true);
     setLoadingFalse();
   };
 
@@ -49,17 +42,16 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
   const onChange = (newVertexData: ViewModels.NewVertexData) => {
     newVertexDataValue = newVertexData;
   };
+  const props: RightPaneFormProps = {
+    formError: errorMessage,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
 
   return (
-    <form className="panelFormWrapper" onSubmit={(event: React.MouseEvent<HTMLFormElement>) => submit(event)}>
-      {errorMessage && (
-        <PanelInfoErrorComponent
-          message={errorMessage}
-          messageType="error"
-          showErrorDetails={showErrorDetails}
-          openNotificationConsole={openNotificationConsole}
-        />
-      )}
+    <RightPaneForm {...props}>
       <div className="panelMainContent">
         <NewVertexComponent
           newVertexDataProp={newVertexDataValue}
@@ -67,8 +59,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
           onChangeProp={onChange}
         />
       </div>
-      <PanelFooterComponent buttonLabel={buttonLabel} />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap b/src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap
index 4d493e8c5..d90dfe68d 100644
--- a/src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap
+++ b/src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap
@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`New Vertex Panel should render default property 1`] = `
-<form
-  className="panelFormWrapper"
+<RightPaneForm
+  expandConsole={[Function]}
+  formError=""
+  isExecuting={false}
   onSubmit={[Function]}
+  submitButtonText="OK"
 >
   <div
     className="panelMainContent"
@@ -13,8 +16,5 @@ exports[`New Vertex Panel should render default property 1`] = `
       partitionKeyPropertyProp=""
     />
   </div>
-  <PanelFooterComponent
-    buttonLabel="OK"
-  />
-</form>
+</RightPaneForm>
 `;
diff --git a/src/Explorer/Panes/PaneComponents.ts b/src/Explorer/Panes/PaneComponents.ts
deleted file mode 100644
index 81163e94a..000000000
--- a/src/Explorer/Panes/PaneComponents.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
-export class PaneComponent {
-  constructor(data: any) {
-    return data.data;
-  }
-}
-
-export class CassandraAddCollectionPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: CassandraAddCollectionPaneTemplate,
-    };
-  }
-}
diff --git a/src/Explorer/Panes/PanelInfoErrorComponent.tsx b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
index 43fc978e9..f124a3fb1 100644
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -8,6 +8,7 @@ export interface PanelInfoErrorProps {
   link?: string;
   linkText?: string;
   openNotificationConsole?: () => void;
+  formError?: boolean;
 }
 
 export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
@@ -35,7 +36,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>
-              {linkText}
+              {" " + linkText}
             </Link>
           )}
         </Text>
diff --git a/src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx b/src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx
index 5572edcb6..c457944d2 100644
--- a/src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx
+++ b/src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx
@@ -7,15 +7,12 @@ import { JunoClient } from "../../../Juno/JunoClient";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { CodeOfConductComponent } from "../../Controls/NotebookGallery/CodeOfConductComponent";
+import { CodeOfConduct } from "../../Controls/NotebookGallery/CodeOfConduct/CodeOfConduct";
 import { GalleryTab } from "../../Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
 
 export interface PublishNotebookPaneAProps {
@@ -155,7 +152,6 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
       clearPublishingMessage();
       setIsExecuting(false);
     }
-
     closePanel();
   };
 
@@ -170,15 +166,11 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     setFormErrorDetail("");
   };
 
-  const props: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formError,
-    formErrorDetail: formErrorDetail,
-    id: "publishnotebookpane",
     isExecuting: isExecuting,
-    title: "Publish to gallery",
     submitButtonText: "Publish",
     onSubmit: () => submit(),
-    onClose: closePanel,
     expandConsole: () => container.expandConsole(),
     isSubmitButtonHidden: !isCodeOfConductAccepted,
   };
@@ -201,10 +193,10 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     onTakeSnapshot,
   };
   return (
-    <GenericRightPaneComponent {...props}>
+    <RightPaneForm {...props}>
       {!isCodeOfConductAccepted ? (
         <div style={{ padding: "25px", marginTop: "10px" }}>
-          <CodeOfConductComponent
+          <CodeOfConduct
             junoClient={junoClient}
             onAcceptCodeOfConduct={(isAccepted) => {
               setIsCodeOfConductAccepted(isAccepted);
@@ -214,6 +206,6 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
       ) : (
         <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
       )}
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
index 59fb73cc7..cd7b351bf 100644
--- a/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
+++ b/src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -9,10 +9,7 @@ import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetr
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 interface SaveQueryPaneProps {
   explorer: Explorer;
@@ -25,32 +22,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
 }: SaveQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [queryName, setQueryName] = useState<string>("");
 
   const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
   const title = "Save Query";
   const { canSaveQueries } = explorer;
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole: () => explorer.expandConsole(),
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "saveQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
-    onClose: () => closePanel(),
-    onSubmit: () => {
-      canSaveQueries() ? submit() : setupQueries();
-    },
-  };
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    setFormErrorsDetails("");
     if (!canSaveQueries()) {
       setFormError("Cannot save query");
-      setFormErrorsDetails("Failed to save query: account not set up to save queries");
       logConsoleError("Failed to save query: account not setup to save queries");
     }
 
@@ -58,12 +39,10 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
     const query: string = queryTab && queryTab.sqlQueryEditorContent();
     if (!queryName || queryName.length === 0) {
       setFormError("No query name specified");
-      setFormErrorsDetails("No query name specified. Please specify a query name.");
       logConsoleError("Could not save query -- No query name specified. Please specify a query name.");
       return;
     } else if (!query || query.length === 0) {
       setFormError("Invalid query content specified");
-      setFormErrorsDetails("Invalid query content specified. Please enter query content.");
       logConsoleError("Could not save query -- Invalid query content specified. Please enter query content.");
       return;
     }
@@ -97,7 +76,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
       setLoadingFalse();
       const errorMessage = getErrorMessage(error);
       setFormError("Failed to save query");
-      setFormErrorsDetails(`Failed to save query: ${errorMessage}`);
+      logConsoleError(`Failed to save query: ${errorMessage}`);
       traceFailure(
         Action.SaveQuery,
         {
@@ -142,14 +121,23 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
         startKey
       );
       setFormError("Failed to setup a container for saved queries");
-      setFormErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
+      logConsoleError(`Failed to setup a container for saved queries: ${errorMessage}`);
     } finally {
       setLoadingFalse();
     }
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole: () => explorer.expandConsole(),
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
+    onSubmit: () => {
+      canSaveQueries() ? submit() : setupQueries();
+    },
+  };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -158,6 +146,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
             <TextField
               id="saveQueryInput"
               label="Name"
+              autoFocus
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {
                 setQueryName(newInput);
@@ -166,6 +155,6 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap b/src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap
index aba5e17b8..3c4244eda 100644
--- a/src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap
+++ b/src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap
@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Save Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
-  id="saveQueryPane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Complete setup"
-  title="Save Query"
 >
   <div
     className="panelFormWrapper"
@@ -25,5 +21,5 @@ exports[`Save Query Pane should render Default properly 1`] = `
       </Text>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;
diff --git a/src/Explorer/Panes/StringInputPane/StringInputPane.tsx b/src/Explorer/Panes/StringInputPane/StringInputPane.tsx
index 174e9e802..bbd095e61 100644
--- a/src/Explorer/Panes/StringInputPane/StringInputPane.tsx
+++ b/src/Explorer/Panes/StringInputPane/StringInputPane.tsx
@@ -6,10 +6,7 @@ import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import NotebookV2Tab from "../../Tabs/NotebookV2Tab";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface StringInputPanelProps {
   explorer: Explorer;
@@ -40,7 +37,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
 }: StringInputPanelProps): JSX.Element => {
   const [stringInput, setStringInput] = useState<string>(defaultInput);
   const [formErrors, setFormErrors] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
   const submit = async (): Promise<void> => {
@@ -51,7 +47,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
       return;
     } else {
       setFormErrors("");
-      setFormErrorsDetails("");
     }
 
     const clearMessage = logConsoleProgress(`${inProgressMessage} ${stringInput}`);
@@ -78,32 +73,26 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
         error = JSON.stringify(reason);
       }
 
-      // If it's an AjaxError (AjaxObservable), add more error
       if (reason?.response?.message) {
         error += `. ${reason.response.message}`;
       }
 
       setFormErrors(errorMessage);
-      setFormErrorsDetails(`${errorMessage}: ${error}`);
       logConsoleError(`${errorMessage} ${stringInput}: ${error}`);
     } finally {
       setIsExecuting(false);
       clearMessage();
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formErrors,
-    formErrorDetail: formErrorsDetails,
-    id: "stringInputPane",
     isExecuting: isExecuting,
-    title: paneTitle,
     submitButtonText: submitButtonLabel,
-    onClose: closePanel,
     onSubmit: submit,
     expandConsole: () => container.expandConsole(),
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <TextField
           label={inputLabel}
@@ -117,6 +106,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
           aria-label={inputLabel}
         />
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 2bec097e8..2faa53f5d 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -7,76 +7,11 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   errorMessage="Could not create directory "
   explorer={
     Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
-      "_isAfecFeatureRegistered": [Function],
       "_isInitializingNotebooks": false,
-      "_refreshSparkEnabledStateForAccount": [Function],
       "_resetNotebookWorkspace": [Function],
-      "addCollectionText": [Function],
-      "arcadiaToken": [Function],
-      "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
-      "cassandraAddCollectionPane": CassandraAddCollectionPane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "createTableQuery": [Function],
-        "dedicateTableThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "cassandraaddcollectionpane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isTemplateReady": [Function],
-        "keyspaceCreateNew": [Function],
-        "keyspaceHasSharedOffer": [Function],
-        "keyspaceId": [Function],
-        "keyspaceIds": [Function],
-        "keyspaceOffers": Map {},
-        "keyspaceThroughput": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "requestUnitsUsageCostDedicated": [Function],
-        "requestUnitsUsageCostShared": [Function],
-        "ruToolTipText": [Function],
-        "selectedAutoPilotThroughput": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "sharedThroughputSpendAck": [Function],
-        "sharedThroughputSpendAckText": [Function],
-        "sharedThroughputSpendAckVisible": [Function],
-        "tableId": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "userTableQuery": [Function],
-        "visible": [Function],
-      },
-      "closeDialog": undefined,
       "closeSidePanel": undefined,
       "collapsedResourceTreeWidth": 36,
-      "collectionCreationDefaults": Object {
-        "storage": "100",
-        "throughput": Object {
-          "fixed": 400,
-          "shared": 400,
-          "unlimited": 400,
-          "unlimitedmax": 1000000,
-          "unlimitedmin": 400,
-        },
-      },
-      "collectionTitle": [Function],
-      "collectionTreeNodeAltText": [Function],
       "commandBarComponentAdapter": CommandBarComponentAdapter {
         "container": [Circular],
         "isNotebookTabActive": [Function],
@@ -84,808 +19,28 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "tabsButtons": Array [],
       },
       "databases": [Function],
-      "deleteCollectionText": [Function],
-      "deleteDatabaseText": [Function],
-      "gitHubClient": GitHubClient {
-        "errorCallback": [Function],
-        "ocktokit": OctokitWithDefaults {
-          "actions": Object {
-            "addSelectedRepoToOrgSecret": [Function],
-            "cancelWorkflowRun": [Function],
-            "createOrUpdateOrgSecret": [Function],
-            "createOrUpdateRepoSecret": [Function],
-            "createOrUpdateSecretForRepo": [Function],
-            "createRegistrationToken": [Function],
-            "createRegistrationTokenForOrg": [Function],
-            "createRegistrationTokenForRepo": [Function],
-            "createRemoveToken": [Function],
-            "createRemoveTokenForOrg": [Function],
-            "createRemoveTokenForRepo": [Function],
-            "deleteArtifact": [Function],
-            "deleteOrgSecret": [Function],
-            "deleteRepoSecret": [Function],
-            "deleteSecretFromRepo": [Function],
-            "deleteSelfHostedRunnerFromOrg": [Function],
-            "deleteSelfHostedRunnerFromRepo": [Function],
-            "deleteWorkflowRunLogs": [Function],
-            "downloadArtifact": [Function],
-            "downloadJobLogsForWorkflowRun": [Function],
-            "downloadWorkflowJobLogs": [Function],
-            "downloadWorkflowRunLogs": [Function],
-            "getArtifact": [Function],
-            "getJobForWorkflowRun": [Function],
-            "getOrgPublicKey": [Function],
-            "getOrgSecret": [Function],
-            "getPublicKey": [Function],
-            "getRepoPublicKey": [Function],
-            "getRepoSecret": [Function],
-            "getSecret": [Function],
-            "getSelfHostedRunner": [Function],
-            "getSelfHostedRunnerForOrg": [Function],
-            "getSelfHostedRunnerForRepo": [Function],
-            "getWorkflow": [Function],
-            "getWorkflowJob": [Function],
-            "getWorkflowRun": [Function],
-            "getWorkflowRunUsage": [Function],
-            "getWorkflowUsage": [Function],
-            "listArtifactsForRepo": [Function],
-            "listDownloadsForSelfHostedRunnerApplication": [Function],
-            "listJobsForWorkflowRun": [Function],
-            "listOrgSecrets": [Function],
-            "listRepoSecrets": [Function],
-            "listRepoWorkflowRuns": [Function],
-            "listRepoWorkflows": [Function],
-            "listRunnerApplicationsForOrg": [Function],
-            "listRunnerApplicationsForRepo": [Function],
-            "listSecretsForRepo": [Function],
-            "listSelectedReposForOrgSecret": [Function],
-            "listSelfHostedRunnersForOrg": [Function],
-            "listSelfHostedRunnersForRepo": [Function],
-            "listWorkflowJobLogs": [Function],
-            "listWorkflowRunArtifacts": [Function],
-            "listWorkflowRunLogs": [Function],
-            "listWorkflowRuns": [Function],
-            "listWorkflowRunsForRepo": [Function],
-            "reRunWorkflow": [Function],
-            "removeSelectedRepoFromOrgSecret": [Function],
-            "removeSelfHostedRunner": [Function],
-            "setSelectedReposForOrgSecret": [Function],
-          },
-          "activity": Object {
-            "checkRepoIsStarredByAuthenticatedUser": [Function],
-            "checkStarringRepo": [Function],
-            "deleteRepoSubscription": [Function],
-            "deleteThreadSubscription": [Function],
-            "getFeeds": [Function],
-            "getRepoSubscription": [Function],
-            "getThread": [Function],
-            "getThreadSubscription": [Function],
-            "getThreadSubscriptionForAuthenticatedUser": [Function],
-            "listEventsForAuthenticatedUser": [Function],
-            "listEventsForOrg": [Function],
-            "listEventsForUser": [Function],
-            "listFeeds": [Function],
-            "listNotifications": [Function],
-            "listNotificationsForAuthenticatedUser": [Function],
-            "listNotificationsForRepo": [Function],
-            "listOrgEventsForAuthenticatedUser": [Function],
-            "listPublicEvents": [Function],
-            "listPublicEventsForOrg": [Function],
-            "listPublicEventsForRepoNetwork": [Function],
-            "listPublicEventsForUser": [Function],
-            "listPublicOrgEvents": [Function],
-            "listReceivedEventsForUser": [Function],
-            "listReceivedPublicEventsForUser": [Function],
-            "listRepoEvents": [Function],
-            "listRepoNotificationsForAuthenticatedUser": [Function],
-            "listReposStarredByAuthenticatedUser": [Function],
-            "listReposStarredByUser": [Function],
-            "listReposWatchedByUser": [Function],
-            "listStargazersForRepo": [Function],
-            "listWatchedReposForAuthenticatedUser": [Function],
-            "listWatchersForRepo": [Function],
-            "markAsRead": [Function],
-            "markNotificationsAsRead": [Function],
-            "markNotificationsAsReadForRepo": [Function],
-            "markRepoNotificationsAsRead": [Function],
-            "markThreadAsRead": [Function],
-            "setRepoSubscription": [Function],
-            "setThreadSubscription": [Function],
-            "starRepo": [Function],
-            "starRepoForAuthenticatedUser": [Function],
-            "unstarRepo": [Function],
-            "unstarRepoForAuthenticatedUser": [Function],
-          },
-          "apps": Object {
-            "addRepoToInstallation": [Function],
-            "checkAccountIsAssociatedWithAny": [Function],
-            "checkAccountIsAssociatedWithAnyStubbed": [Function],
-            "checkToken": [Function],
-            "createContentAttachment": [Function],
-            "createFromManifest": [Function],
-            "createInstallationAccessToken": [Function],
-            "createInstallationToken": [Function],
-            "deleteAuthorization": [Function],
-            "deleteInstallation": [Function],
-            "deleteToken": [Function],
-            "getAuthenticated": [Function],
-            "getBySlug": [Function],
-            "getInstallation": [Function],
-            "getOrgInstallation": [Function],
-            "getRepoInstallation": [Function],
-            "getSubscriptionPlanForAccount": [Function],
-            "getSubscriptionPlanForAccountStubbed": [Function],
-            "getUserInstallation": [Function],
-            "listAccountsForPlan": [Function],
-            "listAccountsForPlanStubbed": [Function],
-            "listAccountsUserOrOrgOnPlan": [Function],
-            "listAccountsUserOrOrgOnPlanStubbed": [Function],
-            "listInstallationReposForAuthenticatedUser": [Function],
-            "listInstallations": [Function],
-            "listInstallationsForAuthenticatedUser": [Function],
-            "listMarketplacePurchasesForAuthenticatedUser": [Function],
-            "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-            "listPlans": [Function],
-            "listPlansStubbed": [Function],
-            "listRepos": [Function],
-            "listReposAccessibleToInstallation": [Function],
-            "listSubscriptionsForAuthenticatedUser": [Function],
-            "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-            "removeRepoFromInstallation": [Function],
-            "resetToken": [Function],
-            "revokeInstallationAccessToken": [Function],
-            "revokeInstallationToken": [Function],
-            "suspendInstallation": [Function],
-            "unsuspendInstallation": [Function],
-          },
-          "auth": [Function],
-          "checks": Object {
-            "create": [Function],
-            "createSuite": [Function],
-            "get": [Function],
-            "getSuite": [Function],
-            "listAnnotations": [Function],
-            "listForRef": [Function],
-            "listForSuite": [Function],
-            "listSuitesForRef": [Function],
-            "rerequestSuite": [Function],
-            "setSuitesPreferences": [Function],
-            "update": [Function],
-          },
-          "codeScanning": Object {
-            "getAlert": [Function],
-            "listAlertsForRepo": [Function],
-          },
-          "codesOfConduct": Object {
-            "getAllCodesOfConduct": [Function],
-            "getConductCode": [Function],
-            "getForRepo": [Function],
-            "listConductCodes": [Function],
-          },
-          "emojis": Object {
-            "get": [Function],
-          },
-          "gists": Object {
-            "checkIsStarred": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "delete": [Function],
-            "deleteComment": [Function],
-            "fork": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getRevision": [Function],
-            "list": [Function],
-            "listComments": [Function],
-            "listCommits": [Function],
-            "listForUser": [Function],
-            "listForks": [Function],
-            "listPublic": [Function],
-            "listPublicForUser": [Function],
-            "listStarred": [Function],
-            "star": [Function],
-            "unstar": [Function],
-            "update": [Function],
-            "updateComment": [Function],
-          },
-          "git": Object {
-            "createBlob": [Function],
-            "createCommit": [Function],
-            "createRef": [Function],
-            "createTag": [Function],
-            "createTree": [Function],
-            "deleteRef": [Function],
-            "getBlob": [Function],
-            "getCommit": [Function],
-            "getRef": [Function],
-            "getTag": [Function],
-            "getTree": [Function],
-            "listMatchingRefs": [Function],
-            "updateRef": [Function],
-          },
-          "gitignore": Object {
-            "getAllTemplates": [Function],
-            "getTemplate": [Function],
-            "listTemplates": [Function],
-          },
-          "graphql": [Function],
-          "hook": [Function],
-          "interactions": Object {
-            "addOrUpdateRestrictionsForOrg": [Function],
-            "addOrUpdateRestrictionsForRepo": [Function],
-            "getRestrictionsForOrg": [Function],
-            "getRestrictionsForRepo": [Function],
-            "removeRestrictionsForOrg": [Function],
-            "removeRestrictionsForRepo": [Function],
-            "setRestrictionsForOrg": [Function],
-            "setRestrictionsForRepo": [Function],
-          },
-          "issues": Object {
-            "addAssignees": [Function],
-            "addLabels": [Function],
-            "checkAssignee": [Function],
-            "checkUserCanBeAssigned": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "createLabel": [Function],
-            "createMilestone": [Function],
-            "deleteComment": [Function],
-            "deleteLabel": [Function],
-            "deleteMilestone": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getEvent": [Function],
-            "getLabel": [Function],
-            "getMilestone": [Function],
-            "list": [Function],
-            "listAssignees": [Function],
-            "listComments": [Function],
-            "listCommentsForRepo": [Function],
-            "listEvents": [Function],
-            "listEventsForRepo": [Function],
-            "listEventsForTimeline": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listForRepo": [Function],
-            "listLabelsForMilestone": [Function],
-            "listLabelsForRepo": [Function],
-            "listLabelsOnIssue": [Function],
-            "listMilestones": [Function],
-            "listMilestonesForRepo": [Function],
-            "lock": [Function],
-            "removeAllLabels": [Function],
-            "removeAssignees": [Function],
-            "removeLabel": [Function],
-            "removeLabels": [Function],
-            "replaceAllLabels": [Function],
-            "replaceLabels": [Function],
-            "setLabels": [Function],
-            "unlock": [Function],
-            "update": [Function],
-            "updateComment": [Function],
-            "updateLabel": [Function],
-            "updateMilestone": [Function],
-          },
-          "licenses": Object {
-            "get": [Function],
-            "getAllCommonlyUsed": [Function],
-            "getForRepo": [Function],
-            "listCommonlyUsed": [Function],
-          },
-          "log": Object {
-            "debug": [Function],
-            "error": [Function],
-            "info": [Function],
-            "warn": [Function],
-          },
-          "markdown": Object {
-            "render": [Function],
-            "renderRaw": [Function],
-          },
-          "meta": Object {
-            "get": [Function],
-          },
-          "migrations": Object {
-            "cancelImport": [Function],
-            "deleteArchiveForAuthenticatedUser": [Function],
-            "deleteArchiveForOrg": [Function],
-            "downloadArchiveForOrg": [Function],
-            "getArchiveForAuthenticatedUser": [Function],
-            "getCommitAuthors": [Function],
-            "getImportProgress": [Function],
-            "getImportStatus": [Function],
-            "getLargeFiles": [Function],
-            "getStatusForAuthenticatedUser": [Function],
-            "getStatusForOrg": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listReposForOrg": [Function],
-            "listReposForUser": [Function],
-            "mapCommitAuthor": [Function],
-            "setLfsPreference": [Function],
-            "startForAuthenticatedUser": [Function],
-            "startForOrg": [Function],
-            "startImport": [Function],
-            "unlockRepoForAuthenticatedUser": [Function],
-            "unlockRepoForOrg": [Function],
-            "updateImport": [Function],
-          },
-          "orgs": Object {
-            "addOrUpdateMembership": [Function],
-            "blockUser": [Function],
-            "checkBlockedUser": [Function],
-            "checkMembership": [Function],
-            "checkMembershipForUser": [Function],
-            "checkPublicMembership": [Function],
-            "checkPublicMembershipForUser": [Function],
-            "concealMembership": [Function],
-            "convertMemberToOutsideCollaborator": [Function],
-            "createHook": [Function],
-            "createInvitation": [Function],
-            "createWebhook": [Function],
-            "deleteHook": [Function],
-            "deleteWebhook": [Function],
-            "get": [Function],
-            "getHook": [Function],
-            "getMembership": [Function],
-            "getMembershipForAuthenticatedUser": [Function],
-            "getMembershipForUser": [Function],
-            "getWebhook": [Function],
-            "list": [Function],
-            "listAppInstallations": [Function],
-            "listBlockedUsers": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForUser": [Function],
-            "listHooks": [Function],
-            "listInstallations": [Function],
-            "listInvitationTeams": [Function],
-            "listMembers": [Function],
-            "listMemberships": [Function],
-            "listMembershipsForAuthenticatedUser": [Function],
-            "listOutsideCollaborators": [Function],
-            "listPendingInvitations": [Function],
-            "listPublicMembers": [Function],
-            "listWebhooks": [Function],
-            "pingHook": [Function],
-            "pingWebhook": [Function],
-            "publicizeMembership": [Function],
-            "removeMember": [Function],
-            "removeMembership": [Function],
-            "removeMembershipForUser": [Function],
-            "removeOutsideCollaborator": [Function],
-            "removePublicMembershipForAuthenticatedUser": [Function],
-            "setMembershipForUser": [Function],
-            "setPublicMembershipForAuthenticatedUser": [Function],
-            "unblockUser": [Function],
-            "update": [Function],
-            "updateHook": [Function],
-            "updateMembership": [Function],
-            "updateMembershipForAuthenticatedUser": [Function],
-            "updateWebhook": [Function],
-          },
-          "paginate": [Function],
-          "projects": Object {
-            "addCollaborator": [Function],
-            "createCard": [Function],
-            "createColumn": [Function],
-            "createForAuthenticatedUser": [Function],
-            "createForOrg": [Function],
-            "createForRepo": [Function],
-            "delete": [Function],
-            "deleteCard": [Function],
-            "deleteColumn": [Function],
-            "get": [Function],
-            "getCard": [Function],
-            "getColumn": [Function],
-            "getPermissionForUser": [Function],
-            "listCards": [Function],
-            "listCollaborators": [Function],
-            "listColumns": [Function],
-            "listForOrg": [Function],
-            "listForRepo": [Function],
-            "listForUser": [Function],
-            "moveCard": [Function],
-            "moveColumn": [Function],
-            "removeCollaborator": [Function],
-            "reviewUserPermissionLevel": [Function],
-            "update": [Function],
-            "updateCard": [Function],
-            "updateColumn": [Function],
-          },
-          "pulls": Object {
-            "checkIfMerged": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "createReplyForReviewComment": [Function],
-            "createReview": [Function],
-            "createReviewComment": [Function],
-            "createReviewCommentReply": [Function],
-            "createReviewRequest": [Function],
-            "deleteComment": [Function],
-            "deletePendingReview": [Function],
-            "deleteReviewComment": [Function],
-            "deleteReviewRequest": [Function],
-            "dismissReview": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getCommentsForReview": [Function],
-            "getReview": [Function],
-            "getReviewComment": [Function],
-            "list": [Function],
-            "listComments": [Function],
-            "listCommentsForRepo": [Function],
-            "listCommentsForReview": [Function],
-            "listCommits": [Function],
-            "listFiles": [Function],
-            "listRequestedReviewers": [Function],
-            "listReviewComments": [Function],
-            "listReviewCommentsForRepo": [Function],
-            "listReviewRequests": [Function],
-            "listReviews": [Function],
-            "merge": [Function],
-            "removeRequestedReviewers": [Function],
-            "requestReviewers": [Function],
-            "submitReview": [Function],
-            "update": [Function],
-            "updateBranch": [Function],
-            "updateComment": [Function],
-            "updateReview": [Function],
-            "updateReviewComment": [Function],
-          },
-          "rateLimit": Object {
-            "get": [Function],
-          },
-          "reactions": Object {
-            "createForCommitComment": [Function],
-            "createForIssue": [Function],
-            "createForIssueComment": [Function],
-            "createForPullRequestReviewComment": [Function],
-            "createForTeamDiscussionCommentInOrg": [Function],
-            "createForTeamDiscussionInOrg": [Function],
-            "delete": [Function],
-            "deleteForCommitComment": [Function],
-            "deleteForIssue": [Function],
-            "deleteForIssueComment": [Function],
-            "deleteForPullRequestComment": [Function],
-            "deleteForTeamDiscussion": [Function],
-            "deleteForTeamDiscussionComment": [Function],
-            "deleteLegacy": [Function],
-            "listForCommitComment": [Function],
-            "listForIssue": [Function],
-            "listForIssueComment": [Function],
-            "listForPullRequestReviewComment": [Function],
-            "listForTeamDiscussionCommentInOrg": [Function],
-            "listForTeamDiscussionInOrg": [Function],
-          },
-          "repos": Object {
-            "acceptInvitation": [Function],
-            "addAppAccessRestrictions": [Function],
-            "addCollaborator": [Function],
-            "addDeployKey": [Function],
-            "addProtectedBranchAdminEnforcement": [Function],
-            "addProtectedBranchAppRestrictions": [Function],
-            "addProtectedBranchRequiredSignatures": [Function],
-            "addProtectedBranchRequiredStatusChecksContexts": [Function],
-            "addProtectedBranchTeamRestrictions": [Function],
-            "addProtectedBranchUserRestrictions": [Function],
-            "addStatusCheckContexts": [Function],
-            "addTeamAccessRestrictions": [Function],
-            "addUserAccessRestrictions": [Function],
-            "checkCollaborator": [Function],
-            "checkVulnerabilityAlerts": [Function],
-            "compareCommits": [Function],
-            "createCommitComment": [Function],
-            "createCommitSignatureProtection": [Function],
-            "createCommitStatus": [Function],
-            "createDeployKey": [Function],
-            "createDeployment": [Function],
-            "createDeploymentStatus": [Function],
-            "createDispatchEvent": [Function],
-            "createForAuthenticatedUser": [Function],
-            "createFork": [Function],
-            "createHook": [Function],
-            "createInOrg": [Function],
-            "createOrUpdateFile": [Function],
-            "createOrUpdateFileContents": [Function],
-            "createPagesSite": [Function],
-            "createRelease": [Function],
-            "createStatus": [Function],
-            "createUsingTemplate": [Function],
-            "createWebhook": [Function],
-            "declineInvitation": [Function],
-            "delete": [Function],
-            "deleteAccessRestrictions": [Function],
-            "deleteAdminBranchProtection": [Function],
-            "deleteBranchProtection": [Function],
-            "deleteCommitComment": [Function],
-            "deleteCommitSignatureProtection": [Function],
-            "deleteDeployKey": [Function],
-            "deleteDeployment": [Function],
-            "deleteDownload": [Function],
-            "deleteFile": [Function],
-            "deleteHook": [Function],
-            "deleteInvitation": [Function],
-            "deletePagesSite": [Function],
-            "deletePullRequestReviewProtection": [Function],
-            "deleteRelease": [Function],
-            "deleteReleaseAsset": [Function],
-            "deleteWebhook": [Function],
-            "disableAutomatedSecurityFixes": [Function],
-            "disablePagesSite": [Function],
-            "disableVulnerabilityAlerts": [Function],
-            "downloadArchive": [Function],
-            "enableAutomatedSecurityFixes": [Function],
-            "enablePagesSite": [Function],
-            "enableVulnerabilityAlerts": [Function],
-            "get": [Function],
-            "getAccessRestrictions": [Function],
-            "getAdminBranchProtection": [Function],
-            "getAllStatusCheckContexts": [Function],
-            "getAllTopics": [Function],
-            "getAppsWithAccessToProtectedBranch": [Function],
-            "getArchiveLink": [Function],
-            "getBranch": [Function],
-            "getBranchProtection": [Function],
-            "getClones": [Function],
-            "getCodeFrequencyStats": [Function],
-            "getCollaboratorPermissionLevel": [Function],
-            "getCombinedStatusForRef": [Function],
-            "getCommit": [Function],
-            "getCommitActivityStats": [Function],
-            "getCommitComment": [Function],
-            "getCommitSignatureProtection": [Function],
-            "getCommunityProfileMetrics": [Function],
-            "getContent": [Function],
-            "getContents": [Function],
-            "getContributorsStats": [Function],
-            "getDeployKey": [Function],
-            "getDeployment": [Function],
-            "getDeploymentStatus": [Function],
-            "getDownload": [Function],
-            "getHook": [Function],
-            "getLatestPagesBuild": [Function],
-            "getLatestRelease": [Function],
-            "getPages": [Function],
-            "getPagesBuild": [Function],
-            "getParticipationStats": [Function],
-            "getProtectedBranchAdminEnforcement": [Function],
-            "getProtectedBranchPullRequestReviewEnforcement": [Function],
-            "getProtectedBranchRequiredSignatures": [Function],
-            "getProtectedBranchRequiredStatusChecks": [Function],
-            "getProtectedBranchRestrictions": [Function],
-            "getPullRequestReviewProtection": [Function],
-            "getPunchCardStats": [Function],
-            "getReadme": [Function],
-            "getRelease": [Function],
-            "getReleaseAsset": [Function],
-            "getReleaseByTag": [Function],
-            "getStatusChecksProtection": [Function],
-            "getTeamsWithAccessToProtectedBranch": [Function],
-            "getTopPaths": [Function],
-            "getTopReferrers": [Function],
-            "getUsersWithAccessToProtectedBranch": [Function],
-            "getViews": [Function],
-            "getWebhook": [Function],
-            "list": [Function],
-            "listAssetsForRelease": [Function],
-            "listBranches": [Function],
-            "listBranchesForHeadCommit": [Function],
-            "listCollaborators": [Function],
-            "listCommentsForCommit": [Function],
-            "listCommitComments": [Function],
-            "listCommitCommentsForRepo": [Function],
-            "listCommitStatusesForRef": [Function],
-            "listCommits": [Function],
-            "listContributors": [Function],
-            "listDeployKeys": [Function],
-            "listDeploymentStatuses": [Function],
-            "listDeployments": [Function],
-            "listDownloads": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listForUser": [Function],
-            "listForks": [Function],
-            "listHooks": [Function],
-            "listInvitations": [Function],
-            "listInvitationsForAuthenticatedUser": [Function],
-            "listLanguages": [Function],
-            "listPagesBuilds": [Function],
-            "listProtectedBranchRequiredStatusChecksContexts": [Function],
-            "listPublic": [Function],
-            "listPullRequestsAssociatedWithCommit": [Function],
-            "listReleaseAssets": [Function],
-            "listReleases": [Function],
-            "listStatusesForRef": [Function],
-            "listTags": [Function],
-            "listTeams": [Function],
-            "listTopics": [Function],
-            "listWebhooks": [Function],
-            "merge": [Function],
-            "pingHook": [Function],
-            "pingWebhook": [Function],
-            "removeAppAccessRestrictions": [Function],
-            "removeBranchProtection": [Function],
-            "removeCollaborator": [Function],
-            "removeDeployKey": [Function],
-            "removeProtectedBranchAdminEnforcement": [Function],
-            "removeProtectedBranchAppRestrictions": [Function],
-            "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-            "removeProtectedBranchRequiredSignatures": [Function],
-            "removeProtectedBranchRequiredStatusChecks": [Function],
-            "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-            "removeProtectedBranchRestrictions": [Function],
-            "removeProtectedBranchTeamRestrictions": [Function],
-            "removeProtectedBranchUserRestrictions": [Function],
-            "removeStatusCheckContexts": [Function],
-            "removeStatusCheckProtection": [Function],
-            "removeTeamAccessRestrictions": [Function],
-            "removeUserAccessRestrictions": [Function],
-            "replaceAllTopics": [Function],
-            "replaceProtectedBranchAppRestrictions": [Function],
-            "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-            "replaceProtectedBranchTeamRestrictions": [Function],
-            "replaceProtectedBranchUserRestrictions": [Function],
-            "replaceTopics": [Function],
-            "requestPageBuild": [Function],
-            "requestPagesBuild": [Function],
-            "retrieveCommunityProfileMetrics": [Function],
-            "setAdminBranchProtection": [Function],
-            "setAppAccessRestrictions": [Function],
-            "setStatusCheckContexts": [Function],
-            "setTeamAccessRestrictions": [Function],
-            "setUserAccessRestrictions": [Function],
-            "testPushHook": [Function],
-            "testPushWebhook": [Function],
-            "transfer": [Function],
-            "update": [Function],
-            "updateBranchProtection": [Function],
-            "updateCommitComment": [Function],
-            "updateHook": [Function],
-            "updateInformationAboutPagesSite": [Function],
-            "updateInvitation": [Function],
-            "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-            "updateProtectedBranchRequiredStatusChecks": [Function],
-            "updatePullRequestReviewProtection": [Function],
-            "updateRelease": [Function],
-            "updateReleaseAsset": [Function],
-            "updateStatusCheckPotection": [Function],
-            "updateWebhook": [Function],
-            "uploadReleaseAsset": [Function],
-          },
-          "request": [Function],
-          "search": Object {
-            "code": [Function],
-            "commits": [Function],
-            "issuesAndPullRequests": [Function],
-            "labels": [Function],
-            "repos": [Function],
-            "topics": [Function],
-            "users": [Function],
-          },
-          "teams": Object {
-            "addOrUpdateMembershipForUserInOrg": [Function],
-            "addOrUpdateMembershipInOrg": [Function],
-            "addOrUpdateProjectInOrg": [Function],
-            "addOrUpdateProjectPermissionsInOrg": [Function],
-            "addOrUpdateRepoInOrg": [Function],
-            "addOrUpdateRepoPermissionsInOrg": [Function],
-            "checkManagesRepoInOrg": [Function],
-            "checkPermissionsForProjectInOrg": [Function],
-            "checkPermissionsForRepoInOrg": [Function],
-            "create": [Function],
-            "createDiscussionCommentInOrg": [Function],
-            "createDiscussionInOrg": [Function],
-            "deleteDiscussionCommentInOrg": [Function],
-            "deleteDiscussionInOrg": [Function],
-            "deleteInOrg": [Function],
-            "getByName": [Function],
-            "getDiscussionCommentInOrg": [Function],
-            "getDiscussionInOrg": [Function],
-            "getMembershipForUserInOrg": [Function],
-            "getMembershipInOrg": [Function],
-            "list": [Function],
-            "listChildInOrg": [Function],
-            "listDiscussionCommentsInOrg": [Function],
-            "listDiscussionsInOrg": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listMembersInOrg": [Function],
-            "listPendingInvitationsInOrg": [Function],
-            "listProjectsInOrg": [Function],
-            "listReposInOrg": [Function],
-            "removeMembershipForUserInOrg": [Function],
-            "removeMembershipInOrg": [Function],
-            "removeProjectInOrg": [Function],
-            "removeRepoInOrg": [Function],
-            "reviewProjectInOrg": [Function],
-            "updateDiscussionCommentInOrg": [Function],
-            "updateDiscussionInOrg": [Function],
-            "updateInOrg": [Function],
-          },
-          "users": Object {
-            "addEmailForAuthenticated": [Function],
-            "addEmails": [Function],
-            "block": [Function],
-            "checkBlocked": [Function],
-            "checkFollowing": [Function],
-            "checkFollowingForUser": [Function],
-            "checkPersonIsFollowedByAuthenticated": [Function],
-            "createGpgKey": [Function],
-            "createGpgKeyForAuthenticated": [Function],
-            "createPublicKey": [Function],
-            "createPublicSshKeyForAuthenticated": [Function],
-            "deleteEmailForAuthenticated": [Function],
-            "deleteEmails": [Function],
-            "deleteGpgKey": [Function],
-            "deleteGpgKeyForAuthenticated": [Function],
-            "deletePublicKey": [Function],
-            "deletePublicSshKeyForAuthenticated": [Function],
-            "follow": [Function],
-            "getAuthenticated": [Function],
-            "getByUsername": [Function],
-            "getContextForUser": [Function],
-            "getGpgKey": [Function],
-            "getGpgKeyForAuthenticated": [Function],
-            "getPublicKey": [Function],
-            "getPublicSshKeyForAuthenticated": [Function],
-            "list": [Function],
-            "listBlocked": [Function],
-            "listBlockedByAuthenticated": [Function],
-            "listEmails": [Function],
-            "listEmailsForAuthenticated": [Function],
-            "listFollowedByAuthenticated": [Function],
-            "listFollowersForAuthenticatedUser": [Function],
-            "listFollowersForUser": [Function],
-            "listFollowingForAuthenticatedUser": [Function],
-            "listFollowingForUser": [Function],
-            "listGpgKeys": [Function],
-            "listGpgKeysForAuthenticated": [Function],
-            "listGpgKeysForUser": [Function],
-            "listPublicEmails": [Function],
-            "listPublicEmailsForAuthenticated": [Function],
-            "listPublicKeys": [Function],
-            "listPublicKeysForUser": [Function],
-            "listPublicSshKeysForAuthenticated": [Function],
-            "setPrimaryEmailVisibilityForAuthenticated": [Function],
-            "togglePrimaryEmailVisibility": [Function],
-            "unblock": [Function],
-            "unfollow": [Function],
-            "updateAuthenticated": [Function],
-          },
-        },
-      },
-      "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
-      "isAutoscaleDefaultEnabled": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isHostedDataExplorerEnabled": [Function],
-      "isMongoIndexingEnabled": [Function],
       "isNotebookEnabled": [Function],
       "isNotebooksEnabledForAccount": [Function],
-      "isPublishNotebookPaneEnabled": [Function],
       "isResourceTokenCollectionNodeSelected": [Function],
       "isSchemaEnabled": [Function],
       "isServerlessEnabled": [Function],
-      "isSparkEnabled": [Function],
-      "isSparkEnabledForAccount": [Function],
+      "isShellEnabled": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "junoClient": JunoClient {
-        "cachedPinnedRepos": [Function],
-      },
       "memoryUsageInfo": [Function],
       "notebookBasePath": [Function],
       "notebookServerInfo": [Function],
-      "onGitHubClientError": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "openDialog": undefined,
       "openSidePanel": undefined,
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
       "refreshNotebookList": [Function],
-      "refreshTreeTitle": [Function],
       "resourceTokenCollection": [Function],
       "resourceTokenCollectionId": [Function],
       "resourceTokenDatabaseId": [Function],
@@ -941,1814 +96,1216 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   submitButtonLabel="Create"
   successMessage="Created directory "
 >
-  <GenericRightPaneComponent
+  <RightPaneForm
     expandConsole={[Function]}
     formError=""
-    formErrorDetail=""
-    id="stringInputPane"
     isExecuting={false}
-    onClose={[Function]}
     onSubmit={[Function]}
     submitButtonText="Create"
-    title="Create new directory"
   >
-    <div
-      onKeyDown={[Function]}
-      tabIndex={-1}
+    <form
+      className="panelFormWrapper"
+      onSubmit={[Function]}
     >
       <div
-        className="contextual-pane-out"
-        onClick={[Function]}
-      />
-      <div
-        className="contextual-pane"
-        id="stringInputPane"
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "height": NaN,
-          }
-        }
+        className="paneMainContent"
+      >
+        <StyledTextFieldBase
+          aria-label="Enter new directory name"
+          autoFocus={true}
+          label="Enter new directory name"
+          name="collectionIdConfirmation"
+          onChange={[Function]}
+          required={true}
+          value=""
+        >
+          <TextFieldBase
+            aria-label="Enter new directory name"
+            autoFocus={true}
+            deferredValidationTime={200}
+            label="Enter new directory name"
+            name="collectionIdConfirmation"
+            onChange={[Function]}
+            required={true}
+            resizable={true}
+            styles={[Function]}
+            theme={
+              Object {
+                "disableGlobalClassNames": false,
+                "effects": Object {
+                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                  "roundedCorner2": "2px",
+                  "roundedCorner4": "4px",
+                  "roundedCorner6": "6px",
+                },
+                "fonts": Object {
+                  "large": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "18px",
+                    "fontWeight": 400,
+                  },
+                  "medium": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "14px",
+                    "fontWeight": 400,
+                  },
+                  "mediumPlus": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "16px",
+                    "fontWeight": 400,
+                  },
+                  "mega": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "68px",
+                    "fontWeight": 600,
+                  },
+                  "small": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "12px",
+                    "fontWeight": 400,
+                  },
+                  "smallPlus": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "12px",
+                    "fontWeight": 400,
+                  },
+                  "superLarge": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "42px",
+                    "fontWeight": 600,
+                  },
+                  "tiny": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "10px",
+                    "fontWeight": 400,
+                  },
+                  "xLarge": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "20px",
+                    "fontWeight": 600,
+                  },
+                  "xLargePlus": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "24px",
+                    "fontWeight": 600,
+                  },
+                  "xSmall": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "10px",
+                    "fontWeight": 400,
+                  },
+                  "xxLarge": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "28px",
+                    "fontWeight": 600,
+                  },
+                  "xxLargePlus": Object {
+                    "MozOsxFontSmoothing": "grayscale",
+                    "WebkitFontSmoothing": "antialiased",
+                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                    "fontSize": "32px",
+                    "fontWeight": 600,
+                  },
+                },
+                "isInverted": false,
+                "palette": Object {
+                  "accent": "#0078d4",
+                  "black": "#000000",
+                  "blackTranslucent40": "rgba(0,0,0,.4)",
+                  "blue": "#0078d4",
+                  "blueDark": "#002050",
+                  "blueLight": "#00bcf2",
+                  "blueMid": "#00188f",
+                  "green": "#107c10",
+                  "greenDark": "#004b1c",
+                  "greenLight": "#bad80a",
+                  "magenta": "#b4009e",
+                  "magentaDark": "#5c005c",
+                  "magentaLight": "#e3008c",
+                  "neutralDark": "#201f1e",
+                  "neutralLight": "#edebe9",
+                  "neutralLighter": "#f3f2f1",
+                  "neutralLighterAlt": "#faf9f8",
+                  "neutralPrimary": "#323130",
+                  "neutralPrimaryAlt": "#3b3a39",
+                  "neutralQuaternary": "#d2d0ce",
+                  "neutralQuaternaryAlt": "#e1dfdd",
+                  "neutralSecondary": "#605e5c",
+                  "neutralSecondaryAlt": "#8a8886",
+                  "neutralTertiary": "#a19f9d",
+                  "neutralTertiaryAlt": "#c8c6c4",
+                  "orange": "#d83b01",
+                  "orangeLight": "#ea4300",
+                  "orangeLighter": "#ff8c00",
+                  "purple": "#5c2d91",
+                  "purpleDark": "#32145a",
+                  "purpleLight": "#b4a0ff",
+                  "red": "#e81123",
+                  "redDark": "#a4262c",
+                  "teal": "#008272",
+                  "tealDark": "#004b50",
+                  "tealLight": "#00b294",
+                  "themeDark": "#005a9e",
+                  "themeDarkAlt": "#106ebe",
+                  "themeDarker": "#004578",
+                  "themeLight": "#c7e0f4",
+                  "themeLighter": "#deecf9",
+                  "themeLighterAlt": "#eff6fc",
+                  "themePrimary": "#0078d4",
+                  "themeSecondary": "#2b88d8",
+                  "themeTertiary": "#71afe5",
+                  "white": "#ffffff",
+                  "whiteTranslucent40": "rgba(255,255,255,.4)",
+                  "yellow": "#ffb900",
+                  "yellowDark": "#d29200",
+                  "yellowLight": "#fff100",
+                },
+                "rtl": undefined,
+                "semanticColors": Object {
+                  "accentButtonBackground": "#0078d4",
+                  "accentButtonText": "#ffffff",
+                  "actionLink": "#323130",
+                  "actionLinkHovered": "#201f1e",
+                  "blockingBackground": "#FDE7E9",
+                  "blockingIcon": "#FDE7E9",
+                  "bodyBackground": "#ffffff",
+                  "bodyBackgroundChecked": "#edebe9",
+                  "bodyBackgroundHovered": "#f3f2f1",
+                  "bodyDivider": "#edebe9",
+                  "bodyFrameBackground": "#ffffff",
+                  "bodyFrameDivider": "#edebe9",
+                  "bodyStandoutBackground": "#faf9f8",
+                  "bodySubtext": "#605e5c",
+                  "bodyText": "#323130",
+                  "bodyTextChecked": "#000000",
+                  "buttonBackground": "#ffffff",
+                  "buttonBackgroundChecked": "#c8c6c4",
+                  "buttonBackgroundCheckedHovered": "#edebe9",
+                  "buttonBackgroundDisabled": "#f3f2f1",
+                  "buttonBackgroundHovered": "#f3f2f1",
+                  "buttonBackgroundPressed": "#edebe9",
+                  "buttonBorder": "#8a8886",
+                  "buttonBorderDisabled": "#f3f2f1",
+                  "buttonText": "#323130",
+                  "buttonTextChecked": "#201f1e",
+                  "buttonTextCheckedHovered": "#000000",
+                  "buttonTextDisabled": "#a19f9d",
+                  "buttonTextHovered": "#201f1e",
+                  "buttonTextPressed": "#201f1e",
+                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                  "cardStandoutBackground": "#ffffff",
+                  "defaultStateBackground": "#faf9f8",
+                  "disabledBackground": "#f3f2f1",
+                  "disabledBodySubtext": "#c8c6c4",
+                  "disabledBodyText": "#a19f9d",
+                  "disabledBorder": "#c8c6c4",
+                  "disabledSubtext": "#d2d0ce",
+                  "disabledText": "#a19f9d",
+                  "errorBackground": "#FDE7E9",
+                  "errorIcon": "#A80000",
+                  "errorText": "#a4262c",
+                  "focusBorder": "#605e5c",
+                  "infoBackground": "#f3f2f1",
+                  "infoIcon": "#605e5c",
+                  "inputBackground": "#ffffff",
+                  "inputBackgroundChecked": "#0078d4",
+                  "inputBackgroundCheckedHovered": "#005a9e",
+                  "inputBorder": "#605e5c",
+                  "inputBorderHovered": "#323130",
+                  "inputFocusBorderAlt": "#0078d4",
+                  "inputForegroundChecked": "#ffffff",
+                  "inputIcon": "#0078d4",
+                  "inputIconDisabled": "#a19f9d",
+                  "inputIconHovered": "#005a9e",
+                  "inputPlaceholderBackgroundChecked": "#deecf9",
+                  "inputPlaceholderText": "#605e5c",
+                  "inputText": "#323130",
+                  "inputTextHovered": "#201f1e",
+                  "link": "#0078d4",
+                  "linkHovered": "#004578",
+                  "listBackground": "#ffffff",
+                  "listHeaderBackgroundHovered": "#f3f2f1",
+                  "listHeaderBackgroundPressed": "#edebe9",
+                  "listItemBackgroundChecked": "#edebe9",
+                  "listItemBackgroundCheckedHovered": "#e1dfdd",
+                  "listItemBackgroundHovered": "#f3f2f1",
+                  "listText": "#323130",
+                  "listTextColor": "#323130",
+                  "menuBackground": "#ffffff",
+                  "menuDivider": "#c8c6c4",
+                  "menuHeader": "#0078d4",
+                  "menuIcon": "#0078d4",
+                  "menuItemBackgroundChecked": "#edebe9",
+                  "menuItemBackgroundHovered": "#f3f2f1",
+                  "menuItemBackgroundPressed": "#edebe9",
+                  "menuItemText": "#323130",
+                  "menuItemTextHovered": "#201f1e",
+                  "messageLink": "#005A9E",
+                  "messageLinkHovered": "#004578",
+                  "messageText": "#323130",
+                  "primaryButtonBackground": "#0078d4",
+                  "primaryButtonBackgroundDisabled": "#f3f2f1",
+                  "primaryButtonBackgroundHovered": "#106ebe",
+                  "primaryButtonBackgroundPressed": "#005a9e",
+                  "primaryButtonBorder": "transparent",
+                  "primaryButtonText": "#ffffff",
+                  "primaryButtonTextDisabled": "#d2d0ce",
+                  "primaryButtonTextHovered": "#ffffff",
+                  "primaryButtonTextPressed": "#ffffff",
+                  "severeWarningBackground": "#FED9CC",
+                  "severeWarningIcon": "#D83B01",
+                  "smallInputBorder": "#605e5c",
+                  "successBackground": "#DFF6DD",
+                  "successIcon": "#107C10",
+                  "successText": "#107C10",
+                  "variantBorder": "#edebe9",
+                  "variantBorderHovered": "#a19f9d",
+                  "warningBackground": "#FFF4CE",
+                  "warningHighlight": "#ffb900",
+                  "warningIcon": "#797775",
+                  "warningText": "#323130",
+                },
+                "spacing": Object {
+                  "l1": "20px",
+                  "l2": "32px",
+                  "m": "16px",
+                  "s1": "8px",
+                  "s2": "4px",
+                },
+              }
+            }
+            validateOnLoad={true}
+            value=""
+          >
+            <div
+              className="ms-TextField is-required root-54"
+            >
+              <div
+                className="ms-TextField-wrapper"
+              >
+                <StyledLabelBase
+                  htmlFor="TextField0"
+                  id="TextFieldLabel2"
+                  required={true}
+                  styles={[Function]}
+                >
+                  <LabelBase
+                    htmlFor="TextField0"
+                    id="TextFieldLabel2"
+                    required={true}
+                    styles={[Function]}
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                  >
+                    <label
+                      className="ms-Label root-65"
+                      htmlFor="TextField0"
+                      id="TextFieldLabel2"
+                    >
+                      Enter new directory name
+                    </label>
+                  </LabelBase>
+                </StyledLabelBase>
+                <div
+                  className="ms-TextField-fieldGroup fieldGroup-55"
+                >
+                  <input
+                    aria-invalid={false}
+                    aria-labelledby="TextFieldLabel2"
+                    autoFocus={true}
+                    className="ms-TextField-field field-56"
+                    id="TextField0"
+                    name="collectionIdConfirmation"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    required={true}
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </TextFieldBase>
+        </StyledTextFieldBase>
+      </div>
+      <PanelFooterComponent
+        buttonLabel="Create"
       >
         <div
-          className="panelContentWrapper"
+          className="panelFooter"
         >
-          <div
-            className="firstdivbg headerline"
+          <CustomizedPrimaryButton
+            ariaLabel="Create"
+            id="sidePanelOkButton"
+            text="Create"
+            type="submit"
           >
-            <span
-              aria-level={2}
-              id="databaseTitle"
-              role="heading"
-            >
-              Create new directory
-            </span>
-            <CustomizedIconButton
-              ariaLabel="Close pane"
-              className="closePaneBtn"
-              iconProps={
+            <PrimaryButton
+              ariaLabel="Create"
+              id="sidePanelOkButton"
+              text="Create"
+              theme={
                 Object {
-                  "iconName": "Cancel",
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
+                  },
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
+                  },
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
+                  },
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
+                  },
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
+                  },
                 }
               }
-              onClick={[Function]}
-              tabIndex={0}
-              title="Close pane"
+              type="submit"
             >
-              <IconButton
-                ariaLabel="Close pane"
-                className="closePaneBtn"
-                iconProps={
-                  Object {
-                    "iconName": "Cancel",
-                  }
-                }
-                onClick={[Function]}
-                tabIndex={0}
-                theme={
-                  Object {
-                    "disableGlobalClassNames": false,
-                    "effects": Object {
-                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "roundedCorner2": "2px",
-                      "roundedCorner4": "4px",
-                      "roundedCorner6": "6px",
-                    },
-                    "fonts": Object {
-                      "large": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "18px",
-                        "fontWeight": 400,
-                      },
-                      "medium": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "14px",
-                        "fontWeight": 400,
-                      },
-                      "mediumPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "16px",
-                        "fontWeight": 400,
-                      },
-                      "mega": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "68px",
-                        "fontWeight": 600,
-                      },
-                      "small": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "smallPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "superLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "42px",
-                        "fontWeight": 600,
-                      },
-                      "tiny": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "20px",
-                        "fontWeight": 600,
-                      },
-                      "xLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "24px",
-                        "fontWeight": 600,
-                      },
-                      "xSmall": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xxLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "28px",
-                        "fontWeight": 600,
-                      },
-                      "xxLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "32px",
-                        "fontWeight": 600,
-                      },
-                    },
-                    "isInverted": false,
-                    "palette": Object {
-                      "accent": "#0078d4",
-                      "black": "#000000",
-                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                      "blue": "#0078d4",
-                      "blueDark": "#002050",
-                      "blueLight": "#00bcf2",
-                      "blueMid": "#00188f",
-                      "green": "#107c10",
-                      "greenDark": "#004b1c",
-                      "greenLight": "#bad80a",
-                      "magenta": "#b4009e",
-                      "magentaDark": "#5c005c",
-                      "magentaLight": "#e3008c",
-                      "neutralDark": "#201f1e",
-                      "neutralLight": "#edebe9",
-                      "neutralLighter": "#f3f2f1",
-                      "neutralLighterAlt": "#faf9f8",
-                      "neutralPrimary": "#323130",
-                      "neutralPrimaryAlt": "#3b3a39",
-                      "neutralQuaternary": "#d2d0ce",
-                      "neutralQuaternaryAlt": "#e1dfdd",
-                      "neutralSecondary": "#605e5c",
-                      "neutralSecondaryAlt": "#8a8886",
-                      "neutralTertiary": "#a19f9d",
-                      "neutralTertiaryAlt": "#c8c6c4",
-                      "orange": "#d83b01",
-                      "orangeLight": "#ea4300",
-                      "orangeLighter": "#ff8c00",
-                      "purple": "#5c2d91",
-                      "purpleDark": "#32145a",
-                      "purpleLight": "#b4a0ff",
-                      "red": "#e81123",
-                      "redDark": "#a4262c",
-                      "teal": "#008272",
-                      "tealDark": "#004b50",
-                      "tealLight": "#00b294",
-                      "themeDark": "#005a9e",
-                      "themeDarkAlt": "#106ebe",
-                      "themeDarker": "#004578",
-                      "themeLight": "#c7e0f4",
-                      "themeLighter": "#deecf9",
-                      "themeLighterAlt": "#eff6fc",
-                      "themePrimary": "#0078d4",
-                      "themeSecondary": "#2b88d8",
-                      "themeTertiary": "#71afe5",
-                      "white": "#ffffff",
-                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                      "yellow": "#ffb900",
-                      "yellowDark": "#d29200",
-                      "yellowLight": "#fff100",
-                    },
-                    "rtl": undefined,
-                    "semanticColors": Object {
-                      "accentButtonBackground": "#0078d4",
-                      "accentButtonText": "#ffffff",
-                      "actionLink": "#323130",
-                      "actionLinkHovered": "#201f1e",
-                      "blockingBackground": "#FDE7E9",
-                      "blockingIcon": "#FDE7E9",
-                      "bodyBackground": "#ffffff",
-                      "bodyBackgroundChecked": "#edebe9",
-                      "bodyBackgroundHovered": "#f3f2f1",
-                      "bodyDivider": "#edebe9",
-                      "bodyFrameBackground": "#ffffff",
-                      "bodyFrameDivider": "#edebe9",
-                      "bodyStandoutBackground": "#faf9f8",
-                      "bodySubtext": "#605e5c",
-                      "bodyText": "#323130",
-                      "bodyTextChecked": "#000000",
-                      "buttonBackground": "#ffffff",
-                      "buttonBackgroundChecked": "#c8c6c4",
-                      "buttonBackgroundCheckedHovered": "#edebe9",
-                      "buttonBackgroundDisabled": "#f3f2f1",
-                      "buttonBackgroundHovered": "#f3f2f1",
-                      "buttonBackgroundPressed": "#edebe9",
-                      "buttonBorder": "#8a8886",
-                      "buttonBorderDisabled": "#f3f2f1",
-                      "buttonText": "#323130",
-                      "buttonTextChecked": "#201f1e",
-                      "buttonTextCheckedHovered": "#000000",
-                      "buttonTextDisabled": "#a19f9d",
-                      "buttonTextHovered": "#201f1e",
-                      "buttonTextPressed": "#201f1e",
-                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "cardStandoutBackground": "#ffffff",
-                      "defaultStateBackground": "#faf9f8",
-                      "disabledBackground": "#f3f2f1",
-                      "disabledBodySubtext": "#c8c6c4",
-                      "disabledBodyText": "#a19f9d",
-                      "disabledBorder": "#c8c6c4",
-                      "disabledSubtext": "#d2d0ce",
-                      "disabledText": "#a19f9d",
-                      "errorBackground": "#FDE7E9",
-                      "errorIcon": "#A80000",
-                      "errorText": "#a4262c",
-                      "focusBorder": "#605e5c",
-                      "infoBackground": "#f3f2f1",
-                      "infoIcon": "#605e5c",
-                      "inputBackground": "#ffffff",
-                      "inputBackgroundChecked": "#0078d4",
-                      "inputBackgroundCheckedHovered": "#005a9e",
-                      "inputBorder": "#605e5c",
-                      "inputBorderHovered": "#323130",
-                      "inputFocusBorderAlt": "#0078d4",
-                      "inputForegroundChecked": "#ffffff",
-                      "inputIcon": "#0078d4",
-                      "inputIconDisabled": "#a19f9d",
-                      "inputIconHovered": "#005a9e",
-                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                      "inputPlaceholderText": "#605e5c",
-                      "inputText": "#323130",
-                      "inputTextHovered": "#201f1e",
-                      "link": "#0078d4",
-                      "linkHovered": "#004578",
-                      "listBackground": "#ffffff",
-                      "listHeaderBackgroundHovered": "#f3f2f1",
-                      "listHeaderBackgroundPressed": "#edebe9",
-                      "listItemBackgroundChecked": "#edebe9",
-                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                      "listItemBackgroundHovered": "#f3f2f1",
-                      "listText": "#323130",
-                      "listTextColor": "#323130",
-                      "menuBackground": "#ffffff",
-                      "menuDivider": "#c8c6c4",
-                      "menuHeader": "#0078d4",
-                      "menuIcon": "#0078d4",
-                      "menuItemBackgroundChecked": "#edebe9",
-                      "menuItemBackgroundHovered": "#f3f2f1",
-                      "menuItemBackgroundPressed": "#edebe9",
-                      "menuItemText": "#323130",
-                      "menuItemTextHovered": "#201f1e",
-                      "messageLink": "#005A9E",
-                      "messageLinkHovered": "#004578",
-                      "messageText": "#323130",
-                      "primaryButtonBackground": "#0078d4",
-                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                      "primaryButtonBackgroundHovered": "#106ebe",
-                      "primaryButtonBackgroundPressed": "#005a9e",
-                      "primaryButtonBorder": "transparent",
-                      "primaryButtonText": "#ffffff",
-                      "primaryButtonTextDisabled": "#d2d0ce",
-                      "primaryButtonTextHovered": "#ffffff",
-                      "primaryButtonTextPressed": "#ffffff",
-                      "severeWarningBackground": "#FED9CC",
-                      "severeWarningIcon": "#D83B01",
-                      "smallInputBorder": "#605e5c",
-                      "successBackground": "#DFF6DD",
-                      "successIcon": "#107C10",
-                      "successText": "#107C10",
-                      "variantBorder": "#edebe9",
-                      "variantBorderHovered": "#a19f9d",
-                      "warningBackground": "#FFF4CE",
-                      "warningHighlight": "#ffb900",
-                      "warningIcon": "#797775",
-                      "warningText": "#323130",
-                    },
-                    "spacing": Object {
-                      "l1": "20px",
-                      "l2": "32px",
-                      "m": "16px",
-                      "s1": "8px",
-                      "s2": "4px",
-                    },
-                  }
-                }
-                title="Close pane"
-              >
-                <BaseButton
-                  ariaLabel="Close pane"
-                  baseClassName="ms-Button"
-                  className="closePaneBtn"
-                  iconProps={
-                    Object {
-                      "iconName": "Cancel",
-                    }
-                  }
-                  onClick={[Function]}
-                  onRenderDescription={[Function]}
-                  onRenderText={[Function]}
-                  split={false}
-                  styles={
-                    Object {
-                      "description": Object {
-                        "display": "block",
-                      },
-                      "flexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "icon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "16px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "iconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "label": Object {
-                        "display": "block",
-                        "lineHeight": "100%",
-                        "margin": "0 4px",
-                      },
-                      "menuIcon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "12px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "menuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "root": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        Object {
-                          "border": "1px solid #8a8886",
-                          "borderRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "padding": "0 16px",
-                          "selectors": Object {
-                            ":active > *": Object {
-                              "left": 0,
-                              "position": "relative",
-                              "top": 0,
-                            },
-                          },
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                        },
-                        Object {
-                          "backgroundColor": "transparent",
-                          "border": "none",
-                          "color": "#0078d4",
-                          "height": "32px",
-                          "padding": "0 4px",
-                          "width": "32px",
-                        },
-                      ],
-                      "rootChecked": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootCheckedHovered": Object {
-                        "backgroundColor": "#e1dfdd",
-                        "color": "#005a9e",
-                      },
-                      "rootDisabled": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "borderColor": "#f3f2f1",
-                          "color": "#a19f9d",
-                          "cursor": "default",
-                          "selectors": Object {
-                            ":focus": Object {
-                              "outline": 0,
-                            },
-                            ":hover": Object {
-                              "outline": 0,
-                            },
-                          },
-                        },
-                        Object {
-                          "color": "#c8c6c4",
-                        },
-                      ],
-                      "rootExpanded": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootHasMenu": Object {
-                        "width": "auto",
-                      },
-                      "rootHovered": Object {
-                        "backgroundColor": "#f3f2f1",
-                        "color": "#106ebe",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "borderColor": "Highlight",
-                            "color": "Highlight",
-                          },
-                        },
-                      },
-                      "rootPressed": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "screenReaderText": Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "width": 1,
-                      },
-                      "splitButtonContainer": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid #ffffff",
-                              "bottom": 3,
-                              "content": "\\"\\"",
-                              "left": 3,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 3,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "none",
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 3,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "display": "inline-flex",
-                          "selectors": Object {
-                            ".ms-Button--default": Object {
-                              "borderBottomRightRadius": "0",
-                              "borderRight": "none",
-                              "borderTopRightRadius": "0",
-                            },
-                            ".ms-Button--primary": Object {
-                              "border": "none",
-                              "borderBottomRightRadius": "0",
-                              "borderTopRightRadius": "0",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "border": "1px solid WindowText",
-                                  "borderRightWidth": "0",
-                                  "color": "WindowText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            ".ms-Button--primary + .ms-Button": Object {
-                              "border": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "1px solid WindowText",
-                                  "borderLeftWidth": "0",
-                                },
-                              },
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonContainerChecked": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerCheckedHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerDisabled": Object {
-                        "border": "none",
-                        "outline": "none",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "Window",
-                            "borderColor": "GrayText",
-                            "color": "GrayText",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "splitButtonContainerFocused": Object {
-                        "outline": "none!important",
-                      },
-                      "splitButtonContainerHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Highlight",
-                                "color": "Window",
-                              },
-                            },
-                          },
-                          ".ms-Button.is-disabled": Object {
-                            "color": "#a19f9d",
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonDivider": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "WindowText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonDividerDisabled": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "GrayText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonFlexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "splitButtonMenuButton": Object {
-                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                          ".ms-Button-menuIcon": Object {
-                            "color": "WindowText",
-                          },
-                        },
-                        "border": "1px solid #8a8886",
-                        "borderBottomRightRadius": "2px",
-                        "borderLeft": "none",
-                        "borderRadius": 0,
-                        "borderTopRightRadius": "2px",
-                        "boxSizing": "border-box",
-                        "cursor": "pointer",
-                        "display": "inline-block",
-                        "height": "auto",
-                        "marginBottom": 0,
-                        "marginLeft": -1,
-                        "marginRight": 0,
-                        "marginTop": 0,
-                        "outline": "transparent",
-                        "padding": 6,
-                        "textAlign": "center",
-                        "textDecoration": "none",
-                        "userSelect": "none",
-                        "verticalAlign": "top",
-                        "width": 32,
-                      },
-                      "splitButtonMenuButtonDisabled": Object {
-                        "border": "none",
-                        "pointerEvents": "none",
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ".ms-Button-menuIcon": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ":hover": Object {
-                            "cursor": "default",
-                          },
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "Window",
-                            "border": "1px solid GrayText",
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "splitButtonMenuFocused": Object {
-                        "outline": "transparent",
-                        "position": "relative",
-                        "selectors": Object {
-                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                            "border": "1px solid #ffffff",
-                            "bottom": 3,
-                            "content": "\\"\\"",
-                            "left": 3,
-                            "outline": "1px solid #605e5c",
-                            "position": "absolute",
-                            "right": 3,
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "border": "none",
-                                "bottom": -2,
-                                "left": -2,
-                                "right": -2,
-                                "top": -2,
-                              },
-                            },
-                            "top": 3,
-                            "zIndex": 1,
-                          },
-                          "::-moz-focus-inner": Object {
-                            "border": "0",
-                          },
-                        },
-                      },
-                      "textContainer": Object {
-                        "display": "block",
-                        "flexGrow": 1,
-                      },
-                    }
-                  }
-                  tabIndex={0}
-                  theme={
-                    Object {
-                      "disableGlobalClassNames": false,
-                      "effects": Object {
-                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "roundedCorner2": "2px",
-                        "roundedCorner4": "4px",
-                        "roundedCorner6": "6px",
-                      },
-                      "fonts": Object {
-                        "large": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "18px",
-                          "fontWeight": 400,
-                        },
-                        "medium": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        "mediumPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "16px",
-                          "fontWeight": 400,
-                        },
-                        "mega": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "68px",
-                          "fontWeight": 600,
-                        },
-                        "small": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "smallPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "superLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "42px",
-                          "fontWeight": 600,
-                        },
-                        "tiny": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "20px",
-                          "fontWeight": 600,
-                        },
-                        "xLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "24px",
-                          "fontWeight": 600,
-                        },
-                        "xSmall": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xxLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "28px",
-                          "fontWeight": 600,
-                        },
-                        "xxLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "32px",
-                          "fontWeight": 600,
-                        },
-                      },
-                      "isInverted": false,
-                      "palette": Object {
-                        "accent": "#0078d4",
-                        "black": "#000000",
-                        "blackTranslucent40": "rgba(0,0,0,.4)",
-                        "blue": "#0078d4",
-                        "blueDark": "#002050",
-                        "blueLight": "#00bcf2",
-                        "blueMid": "#00188f",
-                        "green": "#107c10",
-                        "greenDark": "#004b1c",
-                        "greenLight": "#bad80a",
-                        "magenta": "#b4009e",
-                        "magentaDark": "#5c005c",
-                        "magentaLight": "#e3008c",
-                        "neutralDark": "#201f1e",
-                        "neutralLight": "#edebe9",
-                        "neutralLighter": "#f3f2f1",
-                        "neutralLighterAlt": "#faf9f8",
-                        "neutralPrimary": "#323130",
-                        "neutralPrimaryAlt": "#3b3a39",
-                        "neutralQuaternary": "#d2d0ce",
-                        "neutralQuaternaryAlt": "#e1dfdd",
-                        "neutralSecondary": "#605e5c",
-                        "neutralSecondaryAlt": "#8a8886",
-                        "neutralTertiary": "#a19f9d",
-                        "neutralTertiaryAlt": "#c8c6c4",
-                        "orange": "#d83b01",
-                        "orangeLight": "#ea4300",
-                        "orangeLighter": "#ff8c00",
-                        "purple": "#5c2d91",
-                        "purpleDark": "#32145a",
-                        "purpleLight": "#b4a0ff",
-                        "red": "#e81123",
-                        "redDark": "#a4262c",
-                        "teal": "#008272",
-                        "tealDark": "#004b50",
-                        "tealLight": "#00b294",
-                        "themeDark": "#005a9e",
-                        "themeDarkAlt": "#106ebe",
-                        "themeDarker": "#004578",
-                        "themeLight": "#c7e0f4",
-                        "themeLighter": "#deecf9",
-                        "themeLighterAlt": "#eff6fc",
-                        "themePrimary": "#0078d4",
-                        "themeSecondary": "#2b88d8",
-                        "themeTertiary": "#71afe5",
-                        "white": "#ffffff",
-                        "whiteTranslucent40": "rgba(255,255,255,.4)",
-                        "yellow": "#ffb900",
-                        "yellowDark": "#d29200",
-                        "yellowLight": "#fff100",
-                      },
-                      "rtl": undefined,
-                      "semanticColors": Object {
-                        "accentButtonBackground": "#0078d4",
-                        "accentButtonText": "#ffffff",
-                        "actionLink": "#323130",
-                        "actionLinkHovered": "#201f1e",
-                        "blockingBackground": "#FDE7E9",
-                        "blockingIcon": "#FDE7E9",
-                        "bodyBackground": "#ffffff",
-                        "bodyBackgroundChecked": "#edebe9",
-                        "bodyBackgroundHovered": "#f3f2f1",
-                        "bodyDivider": "#edebe9",
-                        "bodyFrameBackground": "#ffffff",
-                        "bodyFrameDivider": "#edebe9",
-                        "bodyStandoutBackground": "#faf9f8",
-                        "bodySubtext": "#605e5c",
-                        "bodyText": "#323130",
-                        "bodyTextChecked": "#000000",
-                        "buttonBackground": "#ffffff",
-                        "buttonBackgroundChecked": "#c8c6c4",
-                        "buttonBackgroundCheckedHovered": "#edebe9",
-                        "buttonBackgroundDisabled": "#f3f2f1",
-                        "buttonBackgroundHovered": "#f3f2f1",
-                        "buttonBackgroundPressed": "#edebe9",
-                        "buttonBorder": "#8a8886",
-                        "buttonBorderDisabled": "#f3f2f1",
-                        "buttonText": "#323130",
-                        "buttonTextChecked": "#201f1e",
-                        "buttonTextCheckedHovered": "#000000",
-                        "buttonTextDisabled": "#a19f9d",
-                        "buttonTextHovered": "#201f1e",
-                        "buttonTextPressed": "#201f1e",
-                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "cardStandoutBackground": "#ffffff",
-                        "defaultStateBackground": "#faf9f8",
-                        "disabledBackground": "#f3f2f1",
-                        "disabledBodySubtext": "#c8c6c4",
-                        "disabledBodyText": "#a19f9d",
-                        "disabledBorder": "#c8c6c4",
-                        "disabledSubtext": "#d2d0ce",
-                        "disabledText": "#a19f9d",
-                        "errorBackground": "#FDE7E9",
-                        "errorIcon": "#A80000",
-                        "errorText": "#a4262c",
-                        "focusBorder": "#605e5c",
-                        "infoBackground": "#f3f2f1",
-                        "infoIcon": "#605e5c",
-                        "inputBackground": "#ffffff",
-                        "inputBackgroundChecked": "#0078d4",
-                        "inputBackgroundCheckedHovered": "#005a9e",
-                        "inputBorder": "#605e5c",
-                        "inputBorderHovered": "#323130",
-                        "inputFocusBorderAlt": "#0078d4",
-                        "inputForegroundChecked": "#ffffff",
-                        "inputIcon": "#0078d4",
-                        "inputIconDisabled": "#a19f9d",
-                        "inputIconHovered": "#005a9e",
-                        "inputPlaceholderBackgroundChecked": "#deecf9",
-                        "inputPlaceholderText": "#605e5c",
-                        "inputText": "#323130",
-                        "inputTextHovered": "#201f1e",
-                        "link": "#0078d4",
-                        "linkHovered": "#004578",
-                        "listBackground": "#ffffff",
-                        "listHeaderBackgroundHovered": "#f3f2f1",
-                        "listHeaderBackgroundPressed": "#edebe9",
-                        "listItemBackgroundChecked": "#edebe9",
-                        "listItemBackgroundCheckedHovered": "#e1dfdd",
-                        "listItemBackgroundHovered": "#f3f2f1",
-                        "listText": "#323130",
-                        "listTextColor": "#323130",
-                        "menuBackground": "#ffffff",
-                        "menuDivider": "#c8c6c4",
-                        "menuHeader": "#0078d4",
-                        "menuIcon": "#0078d4",
-                        "menuItemBackgroundChecked": "#edebe9",
-                        "menuItemBackgroundHovered": "#f3f2f1",
-                        "menuItemBackgroundPressed": "#edebe9",
-                        "menuItemText": "#323130",
-                        "menuItemTextHovered": "#201f1e",
-                        "messageLink": "#005A9E",
-                        "messageLinkHovered": "#004578",
-                        "messageText": "#323130",
-                        "primaryButtonBackground": "#0078d4",
-                        "primaryButtonBackgroundDisabled": "#f3f2f1",
-                        "primaryButtonBackgroundHovered": "#106ebe",
-                        "primaryButtonBackgroundPressed": "#005a9e",
-                        "primaryButtonBorder": "transparent",
-                        "primaryButtonText": "#ffffff",
-                        "primaryButtonTextDisabled": "#d2d0ce",
-                        "primaryButtonTextHovered": "#ffffff",
-                        "primaryButtonTextPressed": "#ffffff",
-                        "severeWarningBackground": "#FED9CC",
-                        "severeWarningIcon": "#D83B01",
-                        "smallInputBorder": "#605e5c",
-                        "successBackground": "#DFF6DD",
-                        "successIcon": "#107C10",
-                        "successText": "#107C10",
-                        "variantBorder": "#edebe9",
-                        "variantBorderHovered": "#a19f9d",
-                        "warningBackground": "#FFF4CE",
-                        "warningHighlight": "#ffb900",
-                        "warningIcon": "#797775",
-                        "warningText": "#323130",
-                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
-                      },
-                    }
-                  }
-                  title="Close pane"
-                  variantClassName="ms-Button--icon"
-                >
-                  <button
-                    aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-53"
-                    data-is-focusable={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    tabIndex={0}
-                    title="Close pane"
-                    type="button"
-                  >
-                    <span
-                      className="ms-Button-flexContainer flexContainer-54"
-                      data-automationid="splitbuttonprimary"
-                    >
-                      <FontIcon
-                        className="ms-Button-icon icon-56"
-                        iconName="Cancel"
-                      >
-                        <i
-                          aria-hidden={true}
-                          className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
-                          data-icon-name="Cancel"
-                          style={
-                            Object {
-                              "fontFamily": "\\"FabricMDL2Icons\\"",
-                            }
-                          }
-                        >
-                          
-                        </i>
-                      </FontIcon>
-                    </span>
-                  </button>
-                  <FocusRects />
-                </BaseButton>
-              </IconButton>
-            </CustomizedIconButton>
-          </div>
-          <div
-            aria-live="assertive"
-            className="warningErrorContainer"
-            hidden={true}
-          >
-            <div
-              className="warningErrorContent"
-            >
-              <span>
-                <img
-                  alt="Error"
-                  className="paneErrorIcon"
-                  src=""
-                />
-              </span>
-              <span
-                className="warningErrorDetailsLinkContainer"
-              >
-                <span
-                  className="formErrors"
-                  title=""
-                />
-                <a
-                  className="errorLink"
-                  hidden={true}
-                  onClick={[Function]}
-                  role="link"
-                >
-                  More details
-                </a>
-              </span>
-            </div>
-          </div>
-          <div
-            className="paneMainContent"
-          >
-            <StyledTextFieldBase
-              aria-label="Enter new directory name"
-              autoFocus={true}
-              label="Enter new directory name"
-              name="collectionIdConfirmation"
-              onChange={[Function]}
-              required={true}
-              value=""
-            >
-              <TextFieldBase
-                aria-label="Enter new directory name"
-                autoFocus={true}
-                deferredValidationTime={200}
-                label="Enter new directory name"
-                name="collectionIdConfirmation"
-                onChange={[Function]}
-                required={true}
-                resizable={true}
-                styles={[Function]}
-                theme={
-                  Object {
-                    "disableGlobalClassNames": false,
-                    "effects": Object {
-                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "roundedCorner2": "2px",
-                      "roundedCorner4": "4px",
-                      "roundedCorner6": "6px",
-                    },
-                    "fonts": Object {
-                      "large": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "18px",
-                        "fontWeight": 400,
-                      },
-                      "medium": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "14px",
-                        "fontWeight": 400,
-                      },
-                      "mediumPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "16px",
-                        "fontWeight": 400,
-                      },
-                      "mega": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "68px",
-                        "fontWeight": 600,
-                      },
-                      "small": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "smallPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "superLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "42px",
-                        "fontWeight": 600,
-                      },
-                      "tiny": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "20px",
-                        "fontWeight": 600,
-                      },
-                      "xLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "24px",
-                        "fontWeight": 600,
-                      },
-                      "xSmall": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xxLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "28px",
-                        "fontWeight": 600,
-                      },
-                      "xxLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "32px",
-                        "fontWeight": 600,
-                      },
-                    },
-                    "isInverted": false,
-                    "palette": Object {
-                      "accent": "#0078d4",
-                      "black": "#000000",
-                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                      "blue": "#0078d4",
-                      "blueDark": "#002050",
-                      "blueLight": "#00bcf2",
-                      "blueMid": "#00188f",
-                      "green": "#107c10",
-                      "greenDark": "#004b1c",
-                      "greenLight": "#bad80a",
-                      "magenta": "#b4009e",
-                      "magentaDark": "#5c005c",
-                      "magentaLight": "#e3008c",
-                      "neutralDark": "#201f1e",
-                      "neutralLight": "#edebe9",
-                      "neutralLighter": "#f3f2f1",
-                      "neutralLighterAlt": "#faf9f8",
-                      "neutralPrimary": "#323130",
-                      "neutralPrimaryAlt": "#3b3a39",
-                      "neutralQuaternary": "#d2d0ce",
-                      "neutralQuaternaryAlt": "#e1dfdd",
-                      "neutralSecondary": "#605e5c",
-                      "neutralSecondaryAlt": "#8a8886",
-                      "neutralTertiary": "#a19f9d",
-                      "neutralTertiaryAlt": "#c8c6c4",
-                      "orange": "#d83b01",
-                      "orangeLight": "#ea4300",
-                      "orangeLighter": "#ff8c00",
-                      "purple": "#5c2d91",
-                      "purpleDark": "#32145a",
-                      "purpleLight": "#b4a0ff",
-                      "red": "#e81123",
-                      "redDark": "#a4262c",
-                      "teal": "#008272",
-                      "tealDark": "#004b50",
-                      "tealLight": "#00b294",
-                      "themeDark": "#005a9e",
-                      "themeDarkAlt": "#106ebe",
-                      "themeDarker": "#004578",
-                      "themeLight": "#c7e0f4",
-                      "themeLighter": "#deecf9",
-                      "themeLighterAlt": "#eff6fc",
-                      "themePrimary": "#0078d4",
-                      "themeSecondary": "#2b88d8",
-                      "themeTertiary": "#71afe5",
-                      "white": "#ffffff",
-                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                      "yellow": "#ffb900",
-                      "yellowDark": "#d29200",
-                      "yellowLight": "#fff100",
-                    },
-                    "rtl": undefined,
-                    "semanticColors": Object {
-                      "accentButtonBackground": "#0078d4",
-                      "accentButtonText": "#ffffff",
-                      "actionLink": "#323130",
-                      "actionLinkHovered": "#201f1e",
-                      "blockingBackground": "#FDE7E9",
-                      "blockingIcon": "#FDE7E9",
-                      "bodyBackground": "#ffffff",
-                      "bodyBackgroundChecked": "#edebe9",
-                      "bodyBackgroundHovered": "#f3f2f1",
-                      "bodyDivider": "#edebe9",
-                      "bodyFrameBackground": "#ffffff",
-                      "bodyFrameDivider": "#edebe9",
-                      "bodyStandoutBackground": "#faf9f8",
-                      "bodySubtext": "#605e5c",
-                      "bodyText": "#323130",
-                      "bodyTextChecked": "#000000",
-                      "buttonBackground": "#ffffff",
-                      "buttonBackgroundChecked": "#c8c6c4",
-                      "buttonBackgroundCheckedHovered": "#edebe9",
-                      "buttonBackgroundDisabled": "#f3f2f1",
-                      "buttonBackgroundHovered": "#f3f2f1",
-                      "buttonBackgroundPressed": "#edebe9",
-                      "buttonBorder": "#8a8886",
-                      "buttonBorderDisabled": "#f3f2f1",
-                      "buttonText": "#323130",
-                      "buttonTextChecked": "#201f1e",
-                      "buttonTextCheckedHovered": "#000000",
-                      "buttonTextDisabled": "#a19f9d",
-                      "buttonTextHovered": "#201f1e",
-                      "buttonTextPressed": "#201f1e",
-                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "cardStandoutBackground": "#ffffff",
-                      "defaultStateBackground": "#faf9f8",
-                      "disabledBackground": "#f3f2f1",
-                      "disabledBodySubtext": "#c8c6c4",
-                      "disabledBodyText": "#a19f9d",
-                      "disabledBorder": "#c8c6c4",
-                      "disabledSubtext": "#d2d0ce",
-                      "disabledText": "#a19f9d",
-                      "errorBackground": "#FDE7E9",
-                      "errorIcon": "#A80000",
-                      "errorText": "#a4262c",
-                      "focusBorder": "#605e5c",
-                      "infoBackground": "#f3f2f1",
-                      "infoIcon": "#605e5c",
-                      "inputBackground": "#ffffff",
-                      "inputBackgroundChecked": "#0078d4",
-                      "inputBackgroundCheckedHovered": "#005a9e",
-                      "inputBorder": "#605e5c",
-                      "inputBorderHovered": "#323130",
-                      "inputFocusBorderAlt": "#0078d4",
-                      "inputForegroundChecked": "#ffffff",
-                      "inputIcon": "#0078d4",
-                      "inputIconDisabled": "#a19f9d",
-                      "inputIconHovered": "#005a9e",
-                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                      "inputPlaceholderText": "#605e5c",
-                      "inputText": "#323130",
-                      "inputTextHovered": "#201f1e",
-                      "link": "#0078d4",
-                      "linkHovered": "#004578",
-                      "listBackground": "#ffffff",
-                      "listHeaderBackgroundHovered": "#f3f2f1",
-                      "listHeaderBackgroundPressed": "#edebe9",
-                      "listItemBackgroundChecked": "#edebe9",
-                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                      "listItemBackgroundHovered": "#f3f2f1",
-                      "listText": "#323130",
-                      "listTextColor": "#323130",
-                      "menuBackground": "#ffffff",
-                      "menuDivider": "#c8c6c4",
-                      "menuHeader": "#0078d4",
-                      "menuIcon": "#0078d4",
-                      "menuItemBackgroundChecked": "#edebe9",
-                      "menuItemBackgroundHovered": "#f3f2f1",
-                      "menuItemBackgroundPressed": "#edebe9",
-                      "menuItemText": "#323130",
-                      "menuItemTextHovered": "#201f1e",
-                      "messageLink": "#005A9E",
-                      "messageLinkHovered": "#004578",
-                      "messageText": "#323130",
-                      "primaryButtonBackground": "#0078d4",
-                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                      "primaryButtonBackgroundHovered": "#106ebe",
-                      "primaryButtonBackgroundPressed": "#005a9e",
-                      "primaryButtonBorder": "transparent",
-                      "primaryButtonText": "#ffffff",
-                      "primaryButtonTextDisabled": "#d2d0ce",
-                      "primaryButtonTextHovered": "#ffffff",
-                      "primaryButtonTextPressed": "#ffffff",
-                      "severeWarningBackground": "#FED9CC",
-                      "severeWarningIcon": "#D83B01",
-                      "smallInputBorder": "#605e5c",
-                      "successBackground": "#DFF6DD",
-                      "successIcon": "#107C10",
-                      "successText": "#107C10",
-                      "variantBorder": "#edebe9",
-                      "variantBorderHovered": "#a19f9d",
-                      "warningBackground": "#FFF4CE",
-                      "warningHighlight": "#ffb900",
-                      "warningIcon": "#797775",
-                      "warningText": "#323130",
-                    },
-                    "spacing": Object {
-                      "l1": "20px",
-                      "l2": "32px",
-                      "m": "16px",
-                      "s1": "8px",
-                      "s2": "4px",
-                    },
-                  }
-                }
-                validateOnLoad={true}
-                value=""
-              >
-                <div
-                  className="ms-TextField is-required root-63"
-                >
-                  <div
-                    className="ms-TextField-wrapper"
-                  >
-                    <StyledLabelBase
-                      htmlFor="TextField3"
-                      id="TextFieldLabel5"
-                      required={true}
-                      styles={[Function]}
-                    >
-                      <LabelBase
-                        htmlFor="TextField3"
-                        id="TextFieldLabel5"
-                        required={true}
-                        styles={[Function]}
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                      >
-                        <label
-                          className="ms-Label root-74"
-                          htmlFor="TextField3"
-                          id="TextFieldLabel5"
-                        >
-                          Enter new directory name
-                        </label>
-                      </LabelBase>
-                    </StyledLabelBase>
-                    <div
-                      className="ms-TextField-fieldGroup fieldGroup-64"
-                    >
-                      <input
-                        aria-invalid={false}
-                        aria-labelledby="TextFieldLabel5"
-                        autoFocus={true}
-                        className="ms-TextField-field field-65"
-                        id="TextField3"
-                        name="collectionIdConfirmation"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        onInput={[Function]}
-                        required={true}
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
-              </TextFieldBase>
-            </StyledTextFieldBase>
-          </div>
-          <div
-            className="paneFooter"
-          >
-            <div
-              className="leftpanel-okbut"
-            >
-              <CustomizedPrimaryButton
-                ariaLabel="Submit"
-                className="genericPaneSubmitBtn"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "visibility": "visible",
-                  }
-                }
-                tabIndex={0}
+              <CustomizedDefaultButton
+                ariaLabel="Create"
+                id="sidePanelOkButton"
+                onRenderDescription={[Function]}
+                primary={true}
                 text="Create"
-                title="Submit"
-              >
-                <PrimaryButton
-                  ariaLabel="Submit"
-                  className="genericPaneSubmitBtn"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
                   }
-                  tabIndex={0}
+                }
+                type="submit"
+              >
+                <DefaultButton
+                  ariaLabel="Create"
+                  id="sidePanelOkButton"
+                  onRenderDescription={[Function]}
+                  primary={true}
                   text="Create"
                   theme={
                     Object {
@@ -3023,20 +1580,586 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       },
                     }
                   }
-                  title="Submit"
+                  type="submit"
                 >
-                  <CustomizedDefaultButton
-                    ariaLabel="Submit"
-                    className="genericPaneSubmitBtn"
-                    onClick={[Function]}
+                  <BaseButton
+                    ariaLabel="Create"
+                    baseClassName="ms-Button"
+                    id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}
-                    style={
+                    split={false}
+                    styles={
                       Object {
-                        "visibility": "visible",
+                        "description": Object {
+                          "display": "block",
+                        },
+                        "flexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "icon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "16px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "iconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "label": Array [
+                          Object {
+                            "display": "block",
+                            "lineHeight": "100%",
+                            "margin": "0 4px",
+                          },
+                          Object {
+                            "fontWeight": 600,
+                          },
+                        ],
+                        "menuIcon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "12px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "menuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "root": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          Object {
+                            "border": "1px solid #8a8886",
+                            "borderRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "padding": "0 16px",
+                            "selectors": Object {
+                              ":active > *": Object {
+                                "left": 0,
+                                "position": "relative",
+                                "top": 0,
+                              },
+                            },
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                          },
+                          Object {
+                            "height": "32px",
+                            "minWidth": "80px",
+                          },
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "border": "1px solid #0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus": Object {
+                                "selectors": Object {
+                                  ":after": Object {
+                                    "border": "none",
+                                    "outlineColor": "#ffffff",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "WindowText",
+                                "borderColor": "WindowText",
+                                "color": "Window",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                        ],
+                        "rootChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootCheckedHovered": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootDisabled": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "borderColor": "#f3f2f1",
+                            "color": "#a19f9d",
+                            "cursor": "default",
+                            "selectors": Object {
+                              ":focus": Object {
+                                "outline": 0,
+                              },
+                              ":hover": Object {
+                                "outline": 0,
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "color": "#d2d0ce",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "borderColor": "GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "rootExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootHovered": Object {
+                          "backgroundColor": "#106ebe",
+                          "border": "1px solid #106ebe",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "borderColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        "rootPressed": Object {
+                          "backgroundColor": "#005a9e",
+                          "border": "1px solid #005a9e",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "borderColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "screenReaderText": Object {
+                          "border": 0,
+                          "height": 1,
+                          "margin": -1,
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "absolute",
+                          "width": 1,
+                        },
+                        "splitButtonContainer": Array [
+                          Object {
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                              },
+                            },
+                          },
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid #ffffff",
+                                "bottom": 3,
+                                "content": "\\"\\"",
+                                "left": 3,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 3,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 3,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "display": "inline-flex",
+                            "selectors": Object {
+                              ".ms-Button--default": Object {
+                                "borderBottomRightRadius": "0",
+                                "borderRight": "none",
+                                "borderTopRightRadius": "0",
+                              },
+                              ".ms-Button--primary": Object {
+                                "border": "none",
+                                "borderBottomRightRadius": "0",
+                                "borderTopRightRadius": "0",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid WindowText",
+                                    "borderRightWidth": "0",
+                                    "color": "WindowText",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                              ".ms-Button--primary + .ms-Button": Object {
+                                "border": "none",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "1px solid WindowText",
+                                    "borderLeftWidth": "0",
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonContainerChecked": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerCheckedHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerDisabled": Object {
+                          "border": "none",
+                          "outline": "none",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "splitButtonContainerFocused": Object {
+                          "outline": "none!important",
+                        },
+                        "splitButtonContainerHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            ".ms-Button.is-disabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonDivider": Array [
+                          Object {
+                            "backgroundColor": "#ffffff",
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                          Object {
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                        ],
+                        "splitButtonDividerDisabled": Object {
+                          "bottom": 8,
+                          "position": "absolute",
+                          "right": 31,
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "GrayText",
+                            },
+                          },
+                          "top": 8,
+                          "width": 1,
+                        },
+                        "splitButtonFlexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "splitButtonMenuButton": Array [
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#106ebe",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "Highlight",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                          },
+                          Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              ".ms-Button-menuIcon": Object {
+                                "color": "WindowText",
+                              },
+                            },
+                            "border": "1px solid #8a8886",
+                            "borderBottomRightRadius": "2px",
+                            "borderLeft": "none",
+                            "borderRadius": 0,
+                            "borderTopRightRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": "auto",
+                            "marginBottom": 0,
+                            "marginLeft": -1,
+                            "marginRight": 0,
+                            "marginTop": 0,
+                            "outline": "transparent",
+                            "padding": 6,
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                            "verticalAlign": "top",
+                            "width": 32,
+                          },
+                        ],
+                        "splitButtonMenuButtonChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuButtonDisabled": Array [
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#f3f2f1",
+                              },
+                            },
+                          },
+                          Object {
+                            "border": "none",
+                            "pointerEvents": "none",
+                            "selectors": Object {
+                              ".ms-Button--primary": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ".ms-Button-menuIcon": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ":hover": Object {
+                                "cursor": "default",
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "border": "1px solid GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonMenuButtonExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuFocused": Object {
+                          "outline": "transparent",
+                          "position": "relative",
+                          "selectors": Object {
+                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                              "border": "1px solid #ffffff",
+                              "bottom": 3,
+                              "content": "\\"\\"",
+                              "left": 3,
+                              "outline": "1px solid #605e5c",
+                              "position": "absolute",
+                              "right": 3,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "border": "none",
+                                  "bottom": -2,
+                                  "left": -2,
+                                  "right": -2,
+                                  "top": -2,
+                                },
+                              },
+                              "top": 3,
+                              "zIndex": 1,
+                            },
+                            "::-moz-focus-inner": Object {
+                              "border": "0",
+                            },
+                          },
+                        },
+                        "splitButtonMenuIcon": Object {
+                          "color": "#ffffff",
+                        },
+                        "splitButtonMenuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "textContainer": Object {
+                          "display": "block",
+                          "flexGrow": 1,
+                        },
                       }
                     }
-                    tabIndex={0}
                     text="Create"
                     theme={
                       Object {
@@ -3311,1214 +2434,48 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                         },
                       }
                     }
-                    title="Submit"
+                    type="submit"
+                    variantClassName="ms-Button--primary"
                   >
-                    <DefaultButton
-                      ariaLabel="Submit"
-                      className="genericPaneSubmitBtn"
+                    <button
+                      aria-label="Create"
+                      className="ms-Button ms-Button--primary root-66"
+                      data-is-focusable={true}
+                      id="sidePanelOkButton"
                       onClick={[Function]}
-                      onRenderDescription={[Function]}
-                      primary={true}
-                      style={
-                        Object {
-                          "visibility": "visible",
-                        }
-                      }
-                      tabIndex={0}
-                      text="Create"
-                      theme={
-                        Object {
-                          "disableGlobalClassNames": false,
-                          "effects": Object {
-                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "roundedCorner2": "2px",
-                            "roundedCorner4": "4px",
-                            "roundedCorner6": "6px",
-                          },
-                          "fonts": Object {
-                            "large": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "18px",
-                              "fontWeight": 400,
-                            },
-                            "medium": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "14px",
-                              "fontWeight": 400,
-                            },
-                            "mediumPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "16px",
-                              "fontWeight": 400,
-                            },
-                            "mega": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "68px",
-                              "fontWeight": 600,
-                            },
-                            "small": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "smallPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "superLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "42px",
-                              "fontWeight": 600,
-                            },
-                            "tiny": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "20px",
-                              "fontWeight": 600,
-                            },
-                            "xLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "24px",
-                              "fontWeight": 600,
-                            },
-                            "xSmall": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xxLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "28px",
-                              "fontWeight": 600,
-                            },
-                            "xxLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "32px",
-                              "fontWeight": 600,
-                            },
-                          },
-                          "isInverted": false,
-                          "palette": Object {
-                            "accent": "#0078d4",
-                            "black": "#000000",
-                            "blackTranslucent40": "rgba(0,0,0,.4)",
-                            "blue": "#0078d4",
-                            "blueDark": "#002050",
-                            "blueLight": "#00bcf2",
-                            "blueMid": "#00188f",
-                            "green": "#107c10",
-                            "greenDark": "#004b1c",
-                            "greenLight": "#bad80a",
-                            "magenta": "#b4009e",
-                            "magentaDark": "#5c005c",
-                            "magentaLight": "#e3008c",
-                            "neutralDark": "#201f1e",
-                            "neutralLight": "#edebe9",
-                            "neutralLighter": "#f3f2f1",
-                            "neutralLighterAlt": "#faf9f8",
-                            "neutralPrimary": "#323130",
-                            "neutralPrimaryAlt": "#3b3a39",
-                            "neutralQuaternary": "#d2d0ce",
-                            "neutralQuaternaryAlt": "#e1dfdd",
-                            "neutralSecondary": "#605e5c",
-                            "neutralSecondaryAlt": "#8a8886",
-                            "neutralTertiary": "#a19f9d",
-                            "neutralTertiaryAlt": "#c8c6c4",
-                            "orange": "#d83b01",
-                            "orangeLight": "#ea4300",
-                            "orangeLighter": "#ff8c00",
-                            "purple": "#5c2d91",
-                            "purpleDark": "#32145a",
-                            "purpleLight": "#b4a0ff",
-                            "red": "#e81123",
-                            "redDark": "#a4262c",
-                            "teal": "#008272",
-                            "tealDark": "#004b50",
-                            "tealLight": "#00b294",
-                            "themeDark": "#005a9e",
-                            "themeDarkAlt": "#106ebe",
-                            "themeDarker": "#004578",
-                            "themeLight": "#c7e0f4",
-                            "themeLighter": "#deecf9",
-                            "themeLighterAlt": "#eff6fc",
-                            "themePrimary": "#0078d4",
-                            "themeSecondary": "#2b88d8",
-                            "themeTertiary": "#71afe5",
-                            "white": "#ffffff",
-                            "whiteTranslucent40": "rgba(255,255,255,.4)",
-                            "yellow": "#ffb900",
-                            "yellowDark": "#d29200",
-                            "yellowLight": "#fff100",
-                          },
-                          "rtl": undefined,
-                          "semanticColors": Object {
-                            "accentButtonBackground": "#0078d4",
-                            "accentButtonText": "#ffffff",
-                            "actionLink": "#323130",
-                            "actionLinkHovered": "#201f1e",
-                            "blockingBackground": "#FDE7E9",
-                            "blockingIcon": "#FDE7E9",
-                            "bodyBackground": "#ffffff",
-                            "bodyBackgroundChecked": "#edebe9",
-                            "bodyBackgroundHovered": "#f3f2f1",
-                            "bodyDivider": "#edebe9",
-                            "bodyFrameBackground": "#ffffff",
-                            "bodyFrameDivider": "#edebe9",
-                            "bodyStandoutBackground": "#faf9f8",
-                            "bodySubtext": "#605e5c",
-                            "bodyText": "#323130",
-                            "bodyTextChecked": "#000000",
-                            "buttonBackground": "#ffffff",
-                            "buttonBackgroundChecked": "#c8c6c4",
-                            "buttonBackgroundCheckedHovered": "#edebe9",
-                            "buttonBackgroundDisabled": "#f3f2f1",
-                            "buttonBackgroundHovered": "#f3f2f1",
-                            "buttonBackgroundPressed": "#edebe9",
-                            "buttonBorder": "#8a8886",
-                            "buttonBorderDisabled": "#f3f2f1",
-                            "buttonText": "#323130",
-                            "buttonTextChecked": "#201f1e",
-                            "buttonTextCheckedHovered": "#000000",
-                            "buttonTextDisabled": "#a19f9d",
-                            "buttonTextHovered": "#201f1e",
-                            "buttonTextPressed": "#201f1e",
-                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "cardStandoutBackground": "#ffffff",
-                            "defaultStateBackground": "#faf9f8",
-                            "disabledBackground": "#f3f2f1",
-                            "disabledBodySubtext": "#c8c6c4",
-                            "disabledBodyText": "#a19f9d",
-                            "disabledBorder": "#c8c6c4",
-                            "disabledSubtext": "#d2d0ce",
-                            "disabledText": "#a19f9d",
-                            "errorBackground": "#FDE7E9",
-                            "errorIcon": "#A80000",
-                            "errorText": "#a4262c",
-                            "focusBorder": "#605e5c",
-                            "infoBackground": "#f3f2f1",
-                            "infoIcon": "#605e5c",
-                            "inputBackground": "#ffffff",
-                            "inputBackgroundChecked": "#0078d4",
-                            "inputBackgroundCheckedHovered": "#005a9e",
-                            "inputBorder": "#605e5c",
-                            "inputBorderHovered": "#323130",
-                            "inputFocusBorderAlt": "#0078d4",
-                            "inputForegroundChecked": "#ffffff",
-                            "inputIcon": "#0078d4",
-                            "inputIconDisabled": "#a19f9d",
-                            "inputIconHovered": "#005a9e",
-                            "inputPlaceholderBackgroundChecked": "#deecf9",
-                            "inputPlaceholderText": "#605e5c",
-                            "inputText": "#323130",
-                            "inputTextHovered": "#201f1e",
-                            "link": "#0078d4",
-                            "linkHovered": "#004578",
-                            "listBackground": "#ffffff",
-                            "listHeaderBackgroundHovered": "#f3f2f1",
-                            "listHeaderBackgroundPressed": "#edebe9",
-                            "listItemBackgroundChecked": "#edebe9",
-                            "listItemBackgroundCheckedHovered": "#e1dfdd",
-                            "listItemBackgroundHovered": "#f3f2f1",
-                            "listText": "#323130",
-                            "listTextColor": "#323130",
-                            "menuBackground": "#ffffff",
-                            "menuDivider": "#c8c6c4",
-                            "menuHeader": "#0078d4",
-                            "menuIcon": "#0078d4",
-                            "menuItemBackgroundChecked": "#edebe9",
-                            "menuItemBackgroundHovered": "#f3f2f1",
-                            "menuItemBackgroundPressed": "#edebe9",
-                            "menuItemText": "#323130",
-                            "menuItemTextHovered": "#201f1e",
-                            "messageLink": "#005A9E",
-                            "messageLinkHovered": "#004578",
-                            "messageText": "#323130",
-                            "primaryButtonBackground": "#0078d4",
-                            "primaryButtonBackgroundDisabled": "#f3f2f1",
-                            "primaryButtonBackgroundHovered": "#106ebe",
-                            "primaryButtonBackgroundPressed": "#005a9e",
-                            "primaryButtonBorder": "transparent",
-                            "primaryButtonText": "#ffffff",
-                            "primaryButtonTextDisabled": "#d2d0ce",
-                            "primaryButtonTextHovered": "#ffffff",
-                            "primaryButtonTextPressed": "#ffffff",
-                            "severeWarningBackground": "#FED9CC",
-                            "severeWarningIcon": "#D83B01",
-                            "smallInputBorder": "#605e5c",
-                            "successBackground": "#DFF6DD",
-                            "successIcon": "#107C10",
-                            "successText": "#107C10",
-                            "variantBorder": "#edebe9",
-                            "variantBorderHovered": "#a19f9d",
-                            "warningBackground": "#FFF4CE",
-                            "warningHighlight": "#ffb900",
-                            "warningIcon": "#797775",
-                            "warningText": "#323130",
-                          },
-                          "spacing": Object {
-                            "l1": "20px",
-                            "l2": "32px",
-                            "m": "16px",
-                            "s1": "8px",
-                            "s2": "4px",
-                          },
-                        }
-                      }
-                      title="Submit"
+                      onKeyDown={[Function]}
+                      onKeyPress={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      type="submit"
                     >
-                      <BaseButton
-                        ariaLabel="Submit"
-                        baseClassName="ms-Button"
-                        className="genericPaneSubmitBtn"
-                        onClick={[Function]}
-                        onRenderDescription={[Function]}
-                        primary={true}
-                        split={false}
-                        style={
-                          Object {
-                            "visibility": "visible",
-                          }
-                        }
-                        styles={
-                          Object {
-                            "description": Object {
-                              "display": "block",
-                            },
-                            "flexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "icon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "16px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "iconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "label": Array [
-                              Object {
-                                "display": "block",
-                                "lineHeight": "100%",
-                                "margin": "0 4px",
-                              },
-                              Object {
-                                "fontWeight": 600,
-                              },
-                            ],
-                            "menuIcon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "12px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "menuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "root": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              Object {
-                                "border": "1px solid #8a8886",
-                                "borderRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "padding": "0 16px",
-                                "selectors": Object {
-                                  ":active > *": Object {
-                                    "left": 0,
-                                    "position": "relative",
-                                    "top": 0,
-                                  },
-                                },
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                              },
-                              Object {
-                                "height": "32px",
-                                "minWidth": "80px",
-                              },
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "border": "1px solid #0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus": Object {
-                                    "selectors": Object {
-                                      ":after": Object {
-                                        "border": "none",
-                                        "outlineColor": "#ffffff",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
-                                    "backgroundColor": "WindowText",
-                                    "borderColor": "WindowText",
-                                    "color": "Window",
-                                    "forcedColorAdjust": "none",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootCheckedHovered": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootDisabled": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "borderColor": "#f3f2f1",
-                                "color": "#a19f9d",
-                                "cursor": "default",
-                                "selectors": Object {
-                                  ":focus": Object {
-                                    "outline": 0,
-                                  },
-                                  ":hover": Object {
-                                    "outline": 0,
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "color": "#d2d0ce",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "borderColor": "GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootHovered": Object {
-                              "backgroundColor": "#106ebe",
-                              "border": "1px solid #106ebe",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "Highlight",
-                                  "borderColor": "Highlight",
-                                  "color": "Window",
-                                },
-                              },
-                            },
-                            "rootPressed": Object {
-                              "backgroundColor": "#005a9e",
-                              "border": "1px solid #005a9e",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "WindowText",
-                                  "borderColor": "WindowText",
-                                  "color": "Window",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "screenReaderText": Object {
-                              "border": 0,
-                              "height": 1,
-                              "margin": -1,
-                              "overflow": "hidden",
-                              "padding": 0,
-                              "position": "absolute",
-                              "width": 1,
-                            },
-                            "splitButtonContainer": Array [
-                              Object {
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                },
-                              },
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "display": "inline-flex",
-                                "selectors": Object {
-                                  ".ms-Button--default": Object {
-                                    "borderBottomRightRadius": "0",
-                                    "borderRight": "none",
-                                    "borderTopRightRadius": "0",
-                                  },
-                                  ".ms-Button--primary": Object {
-                                    "border": "none",
-                                    "borderBottomRightRadius": "0",
-                                    "borderTopRightRadius": "0",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "Window",
-                                        "border": "1px solid WindowText",
-                                        "borderRightWidth": "0",
-                                        "color": "WindowText",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button--primary + .ms-Button": Object {
-                                    "border": "none",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "1px solid WindowText",
-                                        "borderLeftWidth": "0",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonContainerChecked": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerCheckedHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerDisabled": Object {
-                              "border": "none",
-                              "outline": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "borderColor": "GrayText",
-                                  "color": "GrayText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "splitButtonContainerFocused": Object {
-                              "outline": "none!important",
-                            },
-                            "splitButtonContainerHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Highlight",
-                                      "color": "Window",
-                                    },
-                                  },
-                                },
-                                ".ms-Button.is-disabled": Object {
-                                  "color": "#a19f9d",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "borderColor": "GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonDivider": Array [
-                              Object {
-                                "backgroundColor": "#ffffff",
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                              Object {
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                            ],
-                            "splitButtonDividerDisabled": Object {
-                              "bottom": 8,
-                              "position": "absolute",
-                              "right": 31,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "GrayText",
-                                },
-                              },
-                              "top": 8,
-                              "width": 1,
-                            },
-                            "splitButtonFlexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "splitButtonMenuButton": Array [
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#106ebe",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "Highlight",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                              },
-                              Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  ".ms-Button-menuIcon": Object {
-                                    "color": "WindowText",
-                                  },
-                                },
-                                "border": "1px solid #8a8886",
-                                "borderBottomRightRadius": "2px",
-                                "borderLeft": "none",
-                                "borderRadius": 0,
-                                "borderTopRightRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "height": "auto",
-                                "marginBottom": 0,
-                                "marginLeft": -1,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "outline": "transparent",
-                                "padding": 6,
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                                "verticalAlign": "top",
-                                "width": 32,
-                              },
-                            ],
-                            "splitButtonMenuButtonChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuButtonDisabled": Array [
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#f3f2f1",
-                                  },
-                                },
-                              },
-                              Object {
-                                "border": "none",
-                                "pointerEvents": "none",
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Window",
-                                        "borderColor": "GrayText",
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button-menuIcon": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ":hover": Object {
-                                    "cursor": "default",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "border": "1px solid GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonMenuButtonExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuFocused": Object {
-                              "outline": "transparent",
-                              "position": "relative",
-                              "selectors": Object {
-                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                  "border": "1px solid #ffffff",
-                                  "bottom": 3,
-                                  "content": "\\"\\"",
-                                  "left": 3,
-                                  "outline": "1px solid #605e5c",
-                                  "position": "absolute",
-                                  "right": 3,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "border": "none",
-                                      "bottom": -2,
-                                      "left": -2,
-                                      "right": -2,
-                                      "top": -2,
-                                    },
-                                  },
-                                  "top": 3,
-                                  "zIndex": 1,
-                                },
-                                "::-moz-focus-inner": Object {
-                                  "border": "0",
-                                },
-                              },
-                            },
-                            "splitButtonMenuIcon": Object {
-                              "color": "#ffffff",
-                            },
-                            "splitButtonMenuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "textContainer": Object {
-                              "display": "block",
-                              "flexGrow": 1,
-                            },
-                          }
-                        }
-                        tabIndex={0}
-                        text="Create"
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        title="Submit"
-                        variantClassName="ms-Button--primary"
+                      <span
+                        className="ms-Button-flexContainer flexContainer-67"
+                        data-automationid="splitbuttonprimary"
                       >
-                        <button
-                          aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-75"
-                          data-is-focusable={true}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyPress={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseUp={[Function]}
-                          style={
-                            Object {
-                              "visibility": "visible",
-                            }
-                          }
-                          tabIndex={0}
-                          title="Submit"
-                          type="button"
+                        <span
+                          className="ms-Button-textContainer textContainer-68"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-54"
-                            data-automationid="splitbuttonprimary"
+                            className="ms-Button-label label-70"
+                            id="id__3"
+                            key="id__3"
                           >
-                            <span
-                              className="ms-Button-textContainer textContainer-55"
-                            >
-                              <span
-                                className="ms-Button-label label-76"
-                                id="id__6"
-                                key="id__6"
-                              >
-                                Create
-                              </span>
-                            </span>
+                            Create
                           </span>
-                        </button>
-                        <FocusRects />
-                      </BaseButton>
-                    </DefaultButton>
-                  </CustomizedDefaultButton>
-                </PrimaryButton>
-              </CustomizedPrimaryButton>
-            </div>
-          </div>
+                        </span>
+                      </span>
+                    </button>
+                    <FocusRects />
+                  </BaseButton>
+                </DefaultButton>
+              </CustomizedDefaultButton>
+            </PrimaryButton>
+          </CustomizedPrimaryButton>
         </div>
-        <div
-          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-          hidden={true}
-        >
-          <img
-            className="dataExplorerLoader"
-            src=""
-          />
-        </div>
-      </div>
-    </div>
-  </GenericRightPaneComponent>
+      </PanelFooterComponent>
+    </form>
+  </RightPaneForm>
 </StringInputPane>
 `;
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.test.tsx b/src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx
similarity index 95%
rename from src/Explorer/Panes/Tables/TableQuerySelectPanel/index.test.tsx
rename to src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx
index a0c802ecb..046586a50 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.test.tsx
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx
@@ -3,7 +3,7 @@ import * as ko from "knockout";
 import React from "react";
 import Explorer from "../../../Explorer";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import { TableQuerySelectPanel } from "./index";
+import { TableQuerySelectPanel } from "./TableQuerySelectPanel";
 
 describe("Table query select Panel", () => {
   const fakeExplorer = {} as Explorer;
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx b/src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx
similarity index 91%
rename from src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
rename to src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx
index ae75c7910..72ee0d0bf 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx
@@ -4,10 +4,7 @@ import { userContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import * as Constants from "../../../Tables/Constants";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../../RightPaneForm/RightPaneForm";
 
 interface TableQuerySelectPanelProps {
   explorer: Explorer;
@@ -31,24 +28,20 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   ]);
   const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
 
-  const genericPaneProps: GenericRightPaneProps = {
-    formError: "",
-    formErrorDetail: "",
-    id: "querySelectPane",
-    isExecuting: false,
-    title: "Select Column",
-    submitButtonText: "OK",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-    expandConsole: () => explorer.expandConsole(),
-  };
-
-  const submit = (): void => {
+  const onSubmit = (): void => {
     queryViewModel.selectText(getParameters());
     queryViewModel.getSelectMessage();
     closePanel();
   };
 
+  const props: RightPaneFormProps = {
+    formError: "",
+    isExecuting: false,
+    submitButtonText: "OK",
+    onSubmit,
+    expandConsole: () => explorer.expandConsole(),
+  };
+
   const handleClick = (isChecked: boolean, selectedColumn: string): void => {
     const columns = columnOptions.map((column) => {
       if (column.columnName === selectedColumn) {
@@ -128,7 +121,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Text>Select the columns that you want to query.</Text>
@@ -153,6 +146,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
new file mode 100644
index 000000000..260bfd7d2
--- /dev/null
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
@@ -0,0 +1,3007 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table query select Panel should render Default properly 1`] = `
+<TableQuerySelectPanel
+  closePanel={[Function]}
+  explorer={Object {}}
+  queryViewModel={
+    Object {
+      "columnOptions": [Function],
+    }
+  }
+>
+  <RightPaneForm
+    expandConsole={[Function]}
+    formError=""
+    isExecuting={false}
+    onSubmit={[Function]}
+    submitButtonText="OK"
+  >
+    <form
+      className="panelFormWrapper"
+      onSubmit={[Function]}
+    >
+      <div
+        className="panelFormWrapper"
+      >
+        <div
+          className="panelMainContent"
+        >
+          <Text>
+            <span
+              className="css-53"
+            >
+              Select the columns that you want to query.
+            </span>
+          </Text>
+          <div
+            className="column-select-view"
+          >
+            <StyledCheckboxBase
+              checked={true}
+              id="availableCheckbox"
+              label="Available Columns"
+              onChange={[Function]}
+            >
+              <CheckboxBase
+                checked={true}
+                id="availableCheckbox"
+                label="Available Columns"
+                onChange={[Function]}
+                styles={[Function]}
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
+                  }
+                }
+              >
+                <div
+                  className="ms-Checkbox is-checked is-enabled root-54"
+                >
+                  <input
+                    aria-checked="true"
+                    aria-label="Available Columns"
+                    checked={true}
+                    className="input-55"
+                    data-ktp-execute-target={true}
+                    id="availableCheckbox"
+                    onChange={[Function]}
+                    type="checkbox"
+                  />
+                  <label
+                    className="ms-Checkbox-label label-56"
+                    htmlFor="availableCheckbox"
+                  >
+                    <div
+                      className="ms-Checkbox-checkbox checkbox-57"
+                      data-ktp-target={true}
+                    >
+                      <StyledIconBase
+                        className="ms-Checkbox-checkmark checkmark-58"
+                        iconName="CheckMark"
+                      >
+                        <IconBase
+                          className="ms-Checkbox-checkmark checkmark-58"
+                          iconName="CheckMark"
+                          styles={[Function]}
+                          theme={
+                            Object {
+                              "disableGlobalClassNames": false,
+                              "effects": Object {
+                                "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                "roundedCorner2": "2px",
+                                "roundedCorner4": "4px",
+                                "roundedCorner6": "6px",
+                              },
+                              "fonts": Object {
+                                "large": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "18px",
+                                  "fontWeight": 400,
+                                },
+                                "medium": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "14px",
+                                  "fontWeight": 400,
+                                },
+                                "mediumPlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "16px",
+                                  "fontWeight": 400,
+                                },
+                                "mega": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "68px",
+                                  "fontWeight": 600,
+                                },
+                                "small": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "12px",
+                                  "fontWeight": 400,
+                                },
+                                "smallPlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "12px",
+                                  "fontWeight": 400,
+                                },
+                                "superLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "42px",
+                                  "fontWeight": 600,
+                                },
+                                "tiny": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "10px",
+                                  "fontWeight": 400,
+                                },
+                                "xLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "20px",
+                                  "fontWeight": 600,
+                                },
+                                "xLargePlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "24px",
+                                  "fontWeight": 600,
+                                },
+                                "xSmall": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "10px",
+                                  "fontWeight": 400,
+                                },
+                                "xxLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "28px",
+                                  "fontWeight": 600,
+                                },
+                                "xxLargePlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "32px",
+                                  "fontWeight": 600,
+                                },
+                              },
+                              "isInverted": false,
+                              "palette": Object {
+                                "accent": "#0078d4",
+                                "black": "#000000",
+                                "blackTranslucent40": "rgba(0,0,0,.4)",
+                                "blue": "#0078d4",
+                                "blueDark": "#002050",
+                                "blueLight": "#00bcf2",
+                                "blueMid": "#00188f",
+                                "green": "#107c10",
+                                "greenDark": "#004b1c",
+                                "greenLight": "#bad80a",
+                                "magenta": "#b4009e",
+                                "magentaDark": "#5c005c",
+                                "magentaLight": "#e3008c",
+                                "neutralDark": "#201f1e",
+                                "neutralLight": "#edebe9",
+                                "neutralLighter": "#f3f2f1",
+                                "neutralLighterAlt": "#faf9f8",
+                                "neutralPrimary": "#323130",
+                                "neutralPrimaryAlt": "#3b3a39",
+                                "neutralQuaternary": "#d2d0ce",
+                                "neutralQuaternaryAlt": "#e1dfdd",
+                                "neutralSecondary": "#605e5c",
+                                "neutralSecondaryAlt": "#8a8886",
+                                "neutralTertiary": "#a19f9d",
+                                "neutralTertiaryAlt": "#c8c6c4",
+                                "orange": "#d83b01",
+                                "orangeLight": "#ea4300",
+                                "orangeLighter": "#ff8c00",
+                                "purple": "#5c2d91",
+                                "purpleDark": "#32145a",
+                                "purpleLight": "#b4a0ff",
+                                "red": "#e81123",
+                                "redDark": "#a4262c",
+                                "teal": "#008272",
+                                "tealDark": "#004b50",
+                                "tealLight": "#00b294",
+                                "themeDark": "#005a9e",
+                                "themeDarkAlt": "#106ebe",
+                                "themeDarker": "#004578",
+                                "themeLight": "#c7e0f4",
+                                "themeLighter": "#deecf9",
+                                "themeLighterAlt": "#eff6fc",
+                                "themePrimary": "#0078d4",
+                                "themeSecondary": "#2b88d8",
+                                "themeTertiary": "#71afe5",
+                                "white": "#ffffff",
+                                "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                "yellow": "#ffb900",
+                                "yellowDark": "#d29200",
+                                "yellowLight": "#fff100",
+                              },
+                              "rtl": undefined,
+                              "semanticColors": Object {
+                                "accentButtonBackground": "#0078d4",
+                                "accentButtonText": "#ffffff",
+                                "actionLink": "#323130",
+                                "actionLinkHovered": "#201f1e",
+                                "blockingBackground": "#FDE7E9",
+                                "blockingIcon": "#FDE7E9",
+                                "bodyBackground": "#ffffff",
+                                "bodyBackgroundChecked": "#edebe9",
+                                "bodyBackgroundHovered": "#f3f2f1",
+                                "bodyDivider": "#edebe9",
+                                "bodyFrameBackground": "#ffffff",
+                                "bodyFrameDivider": "#edebe9",
+                                "bodyStandoutBackground": "#faf9f8",
+                                "bodySubtext": "#605e5c",
+                                "bodyText": "#323130",
+                                "bodyTextChecked": "#000000",
+                                "buttonBackground": "#ffffff",
+                                "buttonBackgroundChecked": "#c8c6c4",
+                                "buttonBackgroundCheckedHovered": "#edebe9",
+                                "buttonBackgroundDisabled": "#f3f2f1",
+                                "buttonBackgroundHovered": "#f3f2f1",
+                                "buttonBackgroundPressed": "#edebe9",
+                                "buttonBorder": "#8a8886",
+                                "buttonBorderDisabled": "#f3f2f1",
+                                "buttonText": "#323130",
+                                "buttonTextChecked": "#201f1e",
+                                "buttonTextCheckedHovered": "#000000",
+                                "buttonTextDisabled": "#a19f9d",
+                                "buttonTextHovered": "#201f1e",
+                                "buttonTextPressed": "#201f1e",
+                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                "cardStandoutBackground": "#ffffff",
+                                "defaultStateBackground": "#faf9f8",
+                                "disabledBackground": "#f3f2f1",
+                                "disabledBodySubtext": "#c8c6c4",
+                                "disabledBodyText": "#a19f9d",
+                                "disabledBorder": "#c8c6c4",
+                                "disabledSubtext": "#d2d0ce",
+                                "disabledText": "#a19f9d",
+                                "errorBackground": "#FDE7E9",
+                                "errorIcon": "#A80000",
+                                "errorText": "#a4262c",
+                                "focusBorder": "#605e5c",
+                                "infoBackground": "#f3f2f1",
+                                "infoIcon": "#605e5c",
+                                "inputBackground": "#ffffff",
+                                "inputBackgroundChecked": "#0078d4",
+                                "inputBackgroundCheckedHovered": "#005a9e",
+                                "inputBorder": "#605e5c",
+                                "inputBorderHovered": "#323130",
+                                "inputFocusBorderAlt": "#0078d4",
+                                "inputForegroundChecked": "#ffffff",
+                                "inputIcon": "#0078d4",
+                                "inputIconDisabled": "#a19f9d",
+                                "inputIconHovered": "#005a9e",
+                                "inputPlaceholderBackgroundChecked": "#deecf9",
+                                "inputPlaceholderText": "#605e5c",
+                                "inputText": "#323130",
+                                "inputTextHovered": "#201f1e",
+                                "link": "#0078d4",
+                                "linkHovered": "#004578",
+                                "listBackground": "#ffffff",
+                                "listHeaderBackgroundHovered": "#f3f2f1",
+                                "listHeaderBackgroundPressed": "#edebe9",
+                                "listItemBackgroundChecked": "#edebe9",
+                                "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                "listItemBackgroundHovered": "#f3f2f1",
+                                "listText": "#323130",
+                                "listTextColor": "#323130",
+                                "menuBackground": "#ffffff",
+                                "menuDivider": "#c8c6c4",
+                                "menuHeader": "#0078d4",
+                                "menuIcon": "#0078d4",
+                                "menuItemBackgroundChecked": "#edebe9",
+                                "menuItemBackgroundHovered": "#f3f2f1",
+                                "menuItemBackgroundPressed": "#edebe9",
+                                "menuItemText": "#323130",
+                                "menuItemTextHovered": "#201f1e",
+                                "messageLink": "#005A9E",
+                                "messageLinkHovered": "#004578",
+                                "messageText": "#323130",
+                                "primaryButtonBackground": "#0078d4",
+                                "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                "primaryButtonBackgroundHovered": "#106ebe",
+                                "primaryButtonBackgroundPressed": "#005a9e",
+                                "primaryButtonBorder": "transparent",
+                                "primaryButtonText": "#ffffff",
+                                "primaryButtonTextDisabled": "#d2d0ce",
+                                "primaryButtonTextHovered": "#ffffff",
+                                "primaryButtonTextPressed": "#ffffff",
+                                "severeWarningBackground": "#FED9CC",
+                                "severeWarningIcon": "#D83B01",
+                                "smallInputBorder": "#605e5c",
+                                "successBackground": "#DFF6DD",
+                                "successIcon": "#107C10",
+                                "successText": "#107C10",
+                                "variantBorder": "#edebe9",
+                                "variantBorderHovered": "#a19f9d",
+                                "warningBackground": "#FFF4CE",
+                                "warningHighlight": "#ffb900",
+                                "warningIcon": "#797775",
+                                "warningText": "#323130",
+                              },
+                              "spacing": Object {
+                                "l1": "20px",
+                                "l2": "32px",
+                                "m": "16px",
+                                "s1": "8px",
+                                "s2": "4px",
+                              },
+                            }
+                          }
+                        >
+                          <i
+                            aria-hidden={true}
+                            className="ms-Checkbox-checkmark checkmark-61"
+                            data-icon-name="CheckMark"
+                          >
+                            
+                          </i>
+                        </IconBase>
+                      </StyledIconBase>
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      className="ms-Checkbox-text text-59"
+                    >
+                      Available Columns
+                    </span>
+                  </label>
+                </div>
+              </CheckboxBase>
+            </StyledCheckboxBase>
+            <StyledCheckboxBase
+              checked={true}
+              disabled={false}
+              key=""
+              label=""
+              onChange={[Function]}
+            >
+              <CheckboxBase
+                checked={true}
+                disabled={false}
+                label=""
+                onChange={[Function]}
+                styles={[Function]}
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
+                  }
+                }
+              >
+                <div
+                  className="ms-Checkbox is-checked is-enabled root-54"
+                >
+                  <input
+                    aria-checked="true"
+                    aria-disabled={false}
+                    aria-label=""
+                    checked={true}
+                    className="input-55"
+                    data-ktp-execute-target={true}
+                    disabled={false}
+                    id="checkbox-0"
+                    onChange={[Function]}
+                    type="checkbox"
+                  />
+                  <label
+                    className="ms-Checkbox-label label-56"
+                    htmlFor="checkbox-0"
+                  >
+                    <div
+                      className="ms-Checkbox-checkbox checkbox-57"
+                      data-ktp-target={true}
+                    >
+                      <StyledIconBase
+                        className="ms-Checkbox-checkmark checkmark-58"
+                        iconName="CheckMark"
+                      >
+                        <IconBase
+                          className="ms-Checkbox-checkmark checkmark-58"
+                          iconName="CheckMark"
+                          styles={[Function]}
+                          theme={
+                            Object {
+                              "disableGlobalClassNames": false,
+                              "effects": Object {
+                                "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                                "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                                "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                "roundedCorner2": "2px",
+                                "roundedCorner4": "4px",
+                                "roundedCorner6": "6px",
+                              },
+                              "fonts": Object {
+                                "large": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "18px",
+                                  "fontWeight": 400,
+                                },
+                                "medium": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "14px",
+                                  "fontWeight": 400,
+                                },
+                                "mediumPlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "16px",
+                                  "fontWeight": 400,
+                                },
+                                "mega": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "68px",
+                                  "fontWeight": 600,
+                                },
+                                "small": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "12px",
+                                  "fontWeight": 400,
+                                },
+                                "smallPlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "12px",
+                                  "fontWeight": 400,
+                                },
+                                "superLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "42px",
+                                  "fontWeight": 600,
+                                },
+                                "tiny": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "10px",
+                                  "fontWeight": 400,
+                                },
+                                "xLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "20px",
+                                  "fontWeight": 600,
+                                },
+                                "xLargePlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "24px",
+                                  "fontWeight": 600,
+                                },
+                                "xSmall": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "10px",
+                                  "fontWeight": 400,
+                                },
+                                "xxLarge": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "28px",
+                                  "fontWeight": 600,
+                                },
+                                "xxLargePlus": Object {
+                                  "MozOsxFontSmoothing": "grayscale",
+                                  "WebkitFontSmoothing": "antialiased",
+                                  "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                                  "fontSize": "32px",
+                                  "fontWeight": 600,
+                                },
+                              },
+                              "isInverted": false,
+                              "palette": Object {
+                                "accent": "#0078d4",
+                                "black": "#000000",
+                                "blackTranslucent40": "rgba(0,0,0,.4)",
+                                "blue": "#0078d4",
+                                "blueDark": "#002050",
+                                "blueLight": "#00bcf2",
+                                "blueMid": "#00188f",
+                                "green": "#107c10",
+                                "greenDark": "#004b1c",
+                                "greenLight": "#bad80a",
+                                "magenta": "#b4009e",
+                                "magentaDark": "#5c005c",
+                                "magentaLight": "#e3008c",
+                                "neutralDark": "#201f1e",
+                                "neutralLight": "#edebe9",
+                                "neutralLighter": "#f3f2f1",
+                                "neutralLighterAlt": "#faf9f8",
+                                "neutralPrimary": "#323130",
+                                "neutralPrimaryAlt": "#3b3a39",
+                                "neutralQuaternary": "#d2d0ce",
+                                "neutralQuaternaryAlt": "#e1dfdd",
+                                "neutralSecondary": "#605e5c",
+                                "neutralSecondaryAlt": "#8a8886",
+                                "neutralTertiary": "#a19f9d",
+                                "neutralTertiaryAlt": "#c8c6c4",
+                                "orange": "#d83b01",
+                                "orangeLight": "#ea4300",
+                                "orangeLighter": "#ff8c00",
+                                "purple": "#5c2d91",
+                                "purpleDark": "#32145a",
+                                "purpleLight": "#b4a0ff",
+                                "red": "#e81123",
+                                "redDark": "#a4262c",
+                                "teal": "#008272",
+                                "tealDark": "#004b50",
+                                "tealLight": "#00b294",
+                                "themeDark": "#005a9e",
+                                "themeDarkAlt": "#106ebe",
+                                "themeDarker": "#004578",
+                                "themeLight": "#c7e0f4",
+                                "themeLighter": "#deecf9",
+                                "themeLighterAlt": "#eff6fc",
+                                "themePrimary": "#0078d4",
+                                "themeSecondary": "#2b88d8",
+                                "themeTertiary": "#71afe5",
+                                "white": "#ffffff",
+                                "whiteTranslucent40": "rgba(255,255,255,.4)",
+                                "yellow": "#ffb900",
+                                "yellowDark": "#d29200",
+                                "yellowLight": "#fff100",
+                              },
+                              "rtl": undefined,
+                              "semanticColors": Object {
+                                "accentButtonBackground": "#0078d4",
+                                "accentButtonText": "#ffffff",
+                                "actionLink": "#323130",
+                                "actionLinkHovered": "#201f1e",
+                                "blockingBackground": "#FDE7E9",
+                                "blockingIcon": "#FDE7E9",
+                                "bodyBackground": "#ffffff",
+                                "bodyBackgroundChecked": "#edebe9",
+                                "bodyBackgroundHovered": "#f3f2f1",
+                                "bodyDivider": "#edebe9",
+                                "bodyFrameBackground": "#ffffff",
+                                "bodyFrameDivider": "#edebe9",
+                                "bodyStandoutBackground": "#faf9f8",
+                                "bodySubtext": "#605e5c",
+                                "bodyText": "#323130",
+                                "bodyTextChecked": "#000000",
+                                "buttonBackground": "#ffffff",
+                                "buttonBackgroundChecked": "#c8c6c4",
+                                "buttonBackgroundCheckedHovered": "#edebe9",
+                                "buttonBackgroundDisabled": "#f3f2f1",
+                                "buttonBackgroundHovered": "#f3f2f1",
+                                "buttonBackgroundPressed": "#edebe9",
+                                "buttonBorder": "#8a8886",
+                                "buttonBorderDisabled": "#f3f2f1",
+                                "buttonText": "#323130",
+                                "buttonTextChecked": "#201f1e",
+                                "buttonTextCheckedHovered": "#000000",
+                                "buttonTextDisabled": "#a19f9d",
+                                "buttonTextHovered": "#201f1e",
+                                "buttonTextPressed": "#201f1e",
+                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                "cardStandoutBackground": "#ffffff",
+                                "defaultStateBackground": "#faf9f8",
+                                "disabledBackground": "#f3f2f1",
+                                "disabledBodySubtext": "#c8c6c4",
+                                "disabledBodyText": "#a19f9d",
+                                "disabledBorder": "#c8c6c4",
+                                "disabledSubtext": "#d2d0ce",
+                                "disabledText": "#a19f9d",
+                                "errorBackground": "#FDE7E9",
+                                "errorIcon": "#A80000",
+                                "errorText": "#a4262c",
+                                "focusBorder": "#605e5c",
+                                "infoBackground": "#f3f2f1",
+                                "infoIcon": "#605e5c",
+                                "inputBackground": "#ffffff",
+                                "inputBackgroundChecked": "#0078d4",
+                                "inputBackgroundCheckedHovered": "#005a9e",
+                                "inputBorder": "#605e5c",
+                                "inputBorderHovered": "#323130",
+                                "inputFocusBorderAlt": "#0078d4",
+                                "inputForegroundChecked": "#ffffff",
+                                "inputIcon": "#0078d4",
+                                "inputIconDisabled": "#a19f9d",
+                                "inputIconHovered": "#005a9e",
+                                "inputPlaceholderBackgroundChecked": "#deecf9",
+                                "inputPlaceholderText": "#605e5c",
+                                "inputText": "#323130",
+                                "inputTextHovered": "#201f1e",
+                                "link": "#0078d4",
+                                "linkHovered": "#004578",
+                                "listBackground": "#ffffff",
+                                "listHeaderBackgroundHovered": "#f3f2f1",
+                                "listHeaderBackgroundPressed": "#edebe9",
+                                "listItemBackgroundChecked": "#edebe9",
+                                "listItemBackgroundCheckedHovered": "#e1dfdd",
+                                "listItemBackgroundHovered": "#f3f2f1",
+                                "listText": "#323130",
+                                "listTextColor": "#323130",
+                                "menuBackground": "#ffffff",
+                                "menuDivider": "#c8c6c4",
+                                "menuHeader": "#0078d4",
+                                "menuIcon": "#0078d4",
+                                "menuItemBackgroundChecked": "#edebe9",
+                                "menuItemBackgroundHovered": "#f3f2f1",
+                                "menuItemBackgroundPressed": "#edebe9",
+                                "menuItemText": "#323130",
+                                "menuItemTextHovered": "#201f1e",
+                                "messageLink": "#005A9E",
+                                "messageLinkHovered": "#004578",
+                                "messageText": "#323130",
+                                "primaryButtonBackground": "#0078d4",
+                                "primaryButtonBackgroundDisabled": "#f3f2f1",
+                                "primaryButtonBackgroundHovered": "#106ebe",
+                                "primaryButtonBackgroundPressed": "#005a9e",
+                                "primaryButtonBorder": "transparent",
+                                "primaryButtonText": "#ffffff",
+                                "primaryButtonTextDisabled": "#d2d0ce",
+                                "primaryButtonTextHovered": "#ffffff",
+                                "primaryButtonTextPressed": "#ffffff",
+                                "severeWarningBackground": "#FED9CC",
+                                "severeWarningIcon": "#D83B01",
+                                "smallInputBorder": "#605e5c",
+                                "successBackground": "#DFF6DD",
+                                "successIcon": "#107C10",
+                                "successText": "#107C10",
+                                "variantBorder": "#edebe9",
+                                "variantBorderHovered": "#a19f9d",
+                                "warningBackground": "#FFF4CE",
+                                "warningHighlight": "#ffb900",
+                                "warningIcon": "#797775",
+                                "warningText": "#323130",
+                              },
+                              "spacing": Object {
+                                "l1": "20px",
+                                "l2": "32px",
+                                "m": "16px",
+                                "s1": "8px",
+                                "s2": "4px",
+                              },
+                            }
+                          }
+                        >
+                          <i
+                            aria-hidden={true}
+                            className="ms-Checkbox-checkmark checkmark-61"
+                            data-icon-name="CheckMark"
+                          >
+                            
+                          </i>
+                        </IconBase>
+                      </StyledIconBase>
+                    </div>
+                  </label>
+                </div>
+              </CheckboxBase>
+            </StyledCheckboxBase>
+          </div>
+        </div>
+      </div>
+      <PanelFooterComponent
+        buttonLabel="OK"
+      >
+        <div
+          className="panelFooter"
+        >
+          <CustomizedPrimaryButton
+            ariaLabel="OK"
+            id="sidePanelOkButton"
+            text="OK"
+            type="submit"
+          >
+            <PrimaryButton
+              ariaLabel="OK"
+              id="sidePanelOkButton"
+              text="OK"
+              theme={
+                Object {
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
+                  },
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
+                  },
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
+                  },
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
+                  },
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
+                  },
+                }
+              }
+              type="submit"
+            >
+              <CustomizedDefaultButton
+                ariaLabel="OK"
+                id="sidePanelOkButton"
+                onRenderDescription={[Function]}
+                primary={true}
+                text="OK"
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
+                  }
+                }
+                type="submit"
+              >
+                <DefaultButton
+                  ariaLabel="OK"
+                  id="sidePanelOkButton"
+                  onRenderDescription={[Function]}
+                  primary={true}
+                  text="OK"
+                  theme={
+                    Object {
+                      "disableGlobalClassNames": false,
+                      "effects": Object {
+                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "roundedCorner2": "2px",
+                        "roundedCorner4": "4px",
+                        "roundedCorner6": "6px",
+                      },
+                      "fonts": Object {
+                        "large": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "18px",
+                          "fontWeight": 400,
+                        },
+                        "medium": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "14px",
+                          "fontWeight": 400,
+                        },
+                        "mediumPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "16px",
+                          "fontWeight": 400,
+                        },
+                        "mega": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "68px",
+                          "fontWeight": 600,
+                        },
+                        "small": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "smallPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "superLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "42px",
+                          "fontWeight": 600,
+                        },
+                        "tiny": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "20px",
+                          "fontWeight": 600,
+                        },
+                        "xLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "24px",
+                          "fontWeight": 600,
+                        },
+                        "xSmall": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xxLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "28px",
+                          "fontWeight": 600,
+                        },
+                        "xxLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "32px",
+                          "fontWeight": 600,
+                        },
+                      },
+                      "isInverted": false,
+                      "palette": Object {
+                        "accent": "#0078d4",
+                        "black": "#000000",
+                        "blackTranslucent40": "rgba(0,0,0,.4)",
+                        "blue": "#0078d4",
+                        "blueDark": "#002050",
+                        "blueLight": "#00bcf2",
+                        "blueMid": "#00188f",
+                        "green": "#107c10",
+                        "greenDark": "#004b1c",
+                        "greenLight": "#bad80a",
+                        "magenta": "#b4009e",
+                        "magentaDark": "#5c005c",
+                        "magentaLight": "#e3008c",
+                        "neutralDark": "#201f1e",
+                        "neutralLight": "#edebe9",
+                        "neutralLighter": "#f3f2f1",
+                        "neutralLighterAlt": "#faf9f8",
+                        "neutralPrimary": "#323130",
+                        "neutralPrimaryAlt": "#3b3a39",
+                        "neutralQuaternary": "#d2d0ce",
+                        "neutralQuaternaryAlt": "#e1dfdd",
+                        "neutralSecondary": "#605e5c",
+                        "neutralSecondaryAlt": "#8a8886",
+                        "neutralTertiary": "#a19f9d",
+                        "neutralTertiaryAlt": "#c8c6c4",
+                        "orange": "#d83b01",
+                        "orangeLight": "#ea4300",
+                        "orangeLighter": "#ff8c00",
+                        "purple": "#5c2d91",
+                        "purpleDark": "#32145a",
+                        "purpleLight": "#b4a0ff",
+                        "red": "#e81123",
+                        "redDark": "#a4262c",
+                        "teal": "#008272",
+                        "tealDark": "#004b50",
+                        "tealLight": "#00b294",
+                        "themeDark": "#005a9e",
+                        "themeDarkAlt": "#106ebe",
+                        "themeDarker": "#004578",
+                        "themeLight": "#c7e0f4",
+                        "themeLighter": "#deecf9",
+                        "themeLighterAlt": "#eff6fc",
+                        "themePrimary": "#0078d4",
+                        "themeSecondary": "#2b88d8",
+                        "themeTertiary": "#71afe5",
+                        "white": "#ffffff",
+                        "whiteTranslucent40": "rgba(255,255,255,.4)",
+                        "yellow": "#ffb900",
+                        "yellowDark": "#d29200",
+                        "yellowLight": "#fff100",
+                      },
+                      "rtl": undefined,
+                      "semanticColors": Object {
+                        "accentButtonBackground": "#0078d4",
+                        "accentButtonText": "#ffffff",
+                        "actionLink": "#323130",
+                        "actionLinkHovered": "#201f1e",
+                        "blockingBackground": "#FDE7E9",
+                        "blockingIcon": "#FDE7E9",
+                        "bodyBackground": "#ffffff",
+                        "bodyBackgroundChecked": "#edebe9",
+                        "bodyBackgroundHovered": "#f3f2f1",
+                        "bodyDivider": "#edebe9",
+                        "bodyFrameBackground": "#ffffff",
+                        "bodyFrameDivider": "#edebe9",
+                        "bodyStandoutBackground": "#faf9f8",
+                        "bodySubtext": "#605e5c",
+                        "bodyText": "#323130",
+                        "bodyTextChecked": "#000000",
+                        "buttonBackground": "#ffffff",
+                        "buttonBackgroundChecked": "#c8c6c4",
+                        "buttonBackgroundCheckedHovered": "#edebe9",
+                        "buttonBackgroundDisabled": "#f3f2f1",
+                        "buttonBackgroundHovered": "#f3f2f1",
+                        "buttonBackgroundPressed": "#edebe9",
+                        "buttonBorder": "#8a8886",
+                        "buttonBorderDisabled": "#f3f2f1",
+                        "buttonText": "#323130",
+                        "buttonTextChecked": "#201f1e",
+                        "buttonTextCheckedHovered": "#000000",
+                        "buttonTextDisabled": "#a19f9d",
+                        "buttonTextHovered": "#201f1e",
+                        "buttonTextPressed": "#201f1e",
+                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "cardStandoutBackground": "#ffffff",
+                        "defaultStateBackground": "#faf9f8",
+                        "disabledBackground": "#f3f2f1",
+                        "disabledBodySubtext": "#c8c6c4",
+                        "disabledBodyText": "#a19f9d",
+                        "disabledBorder": "#c8c6c4",
+                        "disabledSubtext": "#d2d0ce",
+                        "disabledText": "#a19f9d",
+                        "errorBackground": "#FDE7E9",
+                        "errorIcon": "#A80000",
+                        "errorText": "#a4262c",
+                        "focusBorder": "#605e5c",
+                        "infoBackground": "#f3f2f1",
+                        "infoIcon": "#605e5c",
+                        "inputBackground": "#ffffff",
+                        "inputBackgroundChecked": "#0078d4",
+                        "inputBackgroundCheckedHovered": "#005a9e",
+                        "inputBorder": "#605e5c",
+                        "inputBorderHovered": "#323130",
+                        "inputFocusBorderAlt": "#0078d4",
+                        "inputForegroundChecked": "#ffffff",
+                        "inputIcon": "#0078d4",
+                        "inputIconDisabled": "#a19f9d",
+                        "inputIconHovered": "#005a9e",
+                        "inputPlaceholderBackgroundChecked": "#deecf9",
+                        "inputPlaceholderText": "#605e5c",
+                        "inputText": "#323130",
+                        "inputTextHovered": "#201f1e",
+                        "link": "#0078d4",
+                        "linkHovered": "#004578",
+                        "listBackground": "#ffffff",
+                        "listHeaderBackgroundHovered": "#f3f2f1",
+                        "listHeaderBackgroundPressed": "#edebe9",
+                        "listItemBackgroundChecked": "#edebe9",
+                        "listItemBackgroundCheckedHovered": "#e1dfdd",
+                        "listItemBackgroundHovered": "#f3f2f1",
+                        "listText": "#323130",
+                        "listTextColor": "#323130",
+                        "menuBackground": "#ffffff",
+                        "menuDivider": "#c8c6c4",
+                        "menuHeader": "#0078d4",
+                        "menuIcon": "#0078d4",
+                        "menuItemBackgroundChecked": "#edebe9",
+                        "menuItemBackgroundHovered": "#f3f2f1",
+                        "menuItemBackgroundPressed": "#edebe9",
+                        "menuItemText": "#323130",
+                        "menuItemTextHovered": "#201f1e",
+                        "messageLink": "#005A9E",
+                        "messageLinkHovered": "#004578",
+                        "messageText": "#323130",
+                        "primaryButtonBackground": "#0078d4",
+                        "primaryButtonBackgroundDisabled": "#f3f2f1",
+                        "primaryButtonBackgroundHovered": "#106ebe",
+                        "primaryButtonBackgroundPressed": "#005a9e",
+                        "primaryButtonBorder": "transparent",
+                        "primaryButtonText": "#ffffff",
+                        "primaryButtonTextDisabled": "#d2d0ce",
+                        "primaryButtonTextHovered": "#ffffff",
+                        "primaryButtonTextPressed": "#ffffff",
+                        "severeWarningBackground": "#FED9CC",
+                        "severeWarningIcon": "#D83B01",
+                        "smallInputBorder": "#605e5c",
+                        "successBackground": "#DFF6DD",
+                        "successIcon": "#107C10",
+                        "successText": "#107C10",
+                        "variantBorder": "#edebe9",
+                        "variantBorderHovered": "#a19f9d",
+                        "warningBackground": "#FFF4CE",
+                        "warningHighlight": "#ffb900",
+                        "warningIcon": "#797775",
+                        "warningText": "#323130",
+                      },
+                      "spacing": Object {
+                        "l1": "20px",
+                        "l2": "32px",
+                        "m": "16px",
+                        "s1": "8px",
+                        "s2": "4px",
+                      },
+                    }
+                  }
+                  type="submit"
+                >
+                  <BaseButton
+                    ariaLabel="OK"
+                    baseClassName="ms-Button"
+                    id="sidePanelOkButton"
+                    onRenderDescription={[Function]}
+                    primary={true}
+                    split={false}
+                    styles={
+                      Object {
+                        "description": Object {
+                          "display": "block",
+                        },
+                        "flexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "icon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "16px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "iconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "label": Array [
+                          Object {
+                            "display": "block",
+                            "lineHeight": "100%",
+                            "margin": "0 4px",
+                          },
+                          Object {
+                            "fontWeight": 600,
+                          },
+                        ],
+                        "menuIcon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "12px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "menuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "root": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          Object {
+                            "border": "1px solid #8a8886",
+                            "borderRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "padding": "0 16px",
+                            "selectors": Object {
+                              ":active > *": Object {
+                                "left": 0,
+                                "position": "relative",
+                                "top": 0,
+                              },
+                            },
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                          },
+                          Object {
+                            "height": "32px",
+                            "minWidth": "80px",
+                          },
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "border": "1px solid #0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus": Object {
+                                "selectors": Object {
+                                  ":after": Object {
+                                    "border": "none",
+                                    "outlineColor": "#ffffff",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "WindowText",
+                                "borderColor": "WindowText",
+                                "color": "Window",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                        ],
+                        "rootChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootCheckedHovered": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootDisabled": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "borderColor": "#f3f2f1",
+                            "color": "#a19f9d",
+                            "cursor": "default",
+                            "selectors": Object {
+                              ":focus": Object {
+                                "outline": 0,
+                              },
+                              ":hover": Object {
+                                "outline": 0,
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "color": "#d2d0ce",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "borderColor": "GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "rootExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootHovered": Object {
+                          "backgroundColor": "#106ebe",
+                          "border": "1px solid #106ebe",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "borderColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        "rootPressed": Object {
+                          "backgroundColor": "#005a9e",
+                          "border": "1px solid #005a9e",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "borderColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "screenReaderText": Object {
+                          "border": 0,
+                          "height": 1,
+                          "margin": -1,
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "absolute",
+                          "width": 1,
+                        },
+                        "splitButtonContainer": Array [
+                          Object {
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                              },
+                            },
+                          },
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid #ffffff",
+                                "bottom": 3,
+                                "content": "\\"\\"",
+                                "left": 3,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 3,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 3,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "display": "inline-flex",
+                            "selectors": Object {
+                              ".ms-Button--default": Object {
+                                "borderBottomRightRadius": "0",
+                                "borderRight": "none",
+                                "borderTopRightRadius": "0",
+                              },
+                              ".ms-Button--primary": Object {
+                                "border": "none",
+                                "borderBottomRightRadius": "0",
+                                "borderTopRightRadius": "0",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid WindowText",
+                                    "borderRightWidth": "0",
+                                    "color": "WindowText",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                              ".ms-Button--primary + .ms-Button": Object {
+                                "border": "none",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "1px solid WindowText",
+                                    "borderLeftWidth": "0",
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonContainerChecked": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerCheckedHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerDisabled": Object {
+                          "border": "none",
+                          "outline": "none",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "splitButtonContainerFocused": Object {
+                          "outline": "none!important",
+                        },
+                        "splitButtonContainerHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            ".ms-Button.is-disabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonDivider": Array [
+                          Object {
+                            "backgroundColor": "#ffffff",
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                          Object {
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                        ],
+                        "splitButtonDividerDisabled": Object {
+                          "bottom": 8,
+                          "position": "absolute",
+                          "right": 31,
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "GrayText",
+                            },
+                          },
+                          "top": 8,
+                          "width": 1,
+                        },
+                        "splitButtonFlexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "splitButtonMenuButton": Array [
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#106ebe",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "Highlight",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                          },
+                          Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              ".ms-Button-menuIcon": Object {
+                                "color": "WindowText",
+                              },
+                            },
+                            "border": "1px solid #8a8886",
+                            "borderBottomRightRadius": "2px",
+                            "borderLeft": "none",
+                            "borderRadius": 0,
+                            "borderTopRightRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": "auto",
+                            "marginBottom": 0,
+                            "marginLeft": -1,
+                            "marginRight": 0,
+                            "marginTop": 0,
+                            "outline": "transparent",
+                            "padding": 6,
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                            "verticalAlign": "top",
+                            "width": 32,
+                          },
+                        ],
+                        "splitButtonMenuButtonChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuButtonDisabled": Array [
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#f3f2f1",
+                              },
+                            },
+                          },
+                          Object {
+                            "border": "none",
+                            "pointerEvents": "none",
+                            "selectors": Object {
+                              ".ms-Button--primary": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ".ms-Button-menuIcon": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ":hover": Object {
+                                "cursor": "default",
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "border": "1px solid GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonMenuButtonExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuFocused": Object {
+                          "outline": "transparent",
+                          "position": "relative",
+                          "selectors": Object {
+                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                              "border": "1px solid #ffffff",
+                              "bottom": 3,
+                              "content": "\\"\\"",
+                              "left": 3,
+                              "outline": "1px solid #605e5c",
+                              "position": "absolute",
+                              "right": 3,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "border": "none",
+                                  "bottom": -2,
+                                  "left": -2,
+                                  "right": -2,
+                                  "top": -2,
+                                },
+                              },
+                              "top": 3,
+                              "zIndex": 1,
+                            },
+                            "::-moz-focus-inner": Object {
+                              "border": "0",
+                            },
+                          },
+                        },
+                        "splitButtonMenuIcon": Object {
+                          "color": "#ffffff",
+                        },
+                        "splitButtonMenuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "textContainer": Object {
+                          "display": "block",
+                          "flexGrow": 1,
+                        },
+                      }
+                    }
+                    text="OK"
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
+                    type="submit"
+                    variantClassName="ms-Button--primary"
+                  >
+                    <button
+                      aria-label="OK"
+                      className="ms-Button ms-Button--primary root-68"
+                      data-is-focusable={true}
+                      id="sidePanelOkButton"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyPress={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      type="submit"
+                    >
+                      <span
+                        className="ms-Button-flexContainer flexContainer-69"
+                        data-automationid="splitbuttonprimary"
+                      >
+                        <span
+                          className="ms-Button-textContainer textContainer-70"
+                        >
+                          <span
+                            className="ms-Button-label label-72"
+                            id="id__1"
+                            key="id__1"
+                          >
+                            OK
+                          </span>
+                        </span>
+                      </span>
+                    </button>
+                    <FocusRects />
+                  </BaseButton>
+                </DefaultButton>
+              </CustomizedDefaultButton>
+            </PrimaryButton>
+          </CustomizedPrimaryButton>
+        </div>
+      </PanelFooterComponent>
+    </form>
+  </RightPaneForm>
+</TableQuerySelectPanel>
+`;
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index e33566e6f..000000000
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,4205 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Table query select Panel should render Default properly 1`] = `
-<TableQuerySelectPanel
-  closePanel={[Function]}
-  explorer={Object {}}
-  queryViewModel={
-    Object {
-      "columnOptions": [Function],
-    }
-  }
->
-  <GenericRightPaneComponent
-    expandConsole={[Function]}
-    formError=""
-    formErrorDetail=""
-    id="querySelectPane"
-    isExecuting={false}
-    onClose={[Function]}
-    onSubmit={[Function]}
-    submitButtonText="OK"
-    title="Select Column"
-  >
-    <div
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <div
-        className="contextual-pane-out"
-        onClick={[Function]}
-      />
-      <div
-        className="contextual-pane"
-        id="querySelectPane"
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "height": NaN,
-          }
-        }
-      >
-        <div
-          className="panelContentWrapper"
-        >
-          <div
-            className="firstdivbg headerline"
-          >
-            <span
-              aria-level={2}
-              id="databaseTitle"
-              role="heading"
-            >
-              Select Column
-            </span>
-            <CustomizedIconButton
-              ariaLabel="Close pane"
-              className="closePaneBtn"
-              iconProps={
-                Object {
-                  "iconName": "Cancel",
-                }
-              }
-              onClick={[Function]}
-              tabIndex={0}
-              title="Close pane"
-            >
-              <IconButton
-                ariaLabel="Close pane"
-                className="closePaneBtn"
-                iconProps={
-                  Object {
-                    "iconName": "Cancel",
-                  }
-                }
-                onClick={[Function]}
-                tabIndex={0}
-                theme={
-                  Object {
-                    "disableGlobalClassNames": false,
-                    "effects": Object {
-                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "roundedCorner2": "2px",
-                      "roundedCorner4": "4px",
-                      "roundedCorner6": "6px",
-                    },
-                    "fonts": Object {
-                      "large": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "18px",
-                        "fontWeight": 400,
-                      },
-                      "medium": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "14px",
-                        "fontWeight": 400,
-                      },
-                      "mediumPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "16px",
-                        "fontWeight": 400,
-                      },
-                      "mega": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "68px",
-                        "fontWeight": 600,
-                      },
-                      "small": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "smallPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "superLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "42px",
-                        "fontWeight": 600,
-                      },
-                      "tiny": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "20px",
-                        "fontWeight": 600,
-                      },
-                      "xLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "24px",
-                        "fontWeight": 600,
-                      },
-                      "xSmall": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xxLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "28px",
-                        "fontWeight": 600,
-                      },
-                      "xxLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "32px",
-                        "fontWeight": 600,
-                      },
-                    },
-                    "isInverted": false,
-                    "palette": Object {
-                      "accent": "#0078d4",
-                      "black": "#000000",
-                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                      "blue": "#0078d4",
-                      "blueDark": "#002050",
-                      "blueLight": "#00bcf2",
-                      "blueMid": "#00188f",
-                      "green": "#107c10",
-                      "greenDark": "#004b1c",
-                      "greenLight": "#bad80a",
-                      "magenta": "#b4009e",
-                      "magentaDark": "#5c005c",
-                      "magentaLight": "#e3008c",
-                      "neutralDark": "#201f1e",
-                      "neutralLight": "#edebe9",
-                      "neutralLighter": "#f3f2f1",
-                      "neutralLighterAlt": "#faf9f8",
-                      "neutralPrimary": "#323130",
-                      "neutralPrimaryAlt": "#3b3a39",
-                      "neutralQuaternary": "#d2d0ce",
-                      "neutralQuaternaryAlt": "#e1dfdd",
-                      "neutralSecondary": "#605e5c",
-                      "neutralSecondaryAlt": "#8a8886",
-                      "neutralTertiary": "#a19f9d",
-                      "neutralTertiaryAlt": "#c8c6c4",
-                      "orange": "#d83b01",
-                      "orangeLight": "#ea4300",
-                      "orangeLighter": "#ff8c00",
-                      "purple": "#5c2d91",
-                      "purpleDark": "#32145a",
-                      "purpleLight": "#b4a0ff",
-                      "red": "#e81123",
-                      "redDark": "#a4262c",
-                      "teal": "#008272",
-                      "tealDark": "#004b50",
-                      "tealLight": "#00b294",
-                      "themeDark": "#005a9e",
-                      "themeDarkAlt": "#106ebe",
-                      "themeDarker": "#004578",
-                      "themeLight": "#c7e0f4",
-                      "themeLighter": "#deecf9",
-                      "themeLighterAlt": "#eff6fc",
-                      "themePrimary": "#0078d4",
-                      "themeSecondary": "#2b88d8",
-                      "themeTertiary": "#71afe5",
-                      "white": "#ffffff",
-                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                      "yellow": "#ffb900",
-                      "yellowDark": "#d29200",
-                      "yellowLight": "#fff100",
-                    },
-                    "rtl": undefined,
-                    "semanticColors": Object {
-                      "accentButtonBackground": "#0078d4",
-                      "accentButtonText": "#ffffff",
-                      "actionLink": "#323130",
-                      "actionLinkHovered": "#201f1e",
-                      "blockingBackground": "#FDE7E9",
-                      "blockingIcon": "#FDE7E9",
-                      "bodyBackground": "#ffffff",
-                      "bodyBackgroundChecked": "#edebe9",
-                      "bodyBackgroundHovered": "#f3f2f1",
-                      "bodyDivider": "#edebe9",
-                      "bodyFrameBackground": "#ffffff",
-                      "bodyFrameDivider": "#edebe9",
-                      "bodyStandoutBackground": "#faf9f8",
-                      "bodySubtext": "#605e5c",
-                      "bodyText": "#323130",
-                      "bodyTextChecked": "#000000",
-                      "buttonBackground": "#ffffff",
-                      "buttonBackgroundChecked": "#c8c6c4",
-                      "buttonBackgroundCheckedHovered": "#edebe9",
-                      "buttonBackgroundDisabled": "#f3f2f1",
-                      "buttonBackgroundHovered": "#f3f2f1",
-                      "buttonBackgroundPressed": "#edebe9",
-                      "buttonBorder": "#8a8886",
-                      "buttonBorderDisabled": "#f3f2f1",
-                      "buttonText": "#323130",
-                      "buttonTextChecked": "#201f1e",
-                      "buttonTextCheckedHovered": "#000000",
-                      "buttonTextDisabled": "#a19f9d",
-                      "buttonTextHovered": "#201f1e",
-                      "buttonTextPressed": "#201f1e",
-                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "cardStandoutBackground": "#ffffff",
-                      "defaultStateBackground": "#faf9f8",
-                      "disabledBackground": "#f3f2f1",
-                      "disabledBodySubtext": "#c8c6c4",
-                      "disabledBodyText": "#a19f9d",
-                      "disabledBorder": "#c8c6c4",
-                      "disabledSubtext": "#d2d0ce",
-                      "disabledText": "#a19f9d",
-                      "errorBackground": "#FDE7E9",
-                      "errorIcon": "#A80000",
-                      "errorText": "#a4262c",
-                      "focusBorder": "#605e5c",
-                      "infoBackground": "#f3f2f1",
-                      "infoIcon": "#605e5c",
-                      "inputBackground": "#ffffff",
-                      "inputBackgroundChecked": "#0078d4",
-                      "inputBackgroundCheckedHovered": "#005a9e",
-                      "inputBorder": "#605e5c",
-                      "inputBorderHovered": "#323130",
-                      "inputFocusBorderAlt": "#0078d4",
-                      "inputForegroundChecked": "#ffffff",
-                      "inputIcon": "#0078d4",
-                      "inputIconDisabled": "#a19f9d",
-                      "inputIconHovered": "#005a9e",
-                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                      "inputPlaceholderText": "#605e5c",
-                      "inputText": "#323130",
-                      "inputTextHovered": "#201f1e",
-                      "link": "#0078d4",
-                      "linkHovered": "#004578",
-                      "listBackground": "#ffffff",
-                      "listHeaderBackgroundHovered": "#f3f2f1",
-                      "listHeaderBackgroundPressed": "#edebe9",
-                      "listItemBackgroundChecked": "#edebe9",
-                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                      "listItemBackgroundHovered": "#f3f2f1",
-                      "listText": "#323130",
-                      "listTextColor": "#323130",
-                      "menuBackground": "#ffffff",
-                      "menuDivider": "#c8c6c4",
-                      "menuHeader": "#0078d4",
-                      "menuIcon": "#0078d4",
-                      "menuItemBackgroundChecked": "#edebe9",
-                      "menuItemBackgroundHovered": "#f3f2f1",
-                      "menuItemBackgroundPressed": "#edebe9",
-                      "menuItemText": "#323130",
-                      "menuItemTextHovered": "#201f1e",
-                      "messageLink": "#005A9E",
-                      "messageLinkHovered": "#004578",
-                      "messageText": "#323130",
-                      "primaryButtonBackground": "#0078d4",
-                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                      "primaryButtonBackgroundHovered": "#106ebe",
-                      "primaryButtonBackgroundPressed": "#005a9e",
-                      "primaryButtonBorder": "transparent",
-                      "primaryButtonText": "#ffffff",
-                      "primaryButtonTextDisabled": "#d2d0ce",
-                      "primaryButtonTextHovered": "#ffffff",
-                      "primaryButtonTextPressed": "#ffffff",
-                      "severeWarningBackground": "#FED9CC",
-                      "severeWarningIcon": "#D83B01",
-                      "smallInputBorder": "#605e5c",
-                      "successBackground": "#DFF6DD",
-                      "successIcon": "#107C10",
-                      "successText": "#107C10",
-                      "variantBorder": "#edebe9",
-                      "variantBorderHovered": "#a19f9d",
-                      "warningBackground": "#FFF4CE",
-                      "warningHighlight": "#ffb900",
-                      "warningIcon": "#797775",
-                      "warningText": "#323130",
-                    },
-                    "spacing": Object {
-                      "l1": "20px",
-                      "l2": "32px",
-                      "m": "16px",
-                      "s1": "8px",
-                      "s2": "4px",
-                    },
-                  }
-                }
-                title="Close pane"
-              >
-                <BaseButton
-                  ariaLabel="Close pane"
-                  baseClassName="ms-Button"
-                  className="closePaneBtn"
-                  iconProps={
-                    Object {
-                      "iconName": "Cancel",
-                    }
-                  }
-                  onClick={[Function]}
-                  onRenderDescription={[Function]}
-                  onRenderText={[Function]}
-                  split={false}
-                  styles={
-                    Object {
-                      "description": Object {
-                        "display": "block",
-                      },
-                      "flexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "icon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "16px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "iconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "label": Object {
-                        "display": "block",
-                        "lineHeight": "100%",
-                        "margin": "0 4px",
-                      },
-                      "menuIcon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "12px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "menuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "root": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        Object {
-                          "border": "1px solid #8a8886",
-                          "borderRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "padding": "0 16px",
-                          "selectors": Object {
-                            ":active > *": Object {
-                              "left": 0,
-                              "position": "relative",
-                              "top": 0,
-                            },
-                          },
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                        },
-                        Object {
-                          "backgroundColor": "transparent",
-                          "border": "none",
-                          "color": "#0078d4",
-                          "height": "32px",
-                          "padding": "0 4px",
-                          "width": "32px",
-                        },
-                      ],
-                      "rootChecked": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootCheckedHovered": Object {
-                        "backgroundColor": "#e1dfdd",
-                        "color": "#005a9e",
-                      },
-                      "rootDisabled": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "borderColor": "#f3f2f1",
-                          "color": "#a19f9d",
-                          "cursor": "default",
-                          "selectors": Object {
-                            ":focus": Object {
-                              "outline": 0,
-                            },
-                            ":hover": Object {
-                              "outline": 0,
-                            },
-                          },
-                        },
-                        Object {
-                          "color": "#c8c6c4",
-                        },
-                      ],
-                      "rootExpanded": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "rootHasMenu": Object {
-                        "width": "auto",
-                      },
-                      "rootHovered": Object {
-                        "backgroundColor": "#f3f2f1",
-                        "color": "#106ebe",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "borderColor": "Highlight",
-                            "color": "Highlight",
-                          },
-                        },
-                      },
-                      "rootPressed": Object {
-                        "backgroundColor": "#edebe9",
-                        "color": "#005a9e",
-                      },
-                      "screenReaderText": Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "width": 1,
-                      },
-                      "splitButtonContainer": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid #ffffff",
-                              "bottom": 3,
-                              "content": "\\"\\"",
-                              "left": 3,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 3,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "none",
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 3,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "display": "inline-flex",
-                          "selectors": Object {
-                            ".ms-Button--default": Object {
-                              "borderBottomRightRadius": "0",
-                              "borderRight": "none",
-                              "borderTopRightRadius": "0",
-                            },
-                            ".ms-Button--primary": Object {
-                              "border": "none",
-                              "borderBottomRightRadius": "0",
-                              "borderTopRightRadius": "0",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "border": "1px solid WindowText",
-                                  "borderRightWidth": "0",
-                                  "color": "WindowText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            ".ms-Button--primary + .ms-Button": Object {
-                              "border": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "1px solid WindowText",
-                                  "borderLeftWidth": "0",
-                                },
-                              },
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonContainerChecked": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerCheckedHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerDisabled": Object {
-                        "border": "none",
-                        "outline": "none",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "Window",
-                            "borderColor": "GrayText",
-                            "color": "GrayText",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "splitButtonContainerFocused": Object {
-                        "outline": "none!important",
-                      },
-                      "splitButtonContainerHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Highlight",
-                                "color": "Window",
-                              },
-                            },
-                          },
-                          ".ms-Button.is-disabled": Object {
-                            "color": "#a19f9d",
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonDivider": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "WindowText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonDividerDisabled": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "GrayText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonFlexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "splitButtonMenuButton": Object {
-                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                          ".ms-Button-menuIcon": Object {
-                            "color": "WindowText",
-                          },
-                        },
-                        "border": "1px solid #8a8886",
-                        "borderBottomRightRadius": "2px",
-                        "borderLeft": "none",
-                        "borderRadius": 0,
-                        "borderTopRightRadius": "2px",
-                        "boxSizing": "border-box",
-                        "cursor": "pointer",
-                        "display": "inline-block",
-                        "height": "auto",
-                        "marginBottom": 0,
-                        "marginLeft": -1,
-                        "marginRight": 0,
-                        "marginTop": 0,
-                        "outline": "transparent",
-                        "padding": 6,
-                        "textAlign": "center",
-                        "textDecoration": "none",
-                        "userSelect": "none",
-                        "verticalAlign": "top",
-                        "width": 32,
-                      },
-                      "splitButtonMenuButtonDisabled": Object {
-                        "border": "none",
-                        "pointerEvents": "none",
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ".ms-Button-menuIcon": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                          ":hover": Object {
-                            "cursor": "default",
-                          },
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "Window",
-                            "border": "1px solid GrayText",
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "splitButtonMenuFocused": Object {
-                        "outline": "transparent",
-                        "position": "relative",
-                        "selectors": Object {
-                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                            "border": "1px solid #ffffff",
-                            "bottom": 3,
-                            "content": "\\"\\"",
-                            "left": 3,
-                            "outline": "1px solid #605e5c",
-                            "position": "absolute",
-                            "right": 3,
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "border": "none",
-                                "bottom": -2,
-                                "left": -2,
-                                "right": -2,
-                                "top": -2,
-                              },
-                            },
-                            "top": 3,
-                            "zIndex": 1,
-                          },
-                          "::-moz-focus-inner": Object {
-                            "border": "0",
-                          },
-                        },
-                      },
-                      "textContainer": Object {
-                        "display": "block",
-                        "flexGrow": 1,
-                      },
-                    }
-                  }
-                  tabIndex={0}
-                  theme={
-                    Object {
-                      "disableGlobalClassNames": false,
-                      "effects": Object {
-                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "roundedCorner2": "2px",
-                        "roundedCorner4": "4px",
-                        "roundedCorner6": "6px",
-                      },
-                      "fonts": Object {
-                        "large": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "18px",
-                          "fontWeight": 400,
-                        },
-                        "medium": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        "mediumPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "16px",
-                          "fontWeight": 400,
-                        },
-                        "mega": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "68px",
-                          "fontWeight": 600,
-                        },
-                        "small": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "smallPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "superLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "42px",
-                          "fontWeight": 600,
-                        },
-                        "tiny": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "20px",
-                          "fontWeight": 600,
-                        },
-                        "xLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "24px",
-                          "fontWeight": 600,
-                        },
-                        "xSmall": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xxLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "28px",
-                          "fontWeight": 600,
-                        },
-                        "xxLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "32px",
-                          "fontWeight": 600,
-                        },
-                      },
-                      "isInverted": false,
-                      "palette": Object {
-                        "accent": "#0078d4",
-                        "black": "#000000",
-                        "blackTranslucent40": "rgba(0,0,0,.4)",
-                        "blue": "#0078d4",
-                        "blueDark": "#002050",
-                        "blueLight": "#00bcf2",
-                        "blueMid": "#00188f",
-                        "green": "#107c10",
-                        "greenDark": "#004b1c",
-                        "greenLight": "#bad80a",
-                        "magenta": "#b4009e",
-                        "magentaDark": "#5c005c",
-                        "magentaLight": "#e3008c",
-                        "neutralDark": "#201f1e",
-                        "neutralLight": "#edebe9",
-                        "neutralLighter": "#f3f2f1",
-                        "neutralLighterAlt": "#faf9f8",
-                        "neutralPrimary": "#323130",
-                        "neutralPrimaryAlt": "#3b3a39",
-                        "neutralQuaternary": "#d2d0ce",
-                        "neutralQuaternaryAlt": "#e1dfdd",
-                        "neutralSecondary": "#605e5c",
-                        "neutralSecondaryAlt": "#8a8886",
-                        "neutralTertiary": "#a19f9d",
-                        "neutralTertiaryAlt": "#c8c6c4",
-                        "orange": "#d83b01",
-                        "orangeLight": "#ea4300",
-                        "orangeLighter": "#ff8c00",
-                        "purple": "#5c2d91",
-                        "purpleDark": "#32145a",
-                        "purpleLight": "#b4a0ff",
-                        "red": "#e81123",
-                        "redDark": "#a4262c",
-                        "teal": "#008272",
-                        "tealDark": "#004b50",
-                        "tealLight": "#00b294",
-                        "themeDark": "#005a9e",
-                        "themeDarkAlt": "#106ebe",
-                        "themeDarker": "#004578",
-                        "themeLight": "#c7e0f4",
-                        "themeLighter": "#deecf9",
-                        "themeLighterAlt": "#eff6fc",
-                        "themePrimary": "#0078d4",
-                        "themeSecondary": "#2b88d8",
-                        "themeTertiary": "#71afe5",
-                        "white": "#ffffff",
-                        "whiteTranslucent40": "rgba(255,255,255,.4)",
-                        "yellow": "#ffb900",
-                        "yellowDark": "#d29200",
-                        "yellowLight": "#fff100",
-                      },
-                      "rtl": undefined,
-                      "semanticColors": Object {
-                        "accentButtonBackground": "#0078d4",
-                        "accentButtonText": "#ffffff",
-                        "actionLink": "#323130",
-                        "actionLinkHovered": "#201f1e",
-                        "blockingBackground": "#FDE7E9",
-                        "blockingIcon": "#FDE7E9",
-                        "bodyBackground": "#ffffff",
-                        "bodyBackgroundChecked": "#edebe9",
-                        "bodyBackgroundHovered": "#f3f2f1",
-                        "bodyDivider": "#edebe9",
-                        "bodyFrameBackground": "#ffffff",
-                        "bodyFrameDivider": "#edebe9",
-                        "bodyStandoutBackground": "#faf9f8",
-                        "bodySubtext": "#605e5c",
-                        "bodyText": "#323130",
-                        "bodyTextChecked": "#000000",
-                        "buttonBackground": "#ffffff",
-                        "buttonBackgroundChecked": "#c8c6c4",
-                        "buttonBackgroundCheckedHovered": "#edebe9",
-                        "buttonBackgroundDisabled": "#f3f2f1",
-                        "buttonBackgroundHovered": "#f3f2f1",
-                        "buttonBackgroundPressed": "#edebe9",
-                        "buttonBorder": "#8a8886",
-                        "buttonBorderDisabled": "#f3f2f1",
-                        "buttonText": "#323130",
-                        "buttonTextChecked": "#201f1e",
-                        "buttonTextCheckedHovered": "#000000",
-                        "buttonTextDisabled": "#a19f9d",
-                        "buttonTextHovered": "#201f1e",
-                        "buttonTextPressed": "#201f1e",
-                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "cardStandoutBackground": "#ffffff",
-                        "defaultStateBackground": "#faf9f8",
-                        "disabledBackground": "#f3f2f1",
-                        "disabledBodySubtext": "#c8c6c4",
-                        "disabledBodyText": "#a19f9d",
-                        "disabledBorder": "#c8c6c4",
-                        "disabledSubtext": "#d2d0ce",
-                        "disabledText": "#a19f9d",
-                        "errorBackground": "#FDE7E9",
-                        "errorIcon": "#A80000",
-                        "errorText": "#a4262c",
-                        "focusBorder": "#605e5c",
-                        "infoBackground": "#f3f2f1",
-                        "infoIcon": "#605e5c",
-                        "inputBackground": "#ffffff",
-                        "inputBackgroundChecked": "#0078d4",
-                        "inputBackgroundCheckedHovered": "#005a9e",
-                        "inputBorder": "#605e5c",
-                        "inputBorderHovered": "#323130",
-                        "inputFocusBorderAlt": "#0078d4",
-                        "inputForegroundChecked": "#ffffff",
-                        "inputIcon": "#0078d4",
-                        "inputIconDisabled": "#a19f9d",
-                        "inputIconHovered": "#005a9e",
-                        "inputPlaceholderBackgroundChecked": "#deecf9",
-                        "inputPlaceholderText": "#605e5c",
-                        "inputText": "#323130",
-                        "inputTextHovered": "#201f1e",
-                        "link": "#0078d4",
-                        "linkHovered": "#004578",
-                        "listBackground": "#ffffff",
-                        "listHeaderBackgroundHovered": "#f3f2f1",
-                        "listHeaderBackgroundPressed": "#edebe9",
-                        "listItemBackgroundChecked": "#edebe9",
-                        "listItemBackgroundCheckedHovered": "#e1dfdd",
-                        "listItemBackgroundHovered": "#f3f2f1",
-                        "listText": "#323130",
-                        "listTextColor": "#323130",
-                        "menuBackground": "#ffffff",
-                        "menuDivider": "#c8c6c4",
-                        "menuHeader": "#0078d4",
-                        "menuIcon": "#0078d4",
-                        "menuItemBackgroundChecked": "#edebe9",
-                        "menuItemBackgroundHovered": "#f3f2f1",
-                        "menuItemBackgroundPressed": "#edebe9",
-                        "menuItemText": "#323130",
-                        "menuItemTextHovered": "#201f1e",
-                        "messageLink": "#005A9E",
-                        "messageLinkHovered": "#004578",
-                        "messageText": "#323130",
-                        "primaryButtonBackground": "#0078d4",
-                        "primaryButtonBackgroundDisabled": "#f3f2f1",
-                        "primaryButtonBackgroundHovered": "#106ebe",
-                        "primaryButtonBackgroundPressed": "#005a9e",
-                        "primaryButtonBorder": "transparent",
-                        "primaryButtonText": "#ffffff",
-                        "primaryButtonTextDisabled": "#d2d0ce",
-                        "primaryButtonTextHovered": "#ffffff",
-                        "primaryButtonTextPressed": "#ffffff",
-                        "severeWarningBackground": "#FED9CC",
-                        "severeWarningIcon": "#D83B01",
-                        "smallInputBorder": "#605e5c",
-                        "successBackground": "#DFF6DD",
-                        "successIcon": "#107C10",
-                        "successText": "#107C10",
-                        "variantBorder": "#edebe9",
-                        "variantBorderHovered": "#a19f9d",
-                        "warningBackground": "#FFF4CE",
-                        "warningHighlight": "#ffb900",
-                        "warningIcon": "#797775",
-                        "warningText": "#323130",
-                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
-                      },
-                    }
-                  }
-                  title="Close pane"
-                  variantClassName="ms-Button--icon"
-                >
-                  <button
-                    aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-53"
-                    data-is-focusable={true}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    tabIndex={0}
-                    title="Close pane"
-                    type="button"
-                  >
-                    <span
-                      className="ms-Button-flexContainer flexContainer-54"
-                      data-automationid="splitbuttonprimary"
-                    >
-                      <FontIcon
-                        className="ms-Button-icon icon-56"
-                        iconName="Cancel"
-                      >
-                        <i
-                          aria-hidden={true}
-                          className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
-                          data-icon-name="Cancel"
-                          style={
-                            Object {
-                              "fontFamily": "\\"FabricMDL2Icons\\"",
-                            }
-                          }
-                        >
-                          
-                        </i>
-                      </FontIcon>
-                    </span>
-                  </button>
-                  <FocusRects />
-                </BaseButton>
-              </IconButton>
-            </CustomizedIconButton>
-          </div>
-          <div
-            aria-live="assertive"
-            className="warningErrorContainer"
-            hidden={true}
-          >
-            <div
-              className="warningErrorContent"
-            >
-              <span>
-                <img
-                  alt="Error"
-                  className="paneErrorIcon"
-                  src=""
-                />
-              </span>
-              <span
-                className="warningErrorDetailsLinkContainer"
-              >
-                <span
-                  className="formErrors"
-                  title=""
-                />
-                <a
-                  className="errorLink"
-                  hidden={true}
-                  onClick={[Function]}
-                  role="link"
-                >
-                  More details
-                </a>
-              </span>
-            </div>
-          </div>
-          <div
-            className="panelFormWrapper"
-          >
-            <div
-              className="panelMainContent"
-            >
-              <Text>
-                <span
-                  className="css-62"
-                >
-                  Select the columns that you want to query.
-                </span>
-              </Text>
-              <div
-                className="column-select-view"
-              >
-                <StyledCheckboxBase
-                  checked={true}
-                  id="availableCheckbox"
-                  label="Available Columns"
-                  onChange={[Function]}
-                >
-                  <CheckboxBase
-                    checked={true}
-                    id="availableCheckbox"
-                    label="Available Columns"
-                    onChange={[Function]}
-                    styles={[Function]}
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                  >
-                    <div
-                      className="ms-Checkbox is-checked is-enabled root-63"
-                    >
-                      <input
-                        aria-checked="true"
-                        aria-label="Available Columns"
-                        checked={true}
-                        className="input-64"
-                        data-ktp-execute-target={true}
-                        id="availableCheckbox"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <label
-                        className="ms-Checkbox-label label-65"
-                        htmlFor="availableCheckbox"
-                      >
-                        <div
-                          className="ms-Checkbox-checkbox checkbox-66"
-                          data-ktp-target={true}
-                        >
-                          <StyledIconBase
-                            className="ms-Checkbox-checkmark checkmark-67"
-                            iconName="CheckMark"
-                          >
-                            <IconBase
-                              className="ms-Checkbox-checkmark checkmark-67"
-                              iconName="CheckMark"
-                              styles={[Function]}
-                              theme={
-                                Object {
-                                  "disableGlobalClassNames": false,
-                                  "effects": Object {
-                                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                    "roundedCorner2": "2px",
-                                    "roundedCorner4": "4px",
-                                    "roundedCorner6": "6px",
-                                  },
-                                  "fonts": Object {
-                                    "large": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "18px",
-                                      "fontWeight": 400,
-                                    },
-                                    "medium": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "14px",
-                                      "fontWeight": 400,
-                                    },
-                                    "mediumPlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "16px",
-                                      "fontWeight": 400,
-                                    },
-                                    "mega": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "68px",
-                                      "fontWeight": 600,
-                                    },
-                                    "small": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "12px",
-                                      "fontWeight": 400,
-                                    },
-                                    "smallPlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "12px",
-                                      "fontWeight": 400,
-                                    },
-                                    "superLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "42px",
-                                      "fontWeight": 600,
-                                    },
-                                    "tiny": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "10px",
-                                      "fontWeight": 400,
-                                    },
-                                    "xLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "20px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xLargePlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "24px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xSmall": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "10px",
-                                      "fontWeight": 400,
-                                    },
-                                    "xxLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "28px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xxLargePlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "32px",
-                                      "fontWeight": 600,
-                                    },
-                                  },
-                                  "isInverted": false,
-                                  "palette": Object {
-                                    "accent": "#0078d4",
-                                    "black": "#000000",
-                                    "blackTranslucent40": "rgba(0,0,0,.4)",
-                                    "blue": "#0078d4",
-                                    "blueDark": "#002050",
-                                    "blueLight": "#00bcf2",
-                                    "blueMid": "#00188f",
-                                    "green": "#107c10",
-                                    "greenDark": "#004b1c",
-                                    "greenLight": "#bad80a",
-                                    "magenta": "#b4009e",
-                                    "magentaDark": "#5c005c",
-                                    "magentaLight": "#e3008c",
-                                    "neutralDark": "#201f1e",
-                                    "neutralLight": "#edebe9",
-                                    "neutralLighter": "#f3f2f1",
-                                    "neutralLighterAlt": "#faf9f8",
-                                    "neutralPrimary": "#323130",
-                                    "neutralPrimaryAlt": "#3b3a39",
-                                    "neutralQuaternary": "#d2d0ce",
-                                    "neutralQuaternaryAlt": "#e1dfdd",
-                                    "neutralSecondary": "#605e5c",
-                                    "neutralSecondaryAlt": "#8a8886",
-                                    "neutralTertiary": "#a19f9d",
-                                    "neutralTertiaryAlt": "#c8c6c4",
-                                    "orange": "#d83b01",
-                                    "orangeLight": "#ea4300",
-                                    "orangeLighter": "#ff8c00",
-                                    "purple": "#5c2d91",
-                                    "purpleDark": "#32145a",
-                                    "purpleLight": "#b4a0ff",
-                                    "red": "#e81123",
-                                    "redDark": "#a4262c",
-                                    "teal": "#008272",
-                                    "tealDark": "#004b50",
-                                    "tealLight": "#00b294",
-                                    "themeDark": "#005a9e",
-                                    "themeDarkAlt": "#106ebe",
-                                    "themeDarker": "#004578",
-                                    "themeLight": "#c7e0f4",
-                                    "themeLighter": "#deecf9",
-                                    "themeLighterAlt": "#eff6fc",
-                                    "themePrimary": "#0078d4",
-                                    "themeSecondary": "#2b88d8",
-                                    "themeTertiary": "#71afe5",
-                                    "white": "#ffffff",
-                                    "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                    "yellow": "#ffb900",
-                                    "yellowDark": "#d29200",
-                                    "yellowLight": "#fff100",
-                                  },
-                                  "rtl": undefined,
-                                  "semanticColors": Object {
-                                    "accentButtonBackground": "#0078d4",
-                                    "accentButtonText": "#ffffff",
-                                    "actionLink": "#323130",
-                                    "actionLinkHovered": "#201f1e",
-                                    "blockingBackground": "#FDE7E9",
-                                    "blockingIcon": "#FDE7E9",
-                                    "bodyBackground": "#ffffff",
-                                    "bodyBackgroundChecked": "#edebe9",
-                                    "bodyBackgroundHovered": "#f3f2f1",
-                                    "bodyDivider": "#edebe9",
-                                    "bodyFrameBackground": "#ffffff",
-                                    "bodyFrameDivider": "#edebe9",
-                                    "bodyStandoutBackground": "#faf9f8",
-                                    "bodySubtext": "#605e5c",
-                                    "bodyText": "#323130",
-                                    "bodyTextChecked": "#000000",
-                                    "buttonBackground": "#ffffff",
-                                    "buttonBackgroundChecked": "#c8c6c4",
-                                    "buttonBackgroundCheckedHovered": "#edebe9",
-                                    "buttonBackgroundDisabled": "#f3f2f1",
-                                    "buttonBackgroundHovered": "#f3f2f1",
-                                    "buttonBackgroundPressed": "#edebe9",
-                                    "buttonBorder": "#8a8886",
-                                    "buttonBorderDisabled": "#f3f2f1",
-                                    "buttonText": "#323130",
-                                    "buttonTextChecked": "#201f1e",
-                                    "buttonTextCheckedHovered": "#000000",
-                                    "buttonTextDisabled": "#a19f9d",
-                                    "buttonTextHovered": "#201f1e",
-                                    "buttonTextPressed": "#201f1e",
-                                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                    "cardStandoutBackground": "#ffffff",
-                                    "defaultStateBackground": "#faf9f8",
-                                    "disabledBackground": "#f3f2f1",
-                                    "disabledBodySubtext": "#c8c6c4",
-                                    "disabledBodyText": "#a19f9d",
-                                    "disabledBorder": "#c8c6c4",
-                                    "disabledSubtext": "#d2d0ce",
-                                    "disabledText": "#a19f9d",
-                                    "errorBackground": "#FDE7E9",
-                                    "errorIcon": "#A80000",
-                                    "errorText": "#a4262c",
-                                    "focusBorder": "#605e5c",
-                                    "infoBackground": "#f3f2f1",
-                                    "infoIcon": "#605e5c",
-                                    "inputBackground": "#ffffff",
-                                    "inputBackgroundChecked": "#0078d4",
-                                    "inputBackgroundCheckedHovered": "#005a9e",
-                                    "inputBorder": "#605e5c",
-                                    "inputBorderHovered": "#323130",
-                                    "inputFocusBorderAlt": "#0078d4",
-                                    "inputForegroundChecked": "#ffffff",
-                                    "inputIcon": "#0078d4",
-                                    "inputIconDisabled": "#a19f9d",
-                                    "inputIconHovered": "#005a9e",
-                                    "inputPlaceholderBackgroundChecked": "#deecf9",
-                                    "inputPlaceholderText": "#605e5c",
-                                    "inputText": "#323130",
-                                    "inputTextHovered": "#201f1e",
-                                    "link": "#0078d4",
-                                    "linkHovered": "#004578",
-                                    "listBackground": "#ffffff",
-                                    "listHeaderBackgroundHovered": "#f3f2f1",
-                                    "listHeaderBackgroundPressed": "#edebe9",
-                                    "listItemBackgroundChecked": "#edebe9",
-                                    "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                    "listItemBackgroundHovered": "#f3f2f1",
-                                    "listText": "#323130",
-                                    "listTextColor": "#323130",
-                                    "menuBackground": "#ffffff",
-                                    "menuDivider": "#c8c6c4",
-                                    "menuHeader": "#0078d4",
-                                    "menuIcon": "#0078d4",
-                                    "menuItemBackgroundChecked": "#edebe9",
-                                    "menuItemBackgroundHovered": "#f3f2f1",
-                                    "menuItemBackgroundPressed": "#edebe9",
-                                    "menuItemText": "#323130",
-                                    "menuItemTextHovered": "#201f1e",
-                                    "messageLink": "#005A9E",
-                                    "messageLinkHovered": "#004578",
-                                    "messageText": "#323130",
-                                    "primaryButtonBackground": "#0078d4",
-                                    "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                    "primaryButtonBackgroundHovered": "#106ebe",
-                                    "primaryButtonBackgroundPressed": "#005a9e",
-                                    "primaryButtonBorder": "transparent",
-                                    "primaryButtonText": "#ffffff",
-                                    "primaryButtonTextDisabled": "#d2d0ce",
-                                    "primaryButtonTextHovered": "#ffffff",
-                                    "primaryButtonTextPressed": "#ffffff",
-                                    "severeWarningBackground": "#FED9CC",
-                                    "severeWarningIcon": "#D83B01",
-                                    "smallInputBorder": "#605e5c",
-                                    "successBackground": "#DFF6DD",
-                                    "successIcon": "#107C10",
-                                    "successText": "#107C10",
-                                    "variantBorder": "#edebe9",
-                                    "variantBorderHovered": "#a19f9d",
-                                    "warningBackground": "#FFF4CE",
-                                    "warningHighlight": "#ffb900",
-                                    "warningIcon": "#797775",
-                                    "warningText": "#323130",
-                                  },
-                                  "spacing": Object {
-                                    "l1": "20px",
-                                    "l2": "32px",
-                                    "m": "16px",
-                                    "s1": "8px",
-                                    "s2": "4px",
-                                  },
-                                }
-                              }
-                            >
-                              <i
-                                aria-hidden={true}
-                                className="ms-Checkbox-checkmark checkmark-69"
-                                data-icon-name="CheckMark"
-                              >
-                                
-                              </i>
-                            </IconBase>
-                          </StyledIconBase>
-                        </div>
-                        <span
-                          aria-hidden="true"
-                          className="ms-Checkbox-text text-68"
-                        >
-                          Available Columns
-                        </span>
-                      </label>
-                    </div>
-                  </CheckboxBase>
-                </StyledCheckboxBase>
-                <StyledCheckboxBase
-                  checked={true}
-                  disabled={false}
-                  key=""
-                  label=""
-                  onChange={[Function]}
-                >
-                  <CheckboxBase
-                    checked={true}
-                    disabled={false}
-                    label=""
-                    onChange={[Function]}
-                    styles={[Function]}
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                  >
-                    <div
-                      className="ms-Checkbox is-checked is-enabled root-63"
-                    >
-                      <input
-                        aria-checked="true"
-                        aria-disabled={false}
-                        aria-label=""
-                        checked={true}
-                        className="input-64"
-                        data-ktp-execute-target={true}
-                        disabled={false}
-                        id="checkbox-3"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <label
-                        className="ms-Checkbox-label label-65"
-                        htmlFor="checkbox-3"
-                      >
-                        <div
-                          className="ms-Checkbox-checkbox checkbox-66"
-                          data-ktp-target={true}
-                        >
-                          <StyledIconBase
-                            className="ms-Checkbox-checkmark checkmark-67"
-                            iconName="CheckMark"
-                          >
-                            <IconBase
-                              className="ms-Checkbox-checkmark checkmark-67"
-                              iconName="CheckMark"
-                              styles={[Function]}
-                              theme={
-                                Object {
-                                  "disableGlobalClassNames": false,
-                                  "effects": Object {
-                                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                    "roundedCorner2": "2px",
-                                    "roundedCorner4": "4px",
-                                    "roundedCorner6": "6px",
-                                  },
-                                  "fonts": Object {
-                                    "large": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "18px",
-                                      "fontWeight": 400,
-                                    },
-                                    "medium": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "14px",
-                                      "fontWeight": 400,
-                                    },
-                                    "mediumPlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "16px",
-                                      "fontWeight": 400,
-                                    },
-                                    "mega": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "68px",
-                                      "fontWeight": 600,
-                                    },
-                                    "small": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "12px",
-                                      "fontWeight": 400,
-                                    },
-                                    "smallPlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "12px",
-                                      "fontWeight": 400,
-                                    },
-                                    "superLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "42px",
-                                      "fontWeight": 600,
-                                    },
-                                    "tiny": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "10px",
-                                      "fontWeight": 400,
-                                    },
-                                    "xLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "20px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xLargePlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "24px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xSmall": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "10px",
-                                      "fontWeight": 400,
-                                    },
-                                    "xxLarge": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "28px",
-                                      "fontWeight": 600,
-                                    },
-                                    "xxLargePlus": Object {
-                                      "MozOsxFontSmoothing": "grayscale",
-                                      "WebkitFontSmoothing": "antialiased",
-                                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                      "fontSize": "32px",
-                                      "fontWeight": 600,
-                                    },
-                                  },
-                                  "isInverted": false,
-                                  "palette": Object {
-                                    "accent": "#0078d4",
-                                    "black": "#000000",
-                                    "blackTranslucent40": "rgba(0,0,0,.4)",
-                                    "blue": "#0078d4",
-                                    "blueDark": "#002050",
-                                    "blueLight": "#00bcf2",
-                                    "blueMid": "#00188f",
-                                    "green": "#107c10",
-                                    "greenDark": "#004b1c",
-                                    "greenLight": "#bad80a",
-                                    "magenta": "#b4009e",
-                                    "magentaDark": "#5c005c",
-                                    "magentaLight": "#e3008c",
-                                    "neutralDark": "#201f1e",
-                                    "neutralLight": "#edebe9",
-                                    "neutralLighter": "#f3f2f1",
-                                    "neutralLighterAlt": "#faf9f8",
-                                    "neutralPrimary": "#323130",
-                                    "neutralPrimaryAlt": "#3b3a39",
-                                    "neutralQuaternary": "#d2d0ce",
-                                    "neutralQuaternaryAlt": "#e1dfdd",
-                                    "neutralSecondary": "#605e5c",
-                                    "neutralSecondaryAlt": "#8a8886",
-                                    "neutralTertiary": "#a19f9d",
-                                    "neutralTertiaryAlt": "#c8c6c4",
-                                    "orange": "#d83b01",
-                                    "orangeLight": "#ea4300",
-                                    "orangeLighter": "#ff8c00",
-                                    "purple": "#5c2d91",
-                                    "purpleDark": "#32145a",
-                                    "purpleLight": "#b4a0ff",
-                                    "red": "#e81123",
-                                    "redDark": "#a4262c",
-                                    "teal": "#008272",
-                                    "tealDark": "#004b50",
-                                    "tealLight": "#00b294",
-                                    "themeDark": "#005a9e",
-                                    "themeDarkAlt": "#106ebe",
-                                    "themeDarker": "#004578",
-                                    "themeLight": "#c7e0f4",
-                                    "themeLighter": "#deecf9",
-                                    "themeLighterAlt": "#eff6fc",
-                                    "themePrimary": "#0078d4",
-                                    "themeSecondary": "#2b88d8",
-                                    "themeTertiary": "#71afe5",
-                                    "white": "#ffffff",
-                                    "whiteTranslucent40": "rgba(255,255,255,.4)",
-                                    "yellow": "#ffb900",
-                                    "yellowDark": "#d29200",
-                                    "yellowLight": "#fff100",
-                                  },
-                                  "rtl": undefined,
-                                  "semanticColors": Object {
-                                    "accentButtonBackground": "#0078d4",
-                                    "accentButtonText": "#ffffff",
-                                    "actionLink": "#323130",
-                                    "actionLinkHovered": "#201f1e",
-                                    "blockingBackground": "#FDE7E9",
-                                    "blockingIcon": "#FDE7E9",
-                                    "bodyBackground": "#ffffff",
-                                    "bodyBackgroundChecked": "#edebe9",
-                                    "bodyBackgroundHovered": "#f3f2f1",
-                                    "bodyDivider": "#edebe9",
-                                    "bodyFrameBackground": "#ffffff",
-                                    "bodyFrameDivider": "#edebe9",
-                                    "bodyStandoutBackground": "#faf9f8",
-                                    "bodySubtext": "#605e5c",
-                                    "bodyText": "#323130",
-                                    "bodyTextChecked": "#000000",
-                                    "buttonBackground": "#ffffff",
-                                    "buttonBackgroundChecked": "#c8c6c4",
-                                    "buttonBackgroundCheckedHovered": "#edebe9",
-                                    "buttonBackgroundDisabled": "#f3f2f1",
-                                    "buttonBackgroundHovered": "#f3f2f1",
-                                    "buttonBackgroundPressed": "#edebe9",
-                                    "buttonBorder": "#8a8886",
-                                    "buttonBorderDisabled": "#f3f2f1",
-                                    "buttonText": "#323130",
-                                    "buttonTextChecked": "#201f1e",
-                                    "buttonTextCheckedHovered": "#000000",
-                                    "buttonTextDisabled": "#a19f9d",
-                                    "buttonTextHovered": "#201f1e",
-                                    "buttonTextPressed": "#201f1e",
-                                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                                    "cardStandoutBackground": "#ffffff",
-                                    "defaultStateBackground": "#faf9f8",
-                                    "disabledBackground": "#f3f2f1",
-                                    "disabledBodySubtext": "#c8c6c4",
-                                    "disabledBodyText": "#a19f9d",
-                                    "disabledBorder": "#c8c6c4",
-                                    "disabledSubtext": "#d2d0ce",
-                                    "disabledText": "#a19f9d",
-                                    "errorBackground": "#FDE7E9",
-                                    "errorIcon": "#A80000",
-                                    "errorText": "#a4262c",
-                                    "focusBorder": "#605e5c",
-                                    "infoBackground": "#f3f2f1",
-                                    "infoIcon": "#605e5c",
-                                    "inputBackground": "#ffffff",
-                                    "inputBackgroundChecked": "#0078d4",
-                                    "inputBackgroundCheckedHovered": "#005a9e",
-                                    "inputBorder": "#605e5c",
-                                    "inputBorderHovered": "#323130",
-                                    "inputFocusBorderAlt": "#0078d4",
-                                    "inputForegroundChecked": "#ffffff",
-                                    "inputIcon": "#0078d4",
-                                    "inputIconDisabled": "#a19f9d",
-                                    "inputIconHovered": "#005a9e",
-                                    "inputPlaceholderBackgroundChecked": "#deecf9",
-                                    "inputPlaceholderText": "#605e5c",
-                                    "inputText": "#323130",
-                                    "inputTextHovered": "#201f1e",
-                                    "link": "#0078d4",
-                                    "linkHovered": "#004578",
-                                    "listBackground": "#ffffff",
-                                    "listHeaderBackgroundHovered": "#f3f2f1",
-                                    "listHeaderBackgroundPressed": "#edebe9",
-                                    "listItemBackgroundChecked": "#edebe9",
-                                    "listItemBackgroundCheckedHovered": "#e1dfdd",
-                                    "listItemBackgroundHovered": "#f3f2f1",
-                                    "listText": "#323130",
-                                    "listTextColor": "#323130",
-                                    "menuBackground": "#ffffff",
-                                    "menuDivider": "#c8c6c4",
-                                    "menuHeader": "#0078d4",
-                                    "menuIcon": "#0078d4",
-                                    "menuItemBackgroundChecked": "#edebe9",
-                                    "menuItemBackgroundHovered": "#f3f2f1",
-                                    "menuItemBackgroundPressed": "#edebe9",
-                                    "menuItemText": "#323130",
-                                    "menuItemTextHovered": "#201f1e",
-                                    "messageLink": "#005A9E",
-                                    "messageLinkHovered": "#004578",
-                                    "messageText": "#323130",
-                                    "primaryButtonBackground": "#0078d4",
-                                    "primaryButtonBackgroundDisabled": "#f3f2f1",
-                                    "primaryButtonBackgroundHovered": "#106ebe",
-                                    "primaryButtonBackgroundPressed": "#005a9e",
-                                    "primaryButtonBorder": "transparent",
-                                    "primaryButtonText": "#ffffff",
-                                    "primaryButtonTextDisabled": "#d2d0ce",
-                                    "primaryButtonTextHovered": "#ffffff",
-                                    "primaryButtonTextPressed": "#ffffff",
-                                    "severeWarningBackground": "#FED9CC",
-                                    "severeWarningIcon": "#D83B01",
-                                    "smallInputBorder": "#605e5c",
-                                    "successBackground": "#DFF6DD",
-                                    "successIcon": "#107C10",
-                                    "successText": "#107C10",
-                                    "variantBorder": "#edebe9",
-                                    "variantBorderHovered": "#a19f9d",
-                                    "warningBackground": "#FFF4CE",
-                                    "warningHighlight": "#ffb900",
-                                    "warningIcon": "#797775",
-                                    "warningText": "#323130",
-                                  },
-                                  "spacing": Object {
-                                    "l1": "20px",
-                                    "l2": "32px",
-                                    "m": "16px",
-                                    "s1": "8px",
-                                    "s2": "4px",
-                                  },
-                                }
-                              }
-                            >
-                              <i
-                                aria-hidden={true}
-                                className="ms-Checkbox-checkmark checkmark-69"
-                                data-icon-name="CheckMark"
-                              >
-                                
-                              </i>
-                            </IconBase>
-                          </StyledIconBase>
-                        </div>
-                      </label>
-                    </div>
-                  </CheckboxBase>
-                </StyledCheckboxBase>
-              </div>
-            </div>
-          </div>
-          <div
-            className="paneFooter"
-          >
-            <div
-              className="leftpanel-okbut"
-            >
-              <CustomizedPrimaryButton
-                ariaLabel="Submit"
-                className="genericPaneSubmitBtn"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "visibility": "visible",
-                  }
-                }
-                tabIndex={0}
-                text="OK"
-                title="Submit"
-              >
-                <PrimaryButton
-                  ariaLabel="Submit"
-                  className="genericPaneSubmitBtn"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
-                  }
-                  tabIndex={0}
-                  text="OK"
-                  theme={
-                    Object {
-                      "disableGlobalClassNames": false,
-                      "effects": Object {
-                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "roundedCorner2": "2px",
-                        "roundedCorner4": "4px",
-                        "roundedCorner6": "6px",
-                      },
-                      "fonts": Object {
-                        "large": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "18px",
-                          "fontWeight": 400,
-                        },
-                        "medium": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        "mediumPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "16px",
-                          "fontWeight": 400,
-                        },
-                        "mega": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "68px",
-                          "fontWeight": 600,
-                        },
-                        "small": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "smallPlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "12px",
-                          "fontWeight": 400,
-                        },
-                        "superLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "42px",
-                          "fontWeight": 600,
-                        },
-                        "tiny": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "20px",
-                          "fontWeight": 600,
-                        },
-                        "xLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "24px",
-                          "fontWeight": 600,
-                        },
-                        "xSmall": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "10px",
-                          "fontWeight": 400,
-                        },
-                        "xxLarge": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "28px",
-                          "fontWeight": 600,
-                        },
-                        "xxLargePlus": Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "32px",
-                          "fontWeight": 600,
-                        },
-                      },
-                      "isInverted": false,
-                      "palette": Object {
-                        "accent": "#0078d4",
-                        "black": "#000000",
-                        "blackTranslucent40": "rgba(0,0,0,.4)",
-                        "blue": "#0078d4",
-                        "blueDark": "#002050",
-                        "blueLight": "#00bcf2",
-                        "blueMid": "#00188f",
-                        "green": "#107c10",
-                        "greenDark": "#004b1c",
-                        "greenLight": "#bad80a",
-                        "magenta": "#b4009e",
-                        "magentaDark": "#5c005c",
-                        "magentaLight": "#e3008c",
-                        "neutralDark": "#201f1e",
-                        "neutralLight": "#edebe9",
-                        "neutralLighter": "#f3f2f1",
-                        "neutralLighterAlt": "#faf9f8",
-                        "neutralPrimary": "#323130",
-                        "neutralPrimaryAlt": "#3b3a39",
-                        "neutralQuaternary": "#d2d0ce",
-                        "neutralQuaternaryAlt": "#e1dfdd",
-                        "neutralSecondary": "#605e5c",
-                        "neutralSecondaryAlt": "#8a8886",
-                        "neutralTertiary": "#a19f9d",
-                        "neutralTertiaryAlt": "#c8c6c4",
-                        "orange": "#d83b01",
-                        "orangeLight": "#ea4300",
-                        "orangeLighter": "#ff8c00",
-                        "purple": "#5c2d91",
-                        "purpleDark": "#32145a",
-                        "purpleLight": "#b4a0ff",
-                        "red": "#e81123",
-                        "redDark": "#a4262c",
-                        "teal": "#008272",
-                        "tealDark": "#004b50",
-                        "tealLight": "#00b294",
-                        "themeDark": "#005a9e",
-                        "themeDarkAlt": "#106ebe",
-                        "themeDarker": "#004578",
-                        "themeLight": "#c7e0f4",
-                        "themeLighter": "#deecf9",
-                        "themeLighterAlt": "#eff6fc",
-                        "themePrimary": "#0078d4",
-                        "themeSecondary": "#2b88d8",
-                        "themeTertiary": "#71afe5",
-                        "white": "#ffffff",
-                        "whiteTranslucent40": "rgba(255,255,255,.4)",
-                        "yellow": "#ffb900",
-                        "yellowDark": "#d29200",
-                        "yellowLight": "#fff100",
-                      },
-                      "rtl": undefined,
-                      "semanticColors": Object {
-                        "accentButtonBackground": "#0078d4",
-                        "accentButtonText": "#ffffff",
-                        "actionLink": "#323130",
-                        "actionLinkHovered": "#201f1e",
-                        "blockingBackground": "#FDE7E9",
-                        "blockingIcon": "#FDE7E9",
-                        "bodyBackground": "#ffffff",
-                        "bodyBackgroundChecked": "#edebe9",
-                        "bodyBackgroundHovered": "#f3f2f1",
-                        "bodyDivider": "#edebe9",
-                        "bodyFrameBackground": "#ffffff",
-                        "bodyFrameDivider": "#edebe9",
-                        "bodyStandoutBackground": "#faf9f8",
-                        "bodySubtext": "#605e5c",
-                        "bodyText": "#323130",
-                        "bodyTextChecked": "#000000",
-                        "buttonBackground": "#ffffff",
-                        "buttonBackgroundChecked": "#c8c6c4",
-                        "buttonBackgroundCheckedHovered": "#edebe9",
-                        "buttonBackgroundDisabled": "#f3f2f1",
-                        "buttonBackgroundHovered": "#f3f2f1",
-                        "buttonBackgroundPressed": "#edebe9",
-                        "buttonBorder": "#8a8886",
-                        "buttonBorderDisabled": "#f3f2f1",
-                        "buttonText": "#323130",
-                        "buttonTextChecked": "#201f1e",
-                        "buttonTextCheckedHovered": "#000000",
-                        "buttonTextDisabled": "#a19f9d",
-                        "buttonTextHovered": "#201f1e",
-                        "buttonTextPressed": "#201f1e",
-                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                        "cardStandoutBackground": "#ffffff",
-                        "defaultStateBackground": "#faf9f8",
-                        "disabledBackground": "#f3f2f1",
-                        "disabledBodySubtext": "#c8c6c4",
-                        "disabledBodyText": "#a19f9d",
-                        "disabledBorder": "#c8c6c4",
-                        "disabledSubtext": "#d2d0ce",
-                        "disabledText": "#a19f9d",
-                        "errorBackground": "#FDE7E9",
-                        "errorIcon": "#A80000",
-                        "errorText": "#a4262c",
-                        "focusBorder": "#605e5c",
-                        "infoBackground": "#f3f2f1",
-                        "infoIcon": "#605e5c",
-                        "inputBackground": "#ffffff",
-                        "inputBackgroundChecked": "#0078d4",
-                        "inputBackgroundCheckedHovered": "#005a9e",
-                        "inputBorder": "#605e5c",
-                        "inputBorderHovered": "#323130",
-                        "inputFocusBorderAlt": "#0078d4",
-                        "inputForegroundChecked": "#ffffff",
-                        "inputIcon": "#0078d4",
-                        "inputIconDisabled": "#a19f9d",
-                        "inputIconHovered": "#005a9e",
-                        "inputPlaceholderBackgroundChecked": "#deecf9",
-                        "inputPlaceholderText": "#605e5c",
-                        "inputText": "#323130",
-                        "inputTextHovered": "#201f1e",
-                        "link": "#0078d4",
-                        "linkHovered": "#004578",
-                        "listBackground": "#ffffff",
-                        "listHeaderBackgroundHovered": "#f3f2f1",
-                        "listHeaderBackgroundPressed": "#edebe9",
-                        "listItemBackgroundChecked": "#edebe9",
-                        "listItemBackgroundCheckedHovered": "#e1dfdd",
-                        "listItemBackgroundHovered": "#f3f2f1",
-                        "listText": "#323130",
-                        "listTextColor": "#323130",
-                        "menuBackground": "#ffffff",
-                        "menuDivider": "#c8c6c4",
-                        "menuHeader": "#0078d4",
-                        "menuIcon": "#0078d4",
-                        "menuItemBackgroundChecked": "#edebe9",
-                        "menuItemBackgroundHovered": "#f3f2f1",
-                        "menuItemBackgroundPressed": "#edebe9",
-                        "menuItemText": "#323130",
-                        "menuItemTextHovered": "#201f1e",
-                        "messageLink": "#005A9E",
-                        "messageLinkHovered": "#004578",
-                        "messageText": "#323130",
-                        "primaryButtonBackground": "#0078d4",
-                        "primaryButtonBackgroundDisabled": "#f3f2f1",
-                        "primaryButtonBackgroundHovered": "#106ebe",
-                        "primaryButtonBackgroundPressed": "#005a9e",
-                        "primaryButtonBorder": "transparent",
-                        "primaryButtonText": "#ffffff",
-                        "primaryButtonTextDisabled": "#d2d0ce",
-                        "primaryButtonTextHovered": "#ffffff",
-                        "primaryButtonTextPressed": "#ffffff",
-                        "severeWarningBackground": "#FED9CC",
-                        "severeWarningIcon": "#D83B01",
-                        "smallInputBorder": "#605e5c",
-                        "successBackground": "#DFF6DD",
-                        "successIcon": "#107C10",
-                        "successText": "#107C10",
-                        "variantBorder": "#edebe9",
-                        "variantBorderHovered": "#a19f9d",
-                        "warningBackground": "#FFF4CE",
-                        "warningHighlight": "#ffb900",
-                        "warningIcon": "#797775",
-                        "warningText": "#323130",
-                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
-                      },
-                    }
-                  }
-                  title="Submit"
-                >
-                  <CustomizedDefaultButton
-                    ariaLabel="Submit"
-                    className="genericPaneSubmitBtn"
-                    onClick={[Function]}
-                    onRenderDescription={[Function]}
-                    primary={true}
-                    style={
-                      Object {
-                        "visibility": "visible",
-                      }
-                    }
-                    tabIndex={0}
-                    text="OK"
-                    theme={
-                      Object {
-                        "disableGlobalClassNames": false,
-                        "effects": Object {
-                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "roundedCorner2": "2px",
-                          "roundedCorner4": "4px",
-                          "roundedCorner6": "6px",
-                        },
-                        "fonts": Object {
-                          "large": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "18px",
-                            "fontWeight": 400,
-                          },
-                          "medium": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "14px",
-                            "fontWeight": 400,
-                          },
-                          "mediumPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "16px",
-                            "fontWeight": 400,
-                          },
-                          "mega": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "68px",
-                            "fontWeight": 600,
-                          },
-                          "small": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "smallPlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "12px",
-                            "fontWeight": 400,
-                          },
-                          "superLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "42px",
-                            "fontWeight": 600,
-                          },
-                          "tiny": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "20px",
-                            "fontWeight": 600,
-                          },
-                          "xLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "24px",
-                            "fontWeight": 600,
-                          },
-                          "xSmall": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "10px",
-                            "fontWeight": 400,
-                          },
-                          "xxLarge": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "28px",
-                            "fontWeight": 600,
-                          },
-                          "xxLargePlus": Object {
-                            "MozOsxFontSmoothing": "grayscale",
-                            "WebkitFontSmoothing": "antialiased",
-                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                            "fontSize": "32px",
-                            "fontWeight": 600,
-                          },
-                        },
-                        "isInverted": false,
-                        "palette": Object {
-                          "accent": "#0078d4",
-                          "black": "#000000",
-                          "blackTranslucent40": "rgba(0,0,0,.4)",
-                          "blue": "#0078d4",
-                          "blueDark": "#002050",
-                          "blueLight": "#00bcf2",
-                          "blueMid": "#00188f",
-                          "green": "#107c10",
-                          "greenDark": "#004b1c",
-                          "greenLight": "#bad80a",
-                          "magenta": "#b4009e",
-                          "magentaDark": "#5c005c",
-                          "magentaLight": "#e3008c",
-                          "neutralDark": "#201f1e",
-                          "neutralLight": "#edebe9",
-                          "neutralLighter": "#f3f2f1",
-                          "neutralLighterAlt": "#faf9f8",
-                          "neutralPrimary": "#323130",
-                          "neutralPrimaryAlt": "#3b3a39",
-                          "neutralQuaternary": "#d2d0ce",
-                          "neutralQuaternaryAlt": "#e1dfdd",
-                          "neutralSecondary": "#605e5c",
-                          "neutralSecondaryAlt": "#8a8886",
-                          "neutralTertiary": "#a19f9d",
-                          "neutralTertiaryAlt": "#c8c6c4",
-                          "orange": "#d83b01",
-                          "orangeLight": "#ea4300",
-                          "orangeLighter": "#ff8c00",
-                          "purple": "#5c2d91",
-                          "purpleDark": "#32145a",
-                          "purpleLight": "#b4a0ff",
-                          "red": "#e81123",
-                          "redDark": "#a4262c",
-                          "teal": "#008272",
-                          "tealDark": "#004b50",
-                          "tealLight": "#00b294",
-                          "themeDark": "#005a9e",
-                          "themeDarkAlt": "#106ebe",
-                          "themeDarker": "#004578",
-                          "themeLight": "#c7e0f4",
-                          "themeLighter": "#deecf9",
-                          "themeLighterAlt": "#eff6fc",
-                          "themePrimary": "#0078d4",
-                          "themeSecondary": "#2b88d8",
-                          "themeTertiary": "#71afe5",
-                          "white": "#ffffff",
-                          "whiteTranslucent40": "rgba(255,255,255,.4)",
-                          "yellow": "#ffb900",
-                          "yellowDark": "#d29200",
-                          "yellowLight": "#fff100",
-                        },
-                        "rtl": undefined,
-                        "semanticColors": Object {
-                          "accentButtonBackground": "#0078d4",
-                          "accentButtonText": "#ffffff",
-                          "actionLink": "#323130",
-                          "actionLinkHovered": "#201f1e",
-                          "blockingBackground": "#FDE7E9",
-                          "blockingIcon": "#FDE7E9",
-                          "bodyBackground": "#ffffff",
-                          "bodyBackgroundChecked": "#edebe9",
-                          "bodyBackgroundHovered": "#f3f2f1",
-                          "bodyDivider": "#edebe9",
-                          "bodyFrameBackground": "#ffffff",
-                          "bodyFrameDivider": "#edebe9",
-                          "bodyStandoutBackground": "#faf9f8",
-                          "bodySubtext": "#605e5c",
-                          "bodyText": "#323130",
-                          "bodyTextChecked": "#000000",
-                          "buttonBackground": "#ffffff",
-                          "buttonBackgroundChecked": "#c8c6c4",
-                          "buttonBackgroundCheckedHovered": "#edebe9",
-                          "buttonBackgroundDisabled": "#f3f2f1",
-                          "buttonBackgroundHovered": "#f3f2f1",
-                          "buttonBackgroundPressed": "#edebe9",
-                          "buttonBorder": "#8a8886",
-                          "buttonBorderDisabled": "#f3f2f1",
-                          "buttonText": "#323130",
-                          "buttonTextChecked": "#201f1e",
-                          "buttonTextCheckedHovered": "#000000",
-                          "buttonTextDisabled": "#a19f9d",
-                          "buttonTextHovered": "#201f1e",
-                          "buttonTextPressed": "#201f1e",
-                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                          "cardStandoutBackground": "#ffffff",
-                          "defaultStateBackground": "#faf9f8",
-                          "disabledBackground": "#f3f2f1",
-                          "disabledBodySubtext": "#c8c6c4",
-                          "disabledBodyText": "#a19f9d",
-                          "disabledBorder": "#c8c6c4",
-                          "disabledSubtext": "#d2d0ce",
-                          "disabledText": "#a19f9d",
-                          "errorBackground": "#FDE7E9",
-                          "errorIcon": "#A80000",
-                          "errorText": "#a4262c",
-                          "focusBorder": "#605e5c",
-                          "infoBackground": "#f3f2f1",
-                          "infoIcon": "#605e5c",
-                          "inputBackground": "#ffffff",
-                          "inputBackgroundChecked": "#0078d4",
-                          "inputBackgroundCheckedHovered": "#005a9e",
-                          "inputBorder": "#605e5c",
-                          "inputBorderHovered": "#323130",
-                          "inputFocusBorderAlt": "#0078d4",
-                          "inputForegroundChecked": "#ffffff",
-                          "inputIcon": "#0078d4",
-                          "inputIconDisabled": "#a19f9d",
-                          "inputIconHovered": "#005a9e",
-                          "inputPlaceholderBackgroundChecked": "#deecf9",
-                          "inputPlaceholderText": "#605e5c",
-                          "inputText": "#323130",
-                          "inputTextHovered": "#201f1e",
-                          "link": "#0078d4",
-                          "linkHovered": "#004578",
-                          "listBackground": "#ffffff",
-                          "listHeaderBackgroundHovered": "#f3f2f1",
-                          "listHeaderBackgroundPressed": "#edebe9",
-                          "listItemBackgroundChecked": "#edebe9",
-                          "listItemBackgroundCheckedHovered": "#e1dfdd",
-                          "listItemBackgroundHovered": "#f3f2f1",
-                          "listText": "#323130",
-                          "listTextColor": "#323130",
-                          "menuBackground": "#ffffff",
-                          "menuDivider": "#c8c6c4",
-                          "menuHeader": "#0078d4",
-                          "menuIcon": "#0078d4",
-                          "menuItemBackgroundChecked": "#edebe9",
-                          "menuItemBackgroundHovered": "#f3f2f1",
-                          "menuItemBackgroundPressed": "#edebe9",
-                          "menuItemText": "#323130",
-                          "menuItemTextHovered": "#201f1e",
-                          "messageLink": "#005A9E",
-                          "messageLinkHovered": "#004578",
-                          "messageText": "#323130",
-                          "primaryButtonBackground": "#0078d4",
-                          "primaryButtonBackgroundDisabled": "#f3f2f1",
-                          "primaryButtonBackgroundHovered": "#106ebe",
-                          "primaryButtonBackgroundPressed": "#005a9e",
-                          "primaryButtonBorder": "transparent",
-                          "primaryButtonText": "#ffffff",
-                          "primaryButtonTextDisabled": "#d2d0ce",
-                          "primaryButtonTextHovered": "#ffffff",
-                          "primaryButtonTextPressed": "#ffffff",
-                          "severeWarningBackground": "#FED9CC",
-                          "severeWarningIcon": "#D83B01",
-                          "smallInputBorder": "#605e5c",
-                          "successBackground": "#DFF6DD",
-                          "successIcon": "#107C10",
-                          "successText": "#107C10",
-                          "variantBorder": "#edebe9",
-                          "variantBorderHovered": "#a19f9d",
-                          "warningBackground": "#FFF4CE",
-                          "warningHighlight": "#ffb900",
-                          "warningIcon": "#797775",
-                          "warningText": "#323130",
-                        },
-                        "spacing": Object {
-                          "l1": "20px",
-                          "l2": "32px",
-                          "m": "16px",
-                          "s1": "8px",
-                          "s2": "4px",
-                        },
-                      }
-                    }
-                    title="Submit"
-                  >
-                    <DefaultButton
-                      ariaLabel="Submit"
-                      className="genericPaneSubmitBtn"
-                      onClick={[Function]}
-                      onRenderDescription={[Function]}
-                      primary={true}
-                      style={
-                        Object {
-                          "visibility": "visible",
-                        }
-                      }
-                      tabIndex={0}
-                      text="OK"
-                      theme={
-                        Object {
-                          "disableGlobalClassNames": false,
-                          "effects": Object {
-                            "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                            "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "roundedCorner2": "2px",
-                            "roundedCorner4": "4px",
-                            "roundedCorner6": "6px",
-                          },
-                          "fonts": Object {
-                            "large": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "18px",
-                              "fontWeight": 400,
-                            },
-                            "medium": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "14px",
-                              "fontWeight": 400,
-                            },
-                            "mediumPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "16px",
-                              "fontWeight": 400,
-                            },
-                            "mega": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "68px",
-                              "fontWeight": 600,
-                            },
-                            "small": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "smallPlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "12px",
-                              "fontWeight": 400,
-                            },
-                            "superLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "42px",
-                              "fontWeight": 600,
-                            },
-                            "tiny": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "20px",
-                              "fontWeight": 600,
-                            },
-                            "xLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "24px",
-                              "fontWeight": 600,
-                            },
-                            "xSmall": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "10px",
-                              "fontWeight": 400,
-                            },
-                            "xxLarge": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "28px",
-                              "fontWeight": 600,
-                            },
-                            "xxLargePlus": Object {
-                              "MozOsxFontSmoothing": "grayscale",
-                              "WebkitFontSmoothing": "antialiased",
-                              "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                              "fontSize": "32px",
-                              "fontWeight": 600,
-                            },
-                          },
-                          "isInverted": false,
-                          "palette": Object {
-                            "accent": "#0078d4",
-                            "black": "#000000",
-                            "blackTranslucent40": "rgba(0,0,0,.4)",
-                            "blue": "#0078d4",
-                            "blueDark": "#002050",
-                            "blueLight": "#00bcf2",
-                            "blueMid": "#00188f",
-                            "green": "#107c10",
-                            "greenDark": "#004b1c",
-                            "greenLight": "#bad80a",
-                            "magenta": "#b4009e",
-                            "magentaDark": "#5c005c",
-                            "magentaLight": "#e3008c",
-                            "neutralDark": "#201f1e",
-                            "neutralLight": "#edebe9",
-                            "neutralLighter": "#f3f2f1",
-                            "neutralLighterAlt": "#faf9f8",
-                            "neutralPrimary": "#323130",
-                            "neutralPrimaryAlt": "#3b3a39",
-                            "neutralQuaternary": "#d2d0ce",
-                            "neutralQuaternaryAlt": "#e1dfdd",
-                            "neutralSecondary": "#605e5c",
-                            "neutralSecondaryAlt": "#8a8886",
-                            "neutralTertiary": "#a19f9d",
-                            "neutralTertiaryAlt": "#c8c6c4",
-                            "orange": "#d83b01",
-                            "orangeLight": "#ea4300",
-                            "orangeLighter": "#ff8c00",
-                            "purple": "#5c2d91",
-                            "purpleDark": "#32145a",
-                            "purpleLight": "#b4a0ff",
-                            "red": "#e81123",
-                            "redDark": "#a4262c",
-                            "teal": "#008272",
-                            "tealDark": "#004b50",
-                            "tealLight": "#00b294",
-                            "themeDark": "#005a9e",
-                            "themeDarkAlt": "#106ebe",
-                            "themeDarker": "#004578",
-                            "themeLight": "#c7e0f4",
-                            "themeLighter": "#deecf9",
-                            "themeLighterAlt": "#eff6fc",
-                            "themePrimary": "#0078d4",
-                            "themeSecondary": "#2b88d8",
-                            "themeTertiary": "#71afe5",
-                            "white": "#ffffff",
-                            "whiteTranslucent40": "rgba(255,255,255,.4)",
-                            "yellow": "#ffb900",
-                            "yellowDark": "#d29200",
-                            "yellowLight": "#fff100",
-                          },
-                          "rtl": undefined,
-                          "semanticColors": Object {
-                            "accentButtonBackground": "#0078d4",
-                            "accentButtonText": "#ffffff",
-                            "actionLink": "#323130",
-                            "actionLinkHovered": "#201f1e",
-                            "blockingBackground": "#FDE7E9",
-                            "blockingIcon": "#FDE7E9",
-                            "bodyBackground": "#ffffff",
-                            "bodyBackgroundChecked": "#edebe9",
-                            "bodyBackgroundHovered": "#f3f2f1",
-                            "bodyDivider": "#edebe9",
-                            "bodyFrameBackground": "#ffffff",
-                            "bodyFrameDivider": "#edebe9",
-                            "bodyStandoutBackground": "#faf9f8",
-                            "bodySubtext": "#605e5c",
-                            "bodyText": "#323130",
-                            "bodyTextChecked": "#000000",
-                            "buttonBackground": "#ffffff",
-                            "buttonBackgroundChecked": "#c8c6c4",
-                            "buttonBackgroundCheckedHovered": "#edebe9",
-                            "buttonBackgroundDisabled": "#f3f2f1",
-                            "buttonBackgroundHovered": "#f3f2f1",
-                            "buttonBackgroundPressed": "#edebe9",
-                            "buttonBorder": "#8a8886",
-                            "buttonBorderDisabled": "#f3f2f1",
-                            "buttonText": "#323130",
-                            "buttonTextChecked": "#201f1e",
-                            "buttonTextCheckedHovered": "#000000",
-                            "buttonTextDisabled": "#a19f9d",
-                            "buttonTextHovered": "#201f1e",
-                            "buttonTextPressed": "#201f1e",
-                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                            "cardStandoutBackground": "#ffffff",
-                            "defaultStateBackground": "#faf9f8",
-                            "disabledBackground": "#f3f2f1",
-                            "disabledBodySubtext": "#c8c6c4",
-                            "disabledBodyText": "#a19f9d",
-                            "disabledBorder": "#c8c6c4",
-                            "disabledSubtext": "#d2d0ce",
-                            "disabledText": "#a19f9d",
-                            "errorBackground": "#FDE7E9",
-                            "errorIcon": "#A80000",
-                            "errorText": "#a4262c",
-                            "focusBorder": "#605e5c",
-                            "infoBackground": "#f3f2f1",
-                            "infoIcon": "#605e5c",
-                            "inputBackground": "#ffffff",
-                            "inputBackgroundChecked": "#0078d4",
-                            "inputBackgroundCheckedHovered": "#005a9e",
-                            "inputBorder": "#605e5c",
-                            "inputBorderHovered": "#323130",
-                            "inputFocusBorderAlt": "#0078d4",
-                            "inputForegroundChecked": "#ffffff",
-                            "inputIcon": "#0078d4",
-                            "inputIconDisabled": "#a19f9d",
-                            "inputIconHovered": "#005a9e",
-                            "inputPlaceholderBackgroundChecked": "#deecf9",
-                            "inputPlaceholderText": "#605e5c",
-                            "inputText": "#323130",
-                            "inputTextHovered": "#201f1e",
-                            "link": "#0078d4",
-                            "linkHovered": "#004578",
-                            "listBackground": "#ffffff",
-                            "listHeaderBackgroundHovered": "#f3f2f1",
-                            "listHeaderBackgroundPressed": "#edebe9",
-                            "listItemBackgroundChecked": "#edebe9",
-                            "listItemBackgroundCheckedHovered": "#e1dfdd",
-                            "listItemBackgroundHovered": "#f3f2f1",
-                            "listText": "#323130",
-                            "listTextColor": "#323130",
-                            "menuBackground": "#ffffff",
-                            "menuDivider": "#c8c6c4",
-                            "menuHeader": "#0078d4",
-                            "menuIcon": "#0078d4",
-                            "menuItemBackgroundChecked": "#edebe9",
-                            "menuItemBackgroundHovered": "#f3f2f1",
-                            "menuItemBackgroundPressed": "#edebe9",
-                            "menuItemText": "#323130",
-                            "menuItemTextHovered": "#201f1e",
-                            "messageLink": "#005A9E",
-                            "messageLinkHovered": "#004578",
-                            "messageText": "#323130",
-                            "primaryButtonBackground": "#0078d4",
-                            "primaryButtonBackgroundDisabled": "#f3f2f1",
-                            "primaryButtonBackgroundHovered": "#106ebe",
-                            "primaryButtonBackgroundPressed": "#005a9e",
-                            "primaryButtonBorder": "transparent",
-                            "primaryButtonText": "#ffffff",
-                            "primaryButtonTextDisabled": "#d2d0ce",
-                            "primaryButtonTextHovered": "#ffffff",
-                            "primaryButtonTextPressed": "#ffffff",
-                            "severeWarningBackground": "#FED9CC",
-                            "severeWarningIcon": "#D83B01",
-                            "smallInputBorder": "#605e5c",
-                            "successBackground": "#DFF6DD",
-                            "successIcon": "#107C10",
-                            "successText": "#107C10",
-                            "variantBorder": "#edebe9",
-                            "variantBorderHovered": "#a19f9d",
-                            "warningBackground": "#FFF4CE",
-                            "warningHighlight": "#ffb900",
-                            "warningIcon": "#797775",
-                            "warningText": "#323130",
-                          },
-                          "spacing": Object {
-                            "l1": "20px",
-                            "l2": "32px",
-                            "m": "16px",
-                            "s1": "8px",
-                            "s2": "4px",
-                          },
-                        }
-                      }
-                      title="Submit"
-                    >
-                      <BaseButton
-                        ariaLabel="Submit"
-                        baseClassName="ms-Button"
-                        className="genericPaneSubmitBtn"
-                        onClick={[Function]}
-                        onRenderDescription={[Function]}
-                        primary={true}
-                        split={false}
-                        style={
-                          Object {
-                            "visibility": "visible",
-                          }
-                        }
-                        styles={
-                          Object {
-                            "description": Object {
-                              "display": "block",
-                            },
-                            "flexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "icon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "16px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "iconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "label": Array [
-                              Object {
-                                "display": "block",
-                                "lineHeight": "100%",
-                                "margin": "0 4px",
-                              },
-                              Object {
-                                "fontWeight": 600,
-                              },
-                            ],
-                            "menuIcon": Object {
-                              "flexShrink": 0,
-                              "fontSize": "12px",
-                              "height": "16px",
-                              "lineHeight": "16px",
-                              "margin": "0 4px",
-                              "textAlign": "center",
-                            },
-                            "menuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "root": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              Object {
-                                "border": "1px solid #8a8886",
-                                "borderRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "padding": "0 16px",
-                                "selectors": Object {
-                                  ":active > *": Object {
-                                    "left": 0,
-                                    "position": "relative",
-                                    "top": 0,
-                                  },
-                                },
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                              },
-                              Object {
-                                "height": "32px",
-                                "minWidth": "80px",
-                              },
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "border": "1px solid #0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus": Object {
-                                    "selectors": Object {
-                                      ":after": Object {
-                                        "border": "none",
-                                        "outlineColor": "#ffffff",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
-                                    "backgroundColor": "WindowText",
-                                    "borderColor": "WindowText",
-                                    "color": "Window",
-                                    "forcedColorAdjust": "none",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootCheckedHovered": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootDisabled": Array [
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid transparent",
-                                    "bottom": 2,
-                                    "content": "\\"\\"",
-                                    "left": 2,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 2,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "outlineColor": "ButtonText",
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 2,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "borderColor": "#f3f2f1",
-                                "color": "#a19f9d",
-                                "cursor": "default",
-                                "selectors": Object {
-                                  ":focus": Object {
-                                    "outline": 0,
-                                  },
-                                  ":hover": Object {
-                                    "outline": 0,
-                                  },
-                                },
-                              },
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "color": "#d2d0ce",
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "borderColor": "GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "rootExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "color": "#ffffff",
-                            },
-                            "rootHovered": Object {
-                              "backgroundColor": "#106ebe",
-                              "border": "1px solid #106ebe",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "Highlight",
-                                  "borderColor": "Highlight",
-                                  "color": "Window",
-                                },
-                              },
-                            },
-                            "rootPressed": Object {
-                              "backgroundColor": "#005a9e",
-                              "border": "1px solid #005a9e",
-                              "color": "#ffffff",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "WindowText",
-                                  "borderColor": "WindowText",
-                                  "color": "Window",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "screenReaderText": Object {
-                              "border": 0,
-                              "height": 1,
-                              "margin": -1,
-                              "overflow": "hidden",
-                              "padding": 0,
-                              "position": "absolute",
-                              "width": 1,
-                            },
-                            "splitButtonContainer": Array [
-                              Object {
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                },
-                              },
-                              Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
-                              Object {
-                                "display": "inline-flex",
-                                "selectors": Object {
-                                  ".ms-Button--default": Object {
-                                    "borderBottomRightRadius": "0",
-                                    "borderRight": "none",
-                                    "borderTopRightRadius": "0",
-                                  },
-                                  ".ms-Button--primary": Object {
-                                    "border": "none",
-                                    "borderBottomRightRadius": "0",
-                                    "borderTopRightRadius": "0",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "MsHighContrastAdjust": "none",
-                                        "backgroundColor": "Window",
-                                        "border": "1px solid WindowText",
-                                        "borderRightWidth": "0",
-                                        "color": "WindowText",
-                                        "forcedColorAdjust": "none",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button--primary + .ms-Button": Object {
-                                    "border": "none",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "1px solid WindowText",
-                                        "borderLeftWidth": "0",
-                                      },
-                                    },
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonContainerChecked": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerCheckedHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "MsHighContrastAdjust": "none",
-                                      "backgroundColor": "WindowText",
-                                      "color": "Window",
-                                      "forcedColorAdjust": "none",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonContainerDisabled": Object {
-                              "border": "none",
-                              "outline": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "borderColor": "GrayText",
-                                  "color": "GrayText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            "splitButtonContainerFocused": Object {
-                              "outline": "none!important",
-                            },
-                            "splitButtonContainerHovered": Object {
-                              "selectors": Object {
-                                ".ms-Button--primary": Object {
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Highlight",
-                                      "color": "Window",
-                                    },
-                                  },
-                                },
-                                ".ms-Button.is-disabled": Object {
-                                  "color": "#a19f9d",
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "backgroundColor": "Window",
-                                      "borderColor": "GrayText",
-                                      "color": "GrayText",
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                            "splitButtonDivider": Array [
-                              Object {
-                                "backgroundColor": "#ffffff",
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                              Object {
-                                "bottom": 8,
-                                "position": "absolute",
-                                "right": 31,
-                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                                "top": 8,
-                                "width": 1,
-                              },
-                            ],
-                            "splitButtonDividerDisabled": Object {
-                              "bottom": 8,
-                              "position": "absolute",
-                              "right": 31,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "GrayText",
-                                },
-                              },
-                              "top": 8,
-                              "width": 1,
-                            },
-                            "splitButtonFlexContainer": Object {
-                              "alignItems": "center",
-                              "display": "flex",
-                              "flexWrap": "nowrap",
-                              "height": "100%",
-                              "justifyContent": "center",
-                            },
-                            "splitButtonMenuButton": Array [
-                              Object {
-                                "backgroundColor": "#0078d4",
-                                "color": "#ffffff",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#106ebe",
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "Highlight",
-                                      },
-                                    },
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "WindowText",
-                                  },
-                                },
-                              },
-                              Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  ".ms-Button-menuIcon": Object {
-                                    "color": "WindowText",
-                                  },
-                                },
-                                "border": "1px solid #8a8886",
-                                "borderBottomRightRadius": "2px",
-                                "borderLeft": "none",
-                                "borderRadius": 0,
-                                "borderTopRightRadius": "2px",
-                                "boxSizing": "border-box",
-                                "cursor": "pointer",
-                                "display": "inline-block",
-                                "height": "auto",
-                                "marginBottom": 0,
-                                "marginLeft": -1,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "outline": "transparent",
-                                "padding": 6,
-                                "textAlign": "center",
-                                "textDecoration": "none",
-                                "userSelect": "none",
-                                "verticalAlign": "top",
-                                "width": 32,
-                              },
-                            ],
-                            "splitButtonMenuButtonChecked": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuButtonDisabled": Array [
-                              Object {
-                                "backgroundColor": "#f3f2f1",
-                                "selectors": Object {
-                                  ":hover": Object {
-                                    "backgroundColor": "#f3f2f1",
-                                  },
-                                },
-                              },
-                              Object {
-                                "border": "none",
-                                "pointerEvents": "none",
-                                "selectors": Object {
-                                  ".ms-Button--primary": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "backgroundColor": "Window",
-                                        "borderColor": "GrayText",
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ".ms-Button-menuIcon": Object {
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "color": "GrayText",
-                                      },
-                                    },
-                                  },
-                                  ":hover": Object {
-                                    "cursor": "default",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "backgroundColor": "Window",
-                                    "border": "1px solid GrayText",
-                                    "color": "GrayText",
-                                  },
-                                },
-                              },
-                            ],
-                            "splitButtonMenuButtonExpanded": Object {
-                              "backgroundColor": "#005a9e",
-                              "selectors": Object {
-                                ":hover": Object {
-                                  "backgroundColor": "#005a9e",
-                                },
-                              },
-                            },
-                            "splitButtonMenuFocused": Object {
-                              "outline": "transparent",
-                              "position": "relative",
-                              "selectors": Object {
-                                ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                  "border": "1px solid #ffffff",
-                                  "bottom": 3,
-                                  "content": "\\"\\"",
-                                  "left": 3,
-                                  "outline": "1px solid #605e5c",
-                                  "position": "absolute",
-                                  "right": 3,
-                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                      "border": "none",
-                                      "bottom": -2,
-                                      "left": -2,
-                                      "right": -2,
-                                      "top": -2,
-                                    },
-                                  },
-                                  "top": 3,
-                                  "zIndex": 1,
-                                },
-                                "::-moz-focus-inner": Object {
-                                  "border": "0",
-                                },
-                              },
-                            },
-                            "splitButtonMenuIcon": Object {
-                              "color": "#ffffff",
-                            },
-                            "splitButtonMenuIconDisabled": Object {
-                              "color": "#a19f9d",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            "textContainer": Object {
-                              "display": "block",
-                              "flexGrow": 1,
-                            },
-                          }
-                        }
-                        tabIndex={0}
-                        text="OK"
-                        theme={
-                          Object {
-                            "disableGlobalClassNames": false,
-                            "effects": Object {
-                              "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                              "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "roundedCorner2": "2px",
-                              "roundedCorner4": "4px",
-                              "roundedCorner6": "6px",
-                            },
-                            "fonts": Object {
-                              "large": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "18px",
-                                "fontWeight": 400,
-                              },
-                              "medium": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "14px",
-                                "fontWeight": 400,
-                              },
-                              "mediumPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "16px",
-                                "fontWeight": 400,
-                              },
-                              "mega": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "68px",
-                                "fontWeight": 600,
-                              },
-                              "small": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "smallPlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "12px",
-                                "fontWeight": 400,
-                              },
-                              "superLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "42px",
-                                "fontWeight": 600,
-                              },
-                              "tiny": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "20px",
-                                "fontWeight": 600,
-                              },
-                              "xLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "24px",
-                                "fontWeight": 600,
-                              },
-                              "xSmall": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "10px",
-                                "fontWeight": 400,
-                              },
-                              "xxLarge": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "28px",
-                                "fontWeight": 600,
-                              },
-                              "xxLargePlus": Object {
-                                "MozOsxFontSmoothing": "grayscale",
-                                "WebkitFontSmoothing": "antialiased",
-                                "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                                "fontSize": "32px",
-                                "fontWeight": 600,
-                              },
-                            },
-                            "isInverted": false,
-                            "palette": Object {
-                              "accent": "#0078d4",
-                              "black": "#000000",
-                              "blackTranslucent40": "rgba(0,0,0,.4)",
-                              "blue": "#0078d4",
-                              "blueDark": "#002050",
-                              "blueLight": "#00bcf2",
-                              "blueMid": "#00188f",
-                              "green": "#107c10",
-                              "greenDark": "#004b1c",
-                              "greenLight": "#bad80a",
-                              "magenta": "#b4009e",
-                              "magentaDark": "#5c005c",
-                              "magentaLight": "#e3008c",
-                              "neutralDark": "#201f1e",
-                              "neutralLight": "#edebe9",
-                              "neutralLighter": "#f3f2f1",
-                              "neutralLighterAlt": "#faf9f8",
-                              "neutralPrimary": "#323130",
-                              "neutralPrimaryAlt": "#3b3a39",
-                              "neutralQuaternary": "#d2d0ce",
-                              "neutralQuaternaryAlt": "#e1dfdd",
-                              "neutralSecondary": "#605e5c",
-                              "neutralSecondaryAlt": "#8a8886",
-                              "neutralTertiary": "#a19f9d",
-                              "neutralTertiaryAlt": "#c8c6c4",
-                              "orange": "#d83b01",
-                              "orangeLight": "#ea4300",
-                              "orangeLighter": "#ff8c00",
-                              "purple": "#5c2d91",
-                              "purpleDark": "#32145a",
-                              "purpleLight": "#b4a0ff",
-                              "red": "#e81123",
-                              "redDark": "#a4262c",
-                              "teal": "#008272",
-                              "tealDark": "#004b50",
-                              "tealLight": "#00b294",
-                              "themeDark": "#005a9e",
-                              "themeDarkAlt": "#106ebe",
-                              "themeDarker": "#004578",
-                              "themeLight": "#c7e0f4",
-                              "themeLighter": "#deecf9",
-                              "themeLighterAlt": "#eff6fc",
-                              "themePrimary": "#0078d4",
-                              "themeSecondary": "#2b88d8",
-                              "themeTertiary": "#71afe5",
-                              "white": "#ffffff",
-                              "whiteTranslucent40": "rgba(255,255,255,.4)",
-                              "yellow": "#ffb900",
-                              "yellowDark": "#d29200",
-                              "yellowLight": "#fff100",
-                            },
-                            "rtl": undefined,
-                            "semanticColors": Object {
-                              "accentButtonBackground": "#0078d4",
-                              "accentButtonText": "#ffffff",
-                              "actionLink": "#323130",
-                              "actionLinkHovered": "#201f1e",
-                              "blockingBackground": "#FDE7E9",
-                              "blockingIcon": "#FDE7E9",
-                              "bodyBackground": "#ffffff",
-                              "bodyBackgroundChecked": "#edebe9",
-                              "bodyBackgroundHovered": "#f3f2f1",
-                              "bodyDivider": "#edebe9",
-                              "bodyFrameBackground": "#ffffff",
-                              "bodyFrameDivider": "#edebe9",
-                              "bodyStandoutBackground": "#faf9f8",
-                              "bodySubtext": "#605e5c",
-                              "bodyText": "#323130",
-                              "bodyTextChecked": "#000000",
-                              "buttonBackground": "#ffffff",
-                              "buttonBackgroundChecked": "#c8c6c4",
-                              "buttonBackgroundCheckedHovered": "#edebe9",
-                              "buttonBackgroundDisabled": "#f3f2f1",
-                              "buttonBackgroundHovered": "#f3f2f1",
-                              "buttonBackgroundPressed": "#edebe9",
-                              "buttonBorder": "#8a8886",
-                              "buttonBorderDisabled": "#f3f2f1",
-                              "buttonText": "#323130",
-                              "buttonTextChecked": "#201f1e",
-                              "buttonTextCheckedHovered": "#000000",
-                              "buttonTextDisabled": "#a19f9d",
-                              "buttonTextHovered": "#201f1e",
-                              "buttonTextPressed": "#201f1e",
-                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                              "cardStandoutBackground": "#ffffff",
-                              "defaultStateBackground": "#faf9f8",
-                              "disabledBackground": "#f3f2f1",
-                              "disabledBodySubtext": "#c8c6c4",
-                              "disabledBodyText": "#a19f9d",
-                              "disabledBorder": "#c8c6c4",
-                              "disabledSubtext": "#d2d0ce",
-                              "disabledText": "#a19f9d",
-                              "errorBackground": "#FDE7E9",
-                              "errorIcon": "#A80000",
-                              "errorText": "#a4262c",
-                              "focusBorder": "#605e5c",
-                              "infoBackground": "#f3f2f1",
-                              "infoIcon": "#605e5c",
-                              "inputBackground": "#ffffff",
-                              "inputBackgroundChecked": "#0078d4",
-                              "inputBackgroundCheckedHovered": "#005a9e",
-                              "inputBorder": "#605e5c",
-                              "inputBorderHovered": "#323130",
-                              "inputFocusBorderAlt": "#0078d4",
-                              "inputForegroundChecked": "#ffffff",
-                              "inputIcon": "#0078d4",
-                              "inputIconDisabled": "#a19f9d",
-                              "inputIconHovered": "#005a9e",
-                              "inputPlaceholderBackgroundChecked": "#deecf9",
-                              "inputPlaceholderText": "#605e5c",
-                              "inputText": "#323130",
-                              "inputTextHovered": "#201f1e",
-                              "link": "#0078d4",
-                              "linkHovered": "#004578",
-                              "listBackground": "#ffffff",
-                              "listHeaderBackgroundHovered": "#f3f2f1",
-                              "listHeaderBackgroundPressed": "#edebe9",
-                              "listItemBackgroundChecked": "#edebe9",
-                              "listItemBackgroundCheckedHovered": "#e1dfdd",
-                              "listItemBackgroundHovered": "#f3f2f1",
-                              "listText": "#323130",
-                              "listTextColor": "#323130",
-                              "menuBackground": "#ffffff",
-                              "menuDivider": "#c8c6c4",
-                              "menuHeader": "#0078d4",
-                              "menuIcon": "#0078d4",
-                              "menuItemBackgroundChecked": "#edebe9",
-                              "menuItemBackgroundHovered": "#f3f2f1",
-                              "menuItemBackgroundPressed": "#edebe9",
-                              "menuItemText": "#323130",
-                              "menuItemTextHovered": "#201f1e",
-                              "messageLink": "#005A9E",
-                              "messageLinkHovered": "#004578",
-                              "messageText": "#323130",
-                              "primaryButtonBackground": "#0078d4",
-                              "primaryButtonBackgroundDisabled": "#f3f2f1",
-                              "primaryButtonBackgroundHovered": "#106ebe",
-                              "primaryButtonBackgroundPressed": "#005a9e",
-                              "primaryButtonBorder": "transparent",
-                              "primaryButtonText": "#ffffff",
-                              "primaryButtonTextDisabled": "#d2d0ce",
-                              "primaryButtonTextHovered": "#ffffff",
-                              "primaryButtonTextPressed": "#ffffff",
-                              "severeWarningBackground": "#FED9CC",
-                              "severeWarningIcon": "#D83B01",
-                              "smallInputBorder": "#605e5c",
-                              "successBackground": "#DFF6DD",
-                              "successIcon": "#107C10",
-                              "successText": "#107C10",
-                              "variantBorder": "#edebe9",
-                              "variantBorderHovered": "#a19f9d",
-                              "warningBackground": "#FFF4CE",
-                              "warningHighlight": "#ffb900",
-                              "warningIcon": "#797775",
-                              "warningText": "#323130",
-                            },
-                            "spacing": Object {
-                              "l1": "20px",
-                              "l2": "32px",
-                              "m": "16px",
-                              "s1": "8px",
-                              "s2": "4px",
-                            },
-                          }
-                        }
-                        title="Submit"
-                        variantClassName="ms-Button--primary"
-                      >
-                        <button
-                          aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-76"
-                          data-is-focusable={true}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyPress={[Function]}
-                          onKeyUp={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseUp={[Function]}
-                          style={
-                            Object {
-                              "visibility": "visible",
-                            }
-                          }
-                          tabIndex={0}
-                          title="Submit"
-                          type="button"
-                        >
-                          <span
-                            className="ms-Button-flexContainer flexContainer-54"
-                            data-automationid="splitbuttonprimary"
-                          >
-                            <span
-                              className="ms-Button-textContainer textContainer-55"
-                            >
-                              <span
-                                className="ms-Button-label label-77"
-                                id="id__4"
-                                key="id__4"
-                              >
-                                OK
-                              </span>
-                            </span>
-                          </span>
-                        </button>
-                        <FocusRects />
-                      </BaseButton>
-                    </DefaultButton>
-                  </CustomizedDefaultButton>
-                </PrimaryButton>
-              </CustomizedPrimaryButton>
-            </div>
-          </div>
-        </div>
-        <div
-          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-          hidden={true}
-        >
-          <img
-            className="dataExplorerLoader"
-            src=""
-          />
-        </div>
-      </div>
-    </div>
-  </GenericRightPaneComponent>
-</TableQuerySelectPanel>
-`;
diff --git a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx b/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
index c069f790c..a6ec4001b 100644
--- a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
+++ b/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
@@ -78,7 +78,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: RightPaneFormProps = {
+  const props: RightPaneFormProps = {
     expandConsole,
     formError: formErrors,
     isExecuting: isExecuting,
@@ -87,7 +87,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   };
 
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
       </div>
diff --git a/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx b/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
index a8b01792e..cc34d8703 100644
--- a/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
+++ b/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
@@ -50,7 +50,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: RightPaneFormProps = {
+  const props: RightPaneFormProps = {
     expandConsole: () => explorer.expandConsole(),
     formError,
     isExecuting: isExecuting,
@@ -89,7 +89,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
   };
 
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneMainContent">
         <Upload
           label="Select JSON Files"
diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
index 8cbd0e904..eb1a1196d 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
@@ -5,76 +5,11 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
   closePanel={[Function]}
   explorer={
     Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
-      "_isAfecFeatureRegistered": [Function],
       "_isInitializingNotebooks": false,
-      "_refreshSparkEnabledStateForAccount": [Function],
       "_resetNotebookWorkspace": [Function],
-      "addCollectionText": [Function],
-      "arcadiaToken": [Function],
-      "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
-      "cassandraAddCollectionPane": CassandraAddCollectionPane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "createTableQuery": [Function],
-        "dedicateTableThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "cassandraaddcollectionpane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isTemplateReady": [Function],
-        "keyspaceCreateNew": [Function],
-        "keyspaceHasSharedOffer": [Function],
-        "keyspaceId": [Function],
-        "keyspaceIds": [Function],
-        "keyspaceOffers": Map {},
-        "keyspaceThroughput": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "requestUnitsUsageCostDedicated": [Function],
-        "requestUnitsUsageCostShared": [Function],
-        "ruToolTipText": [Function],
-        "selectedAutoPilotThroughput": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "sharedThroughputSpendAck": [Function],
-        "sharedThroughputSpendAckText": [Function],
-        "sharedThroughputSpendAckVisible": [Function],
-        "tableId": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "userTableQuery": [Function],
-        "visible": [Function],
-      },
-      "closeDialog": undefined,
       "closeSidePanel": undefined,
       "collapsedResourceTreeWidth": 36,
-      "collectionCreationDefaults": Object {
-        "storage": "100",
-        "throughput": Object {
-          "fixed": 400,
-          "shared": 400,
-          "unlimited": 400,
-          "unlimitedmax": 1000000,
-          "unlimitedmin": 400,
-        },
-      },
-      "collectionTitle": [Function],
-      "collectionTreeNodeAltText": [Function],
       "commandBarComponentAdapter": CommandBarComponentAdapter {
         "container": [Circular],
         "isNotebookTabActive": [Function],
@@ -82,804 +17,25 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "tabsButtons": Array [],
       },
       "databases": [Function],
-      "deleteCollectionText": [Function],
-      "deleteDatabaseText": [Function],
-      "gitHubClient": GitHubClient {
-        "errorCallback": [Function],
-        "ocktokit": OctokitWithDefaults {
-          "actions": Object {
-            "addSelectedRepoToOrgSecret": [Function],
-            "cancelWorkflowRun": [Function],
-            "createOrUpdateOrgSecret": [Function],
-            "createOrUpdateRepoSecret": [Function],
-            "createOrUpdateSecretForRepo": [Function],
-            "createRegistrationToken": [Function],
-            "createRegistrationTokenForOrg": [Function],
-            "createRegistrationTokenForRepo": [Function],
-            "createRemoveToken": [Function],
-            "createRemoveTokenForOrg": [Function],
-            "createRemoveTokenForRepo": [Function],
-            "deleteArtifact": [Function],
-            "deleteOrgSecret": [Function],
-            "deleteRepoSecret": [Function],
-            "deleteSecretFromRepo": [Function],
-            "deleteSelfHostedRunnerFromOrg": [Function],
-            "deleteSelfHostedRunnerFromRepo": [Function],
-            "deleteWorkflowRunLogs": [Function],
-            "downloadArtifact": [Function],
-            "downloadJobLogsForWorkflowRun": [Function],
-            "downloadWorkflowJobLogs": [Function],
-            "downloadWorkflowRunLogs": [Function],
-            "getArtifact": [Function],
-            "getJobForWorkflowRun": [Function],
-            "getOrgPublicKey": [Function],
-            "getOrgSecret": [Function],
-            "getPublicKey": [Function],
-            "getRepoPublicKey": [Function],
-            "getRepoSecret": [Function],
-            "getSecret": [Function],
-            "getSelfHostedRunner": [Function],
-            "getSelfHostedRunnerForOrg": [Function],
-            "getSelfHostedRunnerForRepo": [Function],
-            "getWorkflow": [Function],
-            "getWorkflowJob": [Function],
-            "getWorkflowRun": [Function],
-            "getWorkflowRunUsage": [Function],
-            "getWorkflowUsage": [Function],
-            "listArtifactsForRepo": [Function],
-            "listDownloadsForSelfHostedRunnerApplication": [Function],
-            "listJobsForWorkflowRun": [Function],
-            "listOrgSecrets": [Function],
-            "listRepoSecrets": [Function],
-            "listRepoWorkflowRuns": [Function],
-            "listRepoWorkflows": [Function],
-            "listRunnerApplicationsForOrg": [Function],
-            "listRunnerApplicationsForRepo": [Function],
-            "listSecretsForRepo": [Function],
-            "listSelectedReposForOrgSecret": [Function],
-            "listSelfHostedRunnersForOrg": [Function],
-            "listSelfHostedRunnersForRepo": [Function],
-            "listWorkflowJobLogs": [Function],
-            "listWorkflowRunArtifacts": [Function],
-            "listWorkflowRunLogs": [Function],
-            "listWorkflowRuns": [Function],
-            "listWorkflowRunsForRepo": [Function],
-            "reRunWorkflow": [Function],
-            "removeSelectedRepoFromOrgSecret": [Function],
-            "removeSelfHostedRunner": [Function],
-            "setSelectedReposForOrgSecret": [Function],
-          },
-          "activity": Object {
-            "checkRepoIsStarredByAuthenticatedUser": [Function],
-            "checkStarringRepo": [Function],
-            "deleteRepoSubscription": [Function],
-            "deleteThreadSubscription": [Function],
-            "getFeeds": [Function],
-            "getRepoSubscription": [Function],
-            "getThread": [Function],
-            "getThreadSubscription": [Function],
-            "getThreadSubscriptionForAuthenticatedUser": [Function],
-            "listEventsForAuthenticatedUser": [Function],
-            "listEventsForOrg": [Function],
-            "listEventsForUser": [Function],
-            "listFeeds": [Function],
-            "listNotifications": [Function],
-            "listNotificationsForAuthenticatedUser": [Function],
-            "listNotificationsForRepo": [Function],
-            "listOrgEventsForAuthenticatedUser": [Function],
-            "listPublicEvents": [Function],
-            "listPublicEventsForOrg": [Function],
-            "listPublicEventsForRepoNetwork": [Function],
-            "listPublicEventsForUser": [Function],
-            "listPublicOrgEvents": [Function],
-            "listReceivedEventsForUser": [Function],
-            "listReceivedPublicEventsForUser": [Function],
-            "listRepoEvents": [Function],
-            "listRepoNotificationsForAuthenticatedUser": [Function],
-            "listReposStarredByAuthenticatedUser": [Function],
-            "listReposStarredByUser": [Function],
-            "listReposWatchedByUser": [Function],
-            "listStargazersForRepo": [Function],
-            "listWatchedReposForAuthenticatedUser": [Function],
-            "listWatchersForRepo": [Function],
-            "markAsRead": [Function],
-            "markNotificationsAsRead": [Function],
-            "markNotificationsAsReadForRepo": [Function],
-            "markRepoNotificationsAsRead": [Function],
-            "markThreadAsRead": [Function],
-            "setRepoSubscription": [Function],
-            "setThreadSubscription": [Function],
-            "starRepo": [Function],
-            "starRepoForAuthenticatedUser": [Function],
-            "unstarRepo": [Function],
-            "unstarRepoForAuthenticatedUser": [Function],
-          },
-          "apps": Object {
-            "addRepoToInstallation": [Function],
-            "checkAccountIsAssociatedWithAny": [Function],
-            "checkAccountIsAssociatedWithAnyStubbed": [Function],
-            "checkToken": [Function],
-            "createContentAttachment": [Function],
-            "createFromManifest": [Function],
-            "createInstallationAccessToken": [Function],
-            "createInstallationToken": [Function],
-            "deleteAuthorization": [Function],
-            "deleteInstallation": [Function],
-            "deleteToken": [Function],
-            "getAuthenticated": [Function],
-            "getBySlug": [Function],
-            "getInstallation": [Function],
-            "getOrgInstallation": [Function],
-            "getRepoInstallation": [Function],
-            "getSubscriptionPlanForAccount": [Function],
-            "getSubscriptionPlanForAccountStubbed": [Function],
-            "getUserInstallation": [Function],
-            "listAccountsForPlan": [Function],
-            "listAccountsForPlanStubbed": [Function],
-            "listAccountsUserOrOrgOnPlan": [Function],
-            "listAccountsUserOrOrgOnPlanStubbed": [Function],
-            "listInstallationReposForAuthenticatedUser": [Function],
-            "listInstallations": [Function],
-            "listInstallationsForAuthenticatedUser": [Function],
-            "listMarketplacePurchasesForAuthenticatedUser": [Function],
-            "listMarketplacePurchasesForAuthenticatedUserStubbed": [Function],
-            "listPlans": [Function],
-            "listPlansStubbed": [Function],
-            "listRepos": [Function],
-            "listReposAccessibleToInstallation": [Function],
-            "listSubscriptionsForAuthenticatedUser": [Function],
-            "listSubscriptionsForAuthenticatedUserStubbed": [Function],
-            "removeRepoFromInstallation": [Function],
-            "resetToken": [Function],
-            "revokeInstallationAccessToken": [Function],
-            "revokeInstallationToken": [Function],
-            "suspendInstallation": [Function],
-            "unsuspendInstallation": [Function],
-          },
-          "auth": [Function],
-          "checks": Object {
-            "create": [Function],
-            "createSuite": [Function],
-            "get": [Function],
-            "getSuite": [Function],
-            "listAnnotations": [Function],
-            "listForRef": [Function],
-            "listForSuite": [Function],
-            "listSuitesForRef": [Function],
-            "rerequestSuite": [Function],
-            "setSuitesPreferences": [Function],
-            "update": [Function],
-          },
-          "codeScanning": Object {
-            "getAlert": [Function],
-            "listAlertsForRepo": [Function],
-          },
-          "codesOfConduct": Object {
-            "getAllCodesOfConduct": [Function],
-            "getConductCode": [Function],
-            "getForRepo": [Function],
-            "listConductCodes": [Function],
-          },
-          "emojis": Object {
-            "get": [Function],
-          },
-          "gists": Object {
-            "checkIsStarred": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "delete": [Function],
-            "deleteComment": [Function],
-            "fork": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getRevision": [Function],
-            "list": [Function],
-            "listComments": [Function],
-            "listCommits": [Function],
-            "listForUser": [Function],
-            "listForks": [Function],
-            "listPublic": [Function],
-            "listPublicForUser": [Function],
-            "listStarred": [Function],
-            "star": [Function],
-            "unstar": [Function],
-            "update": [Function],
-            "updateComment": [Function],
-          },
-          "git": Object {
-            "createBlob": [Function],
-            "createCommit": [Function],
-            "createRef": [Function],
-            "createTag": [Function],
-            "createTree": [Function],
-            "deleteRef": [Function],
-            "getBlob": [Function],
-            "getCommit": [Function],
-            "getRef": [Function],
-            "getTag": [Function],
-            "getTree": [Function],
-            "listMatchingRefs": [Function],
-            "updateRef": [Function],
-          },
-          "gitignore": Object {
-            "getAllTemplates": [Function],
-            "getTemplate": [Function],
-            "listTemplates": [Function],
-          },
-          "graphql": [Function],
-          "hook": [Function],
-          "interactions": Object {
-            "addOrUpdateRestrictionsForOrg": [Function],
-            "addOrUpdateRestrictionsForRepo": [Function],
-            "getRestrictionsForOrg": [Function],
-            "getRestrictionsForRepo": [Function],
-            "removeRestrictionsForOrg": [Function],
-            "removeRestrictionsForRepo": [Function],
-            "setRestrictionsForOrg": [Function],
-            "setRestrictionsForRepo": [Function],
-          },
-          "issues": Object {
-            "addAssignees": [Function],
-            "addLabels": [Function],
-            "checkAssignee": [Function],
-            "checkUserCanBeAssigned": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "createLabel": [Function],
-            "createMilestone": [Function],
-            "deleteComment": [Function],
-            "deleteLabel": [Function],
-            "deleteMilestone": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getEvent": [Function],
-            "getLabel": [Function],
-            "getMilestone": [Function],
-            "list": [Function],
-            "listAssignees": [Function],
-            "listComments": [Function],
-            "listCommentsForRepo": [Function],
-            "listEvents": [Function],
-            "listEventsForRepo": [Function],
-            "listEventsForTimeline": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listForRepo": [Function],
-            "listLabelsForMilestone": [Function],
-            "listLabelsForRepo": [Function],
-            "listLabelsOnIssue": [Function],
-            "listMilestones": [Function],
-            "listMilestonesForRepo": [Function],
-            "lock": [Function],
-            "removeAllLabels": [Function],
-            "removeAssignees": [Function],
-            "removeLabel": [Function],
-            "removeLabels": [Function],
-            "replaceAllLabels": [Function],
-            "replaceLabels": [Function],
-            "setLabels": [Function],
-            "unlock": [Function],
-            "update": [Function],
-            "updateComment": [Function],
-            "updateLabel": [Function],
-            "updateMilestone": [Function],
-          },
-          "licenses": Object {
-            "get": [Function],
-            "getAllCommonlyUsed": [Function],
-            "getForRepo": [Function],
-            "listCommonlyUsed": [Function],
-          },
-          "log": Object {
-            "debug": [Function],
-            "error": [Function],
-            "info": [Function],
-            "warn": [Function],
-          },
-          "markdown": Object {
-            "render": [Function],
-            "renderRaw": [Function],
-          },
-          "meta": Object {
-            "get": [Function],
-          },
-          "migrations": Object {
-            "cancelImport": [Function],
-            "deleteArchiveForAuthenticatedUser": [Function],
-            "deleteArchiveForOrg": [Function],
-            "downloadArchiveForOrg": [Function],
-            "getArchiveForAuthenticatedUser": [Function],
-            "getCommitAuthors": [Function],
-            "getImportProgress": [Function],
-            "getImportStatus": [Function],
-            "getLargeFiles": [Function],
-            "getStatusForAuthenticatedUser": [Function],
-            "getStatusForOrg": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listReposForOrg": [Function],
-            "listReposForUser": [Function],
-            "mapCommitAuthor": [Function],
-            "setLfsPreference": [Function],
-            "startForAuthenticatedUser": [Function],
-            "startForOrg": [Function],
-            "startImport": [Function],
-            "unlockRepoForAuthenticatedUser": [Function],
-            "unlockRepoForOrg": [Function],
-            "updateImport": [Function],
-          },
-          "orgs": Object {
-            "addOrUpdateMembership": [Function],
-            "blockUser": [Function],
-            "checkBlockedUser": [Function],
-            "checkMembership": [Function],
-            "checkMembershipForUser": [Function],
-            "checkPublicMembership": [Function],
-            "checkPublicMembershipForUser": [Function],
-            "concealMembership": [Function],
-            "convertMemberToOutsideCollaborator": [Function],
-            "createHook": [Function],
-            "createInvitation": [Function],
-            "createWebhook": [Function],
-            "deleteHook": [Function],
-            "deleteWebhook": [Function],
-            "get": [Function],
-            "getHook": [Function],
-            "getMembership": [Function],
-            "getMembershipForAuthenticatedUser": [Function],
-            "getMembershipForUser": [Function],
-            "getWebhook": [Function],
-            "list": [Function],
-            "listAppInstallations": [Function],
-            "listBlockedUsers": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForUser": [Function],
-            "listHooks": [Function],
-            "listInstallations": [Function],
-            "listInvitationTeams": [Function],
-            "listMembers": [Function],
-            "listMemberships": [Function],
-            "listMembershipsForAuthenticatedUser": [Function],
-            "listOutsideCollaborators": [Function],
-            "listPendingInvitations": [Function],
-            "listPublicMembers": [Function],
-            "listWebhooks": [Function],
-            "pingHook": [Function],
-            "pingWebhook": [Function],
-            "publicizeMembership": [Function],
-            "removeMember": [Function],
-            "removeMembership": [Function],
-            "removeMembershipForUser": [Function],
-            "removeOutsideCollaborator": [Function],
-            "removePublicMembershipForAuthenticatedUser": [Function],
-            "setMembershipForUser": [Function],
-            "setPublicMembershipForAuthenticatedUser": [Function],
-            "unblockUser": [Function],
-            "update": [Function],
-            "updateHook": [Function],
-            "updateMembership": [Function],
-            "updateMembershipForAuthenticatedUser": [Function],
-            "updateWebhook": [Function],
-          },
-          "paginate": [Function],
-          "projects": Object {
-            "addCollaborator": [Function],
-            "createCard": [Function],
-            "createColumn": [Function],
-            "createForAuthenticatedUser": [Function],
-            "createForOrg": [Function],
-            "createForRepo": [Function],
-            "delete": [Function],
-            "deleteCard": [Function],
-            "deleteColumn": [Function],
-            "get": [Function],
-            "getCard": [Function],
-            "getColumn": [Function],
-            "getPermissionForUser": [Function],
-            "listCards": [Function],
-            "listCollaborators": [Function],
-            "listColumns": [Function],
-            "listForOrg": [Function],
-            "listForRepo": [Function],
-            "listForUser": [Function],
-            "moveCard": [Function],
-            "moveColumn": [Function],
-            "removeCollaborator": [Function],
-            "reviewUserPermissionLevel": [Function],
-            "update": [Function],
-            "updateCard": [Function],
-            "updateColumn": [Function],
-          },
-          "pulls": Object {
-            "checkIfMerged": [Function],
-            "create": [Function],
-            "createComment": [Function],
-            "createReplyForReviewComment": [Function],
-            "createReview": [Function],
-            "createReviewComment": [Function],
-            "createReviewCommentReply": [Function],
-            "createReviewRequest": [Function],
-            "deleteComment": [Function],
-            "deletePendingReview": [Function],
-            "deleteReviewComment": [Function],
-            "deleteReviewRequest": [Function],
-            "dismissReview": [Function],
-            "get": [Function],
-            "getComment": [Function],
-            "getCommentsForReview": [Function],
-            "getReview": [Function],
-            "getReviewComment": [Function],
-            "list": [Function],
-            "listComments": [Function],
-            "listCommentsForRepo": [Function],
-            "listCommentsForReview": [Function],
-            "listCommits": [Function],
-            "listFiles": [Function],
-            "listRequestedReviewers": [Function],
-            "listReviewComments": [Function],
-            "listReviewCommentsForRepo": [Function],
-            "listReviewRequests": [Function],
-            "listReviews": [Function],
-            "merge": [Function],
-            "removeRequestedReviewers": [Function],
-            "requestReviewers": [Function],
-            "submitReview": [Function],
-            "update": [Function],
-            "updateBranch": [Function],
-            "updateComment": [Function],
-            "updateReview": [Function],
-            "updateReviewComment": [Function],
-          },
-          "rateLimit": Object {
-            "get": [Function],
-          },
-          "reactions": Object {
-            "createForCommitComment": [Function],
-            "createForIssue": [Function],
-            "createForIssueComment": [Function],
-            "createForPullRequestReviewComment": [Function],
-            "createForTeamDiscussionCommentInOrg": [Function],
-            "createForTeamDiscussionInOrg": [Function],
-            "delete": [Function],
-            "deleteForCommitComment": [Function],
-            "deleteForIssue": [Function],
-            "deleteForIssueComment": [Function],
-            "deleteForPullRequestComment": [Function],
-            "deleteForTeamDiscussion": [Function],
-            "deleteForTeamDiscussionComment": [Function],
-            "deleteLegacy": [Function],
-            "listForCommitComment": [Function],
-            "listForIssue": [Function],
-            "listForIssueComment": [Function],
-            "listForPullRequestReviewComment": [Function],
-            "listForTeamDiscussionCommentInOrg": [Function],
-            "listForTeamDiscussionInOrg": [Function],
-          },
-          "repos": Object {
-            "acceptInvitation": [Function],
-            "addAppAccessRestrictions": [Function],
-            "addCollaborator": [Function],
-            "addDeployKey": [Function],
-            "addProtectedBranchAdminEnforcement": [Function],
-            "addProtectedBranchAppRestrictions": [Function],
-            "addProtectedBranchRequiredSignatures": [Function],
-            "addProtectedBranchRequiredStatusChecksContexts": [Function],
-            "addProtectedBranchTeamRestrictions": [Function],
-            "addProtectedBranchUserRestrictions": [Function],
-            "addStatusCheckContexts": [Function],
-            "addTeamAccessRestrictions": [Function],
-            "addUserAccessRestrictions": [Function],
-            "checkCollaborator": [Function],
-            "checkVulnerabilityAlerts": [Function],
-            "compareCommits": [Function],
-            "createCommitComment": [Function],
-            "createCommitSignatureProtection": [Function],
-            "createCommitStatus": [Function],
-            "createDeployKey": [Function],
-            "createDeployment": [Function],
-            "createDeploymentStatus": [Function],
-            "createDispatchEvent": [Function],
-            "createForAuthenticatedUser": [Function],
-            "createFork": [Function],
-            "createHook": [Function],
-            "createInOrg": [Function],
-            "createOrUpdateFile": [Function],
-            "createOrUpdateFileContents": [Function],
-            "createPagesSite": [Function],
-            "createRelease": [Function],
-            "createStatus": [Function],
-            "createUsingTemplate": [Function],
-            "createWebhook": [Function],
-            "declineInvitation": [Function],
-            "delete": [Function],
-            "deleteAccessRestrictions": [Function],
-            "deleteAdminBranchProtection": [Function],
-            "deleteBranchProtection": [Function],
-            "deleteCommitComment": [Function],
-            "deleteCommitSignatureProtection": [Function],
-            "deleteDeployKey": [Function],
-            "deleteDeployment": [Function],
-            "deleteDownload": [Function],
-            "deleteFile": [Function],
-            "deleteHook": [Function],
-            "deleteInvitation": [Function],
-            "deletePagesSite": [Function],
-            "deletePullRequestReviewProtection": [Function],
-            "deleteRelease": [Function],
-            "deleteReleaseAsset": [Function],
-            "deleteWebhook": [Function],
-            "disableAutomatedSecurityFixes": [Function],
-            "disablePagesSite": [Function],
-            "disableVulnerabilityAlerts": [Function],
-            "downloadArchive": [Function],
-            "enableAutomatedSecurityFixes": [Function],
-            "enablePagesSite": [Function],
-            "enableVulnerabilityAlerts": [Function],
-            "get": [Function],
-            "getAccessRestrictions": [Function],
-            "getAdminBranchProtection": [Function],
-            "getAllStatusCheckContexts": [Function],
-            "getAllTopics": [Function],
-            "getAppsWithAccessToProtectedBranch": [Function],
-            "getArchiveLink": [Function],
-            "getBranch": [Function],
-            "getBranchProtection": [Function],
-            "getClones": [Function],
-            "getCodeFrequencyStats": [Function],
-            "getCollaboratorPermissionLevel": [Function],
-            "getCombinedStatusForRef": [Function],
-            "getCommit": [Function],
-            "getCommitActivityStats": [Function],
-            "getCommitComment": [Function],
-            "getCommitSignatureProtection": [Function],
-            "getCommunityProfileMetrics": [Function],
-            "getContent": [Function],
-            "getContents": [Function],
-            "getContributorsStats": [Function],
-            "getDeployKey": [Function],
-            "getDeployment": [Function],
-            "getDeploymentStatus": [Function],
-            "getDownload": [Function],
-            "getHook": [Function],
-            "getLatestPagesBuild": [Function],
-            "getLatestRelease": [Function],
-            "getPages": [Function],
-            "getPagesBuild": [Function],
-            "getParticipationStats": [Function],
-            "getProtectedBranchAdminEnforcement": [Function],
-            "getProtectedBranchPullRequestReviewEnforcement": [Function],
-            "getProtectedBranchRequiredSignatures": [Function],
-            "getProtectedBranchRequiredStatusChecks": [Function],
-            "getProtectedBranchRestrictions": [Function],
-            "getPullRequestReviewProtection": [Function],
-            "getPunchCardStats": [Function],
-            "getReadme": [Function],
-            "getRelease": [Function],
-            "getReleaseAsset": [Function],
-            "getReleaseByTag": [Function],
-            "getStatusChecksProtection": [Function],
-            "getTeamsWithAccessToProtectedBranch": [Function],
-            "getTopPaths": [Function],
-            "getTopReferrers": [Function],
-            "getUsersWithAccessToProtectedBranch": [Function],
-            "getViews": [Function],
-            "getWebhook": [Function],
-            "list": [Function],
-            "listAssetsForRelease": [Function],
-            "listBranches": [Function],
-            "listBranchesForHeadCommit": [Function],
-            "listCollaborators": [Function],
-            "listCommentsForCommit": [Function],
-            "listCommitComments": [Function],
-            "listCommitCommentsForRepo": [Function],
-            "listCommitStatusesForRef": [Function],
-            "listCommits": [Function],
-            "listContributors": [Function],
-            "listDeployKeys": [Function],
-            "listDeploymentStatuses": [Function],
-            "listDeployments": [Function],
-            "listDownloads": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listForOrg": [Function],
-            "listForUser": [Function],
-            "listForks": [Function],
-            "listHooks": [Function],
-            "listInvitations": [Function],
-            "listInvitationsForAuthenticatedUser": [Function],
-            "listLanguages": [Function],
-            "listPagesBuilds": [Function],
-            "listProtectedBranchRequiredStatusChecksContexts": [Function],
-            "listPublic": [Function],
-            "listPullRequestsAssociatedWithCommit": [Function],
-            "listReleaseAssets": [Function],
-            "listReleases": [Function],
-            "listStatusesForRef": [Function],
-            "listTags": [Function],
-            "listTeams": [Function],
-            "listTopics": [Function],
-            "listWebhooks": [Function],
-            "merge": [Function],
-            "pingHook": [Function],
-            "pingWebhook": [Function],
-            "removeAppAccessRestrictions": [Function],
-            "removeBranchProtection": [Function],
-            "removeCollaborator": [Function],
-            "removeDeployKey": [Function],
-            "removeProtectedBranchAdminEnforcement": [Function],
-            "removeProtectedBranchAppRestrictions": [Function],
-            "removeProtectedBranchPullRequestReviewEnforcement": [Function],
-            "removeProtectedBranchRequiredSignatures": [Function],
-            "removeProtectedBranchRequiredStatusChecks": [Function],
-            "removeProtectedBranchRequiredStatusChecksContexts": [Function],
-            "removeProtectedBranchRestrictions": [Function],
-            "removeProtectedBranchTeamRestrictions": [Function],
-            "removeProtectedBranchUserRestrictions": [Function],
-            "removeStatusCheckContexts": [Function],
-            "removeStatusCheckProtection": [Function],
-            "removeTeamAccessRestrictions": [Function],
-            "removeUserAccessRestrictions": [Function],
-            "replaceAllTopics": [Function],
-            "replaceProtectedBranchAppRestrictions": [Function],
-            "replaceProtectedBranchRequiredStatusChecksContexts": [Function],
-            "replaceProtectedBranchTeamRestrictions": [Function],
-            "replaceProtectedBranchUserRestrictions": [Function],
-            "replaceTopics": [Function],
-            "requestPageBuild": [Function],
-            "requestPagesBuild": [Function],
-            "retrieveCommunityProfileMetrics": [Function],
-            "setAdminBranchProtection": [Function],
-            "setAppAccessRestrictions": [Function],
-            "setStatusCheckContexts": [Function],
-            "setTeamAccessRestrictions": [Function],
-            "setUserAccessRestrictions": [Function],
-            "testPushHook": [Function],
-            "testPushWebhook": [Function],
-            "transfer": [Function],
-            "update": [Function],
-            "updateBranchProtection": [Function],
-            "updateCommitComment": [Function],
-            "updateHook": [Function],
-            "updateInformationAboutPagesSite": [Function],
-            "updateInvitation": [Function],
-            "updateProtectedBranchPullRequestReviewEnforcement": [Function],
-            "updateProtectedBranchRequiredStatusChecks": [Function],
-            "updatePullRequestReviewProtection": [Function],
-            "updateRelease": [Function],
-            "updateReleaseAsset": [Function],
-            "updateStatusCheckPotection": [Function],
-            "updateWebhook": [Function],
-            "uploadReleaseAsset": [Function],
-          },
-          "request": [Function],
-          "search": Object {
-            "code": [Function],
-            "commits": [Function],
-            "issuesAndPullRequests": [Function],
-            "labels": [Function],
-            "repos": [Function],
-            "topics": [Function],
-            "users": [Function],
-          },
-          "teams": Object {
-            "addOrUpdateMembershipForUserInOrg": [Function],
-            "addOrUpdateMembershipInOrg": [Function],
-            "addOrUpdateProjectInOrg": [Function],
-            "addOrUpdateProjectPermissionsInOrg": [Function],
-            "addOrUpdateRepoInOrg": [Function],
-            "addOrUpdateRepoPermissionsInOrg": [Function],
-            "checkManagesRepoInOrg": [Function],
-            "checkPermissionsForProjectInOrg": [Function],
-            "checkPermissionsForRepoInOrg": [Function],
-            "create": [Function],
-            "createDiscussionCommentInOrg": [Function],
-            "createDiscussionInOrg": [Function],
-            "deleteDiscussionCommentInOrg": [Function],
-            "deleteDiscussionInOrg": [Function],
-            "deleteInOrg": [Function],
-            "getByName": [Function],
-            "getDiscussionCommentInOrg": [Function],
-            "getDiscussionInOrg": [Function],
-            "getMembershipForUserInOrg": [Function],
-            "getMembershipInOrg": [Function],
-            "list": [Function],
-            "listChildInOrg": [Function],
-            "listDiscussionCommentsInOrg": [Function],
-            "listDiscussionsInOrg": [Function],
-            "listForAuthenticatedUser": [Function],
-            "listMembersInOrg": [Function],
-            "listPendingInvitationsInOrg": [Function],
-            "listProjectsInOrg": [Function],
-            "listReposInOrg": [Function],
-            "removeMembershipForUserInOrg": [Function],
-            "removeMembershipInOrg": [Function],
-            "removeProjectInOrg": [Function],
-            "removeRepoInOrg": [Function],
-            "reviewProjectInOrg": [Function],
-            "updateDiscussionCommentInOrg": [Function],
-            "updateDiscussionInOrg": [Function],
-            "updateInOrg": [Function],
-          },
-          "users": Object {
-            "addEmailForAuthenticated": [Function],
-            "addEmails": [Function],
-            "block": [Function],
-            "checkBlocked": [Function],
-            "checkFollowing": [Function],
-            "checkFollowingForUser": [Function],
-            "checkPersonIsFollowedByAuthenticated": [Function],
-            "createGpgKey": [Function],
-            "createGpgKeyForAuthenticated": [Function],
-            "createPublicKey": [Function],
-            "createPublicSshKeyForAuthenticated": [Function],
-            "deleteEmailForAuthenticated": [Function],
-            "deleteEmails": [Function],
-            "deleteGpgKey": [Function],
-            "deleteGpgKeyForAuthenticated": [Function],
-            "deletePublicKey": [Function],
-            "deletePublicSshKeyForAuthenticated": [Function],
-            "follow": [Function],
-            "getAuthenticated": [Function],
-            "getByUsername": [Function],
-            "getContextForUser": [Function],
-            "getGpgKey": [Function],
-            "getGpgKeyForAuthenticated": [Function],
-            "getPublicKey": [Function],
-            "getPublicSshKeyForAuthenticated": [Function],
-            "list": [Function],
-            "listBlocked": [Function],
-            "listBlockedByAuthenticated": [Function],
-            "listEmails": [Function],
-            "listEmailsForAuthenticated": [Function],
-            "listFollowedByAuthenticated": [Function],
-            "listFollowersForAuthenticatedUser": [Function],
-            "listFollowersForUser": [Function],
-            "listFollowingForAuthenticatedUser": [Function],
-            "listFollowingForUser": [Function],
-            "listGpgKeys": [Function],
-            "listGpgKeysForAuthenticated": [Function],
-            "listGpgKeysForUser": [Function],
-            "listPublicEmails": [Function],
-            "listPublicEmailsForAuthenticated": [Function],
-            "listPublicKeys": [Function],
-            "listPublicKeysForUser": [Function],
-            "listPublicSshKeysForAuthenticated": [Function],
-            "setPrimaryEmailVisibilityForAuthenticated": [Function],
-            "togglePrimaryEmailVisibility": [Function],
-            "unblock": [Function],
-            "unfollow": [Function],
-            "updateAuthenticated": [Function],
-          },
-        },
-      },
-      "hasStorageAnalyticsAfecFeature": [Function],
       "isAccountReady": [Function],
-      "isAutoscaleDefaultEnabled": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isHostedDataExplorerEnabled": [Function],
       "isLastCollection": [Function],
       "isLastNonEmptyDatabase": [Function],
-      "isMongoIndexingEnabled": [Function],
       "isNotebookEnabled": [Function],
       "isNotebooksEnabledForAccount": [Function],
-      "isPublishNotebookPaneEnabled": [Function],
       "isResourceTokenCollectionNodeSelected": [Function],
       "isSchemaEnabled": [Function],
       "isSelectedDatabaseShared": [Function],
       "isServerlessEnabled": [Function],
-      "isSparkEnabled": [Function],
-      "isSparkEnabledForAccount": [Function],
+      "isShellEnabled": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "junoClient": JunoClient {
-        "cachedPinnedRepos": [Function],
-      },
       "memoryUsageInfo": [Function],
       "notebookBasePath": [Function],
       "notebookServerInfo": [Function],
-      "onGitHubClientError": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "openDialog": undefined,
       "openSidePanel": undefined,
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
@@ -887,7 +43,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       },
       "refreshAllDatabases": [Function],
       "refreshNotebookList": [Function],
-      "refreshTreeTitle": [Function],
       "resourceTokenCollection": [Function],
       "resourceTokenCollectionId": [Function],
       "resourceTokenDatabaseId": [Function],
@@ -936,33 +91,383 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
     }
   }
 >
-  <form
-    className="panelFormWrapper"
+  <RightPaneForm
+    expandConsole={[Function]}
+    formError=""
+    isExecuting={false}
     onSubmit={[Function]}
+    submitButtonText="OK"
   >
-    <PanelInfoErrorComponent
-      message="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-      messageType="warning"
-      showErrorDetails={false}
+    <form
+      className="panelFormWrapper"
+      onSubmit={[Function]}
     >
-      <Stack
-        className="panelInfoErrorContainer"
-        horizontal={true}
-        verticalAlign="center"
+      <PanelInfoErrorComponent
+        message="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+        messageType="warning"
+        showErrorDetails={false}
       >
-        <div
-          className="ms-Stack panelInfoErrorContainer css-102"
+        <Stack
+          className="panelInfoErrorContainer"
+          horizontal={true}
+          verticalAlign="center"
         >
-          <StyledIconBase
-            aria-label="warning"
-            className="panelWarningIcon"
-            iconName="WarningSolid"
-            key=".0:$.0"
+          <div
+            className="ms-Stack panelInfoErrorContainer css-102"
           >
-            <IconBase
+            <StyledIconBase
               aria-label="warning"
               className="panelWarningIcon"
               iconName="WarningSolid"
+              key=".0:$.0"
+            >
+              <IconBase
+                aria-label="warning"
+                className="panelWarningIcon"
+                iconName="WarningSolid"
+                styles={[Function]}
+                theme={
+                  Object {
+                    "disableGlobalClassNames": false,
+                    "effects": Object {
+                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "roundedCorner2": "2px",
+                      "roundedCorner4": "4px",
+                      "roundedCorner6": "6px",
+                    },
+                    "fonts": Object {
+                      "large": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "18px",
+                        "fontWeight": 400,
+                      },
+                      "medium": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "14px",
+                        "fontWeight": 400,
+                      },
+                      "mediumPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "16px",
+                        "fontWeight": 400,
+                      },
+                      "mega": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "68px",
+                        "fontWeight": 600,
+                      },
+                      "small": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "smallPlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "12px",
+                        "fontWeight": 400,
+                      },
+                      "superLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "42px",
+                        "fontWeight": 600,
+                      },
+                      "tiny": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "20px",
+                        "fontWeight": 600,
+                      },
+                      "xLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "24px",
+                        "fontWeight": 600,
+                      },
+                      "xSmall": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "10px",
+                        "fontWeight": 400,
+                      },
+                      "xxLarge": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "28px",
+                        "fontWeight": 600,
+                      },
+                      "xxLargePlus": Object {
+                        "MozOsxFontSmoothing": "grayscale",
+                        "WebkitFontSmoothing": "antialiased",
+                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                        "fontSize": "32px",
+                        "fontWeight": 600,
+                      },
+                    },
+                    "isInverted": false,
+                    "palette": Object {
+                      "accent": "#0078d4",
+                      "black": "#000000",
+                      "blackTranslucent40": "rgba(0,0,0,.4)",
+                      "blue": "#0078d4",
+                      "blueDark": "#002050",
+                      "blueLight": "#00bcf2",
+                      "blueMid": "#00188f",
+                      "green": "#107c10",
+                      "greenDark": "#004b1c",
+                      "greenLight": "#bad80a",
+                      "magenta": "#b4009e",
+                      "magentaDark": "#5c005c",
+                      "magentaLight": "#e3008c",
+                      "neutralDark": "#201f1e",
+                      "neutralLight": "#edebe9",
+                      "neutralLighter": "#f3f2f1",
+                      "neutralLighterAlt": "#faf9f8",
+                      "neutralPrimary": "#323130",
+                      "neutralPrimaryAlt": "#3b3a39",
+                      "neutralQuaternary": "#d2d0ce",
+                      "neutralQuaternaryAlt": "#e1dfdd",
+                      "neutralSecondary": "#605e5c",
+                      "neutralSecondaryAlt": "#8a8886",
+                      "neutralTertiary": "#a19f9d",
+                      "neutralTertiaryAlt": "#c8c6c4",
+                      "orange": "#d83b01",
+                      "orangeLight": "#ea4300",
+                      "orangeLighter": "#ff8c00",
+                      "purple": "#5c2d91",
+                      "purpleDark": "#32145a",
+                      "purpleLight": "#b4a0ff",
+                      "red": "#e81123",
+                      "redDark": "#a4262c",
+                      "teal": "#008272",
+                      "tealDark": "#004b50",
+                      "tealLight": "#00b294",
+                      "themeDark": "#005a9e",
+                      "themeDarkAlt": "#106ebe",
+                      "themeDarker": "#004578",
+                      "themeLight": "#c7e0f4",
+                      "themeLighter": "#deecf9",
+                      "themeLighterAlt": "#eff6fc",
+                      "themePrimary": "#0078d4",
+                      "themeSecondary": "#2b88d8",
+                      "themeTertiary": "#71afe5",
+                      "white": "#ffffff",
+                      "whiteTranslucent40": "rgba(255,255,255,.4)",
+                      "yellow": "#ffb900",
+                      "yellowDark": "#d29200",
+                      "yellowLight": "#fff100",
+                    },
+                    "rtl": undefined,
+                    "semanticColors": Object {
+                      "accentButtonBackground": "#0078d4",
+                      "accentButtonText": "#ffffff",
+                      "actionLink": "#323130",
+                      "actionLinkHovered": "#201f1e",
+                      "blockingBackground": "#FDE7E9",
+                      "blockingIcon": "#FDE7E9",
+                      "bodyBackground": "#ffffff",
+                      "bodyBackgroundChecked": "#edebe9",
+                      "bodyBackgroundHovered": "#f3f2f1",
+                      "bodyDivider": "#edebe9",
+                      "bodyFrameBackground": "#ffffff",
+                      "bodyFrameDivider": "#edebe9",
+                      "bodyStandoutBackground": "#faf9f8",
+                      "bodySubtext": "#605e5c",
+                      "bodyText": "#323130",
+                      "bodyTextChecked": "#000000",
+                      "buttonBackground": "#ffffff",
+                      "buttonBackgroundChecked": "#c8c6c4",
+                      "buttonBackgroundCheckedHovered": "#edebe9",
+                      "buttonBackgroundDisabled": "#f3f2f1",
+                      "buttonBackgroundHovered": "#f3f2f1",
+                      "buttonBackgroundPressed": "#edebe9",
+                      "buttonBorder": "#8a8886",
+                      "buttonBorderDisabled": "#f3f2f1",
+                      "buttonText": "#323130",
+                      "buttonTextChecked": "#201f1e",
+                      "buttonTextCheckedHovered": "#000000",
+                      "buttonTextDisabled": "#a19f9d",
+                      "buttonTextHovered": "#201f1e",
+                      "buttonTextPressed": "#201f1e",
+                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                      "cardStandoutBackground": "#ffffff",
+                      "defaultStateBackground": "#faf9f8",
+                      "disabledBackground": "#f3f2f1",
+                      "disabledBodySubtext": "#c8c6c4",
+                      "disabledBodyText": "#a19f9d",
+                      "disabledBorder": "#c8c6c4",
+                      "disabledSubtext": "#d2d0ce",
+                      "disabledText": "#a19f9d",
+                      "errorBackground": "#FDE7E9",
+                      "errorIcon": "#A80000",
+                      "errorText": "#a4262c",
+                      "focusBorder": "#605e5c",
+                      "infoBackground": "#f3f2f1",
+                      "infoIcon": "#605e5c",
+                      "inputBackground": "#ffffff",
+                      "inputBackgroundChecked": "#0078d4",
+                      "inputBackgroundCheckedHovered": "#005a9e",
+                      "inputBorder": "#605e5c",
+                      "inputBorderHovered": "#323130",
+                      "inputFocusBorderAlt": "#0078d4",
+                      "inputForegroundChecked": "#ffffff",
+                      "inputIcon": "#0078d4",
+                      "inputIconDisabled": "#a19f9d",
+                      "inputIconHovered": "#005a9e",
+                      "inputPlaceholderBackgroundChecked": "#deecf9",
+                      "inputPlaceholderText": "#605e5c",
+                      "inputText": "#323130",
+                      "inputTextHovered": "#201f1e",
+                      "link": "#0078d4",
+                      "linkHovered": "#004578",
+                      "listBackground": "#ffffff",
+                      "listHeaderBackgroundHovered": "#f3f2f1",
+                      "listHeaderBackgroundPressed": "#edebe9",
+                      "listItemBackgroundChecked": "#edebe9",
+                      "listItemBackgroundCheckedHovered": "#e1dfdd",
+                      "listItemBackgroundHovered": "#f3f2f1",
+                      "listText": "#323130",
+                      "listTextColor": "#323130",
+                      "menuBackground": "#ffffff",
+                      "menuDivider": "#c8c6c4",
+                      "menuHeader": "#0078d4",
+                      "menuIcon": "#0078d4",
+                      "menuItemBackgroundChecked": "#edebe9",
+                      "menuItemBackgroundHovered": "#f3f2f1",
+                      "menuItemBackgroundPressed": "#edebe9",
+                      "menuItemText": "#323130",
+                      "menuItemTextHovered": "#201f1e",
+                      "messageLink": "#005A9E",
+                      "messageLinkHovered": "#004578",
+                      "messageText": "#323130",
+                      "primaryButtonBackground": "#0078d4",
+                      "primaryButtonBackgroundDisabled": "#f3f2f1",
+                      "primaryButtonBackgroundHovered": "#106ebe",
+                      "primaryButtonBackgroundPressed": "#005a9e",
+                      "primaryButtonBorder": "transparent",
+                      "primaryButtonText": "#ffffff",
+                      "primaryButtonTextDisabled": "#d2d0ce",
+                      "primaryButtonTextHovered": "#ffffff",
+                      "primaryButtonTextPressed": "#ffffff",
+                      "severeWarningBackground": "#FED9CC",
+                      "severeWarningIcon": "#D83B01",
+                      "smallInputBorder": "#605e5c",
+                      "successBackground": "#DFF6DD",
+                      "successIcon": "#107C10",
+                      "successText": "#107C10",
+                      "variantBorder": "#edebe9",
+                      "variantBorderHovered": "#a19f9d",
+                      "warningBackground": "#FFF4CE",
+                      "warningHighlight": "#ffb900",
+                      "warningIcon": "#797775",
+                      "warningText": "#323130",
+                    },
+                    "spacing": Object {
+                      "l1": "20px",
+                      "l2": "32px",
+                      "m": "16px",
+                      "s1": "8px",
+                      "s2": "4px",
+                    },
+                  }
+                }
+              >
+                <i
+                  aria-label="warning"
+                  className="panelWarningIcon root-104"
+                  data-icon-name="WarningSolid"
+                  role="img"
+                >
+                  
+                </i>
+              </IconBase>
+            </StyledIconBase>
+            <span
+              className="panelWarningErrorDetailsLinkContainer"
+              key=".0:$.1"
+            >
+              <Text
+                aria-label="message"
+                className="panelWarningErrorMessage"
+                variant="small"
+              >
+                <span
+                  aria-label="message"
+                  className="panelWarningErrorMessage css-105"
+                >
+                  Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
+                </span>
+              </Text>
+            </span>
+          </div>
+        </Stack>
+      </PanelInfoErrorComponent>
+      <div
+        className="panelMainContent"
+      >
+        <div
+          className="confirmDeleteInput"
+        >
+          <span
+            className="mandatoryStar"
+          >
+            * 
+          </span>
+          <Text
+            variant="small"
+          >
+            <span
+              className="css-105"
+            >
+              Confirm by typing the database id
+            </span>
+          </Text>
+          <StyledTextFieldBase
+            autoFocus={true}
+            id="confirmDatabaseId"
+            onChange={[Function]}
+            styles={
+              Object {
+                "fieldGroup": Object {
+                  "width": 300,
+                },
+              }
+            }
+          >
+            <TextFieldBase
+              autoFocus={true}
+              deferredValidationTime={200}
+              id="confirmDatabaseId"
+              onChange={[Function]}
+              resizable={true}
               styles={[Function]}
               theme={
                 Object {
@@ -1237,1020 +742,396 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                   },
                 }
               }
-            >
-              <i
-                aria-label="warning"
-                className="panelWarningIcon root-104"
-                data-icon-name="WarningSolid"
-                role="img"
-              >
-                
-              </i>
-            </IconBase>
-          </StyledIconBase>
-          <span
-            className="panelWarningErrorDetailsLinkContainer"
-            key=".0:$.1"
-          >
-            <Text
-              aria-label="message"
-              className="panelWarningErrorMessage"
-              variant="small"
-            >
-              <span
-                aria-label="message"
-                className="panelWarningErrorMessage css-105"
-              >
-                Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
-              </span>
-            </Text>
-          </span>
-        </div>
-      </Stack>
-    </PanelInfoErrorComponent>
-    <div
-      className="panelMainContent"
-    >
-      <div
-        className="confirmDeleteInput"
-      >
-        <span
-          className="mandatoryStar"
-        >
-          * 
-        </span>
-        <Text
-          variant="small"
-        >
-          <span
-            className="css-105"
-          >
-            Confirm by typing the database id
-          </span>
-        </Text>
-        <StyledTextFieldBase
-          autoFocus={true}
-          id="confirmDatabaseId"
-          onChange={[Function]}
-          styles={
-            Object {
-              "fieldGroup": Object {
-                "width": 300,
-              },
-            }
-          }
-        >
-          <TextFieldBase
-            autoFocus={true}
-            deferredValidationTime={200}
-            id="confirmDatabaseId"
-            onChange={[Function]}
-            resizable={true}
-            styles={[Function]}
-            theme={
-              Object {
-                "disableGlobalClassNames": false,
-                "effects": Object {
-                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "roundedCorner2": "2px",
-                  "roundedCorner4": "4px",
-                  "roundedCorner6": "6px",
-                },
-                "fonts": Object {
-                  "large": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "18px",
-                    "fontWeight": 400,
-                  },
-                  "medium": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "14px",
-                    "fontWeight": 400,
-                  },
-                  "mediumPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "16px",
-                    "fontWeight": 400,
-                  },
-                  "mega": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "68px",
-                    "fontWeight": 600,
-                  },
-                  "small": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "smallPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "superLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "42px",
-                    "fontWeight": 600,
-                  },
-                  "tiny": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "20px",
-                    "fontWeight": 600,
-                  },
-                  "xLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "24px",
-                    "fontWeight": 600,
-                  },
-                  "xSmall": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xxLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "28px",
-                    "fontWeight": 600,
-                  },
-                  "xxLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "32px",
-                    "fontWeight": 600,
-                  },
-                },
-                "isInverted": false,
-                "palette": Object {
-                  "accent": "#0078d4",
-                  "black": "#000000",
-                  "blackTranslucent40": "rgba(0,0,0,.4)",
-                  "blue": "#0078d4",
-                  "blueDark": "#002050",
-                  "blueLight": "#00bcf2",
-                  "blueMid": "#00188f",
-                  "green": "#107c10",
-                  "greenDark": "#004b1c",
-                  "greenLight": "#bad80a",
-                  "magenta": "#b4009e",
-                  "magentaDark": "#5c005c",
-                  "magentaLight": "#e3008c",
-                  "neutralDark": "#201f1e",
-                  "neutralLight": "#edebe9",
-                  "neutralLighter": "#f3f2f1",
-                  "neutralLighterAlt": "#faf9f8",
-                  "neutralPrimary": "#323130",
-                  "neutralPrimaryAlt": "#3b3a39",
-                  "neutralQuaternary": "#d2d0ce",
-                  "neutralQuaternaryAlt": "#e1dfdd",
-                  "neutralSecondary": "#605e5c",
-                  "neutralSecondaryAlt": "#8a8886",
-                  "neutralTertiary": "#a19f9d",
-                  "neutralTertiaryAlt": "#c8c6c4",
-                  "orange": "#d83b01",
-                  "orangeLight": "#ea4300",
-                  "orangeLighter": "#ff8c00",
-                  "purple": "#5c2d91",
-                  "purpleDark": "#32145a",
-                  "purpleLight": "#b4a0ff",
-                  "red": "#e81123",
-                  "redDark": "#a4262c",
-                  "teal": "#008272",
-                  "tealDark": "#004b50",
-                  "tealLight": "#00b294",
-                  "themeDark": "#005a9e",
-                  "themeDarkAlt": "#106ebe",
-                  "themeDarker": "#004578",
-                  "themeLight": "#c7e0f4",
-                  "themeLighter": "#deecf9",
-                  "themeLighterAlt": "#eff6fc",
-                  "themePrimary": "#0078d4",
-                  "themeSecondary": "#2b88d8",
-                  "themeTertiary": "#71afe5",
-                  "white": "#ffffff",
-                  "whiteTranslucent40": "rgba(255,255,255,.4)",
-                  "yellow": "#ffb900",
-                  "yellowDark": "#d29200",
-                  "yellowLight": "#fff100",
-                },
-                "rtl": undefined,
-                "semanticColors": Object {
-                  "accentButtonBackground": "#0078d4",
-                  "accentButtonText": "#ffffff",
-                  "actionLink": "#323130",
-                  "actionLinkHovered": "#201f1e",
-                  "blockingBackground": "#FDE7E9",
-                  "blockingIcon": "#FDE7E9",
-                  "bodyBackground": "#ffffff",
-                  "bodyBackgroundChecked": "#edebe9",
-                  "bodyBackgroundHovered": "#f3f2f1",
-                  "bodyDivider": "#edebe9",
-                  "bodyFrameBackground": "#ffffff",
-                  "bodyFrameDivider": "#edebe9",
-                  "bodyStandoutBackground": "#faf9f8",
-                  "bodySubtext": "#605e5c",
-                  "bodyText": "#323130",
-                  "bodyTextChecked": "#000000",
-                  "buttonBackground": "#ffffff",
-                  "buttonBackgroundChecked": "#c8c6c4",
-                  "buttonBackgroundCheckedHovered": "#edebe9",
-                  "buttonBackgroundDisabled": "#f3f2f1",
-                  "buttonBackgroundHovered": "#f3f2f1",
-                  "buttonBackgroundPressed": "#edebe9",
-                  "buttonBorder": "#8a8886",
-                  "buttonBorderDisabled": "#f3f2f1",
-                  "buttonText": "#323130",
-                  "buttonTextChecked": "#201f1e",
-                  "buttonTextCheckedHovered": "#000000",
-                  "buttonTextDisabled": "#a19f9d",
-                  "buttonTextHovered": "#201f1e",
-                  "buttonTextPressed": "#201f1e",
-                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "cardStandoutBackground": "#ffffff",
-                  "defaultStateBackground": "#faf9f8",
-                  "disabledBackground": "#f3f2f1",
-                  "disabledBodySubtext": "#c8c6c4",
-                  "disabledBodyText": "#a19f9d",
-                  "disabledBorder": "#c8c6c4",
-                  "disabledSubtext": "#d2d0ce",
-                  "disabledText": "#a19f9d",
-                  "errorBackground": "#FDE7E9",
-                  "errorIcon": "#A80000",
-                  "errorText": "#a4262c",
-                  "focusBorder": "#605e5c",
-                  "infoBackground": "#f3f2f1",
-                  "infoIcon": "#605e5c",
-                  "inputBackground": "#ffffff",
-                  "inputBackgroundChecked": "#0078d4",
-                  "inputBackgroundCheckedHovered": "#005a9e",
-                  "inputBorder": "#605e5c",
-                  "inputBorderHovered": "#323130",
-                  "inputFocusBorderAlt": "#0078d4",
-                  "inputForegroundChecked": "#ffffff",
-                  "inputIcon": "#0078d4",
-                  "inputIconDisabled": "#a19f9d",
-                  "inputIconHovered": "#005a9e",
-                  "inputPlaceholderBackgroundChecked": "#deecf9",
-                  "inputPlaceholderText": "#605e5c",
-                  "inputText": "#323130",
-                  "inputTextHovered": "#201f1e",
-                  "link": "#0078d4",
-                  "linkHovered": "#004578",
-                  "listBackground": "#ffffff",
-                  "listHeaderBackgroundHovered": "#f3f2f1",
-                  "listHeaderBackgroundPressed": "#edebe9",
-                  "listItemBackgroundChecked": "#edebe9",
-                  "listItemBackgroundCheckedHovered": "#e1dfdd",
-                  "listItemBackgroundHovered": "#f3f2f1",
-                  "listText": "#323130",
-                  "listTextColor": "#323130",
-                  "menuBackground": "#ffffff",
-                  "menuDivider": "#c8c6c4",
-                  "menuHeader": "#0078d4",
-                  "menuIcon": "#0078d4",
-                  "menuItemBackgroundChecked": "#edebe9",
-                  "menuItemBackgroundHovered": "#f3f2f1",
-                  "menuItemBackgroundPressed": "#edebe9",
-                  "menuItemText": "#323130",
-                  "menuItemTextHovered": "#201f1e",
-                  "messageLink": "#005A9E",
-                  "messageLinkHovered": "#004578",
-                  "messageText": "#323130",
-                  "primaryButtonBackground": "#0078d4",
-                  "primaryButtonBackgroundDisabled": "#f3f2f1",
-                  "primaryButtonBackgroundHovered": "#106ebe",
-                  "primaryButtonBackgroundPressed": "#005a9e",
-                  "primaryButtonBorder": "transparent",
-                  "primaryButtonText": "#ffffff",
-                  "primaryButtonTextDisabled": "#d2d0ce",
-                  "primaryButtonTextHovered": "#ffffff",
-                  "primaryButtonTextPressed": "#ffffff",
-                  "severeWarningBackground": "#FED9CC",
-                  "severeWarningIcon": "#D83B01",
-                  "smallInputBorder": "#605e5c",
-                  "successBackground": "#DFF6DD",
-                  "successIcon": "#107C10",
-                  "successText": "#107C10",
-                  "variantBorder": "#edebe9",
-                  "variantBorderHovered": "#a19f9d",
-                  "warningBackground": "#FFF4CE",
-                  "warningHighlight": "#ffb900",
-                  "warningIcon": "#797775",
-                  "warningText": "#323130",
-                },
-                "spacing": Object {
-                  "l1": "20px",
-                  "l2": "32px",
-                  "m": "16px",
-                  "s1": "8px",
-                  "s2": "4px",
-                },
-              }
-            }
-            validateOnLoad={true}
-          >
-            <div
-              className="ms-TextField root-107"
+              validateOnLoad={true}
             >
               <div
-                className="ms-TextField-wrapper"
+                className="ms-TextField root-107"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-108"
+                  className="ms-TextField-wrapper"
                 >
-                  <input
-                    aria-invalid={false}
-                    autoFocus={true}
-                    className="ms-TextField-field field-109"
-                    id="confirmDatabaseId"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    type="text"
-                    value=""
-                  />
+                  <div
+                    className="ms-TextField-fieldGroup fieldGroup-108"
+                  >
+                    <input
+                      aria-invalid={false}
+                      autoFocus={true}
+                      className="ms-TextField-field field-109"
+                      id="confirmDatabaseId"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onInput={[Function]}
+                      type="text"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </TextFieldBase>
-        </StyledTextFieldBase>
-      </div>
-      <div
-        className="deleteDatabaseFeedback"
-      >
-        <Text
-          block={true}
-          variant="small"
+            </TextFieldBase>
+          </StyledTextFieldBase>
+        </div>
+        <div
+          className="deleteDatabaseFeedback"
         >
-          <span
-            className="css-126"
+          <Text
+            block={true}
+            variant="small"
           >
-            Help us improve Azure Cosmos DB!
-          </span>
-        </Text>
-        <Text
-          block={true}
-          variant="small"
-        >
-          <span
-            className="css-126"
+            <span
+              className="css-126"
+            >
+              Help us improve Azure Cosmos DB!
+            </span>
+          </Text>
+          <Text
+            block={true}
+            variant="small"
           >
-            What is the reason why you are deleting this database?
-          </span>
-        </Text>
-        <StyledTextFieldBase
-          id="deleteDatabaseFeedbackInput"
-          multiline={true}
-          onChange={[Function]}
-          rows={3}
-          styles={
-            Object {
-              "fieldGroup": Object {
-                "width": 300,
-              },
-            }
-          }
-        >
-          <TextFieldBase
-            deferredValidationTime={200}
+            <span
+              className="css-126"
+            >
+              What is the reason why you are deleting this database?
+            </span>
+          </Text>
+          <StyledTextFieldBase
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
-            resizable={true}
             rows={3}
-            styles={[Function]}
-            theme={
+            styles={
               Object {
-                "disableGlobalClassNames": false,
-                "effects": Object {
-                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "roundedCorner2": "2px",
-                  "roundedCorner4": "4px",
-                  "roundedCorner6": "6px",
-                },
-                "fonts": Object {
-                  "large": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "18px",
-                    "fontWeight": 400,
-                  },
-                  "medium": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "14px",
-                    "fontWeight": 400,
-                  },
-                  "mediumPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "16px",
-                    "fontWeight": 400,
-                  },
-                  "mega": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "68px",
-                    "fontWeight": 600,
-                  },
-                  "small": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "smallPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "superLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "42px",
-                    "fontWeight": 600,
-                  },
-                  "tiny": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "20px",
-                    "fontWeight": 600,
-                  },
-                  "xLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "24px",
-                    "fontWeight": 600,
-                  },
-                  "xSmall": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xxLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "28px",
-                    "fontWeight": 600,
-                  },
-                  "xxLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "32px",
-                    "fontWeight": 600,
-                  },
-                },
-                "isInverted": false,
-                "palette": Object {
-                  "accent": "#0078d4",
-                  "black": "#000000",
-                  "blackTranslucent40": "rgba(0,0,0,.4)",
-                  "blue": "#0078d4",
-                  "blueDark": "#002050",
-                  "blueLight": "#00bcf2",
-                  "blueMid": "#00188f",
-                  "green": "#107c10",
-                  "greenDark": "#004b1c",
-                  "greenLight": "#bad80a",
-                  "magenta": "#b4009e",
-                  "magentaDark": "#5c005c",
-                  "magentaLight": "#e3008c",
-                  "neutralDark": "#201f1e",
-                  "neutralLight": "#edebe9",
-                  "neutralLighter": "#f3f2f1",
-                  "neutralLighterAlt": "#faf9f8",
-                  "neutralPrimary": "#323130",
-                  "neutralPrimaryAlt": "#3b3a39",
-                  "neutralQuaternary": "#d2d0ce",
-                  "neutralQuaternaryAlt": "#e1dfdd",
-                  "neutralSecondary": "#605e5c",
-                  "neutralSecondaryAlt": "#8a8886",
-                  "neutralTertiary": "#a19f9d",
-                  "neutralTertiaryAlt": "#c8c6c4",
-                  "orange": "#d83b01",
-                  "orangeLight": "#ea4300",
-                  "orangeLighter": "#ff8c00",
-                  "purple": "#5c2d91",
-                  "purpleDark": "#32145a",
-                  "purpleLight": "#b4a0ff",
-                  "red": "#e81123",
-                  "redDark": "#a4262c",
-                  "teal": "#008272",
-                  "tealDark": "#004b50",
-                  "tealLight": "#00b294",
-                  "themeDark": "#005a9e",
-                  "themeDarkAlt": "#106ebe",
-                  "themeDarker": "#004578",
-                  "themeLight": "#c7e0f4",
-                  "themeLighter": "#deecf9",
-                  "themeLighterAlt": "#eff6fc",
-                  "themePrimary": "#0078d4",
-                  "themeSecondary": "#2b88d8",
-                  "themeTertiary": "#71afe5",
-                  "white": "#ffffff",
-                  "whiteTranslucent40": "rgba(255,255,255,.4)",
-                  "yellow": "#ffb900",
-                  "yellowDark": "#d29200",
-                  "yellowLight": "#fff100",
-                },
-                "rtl": undefined,
-                "semanticColors": Object {
-                  "accentButtonBackground": "#0078d4",
-                  "accentButtonText": "#ffffff",
-                  "actionLink": "#323130",
-                  "actionLinkHovered": "#201f1e",
-                  "blockingBackground": "#FDE7E9",
-                  "blockingIcon": "#FDE7E9",
-                  "bodyBackground": "#ffffff",
-                  "bodyBackgroundChecked": "#edebe9",
-                  "bodyBackgroundHovered": "#f3f2f1",
-                  "bodyDivider": "#edebe9",
-                  "bodyFrameBackground": "#ffffff",
-                  "bodyFrameDivider": "#edebe9",
-                  "bodyStandoutBackground": "#faf9f8",
-                  "bodySubtext": "#605e5c",
-                  "bodyText": "#323130",
-                  "bodyTextChecked": "#000000",
-                  "buttonBackground": "#ffffff",
-                  "buttonBackgroundChecked": "#c8c6c4",
-                  "buttonBackgroundCheckedHovered": "#edebe9",
-                  "buttonBackgroundDisabled": "#f3f2f1",
-                  "buttonBackgroundHovered": "#f3f2f1",
-                  "buttonBackgroundPressed": "#edebe9",
-                  "buttonBorder": "#8a8886",
-                  "buttonBorderDisabled": "#f3f2f1",
-                  "buttonText": "#323130",
-                  "buttonTextChecked": "#201f1e",
-                  "buttonTextCheckedHovered": "#000000",
-                  "buttonTextDisabled": "#a19f9d",
-                  "buttonTextHovered": "#201f1e",
-                  "buttonTextPressed": "#201f1e",
-                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "cardStandoutBackground": "#ffffff",
-                  "defaultStateBackground": "#faf9f8",
-                  "disabledBackground": "#f3f2f1",
-                  "disabledBodySubtext": "#c8c6c4",
-                  "disabledBodyText": "#a19f9d",
-                  "disabledBorder": "#c8c6c4",
-                  "disabledSubtext": "#d2d0ce",
-                  "disabledText": "#a19f9d",
-                  "errorBackground": "#FDE7E9",
-                  "errorIcon": "#A80000",
-                  "errorText": "#a4262c",
-                  "focusBorder": "#605e5c",
-                  "infoBackground": "#f3f2f1",
-                  "infoIcon": "#605e5c",
-                  "inputBackground": "#ffffff",
-                  "inputBackgroundChecked": "#0078d4",
-                  "inputBackgroundCheckedHovered": "#005a9e",
-                  "inputBorder": "#605e5c",
-                  "inputBorderHovered": "#323130",
-                  "inputFocusBorderAlt": "#0078d4",
-                  "inputForegroundChecked": "#ffffff",
-                  "inputIcon": "#0078d4",
-                  "inputIconDisabled": "#a19f9d",
-                  "inputIconHovered": "#005a9e",
-                  "inputPlaceholderBackgroundChecked": "#deecf9",
-                  "inputPlaceholderText": "#605e5c",
-                  "inputText": "#323130",
-                  "inputTextHovered": "#201f1e",
-                  "link": "#0078d4",
-                  "linkHovered": "#004578",
-                  "listBackground": "#ffffff",
-                  "listHeaderBackgroundHovered": "#f3f2f1",
-                  "listHeaderBackgroundPressed": "#edebe9",
-                  "listItemBackgroundChecked": "#edebe9",
-                  "listItemBackgroundCheckedHovered": "#e1dfdd",
-                  "listItemBackgroundHovered": "#f3f2f1",
-                  "listText": "#323130",
-                  "listTextColor": "#323130",
-                  "menuBackground": "#ffffff",
-                  "menuDivider": "#c8c6c4",
-                  "menuHeader": "#0078d4",
-                  "menuIcon": "#0078d4",
-                  "menuItemBackgroundChecked": "#edebe9",
-                  "menuItemBackgroundHovered": "#f3f2f1",
-                  "menuItemBackgroundPressed": "#edebe9",
-                  "menuItemText": "#323130",
-                  "menuItemTextHovered": "#201f1e",
-                  "messageLink": "#005A9E",
-                  "messageLinkHovered": "#004578",
-                  "messageText": "#323130",
-                  "primaryButtonBackground": "#0078d4",
-                  "primaryButtonBackgroundDisabled": "#f3f2f1",
-                  "primaryButtonBackgroundHovered": "#106ebe",
-                  "primaryButtonBackgroundPressed": "#005a9e",
-                  "primaryButtonBorder": "transparent",
-                  "primaryButtonText": "#ffffff",
-                  "primaryButtonTextDisabled": "#d2d0ce",
-                  "primaryButtonTextHovered": "#ffffff",
-                  "primaryButtonTextPressed": "#ffffff",
-                  "severeWarningBackground": "#FED9CC",
-                  "severeWarningIcon": "#D83B01",
-                  "smallInputBorder": "#605e5c",
-                  "successBackground": "#DFF6DD",
-                  "successIcon": "#107C10",
-                  "successText": "#107C10",
-                  "variantBorder": "#edebe9",
-                  "variantBorderHovered": "#a19f9d",
-                  "warningBackground": "#FFF4CE",
-                  "warningHighlight": "#ffb900",
-                  "warningIcon": "#797775",
-                  "warningText": "#323130",
-                },
-                "spacing": Object {
-                  "l1": "20px",
-                  "l2": "32px",
-                  "m": "16px",
-                  "s1": "8px",
-                  "s2": "4px",
+                "fieldGroup": Object {
+                  "width": 300,
                 },
               }
             }
-            validateOnLoad={true}
           >
-            <div
-              className="ms-TextField ms-TextField--multiline root-107"
+            <TextFieldBase
+              deferredValidationTime={200}
+              id="deleteDatabaseFeedbackInput"
+              multiline={true}
+              onChange={[Function]}
+              resizable={true}
+              rows={3}
+              styles={[Function]}
+              theme={
+                Object {
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
+                  },
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
+                  },
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
+                  },
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
+                  },
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
+                  },
+                }
+              }
+              validateOnLoad={true}
             >
               <div
-                className="ms-TextField-wrapper"
+                className="ms-TextField ms-TextField--multiline root-107"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-127"
+                  className="ms-TextField-wrapper"
                 >
-                  <textarea
-                    aria-invalid={false}
-                    className="ms-TextField-field field-128"
-                    id="deleteDatabaseFeedbackInput"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    rows={3}
-                    value=""
-                  />
+                  <div
+                    className="ms-TextField-fieldGroup fieldGroup-127"
+                  >
+                    <textarea
+                      aria-invalid={false}
+                      className="ms-TextField-field field-128"
+                      id="deleteDatabaseFeedbackInput"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onInput={[Function]}
+                      rows={3}
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </TextFieldBase>
-        </StyledTextFieldBase>
+            </TextFieldBase>
+          </StyledTextFieldBase>
+        </div>
       </div>
-    </div>
-    <PanelFooterComponent
-      buttonLabel="OK"
-    >
-      <div
-        className="panelFooter"
+      <PanelFooterComponent
+        buttonLabel="OK"
       >
-        <CustomizedPrimaryButton
-          ariaLabel="OK"
-          id="sidePanelOkButton"
-          text="OK"
-          type="submit"
+        <div
+          className="panelFooter"
         >
-          <PrimaryButton
+          <CustomizedPrimaryButton
             ariaLabel="OK"
             id="sidePanelOkButton"
             text="OK"
-            theme={
-              Object {
-                "disableGlobalClassNames": false,
-                "effects": Object {
-                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "roundedCorner2": "2px",
-                  "roundedCorner4": "4px",
-                  "roundedCorner6": "6px",
-                },
-                "fonts": Object {
-                  "large": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "18px",
-                    "fontWeight": 400,
-                  },
-                  "medium": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "14px",
-                    "fontWeight": 400,
-                  },
-                  "mediumPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "16px",
-                    "fontWeight": 400,
-                  },
-                  "mega": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "68px",
-                    "fontWeight": 600,
-                  },
-                  "small": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "smallPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "superLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "42px",
-                    "fontWeight": 600,
-                  },
-                  "tiny": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "20px",
-                    "fontWeight": 600,
-                  },
-                  "xLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "24px",
-                    "fontWeight": 600,
-                  },
-                  "xSmall": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xxLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "28px",
-                    "fontWeight": 600,
-                  },
-                  "xxLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "32px",
-                    "fontWeight": 600,
-                  },
-                },
-                "isInverted": false,
-                "palette": Object {
-                  "accent": "#0078d4",
-                  "black": "#000000",
-                  "blackTranslucent40": "rgba(0,0,0,.4)",
-                  "blue": "#0078d4",
-                  "blueDark": "#002050",
-                  "blueLight": "#00bcf2",
-                  "blueMid": "#00188f",
-                  "green": "#107c10",
-                  "greenDark": "#004b1c",
-                  "greenLight": "#bad80a",
-                  "magenta": "#b4009e",
-                  "magentaDark": "#5c005c",
-                  "magentaLight": "#e3008c",
-                  "neutralDark": "#201f1e",
-                  "neutralLight": "#edebe9",
-                  "neutralLighter": "#f3f2f1",
-                  "neutralLighterAlt": "#faf9f8",
-                  "neutralPrimary": "#323130",
-                  "neutralPrimaryAlt": "#3b3a39",
-                  "neutralQuaternary": "#d2d0ce",
-                  "neutralQuaternaryAlt": "#e1dfdd",
-                  "neutralSecondary": "#605e5c",
-                  "neutralSecondaryAlt": "#8a8886",
-                  "neutralTertiary": "#a19f9d",
-                  "neutralTertiaryAlt": "#c8c6c4",
-                  "orange": "#d83b01",
-                  "orangeLight": "#ea4300",
-                  "orangeLighter": "#ff8c00",
-                  "purple": "#5c2d91",
-                  "purpleDark": "#32145a",
-                  "purpleLight": "#b4a0ff",
-                  "red": "#e81123",
-                  "redDark": "#a4262c",
-                  "teal": "#008272",
-                  "tealDark": "#004b50",
-                  "tealLight": "#00b294",
-                  "themeDark": "#005a9e",
-                  "themeDarkAlt": "#106ebe",
-                  "themeDarker": "#004578",
-                  "themeLight": "#c7e0f4",
-                  "themeLighter": "#deecf9",
-                  "themeLighterAlt": "#eff6fc",
-                  "themePrimary": "#0078d4",
-                  "themeSecondary": "#2b88d8",
-                  "themeTertiary": "#71afe5",
-                  "white": "#ffffff",
-                  "whiteTranslucent40": "rgba(255,255,255,.4)",
-                  "yellow": "#ffb900",
-                  "yellowDark": "#d29200",
-                  "yellowLight": "#fff100",
-                },
-                "rtl": undefined,
-                "semanticColors": Object {
-                  "accentButtonBackground": "#0078d4",
-                  "accentButtonText": "#ffffff",
-                  "actionLink": "#323130",
-                  "actionLinkHovered": "#201f1e",
-                  "blockingBackground": "#FDE7E9",
-                  "blockingIcon": "#FDE7E9",
-                  "bodyBackground": "#ffffff",
-                  "bodyBackgroundChecked": "#edebe9",
-                  "bodyBackgroundHovered": "#f3f2f1",
-                  "bodyDivider": "#edebe9",
-                  "bodyFrameBackground": "#ffffff",
-                  "bodyFrameDivider": "#edebe9",
-                  "bodyStandoutBackground": "#faf9f8",
-                  "bodySubtext": "#605e5c",
-                  "bodyText": "#323130",
-                  "bodyTextChecked": "#000000",
-                  "buttonBackground": "#ffffff",
-                  "buttonBackgroundChecked": "#c8c6c4",
-                  "buttonBackgroundCheckedHovered": "#edebe9",
-                  "buttonBackgroundDisabled": "#f3f2f1",
-                  "buttonBackgroundHovered": "#f3f2f1",
-                  "buttonBackgroundPressed": "#edebe9",
-                  "buttonBorder": "#8a8886",
-                  "buttonBorderDisabled": "#f3f2f1",
-                  "buttonText": "#323130",
-                  "buttonTextChecked": "#201f1e",
-                  "buttonTextCheckedHovered": "#000000",
-                  "buttonTextDisabled": "#a19f9d",
-                  "buttonTextHovered": "#201f1e",
-                  "buttonTextPressed": "#201f1e",
-                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "cardStandoutBackground": "#ffffff",
-                  "defaultStateBackground": "#faf9f8",
-                  "disabledBackground": "#f3f2f1",
-                  "disabledBodySubtext": "#c8c6c4",
-                  "disabledBodyText": "#a19f9d",
-                  "disabledBorder": "#c8c6c4",
-                  "disabledSubtext": "#d2d0ce",
-                  "disabledText": "#a19f9d",
-                  "errorBackground": "#FDE7E9",
-                  "errorIcon": "#A80000",
-                  "errorText": "#a4262c",
-                  "focusBorder": "#605e5c",
-                  "infoBackground": "#f3f2f1",
-                  "infoIcon": "#605e5c",
-                  "inputBackground": "#ffffff",
-                  "inputBackgroundChecked": "#0078d4",
-                  "inputBackgroundCheckedHovered": "#005a9e",
-                  "inputBorder": "#605e5c",
-                  "inputBorderHovered": "#323130",
-                  "inputFocusBorderAlt": "#0078d4",
-                  "inputForegroundChecked": "#ffffff",
-                  "inputIcon": "#0078d4",
-                  "inputIconDisabled": "#a19f9d",
-                  "inputIconHovered": "#005a9e",
-                  "inputPlaceholderBackgroundChecked": "#deecf9",
-                  "inputPlaceholderText": "#605e5c",
-                  "inputText": "#323130",
-                  "inputTextHovered": "#201f1e",
-                  "link": "#0078d4",
-                  "linkHovered": "#004578",
-                  "listBackground": "#ffffff",
-                  "listHeaderBackgroundHovered": "#f3f2f1",
-                  "listHeaderBackgroundPressed": "#edebe9",
-                  "listItemBackgroundChecked": "#edebe9",
-                  "listItemBackgroundCheckedHovered": "#e1dfdd",
-                  "listItemBackgroundHovered": "#f3f2f1",
-                  "listText": "#323130",
-                  "listTextColor": "#323130",
-                  "menuBackground": "#ffffff",
-                  "menuDivider": "#c8c6c4",
-                  "menuHeader": "#0078d4",
-                  "menuIcon": "#0078d4",
-                  "menuItemBackgroundChecked": "#edebe9",
-                  "menuItemBackgroundHovered": "#f3f2f1",
-                  "menuItemBackgroundPressed": "#edebe9",
-                  "menuItemText": "#323130",
-                  "menuItemTextHovered": "#201f1e",
-                  "messageLink": "#005A9E",
-                  "messageLinkHovered": "#004578",
-                  "messageText": "#323130",
-                  "primaryButtonBackground": "#0078d4",
-                  "primaryButtonBackgroundDisabled": "#f3f2f1",
-                  "primaryButtonBackgroundHovered": "#106ebe",
-                  "primaryButtonBackgroundPressed": "#005a9e",
-                  "primaryButtonBorder": "transparent",
-                  "primaryButtonText": "#ffffff",
-                  "primaryButtonTextDisabled": "#d2d0ce",
-                  "primaryButtonTextHovered": "#ffffff",
-                  "primaryButtonTextPressed": "#ffffff",
-                  "severeWarningBackground": "#FED9CC",
-                  "severeWarningIcon": "#D83B01",
-                  "smallInputBorder": "#605e5c",
-                  "successBackground": "#DFF6DD",
-                  "successIcon": "#107C10",
-                  "successText": "#107C10",
-                  "variantBorder": "#edebe9",
-                  "variantBorderHovered": "#a19f9d",
-                  "warningBackground": "#FFF4CE",
-                  "warningHighlight": "#ffb900",
-                  "warningIcon": "#797775",
-                  "warningText": "#323130",
-                },
-                "spacing": Object {
-                  "l1": "20px",
-                  "l2": "32px",
-                  "m": "16px",
-                  "s1": "8px",
-                  "s2": "4px",
-                },
-              }
-            }
             type="submit"
           >
-            <CustomizedDefaultButton
+            <PrimaryButton
               ariaLabel="OK"
               id="sidePanelOkButton"
-              onRenderDescription={[Function]}
-              primary={true}
               text="OK"
               theme={
                 Object {
@@ -2527,7 +1408,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               }
               type="submit"
             >
-              <DefaultButton
+              <CustomizedDefaultButton
                 ariaLabel="OK"
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -2808,584 +1689,11 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 }
                 type="submit"
               >
-                <BaseButton
+                <DefaultButton
                   ariaLabel="OK"
-                  baseClassName="ms-Button"
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
-                  split={false}
-                  styles={
-                    Object {
-                      "description": Object {
-                        "display": "block",
-                      },
-                      "flexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "icon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "16px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "iconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "label": Array [
-                        Object {
-                          "display": "block",
-                          "lineHeight": "100%",
-                          "margin": "0 4px",
-                        },
-                        Object {
-                          "fontWeight": 600,
-                        },
-                      ],
-                      "menuIcon": Object {
-                        "flexShrink": 0,
-                        "fontSize": "12px",
-                        "height": "16px",
-                        "lineHeight": "16px",
-                        "margin": "0 4px",
-                        "textAlign": "center",
-                      },
-                      "menuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "root": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "MozOsxFontSmoothing": "grayscale",
-                          "WebkitFontSmoothing": "antialiased",
-                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                          "fontSize": "14px",
-                          "fontWeight": 400,
-                        },
-                        Object {
-                          "border": "1px solid #8a8886",
-                          "borderRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "padding": "0 16px",
-                          "selectors": Object {
-                            ":active > *": Object {
-                              "left": 0,
-                              "position": "relative",
-                              "top": 0,
-                            },
-                          },
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                        },
-                        Object {
-                          "height": "32px",
-                          "minWidth": "80px",
-                        },
-                        Object {
-                          "backgroundColor": "#0078d4",
-                          "border": "1px solid #0078d4",
-                          "color": "#ffffff",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus": Object {
-                              "selectors": Object {
-                                ":after": Object {
-                                  "border": "none",
-                                  "outlineColor": "#ffffff",
-                                },
-                              },
-                            },
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "MsHighContrastAdjust": "none",
-                              "backgroundColor": "WindowText",
-                              "borderColor": "WindowText",
-                              "color": "Window",
-                              "forcedColorAdjust": "none",
-                            },
-                          },
-                        },
-                      ],
-                      "rootChecked": Object {
-                        "backgroundColor": "#005a9e",
-                        "color": "#ffffff",
-                      },
-                      "rootCheckedHovered": Object {
-                        "backgroundColor": "#005a9e",
-                        "color": "#ffffff",
-                      },
-                      "rootDisabled": Array [
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid transparent",
-                              "bottom": 2,
-                              "content": "\\"\\"",
-                              "left": 2,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 2,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "outlineColor": "ButtonText",
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 2,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "borderColor": "#f3f2f1",
-                          "color": "#a19f9d",
-                          "cursor": "default",
-                          "selectors": Object {
-                            ":focus": Object {
-                              "outline": 0,
-                            },
-                            ":hover": Object {
-                              "outline": 0,
-                            },
-                          },
-                        },
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "color": "#d2d0ce",
-                          "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "backgroundColor": "Window",
-                              "borderColor": "GrayText",
-                              "color": "GrayText",
-                            },
-                          },
-                        },
-                      ],
-                      "rootExpanded": Object {
-                        "backgroundColor": "#005a9e",
-                        "color": "#ffffff",
-                      },
-                      "rootHovered": Object {
-                        "backgroundColor": "#106ebe",
-                        "border": "1px solid #106ebe",
-                        "color": "#ffffff",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "Highlight",
-                            "borderColor": "Highlight",
-                            "color": "Window",
-                          },
-                        },
-                      },
-                      "rootPressed": Object {
-                        "backgroundColor": "#005a9e",
-                        "border": "1px solid #005a9e",
-                        "color": "#ffffff",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "WindowText",
-                            "borderColor": "WindowText",
-                            "color": "Window",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "screenReaderText": Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "width": 1,
-                      },
-                      "splitButtonContainer": Array [
-                        Object {
-                          "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "border": "none",
-                            },
-                          },
-                        },
-                        Object {
-                          "outline": "transparent",
-                          "position": "relative",
-                          "selectors": Object {
-                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                              "border": "1px solid #ffffff",
-                              "bottom": 3,
-                              "content": "\\"\\"",
-                              "left": 3,
-                              "outline": "1px solid #605e5c",
-                              "position": "absolute",
-                              "right": 3,
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "none",
-                                  "bottom": -2,
-                                  "left": -2,
-                                  "right": -2,
-                                  "top": -2,
-                                },
-                              },
-                              "top": 3,
-                              "zIndex": 1,
-                            },
-                            "::-moz-focus-inner": Object {
-                              "border": "0",
-                            },
-                          },
-                        },
-                        Object {
-                          "display": "inline-flex",
-                          "selectors": Object {
-                            ".ms-Button--default": Object {
-                              "borderBottomRightRadius": "0",
-                              "borderRight": "none",
-                              "borderTopRightRadius": "0",
-                            },
-                            ".ms-Button--primary": Object {
-                              "border": "none",
-                              "borderBottomRightRadius": "0",
-                              "borderTopRightRadius": "0",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "MsHighContrastAdjust": "none",
-                                  "backgroundColor": "Window",
-                                  "border": "1px solid WindowText",
-                                  "borderRightWidth": "0",
-                                  "color": "WindowText",
-                                  "forcedColorAdjust": "none",
-                                },
-                              },
-                            },
-                            ".ms-Button--primary + .ms-Button": Object {
-                              "border": "none",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "border": "1px solid WindowText",
-                                  "borderLeftWidth": "0",
-                                },
-                              },
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonContainerChecked": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerCheckedHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "MsHighContrastAdjust": "none",
-                                "backgroundColor": "WindowText",
-                                "color": "Window",
-                                "forcedColorAdjust": "none",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonContainerDisabled": Object {
-                        "border": "none",
-                        "outline": "none",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "MsHighContrastAdjust": "none",
-                            "backgroundColor": "Window",
-                            "borderColor": "GrayText",
-                            "color": "GrayText",
-                            "forcedColorAdjust": "none",
-                          },
-                        },
-                      },
-                      "splitButtonContainerFocused": Object {
-                        "outline": "none!important",
-                      },
-                      "splitButtonContainerHovered": Object {
-                        "selectors": Object {
-                          ".ms-Button--primary": Object {
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Highlight",
-                                "color": "Window",
-                              },
-                            },
-                          },
-                          ".ms-Button.is-disabled": Object {
-                            "color": "#a19f9d",
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Window",
-                                "borderColor": "GrayText",
-                                "color": "GrayText",
-                              },
-                            },
-                          },
-                        },
-                      },
-                      "splitButtonDivider": Array [
-                        Object {
-                          "backgroundColor": "#ffffff",
-                          "bottom": 8,
-                          "position": "absolute",
-                          "right": 31,
-                          "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "backgroundColor": "Window",
-                            },
-                          },
-                          "top": 8,
-                          "width": 1,
-                        },
-                        Object {
-                          "bottom": 8,
-                          "position": "absolute",
-                          "right": 31,
-                          "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "backgroundColor": "WindowText",
-                            },
-                          },
-                          "top": 8,
-                          "width": 1,
-                        },
-                      ],
-                      "splitButtonDividerDisabled": Object {
-                        "bottom": 8,
-                        "position": "absolute",
-                        "right": 31,
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "backgroundColor": "GrayText",
-                          },
-                        },
-                        "top": 8,
-                        "width": 1,
-                      },
-                      "splitButtonFlexContainer": Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexWrap": "nowrap",
-                        "height": "100%",
-                        "justifyContent": "center",
-                      },
-                      "splitButtonMenuButton": Array [
-                        Object {
-                          "backgroundColor": "#0078d4",
-                          "color": "#ffffff",
-                          "selectors": Object {
-                            ":hover": Object {
-                              "backgroundColor": "#106ebe",
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "Highlight",
-                                },
-                              },
-                            },
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "backgroundColor": "WindowText",
-                            },
-                          },
-                        },
-                        Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            ".ms-Button-menuIcon": Object {
-                              "color": "WindowText",
-                            },
-                          },
-                          "border": "1px solid #8a8886",
-                          "borderBottomRightRadius": "2px",
-                          "borderLeft": "none",
-                          "borderRadius": 0,
-                          "borderTopRightRadius": "2px",
-                          "boxSizing": "border-box",
-                          "cursor": "pointer",
-                          "display": "inline-block",
-                          "height": "auto",
-                          "marginBottom": 0,
-                          "marginLeft": -1,
-                          "marginRight": 0,
-                          "marginTop": 0,
-                          "outline": "transparent",
-                          "padding": 6,
-                          "textAlign": "center",
-                          "textDecoration": "none",
-                          "userSelect": "none",
-                          "verticalAlign": "top",
-                          "width": 32,
-                        },
-                      ],
-                      "splitButtonMenuButtonChecked": Object {
-                        "backgroundColor": "#005a9e",
-                        "selectors": Object {
-                          ":hover": Object {
-                            "backgroundColor": "#005a9e",
-                          },
-                        },
-                      },
-                      "splitButtonMenuButtonDisabled": Array [
-                        Object {
-                          "backgroundColor": "#f3f2f1",
-                          "selectors": Object {
-                            ":hover": Object {
-                              "backgroundColor": "#f3f2f1",
-                            },
-                          },
-                        },
-                        Object {
-                          "border": "none",
-                          "pointerEvents": "none",
-                          "selectors": Object {
-                            ".ms-Button--primary": Object {
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "backgroundColor": "Window",
-                                  "borderColor": "GrayText",
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            ".ms-Button-menuIcon": Object {
-                              "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                  "color": "GrayText",
-                                },
-                              },
-                            },
-                            ":hover": Object {
-                              "cursor": "default",
-                            },
-                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                              "backgroundColor": "Window",
-                              "border": "1px solid GrayText",
-                              "color": "GrayText",
-                            },
-                          },
-                        },
-                      ],
-                      "splitButtonMenuButtonExpanded": Object {
-                        "backgroundColor": "#005a9e",
-                        "selectors": Object {
-                          ":hover": Object {
-                            "backgroundColor": "#005a9e",
-                          },
-                        },
-                      },
-                      "splitButtonMenuFocused": Object {
-                        "outline": "transparent",
-                        "position": "relative",
-                        "selectors": Object {
-                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                            "border": "1px solid #ffffff",
-                            "bottom": 3,
-                            "content": "\\"\\"",
-                            "left": 3,
-                            "outline": "1px solid #605e5c",
-                            "position": "absolute",
-                            "right": 3,
-                            "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "border": "none",
-                                "bottom": -2,
-                                "left": -2,
-                                "right": -2,
-                                "top": -2,
-                              },
-                            },
-                            "top": 3,
-                            "zIndex": 1,
-                          },
-                          "::-moz-focus-inner": Object {
-                            "border": "0",
-                          },
-                        },
-                      },
-                      "splitButtonMenuIcon": Object {
-                        "color": "#ffffff",
-                      },
-                      "splitButtonMenuIconDisabled": Object {
-                        "color": "#a19f9d",
-                        "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                            "color": "GrayText",
-                          },
-                        },
-                      },
-                      "textContainer": Object {
-                        "display": "block",
-                        "flexGrow": 1,
-                      },
-                    }
-                  }
                   text="OK"
                   theme={
                     Object {
@@ -3661,46 +1969,901 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                     }
                   }
                   type="submit"
-                  variantClassName="ms-Button--primary"
                 >
-                  <button
-                    aria-label="OK"
-                    className="ms-Button ms-Button--primary root-118"
-                    data-is-focusable={true}
+                  <BaseButton
+                    ariaLabel="OK"
+                    baseClassName="ms-Button"
                     id="sidePanelOkButton"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
+                    onRenderDescription={[Function]}
+                    primary={true}
+                    split={false}
+                    styles={
+                      Object {
+                        "description": Object {
+                          "display": "block",
+                        },
+                        "flexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "icon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "16px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "iconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "label": Array [
+                          Object {
+                            "display": "block",
+                            "lineHeight": "100%",
+                            "margin": "0 4px",
+                          },
+                          Object {
+                            "fontWeight": 600,
+                          },
+                        ],
+                        "menuIcon": Object {
+                          "flexShrink": 0,
+                          "fontSize": "12px",
+                          "height": "16px",
+                          "lineHeight": "16px",
+                          "margin": "0 4px",
+                          "textAlign": "center",
+                        },
+                        "menuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "root": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          Object {
+                            "border": "1px solid #8a8886",
+                            "borderRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "padding": "0 16px",
+                            "selectors": Object {
+                              ":active > *": Object {
+                                "left": 0,
+                                "position": "relative",
+                                "top": 0,
+                              },
+                            },
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                          },
+                          Object {
+                            "height": "32px",
+                            "minWidth": "80px",
+                          },
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "border": "1px solid #0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus": Object {
+                                "selectors": Object {
+                                  ":after": Object {
+                                    "border": "none",
+                                    "outlineColor": "#ffffff",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "WindowText",
+                                "borderColor": "WindowText",
+                                "color": "Window",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                        ],
+                        "rootChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootCheckedHovered": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootDisabled": Array [
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid transparent",
+                                "bottom": 2,
+                                "content": "\\"\\"",
+                                "left": 2,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 2,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "outlineColor": "ButtonText",
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 2,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "borderColor": "#f3f2f1",
+                            "color": "#a19f9d",
+                            "cursor": "default",
+                            "selectors": Object {
+                              ":focus": Object {
+                                "outline": 0,
+                              },
+                              ":hover": Object {
+                                "outline": 0,
+                              },
+                            },
+                          },
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "color": "#d2d0ce",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "borderColor": "GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "rootExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "color": "#ffffff",
+                        },
+                        "rootHovered": Object {
+                          "backgroundColor": "#106ebe",
+                          "border": "1px solid #106ebe",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "borderColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        "rootPressed": Object {
+                          "backgroundColor": "#005a9e",
+                          "border": "1px solid #005a9e",
+                          "color": "#ffffff",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "borderColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "screenReaderText": Object {
+                          "border": 0,
+                          "height": 1,
+                          "margin": -1,
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "absolute",
+                          "width": 1,
+                        },
+                        "splitButtonContainer": Array [
+                          Object {
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                              },
+                            },
+                          },
+                          Object {
+                            "outline": "transparent",
+                            "position": "relative",
+                            "selectors": Object {
+                              ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                "border": "1px solid #ffffff",
+                                "bottom": 3,
+                                "content": "\\"\\"",
+                                "left": 3,
+                                "outline": "1px solid #605e5c",
+                                "position": "absolute",
+                                "right": 3,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                    "bottom": -2,
+                                    "left": -2,
+                                    "right": -2,
+                                    "top": -2,
+                                  },
+                                },
+                                "top": 3,
+                                "zIndex": 1,
+                              },
+                              "::-moz-focus-inner": Object {
+                                "border": "0",
+                              },
+                            },
+                          },
+                          Object {
+                            "display": "inline-flex",
+                            "selectors": Object {
+                              ".ms-Button--default": Object {
+                                "borderBottomRightRadius": "0",
+                                "borderRight": "none",
+                                "borderTopRightRadius": "0",
+                              },
+                              ".ms-Button--primary": Object {
+                                "border": "none",
+                                "borderBottomRightRadius": "0",
+                                "borderTopRightRadius": "0",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid WindowText",
+                                    "borderRightWidth": "0",
+                                    "color": "WindowText",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                              ".ms-Button--primary + .ms-Button": Object {
+                                "border": "none",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "1px solid WindowText",
+                                    "borderLeftWidth": "0",
+                                  },
+                                },
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonContainerChecked": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerCheckedHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonContainerDisabled": Object {
+                          "border": "none",
+                          "outline": "none",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                        "splitButtonContainerFocused": Object {
+                          "outline": "none!important",
+                        },
+                        "splitButtonContainerHovered": Object {
+                          "selectors": Object {
+                            ".ms-Button--primary": Object {
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            ".ms-Button.is-disabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                          },
+                        },
+                        "splitButtonDivider": Array [
+                          Object {
+                            "backgroundColor": "#ffffff",
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                          Object {
+                            "bottom": 8,
+                            "position": "absolute",
+                            "right": 31,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                            "top": 8,
+                            "width": 1,
+                          },
+                        ],
+                        "splitButtonDividerDisabled": Object {
+                          "bottom": 8,
+                          "position": "absolute",
+                          "right": 31,
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "GrayText",
+                            },
+                          },
+                          "top": 8,
+                          "width": 1,
+                        },
+                        "splitButtonFlexContainer": Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexWrap": "nowrap",
+                          "height": "100%",
+                          "justifyContent": "center",
+                        },
+                        "splitButtonMenuButton": Array [
+                          Object {
+                            "backgroundColor": "#0078d4",
+                            "color": "#ffffff",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#106ebe",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "Highlight",
+                                  },
+                                },
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "WindowText",
+                              },
+                            },
+                          },
+                          Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              ".ms-Button-menuIcon": Object {
+                                "color": "WindowText",
+                              },
+                            },
+                            "border": "1px solid #8a8886",
+                            "borderBottomRightRadius": "2px",
+                            "borderLeft": "none",
+                            "borderRadius": 0,
+                            "borderTopRightRadius": "2px",
+                            "boxSizing": "border-box",
+                            "cursor": "pointer",
+                            "display": "inline-block",
+                            "height": "auto",
+                            "marginBottom": 0,
+                            "marginLeft": -1,
+                            "marginRight": 0,
+                            "marginTop": 0,
+                            "outline": "transparent",
+                            "padding": 6,
+                            "textAlign": "center",
+                            "textDecoration": "none",
+                            "userSelect": "none",
+                            "verticalAlign": "top",
+                            "width": 32,
+                          },
+                        ],
+                        "splitButtonMenuButtonChecked": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuButtonDisabled": Array [
+                          Object {
+                            "backgroundColor": "#f3f2f1",
+                            "selectors": Object {
+                              ":hover": Object {
+                                "backgroundColor": "#f3f2f1",
+                              },
+                            },
+                          },
+                          Object {
+                            "border": "none",
+                            "pointerEvents": "none",
+                            "selectors": Object {
+                              ".ms-Button--primary": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ".ms-Button-menuIcon": Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                              ":hover": Object {
+                                "cursor": "default",
+                              },
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "backgroundColor": "Window",
+                                "border": "1px solid GrayText",
+                                "color": "GrayText",
+                              },
+                            },
+                          },
+                        ],
+                        "splitButtonMenuButtonExpanded": Object {
+                          "backgroundColor": "#005a9e",
+                          "selectors": Object {
+                            ":hover": Object {
+                              "backgroundColor": "#005a9e",
+                            },
+                          },
+                        },
+                        "splitButtonMenuFocused": Object {
+                          "outline": "transparent",
+                          "position": "relative",
+                          "selectors": Object {
+                            ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                              "border": "1px solid #ffffff",
+                              "bottom": 3,
+                              "content": "\\"\\"",
+                              "left": 3,
+                              "outline": "1px solid #605e5c",
+                              "position": "absolute",
+                              "right": 3,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "border": "none",
+                                  "bottom": -2,
+                                  "left": -2,
+                                  "right": -2,
+                                  "top": -2,
+                                },
+                              },
+                              "top": 3,
+                              "zIndex": 1,
+                            },
+                            "::-moz-focus-inner": Object {
+                              "border": "0",
+                            },
+                          },
+                        },
+                        "splitButtonMenuIcon": Object {
+                          "color": "#ffffff",
+                        },
+                        "splitButtonMenuIconDisabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        "textContainer": Object {
+                          "display": "block",
+                          "flexGrow": 1,
+                        },
+                      }
+                    }
+                    text="OK"
+                    theme={
+                      Object {
+                        "disableGlobalClassNames": false,
+                        "effects": Object {
+                          "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                          "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "roundedCorner2": "2px",
+                          "roundedCorner4": "4px",
+                          "roundedCorner6": "6px",
+                        },
+                        "fonts": Object {
+                          "large": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "18px",
+                            "fontWeight": 400,
+                          },
+                          "medium": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "14px",
+                            "fontWeight": 400,
+                          },
+                          "mediumPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "16px",
+                            "fontWeight": 400,
+                          },
+                          "mega": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "68px",
+                            "fontWeight": 600,
+                          },
+                          "small": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "smallPlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "12px",
+                            "fontWeight": 400,
+                          },
+                          "superLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "42px",
+                            "fontWeight": 600,
+                          },
+                          "tiny": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "20px",
+                            "fontWeight": 600,
+                          },
+                          "xLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "24px",
+                            "fontWeight": 600,
+                          },
+                          "xSmall": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "10px",
+                            "fontWeight": 400,
+                          },
+                          "xxLarge": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "28px",
+                            "fontWeight": 600,
+                          },
+                          "xxLargePlus": Object {
+                            "MozOsxFontSmoothing": "grayscale",
+                            "WebkitFontSmoothing": "antialiased",
+                            "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                            "fontSize": "32px",
+                            "fontWeight": 600,
+                          },
+                        },
+                        "isInverted": false,
+                        "palette": Object {
+                          "accent": "#0078d4",
+                          "black": "#000000",
+                          "blackTranslucent40": "rgba(0,0,0,.4)",
+                          "blue": "#0078d4",
+                          "blueDark": "#002050",
+                          "blueLight": "#00bcf2",
+                          "blueMid": "#00188f",
+                          "green": "#107c10",
+                          "greenDark": "#004b1c",
+                          "greenLight": "#bad80a",
+                          "magenta": "#b4009e",
+                          "magentaDark": "#5c005c",
+                          "magentaLight": "#e3008c",
+                          "neutralDark": "#201f1e",
+                          "neutralLight": "#edebe9",
+                          "neutralLighter": "#f3f2f1",
+                          "neutralLighterAlt": "#faf9f8",
+                          "neutralPrimary": "#323130",
+                          "neutralPrimaryAlt": "#3b3a39",
+                          "neutralQuaternary": "#d2d0ce",
+                          "neutralQuaternaryAlt": "#e1dfdd",
+                          "neutralSecondary": "#605e5c",
+                          "neutralSecondaryAlt": "#8a8886",
+                          "neutralTertiary": "#a19f9d",
+                          "neutralTertiaryAlt": "#c8c6c4",
+                          "orange": "#d83b01",
+                          "orangeLight": "#ea4300",
+                          "orangeLighter": "#ff8c00",
+                          "purple": "#5c2d91",
+                          "purpleDark": "#32145a",
+                          "purpleLight": "#b4a0ff",
+                          "red": "#e81123",
+                          "redDark": "#a4262c",
+                          "teal": "#008272",
+                          "tealDark": "#004b50",
+                          "tealLight": "#00b294",
+                          "themeDark": "#005a9e",
+                          "themeDarkAlt": "#106ebe",
+                          "themeDarker": "#004578",
+                          "themeLight": "#c7e0f4",
+                          "themeLighter": "#deecf9",
+                          "themeLighterAlt": "#eff6fc",
+                          "themePrimary": "#0078d4",
+                          "themeSecondary": "#2b88d8",
+                          "themeTertiary": "#71afe5",
+                          "white": "#ffffff",
+                          "whiteTranslucent40": "rgba(255,255,255,.4)",
+                          "yellow": "#ffb900",
+                          "yellowDark": "#d29200",
+                          "yellowLight": "#fff100",
+                        },
+                        "rtl": undefined,
+                        "semanticColors": Object {
+                          "accentButtonBackground": "#0078d4",
+                          "accentButtonText": "#ffffff",
+                          "actionLink": "#323130",
+                          "actionLinkHovered": "#201f1e",
+                          "blockingBackground": "#FDE7E9",
+                          "blockingIcon": "#FDE7E9",
+                          "bodyBackground": "#ffffff",
+                          "bodyBackgroundChecked": "#edebe9",
+                          "bodyBackgroundHovered": "#f3f2f1",
+                          "bodyDivider": "#edebe9",
+                          "bodyFrameBackground": "#ffffff",
+                          "bodyFrameDivider": "#edebe9",
+                          "bodyStandoutBackground": "#faf9f8",
+                          "bodySubtext": "#605e5c",
+                          "bodyText": "#323130",
+                          "bodyTextChecked": "#000000",
+                          "buttonBackground": "#ffffff",
+                          "buttonBackgroundChecked": "#c8c6c4",
+                          "buttonBackgroundCheckedHovered": "#edebe9",
+                          "buttonBackgroundDisabled": "#f3f2f1",
+                          "buttonBackgroundHovered": "#f3f2f1",
+                          "buttonBackgroundPressed": "#edebe9",
+                          "buttonBorder": "#8a8886",
+                          "buttonBorderDisabled": "#f3f2f1",
+                          "buttonText": "#323130",
+                          "buttonTextChecked": "#201f1e",
+                          "buttonTextCheckedHovered": "#000000",
+                          "buttonTextDisabled": "#a19f9d",
+                          "buttonTextHovered": "#201f1e",
+                          "buttonTextPressed": "#201f1e",
+                          "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                          "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                          "cardStandoutBackground": "#ffffff",
+                          "defaultStateBackground": "#faf9f8",
+                          "disabledBackground": "#f3f2f1",
+                          "disabledBodySubtext": "#c8c6c4",
+                          "disabledBodyText": "#a19f9d",
+                          "disabledBorder": "#c8c6c4",
+                          "disabledSubtext": "#d2d0ce",
+                          "disabledText": "#a19f9d",
+                          "errorBackground": "#FDE7E9",
+                          "errorIcon": "#A80000",
+                          "errorText": "#a4262c",
+                          "focusBorder": "#605e5c",
+                          "infoBackground": "#f3f2f1",
+                          "infoIcon": "#605e5c",
+                          "inputBackground": "#ffffff",
+                          "inputBackgroundChecked": "#0078d4",
+                          "inputBackgroundCheckedHovered": "#005a9e",
+                          "inputBorder": "#605e5c",
+                          "inputBorderHovered": "#323130",
+                          "inputFocusBorderAlt": "#0078d4",
+                          "inputForegroundChecked": "#ffffff",
+                          "inputIcon": "#0078d4",
+                          "inputIconDisabled": "#a19f9d",
+                          "inputIconHovered": "#005a9e",
+                          "inputPlaceholderBackgroundChecked": "#deecf9",
+                          "inputPlaceholderText": "#605e5c",
+                          "inputText": "#323130",
+                          "inputTextHovered": "#201f1e",
+                          "link": "#0078d4",
+                          "linkHovered": "#004578",
+                          "listBackground": "#ffffff",
+                          "listHeaderBackgroundHovered": "#f3f2f1",
+                          "listHeaderBackgroundPressed": "#edebe9",
+                          "listItemBackgroundChecked": "#edebe9",
+                          "listItemBackgroundCheckedHovered": "#e1dfdd",
+                          "listItemBackgroundHovered": "#f3f2f1",
+                          "listText": "#323130",
+                          "listTextColor": "#323130",
+                          "menuBackground": "#ffffff",
+                          "menuDivider": "#c8c6c4",
+                          "menuHeader": "#0078d4",
+                          "menuIcon": "#0078d4",
+                          "menuItemBackgroundChecked": "#edebe9",
+                          "menuItemBackgroundHovered": "#f3f2f1",
+                          "menuItemBackgroundPressed": "#edebe9",
+                          "menuItemText": "#323130",
+                          "menuItemTextHovered": "#201f1e",
+                          "messageLink": "#005A9E",
+                          "messageLinkHovered": "#004578",
+                          "messageText": "#323130",
+                          "primaryButtonBackground": "#0078d4",
+                          "primaryButtonBackgroundDisabled": "#f3f2f1",
+                          "primaryButtonBackgroundHovered": "#106ebe",
+                          "primaryButtonBackgroundPressed": "#005a9e",
+                          "primaryButtonBorder": "transparent",
+                          "primaryButtonText": "#ffffff",
+                          "primaryButtonTextDisabled": "#d2d0ce",
+                          "primaryButtonTextHovered": "#ffffff",
+                          "primaryButtonTextPressed": "#ffffff",
+                          "severeWarningBackground": "#FED9CC",
+                          "severeWarningIcon": "#D83B01",
+                          "smallInputBorder": "#605e5c",
+                          "successBackground": "#DFF6DD",
+                          "successIcon": "#107C10",
+                          "successText": "#107C10",
+                          "variantBorder": "#edebe9",
+                          "variantBorderHovered": "#a19f9d",
+                          "warningBackground": "#FFF4CE",
+                          "warningHighlight": "#ffb900",
+                          "warningIcon": "#797775",
+                          "warningText": "#323130",
+                        },
+                        "spacing": Object {
+                          "l1": "20px",
+                          "l2": "32px",
+                          "m": "16px",
+                          "s1": "8px",
+                          "s2": "4px",
+                        },
+                      }
+                    }
                     type="submit"
+                    variantClassName="ms-Button--primary"
                   >
-                    <span
-                      className="ms-Button-flexContainer flexContainer-119"
-                      data-automationid="splitbuttonprimary"
+                    <button
+                      aria-label="OK"
+                      className="ms-Button ms-Button--primary root-118"
+                      data-is-focusable={true}
+                      id="sidePanelOkButton"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyPress={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      type="submit"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-120"
+                        className="ms-Button-flexContainer flexContainer-119"
+                        data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-label label-122"
-                          id="id__3"
-                          key="id__3"
+                          className="ms-Button-textContainer textContainer-120"
                         >
-                          OK
+                          <span
+                            className="ms-Button-label label-122"
+                            id="id__3"
+                            key="id__3"
+                          >
+                            OK
+                          </span>
                         </span>
                       </span>
-                    </span>
-                  </button>
-                  <FocusRects />
-                </BaseButton>
-              </DefaultButton>
-            </CustomizedDefaultButton>
-          </PrimaryButton>
-        </CustomizedPrimaryButton>
-      </div>
-    </PanelFooterComponent>
-  </form>
+                    </button>
+                    <FocusRects />
+                  </BaseButton>
+                </DefaultButton>
+              </CustomizedDefaultButton>
+            </PrimaryButton>
+          </CustomizedPrimaryButton>
+        </div>
+      </PanelFooterComponent>
+    </form>
+  </RightPaneForm>
 </DeleteDatabaseConfirmationPanel>
 `;
diff --git a/src/Explorer/SplashScreen/SplashScreen.test.ts b/src/Explorer/SplashScreen/SplashScreen.test.ts
index 68c4c1108..dfa928992 100644
--- a/src/Explorer/SplashScreen/SplashScreen.test.ts
+++ b/src/Explorer/SplashScreen/SplashScreen.test.ts
@@ -1,15 +1,14 @@
 import * as ko from "knockout";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
-import { SplashScreen } from "./SplashScreen";
-import { TabsManager } from "../Tabs/TabsManager";
 import Explorer from "../Explorer";
+import { TabsManager } from "../Tabs/TabsManager";
+import { SplashScreen } from "./SplashScreen";
 jest.mock("../Explorer");
 
 const createExplorer = () => {
   const mock = new Explorer();
   mock.selectedNode = ko.observable();
   mock.isNotebookEnabled = ko.observable(false);
-  mock.addCollectionText = ko.observable("add collection");
   mock.tabsManager = new TabsManager();
   return mock as jest.Mocked<Explorer>;
 };
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index 0454bb40f..eea4b587b 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -17,7 +17,7 @@ import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
-import { getDatabaseName } from "../../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName } from "../../Utils/APITypeUtils";
 import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
@@ -192,7 +192,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     const heroes: SplashScreenItem[] = [
       {
         iconSrc: NewContainerIcon,
-        title: this.container.addCollectionText(),
+        title: `New ${getCollectionName()}`,
         description: "Create a new container for storage and throughput",
         onClick: () => this.container.onNewCollectionClicked(),
       },
@@ -250,12 +250,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         });
       }
 
-      items.push({
-        iconSrc: OpenQueryIcon,
-        title: "Open Query",
-        description: null,
-        onClick: () => this.container.openBrowseQueriesPanel(),
-      });
+      if (userContext.apiType === "SQL") {
+        items.push({
+          iconSrc: OpenQueryIcon,
+          title: "Open Query",
+          description: null,
+          onClick: () => this.container.openBrowseQueriesPanel(),
+        });
+      }
 
       if (userContext.apiType !== "Cassandra") {
         items.push({
diff --git a/src/Explorer/Tabs/NotebookV2Tab.ts b/src/Explorer/Tabs/NotebookV2Tab.ts
index f06c54893..fc3c3cad1 100644
--- a/src/Explorer/Tabs/NotebookV2Tab.ts
+++ b/src/Explorer/Tabs/NotebookV2Tab.ts
@@ -11,15 +11,9 @@ import { default as InterruptKernelIcon, default as KillKernelIcon } from "image
 import SaveIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
 import * as Q from "q";
-import * as _ from "underscore";
-import { ArmApiVersions } from "../../Common/Constants";
-import { configContext } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
 import { useNotebookSnapshotStore } from "../../hooks/useNotebookSnapshotStore";
-import { trackEvent } from "../../Shared/appInsights";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
@@ -38,7 +32,6 @@ export interface NotebookTabOptions extends NotebookTabBaseOptions {
 export default class NotebookTabV2 extends NotebookTabBase {
   public readonly html = '<div data-bind="react:notebookComponentAdapter" style="height: 100%"></div>';
   public notebookPath: ko.Observable<string>;
-  private selectedSparkPool: ko.Observable<string>;
   private notebookComponentAdapter: NotebookComponentAdapter;
 
   constructor(options: NotebookTabOptions) {
@@ -53,16 +46,6 @@ export default class NotebookTabV2 extends NotebookTabBase {
       notebookClient: NotebookTabBase.clientManager,
       onUpdateKernelInfo: this.onKernelUpdate,
     });
-
-    this.selectedSparkPool = ko.observable<string>(null);
-    this.container &&
-      this.container.arcadiaToken.subscribe(async () => {
-        const currentKernel = this.notebookComponentAdapter.getCurrentKernelName();
-        if (!currentKernel) {
-          return;
-        }
-        await this.configureServiceEndpoints(currentKernel);
-      });
   }
 
   public onCloseTabButtonClick(): Q.Promise<any> {
@@ -361,32 +344,6 @@ export default class NotebookTabV2 extends NotebookTabBase {
       },
       // TODO: Uncomment when undo/redo is reimplemented in nteract
     ];
-
-    if (this.container.hasStorageAnalyticsAfecFeature()) {
-      const arcadiaWorkspaceDropdown: CommandButtonComponentProps = {
-        iconSrc: null,
-        iconAlt: workspaceLabel,
-        ariaLabel: workspaceLabel,
-        onCommandClick: () => {},
-        commandButtonLabel: null,
-        hasPopup: false,
-        disabled: this.container.arcadiaWorkspaces.length < 1,
-        isDropdown: false,
-        isArcadiaPicker: true,
-        arcadiaProps: {
-          selectedSparkPool: this.selectedSparkPool(),
-          workspaces: this.container.arcadiaWorkspaces(),
-          onSparkPoolSelect: this.onSparkPoolSelect,
-          onCreateNewWorkspaceClicked: () => {
-            this.container.createWorkspace();
-          },
-          onCreateNewSparkPoolClicked: (workspaceResourceId: string) => {
-            this.container.createSparkPool(workspaceResourceId);
-          },
-        },
-      };
-      buttons.splice(1, 0, arcadiaWorkspaceDropdown);
-    }
     return buttons;
   }
 
@@ -394,50 +351,6 @@ export default class NotebookTabV2 extends NotebookTabBase {
     this.updateNavbarWithTabsButtons();
   }
 
-  private onSparkPoolSelect = (evt: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item: any) => {
-    if (!item || !item.text) {
-      this.selectedSparkPool(null);
-      return;
-    }
-
-    trackEvent(
-      { name: "SparkPoolSelected" },
-      {
-        subscriptionId: userContext.subscriptionId,
-        accountName: userContext.databaseAccount?.name,
-        accountId: userContext.databaseAccount?.id,
-      }
-    );
-
-    this.container &&
-      this.container.arcadiaWorkspaces &&
-      this.container.arcadiaWorkspaces() &&
-      this.container.arcadiaWorkspaces().forEach(async (workspace) => {
-        if (workspace && workspace.name && workspace.sparkPools) {
-          const selectedPoolIndex = _.findIndex(workspace.sparkPools, (pool) => pool && pool.name === item.text);
-          if (selectedPoolIndex >= 0) {
-            const selectedPool = workspace.sparkPools[selectedPoolIndex];
-            if (selectedPool && selectedPool.name) {
-              this.container.sparkClusterConnectionInfo({
-                userName: undefined,
-                password: undefined,
-                endpoints: [
-                  {
-                    endpoint: `https://${workspace.name}.${configContext.ARCADIA_LIVY_ENDPOINT_DNS_ZONE}/livyApi/versions/${ArmApiVersions.arcadiaLivy}/sparkPools/${selectedPool.name}/`,
-                    kind: DataModels.SparkClusterEndpointKind.Livy,
-                  },
-                ],
-              });
-              this.selectedSparkPool(item.text);
-              await this.reconfigureServiceEndpoints();
-              this.container.sparkClusterConnectionInfo.valueHasMutated();
-              return;
-            }
-          }
-        }
-      });
-  };
-
   private onKernelUpdate = async () => {
     await this.configureServiceEndpoints(this.notebookComponentAdapter.getCurrentKernelName()).catch((reason) => {
       /* Erroring is ok here */
diff --git a/src/Explorer/Tabs/ScriptTabBase.ts b/src/Explorer/Tabs/ScriptTabBase.ts
index 99c31a716..9688a0607 100644
--- a/src/Explorer/Tabs/ScriptTabBase.ts
+++ b/src/Explorer/Tabs/ScriptTabBase.ts
@@ -193,7 +193,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     }
   }
 
-  public abstract onSaveClick: () => Promise<any>;
+  public abstract onSaveClick: () => void;
   public abstract onUpdateClick: () => Promise<any>;
 
   public onDiscard = (): Q.Promise<any> => {
@@ -205,16 +205,6 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     return Q();
   };
 
-  public onSaveOrUpdateClick(): Promise<any> {
-    if (this.saveButton.visible()) {
-      return this.onSaveClick();
-    } else if (this.updateButton.visible()) {
-      return this.onUpdateClick();
-    }
-
-    return undefined;
-  }
-
   protected getTabsButtons(): CommandButtonComponentProps[] {
     const buttons: CommandButtonComponentProps[] = [];
     const label = "Save";
diff --git a/src/Explorer/Tabs/TriggerTab.ts b/src/Explorer/Tabs/TriggerTab.ts
index 54cd47c3f..c74fc67ab 100644
--- a/src/Explorer/Tabs/TriggerTab.ts
+++ b/src/Explorer/Tabs/TriggerTab.ts
@@ -1,4 +1,3 @@
-import { Resource, TriggerDefinition, TriggerOperation, TriggerType } from "@azure/cosmos";
 import * as Constants from "../../Common/Constants";
 import { createTrigger } from "../../Common/dataAccess/createTrigger";
 import { updateTrigger } from "../../Common/dataAccess/updateTrigger";
@@ -7,6 +6,7 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import Trigger from "../Tree/Trigger";
 import ScriptTabBase from "./ScriptTabBase";
 import template from "./TriggerTab.html";
@@ -30,12 +30,12 @@ export default class TriggerTab extends ScriptTabBase {
     super.buildCommandBarOptions();
   }
 
-  public onSaveClick = (): Promise<TriggerDefinition & Resource> => {
-    return this._createTrigger({
+  public onSaveClick = (): void => {
+    this._createTrigger({
       id: this.id(),
       body: this.editorContent(),
-      triggerOperation: this.triggerOperation() as TriggerOperation,
-      triggerType: this.triggerType() as TriggerType,
+      triggerOperation: this.triggerOperation() as SqlTriggerResource["triggerOperation"],
+      triggerType: this.triggerType() as SqlTriggerResource["triggerType"],
     });
   };
 
@@ -50,8 +50,8 @@ export default class TriggerTab extends ScriptTabBase {
     return updateTrigger(this.collection.databaseId, this.collection.id(), {
       id: this.id(),
       body: this.editorContent(),
-      triggerOperation: this.triggerOperation() as TriggerOperation,
-      triggerType: this.triggerType() as TriggerType,
+      triggerOperation: this.triggerOperation() as SqlTriggerResource["triggerOperation"],
+      triggerType: this.triggerType() as SqlTriggerResource["triggerType"],
     })
       .then(
         (createdResource) => {
@@ -117,7 +117,7 @@ export default class TriggerTab extends ScriptTabBase {
     }
   }
 
-  private _createTrigger(resource: TriggerDefinition): Promise<TriggerDefinition & Resource> {
+  private _createTrigger(resource: SqlTriggerResource): void {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateTrigger, {
@@ -125,7 +125,8 @@ export default class TriggerTab extends ScriptTabBase {
       tabTitle: this.tabTitle(),
     });
 
-    return createTrigger(this.collection.databaseId, this.collection.id(), resource)
+    resource.body = String(resource.body); // Ensure trigger body is converted to string
+    createTrigger(this.collection.databaseId, this.collection.id(), resource)
       .then(
         (createdResource) => {
           this.tabTitle(createdResource.id);
diff --git a/src/Explorer/Tree/Collection.test.ts b/src/Explorer/Tree/Collection.test.ts
index 7e185ef4a..3e054f8a0 100644
--- a/src/Explorer/Tree/Collection.test.ts
+++ b/src/Explorer/Tree/Collection.test.ts
@@ -1,4 +1,3 @@
-import * as ko from "knockout";
 import * as DataModels from "../../Contracts/DataModels";
 import Explorer from "../Explorer";
 import Collection from "./Collection";
@@ -36,8 +35,6 @@ describe("Collection", () => {
       return false;
     };
 
-    mockContainer.deleteCollectionText = ko.observable<string>("delete collection");
-
     return generateCollection(mockContainer, "abc", data, {} as DataModels.Offer);
   }
 
diff --git a/src/Explorer/Tree/Collection.ts b/src/Explorer/Tree/Collection.ts
index 1239b1257..5ec6c2803 100644
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -18,6 +18,7 @@ import { UploadDetailsRecord } from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
@@ -962,7 +963,9 @@ export default class Collection implements ViewModels.Collection {
 
   public loadTriggers(): Promise<any> {
     return readTriggers(this.databaseId, this.id()).then((triggers) => {
-      const triggerNodes: ViewModels.TreeNode[] = triggers.map((trigger) => new Trigger(this.container, this, trigger));
+      const triggerNodes: ViewModels.TreeNode[] = triggers.map(
+        (trigger: SqlTriggerResource | TriggerDefinition) => new Trigger(this.container, this, trigger)
+      );
       const otherNodes = this.children().filter((node) => node.nodeKind !== "Trigger");
       const allNodes = otherNodes.concat(triggerNodes);
       this.children(allNodes);
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.test.ts b/src/Explorer/Tree/ResourceTreeAdapter.test.ts
index d184568ac..a5806bbfc 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.test.ts
+++ b/src/Explorer/Tree/ResourceTreeAdapter.test.ts
@@ -23,7 +23,7 @@ describe("ResourceTreeAdapter", () => {
 
   // TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
   describe("isDataNodeSelected", () => {
-    it("it should not select if no selected node", () => {
+    it("if no selected node it should not select", () => {
       const explorer = mockContainer();
       explorer.selectedNode(undefined);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
@@ -31,13 +31,13 @@ describe("ResourceTreeAdapter", () => {
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select incorrect subnodekinds", () => {
+    it("incorrect subnodekinds it should not select", () => {
       const resourceTreeAdapter = new ResourceTreeAdapter(mockContainer());
       const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select if no active tab", () => {
+    it("if no active tab it should not select", () => {
       const explorer = mockContainer();
       explorer.tabsManager.activeTab(undefined);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.tsx b/src/Explorer/Tree/ResourceTreeAdapter.tsx
index a3231b1f8..4cf2ce634 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -14,6 +14,7 @@ import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
 import { Areas } from "../../Common/Constants";
+import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { IPinnedRepo } from "../../Juno/JunoClient";
@@ -273,11 +274,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(this.container, collection),
     });
 
-    if (
-      userContext.apiType === "Mongo" &&
-      this.container.isNotebookEnabled() &&
-      userContext.features.enableSchemaAnalyzer
-    ) {
+    if (this.container.isNotebookEnabled() && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
       children.push({
         label: "Schema (Preview)",
         onClick: collection.onSchemaAnalyzerClick.bind(collection),
diff --git a/src/HostedExplorer.tsx b/src/HostedExplorer.tsx
index 92908b6c3..868378787 100644
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -31,7 +31,7 @@ const App: React.FunctionComponent = () => {
   // For showing/hiding panel
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
-  const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login, switchTenant } = useAADAuth();
+  const { isLoggedIn, armToken, graphToken, aadToken, account, tenantId, logout, login, switchTenant } = useAADAuth();
   const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
   const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);
   const [connectionString, setConnectionString] = React.useState<string>();
@@ -50,6 +50,7 @@ const App: React.FunctionComponent = () => {
           authType: AuthType.AAD,
           databaseAccount,
           authorizationToken: armToken,
+          aadToken,
         };
       } else if (authType === AuthType.EncryptedToken) {
         frameWindow.hostedConfig = {
diff --git a/src/HostedExplorerChildFrame.ts b/src/HostedExplorerChildFrame.ts
index 2cff6c862..1366a0062 100644
--- a/src/HostedExplorerChildFrame.ts
+++ b/src/HostedExplorerChildFrame.ts
@@ -7,6 +7,7 @@ export interface HostedExplorerChildFrame extends Window {
 }
 
 export interface AAD {
+  aadToken: string;
   authType: AuthType.AAD;
   databaseAccount: DatabaseAccount;
   authorizationToken: string;
diff --git a/src/Localization/en/SqlX.json b/src/Localization/en/SqlX.json
index 3c1d81dac..58f6e89a6 100644
--- a/src/Localization/en/SqlX.json
+++ b/src/Localization/en/SqlX.json
@@ -37,16 +37,20 @@
     "CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment.",
     "DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
     "NoValue": "",
-    "SKUDetails": "SKU Details:",
     "CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
     "CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
     "CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
-    "CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
     "Cost": "Cost",
     "CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
     "ConnectionString": "Connection String",
     "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
-    "KeysBlade": "the keys blade",
+    "KeysBlade": "the keys blade.",
+    "MetricsString": "Metrics",
+    "MetricsText": "Monitor the CPU and memory usage for the dedicated gateway instances in ",
+    "MetricsBlade": "the metrics blade.",
+    "MonitorUsage": "Monitor Usage",
+    "ResizingDecisionText": "To understand if the dedicated gateway is the right size, ",
+    "ResizingDecisionLink": "learn more about dedicated gateway sizing.",
     "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
     "WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
 }
\ No newline at end of file
diff --git a/src/Main.tsx b/src/Main.tsx
index 54a660094..86e79ee62 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -29,8 +29,7 @@ import { CollapsedResourceTree } from "./Common/CollapsedResourceTree";
 import { ResourceTree } from "./Common/ResourceTree";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
-import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
-import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
+import { Dialog } from "./Explorer/Controls/Dialog";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
@@ -63,17 +62,6 @@ const App: React.FunctionComponent = () => {
   const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
   const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
 
-  const [dialogProps, setDialogProps] = useState<DialogProps>();
-  const [showDialog, setShowDialog] = useState<boolean>(false);
-
-  const openDialog = (props: DialogProps) => {
-    setDialogProps(props);
-    setShowDialog(true);
-  };
-  const closeDialog = () => {
-    setShowDialog(false);
-  };
-
   const { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel();
   const { tabs, activeTab, tabsManager } = useTabs();
 
@@ -83,8 +71,6 @@ const App: React.FunctionComponent = () => {
     setInProgressConsoleDataIdToBeDeleted,
     openSidePanel,
     closeSidePanel,
-    openDialog,
-    closeDialog,
     tabsManager,
   };
 
@@ -106,7 +92,7 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer">
-      <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
+      <div id="divExplorer" className="flexContainer hideOverflows">
         {/* Main Command Bar - Start */}
         <div data-bind="react: commandBarComponentAdapter" />
         {/* Collections Tree and Tabs - Begin */}
@@ -154,8 +140,7 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
-      <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
-      {showDialog && <Dialog {...dialogProps} />}
+      <Dialog />
     </div>
   );
 };
diff --git a/src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts b/src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts
deleted file mode 100644
index f6416fe1c..000000000
--- a/src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { IResourceProviderClient } from "../ResourceProvider/IResourceProviderClient";
-import { NotebookWorkspace } from "../Contracts/DataModels";
-
-export class NotebookWorkspaceSettingsProviderClient implements IResourceProviderClient<string> {
-  public async deleteAsync(_url: string, _apiVersion: string): Promise<void> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async postAsync(_url: string, _body: any, _apiVersion: string): Promise<any> {
-    return Promise.resolve({
-      notebookServerEndpoint: "http://localhost:8888",
-      username: "",
-      password: "",
-    });
-  }
-
-  public async getAsync(): Promise<string> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async putAsync(): Promise<string> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async patchAsync(): Promise<string> {
-    throw new Error("Not yet implemented");
-  }
-}
-
-export class NotebookWorkspaceResourceProviderClient implements IResourceProviderClient<NotebookWorkspace> {
-  public async deleteAsync(): Promise<void> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async postAsync(): Promise<NotebookWorkspace> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async getAsync(): Promise<NotebookWorkspace | NotebookWorkspace[]> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async putAsync(): Promise<NotebookWorkspace> {
-    throw new Error("Not yet implemented");
-  }
-
-  public async patchAsync(): Promise<NotebookWorkspace> {
-    throw new Error("Not yet implemented");
-  }
-}
diff --git a/src/Platform/Hosted/Components/MeControl.test.tsx b/src/Platform/Hosted/Components/MeControl.test.tsx
index 4c5823e07..b2911d145 100644
--- a/src/Platform/Hosted/Components/MeControl.test.tsx
+++ b/src/Platform/Hosted/Components/MeControl.test.tsx
@@ -1,12 +1,12 @@
 jest.mock("../../../hooks/useDirectories");
+import { AccountInfo } from "@azure/msal-browser";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { MeControl } from "./MeControl";
-import { Account } from "msal";
 
 it("renders", () => {
-  const account = {} as Account;
+  const account = {} as AccountInfo;
   const logout = jest.fn();
   const openPanel = jest.fn();
 
diff --git a/src/Platform/Hosted/Components/MeControl.tsx b/src/Platform/Hosted/Components/MeControl.tsx
index 4765256aa..4432d0226 100644
--- a/src/Platform/Hosted/Components/MeControl.tsx
+++ b/src/Platform/Hosted/Components/MeControl.tsx
@@ -1,11 +1,11 @@
-import { FocusZone, DefaultButton, DirectionalHint, Persona, PersonaInitialsColor, PersonaSize } from "@fluentui/react";
+import { AccountInfo } from "@azure/msal-browser";
+import { DefaultButton, DirectionalHint, FocusZone, Persona, PersonaInitialsColor, PersonaSize } from "@fluentui/react";
 import * as React from "react";
-import { Account } from "msal";
 import { useGraphPhoto } from "../../../hooks/useGraphPhoto";
 
 interface Props {
   graphToken: string;
-  account: Account;
+  account: AccountInfo;
   openPanel: () => void;
   logout: () => void;
 }
@@ -48,7 +48,7 @@ export const MeControl: React.FunctionComponent<Props> = ({ openPanel, logout, a
         <Persona
           imageUrl={photo}
           text={account?.name}
-          secondaryText={account?.userName}
+          secondaryText={account?.username}
           showSecondaryText={true}
           showInitialsUntilImageLoads={true}
           initialsColor={PersonaInitialsColor.teal}
diff --git a/src/Platform/Hosted/extractFeatures.ts b/src/Platform/Hosted/extractFeatures.ts
index 18ff57cc2..95e3695df 100644
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -9,10 +9,12 @@ export type Features = {
   readonly enableRightPanelV2: boolean;
   readonly enableSchema: boolean;
   enableSchemaAnalyzer: boolean;
+  autoscaleDefault: boolean;
   readonly enableSDKoperations: boolean;
   readonly enableSpark: boolean;
   readonly enableTtl: boolean;
   readonly executeSproc: boolean;
+  readonly enableAadDataPlane: boolean;
   readonly hostedDataExplorer: boolean;
   readonly junoEndpoint?: string;
   readonly livyEndpoint?: string;
@@ -43,6 +45,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
   return {
     canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),
     cosmosdb: "true" === get("cosmosdb"),
+    enableAadDataPlane: "true" === get("enableaaddataplane"),
     enableChangeFeedPolicy: "true" === get("enablechangefeedpolicy"),
     enableFixedCollectionWithSharedThroughput: "true" === get("enablefixedcollectionwithsharedthroughput"),
     enableKOPanel: "true" === get("enablekopanel"),
@@ -66,5 +69,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     pr: get("pr"),
     showMinRUSurvey: "true" === get("showminrusurvey"),
     ttl90Days: "true" === get("ttl90days"),
+    autoscaleDefault: "true" === get("autoscaledefault"),
   };
 }
diff --git a/src/SelfServe/Decorators.tsx b/src/SelfServe/Decorators.tsx
index a855533ec..3d85024a0 100644
--- a/src/SelfServe/Decorators.tsx
+++ b/src/SelfServe/Decorators.tsx
@@ -1,5 +1,9 @@
-import { ChoiceItem, Description, Info, InputType, NumberUiType, SmartUiInput, RefreshParams } from "./SelfServeTypes";
-import { addPropertyToMap, DecoratorProperties, buildSmartUiDescriptor } from "./SelfServeUtils";
+/**
+ * @module SelfServe/Decorators
+ */
+
+import { ChoiceItem, Description, Info, NumberUiType, OnChangeCallback, RefreshParams } from "./SelfServeTypes";
+import { addPropertyToMap, buildSmartUiDescriptor, DecoratorProperties } from "./SelfServeUtils";
 
 type ValueOf<T> = T[keyof T];
 interface Decorator {
@@ -8,37 +12,99 @@ interface Decorator {
 }
 
 interface InputOptionsBase {
+  /**
+   * Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.
+   */
   labelTKey: string;
 }
 
+/**
+ * Numeric input UI element is rendered. The current options are to render it as a slider or a spinner.
+ */
 export interface NumberInputOptions extends InputOptionsBase {
+  /**
+   * Min value of the numeric input UI element
+   */
   min: (() => Promise<number>) | number;
+  /**
+   * Max value of the numeric input UI element
+   */
   max: (() => Promise<number>) | number;
+  /**
+   * Value by which the numeric input is incremented or decremented in the UI.
+   */
   step: (() => Promise<number>) | number;
+  /**
+   * The type of the numeric input UI element
+   */
   uiType: NumberUiType;
 }
 
+/**
+ * Text box is rendered.
+ */
 export interface StringInputOptions extends InputOptionsBase {
+  /**
+   * Key used to pickup the string corresponding to the place holder text of the text box, from the strings JSON file.
+   */
   placeholderTKey?: (() => Promise<string>) | string;
 }
 
+/**
+ * Toggle is rendered.
+ */
 export interface BooleanInputOptions extends InputOptionsBase {
+  /**
+   * Key used to pickup the string corresponding to the true label of the toggle, from the strings JSON file.
+   */
   trueLabelTKey: (() => Promise<string>) | string;
+  /**
+   * Key used to pickup the string corresponding to the false label of the toggle, from the strings JSON file.
+   */
   falseLabelTKey: (() => Promise<string>) | string;
 }
 
+/**
+ * Dropdown is rendered.
+ */
 export interface ChoiceInputOptions extends InputOptionsBase {
+  /**
+   * Choices to be shown in the dropdown
+   */
   choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
+  /**
+   * Key used to pickup the string corresponding to the placeholder text of the dropdown, from the strings JSON file.
+   */
   placeholderTKey?: (() => Promise<string>) | string;
 }
 
+/**
+ * Text is rendered.
+ */
 export interface DescriptionDisplayOptions {
+  /**
+   * Optional heading for the text displayed by this description element.
+   */
   labelTKey?: string;
+  /**
+   * Static description to be shown as text.
+   */
   description?: (() => Promise<Description>) | Description;
+  /**
+   * If true, Indicates that the Description will be populated dynamically and that it may not be present in some scenarios.
+   */
   isDynamicDescription?: boolean;
 }
 
-type InputOptions =
+/**
+ * Interprets the type of the UI element and correspondingly renders
+ * - slider or spinner
+ * - text box
+ * - toggle
+ * - drop down
+ * - plain text or message bar
+ */
+export type InputOptions =
   | NumberInputOptions
   | StringInputOptions
   | BooleanInputOptions
@@ -81,20 +147,24 @@ const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
   };
 };
 
-export const OnChange = (
-  onChange: (
-    newValue: InputType,
-    currentState: Map<string, SmartUiInput>,
-    baselineValues: ReadonlyMap<string, SmartUiInput>
-  ) => Map<string, SmartUiInput>
-): PropertyDecorator => {
+/**
+ * Indicates the callback to be fired when the UI element corresponding to the property is changed.
+ */
+export const OnChange = (onChange: OnChangeCallback): PropertyDecorator => {
   return addToMap({ name: "onChange", value: onChange });
 };
 
+/**
+ * Indicates that the UI element corresponding to the property should have an Info bubble. The Info
+ * bubble is the icon that looks like an "i" which users click on to get more information about the UI element.
+ */
 export const PropertyInfo = (info: (() => Promise<Info>) | Info): PropertyDecorator => {
   return addToMap({ name: "info", value: info });
 };
 
+/**
+ * Indicates that this property should correspond to a UI element with the given parameters.
+ */
 export const Values = (inputOptions: InputOptions): PropertyDecorator => {
   if (isNumberInputOptions(inputOptions)) {
     return addToMap(
@@ -130,12 +200,20 @@ export const Values = (inputOptions: InputOptions): PropertyDecorator => {
   }
 };
 
+/**
+ * Indicates to the compiler that UI should be generated from this class.
+ */
 export const IsDisplayable = (): ClassDecorator => {
   return (target) => {
     buildSmartUiDescriptor(target.name, target.prototype);
   };
 };
 
+/**
+ * If there is a long running operation in your page after the {@linkcode onSave} action, the page can
+ * optionally auto refresh itself using the {@linkcode onRefresh} action. The 'RefreshOptions' indicate
+ * how often the auto refresh of the page occurs.
+ */
 export const RefreshOptions = (refreshParams: RefreshParams): ClassDecorator => {
   return (target) => {
     addPropertyToMap(target.prototype, "root", target.name, "refreshParams", refreshParams);
diff --git a/src/SelfServe/Documentation/Documentation.ts b/src/SelfServe/Documentation/Documentation.ts
new file mode 100644
index 000000000..ecc294b1d
--- /dev/null
+++ b/src/SelfServe/Documentation/Documentation.ts
@@ -0,0 +1,5 @@
+/**
+ * [[include: README.md]]
+ *
+ * @module SelfServe
+ */
diff --git a/src/SelfServe/Documentation/README.md b/src/SelfServe/Documentation/README.md
new file mode 100644
index 000000000..884c9eb7b
--- /dev/null
+++ b/src/SelfServe/Documentation/README.md
@@ -0,0 +1,357 @@
+# Self Serve Model
+
+The Self Serve Model allows you to write classes that auto generate UI components for your feature. The idea is to allow developers from other feature teams, who may not be familiar with writing UI, to develop and own UX components. This is accomplished by just writing simpler TypeScript classes for their features. 
+
+What this means for the feature team 
+- Can concentrate just on the logic behind showing, hiding and disabling UI components 
+- Need not worry about specifics of the UI language or UX requirements (Accessibility, Localization, Themes, etc.)
+- Can own the REST API calls made as part of the feature, which can change in the future
+- Quicker turn around time for development and bug fixes since they have deeper knowledge of the feature
+
+What this means for the UI team
+- No need to ramp up on the intricacies of every feature which requires UI changes
+- Own only the framework and not every feature, giving more bandwidth to prioritize inhouse features as well
+
+## Getting Started
+
+Clone the cosmos-explorer repo and run
+
+- `npm install`
+- `npm run build`
+
+[Click here](../index.html) for more info on setting up the cosmos-explorer repo.
+
+## Code Changes
+
+Code changes need to be made only in the following files
+- A JSON file - for strings to be displayed
+- A Types File - for defining the data models
+- A RP file - for defining the REST calls
+- A Class file - for defining the UI
+- [SelfServeUtils.tsx](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServeUtils.tsx) and [SelfServe.tsx](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx) - for defning the entrypoint for the UI
+
+### 1. JSON file for UI strings
+
+#### Naming Convention
+`Localization/en/<FEATURE_NAME>.json`\
+Please place your files only under "Localization/en" folder. If not, the UI strings will not be picked up by the framework.
+
+#### Example
+[SelfServeExample.json](https://github.com/Azure/cosmos-explorer/blob/master/src/Localization/en/SelfServeExample.json)
+
+#### Description
+This is a JSON file where the values are the strings that needs to be displayed in the UI. These strings are referenced using their corresponding unique keys.
+
+For example, If your class file defines properties as follows
+```ts
+  @Values({
+    labelTKey: "stringPropertylabel"
+  })
+  stringProperty: string;
+
+  @Values({
+    labelTKey: "booleanPropertyLabel",
+    trueLabelTKey: "trueLabel",
+    falseLabelTKey: "falseLabel",
+  })
+  booleanProperty: boolean;
+```
+
+Then the content of `Localization/en/FeatureName.json` should be 
+
+```json
+{
+    stringPropertyLabel: "string property",
+    booleanPropertyLabel: "boolean property",
+    trueLabel: "Enable",
+    falseLabel: "Disable"
+}
+```
+You can learn more on how to define the class file [here](./selfserve.html#4-class-file).
+
+### 2. Types file
+
+#### Naming Convention
+`<FEATURE_NAME>.types.ts`
+
+#### Example
+[SelfServeExample.types.ts](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.types.ts)
+
+#### Description
+This file contains the definitions of all the data models to be used in your Class file and RP file.
+
+For example, if your RP call takes/returns the `stringProperty` and `booleanProperty` of your SelfServe class, then you can define an interface in your `FeatureName.types.ts` file like this.
+
+```ts
+export RpDataModel {
+  stringProperty: string,
+  booleanProperty: boolean
+}
+```
+
+### 3. RP file
+
+#### Naming Convention
+`<FEATURE_NAME>.rp.ts`
+
+#### Example
+[SelfServeExample.rp.ts](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.rp.ts)
+
+#### Description
+The RP file will host the REST calls needed for the initialize, save and refresh functions. This decouples the view and the model of the feature.
+
+To make the ARM call, we need some information about the Azure Cosmos DB databaseAccount - the subscription id, resource group name and database account name. These are readily available through the `userContext` object, exposed through
+
+* `userContext.subscriptionId`
+* `userContext.resourceGroup`
+* `userContext.databaseAccount.name`
+
+You can use the `armRequestWithoutPolling` function to make the ARM api call.
+
+Your `FeatureName.rp.ts` file can look like the following.
+
+```ts
+import { userContext } from "../../UserContext";
+import { armRequestWithoutPolling } from "../../Utils/arm/request";
+import { configContext } from "../../ConfigContext";
+
+const apiVersion = "2020-06-01-preview";
+
+export const saveData = async (properties: RpDataModel): Promise<string> => {
+  const path = `/subscriptions/${userContext.subscriptionId}/resourceGroups/${userContext.resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/<REST_OF_THE_PATH>`
+  const body = {
+      data : properties
+  }
+  const armRequestResult = await armRequestWithoutPolling({
+    host: configContext.ARM_ENDPOINT,
+    path,
+    method: "PUT",
+    apiVersion,
+    body,
+  });
+
+  return armRequestResult.operationStatusUrl;
+};
+
+```
+
+### 4. Class file
+
+#### Naming Convention
+`<FEATURE_NAME>.tsx`
+
+#### Example
+[SelfServeExample.tsx](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.tsx)
+
+#### Description
+This file will contain the actual code that is translated into the UI component by the Self Serve framework.
+* Each Self Serve class
+  * Needs to extends the [SelfServeBase](../classes/selfserve_selfservetypes.selfservebaseclass.html) class.
+  * Needs to have the [@IsDisplayable()](./selfserve_decorators.html#isdisplayable) decorator to tell the compiler that UI needs to be generated from this class.
+  * Needs to define an [initialize()](../classes/selfserve_selfservetypes.selfservebaseclass.html#initialize) function, to set default values for the inputs.
+  * Needs to define an [onSave()](../classes/selfserve_selfservetypes.selfservebaseclass.html#onsave) function, a callback for when the save button is clicked.
+  * Needs to define an [onRefresh()](../classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh) function, a callback for when the refresh button is clicked.
+  * Can have an optional [@RefreshOptions()](./selfserve_decorators.html#refreshoptions) decorator that determines how often the auto refresh of the UI component should take place.
+
+* For every UI element needed, add a property to the Self Serve class. Each of these properties
+  * Needs to have a [@Values()](./selfserve_decorators.html#values) decorator.
+  * Can have an optional [@PropertyInfo()](./selfserve_decorators.html#propertyinfo) decorator that describes it's info bubble.
+  * Can have an optional [@OnChange()](./selfserve_decorators.html#onchange) decorator that dictates the effects of the change of the UI element tied to this property.
+
+Your `FeatureName.tsx` file will look like the following.
+```ts
+@IsDisplayable()
+@RefreshOptions({ retryIntervalInMs: 2000 })
+export default class FeatureName extends SelfServeBaseClass {
+
+  public initialize = async (): Promise<Map<string, SmartUiInput>> => {
+      // initialize RP call and processing logic
+  }
+
+  public onSave = async (
+    currentValues: Map<string, SmartUiInput>,
+    baselineValues: ReadonlyMap<string, SmartUiInput>
+  ): Promise<OnSaveResult> => {
+      // onSave RP call and processing logic
+  }
+
+  public onRefresh = async (): Promise<RefreshResult> => {
+      // refresh RP call and processing logic
+  };
+
+  @Values(...)
+  stringProperty: string;
+
+  @OnChange(...)
+  @PropertyInfo(...)
+  @Values(...)
+  booleanProperty: boolean;
+}
+```
+
+### 5. Update SelfServeType
+
+Once you have written your Self Serve Class, add a corresponding type to [SelfServeType](../enums/selfserve_selfserveutils.selfservetype.html)
+
+```ts
+export enum SelfServeType {
+  invalid = "invalid",
+  example = "example",
+  ...
+  // Add the type for your new feature
+  featureName = "featurename"
+}
+```
+
+### 6. Update SelfServe.tsx (landing page)
+
+Once the SelfServeType has been updated, update [SelfServe.tsx](https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx) for your feature. This ensures that the framework picks up your SelfServe Class.
+
+```ts
+const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
+  switch (selfServeType) {
+    case SelfServeType.example: {
+        ....
+    }
+    ...
+    ...
+    ...
+    // Add this for your new feature
+    case SelfServeType.featureName: {
+      // The 'webpackChunkName' is used during debugging, to identify if the correct class has been loaded
+      const FeatureName = await import(/* webpackChunkName: "FeatureName" */ "./FeatureName/FeatureName");
+      const featureName = new FeatureName.default();
+      await loadTranslations(featureName.constructor.name);
+      return featureName.toSelfServeDescriptor();
+    }
+    ...
+    ...
+    default:
+      return undefined;
+  }
+};
+
+```
+
+## Telemetry
+You can add telemetry for your feature using the functions in [SelfServeTelemetryProcessor](./selfserve_selfservetelemetryprocessor.html)
+
+For example, in your SelfServe class, you can call the trace method in your `onSave` function.
+
+```ts
+import { saveData } from "./FeatureName.rp"
+import { RpDataModel } from "./FeatureName.types"
+
+@IsDisplayable()
+export default class FeatureName extends SelfServeBaseClass {
+
+  .
+  .
+  .
+
+  public onSave = async (
+    currentValues: Map<string, SmartUiInput>,
+    baselineValues: ReadonlyMap<string, SmartUiInput>
+  ): Promise<OnSaveResult> => {
+
+    stringPropertyValue = currentValues.get("stringProperty")
+    booleanPropertyValue = currentValues.get("booleanProperty")
+    
+    const propertiesToSave : RpDataModel = { 
+      stringProperty: stringPropertyValue,
+      booleanProperty: booleanPropertyValue
+    }
+    const telemetryData = { ...propertiesToSave, selfServeClassName: FeatureName.name }
+    const onSaveTimeStamp = selfServeTraceStart(telemetryData)
+
+    await saveData(propertiesToSave)
+
+    selfServeTraceSuccess(telemetryData, onSaveTimeStamp)
+
+    // return required values
+  }
+
+  .
+  .
+  .
+
+  @Values(...)
+  stringProperty: string;
+
+  @Values(...)
+  booleanProperty: boolean;
+}
+```
+## Portal Notifications
+You can enable portal notifications for your feature by passing in the required strings as part of the [portalNotification](../interfaces/selfserve_selfservetypes.onsaveresult.html#portalnotification) property of the [onSaveResult](../interfaces/selfserve_selfservetypes.onsaveresult.html).
+
+```ts
+@IsDisplayable()
+export default class SqlX extends SelfServeBaseClass {
+
+.
+.
+.
+
+  public onSave = async (
+      currentValues: Map<string, SmartUiInput>,
+      baselineValues: Map<string, SmartUiInput>
+  ): Promise<OnSaveResult> => {
+
+    stringPropertyValue = currentValues.get("stringProperty")
+    booleanPropertyValue = currentValues.get("booleanProperty")
+    
+    const propertiesToSave : RpDataModel = { 
+      stringProperty: stringPropertyValue,
+      booleanProperty: booleanPropertyValue
+    }
+
+    const operationStatusUrl = await saveData(propertiesToSave);
+    return {
+      operationStatusUrl: operationStatusUrl,
+      portalNotification: {
+        initialize: {
+          titleTKey: "DeleteInitializeTitle",
+          messageTKey: "DeleteInitializeMessage",
+        },
+        success: {
+          titleTKey: "DeleteSuccessTitle",
+          messageTKey: "DeleteSuccesseMessage",
+        },
+        failure: {
+          titleTKey: "DeleteFailureTitle",
+          messageTKey: "DeleteFailureMessage",
+        },
+      },
+    };
+  }
+
+  .
+  .
+  .
+
+  @Values(...)
+  stringProperty: string;
+
+  @Values(...)
+  booleanProperty: boolean;
+}
+```
+
+## Execution
+
+### Watch mode
+
+Run `npm start` to start the development server and automatically rebuild on changes
+
+### Local Development
+
+Ensure that you have made the [Code changes](./selfserve.html#code-changes).
+
+- Go to `https://ms.portal.azure.com/`
+- Add the query string `feature.showSelfServeExample=true&feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3D<SELF_SERVE_TYPE>`
+- Click on the `Self Serve Example` menu item on the left panel.
+
+For example, if you want to open up the the UI of a class with the type `sqlx`, then visit `https://ms.portal.azure.com/?feature.showSelfServeExample=true&feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3Dsqlx`
+
+![](https://sdkctlstore.blob.core.windows.net/exe/selfserveDev.PNG)
diff --git a/src/SelfServe/Documentation/SupportedFeatures.md b/src/SelfServe/Documentation/SupportedFeatures.md
new file mode 100644
index 000000000..f4820cc1d
--- /dev/null
+++ b/src/SelfServe/Documentation/SupportedFeatures.md
@@ -0,0 +1,12 @@
+The Self Serve framework has integrated support for
+
+1. [Portal Notifications](./selfserve.html#portal-notifications)
+2. [Telemetry](./selfserve.html#telemetry)
+3. the following UI controls:
+    * [Slider](https://developer.microsoft.com/en-us/fluentui#/controls/web/slider)
+    * [SpinButton](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton)
+    * [TextField](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield)
+    * [Toggle](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
+    * [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown)
+    * [Link](https://developer.microsoft.com/en-us/fluentui#/controls/web/link)
+    * [MessageBar](https://developer.microsoft.com/en-us/fluentui#/controls/web/messagebar)
diff --git a/src/SelfServe/Documentation/SupportedFeatures.ts b/src/SelfServe/Documentation/SupportedFeatures.ts
new file mode 100644
index 000000000..5e23dde1c
--- /dev/null
+++ b/src/SelfServe/Documentation/SupportedFeatures.ts
@@ -0,0 +1,5 @@
+/**
+ * [[include: SupportedFeatures.md]]
+ *
+ * @module SelfServe - What is currently supported?
+ */
diff --git a/src/SelfServe/Example/SelfServeExample.rp.ts b/src/SelfServe/Example/SelfServeExample.rp.ts
index f0da48641..8762c1862 100644
--- a/src/SelfServe/Example/SelfServeExample.rp.ts
+++ b/src/SelfServe/Example/SelfServeExample.rp.ts
@@ -1,20 +1,8 @@
 import { SessionStorageUtility } from "../../Shared/StorageUtility";
 import { userContext } from "../../UserContext";
-import { get } from "../../Utils/arm/generatedClients/2020-04-01/databaseAccounts";
+import { get } from "../../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { RefreshResult } from "../SelfServeTypes";
-export enum Regions {
-  NorthCentralUS = "NorthCentralUS",
-  WestUS = "WestUS",
-  EastUS2 = "EastUS2",
-}
-
-export interface InitializeResponse {
-  regions: Regions;
-  enableLogging: boolean;
-  accountName: string;
-  collectionThroughput: number;
-  dbThroughput: number;
-}
+import { AccountProps, Regions } from "./SelfServeExample.types";
 
 export const getMaxCollectionThroughput = async (): Promise<number> => {
   return 10000;
@@ -32,21 +20,19 @@ export const getMinDatabaseThroughput = async (): Promise<number> => {
   return 400;
 };
 
-export const update = async (
-  regions: Regions,
-  enableLogging: boolean,
-  accountName: string,
-  collectionThroughput: number,
-  dbThoughput: number
-): Promise<void> => {
-  SessionStorageUtility.setEntry("regions", regions);
-  SessionStorageUtility.setEntry("enableLogging", enableLogging?.toString());
-  SessionStorageUtility.setEntry("accountName", accountName);
-  SessionStorageUtility.setEntry("collectionThroughput", collectionThroughput?.toString());
-  SessionStorageUtility.setEntry("dbThroughput", dbThoughput?.toString());
+export const update = async (accountProps: AccountProps): Promise<void> => {
+  // This is only an example. DO NOT store actual data in the Session/Local storage for your SelfServe feature.
+
+  SessionStorageUtility.setEntry("regions", accountProps.regions);
+  SessionStorageUtility.setEntry("enableLogging", accountProps.enableLogging?.toString());
+  SessionStorageUtility.setEntry("accountName", accountProps.accountName);
+  SessionStorageUtility.setEntry("collectionThroughput", accountProps.collectionThroughput?.toString());
+  SessionStorageUtility.setEntry("dbThroughput", accountProps.dbThroughput?.toString());
 };
 
-export const initialize = async (): Promise<InitializeResponse> => {
+export const initialize = async (): Promise<AccountProps> => {
+  // This is only an example. DO NOT store actual data in the Session/Local storage for your SelfServe feature.
+
   const regions = Regions[SessionStorageUtility.getEntry("regions") as keyof typeof Regions];
   const enableLogging = SessionStorageUtility.getEntry("enableLogging") === "true";
   const accountName = SessionStorageUtility.getEntry("accountName");
@@ -64,6 +50,8 @@ export const initialize = async (): Promise<InitializeResponse> => {
 };
 
 export const onRefreshSelfServeExample = async (): Promise<RefreshResult> => {
+  // This is only an example. DO NOT store actual data in the Session/Local storage for your SelfServe feature.
+
   const refreshCountString = SessionStorageUtility.getEntry("refreshCount");
   const refreshCount = refreshCountString ? parseInt(refreshCountString) : 0;
 
diff --git a/src/SelfServe/Example/SelfServeExample.tsx b/src/SelfServe/Example/SelfServeExample.tsx
index a533a26f7..004ff993d 100644
--- a/src/SelfServe/Example/SelfServeExample.tsx
+++ b/src/SelfServe/Example/SelfServeExample.tsx
@@ -1,4 +1,5 @@
 import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
+import { selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
 import {
   ChoiceItem,
   Description,
@@ -18,9 +19,9 @@ import {
   getMinDatabaseThroughput,
   initialize,
   onRefreshSelfServeExample,
-  Regions,
   update,
 } from "./SelfServeExample.rp";
+import { AccountProps, Regions } from "./SelfServeExample.types";
 
 const regionDropdownItems: ChoiceItem[] = [
   { labelTKey: "NorthCentralUS", key: Regions.NorthCentralUS },
@@ -73,61 +74,16 @@ const validate = (
   }
 };
 
-/*
-  This is an example self serve class that auto generates UI components for your feature.
-
-  Each self serve class
-    - Needs to extends the SelfServeBase class.
-    - Needs to have the @IsDisplayable() decorator to tell the compiler that UI needs to be generated from this class.
-    - Needs to define an onSave() function, a callback for when the submit button is clicked.
-    - Needs to define an initialize() function, to set default values for the inputs.
-    - Needs to define an onRefresh() function, a callback for when the refresh button is clicked.
-
-  You can test this self serve UI by using the featureflag '?feature.selfServeType=example'
-  and plumb in similar feature flags for your own self serve class.
-
-  All string to be used should be present in the "src/Localization" folder, in the language specific json files. The 
-  corresponding key should be given as the value for the fields like "label", the error message etc.
-*/
-
-/*
-  @IsDisplayable()
-    - role: Indicates to the compiler that UI should be generated from this class.
-*/
 @IsDisplayable()
-/*
-  @RefreshOptions()
-    - role: Passes the refresh options to be used by the self serve model.
-    - inputs: 
-        retryIntervalInMs - The time interval between refresh attempts when an update in ongoing.
-*/
 @RefreshOptions({ retryIntervalInMs: 2000 })
 export default class SelfServeExample extends SelfServeBaseClass {
-  /*
-  onRefresh()
-    - role : Callback that is triggerrd when the refresh button is clicked. You should perform the your rest API
-             call to check if the update action is completed.
-    - returns: 
-            RefreshResult -
-                isComponentUpdating: Indicated if the state is still being updated
-                notificationMessage: Notification message to be shown in case the component is still being updated
-                                     i.e, isComponentUpdating is true
-  */
   public onRefresh = async (): Promise<RefreshResult> => {
     return onRefreshSelfServeExample();
   };
 
   /*
-  onSave()
-    - input: (currentValues: Map<string, InputType>, baselineValues: ReadonlyMap<string, SmartUiInput>) => Promise<string>
-    - role: Callback that is triggerred when the submit button is clicked. You should perform your rest API
-            calls here using the data from the different inputs passed as a Map to this callback function.
-
-            In this example, the onSave callback simply sets the value for keys corresponding to the field name
-            in the SessionStorage. It uses the currentValues and baselineValues maps to perform custom validations
-            as well.
-
-    - returns: The initialize, success and failure messages to be displayed in the Portal Notification blade after the operation is completed.
+    In this example, the onSave callback simply sets the value for keys corresponding to the field name in the  SessionStorage. 
+    It uses the currentValues and baselineValues maps to perform custom validations as well.
   */
   public onSave = async (
     currentValues: Map<string, SmartUiInput>,
@@ -142,7 +98,13 @@ export default class SelfServeExample extends SelfServeBaseClass {
     let dbThroughput = currentValues.get("dbThroughput")?.value as number;
     dbThroughput = enableDbLevelThroughput ? dbThroughput : undefined;
     try {
-      await update(regions, enableLogging, accountName, collectionThroughput, dbThroughput);
+      const accountProps: AccountProps = { regions, enableLogging, accountName, collectionThroughput, dbThroughput };
+      const telemetryData = { ...accountProps, selfServeClassName: SelfServeExample.name };
+
+      const onSaveTimeStamp = selfServeTraceStart(telemetryData);
+      await update(accountProps);
+      selfServeTraceSuccess(telemetryData, onSaveTimeStamp);
+
       if (currentValues.get("regions") === baselineValues.get("regions")) {
         return {
           operationStatusUrl: undefined,
@@ -186,19 +148,8 @@ export default class SelfServeExample extends SelfServeBaseClass {
   };
 
   /*
-  initialize()
-    - role: Set default values for the properties of this class.
-
-            The properties of this class (namely regions, enableLogging, accountName, dbThroughput, collectionThroughput),
-            having the @Values decorator, will each correspond to an UI element. Their values can be of 'InputType'. Their 
-            defaults can be set by setting values in a Map corresponding to the field's name.
-
-            Typically, you can make rest calls in the async initialize function, to fetch the initial values for
-            these fields. This is called after the onSave callback, to reinitialize the defaults.
-
-            In this example, the initialize function simply reads the SessionStorage to fetch the default values
-            for these fields. These are then set when the changes are submitted.
-    - returns: () => Promise<Map<string, InputType>>
+    In this example, the initialize function simply reads the SessionStorage to fetch the default values
+    for these fields. These are then set when the changes are submitted.
   */
   public initialize = async (): Promise<Map<string, SmartUiInput>> => {
     const initializeResponse = await initialize();
@@ -215,16 +166,6 @@ export default class SelfServeExample extends SelfServeBaseClass {
     return defaults;
   };
 
-  /*
-  @Values() :
-    - input: NumberInputOptions | StringInputOptions | BooleanInputOptions | ChoiceInputOptions | DescriptionDisplay
-    - role: Specifies the required options to display the property as 
-            a) TextBox for text input
-            b) Spinner/Slider for number input
-            c) Radio buton/Toggle for boolean input
-            d) Dropdown for choice input
-            e) Text (with optional hyperlink) for descriptions
-  */
   @Values({
     labelTKey: "DescriptionLabel",
     description: {
@@ -244,28 +185,12 @@ export default class SelfServeExample extends SelfServeBaseClass {
   })
   currentRegionText: string;
 
-  /*
-  @PropertyInfo()
-    - optional
-    - input: Info | () => Promise<Info>
-    - role: Display an Info bar above the UI element for this property.
-  */
   @PropertyInfo(regionDropdownInfo)
 
   /*
-  @OnChange()
-    - optional
-    - input: (currentValues: Map<string, InputType>, newValue: InputType, baselineValues: ReadonlyMap<string, SmartUiInput>) => Map<string, InputType>
-    - role: Takes a Map of current values, the newValue for this property and a ReadonlyMap of baselineValues as inputs. This is called when a property,
-            say prop1, changes its value in the UI. This can be used to 
-            a) Change the value (and reflect it in the UI) for prop2 based on prop1.
-            b) Change the visibility for prop2 in the UI, based on prop1
-
-            The new Map of propertyName -> value is returned.
-
-            In this example, the onRegionsChange function sets the enableLogging property to false (and disables
-            the corresponsing toggle UI) when "regions" is set to "North Central US", and enables the toggle for 
-            any other value of "regions"
+    In this example, the onRegionsChange function sets the enableLogging property to false (and disables
+    the corresponsing toggle UI) when "regions" is set to "North Central US", and enables the toggle for 
+    any other value of "regions"
   */
   @OnChange(onRegionsChange)
   @Values({ labelTKey: "Regions", choices: regionDropdownItems, placeholderTKey: "RegionsPlaceholder" })
diff --git a/src/SelfServe/Example/SelfServeExample.types.ts b/src/SelfServe/Example/SelfServeExample.types.ts
new file mode 100644
index 000000000..79e2726fa
--- /dev/null
+++ b/src/SelfServe/Example/SelfServeExample.types.ts
@@ -0,0 +1,13 @@
+export enum Regions {
+  NorthCentralUS = "NorthCentralUS",
+  WestUS = "WestUS",
+  EastUS2 = "EastUS2",
+}
+
+export interface AccountProps {
+  regions: Regions;
+  enableLogging: boolean;
+  accountName: string;
+  collectionThroughput: number;
+  dbThroughput: number;
+}
diff --git a/src/SelfServe/SelfServe.tsx b/src/SelfServe/SelfServe.tsx
index 27d868756..50f6eecf8 100644
--- a/src/SelfServe/SelfServe.tsx
+++ b/src/SelfServe/SelfServe.tsx
@@ -86,7 +86,7 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
   }
 
   const urlSearchParams = new URLSearchParams(window.location.search);
-  const selfServeTypeText = inputs.selfServeType || urlSearchParams.get("selfServeType");
+  const selfServeTypeText = urlSearchParams.get("selfServeType") || inputs.selfServeType;
   const selfServeType = SelfServeType[selfServeTypeText?.toLowerCase() as keyof typeof SelfServeType];
   if (
     !inputs.subscriptionId ||
diff --git a/src/SelfServe/SelfServeComponent.tsx b/src/SelfServe/SelfServeComponent.tsx
index 732c5df17..41ae52e02 100644
--- a/src/SelfServe/SelfServeComponent.tsx
+++ b/src/SelfServe/SelfServeComponent.tsx
@@ -17,6 +17,8 @@ import * as _ from "underscore";
 import { sendMessage } from "../Common/MessageHandler";
 import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
 import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
+import { trace } from "../Shared/Telemetry/TelemetryProcessor";
 import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
 import {
   AnyDisplay,
@@ -27,6 +29,7 @@ import {
   Node,
   NumberInput,
   RefreshResult,
+  SelfServeComponentTelemetryType,
   SelfServeDescriptor,
   SmartUiInput,
   StringInput,
@@ -87,6 +90,12 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
       }
     });
     this.initializeSmartUiComponent();
+
+    const telemetryData = {
+      selfServeClassName: this.props.descriptor.root.id,
+      eventType: SelfServeComponentTelemetryType.Load,
+    };
+    trace(Action.SelfServeComponent, ActionModifiers.Mark, telemetryData, SelfServeMessageTypes.TelemetryInfo);
   }
 
   constructor(props: SelfServeComponentProps) {
@@ -166,7 +175,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     const { baselineValues } = this.state;
     for (const key of currentValues.keys()) {
       const baselineValue = baselineValues.get(key);
-      currentValues = currentValues.set(key, { ...baselineValue });
+      currentValues = currentValues.set(key, baselineValue ? { ...baselineValue } : baselineValue);
     }
     this.setState({ currentValues });
   };
@@ -262,6 +271,12 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
   };
 
   public performSave = async (): Promise<void> => {
+    const telemetryData = {
+      selfServeClassName: this.props.descriptor.root.id,
+      eventType: SelfServeComponentTelemetryType.Save,
+    };
+    trace(Action.SelfServeComponent, ActionModifiers.Mark, telemetryData, SelfServeMessageTypes.TelemetryInfo);
+
     this.setState({ isSaving: true, notification: undefined });
     try {
       const onSaveResult = await this.props.descriptor.onSave(
diff --git a/src/SelfServe/SelfServeTelemetryProcessor.ts b/src/SelfServe/SelfServeTelemetryProcessor.ts
index 0cdf81a15..ac5376abc 100644
--- a/src/SelfServe/SelfServeTelemetryProcessor.ts
+++ b/src/SelfServe/SelfServeTelemetryProcessor.ts
@@ -1,24 +1,53 @@
+/**
+ * @module SelfServe/SelfServeTelemetryProcessor
+ */
+
 import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import { trace, traceCancel, traceFailure, traceStart, traceSuccess } from "../Shared/Telemetry/TelemetryProcessor";
 import { SelfServeTelemetryMessage } from "./SelfServeTypes";
 
+/**
+ * Log an action.
+ * @param data Data to be sent as part of the Self Serve Telemetry.
+ */
 export const selfServeTrace = (data: SelfServeTelemetryMessage): void => {
   trace(Action.SelfServe, ActionModifiers.Mark, data, SelfServeMessageTypes.TelemetryInfo);
 };
 
+/**
+ * Start logging an action.
+ * @param data Data to be sent as part of the Self Serve Telemetry.
+ * @returns Timestamp of the trace start, that can be used in other trace actions.
+ * The timestamp is used to identify all the logs associated with an action.
+ */
 export const selfServeTraceStart = (data: SelfServeTelemetryMessage): number => {
   return traceStart(Action.SelfServe, data, SelfServeMessageTypes.TelemetryInfo);
 };
 
+/**
+ * Log an action as a success.
+ * @param data Data to be sent as part of the Self Serve Telemetry.
+ * @param timestamp Timestamp of the action's start trace.
+ */
 export const selfServeTraceSuccess = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
   traceSuccess(Action.SelfServe, data, timestamp, SelfServeMessageTypes.TelemetryInfo);
 };
 
+/**
+ * Log an action as a failure.
+ * @param data Data to be sent as part of the Self Serve Telemetry.
+ * @param timestamp Timestamp of the action's start trace.
+ */
 export const selfServeTraceFailure = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
   traceFailure(Action.SelfServe, data, timestamp, SelfServeMessageTypes.TelemetryInfo);
 };
 
+/**
+ * Log an action as cancelled.
+ * @param data Data to be sent as part of the Self Serve Telemetry.
+ * @param timestamp Timestamp of the action's start trace.
+ */
 export const selfServeTraceCancel = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
   traceCancel(Action.SelfServe, data, timestamp, SelfServeMessageTypes.TelemetryInfo);
 };
diff --git a/src/SelfServe/SelfServeTypes.ts b/src/SelfServe/SelfServeTypes.ts
index 518d76fee..d6c96e031 100644
--- a/src/SelfServe/SelfServeTypes.ts
+++ b/src/SelfServe/SelfServeTypes.ts
@@ -1,3 +1,7 @@
+/**
+ * @module SelfServe/SelfServeTypes
+ */
+
 import { TelemetryData } from "../Shared/Telemetry/TelemetryProcessor";
 
 interface BaseInput {
@@ -13,6 +17,7 @@ interface BaseInput {
   placeholderTKey?: (() => Promise<string>) | string;
 }
 
+/**@internal */
 export interface NumberInput extends BaseInput {
   min: (() => Promise<number>) | number;
   max: (() => Promise<number>) | number;
@@ -21,25 +26,30 @@ export interface NumberInput extends BaseInput {
   uiType: NumberUiType;
 }
 
+/**@internal */
 export interface BooleanInput extends BaseInput {
   trueLabelTKey: (() => Promise<string>) | string;
   falseLabelTKey: (() => Promise<string>) | string;
   defaultValue?: boolean;
 }
 
+/**@internal */
 export interface StringInput extends BaseInput {
   defaultValue?: string;
 }
 
+/**@internal */
 export interface ChoiceInput extends BaseInput {
   choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
   defaultKey?: string;
 }
 
+/**@internal */
 export interface DescriptionDisplay extends BaseInput {
   description: (() => Promise<Description>) | Description;
 }
 
+/**@internal */
 export interface Node {
   id: string;
   info?: (() => Promise<Info>) | Info;
@@ -47,6 +57,7 @@ export interface Node {
   children?: Node[];
 }
 
+/**@internal */
 export interface SelfServeDescriptor {
   root: Node;
   initialize?: () => Promise<Map<string, SmartUiInput>>;
@@ -59,16 +70,57 @@ export interface SelfServeDescriptor {
   refreshParams?: RefreshParams;
 }
 
+/**@internal */
+export enum SelfServeComponentTelemetryType {
+  Load = "Load",
+  Save = "Save",
+}
+
+/**@internal */
 export type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
 
-export abstract class SelfServeBaseClass {
-  public abstract initialize: () => Promise<Map<string, SmartUiInput>>;
-  public abstract onSave: (
+/**@internal */
+export type InputTypeValue = "number" | "string" | "boolean" | "object";
+
+export type initializeCallback =
+  /**
+   * @returns Promise of Map of propertyName => {@linkcode SmartUiInput} which will become the current state of the UI.
+   */
+  () => Promise<Map<string, SmartUiInput>>;
+
+export type onSaveCallback =
+  /**
+   * @param currentValues - The map of propertyName => {@linkcode SmartUiInput} corresponding to the current state of the UI
+   * @param baselineValues - The map of propertyName => {@linkcode SmartUiInput} corresponding to the initial state of the UI
+   */
+  (
     currentValues: Map<string, SmartUiInput>,
     baselineValues: ReadonlyMap<string, SmartUiInput>
   ) => Promise<OnSaveResult>;
+
+/**
+ * All SelfServe feature classes need to derive from the SelfServeBaseClass
+ */
+export abstract class SelfServeBaseClass {
+  /**
+   * Sets default values for the properties of the Self Serve Class. Typically, you can make rest calls here
+   * to fetch the initial values for the properties. This is also called after the onSave callback, to reinitialize the defaults.
+   */
+  public abstract initialize: initializeCallback;
+
+  /**
+   * Callback that is triggerred when the submit button is clicked. You should perform your rest API
+   * calls here using the data from the different inputs passed as a Map to this callback function.
+   */
+  public abstract onSave: onSaveCallback;
+
+  /**
+   * Callback that is triggered when the refresh button is clicked. Here, you should perform the your rest API
+   * call to check if the update action is completed.
+   */
   public abstract onRefresh: () => Promise<RefreshResult>;
 
+  /**@internal */
   public toSelfServeDescriptor(): SelfServeDescriptor {
     const className = this.constructor.name;
     const selfServeDescriptor = Reflect.getMetadata(className, this) as SelfServeDescriptor;
@@ -95,73 +147,202 @@ export abstract class SelfServeBaseClass {
   }
 }
 
-export type InputTypeValue = "number" | "string" | "boolean" | "object";
+/**
+ * Function that dictates how the overall UI should transform when the UI element corresponding to a property, say prop1, is changed.
+ * The callback can be used to\
+ *           * Change the value (and reflect it in the UI) for another property, say prop2\
+ *           * Change the visibility for prop2 in the UI\
+ *           * Disable or enable the UI element corresponding to prop2\
+ * depending on logic based on the newValue of prop1, the currentValues Map and baselineValues Map.
+ */
+export type OnChangeCallback =
+  /**
+   * @param newValue - The newValue that the property needs to be set to, after the change in the UI element corresponding to this property.
+   * @param currentValues - The map of propertyName => {@linkcode SmartUiInput} corresponding to the current state of the UI.
+   * @param baselineValues - The map of propertyName => {@linkcode SmartUiInput} corresponding to the initial state of the UI.
+   * @returns A new Map of propertyName => {@linkcode SmartUiInput} corresponding to the new state of the overall UI
+   */
+  (
+    newValue: InputType,
+    currentValues: Map<string, SmartUiInput>,
+    baselineValues: ReadonlyMap<string, SmartUiInput>
+  ) => Map<string, SmartUiInput>;
 
 export enum NumberUiType {
+  /**
+   * The numeric input UI element corresponding to the property is a Spinner
+   */
   Spinner = "Spinner",
+  /**
+   * The numeric input UI element corresponding to the property is a Slider
+   */
   Slider = "Slider",
 }
 
-export type ChoiceItem = { labelTKey: string; key: string };
+export type ChoiceItem = {
+  /**
+   * Key used to pickup the string corresponding to the label of the dropdown choice item, from the strings JSON file.
+   */
+  labelTKey: string;
+  /**
+   * Key used to pickup the string that uniquely identifies the dropdown choice item, from the strings JSON file.
+   */
+  key: string;
+};
 
 export type InputType = number | string | boolean | ChoiceItem | Description;
 
+/**
+ * Data to be shown within the info bubble of the property.
+ */
 export interface Info {
+  /**
+   * Key used to pickup the string corresponding to the text to be shown within the info bubble, from the strings JSON file.
+   */
   messageTKey: string;
+  /**
+   * Optional link to be shown within the info bubble, after the text.
+   */
   link?: {
+    /**
+     * The URL of the link
+     */
     href: string;
+    /**
+     * Key used to pickup the string corresponding to the text of the link, from the strings JSON file.
+     */
     textTKey: string;
   };
 }
 
 export enum DescriptionType {
+  /**
+   * Show the description as a text
+   */
   Text,
+  /**
+   * Show the description as a Info Message bar.
+   */
   InfoMessageBar,
+  /**
+   * Show the description as a Warning Message bar.
+   */
   WarningMessageBar,
 }
 
+/**
+ * Data to be shown as a description.
+ */
 export interface Description {
+  /**
+   * Key used to pickup the string corresponding to the text to be shown as part of the description, from the strings JSON file.
+   */
   textTKey: string;
   type: DescriptionType;
+  /**
+   * Optional link to be shown as part of the description, after the text.
+   */
   link?: {
+    /**
+     * The URL of the link
+     */
     href: string;
+    /**
+     * Key used to pickup the string corresponding to the text of the link, from the strings JSON file.
+     */
     textTKey: string;
   };
 }
 
 export interface SmartUiInput {
+  /**
+   * The value to be set for the UI element corresponding to the property
+   */
   value: InputType;
+  /**
+   * Indicates whether the UI element corresponding to the property is hidden
+   */
   hidden?: boolean;
+  /**
+   * Indicates whether the UI element corresponding to the property is disabled
+   */
   disabled?: boolean;
 }
 
 export interface OnSaveResult {
+  /**
+   * The polling url returned by the RP call.
+   */
   operationStatusUrl: string;
+  /**
+   * Notifications that need to be shown on the portal for different stages of a scenario (initialized, success/failure).
+   */
   portalNotification?: {
+    /**
+     * Notification that need to be shown when the save operation has been triggered.
+     */
     initialize: {
+      /**
+       * Key used to pickup the string corresponding to the notification title, from the strings JSON file.
+       */
       titleTKey: string;
+      /**
+       * Key used to pickup the string corresponding to the notification message, from the strings JSON file.
+       */
       messageTKey: string;
     };
+    /**
+     * Notification that need to be shown when the save operation has successfully completed.
+     */
     success: {
+      /**
+       * Key used to pickup the string corresponding to the notification title, from the strings JSON file.
+       */
       titleTKey: string;
+      /**
+       * Key used to pickup the string corresponding to the notification message, from the strings JSON file.
+       */
       messageTKey: string;
     };
+    /**
+     * Notification that need to be shown when the save operation failed.
+     */
     failure: {
+      /**
+       * Key used to pickup the string corresponding to the notification title, from the strings JSON file.
+       */
       titleTKey: string;
+      /**
+       * Key used to pickup the string corresponding to the notification message, from the strings JSON file.
+       */
       messageTKey: string;
     };
   };
 }
 
 export interface RefreshResult {
+  /**
+   * Indicate if the update is still ongoing
+   */
   isUpdateInProgress: boolean;
+
+  /**
+   * Key used to pickup the string corresponding to the message that will be shown on the UI if the update is still ongoing, from the strings JSON file.
+   * Will be shown only if {@linkcode isUpdateInProgress} is true.
+   */
   updateInProgressMessageTKey: string;
 }
 
 export interface RefreshParams {
+  /**
+   * The time interval between refresh attempts when an update in ongoing
+   */
   retryIntervalInMs: number;
 }
 
 export interface SelfServeTelemetryMessage extends TelemetryData {
+  /**
+   * The className used to identify a SelfServe telemetry record
+   */
   selfServeClassName: string;
 }
diff --git a/src/SelfServe/SelfServeUtils.test.tsx b/src/SelfServe/SelfServeUtils.test.tsx
index 324d18f77..05016747c 100644
--- a/src/SelfServe/SelfServeUtils.test.tsx
+++ b/src/SelfServe/SelfServeUtils.test.tsx
@@ -190,7 +190,8 @@ describe("SelfServeUtils", () => {
               max: 5,
               step: 1,
               uiType: "Spinner",
-              errorMessage: "label, truelabel and falselabel are required for boolean input 'invalidThroughput'.",
+              errorMessage:
+                "labelTkey, trueLabelTKey and falseLabelTKey are required for boolean input 'invalidThroughput'.",
             },
             children: [] as Node[],
           },
@@ -225,7 +226,8 @@ describe("SelfServeUtils", () => {
               type: "boolean",
               labelTKey: "Invalid Enable Logging",
               placeholderTKey: "placeholder text",
-              errorMessage: "label, truelabel and falselabel are required for boolean input 'invalidEnableLogging'.",
+              errorMessage:
+                "labelTkey, trueLabelTKey and falseLabelTKey are required for boolean input 'invalidEnableLogging'.",
             },
             children: [] as Node[],
           },
@@ -252,7 +254,7 @@ describe("SelfServeUtils", () => {
               type: "object",
               labelTKey: "Invalid Regions",
               placeholderTKey: "placeholder text",
-              errorMessage: "label and choices are required for Choice input 'invalidRegions'.",
+              errorMessage: "labelTKey and choices are required for Choice input 'invalidRegions'.",
             },
             children: [] as Node[],
           },
diff --git a/src/SelfServe/SelfServeUtils.tsx b/src/SelfServe/SelfServeUtils.tsx
index e82084069..735cf5228 100644
--- a/src/SelfServe/SelfServeUtils.tsx
+++ b/src/SelfServe/SelfServeUtils.tsx
@@ -1,3 +1,7 @@
+/**
+ * @module SelfServe/SelfServeUtils
+ */
+
 import "reflect-metadata";
 import { userContext } from "../UserContext";
 import {
@@ -18,9 +22,10 @@ import {
   StringInput,
 } from "./SelfServeTypes";
 
+/**
+ * The type used to identify the Self Serve Class
+ */
 export enum SelfServeType {
-  // No self serve type passed, launch explorer
-  none = "none",
   // Unsupported self serve type passed as feature flag
   invalid = "invalid",
   // Add your self serve types here
@@ -28,15 +33,47 @@ export enum SelfServeType {
   sqlx = "sqlx",
 }
 
+/**
+ * Portal Blade types
+ */
 export enum BladeType {
+  /**
+   * Keys blade of a SQL API account.
+   */
   SqlKeys = "keys",
+  /**
+   * Keys blade of a Mongo API account.
+   */
   MongoKeys = "mongoDbKeys",
+  /**
+   * Keys blade of a Cassandra API account.
+   */
   CassandraKeys = "cassandraDbKeys",
+  /**
+   * Keys blade of a Gremlin API account.
+   */
   GremlinKeys = "keys",
+  /**
+   * Keys blade of a Table API account.
+   */
   TableKeys = "tableKeys",
+  /**
+   * Metrics blade of an Azure Cosmos DB account.
+   */
   Metrics = "metrics",
 }
 
+/**
+ * Generate the URL corresponding to the portal blade for the current Azure Cosmos DB account
+ */
+export const generateBladeLink = (blade: BladeType): string => {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroupName = userContext.resourceGroup;
+  const databaseAccountName = userContext.databaseAccount.name;
+  return `${document.referrer}#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
+};
+
+/**@internal */
 export interface DecoratorProperties {
   id: string;
   info?: (() => Promise<Info>) | Info;
@@ -62,6 +99,7 @@ export interface DecoratorProperties {
   ) => Map<string, SmartUiInput>;
 }
 
+/**@internal */
 const setValue = <T extends keyof DecoratorProperties, K extends DecoratorProperties[T]>(
   name: T,
   value: K,
@@ -70,10 +108,12 @@ const setValue = <T extends keyof DecoratorProperties, K extends DecoratorProper
   fieldObject[name] = value;
 };
 
+/**@internal */
 const getValue = <T extends keyof DecoratorProperties>(name: T, fieldObject: DecoratorProperties): unknown => {
   return fieldObject[name];
 };
 
+/**@internal */
 export const addPropertyToMap = <T extends keyof DecoratorProperties, K extends DecoratorProperties[T]>(
   target: unknown,
   propertyName: string,
@@ -88,6 +128,7 @@ export const addPropertyToMap = <T extends keyof DecoratorProperties, K extends
   Reflect.defineMetadata(className, context, target);
 };
 
+/**@internal */
 export const updateContextWithDecorator = <T extends keyof DecoratorProperties, K extends DecoratorProperties[T]>(
   context: Map<string, DecoratorProperties>,
   propertyName: string,
@@ -111,12 +152,14 @@ export const updateContextWithDecorator = <T extends keyof DecoratorProperties,
   context.set(propertyName, propertyObject);
 };
 
+/**@internal */
 export const buildSmartUiDescriptor = (className: string, target: unknown): void => {
   const context = Reflect.getMetadata(className, target) as Map<string, DecoratorProperties>;
   const smartUiDescriptor = mapToSmartUiDescriptor(context);
   Reflect.defineMetadata(className, smartUiDescriptor, target);
 };
 
+/**@internal */
 export const mapToSmartUiDescriptor = (context: Map<string, DecoratorProperties>): SelfServeDescriptor => {
   const inputNames: string[] = [];
   const root = context.get("root");
@@ -140,6 +183,7 @@ export const mapToSmartUiDescriptor = (context: Map<string, DecoratorProperties>
   return smartUiDescriptor;
 };
 
+/**@internal */
 const addToDescriptor = (
   context: Map<string, DecoratorProperties>,
   root: Node,
@@ -158,11 +202,12 @@ const addToDescriptor = (
   root.children.push(element);
 };
 
+/**@internal */
 const getInput = (value: DecoratorProperties): AnyDisplay => {
   switch (value.type) {
     case "number":
-      if (!value.labelTKey || !value.step || !value.uiType || !value.min || !value.max) {
-        value.errorMessage = `label, step, min, max and uiType are required for number input '${value.id}'.`;
+      if (!value.labelTKey || !value.uiType || !value.step || !value.max || value.min === undefined) {
+        value.errorMessage = `labelTkey, step, min, max and uiType are required for number input '${value.id}'.`;
       }
       return value as NumberInput;
     case "string":
@@ -173,25 +218,18 @@ const getInput = (value: DecoratorProperties): AnyDisplay => {
         return value as DescriptionDisplay;
       }
       if (!value.labelTKey) {
-        value.errorMessage = `label is required for string input '${value.id}'.`;
+        value.errorMessage = `labelTKey is required for string input '${value.id}'.`;
       }
       return value as StringInput;
     case "boolean":
       if (!value.labelTKey || !value.trueLabelTKey || !value.falseLabelTKey) {
-        value.errorMessage = `label, truelabel and falselabel are required for boolean input '${value.id}'.`;
+        value.errorMessage = `labelTkey, trueLabelTKey and falseLabelTKey are required for boolean input '${value.id}'.`;
       }
       return value as BooleanInput;
     default:
       if (!value.labelTKey || !value.choices) {
-        value.errorMessage = `label and choices are required for Choice input '${value.id}'.`;
+        value.errorMessage = `labelTKey and choices are required for Choice input '${value.id}'.`;
       }
       return value as ChoiceInput;
   }
 };
-
-export const generateBladeLink = (blade: BladeType): string => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const databaseAccountName = databaseAccount.name;
-
-  return `${document.referrer}#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
-};
diff --git a/src/SelfServe/SqlX/SqlX.rp.ts b/src/SelfServe/SqlX/SqlX.rp.ts
index b5a097fca..365422c57 100644
--- a/src/SelfServe/SqlX/SqlX.rp.ts
+++ b/src/SelfServe/SqlX/SqlX.rp.ts
@@ -1,10 +1,12 @@
-import { RefreshResult } from "../SelfServeTypes";
+import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
 import { armRequestWithoutPolling } from "../../Utils/arm/request";
-import { configContext } from "../../ConfigContext";
+import { selfServeTraceFailure, selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
+import { RefreshResult } from "../SelfServeTypes";
+import SqlX from "./SqlX";
 import { SqlxServiceResource, UpdateDedicatedGatewayRequestParameters } from "./SqlxTypes";
 
-const apiVersion = "2020-06-01-preview";
+const apiVersion = "2021-04-01-preview";
 
 export enum ResourceStatus {
   Running = "Running",
@@ -21,7 +23,7 @@ export interface DedicatedGatewayResponse {
 }
 
 export const getPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
-  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/sqlx`;
+  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/SqlDedicatedGateway`;
 };
 
 export const updateDedicatedGatewayResource = async (sku: string, instances: number): Promise<string> => {
@@ -30,39 +32,69 @@ export const updateDedicatedGatewayResource = async (sku: string, instances: num
     properties: {
       instanceSize: sku,
       instanceCount: instances,
-      serviceType: "Sqlx",
+      serviceType: "SqlDedicatedGateway",
     },
   };
-  const armRequestResult = await armRequestWithoutPolling({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "PUT",
-    apiVersion,
-    body,
-  });
-  return armRequestResult.operationStatusUrl;
+  const telemetryData = { ...body, httpMethod: "PUT", selfServeClassName: SqlX.name };
+  const updateTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "PUT",
+      apiVersion,
+      body,
+    });
+    selfServeTraceSuccess(telemetryData, updateTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { ...body, e, selfServeClassName: SqlX.name };
+    selfServeTraceFailure(failureTelemetry, updateTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.operationStatusUrl;
 };
 
 export const deleteDedicatedGatewayResource = async (): Promise<string> => {
   const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  const armRequestResult = await armRequestWithoutPolling({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "DELETE",
-    apiVersion,
-  });
-  return armRequestResult.operationStatusUrl;
+  const telemetryData = { httpMethod: "DELETE", selfServeClassName: SqlX.name };
+  const deleteTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "DELETE",
+      apiVersion,
+    });
+    selfServeTraceSuccess(telemetryData, deleteTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { e, selfServeClassName: SqlX.name };
+    selfServeTraceFailure(failureTelemetry, deleteTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.operationStatusUrl;
 };
 
 export const getDedicatedGatewayResource = async (): Promise<SqlxServiceResource> => {
   const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  const armRequestResult = await armRequestWithoutPolling<SqlxServiceResource>({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "GET",
-    apiVersion,
-  });
-  return armRequestResult.result;
+  const telemetryData = { httpMethod: "GET", selfServeClassName: SqlX.name };
+  const getResourceTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling<SqlxServiceResource>({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "GET",
+      apiVersion,
+    });
+    selfServeTraceSuccess(telemetryData, getResourceTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { e, selfServeClassName: SqlX.name };
+    selfServeTraceFailure(failureTelemetry, getResourceTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.result;
 };
 
 export const getCurrentProvisioningState = async (): Promise<DedicatedGatewayResponse> => {
diff --git a/src/SelfServe/SqlX/SqlX.tsx b/src/SelfServe/SqlX/SqlX.tsx
index a532c5244..c6a431ede 100644
--- a/src/SelfServe/SqlX/SqlX.tsx
+++ b/src/SelfServe/SqlX/SqlX.tsx
@@ -1,9 +1,10 @@
-import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
+import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
 import { selfServeTrace } from "../SelfServeTelemetryProcessor";
 import {
   ChoiceItem,
   Description,
   DescriptionType,
+  Info,
   InputType,
   NumberUiType,
   OnSaveResult,
@@ -23,7 +24,7 @@ const costPerHourValue: Description = {
   textTKey: "CostText",
   type: DescriptionType.Text,
   link: {
-    href: "https://azure.microsoft.com/en-us/pricing/details/cosmos-db/",
+    href: "https://aka.ms/cosmos-db-dedicated-gateway-pricing",
     textTKey: "DedicatedGatewayPricing",
   },
 };
@@ -37,43 +38,47 @@ const connectionStringValue: Description = {
   },
 };
 
+const metricsStringValue: Description = {
+  textTKey: "MetricsText",
+  type: DescriptionType.Text,
+  link: {
+    href: generateBladeLink(BladeType.Metrics),
+    textTKey: "MetricsBlade",
+  },
+};
+
 const CosmosD4s = "Cosmos.D4s";
 const CosmosD8s = "Cosmos.D8s";
 const CosmosD16s = "Cosmos.D16s";
-const CosmosD32s = "Cosmos.D32s";
-
-const getSKUDetails = (sku: string): string => {
-  if (sku === CosmosD4s) {
-    return "CosmosD4Details";
-  } else if (sku === CosmosD8s) {
-    return "CosmosD8Details";
-  } else if (sku === CosmosD16s) {
-    return "CosmosD16Details";
-  } else if (sku === CosmosD32s) {
-    return "CosmosD32Details";
-  }
-  return "Not Supported Yet";
-};
 
 const onSKUChange = (newValue: InputType, currentValues: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
   currentValues.set("sku", { value: newValue });
-  currentValues.set("skuDetails", {
-    value: { textTKey: getSKUDetails(`${newValue.toString()}`), type: DescriptionType.Text } as Description,
-  });
   currentValues.set("costPerHour", { value: costPerHourValue });
   return currentValues;
 };
 
 const onNumberOfInstancesChange = (
   newValue: InputType,
-  currentValues: Map<string, SmartUiInput>
+  currentValues: Map<string, SmartUiInput>,
+  baselineValues: Map<string, SmartUiInput>
 ): Map<string, SmartUiInput> => {
   currentValues.set("instances", { value: newValue });
-  currentValues.set("warningBanner", {
-    value: { textTKey: "WarningBannerOnUpdate" } as Description,
-    hidden: false,
-  });
-
+  const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
+  const baselineInstances = baselineValues.get("instances")?.value as number;
+  if (!dedicatedGatewayOriginallyEnabled || baselineInstances !== newValue) {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnUpdate",
+        link: {
+          href: "https://aka.ms/cosmos-db-dedicated-gateway-overview",
+          textTKey: "DedicatedGatewayPricing",
+        },
+      } as Description,
+      hidden: false,
+    });
+  } else {
+    currentValues.set("warningBanner", undefined);
+  }
   return currentValues;
 };
 
@@ -87,10 +92,10 @@ const onEnableDedicatedGatewayChange = (
   if (dedicatedGatewayOriginallyEnabled === newValue) {
     currentValues.set("sku", baselineValues.get("sku"));
     currentValues.set("instances", baselineValues.get("instances"));
-    currentValues.set("skuDetails", baselineValues.get("skuDetails"));
     currentValues.set("costPerHour", baselineValues.get("costPerHour"));
     currentValues.set("warningBanner", baselineValues.get("warningBanner"));
     currentValues.set("connectionString", baselineValues.get("connectionString"));
+    currentValues.set("metricsString", baselineValues.get("metricsString"));
     return currentValues;
   }
 
@@ -100,7 +105,7 @@ const onEnableDedicatedGatewayChange = (
       value: {
         textTKey: "WarningBannerOnUpdate",
         link: {
-          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+          href: "https://aka.ms/cosmos-db-dedicated-gateway-pricing",
           textTKey: "DedicatedGatewayPricing",
         },
       } as Description,
@@ -111,7 +116,7 @@ const onEnableDedicatedGatewayChange = (
       value: {
         textTKey: "WarningBannerOnDelete",
         link: {
-          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+          href: "https://aka.ms/cosmos-db-dedicated-gateway-overview",
           textTKey: "DeprovisioningDetailsText",
         },
       } as Description,
@@ -132,18 +137,17 @@ const onEnableDedicatedGatewayChange = (
     disabled: dedicatedGatewayOriginallyEnabled,
   });
 
-  currentValues.set("skuDetails", {
-    value: { textTKey: getSKUDetails(`${currentValues.get("sku").value}`), type: DescriptionType.Text } as Description,
-    hidden: hideAttributes,
-    disabled: dedicatedGatewayOriginallyEnabled,
-  });
-
   currentValues.set("costPerHour", { value: costPerHourValue, hidden: hideAttributes });
   currentValues.set("connectionString", {
     value: connectionStringValue,
     hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
   });
 
+  currentValues.set("metricsString", {
+    value: metricsStringValue,
+    hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
+  });
+
   return currentValues;
 };
 
@@ -151,7 +155,6 @@ const skuDropDownItems: ChoiceItem[] = [
   { labelTKey: "CosmosD4s", key: CosmosD4s },
   { labelTKey: "CosmosD8s", key: CosmosD8s },
   { labelTKey: "CosmosD16s", key: CosmosD16s },
-  { labelTKey: "CosmosD32s", key: CosmosD32s },
 ];
 
 const getSkus = async (): Promise<ChoiceItem[]> => {
@@ -166,6 +169,14 @@ const getInstancesMax = async (): Promise<number> => {
   return 5;
 };
 
+const NumberOfInstancesDropdownInfo: Info = {
+  messageTKey: "ResizingDecisionText",
+  link: {
+    href: "https://aka.ms/cosmos-db-dedicated-gateway-size",
+    textTKey: "ResizingDecisionLink",
+  },
+};
+
 @IsDisplayable()
 @RefreshOptions({ retryIntervalInMs: 20000 })
 export default class SqlX extends SelfServeBaseClass {
@@ -184,7 +195,6 @@ export default class SqlX extends SelfServeBaseClass {
 
     currentValues.set("warningBanner", undefined);
 
-    //TODO : Add try catch for each RP call and return relevant notifications
     if (dedicatedGatewayOriginallyEnabled) {
       if (!dedicatedGatewayCurrentlyEnabled) {
         const operationStatusUrl = await deleteDedicatedGatewayResource();
@@ -206,9 +216,11 @@ export default class SqlX extends SelfServeBaseClass {
           },
         };
       } else {
-        // Check for scaling up/down/in/out
+        const sku = currentValues.get("sku")?.value as string;
+        const instances = currentValues.get("instances").value as number;
+        const operationStatusUrl = await updateDedicatedGatewayResource(sku, instances);
         return {
-          operationStatusUrl: undefined,
+          operationStatusUrl: operationStatusUrl,
           portalNotification: {
             initialize: {
               titleTKey: "UpdateInitializeTitle",
@@ -255,26 +267,29 @@ export default class SqlX extends SelfServeBaseClass {
     defaults.set("enableDedicatedGateway", { value: false });
     defaults.set("sku", { value: CosmosD4s, hidden: true });
     defaults.set("instances", { value: await getInstancesMin(), hidden: true });
-    defaults.set("skuDetails", undefined);
     defaults.set("costPerHour", undefined);
     defaults.set("connectionString", undefined);
+    defaults.set("metricsString", {
+      value: undefined,
+      hidden: true,
+    });
 
     const response = await getCurrentProvisioningState();
     if (response.status && response.status !== "Deleting") {
       defaults.set("enableDedicatedGateway", { value: true });
       defaults.set("sku", { value: response.sku, disabled: true });
-      defaults.set("instances", { value: response.instances, disabled: true });
+      defaults.set("instances", { value: response.instances, disabled: false });
       defaults.set("costPerHour", { value: costPerHourValue });
-      defaults.set("skuDetails", {
-        value: { textTKey: getSKUDetails(`${defaults.get("sku").value}`), type: DescriptionType.Text } as Description,
-        hidden: false,
-      });
       defaults.set("connectionString", {
         value: connectionStringValue,
         hidden: false,
       });
-    }
 
+      defaults.set("metricsString", {
+        value: metricsStringValue,
+        hidden: false,
+      });
+    }
     defaults.set("warningBanner", undefined);
     return defaults;
   };
@@ -289,7 +304,7 @@ export default class SqlX extends SelfServeBaseClass {
       textTKey: "DedicatedGatewayDescription",
       type: DescriptionType.Text,
       link: {
-        href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+        href: "https://aka.ms/cosmos-db-dedicated-gateway-overview",
         textTKey: "LearnAboutDedicatedGateway",
       },
     },
@@ -312,13 +327,8 @@ export default class SqlX extends SelfServeBaseClass {
   })
   sku: ChoiceItem;
 
-  @Values({
-    labelTKey: "SKUDetails",
-    isDynamicDescription: true,
-  })
-  skuDetails: string;
-
   @OnChange(onNumberOfInstancesChange)
+  @PropertyInfo(NumberOfInstancesDropdownInfo)
   @Values({
     labelTKey: "NumberOfInstances",
     min: getInstancesMin,
@@ -339,4 +349,10 @@ export default class SqlX extends SelfServeBaseClass {
     isDynamicDescription: true,
   })
   connectionString: string;
+
+  @Values({
+    labelTKey: "MonitorUsage",
+    description: metricsStringValue,
+  })
+  metricsString: string;
 }
diff --git a/src/Shared/AddCollectionUtility.ts b/src/Shared/AddCollectionUtility.ts
index c81319a62..7e11d8b82 100644
--- a/src/Shared/AddCollectionUtility.ts
+++ b/src/Shared/AddCollectionUtility.ts
@@ -1,6 +1,6 @@
 import { any } from "underscore";
-import { CollectionCreationDefaults } from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
+import { CollectionCreationDefaults } from "../UserContext";
 
 export const getMaxThroughput = (defaults: CollectionCreationDefaults, container: Explorer): number => {
   const throughput = defaults.throughput.unlimited;
diff --git a/src/Shared/Constants.ts b/src/Shared/Constants.ts
index b242cb67f..97a9349c5 100644
--- a/src/Shared/Constants.ts
+++ b/src/Shared/Constants.ts
@@ -187,42 +187,6 @@ export const CollectionCreationDefaults = {
   },
 } as const;
 
-export class IndexingPolicies {
-  public static SharedDatabaseDefault = {
-    indexingMode: "consistent",
-    automatic: true,
-    includedPaths: <any>[],
-    excludedPaths: [
-      {
-        path: "/*",
-      },
-    ],
-  };
-
-  public static AllPropertiesIndexed = {
-    indexingMode: "consistent",
-    automatic: true,
-    includedPaths: [
-      {
-        path: "/*",
-        indexes: [
-          {
-            kind: "Range",
-            dataType: "Number",
-            precision: -1,
-          },
-          {
-            kind: "Range",
-            dataType: "String",
-            precision: -1,
-          },
-        ],
-      },
-    ],
-    excludedPaths: <any>[],
-  };
-}
-
 export class SubscriptionUtilMappings {
   public static FreeTierSubscriptionIds: string[] = [
     "b8f2ff04-0a81-4cf9-95ef-5828d16981d2",
@@ -237,3 +201,8 @@ export class SubscriptionUtilMappings {
 export class AutopilotDocumentation {
   public static Url: string = "https://aka.ms/cosmos-autoscale-info";
 }
+
+export class FreeTierLimits {
+  public static RU: number = 1000;
+  public static Storage: number = 25;
+}
diff --git a/src/Shared/Telemetry/TelemetryConstants.ts b/src/Shared/Telemetry/TelemetryConstants.ts
index 058937df9..134340ad4 100644
--- a/src/Shared/Telemetry/TelemetryConstants.ts
+++ b/src/Shared/Telemetry/TelemetryConstants.ts
@@ -117,6 +117,7 @@ export enum Action {
   SelfServe,
   ExpandAddCollectionPaneAdvancedSection,
   SchemaAnalyzerClickAnalyze,
+  SelfServeComponent,
 }
 
 export const ActionModifiers = {
diff --git a/src/SparkClusterManager/ArcadiaResourceManager.ts b/src/SparkClusterManager/ArcadiaResourceManager.ts
deleted file mode 100644
index cbfa68a58..000000000
--- a/src/SparkClusterManager/ArcadiaResourceManager.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  ArcadiaWorkspace,
-  ArcadiaWorkspaceFeedResponse,
-  SparkPool,
-  SparkPoolFeedResponse,
-} from "../Contracts/DataModels";
-import { ArmApiVersions, ArmResourceTypes } from "../Common/Constants";
-import { IResourceProviderClient, IResourceProviderClientFactory } from "../ResourceProvider/IResourceProviderClient";
-import * as Logger from "../Common/Logger";
-import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
-import { getErrorMessage } from "../Common/ErrorHandlingUtils";
-
-export class ArcadiaResourceManager {
-  private resourceProviderClientFactory: IResourceProviderClientFactory<any>;
-
-  constructor() {
-    this.resourceProviderClientFactory = new ResourceProviderClientFactory();
-  }
-
-  public async getWorkspacesAsync(arcadiaResourceId: string): Promise<ArcadiaWorkspace[]> {
-    const uri = `${arcadiaResourceId}/workspaces`;
-    try {
-      const response = (await this._rpClient(uri).getAsync(
-        uri,
-        ArmApiVersions.arcadia
-      )) as ArcadiaWorkspaceFeedResponse;
-      return response && response.value;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaResourceManager/getWorkspaceAsync");
-      throw error;
-    }
-  }
-
-  public async getWorkspaceAsync(arcadiaResourceId: string, workspaceId: string): Promise<ArcadiaWorkspace> {
-    const uri = `${arcadiaResourceId}/workspaces/${workspaceId}`;
-    try {
-      return (await this._rpClient(uri).getAsync(uri, ArmApiVersions.arcadia)) as ArcadiaWorkspace;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaResourceManager/getWorkspaceAsync");
-      throw error;
-    }
-  }
-
-  public async listWorkspacesAsync(subscriptionIds: string[]): Promise<ArcadiaWorkspace[]> {
-    let uriFilter = `$filter=(resourceType eq '${ArmResourceTypes.synapseWorkspaces.toLowerCase()}')`;
-    if (subscriptionIds && subscriptionIds.length) {
-      uriFilter += ` and (${"subscriptionId eq '" + subscriptionIds.join("' or subscriptionId eq '") + "'"})`;
-    }
-    const uri = "/resources";
-    try {
-      const response = (await this._rpClient(uri + uriFilter).getAsync(
-        uri,
-        ArmApiVersions.arm,
-        uriFilter
-      )) as ArcadiaWorkspaceFeedResponse;
-      return response && response.value;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaManager/listWorkspacesAsync");
-      throw error;
-    }
-  }
-
-  public async listSparkPoolsAsync(resourceId: string): Promise<SparkPool[]> {
-    let uri = `${resourceId}/bigDataPools`;
-
-    try {
-      const response = (await this._rpClient(uri).getAsync(uri, ArmApiVersions.arcadia)) as SparkPoolFeedResponse;
-      return response && response.value;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaManager/listSparkPoolsAsync");
-      throw error;
-    }
-  }
-
-  private _rpClient<TResource>(uri: string): IResourceProviderClient<TResource> {
-    return this.resourceProviderClientFactory.getOrCreate(uri);
-  }
-}
diff --git a/src/Terminal/index.ts b/src/Terminal/index.ts
index eb272a1a5..02524eaad 100644
--- a/src/Terminal/index.ts
+++ b/src/Terminal/index.ts
@@ -1,11 +1,11 @@
-import "@jupyterlab/terminal/style/index.css";
-import "./index.css";
 import { ServerConnection } from "@jupyterlab/services";
-import { JupyterLabAppFactory } from "./JupyterLabAppFactory";
+import "@jupyterlab/terminal/style/index.css";
+import { HttpHeaders, TerminalQueryParams } from "../Common/Constants";
 import { Action } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../UserContext";
-import { HttpHeaders, TerminalQueryParams } from "../Common/Constants";
+import "./index.css";
+import { JupyterLabAppFactory } from "./JupyterLabAppFactory";
 
 const getUrlVars = (): { [key: string]: string } => {
   const vars: { [key: string]: string } = {};
@@ -50,7 +50,7 @@ const createServerSettings = (urlVars: { [key: string]: string }): ServerConnect
 const main = async (): Promise<void> => {
   const urlVars = getUrlVars();
 
-  // Initialize userContext. Currently only subscrptionId is required by TelemetryProcessor
+  // Initialize userContext. Currently only subscriptionId is required by TelemetryProcessor
   updateUserContext({
     subscriptionId: urlVars[TerminalQueryParams.SubscriptionId],
   });
diff --git a/src/UserContext.ts b/src/UserContext.ts
index 0cbec9226..78b68ffec 100644
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -2,7 +2,25 @@ import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import { SubscriptionType } from "./Contracts/SubscriptionType";
 import { extractFeatures, Features } from "./Platform/Hosted/extractFeatures";
-import { CollectionCreation } from "./Shared/Constants";
+import { CollectionCreation, CollectionCreationDefaults } from "./Shared/Constants";
+
+interface ThroughputDefaults {
+  fixed: number;
+  unlimited:
+    | number
+    | {
+        collectionThreshold: number;
+        lessThanOrEqualToThreshold: number;
+        greatThanThreshold: number;
+      };
+  unlimitedmax: number;
+  unlimitedmin: number;
+  shared: number;
+}
+export interface CollectionCreationDefaults {
+  storage: string;
+  throughput: ThroughputDefaults;
+}
 
 interface UserContext {
   readonly authType?: AuthType;
@@ -11,6 +29,7 @@ interface UserContext {
   readonly resourceGroup?: string;
   readonly databaseAccount?: DatabaseAccount;
   readonly endpoint?: string;
+  readonly aadToken?: string;
   readonly accessToken?: string;
   readonly authorizationToken?: string;
   readonly resourceToken?: string;
@@ -25,6 +44,7 @@ interface UserContext {
   readonly features: Features;
   readonly addCollectionFlight: string;
   readonly hasWriteAccess: boolean;
+  collectionCreationDefaults: CollectionCreationDefaults;
 }
 
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
@@ -42,6 +62,7 @@ const userContext: UserContext = {
   useSDKOperations,
   addCollectionFlight: CollectionCreation.DefaultAddCollectionDefaultFlight,
   subscriptionType: CollectionCreation.DefaultSubscriptionType,
+  collectionCreationDefaults: CollectionCreationDefaults,
 };
 
 function updateUserContext(newContext: Partial<UserContext>): void {
diff --git a/src/Utils/NotebookConfigurationUtils.ts b/src/Utils/NotebookConfigurationUtils.ts
index 2159a9162..9151b6f40 100644
--- a/src/Utils/NotebookConfigurationUtils.ts
+++ b/src/Utils/NotebookConfigurationUtils.ts
@@ -1,6 +1,6 @@
-import * as DataModels from "../Contracts/DataModels";
-import * as Logger from "../Common/Logger";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
+import * as Logger from "../Common/Logger";
+import * as DataModels from "../Contracts/DataModels";
 
 interface KernelConnectionMetadata {
   name: string;
@@ -64,14 +64,13 @@ export const configureServiceEndpoints = async (
     return Promise.reject("Invalid or missing cluster connection info");
   }
 
-  const dataExplorer = window.dataExplorer;
   const notebookEndpointInfo: DataModels.NotebookConfigurationEndpointInfo[] = clusterConnectionInfo.endpoints.map(
     (clusterEndpoint) => ({
       type: clusterEndpoint.kind.toLowerCase(),
       endpoint: clusterEndpoint && clusterEndpoint.endpoint,
       username: clusterConnectionInfo.userName,
       password: clusterConnectionInfo.password,
-      token: dataExplorer && dataExplorer.arcadiaToken(),
+      token: "", // TODO. This was arcadiaToken() when our synapse/spark integration comes back
     })
   );
   const configurationEndpoints: DataModels.NotebookConfigurationEndpoints = {
diff --git a/src/Utils/PricingUtils.ts b/src/Utils/PricingUtils.ts
index a3b75e2e7..09b16373e 100644
--- a/src/Utils/PricingUtils.ts
+++ b/src/Utils/PricingUtils.ts
@@ -267,9 +267,11 @@ export function getUpsellMessage(
   if (isFreeTier) {
     const collectionName = getCollectionName().toLocaleLowerCase();
     const resourceType = isCollection ? collectionName : "database";
+    const freeTierMaxRU = Constants.FreeTierLimits.RU;
+    const freeTierMaxStorage = Constants.FreeTierLimits.Storage;
     return isFirstResourceCreated
-      ? `The free tier discount of 400 RU/s has already been applied to a database or ${collectionName} in this account. Billing will apply to this ${resourceType} after it is created.`
-      : `With free tier, you'll get the first 400 RU/s and 5 GB of storage in this account for free. Billing will apply if you provision more than 400 RU/s of manual throughput, or if the ${resourceType} scales beyond 400 RU/s with autoscale.`;
+      ? `Your account currently has at least 1 database or ${collectionName} with provisioned RU/s. Billing will apply to this ${resourceType} if the total RU/s in your account exceeds ${freeTierMaxRU} RU/s.`
+      : `With free tier, you'll get the first ${freeTierMaxRU} RU/s and ${freeTierMaxStorage} GB of storage in this account for free. Billing will apply if you provision more than ${freeTierMaxRU} RU/s of manual throughput, or if the ${resourceType} scales beyond ${freeTierMaxRU} RU/s with autoscale.`;
   } else {
     let price: number = Constants.OfferPricing.MonthlyPricing.default.Standard.StartingPrice;
 
diff --git a/src/Utils/QueryUtils.test.ts b/src/Utils/QueryUtils.test.ts
index 76e525a06..820a64e49 100644
--- a/src/Utils/QueryUtils.test.ts
+++ b/src/Utils/QueryUtils.test.ts
@@ -1,6 +1,6 @@
-import * as DataModels from "../Contracts/DataModels";
 import * as Q from "q";
 import * as sinon from "sinon";
+import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import * as QueryUtils from "./QueryUtils";
 
@@ -8,7 +8,7 @@ describe("Query Utils", () => {
   function generatePartitionKeyForPath(path: string): DataModels.PartitionKey {
     return {
       paths: [path],
-      kind: "hash",
+      kind: "Hash",
       version: 2,
     };
   }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/cassandraResources.ts b/src/Utils/arm/generatedClients/cosmos/cassandraResources.ts
similarity index 94%
rename from src/Utils/arm/generatedClients/2020-04-01/cassandraResources.ts
rename to src/Utils/arm/generatedClients/cosmos/cassandraResources.ts
index 924f30bb6..d843d4c15 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/cassandraResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/cassandraResources.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists the Cassandra keyspaces under an existing Azure Cosmos DB database account. */
 export async function listCassandraKeyspaces(
@@ -82,7 +84,7 @@ export async function migrateCassandraKeyspaceToAutoscale(
   resourceGroupName: string,
   accountName: string,
   keyspaceName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/cassandraKeyspaces/${keyspaceName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -93,7 +95,7 @@ export async function migrateCassandraKeyspaceToManualThroughput(
   resourceGroupName: string,
   accountName: string,
   keyspaceName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/cassandraKeyspaces/${keyspaceName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -178,7 +180,7 @@ export async function migrateCassandraTableToAutoscale(
   accountName: string,
   keyspaceName: string,
   tableName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/cassandraKeyspaces/${keyspaceName}/tables/${tableName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -190,7 +192,7 @@ export async function migrateCassandraTableToManualThroughput(
   accountName: string,
   keyspaceName: string,
   tableName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/cassandraKeyspaces/${keyspaceName}/tables/${tableName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/collection.ts b/src/Utils/arm/generatedClients/cosmos/collection.ts
similarity index 86%
rename from src/Utils/arm/generatedClients/2020-04-01/collection.ts
rename to src/Utils/arm/generatedClients/cosmos/collection.ts
index 307cd91f6..ab92b2219 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/collection.ts
+++ b/src/Utils/arm/generatedClients/cosmos/collection.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given database account and collection. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/collectionPartition.ts b/src/Utils/arm/generatedClients/cosmos/collectionPartition.ts
similarity index 82%
rename from src/Utils/arm/generatedClients/2020-04-01/collectionPartition.ts
rename to src/Utils/arm/generatedClients/cosmos/collectionPartition.ts
index d0dad687c..400502e7a 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/collectionPartition.ts
+++ b/src/Utils/arm/generatedClients/cosmos/collectionPartition.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given collection, split by partition. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/collectionPartitionRegion.ts b/src/Utils/arm/generatedClients/cosmos/collectionPartitionRegion.ts
similarity index 73%
rename from src/Utils/arm/generatedClients/2020-04-01/collectionPartitionRegion.ts
rename to src/Utils/arm/generatedClients/cosmos/collectionPartitionRegion.ts
index 8b49edc80..4ef525b35 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/collectionPartitionRegion.ts
+++ b/src/Utils/arm/generatedClients/cosmos/collectionPartitionRegion.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given collection and region, split by partition. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/collectionRegion.ts b/src/Utils/arm/generatedClients/cosmos/collectionRegion.ts
similarity index 73%
rename from src/Utils/arm/generatedClients/2020-04-01/collectionRegion.ts
rename to src/Utils/arm/generatedClients/cosmos/collectionRegion.ts
index 2c149656e..9669d8b1f 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/collectionRegion.ts
+++ b/src/Utils/arm/generatedClients/cosmos/collectionRegion.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given database account, collection and region. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/database.ts b/src/Utils/arm/generatedClients/cosmos/database.ts
similarity index 85%
rename from src/Utils/arm/generatedClients/2020-04-01/database.ts
rename to src/Utils/arm/generatedClients/cosmos/database.ts
index eeec5ce07..1bf4cf8c5 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/database.ts
+++ b/src/Utils/arm/generatedClients/cosmos/database.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given database account and database. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/databaseAccountRegion.ts b/src/Utils/arm/generatedClients/cosmos/databaseAccountRegion.ts
similarity index 70%
rename from src/Utils/arm/generatedClients/2020-04-01/databaseAccountRegion.ts
rename to src/Utils/arm/generatedClients/cosmos/databaseAccountRegion.ts
index 1dbb7159b..ca69022b0 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/databaseAccountRegion.ts
+++ b/src/Utils/arm/generatedClients/cosmos/databaseAccountRegion.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given database account and region. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/databaseAccounts.ts b/src/Utils/arm/generatedClients/cosmos/databaseAccounts.ts
similarity index 96%
rename from src/Utils/arm/generatedClients/2020-04-01/databaseAccounts.ts
rename to src/Utils/arm/generatedClients/cosmos/databaseAccounts.ts
index 499213664..87b00b24b 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/databaseAccounts.ts
+++ b/src/Utils/arm/generatedClients/cosmos/databaseAccounts.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the properties of an existing Azure Cosmos DB database account. */
 export async function get(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/gremlinResources.ts b/src/Utils/arm/generatedClients/cosmos/gremlinResources.ts
similarity index 94%
rename from src/Utils/arm/generatedClients/2020-04-01/gremlinResources.ts
rename to src/Utils/arm/generatedClients/cosmos/gremlinResources.ts
index 26a1fa5b2..572ef4859 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/gremlinResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/gremlinResources.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists the Gremlin databases under an existing Azure Cosmos DB database account. */
 export async function listGremlinDatabases(
@@ -82,7 +84,7 @@ export async function migrateGremlinDatabaseToAutoscale(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/gremlinDatabases/${databaseName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -93,7 +95,7 @@ export async function migrateGremlinDatabaseToManualThroughput(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/gremlinDatabases/${databaseName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -178,7 +180,7 @@ export async function migrateGremlinGraphToAutoscale(
   accountName: string,
   databaseName: string,
   graphName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/gremlinDatabases/${databaseName}/graphs/${graphName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -190,7 +192,7 @@ export async function migrateGremlinGraphToManualThroughput(
   accountName: string,
   databaseName: string,
   graphName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/gremlinDatabases/${databaseName}/graphs/${graphName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/mongoDBResources.ts b/src/Utils/arm/generatedClients/cosmos/mongoDBResources.ts
similarity index 93%
rename from src/Utils/arm/generatedClients/2020-04-01/mongoDBResources.ts
rename to src/Utils/arm/generatedClients/cosmos/mongoDBResources.ts
index e3a3e9439..61f2ee5ae 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/mongoDBResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/mongoDBResources.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists the MongoDB databases under an existing Azure Cosmos DB database account. */
 export async function listMongoDBDatabases(
@@ -71,7 +73,7 @@ export async function updateMongoDBDatabaseThroughput(
   accountName: string,
   databaseName: string,
   body: Types.ThroughputSettingsUpdateParameters
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/mongodbDatabases/${databaseName}/throughputSettings/default`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
 }
@@ -82,7 +84,7 @@ export async function migrateMongoDBDatabaseToAutoscale(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/mongodbDatabases/${databaseName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -93,7 +95,7 @@ export async function migrateMongoDBDatabaseToManualThroughput(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/mongodbDatabases/${databaseName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -178,7 +180,7 @@ export async function migrateMongoDBCollectionToAutoscale(
   accountName: string,
   databaseName: string,
   collectionName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/mongodbDatabases/${databaseName}/collections/${collectionName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -190,7 +192,7 @@ export async function migrateMongoDBCollectionToManualThroughput(
   accountName: string,
   databaseName: string,
   collectionName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/mongodbDatabases/${databaseName}/collections/${collectionName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/operations.ts b/src/Utils/arm/generatedClients/cosmos/operations.ts
similarity index 61%
rename from src/Utils/arm/generatedClients/2020-04-01/operations.ts
rename to src/Utils/arm/generatedClients/cosmos/operations.ts
index 31de2d66e..db16f7bfc 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/operations.ts
+++ b/src/Utils/arm/generatedClients/cosmos/operations.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists all of the available Cosmos DB Resource Provider operations. */
 export async function list(): Promise<Types.OperationListResult> {
diff --git a/src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeId.ts b/src/Utils/arm/generatedClients/cosmos/partitionKeyRangeId.ts
similarity index 73%
rename from src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeId.ts
rename to src/Utils/arm/generatedClients/cosmos/partitionKeyRangeId.ts
index 4b6a64d64..20c85cdd2 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeId.ts
+++ b/src/Utils/arm/generatedClients/cosmos/partitionKeyRangeId.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given partition key range id. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeIdRegion.ts b/src/Utils/arm/generatedClients/cosmos/partitionKeyRangeIdRegion.ts
similarity index 74%
rename from src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeIdRegion.ts
rename to src/Utils/arm/generatedClients/cosmos/partitionKeyRangeIdRegion.ts
index 7655610ef..eb8a00b9b 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/partitionKeyRangeIdRegion.ts
+++ b/src/Utils/arm/generatedClients/cosmos/partitionKeyRangeIdRegion.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given partition key range id and region. */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/percentile.ts b/src/Utils/arm/generatedClients/cosmos/percentile.ts
similarity index 71%
rename from src/Utils/arm/generatedClients/2020-04-01/percentile.ts
rename to src/Utils/arm/generatedClients/cosmos/percentile.ts
index 946b35219..f30a503fd 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/percentile.ts
+++ b/src/Utils/arm/generatedClients/cosmos/percentile.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given database account. This url is only for PBS and Replication Latency data */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/percentileSourceTarget.ts b/src/Utils/arm/generatedClients/cosmos/percentileSourceTarget.ts
similarity index 74%
rename from src/Utils/arm/generatedClients/2020-04-01/percentileSourceTarget.ts
rename to src/Utils/arm/generatedClients/cosmos/percentileSourceTarget.ts
index df90f5ac7..37a3f841c 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/percentileSourceTarget.ts
+++ b/src/Utils/arm/generatedClients/cosmos/percentileSourceTarget.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given account, source and target region. This url is only for PBS and Replication Latency data */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/percentileTarget.ts b/src/Utils/arm/generatedClients/cosmos/percentileTarget.ts
similarity index 72%
rename from src/Utils/arm/generatedClients/2020-04-01/percentileTarget.ts
rename to src/Utils/arm/generatedClients/cosmos/percentileTarget.ts
index f729c4a92..a318d5dd1 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/percentileTarget.ts
+++ b/src/Utils/arm/generatedClients/cosmos/percentileTarget.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Retrieves the metrics determined by the given filter for the given account target region. This url is only for PBS and Replication Latency data */
 export async function listMetrics(
diff --git a/src/Utils/arm/generatedClients/2020-04-01/sqlResources.ts b/src/Utils/arm/generatedClients/cosmos/sqlResources.ts
similarity index 96%
rename from src/Utils/arm/generatedClients/2020-04-01/sqlResources.ts
rename to src/Utils/arm/generatedClients/cosmos/sqlResources.ts
index 7755731c2..40c68fb86 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/sqlResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/sqlResources.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists the SQL databases under an existing Azure Cosmos DB database account. */
 export async function listSqlDatabases(
@@ -82,7 +84,7 @@ export async function migrateSqlDatabaseToAutoscale(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/sqlDatabases/${databaseName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -93,7 +95,7 @@ export async function migrateSqlDatabaseToManualThroughput(
   resourceGroupName: string,
   accountName: string,
   databaseName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/sqlDatabases/${databaseName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -178,7 +180,7 @@ export async function migrateSqlContainerToAutoscale(
   accountName: string,
   databaseName: string,
   containerName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/sqlDatabases/${databaseName}/containers/${containerName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -190,7 +192,7 @@ export async function migrateSqlContainerToManualThroughput(
   accountName: string,
   databaseName: string,
   containerName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/sqlDatabases/${databaseName}/containers/${containerName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/tableResources.ts b/src/Utils/arm/generatedClients/cosmos/tableResources.ts
similarity index 90%
rename from src/Utils/arm/generatedClients/2020-04-01/tableResources.ts
rename to src/Utils/arm/generatedClients/cosmos/tableResources.ts
index ede7fbcb4..b68c20b08 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/tableResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/tableResources.ts
@@ -1,13 +1,15 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
+import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-import { configContext } from "../../../../ConfigContext";
-const apiVersion = "2020-04-01";
+const apiVersion = "2021-04-15";
 
 /* Lists the Tables under an existing Azure Cosmos DB database account. */
 export async function listTables(
@@ -82,7 +84,7 @@ export async function migrateTableToAutoscale(
   resourceGroupName: string,
   accountName: string,
   tableName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/tables/${tableName}/throughputSettings/default/migrateToAutoscale`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
@@ -93,7 +95,7 @@ export async function migrateTableToManualThroughput(
   resourceGroupName: string,
   accountName: string,
   tableName: string
-): Promise<Types.ThroughputSettingsGetResults | void> {
+): Promise<Types.ThroughputSettingsGetResults | void | Types.CloudError> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/tables/${tableName}/throughputSettings/default/migrateToManualThroughput`;
   return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
 }
diff --git a/src/Utils/arm/generatedClients/2020-04-01/types.ts b/src/Utils/arm/generatedClients/cosmos/types.ts
similarity index 89%
rename from src/Utils/arm/generatedClients/2020-04-01/types.ts
rename to src/Utils/arm/generatedClients/cosmos/types.ts
index 97eebbf13..9efc80d20 100644
--- a/src/Utils/arm/generatedClients/2020-04-01/types.ts
+++ b/src/Utils/arm/generatedClients/cosmos/types.ts
@@ -1,7 +1,9 @@
 /* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/cosmos-db.json
 */
 
 /* The List operation response, that contains the database accounts and their properties. */
@@ -90,6 +92,12 @@ export interface ErrorResponse {
   message?: string;
 }
 
+/* An error response from the service. */
+export interface CloudError {
+  /* undocumented */
+  error?: ErrorResponse;
+}
+
 /* The list of new failover policies for the failover priority change. */
 export interface FailoverPolicies {
   /* List of failover policies. */
@@ -156,22 +164,23 @@ export interface ARMProxyResource {
 /* An Azure Cosmos DB database account. */
 export type DatabaseAccountGetResults = ARMResourceProperties & {
   /* Indicates the type of database account. This can only be set at database account creation. */
-  kind?: string;
+  kind?: "GlobalDocumentDB" | "MongoDB" | "Parse";
+
+  /* undocumented */
+  identity?: ManagedServiceIdentity;
+
   /* undocumented */
   properties?: DatabaseAccountGetProperties;
 };
 
 /* The system generated resource properties associated with SQL databases, SQL containers, Gremlin databases and Gremlin graphs. */
-// TODO: ExtendedResourceProperties was missing some properties such as _self which was manually added. Need to fix this in the RP spec.
 export interface ExtendedResourceProperties {
   /* A system generated property. A unique identifier. */
   readonly _rid?: string;
   /* A system generated property that denotes the last updated timestamp of the resource. */
-  readonly _ts?: unknown;
+  readonly _ts?: number;
   /* A system generated property representing the resource etag required for optimistic concurrency control. */
-  readonly _etag: string;
-  // TODO: This property was manually added. It should be auto-generated like the other properties.
-  readonly _self: string;
+  readonly _etag?: string;
 }
 
 /* An Azure Cosmos DB resource throughput. */
@@ -351,7 +360,8 @@ export interface GremlinGraphGetProperties {
 /* The consistency policy for the Cosmos DB database account. */
 export interface ConsistencyPolicy {
   /* The default consistency level and configuration settings of the Cosmos DB account. */
-  defaultConsistencyLevel: string;
+  defaultConsistencyLevel: "Eventual" | "Session" | "BoundedStaleness" | "Strong" | "ConsistentPrefix";
+
   /* When used with the Bounded Staleness consistency level, this value represents the number of stale requests tolerated. Accepted range for this value is 1 – 2,147,483,647. Required when defaultConsistencyPolicy is set to 'BoundedStaleness'. */
   maxStalenessPrefix?: number;
   /* When used with the Bounded Staleness consistency level, this value represents the time amount of staleness (in seconds) tolerated. Accepted range for this value is 5 - 86400. Required when defaultConsistencyPolicy is set to 'BoundedStaleness'. */
@@ -411,7 +421,7 @@ export interface DatabaseAccountGetProperties {
   virtualNetworkRules?: VirtualNetworkRule[];
 
   /* List of Private Endpoint Connections configured for the Cosmos DB account. */
-  readonly privateEndpointConnections?: PrivateEndpointConnection[];
+  readonly privateEndpointConnections?: unknown[];
 
   /* Enables the account to write in multiple locations */
   enableMultipleWriteLocations?: boolean;
@@ -424,6 +434,8 @@ export interface DatabaseAccountGetProperties {
   disableKeyBasedMetadataWriteAccess?: boolean;
   /* The URI of the key vault */
   keyVaultKeyUri?: string;
+  /* The default identity for accessing key vault used in features like customer managed keys. The default identity needs to be explicitly set by the users. It can be "FirstPartyIdentity", "SystemAssignedIdentity" and more. */
+  defaultIdentity?: string;
   /* Whether requests from Public Network are allowed */
   publicNetworkAccess?: PublicNetworkAccess;
 
@@ -434,8 +446,17 @@ export interface DatabaseAccountGetProperties {
 
   /* Flag to indicate whether to enable storage analytics. */
   enableAnalyticalStorage?: boolean;
+  /* The object representing the policy for taking backups on an account. */
+  backupPolicy?: BackupPolicy;
+
   /* The CORS policy for the Cosmos DB database account. */
   cors?: CorsPolicy[];
+
+  /* Indicates what services are allowed to bypass firewall checks. */
+  networkAclBypass?: NetworkAclBypass;
+
+  /* An array that contains the Resource Ids for Network Acl Bypass for the Cosmos DB account. */
+  networkAclBypassResourceIds?: unknown[];
 }
 
 /* Properties to create and update Azure Cosmos DB database accounts. */
@@ -473,6 +494,8 @@ export interface DatabaseAccountCreateUpdateProperties {
   disableKeyBasedMetadataWriteAccess?: boolean;
   /* The URI of the key vault */
   keyVaultKeyUri?: string;
+  /* The default identity for accessing key vault used in features like customer managed keys. The default identity needs to be explicitly set by the users. It can be "FirstPartyIdentity", "SystemAssignedIdentity" and more. */
+  defaultIdentity?: string;
   /* Whether requests from Public Network are allowed */
   publicNetworkAccess?: PublicNetworkAccess;
 
@@ -483,14 +506,27 @@ export interface DatabaseAccountCreateUpdateProperties {
 
   /* Flag to indicate whether to enable storage analytics. */
   enableAnalyticalStorage?: boolean;
+  /* The object representing the policy for taking backups on an account. */
+  backupPolicy?: BackupPolicy;
+
   /* The CORS policy for the Cosmos DB database account. */
   cors?: CorsPolicy[];
+
+  /* Indicates what services are allowed to bypass firewall checks. */
+  networkAclBypass?: NetworkAclBypass;
+
+  /* An array that contains the Resource Ids for Network Acl Bypass for the Cosmos DB account. */
+  networkAclBypassResourceIds?: unknown[];
 }
 
 /* Parameters to create and update Cosmos DB database accounts. */
 export type DatabaseAccountCreateUpdateParameters = ARMResourceProperties & {
   /* Indicates the type of database account. This can only be set at database account creation. */
-  kind?: string;
+  kind?: "GlobalDocumentDB" | "MongoDB" | "Parse";
+
+  /* undocumented */
+  identity?: ManagedServiceIdentity;
+
   /* undocumented */
   properties: DatabaseAccountCreateUpdateProperties;
 };
@@ -527,6 +563,8 @@ export interface DatabaseAccountUpdateProperties {
   disableKeyBasedMetadataWriteAccess?: boolean;
   /* The URI of the key vault */
   keyVaultKeyUri?: string;
+  /* The default identity for accessing key vault used in features like customer managed keys. The default identity needs to be explicitly set by the users. It can be "FirstPartyIdentity", "SystemAssignedIdentity" and more. */
+  defaultIdentity?: string;
   /* Whether requests from Public Network are allowed */
   publicNetworkAccess?: PublicNetworkAccess;
 
@@ -537,8 +575,17 @@ export interface DatabaseAccountUpdateProperties {
 
   /* Flag to indicate whether to enable storage analytics. */
   enableAnalyticalStorage?: boolean;
+  /* The object representing the policy for taking backups on an account. */
+  backupPolicy?: BackupPolicy;
+
   /* The CORS policy for the Cosmos DB database account. */
   cors?: CorsPolicy[];
+
+  /* Indicates what services are allowed to bypass firewall checks. */
+  networkAclBypass?: NetworkAclBypass;
+
+  /* An array that contains the Resource Ids for Network Acl Bypass for the Cosmos DB account. */
+  networkAclBypassResourceIds?: unknown[];
 }
 
 /* Parameters for patching Azure Cosmos DB database account properties. */
@@ -548,6 +595,9 @@ export interface DatabaseAccountUpdateParameters {
 
   /* The location of the resource group to which the resource belongs. */
   location?: string;
+  /* undocumented */
+  identity?: ManagedServiceIdentity;
+
   /* undocumented */
   properties?: DatabaseAccountUpdateProperties;
 }
@@ -585,7 +635,7 @@ export interface DatabaseAccountListConnectionStringsResult {
 /* Parameters to regenerate the keys within the database account. */
 export interface DatabaseAccountRegenerateKeyParameters {
   /* The access key to regenerate. */
-  keyKind: string;
+  keyKind: "primary" | "secondary" | "primaryReadonly" | "secondaryReadonly";
 }
 
 /* The offer type for the Cosmos DB database account. */
@@ -615,7 +665,7 @@ export interface SqlDatabaseCreateUpdateProperties {
   resource: SqlDatabaseResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB container. */
@@ -630,7 +680,7 @@ export interface SqlContainerCreateUpdateProperties {
   resource: SqlContainerResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB storedProcedure. */
@@ -645,7 +695,7 @@ export interface SqlStoredProcedureCreateUpdateProperties {
   resource: SqlStoredProcedureResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB userDefinedFunction. */
@@ -660,7 +710,7 @@ export interface SqlUserDefinedFunctionCreateUpdateProperties {
   resource: SqlUserDefinedFunctionResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB trigger. */
@@ -675,7 +725,7 @@ export interface SqlTriggerCreateUpdateProperties {
   resource: SqlTriggerResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB MongoDB database. */
@@ -690,7 +740,7 @@ export interface MongoDBDatabaseCreateUpdateProperties {
   resource: MongoDBDatabaseResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB MongoDB collection. */
@@ -705,7 +755,7 @@ export interface MongoDBCollectionCreateUpdateProperties {
   resource: MongoDBCollectionResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB Table. */
@@ -720,7 +770,7 @@ export interface TableCreateUpdateProperties {
   resource: TableResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB Cassandra keyspace. */
@@ -735,7 +785,7 @@ export interface CassandraKeyspaceCreateUpdateProperties {
   resource: CassandraKeyspaceResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB Cassandra table. */
@@ -750,7 +800,7 @@ export interface CassandraTableCreateUpdateProperties {
   resource: CassandraTableResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB Gremlin database. */
@@ -765,7 +815,7 @@ export interface GremlinDatabaseCreateUpdateProperties {
   resource: GremlinDatabaseResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Parameters to create and update Cosmos DB Gremlin graph. */
@@ -780,7 +830,7 @@ export interface GremlinGraphCreateUpdateProperties {
   resource: GremlinGraphResource;
 
   /* A key-value pair of options to be applied for the request. This corresponds to the headers sent with the request. */
-  options: CreateUpdateOptions;
+  options?: CreateUpdateOptions;
 }
 
 /* Cosmos DB resource throughput object. Either throughput is required or autoscaleSettings is required, but not both. */
@@ -853,8 +903,7 @@ export interface SqlContainerResource {
   /* The conflict resolution policy for the container. */
   conflictResolutionPolicy?: ConflictResolutionPolicy;
 
-  //TODO: this property is manually added. It should be auto-generated instead. Need to be fixed in the API spec.
-  /* Analytical storage time to live */
+  /* Analytical TTL. */
   analyticalStorageTtl?: number;
 }
 
@@ -863,7 +912,8 @@ export interface IndexingPolicy {
   /* Indicates if the indexing policy is automatic */
   automatic?: boolean;
   /* Indicates the indexing mode. */
-  indexingMode?: string;
+  indexingMode?: "consistent" | "lazy" | "none";
+
   /* List of paths to include in the indexing */
   includedPaths?: IncludedPath[];
 
@@ -894,11 +944,12 @@ export interface IncludedPath {
 /* The indexes for the path. */
 export interface Indexes {
   /* The datatype for which the indexing behavior is applied to. */
-  dataType?: string;
+  dataType?: "String" | "Number" | "Point" | "Polygon" | "LineString" | "MultiPolygon";
+
   /* The precision of the index. -1 is maximum precision. */
   precision?: number;
   /* Indicates the type of index. */
-  kind?: string;
+  kind?: "Hash" | "Range" | "Spatial";
 }
 
 /* List of composite path */
@@ -909,7 +960,7 @@ export interface CompositePath {
   /* The path for which the indexing behavior applies to. Index paths typically start with root and end with wildcard (/path/*) */
   path?: string;
   /* Sort order for composite paths. */
-  order?: string;
+  order?: "ascending" | "descending";
 }
 
 /* undocumented */
@@ -928,10 +979,13 @@ export interface ContainerPartitionKey {
   /* List of paths using which data within the container can be partitioned */
   paths?: Path[];
 
-  /* Indicates the kind of algorithm used for partitioning */
-  kind?: string;
+  /* Indicates the kind of algorithm used for partitioning. For MultiHash, multiple partition keys (upto three maximum) are supported for container create */
+  kind?: "Hash" | "Range" | "MultiHash";
+
   /* Indicates the version of the partition key definition */
   version?: number;
+  /* Indicates if the container is using a system generated partition key */
+  readonly systemKey?: boolean;
 }
 
 /* A path. These typically start with root (/path) */
@@ -952,7 +1006,8 @@ export interface UniqueKey {
 /* The conflict resolution policy for the container. */
 export interface ConflictResolutionPolicy {
   /* Indicates the conflict resolution mode. */
-  mode?: string;
+  mode?: "LastWriterWins" | "Custom";
+
   /* The conflict resolution path in the case of LastWriterWins mode. */
   conflictResolutionPath?: string;
   /* The procedure to resolve conflicts in the case of custom mode. */
@@ -980,11 +1035,12 @@ export interface SqlTriggerResource {
   /* Name of the Cosmos DB SQL trigger */
   id: string;
   /* Body of the Trigger */
-  body?: string;
+  body: string;
   /* Type of the Trigger */
-  triggerType?: string;
+  triggerType?: "Pre" | "Post";
+
   /* The operation the trigger is associated with */
-  triggerOperation?: string;
+  triggerOperation?: "All" | "Create" | "Update" | "Delete" | "Replace";
 }
 
 /* Cosmos DB MongoDB database resource object */
@@ -1143,6 +1199,19 @@ export interface Capability {
 /* Tags are a list of key-value pairs that describe the resource. These tags can be used in viewing and grouping this resource (across resource groups). A maximum of 15 tags can be provided for a resource. Each tag must have a key no greater than 128 characters and value no greater than 256 characters. For example, the default experience for a template type is set with "defaultExperience": "Cassandra". Current "defaultExperience" values also include "Table", "Graph", "DocumentDB", and "MongoDB". */
 export type Tags = { [key: string]: string };
 
+/* Identity for the resource. */
+export interface ManagedServiceIdentity {
+  /* The principal id of the system assigned identity. This property will only be provided for a system assigned identity. */
+  readonly principalId?: string;
+  /* The tenant id of the system assigned identity. This property will only be provided for a system assigned identity. */
+  readonly tenantId?: string;
+  /* The type of identity used for the resource. The type 'SystemAssigned,UserAssigned' includes both an implicitly created identity and a set of user assigned identities. The type 'None' will remove any identities from the service. */
+  type?: "SystemAssigned" | "UserAssigned" | "SystemAssigned,UserAssigned" | "None";
+
+  /* The list of user identities associated with resource. The user identity dictionary key references will be ARM resource ids in the form: '/subscriptions/{subscriptionId}/resourceGroups/{resourceGroupName}/providers/Microsoft.ManagedIdentity/userAssignedIdentities/{identityName}'. */
+  userAssignedIdentities?: unknown;
+}
+
 /* The status of the Cosmos DB account at the time the operation was called. The status can be one of following. 'Creating' – the Cosmos DB account is being created. When an account is in Creating state, only properties that are specified as input for the Create Cosmos DB account operation are returned. 'Succeeded' – the Cosmos DB account is active for use. 'Updating' – the Cosmos DB account is being updated. 'Deleting' – the Cosmos DB account is being deleted. 'Failed' – the Cosmos DB account failed creation. 'DeletionFailed' – the Cosmos DB account deletion failed. */
 export type ProvisioningState = string;
 
@@ -1163,34 +1232,8 @@ export interface VirtualNetworkRule {
   ignoreMissingVNetServiceEndpoint?: boolean;
 }
 
-/* A private endpoint connection */
-export type PrivateEndpointConnection = unknown & {
-  /* Resource properties. */
-  properties?: PrivateEndpointConnectionProperties;
-};
-
-/* Properties of a private endpoint connection. */
-export interface PrivateEndpointConnectionProperties {
-  /* Private endpoint which the connection belongs to. */
-  privateEndpoint?: PrivateEndpointProperty;
-
-  /* Connection State of the Private Endpoint Connection. */
-  privateLinkServiceConnectionState?: PrivateLinkServiceConnectionStateProperty;
-}
-
-/* Private endpoint which the connection belongs to. */
-export interface PrivateEndpointProperty {
-  /* Resource id of the private endpoint. */
-  id?: string;
-}
-
-/* Connection State of the Private Endpoint Connection. */
-export interface PrivateLinkServiceConnectionStateProperty {
-  /* The private link service connection status. */
-  status?: string;
-  /* Any action that is required beyond basic workflow (approve/ reject/ disconnect) */
-  readonly actionsRequired?: string;
-}
+/* Indicates what services are allowed to bypass firewall checks. */
+export type NetworkAclBypass = "None" | "AzureServices";
 
 /* REST API operation */
 export interface Operation {
@@ -1257,7 +1300,8 @@ export interface MetricDefinition {
   readonly metricAvailabilities?: MetricAvailability[];
 
   /* The primary aggregation type of the metric. */
-  readonly primaryAggregationType?: string;
+  readonly primaryAggregationType?: "None" | "Average" | "Total" | "Minimum" | "Maximum" | "Last";
+
   /* The unit of the metric. */
   unit?: UnitType;
 
@@ -1391,5 +1435,31 @@ export type PublicNetworkAccess = "Enabled" | "Disabled";
 /* undocumented */
 export interface ApiProperties {
   /* Describes the ServerVersion of an a MongoDB account. */
-  serverVersion?: string;
+  serverVersion?: "3.2" | "3.6" | "4.0";
+}
+
+/* The object representing the policy for taking backups on an account. */
+export interface BackupPolicy {
+  /* undocumented */
+  type: BackupPolicyType;
+}
+
+/* Describes the mode of backups. */
+export type BackupPolicyType = "Periodic" | "Continuous";
+
+/* The object representing periodic mode backup policy. */
+export type PeriodicModeBackupPolicy = BackupPolicy & {
+  /* Configuration values for periodic mode backup */
+  periodicModeProperties?: PeriodicModeProperties;
+};
+
+/* The object representing continuous mode backup policy. */
+export type ContinuousModeBackupPolicy = BackupPolicy;
+
+/* Configuration values for periodic mode backup */
+export interface PeriodicModeProperties {
+  /* An integer representing the interval in minutes between two backups */
+  backupIntervalInMinutes?: number;
+  /* An integer representing the time (in hours) that each backup is retained */
+  backupRetentionIntervalInHours?: number;
 }
diff --git a/src/Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces.ts b/src/Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces.ts
new file mode 100644
index 000000000..c08e79855
--- /dev/null
+++ b/src/Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces.ts
@@ -0,0 +1,89 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/notebook.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-04-15";
+
+/* Gets the notebook workspace resources of an existing Cosmos DB account. */
+export async function listByDatabaseAccount(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string
+): Promise<Types.NotebookWorkspaceListResult> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Gets the notebook workspace for a Cosmos DB account. */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string
+): Promise<Types.NotebookWorkspace> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Creates the notebook workspace for a Cosmos DB account. */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string,
+  body: Types.NotebookWorkspaceCreateUpdateParameters
+): Promise<Types.NotebookWorkspace> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
+
+/* Deletes the notebook workspace for a Cosmos DB account. */
+export async function destroy(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string
+): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "DELETE", apiVersion });
+}
+
+/* Retrieves the connection info for the notebook workspace */
+export async function listConnectionInfo(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string
+): Promise<Types.NotebookWorkspaceConnectionInfoResult> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}/listConnectionInfo`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
+}
+
+/* Regenerates the auth token for the notebook workspace */
+export async function regenerateAuthToken(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string
+): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}/regenerateAuthToken`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
+}
+
+/* Starts the notebook workspace */
+export async function start(
+  subscriptionId: string,
+  resourceGroupName: string,
+  accountName: string,
+  notebookWorkspaceName: string
+): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/notebookWorkspaces/${notebookWorkspaceName}/start`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "POST", apiVersion });
+}
diff --git a/src/Utils/arm/generatedClients/cosmosNotebooks/types.ts b/src/Utils/arm/generatedClients/cosmosNotebooks/types.ts
new file mode 100644
index 000000000..ecc745703
--- /dev/null
+++ b/src/Utils/arm/generatedClients/cosmosNotebooks/types.ts
@@ -0,0 +1,38 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/2021-04-15/notebook.json
+*/
+
+/* Parameters to create a notebook workspace resource */
+export type NotebookWorkspaceCreateUpdateParameters = unknown;
+
+/* A list of notebook workspace resources */
+export interface NotebookWorkspaceListResult {
+  /* Array of notebook workspace resources */
+  value?: NotebookWorkspace[];
+}
+
+/* A notebook workspace resource */
+export type NotebookWorkspace = unknown & {
+  /* Resource properties. */
+  properties?: NotebookWorkspaceProperties;
+};
+
+/* Properties of a notebook workspace resource. */
+export interface NotebookWorkspaceProperties {
+  /* Specifies the endpoint of Notebook server. */
+  readonly notebookServerEndpoint?: string;
+  /* Status of the notebook workspace. Possible values are: Creating, Online, Deleting, Failed, Updating. */
+  readonly status?: string;
+}
+
+/* The connection info for the given notebook workspace */
+export interface NotebookWorkspaceConnectionInfoResult {
+  /* Specifies auth token used for connecting to Notebook server (uses token-based auth). */
+  readonly authToken?: string;
+  /* Specifies the endpoint of Notebook server. */
+  readonly notebookServerEndpoint?: string;
+}
diff --git a/src/Utils/arm/generatedClients/synapseSparkPools/bigDataPools.ts b/src/Utils/arm/generatedClients/synapseSparkPools/bigDataPools.ts
new file mode 100644
index 000000000..db5ff876e
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseSparkPools/bigDataPools.ts
@@ -0,0 +1,68 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/bigDataPool.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* Get a Big Data pool. */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  bigDataPoolName: string
+): Promise<Types.BigDataPoolResourceInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/bigDataPools/${bigDataPoolName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Patch a Big Data pool. */
+export async function update(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  bigDataPoolName: string,
+  body: Types.BigDataPoolPatchInfo
+): Promise<Types.BigDataPoolResourceInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/bigDataPools/${bigDataPoolName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PATCH", apiVersion, body });
+}
+
+/* Create a new Big Data pool. */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  bigDataPoolName: string,
+  body: Types.BigDataPoolResourceInfo
+): Promise<Types.BigDataPoolResourceInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/bigDataPools/${bigDataPoolName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
+
+/* Delete a Big Data pool from the workspace. */
+export async function destroy(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  bigDataPoolName: string
+): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/bigDataPools/${bigDataPoolName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "DELETE", apiVersion });
+}
+
+/* List Big Data pools in a workspace. */
+export async function listByWorkspace(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.BigDataPoolResourceInfoListResult> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/bigDataPools`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
diff --git a/src/Utils/arm/generatedClients/synapseSparkPools/types.ts b/src/Utils/arm/generatedClients/synapseSparkPools/types.ts
new file mode 100644
index 000000000..700dcadd7
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseSparkPools/types.ts
@@ -0,0 +1,127 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/bigDataPool.json
+*/
+
+/* Collection of Big Data pool information */
+export interface BigDataPoolResourceInfoListResult {
+  /* Link to the next page of results */
+  nextLink?: string;
+  /* List of Big Data pools */
+  value?: BigDataPoolResourceInfo[];
+}
+
+/* Properties patch for a Big Data pool */
+export interface BigDataPoolPatchInfo {
+  /* Updated tags for the Big Data pool */
+  tags?: unknown;
+}
+
+/* A Big Data pool */
+export type BigDataPoolResourceInfo = unknown & {
+  /* Big Data pool properties */
+  properties?: BigDataPoolResourceProperties;
+};
+
+/* Properties of a Big Data pool powered by Apache Spark */
+export interface BigDataPoolResourceProperties {
+  /* The state of the Big Data pool. */
+  provisioningState?: string;
+  /* Auto-scaling properties */
+  autoScale?: AutoScaleProperties;
+
+  /* The time when the Big Data pool was created. */
+  creationDate?: string;
+  /* Auto-pausing properties */
+  autoPause?: AutoPauseProperties;
+
+  /* Whether compute isolation is required or not. */
+  isComputeIsolationEnabled?: boolean;
+  /* Whether session level packages enabled. */
+  sessionLevelPackagesEnabled?: boolean;
+  /* The cache size */
+  cacheSize?: number;
+  /* Dynamic Executor Allocation */
+  dynamicExecutorAllocation?: DynamicExecutorAllocation;
+
+  /* The Spark events folder */
+  sparkEventsFolder?: string;
+  /* The number of nodes in the Big Data pool. */
+  nodeCount?: number;
+  /* Library version requirements */
+  libraryRequirements?: LibraryRequirements;
+
+  /* List of custom libraries/packages associated with the spark pool. */
+  customLibraries?: LibraryInfo[];
+
+  /* Spark configuration file to specify additional properties */
+  sparkConfigProperties?: LibraryRequirements;
+
+  /* The Apache Spark version. */
+  sparkVersion?: string;
+  /* The default folder where Spark logs will be written. */
+  defaultSparkLogFolder?: string;
+  /* The level of compute power that each node in the Big Data pool has. */
+  nodeSize?: "None" | "Small" | "Medium" | "Large" | "XLarge" | "XXLarge" | "XXXLarge";
+
+  /* The kind of nodes that the Big Data pool provides. */
+  nodeSizeFamily?: "None" | "MemoryOptimized";
+
+  /* The time when the Big Data pool was updated successfully. */
+  readonly lastSucceededTimestamp?: string;
+}
+
+/* Auto-scaling properties of a Big Data pool powered by Apache Spark */
+export interface AutoScaleProperties {
+  /* The minimum number of nodes the Big Data pool can support. */
+  minNodeCount?: number;
+  /* Whether automatic scaling is enabled for the Big Data pool. */
+  enabled?: boolean;
+  /* The maximum number of nodes the Big Data pool can support. */
+  maxNodeCount?: number;
+}
+
+/* Auto-pausing properties of a Big Data pool powered by Apache Spark */
+export interface AutoPauseProperties {
+  /* Number of minutes of idle time before the Big Data pool is automatically paused. */
+  delayInMinutes?: number;
+  /* Whether auto-pausing is enabled for the Big Data pool. */
+  enabled?: boolean;
+}
+
+/* Dynamic Executor Allocation Properties */
+export interface DynamicExecutorAllocation {
+  /* Indicates whether Dynamic Executor Allocation is enabled or not. */
+  enabled?: boolean;
+}
+
+/* Library/package information of a Big Data pool powered by Apache Spark */
+export interface LibraryInfo {
+  /* Name of the library. */
+  name?: string;
+  /* Storage blob path of library. */
+  path?: string;
+  /* Storage blob container name. */
+  containerName?: string;
+  /* The last update time of the library. */
+  readonly uploadedTimestamp?: string;
+  /* Type of the library. */
+  type?: string;
+  /* Provisioning status of the library/package. */
+  readonly provisioningStatus?: string;
+  /* Creator Id of the library/package. */
+  readonly creatorId?: string;
+}
+
+/* Library requirements for a Big Data pool powered by Apache Spark */
+export interface LibraryRequirements {
+  /* The last update time of the library requirements file. */
+  readonly time?: string;
+  /* The library requirements. */
+  content?: string;
+  /* The filename of the library requirements file. */
+  filename?: string;
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/restorableDroppedSqlPools.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/restorableDroppedSqlPools.ts
new file mode 100644
index 000000000..a782ae809
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/restorableDroppedSqlPools.ts
@@ -0,0 +1,33 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* Gets a deleted sql pool that can be restored */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  restorableDroppedSqlPoolId: string
+): Promise<Types.RestorableDroppedSqlPool> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/restorableDroppedSqlPools/${restorableDroppedSqlPoolId}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Gets a list of deleted Sql pools that can be restored */
+export async function listByWorkspace(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.RestorableDroppedSqlPoolListResult> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/restorableDroppedSqlPools`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/types.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/types.ts
new file mode 100644
index 000000000..a806ec6f5
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/types.ts
@@ -0,0 +1,251 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { ARMResourceProperties } from "../cosmos/types";
+
+/* Workspace active directory administrator properties */
+export interface AadAdminProperties {
+  /* Tenant ID of the workspace active directory administrator */
+  tenantId?: string;
+  /* Login of the workspace active directory administrator */
+  login?: string;
+  /* Workspace active directory administrator type */
+  administratorType?: string;
+  /* Object ID of the workspace active directory administrator */
+  sid?: string;
+}
+
+/* List of workspaces */
+export interface WorkspaceInfoListResult {
+  /* Link to the next page of results */
+  nextLink?: string;
+  /* List of workspaces */
+  value?: Workspace[];
+}
+
+/* Details of the data lake storage account associated with the workspace */
+export interface DataLakeStorageAccountDetails {
+  /* Account URL */
+  accountUrl?: string;
+  /* Filesystem name */
+  filesystem?: string;
+}
+
+/* Details of the encryption associated with the workspace */
+export interface EncryptionDetails {
+  /* Double Encryption enabled */
+  readonly doubleEncryptionEnabled?: boolean;
+  /* Customer Managed Key Details */
+  cmk?: CustomerManagedKeyDetails;
+}
+
+/* Details of the customer managed key associated with the workspace */
+export interface CustomerManagedKeyDetails {
+  /* The customer managed key status on the workspace */
+  readonly status?: string;
+  /* The key object of the workspace */
+  key?: WorkspaceKeyDetails;
+}
+
+/* Details of the customer managed key associated with the workspace */
+export interface WorkspaceKeyDetails {
+  /* Workspace Key sub-resource name */
+  name?: string;
+  /* Workspace Key sub-resource key vault url */
+  keyVaultUrl?: string;
+}
+
+/* The workspace managed identity */
+export interface ManagedIdentity {
+  /* The principal ID of the workspace managed identity */
+  readonly principalId?: string;
+  /* The tenant ID of the workspace managed identity */
+  readonly tenantId?: string;
+  /* The type of managed identity for the workspace */
+  type?: "None" | "SystemAssigned";
+}
+
+/* Virtual Network Profile */
+export interface VirtualNetworkProfile {
+  /* Subnet ID used for computes in workspace */
+  computeSubnetId?: string;
+}
+
+/* Managed Virtual Network Settings */
+export interface ManagedVirtualNetworkSettings {
+  /* Prevent Data Exfiltration */
+  preventDataExfiltration?: boolean;
+  /* Linked Access Check On Target Resource */
+  linkedAccessCheckOnTargetResource?: boolean;
+  /* Allowed Aad Tenant Ids For Linking */
+  allowedAadTenantIdsForLinking?: unknown[];
+}
+
+/* Git integration settings */
+export interface WorkspaceRepositoryConfiguration {
+  /* Type of workspace repositoryID configuration. Example WorkspaceVSTSConfiguration, WorkspaceGitHubConfiguration */
+  type?: string;
+  /* GitHub Enterprise host name. For example: https://github.mydomain.com */
+  hostName?: string;
+  /* Account name */
+  accountName?: string;
+  /* VSTS project name */
+  projectName?: string;
+  /* Repository name */
+  repositoryName?: string;
+  /* Collaboration branch */
+  collaborationBranch?: string;
+  /* Root folder to use in the repository */
+  rootFolder?: string;
+  /* The last commit ID */
+  lastCommitId?: string;
+  /* The VSTS tenant ID */
+  tenantId?: string;
+}
+
+/* Purview Configuration */
+export interface PurviewConfiguration {
+  /* Purview Resource ID */
+  purviewResourceId?: string;
+}
+
+/* Workspace active directory administrator */
+export type WorkspaceAadAdminInfo = ARMResourceProperties & {
+  /* Workspace active directory administrator properties */
+  properties?: AadAdminProperties;
+};
+
+/* A workspace */
+export type Workspace = ARMResourceProperties & {
+  /* Workspace resource properties */
+  properties?: WorkspaceProperties;
+
+  /* Identity of the workspace */
+  identity?: ManagedIdentity;
+};
+
+/* Workspace properties */
+export interface WorkspaceProperties {
+  /* Workspace default data lake storage account details */
+  defaultDataLakeStorage?: DataLakeStorageAccountDetails;
+
+  /* SQL administrator login password */
+  sqlAdministratorLoginPassword?: string;
+  /* Workspace managed resource group. The resource group name uniquely identifies the resource group within the user subscriptionId. The resource group name must be no longer than 90 characters long, and must be alphanumeric characters (Char.IsLetterOrDigit()) and '-', '_', '(', ')' and'.'. Note that the name cannot end with '.' */
+  managedResourceGroupName?: string;
+  /* Resource provisioning state */
+  readonly provisioningState?: string;
+  /* Login for workspace SQL active directory administrator */
+  sqlAdministratorLogin?: string;
+  /* Virtual Network profile */
+  virtualNetworkProfile?: VirtualNetworkProfile;
+
+  /* Connectivity endpoints */
+  connectivityEndpoints?: unknown;
+
+  /* Setting this to 'default' will ensure that all compute for this workspace is in a virtual network managed on behalf of the user. */
+  managedVirtualNetwork?: string;
+  /* Private endpoint connections to the workspace */
+  privateEndpointConnections?: unknown[];
+
+  /* The encryption details of the workspace */
+  encryption?: EncryptionDetails;
+
+  /* The workspace unique identifier */
+  readonly workspaceUID?: string;
+  /* Workspace level configs and feature flags */
+  readonly extraProperties?: unknown;
+
+  /* Managed Virtual Network Settings */
+  managedVirtualNetworkSettings?: ManagedVirtualNetworkSettings;
+
+  /* Git integration settings */
+  workspaceRepositoryConfiguration?: WorkspaceRepositoryConfiguration;
+
+  /* Purview Configuration */
+  purviewConfiguration?: PurviewConfiguration;
+
+  /* The ADLA resource ID. */
+  readonly adlaResourceId?: string;
+  /* Enable or Disable public network access to workspace */
+  publicNetworkAccess?: "Enabled" | "Disabled";
+}
+
+/* Workspace patch details */
+export interface WorkspacePatchInfo {
+  /* Resource tags */
+  tags?: unknown;
+
+  /* The identity of the workspace */
+  identity?: ManagedIdentity;
+
+  /* Workspace patch properties */
+  properties?: WorkspacePatchProperties;
+}
+
+/* Workspace patch properties */
+export interface WorkspacePatchProperties {
+  /* SQL administrator login password */
+  sqlAdministratorLoginPassword?: string;
+  /* Managed Virtual Network Settings */
+  managedVirtualNetworkSettings?: ManagedVirtualNetworkSettings;
+
+  /* Git integration settings */
+  workspaceRepositoryConfiguration?: WorkspaceRepositoryConfiguration;
+
+  /* Purview Configuration */
+  purviewConfiguration?: PurviewConfiguration;
+
+  /* Resource provisioning state */
+  readonly provisioningState?: string;
+  /* The encryption details of the workspace */
+  encryption?: EncryptionDetails;
+
+  /* Enable or Disable public network access to workspace */
+  publicNetworkAccess?: "Enabled" | "Disabled";
+}
+
+/* Sql Control Settings for workspace managed identity */
+export type ManagedIdentitySqlControlSettingsModel = ARMResourceProperties & {
+  /* Sql Control Settings for workspace managed identity */
+  properties?: unknown;
+};
+
+/* The properties of a restorable dropped Sql pool */
+export interface RestorableDroppedSqlPoolProperties {
+  /* The name of the database */
+  readonly databaseName?: string;
+  /* The edition of the database */
+  readonly edition?: string;
+  /* The max size in bytes of the database */
+  readonly maxSizeBytes?: string;
+  /* The service level objective name of the database */
+  readonly serviceLevelObjective?: string;
+  /* The elastic pool name of the database */
+  readonly elasticPoolName?: string;
+  /* The creation date of the database (ISO8601 format) */
+  readonly creationDate?: string;
+  /* The deletion date of the database (ISO8601 format) */
+  readonly deletionDate?: string;
+  /* The earliest restore date of the database (ISO8601 format) */
+  readonly earliestRestoreDate?: string;
+}
+
+/* A restorable dropped Sql pool */
+export type RestorableDroppedSqlPool = ARMResourceProperties & {
+  /* The geo-location where the resource lives */
+  readonly location?: string;
+  /* The properties of a restorable dropped Sql pool */
+  properties?: RestorableDroppedSqlPoolProperties;
+};
+
+/* The response to a list restorable dropped Sql pools request */
+export interface RestorableDroppedSqlPoolListResult {
+  /* A list of restorable dropped Sql pools */
+  value: RestorableDroppedSqlPool[];
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceAadAdmins.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceAadAdmins.ts
new file mode 100644
index 000000000..882bcd355
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceAadAdmins.ts
@@ -0,0 +1,39 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* Gets a workspace active directory admin */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.WorkspaceAadAdminInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/administrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Creates or updates a workspace active directory admin */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  body: Types.WorkspaceAadAdminInfo
+): Promise<Types.WorkspaceAadAdminInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/administrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
+
+/* Deletes a workspace active directory admin */
+export async function destroy(subscriptionId: string, resourceGroupName: string, workspaceName: string): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/administrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "DELETE", apiVersion });
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceManagedIdentitySqlControlSettings.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceManagedIdentitySqlControlSettings.ts
new file mode 100644
index 000000000..c587de88f
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceManagedIdentitySqlControlSettings.ts
@@ -0,0 +1,33 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* undocumented */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.ManagedIdentitySqlControlSettingsModel> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/managedIdentitySqlControlSettings/default`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* undocumented */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  body: Types.ManagedIdentitySqlControlSettingsModel
+): Promise<Types.ManagedIdentitySqlControlSettingsModel | void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/managedIdentitySqlControlSettings/default`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceSqlAadAdmins.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceSqlAadAdmins.ts
new file mode 100644
index 000000000..f5f1cd4c8
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaceSqlAadAdmins.ts
@@ -0,0 +1,39 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* Gets a workspace SQL active directory admin */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.WorkspaceAadAdminInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/sqlAdministrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Creates or updates a workspace SQL active directory admin */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  body: Types.WorkspaceAadAdminInfo
+): Promise<Types.WorkspaceAadAdminInfo> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/sqlAdministrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
+
+/* Deletes a workspace SQL active directory admin */
+export async function destroy(subscriptionId: string, resourceGroupName: string, workspaceName: string): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}/sqlAdministrators/activeDirectory`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "DELETE", apiVersion });
+}
diff --git a/src/Utils/arm/generatedClients/synapseWorkspaces/workspaces.ts b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaces.ts
new file mode 100644
index 000000000..545264146
--- /dev/null
+++ b/src/Utils/arm/generatedClients/synapseWorkspaces/workspaces.ts
@@ -0,0 +1,65 @@
+/* 
+  AUTOGENERATED FILE
+  Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/synapse/resource-manager/Microsoft.Synapse/stable/2021-03-01/workspace.json
+*/
+
+import { configContext } from "../../../../ConfigContext";
+import { armRequest } from "../../request";
+import * as Types from "./types";
+const apiVersion = "2021-03-01";
+
+/* Returns a list of workspaces in a resource group */
+export async function listByResourceGroup(
+  subscriptionId: string,
+  resourceGroupName: string
+): Promise<Types.WorkspaceInfoListResult> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Gets a workspace */
+export async function get(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string
+): Promise<Types.Workspace> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
+
+/* Updates a workspace */
+export async function update(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  body: Types.WorkspacePatchInfo
+): Promise<Types.Workspace> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PATCH", apiVersion, body });
+}
+
+/* Creates or updates a workspace */
+export async function createOrUpdate(
+  subscriptionId: string,
+  resourceGroupName: string,
+  workspaceName: string,
+  body: Types.Workspace
+): Promise<Types.Workspace> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PUT", apiVersion, body });
+}
+
+/* Deletes a workspace */
+export async function destroy(subscriptionId: string, resourceGroupName: string, workspaceName: string): Promise<void> {
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.Synapse/workspaces/${workspaceName}`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "DELETE", apiVersion });
+}
+
+/* Returns a list of workspaces in a subscription */
+export async function list(subscriptionId: string): Promise<Types.WorkspaceInfoListResult> {
+  const path = `/subscriptions/${subscriptionId}/providers/Microsoft.Synapse/workspaces`;
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "GET", apiVersion });
+}
diff --git a/src/applyExplorerBindings.ts b/src/applyExplorerBindings.ts
index ca28aea5c..895bc40ac 100644
--- a/src/applyExplorerBindings.ts
+++ b/src/applyExplorerBindings.ts
@@ -1,5 +1,5 @@
-import { BindingHandlersRegisterer } from "./Bindings/BindingHandlersRegisterer";
 import * as ko from "knockout";
+import { BindingHandlersRegisterer } from "./Bindings/BindingHandlersRegisterer";
 import Explorer from "./Explorer/Explorer";
 
 export const applyExplorerBindings = (explorer: Explorer) => {
@@ -7,8 +7,5 @@ export const applyExplorerBindings = (explorer: Explorer) => {
     window.dataExplorer = explorer;
     BindingHandlersRegisterer.registerBindingHandlers();
     ko.applyBindings(explorer);
-    // This message should ideally be sent immediately after explorer has been initialized for optimal data explorer load times.
-    // TODO: Send another message to describe that the bindings have been applied, and handle message transfers accordingly in the portal
-    $("#divExplorer").show();
   }
 };
diff --git a/src/global.d.ts b/src/global.d.ts
index 301c9209b..1663e45eb 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,6 +1,14 @@
+import { PageWaitForSelectorOptions, PlaywrightMatchers } from "expect-playwright";
 import Explorer from "./Explorer/Explorer";
 
 declare global {
+  namespace jest {
+    interface Matchers<R> extends PlaywrightMatchers<R> {
+      toHaveFocus(selector: string, options?: PageWaitForSelectorOptions): Promise<R>;
+      toHaveTextContent(htmlElement: string): object;
+      toHaveValue(value: string | string[] | number): object;
+    }
+  }
   interface Window {
     /**
      * @deprecated
diff --git a/src/hooks/useAADAuth.ts b/src/hooks/useAADAuth.ts
index 90023a184..1c6e946b2 100644
--- a/src/hooks/useAADAuth.ts
+++ b/src/hooks/useAADAuth.ts
@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as msal from "@azure/msal-browser";
 import { useBoolean } from "@fluentui/react-hooks";
-import { UserAgentApplication, Account, Configuration } from "msal";
+import * as React from "react";
 
-const config: Configuration = {
+const config: msal.Configuration = {
   cache: {
     cacheLocation: "localStorage",
   },
@@ -16,19 +16,20 @@ if (process.env.NODE_ENV === "development") {
   config.auth.redirectUri = "https://dataexplorer-dev.azurewebsites.net";
 }
 
-const msal = new UserAgentApplication(config);
+const msalInstance = new msal.PublicClientApplication(config);
 
-const cachedAccount = msal.getAllAccounts()?.[0];
+const cachedAccount = msalInstance.getAllAccounts()?.[0];
 const cachedTenantId = localStorage.getItem("cachedTenantId");
 
 interface ReturnType {
   isLoggedIn: boolean;
   graphToken: string;
   armToken: string;
+  aadToken: string;
   login: () => void;
   logout: () => void;
   tenantId: string;
-  account: Account;
+  account: msal.AccountInfo;
   switchTenant: (tenantId: string) => void;
 }
 
@@ -36,13 +37,15 @@ export function useAADAuth(): ReturnType {
   const [isLoggedIn, { setTrue: setLoggedIn, setFalse: setLoggedOut }] = useBoolean(
     Boolean(cachedAccount && cachedTenantId) || false
   );
-  const [account, setAccount] = React.useState<Account>(cachedAccount);
+  const [account, setAccount] = React.useState<msal.AccountInfo>(cachedAccount);
   const [tenantId, setTenantId] = React.useState<string>(cachedTenantId);
   const [graphToken, setGraphToken] = React.useState<string>();
   const [armToken, setArmToken] = React.useState<string>();
+  const [aadToken, setAadToken] = React.useState<string>();
 
+  msalInstance.setActiveAccount(account);
   const login = React.useCallback(async () => {
-    const response = await msal.loginPopup();
+    const response = await msalInstance.loginPopup();
     setLoggedIn();
     setAccount(response.account);
     setTenantId(response.tenantId);
@@ -52,13 +55,14 @@ export function useAADAuth(): ReturnType {
   const logout = React.useCallback(() => {
     setLoggedOut();
     localStorage.removeItem("cachedTenantId");
-    msal.logout();
+    msalInstance.logoutRedirect();
   }, []);
 
   const switchTenant = React.useCallback(
     async (id) => {
-      const response = await msal.loginPopup({
+      const response = await msalInstance.loginPopup({
         authority: `https://login.microsoftonline.com/${id}`,
+        scopes: [],
       });
       setTenantId(response.tenantId);
       setAccount(response.account);
@@ -69,21 +73,21 @@ export function useAADAuth(): ReturnType {
   React.useEffect(() => {
     if (account && tenantId) {
       Promise.all([
-        msal.acquireTokenSilent({
-          // There is a bug in MSALv1 that requires us to refresh the token. Their internal cache is not respecting authority
-          forceRefresh: true,
+        msalInstance.acquireTokenSilent({
           authority: `https://login.microsoftonline.com/${tenantId}`,
           scopes: ["https://graph.windows.net//.default"],
         }),
-        msal.acquireTokenSilent({
-          // There is a bug in MSALv1 that requires us to refresh the token. Their internal cache is not respecting authority
-          forceRefresh: true,
+        msalInstance.acquireTokenSilent({
           authority: `https://login.microsoftonline.com/${tenantId}`,
           scopes: ["https://management.azure.com//.default"],
         }),
-      ]).then(([graphTokenResponse, armTokenResponse]) => {
+        msalInstance.acquireTokenSilent({
+          scopes: ["https://cosmos.azure.com/.default"],
+        }),
+      ]).then(([graphTokenResponse, armTokenResponse, aadTokenResponse]) => {
         setGraphToken(graphTokenResponse.accessToken);
         setArmToken(armTokenResponse.accessToken);
+        setAadToken(aadTokenResponse.accessToken);
       });
     }
   }, [account, tenantId]);
@@ -94,6 +98,7 @@ export function useAADAuth(): ReturnType {
     isLoggedIn,
     graphToken,
     armToken,
+    aadToken,
     login,
     logout,
     switchTenant,
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
index 27cce3c2d..fc29e39dd 100644
--- a/src/hooks/useConfig.ts
+++ b/src/hooks/useConfig.ts
@@ -4,8 +4,8 @@ import { ConfigContext, initializeConfiguration } from "../ConfigContext";
 // This hook initializes global configuration from a config.json file that is injected at deploy time
 // This allows the same main Data Explorer build to be exactly the same in all clouds/platforms,
 // but override some of the configuration as nesssary
-export function useConfig(): Readonly<ConfigContext> {
-  const [state, setState] = useState<ConfigContext>();
+export function useConfig(): Readonly<ConfigContext | undefined> {
+  const [state, setState] = useState<ConfigContext | undefined>();
 
   useEffect(() => {
     initializeConfiguration().then((response) => setState(response));
diff --git a/src/hooks/useKnockoutExplorer.ts b/src/hooks/useKnockoutExplorer.ts
index f563505dd..9f9ff68fc 100644
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
-import { AccountKind } from "../Common/Constants";
+import { AccountKind, Flights } from "../Common/Constants";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import { sendMessage, sendReadyMessage } from "../Common/MessageHandler";
 import { configContext, Platform, updateConfigContext } from "../ConfigContext";
@@ -27,7 +27,7 @@ import {
 import { CollectionCreation } from "../Shared/Constants";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { PortalEnv, updateUserContext, userContext } from "../UserContext";
-import { listKeys } from "../Utils/arm/generatedClients/2020-04-01/databaseAccounts";
+import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 
 // This hook will create a new instance of Explorer.ts and bind it to the DOM
@@ -83,6 +83,7 @@ async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParam
   updateUserContext({
     authType: AuthType.AAD,
     authorizationToken: `Bearer ${config.authorizationToken}`,
+    aadToken: config.aadToken,
   });
   const account = config.databaseAccount;
   const accountResourceId = account.id;
@@ -298,10 +299,19 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     portalEnv: inputs.serverId as PortalEnv,
     hasWriteAccess: inputs.hasWriteAccess ?? true,
     addCollectionFlight: inputs.addCollectionDefaultFlight || CollectionCreation.DefaultAddCollectionDefaultFlight,
+    collectionCreationDefaults: inputs.defaultCollectionThroughput,
   });
   if (inputs.features) {
     Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
   }
+  if (inputs.flights) {
+    if (inputs.flights.indexOf(Flights.AutoscaleTest) !== -1) {
+      userContext.features.autoscaleDefault;
+    }
+    if (inputs.flights.indexOf(Flights.SchemaAnalyzer) !== -1) {
+      userContext.features.enableSchemaAnalyzer = true;
+    }
+  }
 }
 
 interface PortalMessage {
diff --git a/src/i18n.ts b/src/i18n.ts
index 98c122828..533baca85 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -8,8 +8,7 @@ i18n
   .init({
     fallbackLng: "en",
     detection: { order: ["navigator", "cookie", "localStorage", "sessionStorage", "querystring", "htmlTag"] },
-    // temporarily setting debug to true to investigate loading issues in prod
-    debug: true,
+    debug: process.env.NODE_ENV === "development",
     keySeparator: ".",
     interpolation: {
       formatSeparator: ",",
diff --git a/test/cassandra/container.spec.ts b/test/cassandra/container.spec.ts
index 45ee23ce7..8874bae4a 100644
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -15,16 +15,16 @@ test("Cassandra keyspace and table CRUD", async () => {
   });
 
   await explorer.click('[data-test="New Table"]');
-  await explorer.click('[data-test="addCollection-keyspaceId"]');
-  await explorer.fill('[data-test="addCollection-keyspaceId"]', keyspaceId);
-  await explorer.click('[data-test="addCollection-tableId"]');
-  await explorer.fill('[data-test="addCollection-tableId"]', tableId);
-  await explorer.click('[aria-label="Add Table"] [data-test="addCollection-createCollection"]');
+  await explorer.click('[aria-label="Keyspace id"]');
+  await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);
+  await explorer.click('[aria-label="addCollection-tableId"]');
+  await explorer.fill('[aria-label="addCollection-tableId"]', tableId);
+  await explorer.click("#sidePanelOkButton");
   await safeClick(explorer, `.nodeItem >> text=${keyspaceId}`);
   await safeClick(explorer, `[data-test="${tableId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await explorer.click(`[data-test="${keyspaceId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Keyspace")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
diff --git a/test/graph/container.spec.ts b/test/graph/container.spec.ts
index d5ee55e1e..cf52b5bb4 100644
--- a/test/graph/container.spec.ts
+++ b/test/graph/container.spec.ts
@@ -26,7 +26,7 @@ test("Graph CRUD", async () => {
   await safeClick(explorer, `[data-test="${containerId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Graph")');
   await explorer.fill('text=* Confirm by typing the graph id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
diff --git a/test/mongo/container.spec.ts b/test/mongo/container.spec.ts
index 3b8c944d7..64ccbba42 100644
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -23,7 +23,7 @@ test("Mongo CRUD", async () => {
   await safeClick(explorer, `.nodeItem >> text=${databaseId}`);
   await safeClick(explorer, `.nodeItem >> text=${containerId}`);
   // Create indexing policy
-  await safeClick(explorer, ".nodeItem >> text=Setting");
+  await safeClick(explorer, ".nodeItem >> text=Settings");
   await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
   await explorer.click('[aria-label="Index Field Name 0"]');
   await explorer.fill('[aria-label="Index Field Name 0"]', "foo");
@@ -37,7 +37,7 @@ test("Mongo CRUD", async () => {
   await safeClick(explorer, `[data-test="${containerId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Collection")');
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
diff --git a/test/mongo/container32.spec.ts b/test/mongo/container32.spec.ts
index e3949385e..30fdfd5fe 100644
--- a/test/mongo/container32.spec.ts
+++ b/test/mongo/container32.spec.ts
@@ -26,7 +26,7 @@ test("Mongo CRUD", async () => {
   await safeClick(explorer, `[data-test="${containerId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Collection")');
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
diff --git a/test/sql/container.spec.ts b/test/sql/container.spec.ts
index 5bec9cdef..e68930083 100644
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -23,7 +23,7 @@ test("SQL CRUD", async () => {
   await safeClick(explorer, `[data-test="${containerId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Container")');
   await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
diff --git a/test/tables/container.spec.ts b/test/tables/container.spec.ts
index 33362c0e6..b2337baa9 100644
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -21,6 +21,6 @@ test("Tables CRUD", async () => {
   await safeClick(explorer, `[data-test="${tableId}"] [aria-label="More"]`);
   await safeClick(explorer, 'button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="OK"]');
   await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
 });
diff --git a/test/testExplorer/TestExplorer.ts b/test/testExplorer/TestExplorer.ts
index 397d46aa5..a83484ebb 100644
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -3,7 +3,7 @@ import { ClientSecretCredential } from "@azure/identity";
 import "../../less/hostedexplorer.less";
 import { DataExplorerInputsFrame } from "../../src/Contracts/ViewModels";
 import { updateUserContext } from "../../src/UserContext";
-import { get, listKeys } from "../../src/Utils/arm/generatedClients/2020-04-01/databaseAccounts";
+import { get, listKeys } from "../../src/Utils/arm/generatedClients/cosmos/databaseAccounts";
 
 const resourceGroup = process.env.RESOURCE_GROUP || "";
 const subscriptionId = process.env.SUBSCRIPTION_ID || "";
diff --git a/tsconfig.json b/tsconfig.json
index dc7fe129a..044162a7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,20 @@
     "types": ["jest", "playwright", "jest-playwright-preset", "expect-playwright"],
     "baseUrl": "src"
   },
+  "typedocOptions": {
+    "entryPoints": [
+      "./src/SelfServe/Documentation/Documentation.ts",
+      "./src/SelfServe/Documentation/SupportedFeatures.ts",
+      "./src/SelfServe/Decorators.tsx",
+      "./src/SelfServe/SelfServeTypes.ts",
+      "./src/SelfServe/SelfServeUtils.tsx",
+      "./src/SelfServe/SelfServeTelemetryProcessor.ts"
+    ],
+    "out": "docs",
+    "excludeInternal": true,
+    "includes": "./src/SelfServe/Documentation",
+    "disableSources": true
+  },
   "include": [
     "./src/**/*",
     "./utils/**/*",
diff --git a/tsconfig.strict.json b/tsconfig.strict.json
index 7a8971ce1..3693d539c 100644
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -46,6 +46,7 @@
     "./src/Explorer/LazyMonaco.ts",
     "./src/Explorer/Notebook/FileSystemUtil.ts",
     "./src/Explorer/Notebook/NTeractUtil.ts",
+    "./src/Explorer/Notebook/NotebookComponent/ContentProviders/InMemoryContentProviderUtils.ts",
     "./src/Explorer/Notebook/NotebookComponent/actions.ts",
     "./src/Explorer/Notebook/NotebookComponent/loadTransform.ts",
     "./src/Explorer/Notebook/NotebookComponent/reducers.ts",
@@ -58,9 +59,10 @@
     "./src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/decorators/CellLabeler.tsx",
     "./src/Explorer/Notebook/NotebookUtil.ts",
+    "./src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerSplashScreen.tsx",
+    "./src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerUtils.ts",
     "./src/Explorer/OpenFullScreen.test.tsx",
     "./src/Explorer/OpenFullScreen.tsx",
-    "./src/Explorer/Panes/PaneComponents.ts",
     "./src/Explorer/Panes/PanelFooterComponent.tsx",
     "./src/Explorer/Panes/PanelInfoErrorComponent.tsx",
     "./src/Explorer/Panes/PanelLoadingScreen.tsx",
@@ -76,7 +78,6 @@
     "./src/GitHub/GitHubConnector.ts",
     "./src/HostedExplorerChildFrame.ts",
     "./src/Index.ts",
-    "./src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts",
     "./src/Platform/Hosted/Authorization.ts",
     "./src/Platform/Hosted/Components/MeControl.test.tsx",
     "./src/Platform/Hosted/Components/MeControl.tsx",
@@ -85,6 +86,7 @@
     "./src/Platform/Hosted/extractFeatures.ts",
     "./src/ReactDevTools.ts",
     "./src/ResourceProvider/IResourceProviderClient.ts",
+    "./src/SelfServe/Example/SelfServeExample.types.ts",
     "./src/SelfServe/SelfServeStyles.tsx",
     "./src/SelfServe/SqlX/SqlxTypes.ts",
     "./src/Shared/Constants.ts",
@@ -111,6 +113,7 @@
     "./src/Utils/StyleUtils.ts",
     "./src/Utils/WindowUtils.test.ts",
     "./src/Utils/WindowUtils.ts",
+    "./src/hooks/useConfig.ts",
     "./src/hooks/useDirectories.tsx",
     "./src/hooks/useFullScreenURLs.tsx",
     "./src/hooks/useGraphPhoto.tsx",
@@ -118,23 +121,28 @@
     "./src/i18n.ts",
     "./src/quickstart.ts",
     "./src/setupTests.ts",
-    "./src/userContext.test.ts"
+    "./src/userContext.test.ts",
+    "src/Common/EntityValue.tsx"
   ],
   "include": [
     "src/CellOutputViewer/transforms/**/*",
     "src/Common/Tooltip/**/*",
     "src/Controls/**/*",
     "src/Definitions/**/*",
+    "src/Explorer/Controls/Accordion/**/*",
     "src/Explorer/Controls/ErrorDisplayComponent/**/*",
     "src/Explorer/Controls/Header/**/*",
     "src/Explorer/Controls/RadioSwitchComponent/**/*",
     "src/Explorer/Controls/ResizeSensorReactComponent/**/*",
     "src/Explorer/Graph/GraphExplorerComponent/__mocks__/**/*",
     "src/Explorer/Notebook/NotebookComponent/__mocks__/**/*",
+    "src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/**/*",
+    "src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/**/*",
     "src/Explorer/Panes/RightPaneForm/**/*",
     "src/Libs/**/*",
     "src/Localization/**/*",
     "src/Platform/Emulator/**/*",
+    "src/SelfServe/Documentation/**/*",
     "src/Shared/Telemetry/**/*",
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
diff --git a/utils/armClientGenerator/generator.ts b/utils/armClientGenerator/generator.ts
index 7a1d70c0b..dd3da3db0 100644
--- a/utils/armClientGenerator/generator.ts
+++ b/utils/armClientGenerator/generator.ts
@@ -15,12 +15,14 @@ But it does work well enough to generate a fully typed tree-shakeable client for
 Results of this file should be checked into the repo.
 */
 
+// CHANGE THESE VALUES TO GENERATE NEW CLIENTS
+const version = "2021-04-15";
+const resourceName = "cosmosNotebooks";
+const schemaURL = `https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/${version}/notebook.json`;
+const outputDir = path.join(__dirname, `../../src/Utils/arm/generatedClients/${resourceName}/${version}`);
+
 // Array of strings to use for eventual output
 const outputTypes: string[] = [""];
-const version = "2020-04-01";
-const schemaURL = `https://raw.githubusercontent.com/Azure/azure-rest-api-specs/master/specification/cosmos-db/resource-manager/Microsoft.DocumentDB/stable/${version}/cosmos-db.json`;
-
-const outputDir = path.join(__dirname, `../../src/Utils/arm/generatedClients/${version}`);
 mkdirp.sync(outputDir);
 
 // Buckets for grouping operations based on their name
@@ -33,7 +35,7 @@ const clients: { [key: string]: Client } = {};
 
 // Mapping for OpenAPI types to TypeScript types
 const propertyMap: { [key: string]: string } = {
-  integer: "number"
+  integer: "number",
 };
 
 // Converts a Open API reference: "#/definitions/Foo" to a type name: Foo
@@ -84,6 +86,7 @@ function responseType(operation: Operation, namespace: string) {
         return refToType(operation.responses[responseCode].schema.$ref, namespace);
       })
       .filter((value, index, array) => array.indexOf(value) === index)
+      .filter((value) => value !== "unknown")
       .join(" | ");
   }
   return "unknown";
@@ -98,6 +101,7 @@ interface Property {
   items?: {
     $ref: string;
   };
+  enum?: string[];
   allOf?: {
     $ref: string;
   }[];
@@ -129,6 +133,13 @@ const propertyToType = (property: Property, prop: string, required: boolean) =>
           /* ${property.description || "undocumented"} */
           ${property.readOnly ? "readonly " : ""}${prop}${required ? "" : "?"}: ${type}
           `);
+    } else if (property.enum) {
+      outputTypes.push(`
+          /* ${property.description || "undocumented"} */
+          ${property.readOnly ? "readonly " : ""}${prop}${required ? "" : "?"}: ${property.enum
+        .map((v: string) => `"${v}"`)
+        .join(" | ")}
+          `);
     } else {
       if (property.type === undefined) {
         console.log(`UHANDLED TYPE: ${prop}. Falling back to unknown`);
@@ -162,9 +173,6 @@ async function main() {
       } else {
         outputTypes.push(`export interface ${definition} {`);
       }
-      if (definition === "SqlDatabaseGetProperties") {
-        console.log(schema.definitions[definition]);
-      }
       for (const prop in schema.definitions[definition].properties) {
         const property = schema.definitions[definition].properties[prop];
         propertyToType(property, prop, schema.definitions[definition].required?.includes(prop));
@@ -225,9 +233,9 @@ async function main() {
   // Write all grouped fetch functions to objects
   for (const clientName in clients) {
     const outputClient: string[] = [""];
-    outputClient.push(`import { armRequest } from "../../request"\n`);
+    outputClient.push(`import { armRequest } from "../../../request"\n`);
     outputClient.push(`import * as Types from "./types"\n`);
-    outputClient.push(`import { configContext } from "../../../../ConfigContext";\n`);
+    outputClient.push(`import { configContext } from "../../../../../ConfigContext";\n`);
     outputClient.push(`const apiVersion = "${version}"\n\n`);
     for (const path of clients[clientName].paths) {
       for (const method in schema.paths[path]) {
@@ -240,7 +248,7 @@ async function main() {
           /* ${operation.description || "undocumented"} */
           export async function ${sanitize(camelize(methodName))} (
             ${parametersFromPath(path)
-              .map(p => `${p}: string`)
+              .map((p) => `${p}: string`)
               .join(",\n")}
             ${bodyParam(bodyParameter, "Types")}
           ) : Promise<${responseType(operation, "Types")}> {
@@ -268,13 +276,15 @@ function sanitize(name: string) {
 function writeOutputFile(outputPath: string, components: string[]) {
   components.unshift(`/* 
   AUTOGENERATED FILE
-  Do not manually edit
   Run "npm run generateARMClients" to regenerate
+  Edting this file directly should be done with extreme caution as not to diverge from ARM REST specs
+
+  Generated from: ${schemaURL}
 */\n\n`);
   writeFileSync(path.join(outputDir, outputPath), components.join(""));
 }
 
-main().catch(e => {
+main().catch((e) => {
   console.error(e);
   process.exit(1);
 });
diff --git a/web.config b/web.config
index 51421bfe9..5bf762418 100644
--- a/web.config
+++ b/web.config
@@ -42,6 +42,13 @@
       </staticContent>
     </system.webServer>
   </location>
+  <location path="cellOutputViewer.html">
+    <system.webServer>
+      <staticContent>
+        <clientCache cacheControlMode="DisableCache" />
+      </staticContent>
+    </system.webServer>
+  </location>
   <location path="config.json">
     <system.webServer>
       <staticContent>
@@ -63,6 +70,13 @@
       </staticContent>
     </system.webServer>
   </location>
+  <location path="mpac/cellOutputViewer.html">
+    <system.webServer>
+      <staticContent>
+        <clientCache cacheControlMode="DisableCache" />
+      </staticContent>
+    </system.webServer>
+  </location>
   <location path="mpac/config.json">
     <system.webServer>
       <staticContent>