From 69ac4e218d2fa1254b25708c5a18220bd6d20526 Mon Sep 17 00:00:00 2001
From: Sunil Kumar Yadav <79906609+sunilyadav840@users.noreply.github.com>
Date: Thu, 1 Apr 2021 01:13:55 +0530
Subject: [PATCH] Migration/execute sproc params pane in react (#576)

Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
---
 .eslintignore                                 |    1 -
 src/Explorer/ComponentRegisterer.ts           |    1 -
 .../SettingsComponent.test.tsx.snap           |  200 -
 src/Explorer/Explorer.tsx                     |   18 +-
 .../Panes/ExecuteSprocParamsPane.html         |  175 -
 src/Explorer/Panes/ExecuteSprocParamsPane.ts  |  172 -
 .../InputParameter.tsx                        |   91 +
 .../__snapshots__/index.test.tsx.snap         | 8182 +++++++++++++++++
 .../ExecuteSprocParamsPanel/index.test.tsx    |   34 +
 .../Panes/ExecuteSprocParamsPanel/index.tsx   |  163 +
 src/Explorer/Panes/PaneComponents.ts          |   34 +-
 src/Explorer/Panes/PanelComponent.less        |   27 +
 src/Explorer/Tabs/StoredProcedureTab.ts       |    4 +-
 src/Main.tsx                                  |    1 -
 14 files changed, 8519 insertions(+), 584 deletions(-)
 delete mode 100644 src/Explorer/Panes/ExecuteSprocParamsPane.html
 delete mode 100644 src/Explorer/Panes/ExecuteSprocParamsPane.ts
 create mode 100644 src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx
 create mode 100644 src/Explorer/Panes/ExecuteSprocParamsPanel/__snapshots__/index.test.tsx.snap
 create mode 100644 src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
 create mode 100644 src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

diff --git a/.eslintignore b/.eslintignore
index e32b753fd..b31e5774d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -126,7 +126,6 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
 src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts
index b67717c0e..07c095eb0 100644
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -77,7 +77,6 @@ ko.components.register("table-column-options-pane", new PaneComponents.TableColu
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
 ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
-ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
 ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
 ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
 ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index db5addf25..877dbb417 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -409,31 +409,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  ExecuteSprocParamsPane {
-                    "addNewParam": [Function],
-                    "addNewParamAtIndex": [Function],
-                    "addNewParamLabel": "Add New Param",
-                    "collectionHasPartitionKey": [Function],
-                    "container": [Circular],
-                    "deleteParam": [Function],
-                    "execute": [Function],
-                    "executeButtonEnabled": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "executesprocparamspane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onAddNewParamAtIndexKeyPress": [Function],
-                    "onAddNewParamKeyPress": [Function],
-                    "onDeleteParamKeyPress": [Function],
-                    "params": [Function],
-                    "partitionKeyType": [Function],
-                    "partitionKeyValue": [Function],
-                    "title": [Function],
-                    "validPartitionKeyValue": [Function],
-                    "visible": [Function],
-                  },
                   UploadItemsPane {
                     "container": [Circular],
                     "fileUploadSummaryText": [Function],
@@ -869,31 +844,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "executeSprocParamsPane": ExecuteSprocParamsPane {
-                  "addNewParam": [Function],
-                  "addNewParamAtIndex": [Function],
-                  "addNewParamLabel": "Add New Param",
-                  "collectionHasPartitionKey": [Function],
-                  "container": [Circular],
-                  "deleteParam": [Function],
-                  "execute": [Function],
-                  "executeButtonEnabled": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "executesprocparamspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddNewParamAtIndexKeyPress": [Function],
-                  "onAddNewParamKeyPress": [Function],
-                  "onDeleteParamKeyPress": [Function],
-                  "params": [Function],
-                  "partitionKeyType": [Function],
-                  "partitionKeyValue": [Function],
-                  "title": [Function],
-                  "validPartitionKeyValue": [Function],
-                  "visible": [Function],
-                },
                 "flight": [Function],
                 "graphStylingPane": GraphStylingPane {
                   "container": [Circular],
@@ -1603,31 +1553,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                ExecuteSprocParamsPane {
-                  "addNewParam": [Function],
-                  "addNewParamAtIndex": [Function],
-                  "addNewParamLabel": "Add New Param",
-                  "collectionHasPartitionKey": [Function],
-                  "container": [Circular],
-                  "deleteParam": [Function],
-                  "execute": [Function],
-                  "executeButtonEnabled": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "executesprocparamspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddNewParamAtIndexKeyPress": [Function],
-                  "onAddNewParamKeyPress": [Function],
-                  "onDeleteParamKeyPress": [Function],
-                  "params": [Function],
-                  "partitionKeyType": [Function],
-                  "partitionKeyValue": [Function],
-                  "title": [Function],
-                  "validPartitionKeyValue": [Function],
-                  "visible": [Function],
-                },
                 UploadItemsPane {
                   "container": [Circular],
                   "fileUploadSummaryText": [Function],
@@ -2063,31 +1988,6 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "executeSprocParamsPane": ExecuteSprocParamsPane {
-                "addNewParam": [Function],
-                "addNewParamAtIndex": [Function],
-                "addNewParamLabel": "Add New Param",
-                "collectionHasPartitionKey": [Function],
-                "container": [Circular],
-                "deleteParam": [Function],
-                "execute": [Function],
-                "executeButtonEnabled": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "executesprocparamspane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onAddNewParamAtIndexKeyPress": [Function],
-                "onAddNewParamKeyPress": [Function],
-                "onDeleteParamKeyPress": [Function],
-                "params": [Function],
-                "partitionKeyType": [Function],
-                "partitionKeyValue": [Function],
-                "title": [Function],
-                "validPartitionKeyValue": [Function],
-                "visible": [Function],
-              },
               "flight": [Function],
               "graphStylingPane": GraphStylingPane {
                 "container": [Circular],
@@ -2810,31 +2710,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  ExecuteSprocParamsPane {
-                    "addNewParam": [Function],
-                    "addNewParamAtIndex": [Function],
-                    "addNewParamLabel": "Add New Param",
-                    "collectionHasPartitionKey": [Function],
-                    "container": [Circular],
-                    "deleteParam": [Function],
-                    "execute": [Function],
-                    "executeButtonEnabled": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "executesprocparamspane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onAddNewParamAtIndexKeyPress": [Function],
-                    "onAddNewParamKeyPress": [Function],
-                    "onDeleteParamKeyPress": [Function],
-                    "params": [Function],
-                    "partitionKeyType": [Function],
-                    "partitionKeyValue": [Function],
-                    "title": [Function],
-                    "validPartitionKeyValue": [Function],
-                    "visible": [Function],
-                  },
                   UploadItemsPane {
                     "container": [Circular],
                     "fileUploadSummaryText": [Function],
@@ -3270,31 +3145,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "executeSprocParamsPane": ExecuteSprocParamsPane {
-                  "addNewParam": [Function],
-                  "addNewParamAtIndex": [Function],
-                  "addNewParamLabel": "Add New Param",
-                  "collectionHasPartitionKey": [Function],
-                  "container": [Circular],
-                  "deleteParam": [Function],
-                  "execute": [Function],
-                  "executeButtonEnabled": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "executesprocparamspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddNewParamAtIndexKeyPress": [Function],
-                  "onAddNewParamKeyPress": [Function],
-                  "onDeleteParamKeyPress": [Function],
-                  "params": [Function],
-                  "partitionKeyType": [Function],
-                  "partitionKeyValue": [Function],
-                  "title": [Function],
-                  "validPartitionKeyValue": [Function],
-                  "visible": [Function],
-                },
                 "flight": [Function],
                 "graphStylingPane": GraphStylingPane {
                   "container": [Circular],
@@ -4004,31 +3854,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                ExecuteSprocParamsPane {
-                  "addNewParam": [Function],
-                  "addNewParamAtIndex": [Function],
-                  "addNewParamLabel": "Add New Param",
-                  "collectionHasPartitionKey": [Function],
-                  "container": [Circular],
-                  "deleteParam": [Function],
-                  "execute": [Function],
-                  "executeButtonEnabled": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "executesprocparamspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddNewParamAtIndexKeyPress": [Function],
-                  "onAddNewParamKeyPress": [Function],
-                  "onDeleteParamKeyPress": [Function],
-                  "params": [Function],
-                  "partitionKeyType": [Function],
-                  "partitionKeyValue": [Function],
-                  "title": [Function],
-                  "validPartitionKeyValue": [Function],
-                  "visible": [Function],
-                },
                 UploadItemsPane {
                   "container": [Circular],
                   "fileUploadSummaryText": [Function],
@@ -4464,31 +4289,6 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "executeSprocParamsPane": ExecuteSprocParamsPane {
-                "addNewParam": [Function],
-                "addNewParamAtIndex": [Function],
-                "addNewParamLabel": "Add New Param",
-                "collectionHasPartitionKey": [Function],
-                "container": [Circular],
-                "deleteParam": [Function],
-                "execute": [Function],
-                "executeButtonEnabled": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "executesprocparamspane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onAddNewParamAtIndexKeyPress": [Function],
-                "onAddNewParamKeyPress": [Function],
-                "onDeleteParamKeyPress": [Function],
-                "params": [Function],
-                "partitionKeyType": [Function],
-                "partitionKeyValue": [Function],
-                "title": [Function],
-                "validPartitionKeyValue": [Function],
-                "visible": [Function],
-              },
               "flight": [Function],
               "graphStylingPane": GraphStylingPane {
                 "container": [Circular],
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 73e6342f7..8dcf12fa3 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -56,7 +56,7 @@ import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -213,7 +213,6 @@ export default class Explorer {
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   public settingsPane: SettingsPane;
-  public executeSprocParamsPane: ExecuteSprocParamsPane;
   public uploadItemsPane: UploadItemsPane;
   public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
@@ -632,13 +631,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
-      id: "executesprocparamspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.uploadItemsPane = new UploadItemsPane({
       id: "uploaditemspane",
       visible: ko.observable<boolean>(false),
@@ -705,7 +697,6 @@ export default class Explorer {
       this.newVertexPane,
       this.cassandraAddCollectionPane,
       this.settingsPane,
-      this.executeSprocParamsPane,
       this.uploadItemsPane,
       this.loadQueryPane,
       this.saveQueryPane,
@@ -2463,6 +2454,13 @@ export default class Explorer {
         );
   }
 
+  public openExecuteSprocParamsPanel(): void {
+    this.openSidePanel(
+      "Input parameters",
+      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
+    );
+  }
+
   public async openAddCollectionPanel(): Promise<void> {
     await this.loadDatabaseOffers();
     this.openSidePanel(
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane.html b/src/Explorer/Panes/ExecuteSprocParamsPane.html
deleted file mode 100644
index 4663a43da..000000000
--- a/src/Explorer/Panes/ExecuteSprocParamsPane.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div
-    class="contextual-pane-out"
-    data-bind="
-                    click: cancel,
-                    clickBubble: false"
-  ></div>
-  <div class="contextual-pane" id="executesprocparamspane">
-    <!-- Input params form  -- Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: execute">
-        <!-- Input params header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                                    click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Input params header - End -->
-
-        <!-- Input params errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a
-                class="errorLink"
-                role="link"
-                data-bind="
-                            visible: formErrorsDetails() && formErrorsDetails() !== '',
-                            click: showErrorDetails"
-                >More details</a
-              >
-            </span>
-          </div>
-        </div>
-        <!-- Input params errors - End -->
-
-        <!-- Script for each param clause to be used for executing a stored procedure -->
-        <script type="text/html" id="param-template">
-          <tr>
-            <td class="paramTemplateRow">
-              <select class="dataTypeSelector" data-bind="value: type, attr: { 'aria-label': type }">
-                <option value="custom">Custom</option>
-                <option value="string">String</option>
-              </select>
-            </td>
-            <td class="paramTemplateRow">
-              <input class="valueTextBox" aria-label="Param" data-bind="textInput: value" />
-              <span
-                class="spEntityAddCancel"
-                data-bind="click: $parent.deleteParam.bind($parent, $index()), event: { keypress: $parent.onDeleteParamKeyPress.bind($parent, $index()) }"
-                role="button"
-                tabindex="0"
-              >
-                <img src="/Entity_cancel.svg" alt="Delete param" />
-              </span>
-              <span
-                class="spEntityAddCancel"
-                data-bind="click: $parent.addNewParamAtIndex.bind($parent, $index()), event: { keypress: $parent.onAddNewParamAtIndexKeyPress.bind($parent, $index()) }"
-                role="button"
-                tabindex="0"
-              >
-                <img src="/Add-property.svg" alt="Add param" />
-              </span>
-            </td>
-          </tr>
-        </script>
-
-        <!-- Input params input - Start -->
-        <div class="paneMainContent">
-          <div>
-            <!-- Partition key input - Start -->
-            <div class="partitionKeyContainer" data-bind="visible: collectionHasPartitionKey">
-              <div class="inputHeader">Partition key value</div>
-              <div class="scrollBox">
-                <table class="paramsClauseTable">
-                  <thead>
-                    <tr>
-                      <th>Type</th>
-                      <th>Value</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td class="paramTemplateRow">
-                        <select
-                          class="dataTypeSelector"
-                          data-bind="value: partitionKeyType, attr: { 'aria-label': partitionKeyType }"
-                        >
-                          <option value="custom">Custom</option>
-                          <option value="string">String</option>
-                        </select>
-                      </td>
-                      <td class="paramTemplateRow">
-                        <input
-                          class="partitionKeyValue"
-                          id="partitionKeyValue"
-                          role="textbox"
-                          tabindex="0"
-                          aria-label="Partition key value"
-                          data-bind="textInput: partitionKeyValue"
-                          autofocus
-                        />
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <!-- Partition key input - End -->
-
-            <!-- Input params table - Start -->
-            <div class="paramsTable">
-              <div class="enterInputParams">Enter input parameters (if any)</div>
-              <div class="scrollBox" id="executeSprocParamsScroll">
-                <table class="paramsClauseTable">
-                  <thead>
-                    <tr>
-                      <th class="paramTableTypeHead">Type</th>
-                      <th>Param</th>
-                    </tr>
-                  </thead>
-                  <tbody data-bind="template: { name: 'param-template', foreach: params }"></tbody>
-                </table>
-              </div>
-              <div
-                id="addNewParamLink"
-                class="addNewParam"
-                data-bind="click: addNewParam, event: { keypress: onAddNewParamKeyPress }, attr:{ title: addNewParamLabel }"
-                role="button"
-                tabindex="0"
-              >
-                <span>
-                  <img src="/Add-property.svg" alt="Add new param" />
-                  <span class="addNewParamLabel" data-bind="text: addNewParamLabel" />
-                </span>
-              </div>
-            </div>
-            <!-- Input params table - End -->
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut">
-            <input
-              type="submit"
-              value="Execute"
-              class="btncreatecoll1"
-              data-bind="{ css: { btnDisabled: !executeButtonEnabled() }}"
-            />
-          </div>
-        </div>
-        <!-- Input param input - End -->
-      </form>
-    </div>
-    <!-- Input params form - End -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane.ts b/src/Explorer/Panes/ExecuteSprocParamsPane.ts
deleted file mode 100644
index 1c59d9bf4..000000000
--- a/src/Explorer/Panes/ExecuteSprocParamsPane.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as ko from "knockout";
-import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import StoredProcedure from "../Tree/StoredProcedure";
-
-export interface ExecuteSprocParam {
-  type: ko.Observable<string>;
-  value: ko.Observable<string>;
-}
-
-type UnwrappedExecuteSprocParam = {
-  type: string;
-  value: any;
-};
-
-export class ExecuteSprocParamsPane extends ContextualPaneBase {
-  public params: ko.ObservableArray<ExecuteSprocParam>;
-  public partitionKeyType: ko.Observable<string>;
-  public partitionKeyValue: ko.Observable<string>;
-  public collectionHasPartitionKey: ko.Observable<boolean>;
-  public addNewParamLabel: string = "Add New Param";
-  public executeButtonEnabled: ko.Computed<boolean>;
-
-  private _selectedSproc: StoredProcedure;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Input parameters");
-    this.partitionKeyType = ko.observable<string>("custom");
-    this.partitionKeyValue = ko.observable<string>();
-    this.executeButtonEnabled = ko.computed<boolean>(() => this.validPartitionKeyValue());
-    this.params = ko.observableArray<ExecuteSprocParam>([
-      { type: ko.observable<string>("string"), value: ko.observable<string>() },
-    ]);
-    this.collectionHasPartitionKey = ko.observable<boolean>();
-    this.resetData();
-  }
-
-  public open() {
-    super.open();
-    const currentSelectedSproc = this.container && this.container.findSelectedStoredProcedure();
-    if (!!currentSelectedSproc && !!this._selectedSproc && this._selectedSproc.rid !== currentSelectedSproc.rid) {
-      this.params([]);
-      this.partitionKeyValue("");
-    }
-    this._selectedSproc = currentSelectedSproc;
-    this.collectionHasPartitionKey((this.container && !!this.container.findSelectedCollection().partitionKey) || false);
-    const focusElement = document.getElementById("partitionKeyValue");
-    focusElement && focusElement.focus();
-  }
-
-  public execute = () => {
-    this.formErrors("");
-    const partitionKeyValue: string = (() => {
-      if (!this.collectionHasPartitionKey()) {
-        return undefined;
-      }
-
-      const type: string = this.partitionKeyType();
-      let value: string = this.partitionKeyValue();
-
-      if (type === "custom") {
-        if (value === "undefined" || value === undefined) {
-          return undefined;
-        }
-
-        if (value === "null" || value === null) {
-          return null;
-        }
-
-        try {
-          value = JSON.parse(value);
-        } catch (e) {
-          this.formErrors(`Invalid param specified: ${value}`);
-          this.formErrorsDetails(`Invalid param specified: ${value} is not a valid literal value`);
-        }
-      }
-
-      return value;
-    })();
-    const unwrappedParams: UnwrappedExecuteSprocParam[] = ko.toJS(this.params());
-    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = !this.params()
-      ? undefined
-      : _.map(unwrappedParams, (unwrappedParam: UnwrappedExecuteSprocParam) => {
-          let paramValue: string = unwrappedParam.value;
-
-          if (unwrappedParam.type === "custom" && (paramValue === "undefined" || paramValue === "")) {
-            paramValue = undefined;
-          } else if (unwrappedParam.type === "custom") {
-            try {
-              paramValue = JSON.parse(paramValue);
-            } catch (e) {
-              this.formErrors(`Invalid param specified: ${paramValue}`);
-              this.formErrorsDetails(`Invalid param specified: ${paramValue} is not a valid literal value`);
-            }
-          }
-
-          unwrappedParam.value = paramValue;
-          return unwrappedParam;
-        });
-
-    if (this.formErrors()) {
-      return;
-    }
-
-    const sprocParams = wrappedSprocParams && _.pluck(wrappedSprocParams, "value");
-    this._selectedSproc.execute(sprocParams, partitionKeyValue);
-    this.close();
-  };
-
-  private validPartitionKeyValue = (): boolean => {
-    return !this.collectionHasPartitionKey || (this.partitionKeyValue() != null && this.partitionKeyValue().length > 0);
-  };
-
-  public addNewParam = (): void => {
-    this.params.push({ type: ko.observable<string>("string"), value: ko.observable<string>() });
-    this._maintainFocusOnAddNewParamLink();
-  };
-
-  public onAddNewParamKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.addNewParam();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addNewParamAtIndex = (index: number): void => {
-    this.params.splice(index, 0, { type: ko.observable<string>("string"), value: ko.observable<string>() });
-  };
-
-  public onAddNewParamAtIndexKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.addNewParamAtIndex(index);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public deleteParam = (indexToRemove: number): void => {
-    const params = _.reject(this.params(), (param: ExecuteSprocParam, index: number) => {
-      return index === indexToRemove;
-    });
-    this.params(params);
-  };
-
-  public onDeleteParamKeyPress = (indexToRemove: number, source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.deleteParam(indexToRemove);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public close(): void {
-    super.close();
-    this.formErrors("");
-    this.formErrorsDetails("");
-  }
-
-  private _maintainFocusOnAddNewParamLink(): void {
-    const addNewParamLink = document.getElementById("addNewParamLink");
-    addNewParamLink.scrollIntoView();
-  }
-}
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx b/src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx
new file mode 100644
index 000000000..03c487fad
--- /dev/null
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx
@@ -0,0 +1,91 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  IImageProps,
+  Image,
+  Label,
+  Stack,
+  TextField,
+} from "office-ui-fabric-react";
+import React, { FunctionComponent } from "react";
+import AddPropertyIcon from "../../../../images/Add-property.svg";
+import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
+
+const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
+const options = [
+  { key: "string", text: "String" },
+  { key: "custom", text: "Custom" },
+];
+
+export interface InputParameterProps {
+  dropdownLabel?: string;
+  inputParameterTitle?: string;
+  inputLabel?: string;
+  isAddRemoveVisible: boolean;
+  onDeleteParamKeyPress?: () => void;
+  onAddNewParamKeyPress?: () => void;
+  onParamValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onParamKeyChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  paramValue: string;
+  selectedKey: string | number;
+}
+
+export const InputParameter: FunctionComponent<InputParameterProps> = ({
+  dropdownLabel,
+  inputParameterTitle,
+  inputLabel,
+  isAddRemoveVisible,
+  paramValue,
+  selectedKey,
+  onDeleteParamKeyPress,
+  onAddNewParamKeyPress,
+  onParamValueChange,
+  onParamKeyChange,
+}: InputParameterProps): JSX.Element => {
+  const imageProps: IImageProps = {
+    width: 20,
+    height: 30,
+    className: dropdownLabel ? "addRemoveIconLabel" : "addRemoveIcon",
+  };
+
+  return (
+    <>
+      {inputParameterTitle && <Label>{inputParameterTitle}</Label>}
+      <Stack horizontal>
+        <Dropdown
+          label={dropdownLabel && dropdownLabel}
+          selectedKey={selectedKey}
+          onChange={onParamKeyChange}
+          options={options}
+          styles={dropdownStyles}
+        />
+        <TextField
+          label={inputLabel && inputLabel}
+          id="confirmCollectionId"
+          autoFocus
+          value={paramValue}
+          onChange={onParamValueChange}
+        />
+        {isAddRemoveVisible && (
+          <>
+            <Image
+              {...imageProps}
+              src={EntityCancelIcon}
+              alt="Delete param"
+              id="deleteparam"
+              onClick={onDeleteParamKeyPress}
+            />
+            <Image
+              {...imageProps}
+              src={AddPropertyIcon}
+              alt="Add param"
+              id="addparam"
+              onClick={onAddNewParamKeyPress}
+            />
+          </>
+        )}
+      </Stack>
+    </>
+  );
+};
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPanel/__snapshots__/index.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPanel/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..16baa1b18
--- /dev/null
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,8182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Excute Sproc Param Pane should render Default properly 1`] = `
+<ExecuteSprocParamsPanel
+  closePanel={[Function]}
+  explorer={Object {}}
+>
+  <GenericRightPaneComponent
+    container={Object {}}
+    formError=""
+    formErrorDetail=""
+    id="executesprocparamspane"
+    isExecuting={false}
+    onClose={[Function]}
+    onSubmit={[Function]}
+    submitButtonText="Execute"
+    title="Input parameters"
+  >
+    <div
+      onKeyDown={[Function]}
+      tabIndex={-1}
+    >
+      <div
+        className="contextual-pane-out"
+        onClick={[Function]}
+      />
+      <div
+        className="contextual-pane"
+        id="executesprocparamspane"
+        onKeyDown={[Function]}
+        style={
+          Object {
+            "height": NaN,
+          }
+        }
+      >
+        <div
+          className="panelContentWrapper"
+        >
+          <div
+            className="firstdivbg headerline"
+          >
+            <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}
+                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",
+                          "pointerEvents": "none",
+                          "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",
+                          },
+                        },
+                      },
+                      "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-40"
+                    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-41"
+                      data-automationid="splitbuttonprimary"
+                    >
+                      <Component
+                        className="ms-Button-icon icon-43"
+                        iconName="Cancel"
+                      >
+                        <i
+                          aria-hidden={true}
+                          className="ms-Icon root-37 css-48 ms-Button-icon icon-43"
+                          data-icon-name="Cancel"
+                          role="presentation"
+                          style={
+                            Object {
+                              "fontFamily": "\\"FabricMDL2Icons\\"",
+                            }
+                          }
+                        >
+                          
+                        </i>
+                      </Component>
+                    </span>
+                  </button>
+                  <Component />
+                </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]}
+                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-49"
+                    >
+                      Partition key value
+                    </label>
+                  </LabelBase>
+                </StyledLabelBase>
+                <Stack
+                  horizontal={true}
+                >
+                  <div
+                    className="ms-Stack css-50"
+                  >
+                    <StyledWithResponsiveMode
+                      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,
+                          },
+                        }
+                      }
+                    >
+                      <WithResponsiveMode
+                        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",
+                            },
+                          }
+                        }
+                      >
+                        <DropdownBase
+                          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-67"
+                                  id="Dropdown3-label"
+                                >
+                                  Key
+                                </label>
+                              </LabelBase>
+                            </StyledLabelBase>
+                            <Component>
+                              <div
+                                aria-expanded="false"
+                                aria-haspopup="listbox"
+                                aria-labelledby="Dropdown3-label Dropdown3-option"
+                                className="ms-Dropdown dropdown-51"
+                                data-is-focusable={true}
+                                id="Dropdown3"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                onMouseDown={[Function]}
+                                role="listbox"
+                                tabIndex={0}
+                              >
+                                <span
+                                  aria-atomic={true}
+                                  aria-invalid={false}
+                                  aria-live="polite"
+                                  aria-posinset={1}
+                                  aria-selected={true}
+                                  aria-setsize={2}
+                                  className="ms-Dropdown-title title-52"
+                                  id="Dropdown3-option"
+                                  role="option"
+                                >
+                                  String
+                                </span>
+                                <span
+                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
+                                >
+                                  <StyledIconBase
+                                    aria-hidden={true}
+                                    className="ms-Dropdown-caretDown caretDown-54"
+                                    iconName="ChevronDown"
+                                  >
+                                    <IconBase
+                                      aria-hidden={true}
+                                      className="ms-Dropdown-caretDown caretDown-54"
+                                      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-68"
+                                        data-icon-name="ChevronDown"
+                                      >
+                                        
+                                      </i>
+                                    </IconBase>
+                                  </StyledIconBase>
+                                </span>
+                              </div>
+                            </Component>
+                          </div>
+                        </DropdownBase>
+                      </WithResponsiveMode>
+                    </StyledWithResponsiveMode>
+                    <StyledTextFieldBase
+                      autoFocus={true}
+                      id="confirmCollectionId"
+                      key=".0:$.1"
+                      label="Value"
+                      onChange={[Function]}
+                      value=""
+                    >
+                      <TextFieldBase
+                        autoFocus={true}
+                        canRevealPassword={false}
+                        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}
+                        value=""
+                      >
+                        <div
+                          className="ms-TextField root-70"
+                        >
+                          <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-49"
+                                  htmlFor="confirmCollectionId"
+                                  id="TextFieldLabel6"
+                                >
+                                  Value
+                                </label>
+                              </LabelBase>
+                            </StyledLabelBase>
+                            <div
+                              className="ms-TextField-fieldGroup fieldGroup-71"
+                            >
+                              <input
+                                aria-invalid={false}
+                                aria-labelledby="TextFieldLabel6"
+                                autoFocus={true}
+                                className="ms-TextField-field field-72"
+                                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-49"
+                    >
+                      Enter input parameters (if any)
+                    </label>
+                  </LabelBase>
+                </StyledLabelBase>
+                <Stack
+                  horizontal={true}
+                >
+                  <div
+                    className="ms-Stack css-50"
+                  >
+                    <StyledWithResponsiveMode
+                      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,
+                          },
+                        }
+                      }
+                    >
+                      <WithResponsiveMode
+                        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",
+                            },
+                          }
+                        }
+                      >
+                        <DropdownBase
+                          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-67"
+                                  id="Dropdown7-label"
+                                >
+                                  Key
+                                </label>
+                              </LabelBase>
+                            </StyledLabelBase>
+                            <Component>
+                              <div
+                                aria-expanded="false"
+                                aria-haspopup="listbox"
+                                aria-labelledby="Dropdown7-label Dropdown7-option"
+                                className="ms-Dropdown dropdown-51"
+                                data-is-focusable={true}
+                                id="Dropdown7"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                onMouseDown={[Function]}
+                                role="listbox"
+                                tabIndex={0}
+                              >
+                                <span
+                                  aria-atomic={true}
+                                  aria-invalid={false}
+                                  aria-live="polite"
+                                  aria-posinset={1}
+                                  aria-selected={true}
+                                  aria-setsize={2}
+                                  className="ms-Dropdown-title title-52"
+                                  id="Dropdown7-option"
+                                  role="option"
+                                >
+                                  String
+                                </span>
+                                <span
+                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
+                                >
+                                  <StyledIconBase
+                                    aria-hidden={true}
+                                    className="ms-Dropdown-caretDown caretDown-54"
+                                    iconName="ChevronDown"
+                                  >
+                                    <IconBase
+                                      aria-hidden={true}
+                                      className="ms-Dropdown-caretDown caretDown-54"
+                                      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-68"
+                                        data-icon-name="ChevronDown"
+                                      >
+                                        
+                                      </i>
+                                    </IconBase>
+                                  </StyledIconBase>
+                                </span>
+                              </div>
+                            </Component>
+                          </div>
+                        </DropdownBase>
+                      </WithResponsiveMode>
+                    </StyledWithResponsiveMode>
+                    <StyledTextFieldBase
+                      autoFocus={true}
+                      id="confirmCollectionId"
+                      key=".0:$.1"
+                      label="Param"
+                      onChange={[Function]}
+                      value=""
+                    >
+                      <TextFieldBase
+                        autoFocus={true}
+                        canRevealPassword={false}
+                        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-70"
+                        >
+                          <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-49"
+                                  htmlFor="confirmCollectionId"
+                                  id="TextFieldLabel10"
+                                >
+                                  Param
+                                </label>
+                              </LabelBase>
+                            </StyledLabelBase>
+                            <div
+                              className="ms-TextField-fieldGroup fieldGroup-71"
+                            >
+                              <input
+                                aria-invalid={false}
+                                aria-labelledby="TextFieldLabel10"
+                                autoFocus={true}
+                                className="ms-TextField-field field-72"
+                                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]}
+                        shouldFadeIn={true}
+                        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-81"
+                          style={
+                            Object {
+                              "height": 30,
+                              "width": 20,
+                            }
+                          }
+                        >
+                          <img
+                            alt="Delete param"
+                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
+                            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]}
+                        shouldFadeIn={true}
+                        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-81"
+                          style={
+                            Object {
+                              "height": 30,
+                              "width": 20,
+                            }
+                          }
+                        >
+                          <img
+                            alt="Add param"
+                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
+                            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-50"
+                  onClick={[Function]}
+                >
+                  <StyledImageBase
+                    alt="Add param"
+                    height={30}
+                    key=".0:$.0"
+                    src=""
+                    width={20}
+                  >
+                    <ImageBase
+                      alt="Add param"
+                      height={30}
+                      shouldFadeIn={true}
+                      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-81"
+                        style={
+                          Object {
+                            "height": 30,
+                            "width": 20,
+                          }
+                        }
+                      >
+                        <img
+                          alt="Add param"
+                          className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
+                          key="fabricImage"
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          src=""
+                        />
+                      </div>
+                    </ImageBase>
+                  </StyledImageBase>
+                  <Text
+                    className="addNewParamStyle"
+                    key=".0:$.1"
+                  >
+                    <span
+                      className="addNewParamStyle css-83"
+                    >
+                      Add New Param
+                    </span>
+                  </Text>
+                </div>
+              </Stack>
+            </div>
+          </div>
+          <div
+            className="paneFooter"
+          >
+            <div
+              className="leftpanel-okbut"
+            >
+              <CustomizedPrimaryButton
+                ariaLabel="Submit"
+                className="genericPaneSubmitBtn"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "visibility": "visible",
+                  }
+                }
+                tabIndex={0}
+                text="Execute"
+                title="Submit"
+              >
+                <PrimaryButton
+                  ariaLabel="Submit"
+                  className="genericPaneSubmitBtn"
+                  onClick={[Function]}
+                  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"
+                >
+                  <CustomizedDefaultButton
+                    ariaLabel="Submit"
+                    className="genericPaneSubmitBtn"
+                    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"
+                  >
+                    <DefaultButton
+                      ariaLabel="Submit"
+                      className="genericPaneSubmitBtn"
+                      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"
+                    >
+                      <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",
+                                "pointerEvents": "none",
+                                "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",
+                                },
+                              },
+                            },
+                            "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"
+                      >
+                        <button
+                          aria-label="Submit"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-84"
+                          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-41"
+                            data-automationid="splitbuttonprimary"
+                          >
+                            <span
+                              className="ms-Button-textContainer textContainer-42"
+                            >
+                              <span
+                                className="ms-Button-label label-85"
+                                id="id__11"
+                                key="id__11"
+                              >
+                                Execute
+                              </span>
+                            </span>
+                          </span>
+                        </button>
+                        <Component />
+                      </BaseButton>
+                    </DefaultButton>
+                  </CustomizedDefaultButton>
+                </PrimaryButton>
+              </CustomizedPrimaryButton>
+            </div>
+          </div>
+        </div>
+        <div
+          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
+          hidden={true}
+        >
+          <img
+            className="dataExplorerLoader"
+            src=""
+          />
+        </div>
+      </div>
+    </div>
+  </GenericRightPaneComponent>
+</ExecuteSprocParamsPanel>
+`;
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
new file mode 100644
index 000000000..e644a5e3f
--- /dev/null
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
@@ -0,0 +1,34 @@
+import { mount } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { ExecuteSprocParamsPanel } from "./index";
+
+describe("Excute Sproc Param Pane", () => {
+  const fakeExplorer = {} as Explorer;
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+  };
+
+  it("should render Default properly", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("initially display 2 input field, 1 partition and 1 parameter", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    expect(wrapper.find("input[type='text']")).toHaveLength(2);
+  });
+
+  it("add a new parameter field", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    wrapper.find("#addparam").last().simulate("click");
+    expect(wrapper.find("input[type='text']")).toHaveLength(3);
+  });
+
+  it("remove a parameter field", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    wrapper.find("#deleteparam").last().simulate("click");
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+  });
+});
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
new file mode 100644
index 000000000..85a90277f
--- /dev/null
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
@@ -0,0 +1,163 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import AddPropertyIcon from "../../../../images/Add-property.svg";
+import Explorer from "../../Explorer";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { InputParameter } from "./InputParameter";
+
+interface ExecuteSprocParamsPaneProps {
+  explorer: Explorer;
+  closePanel: () => void;
+}
+
+const imageProps: IImageProps = {
+  width: 20,
+  height: 30,
+};
+
+interface UnwrappedExecuteSprocParam {
+  key: string;
+  text: string;
+}
+
+export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
+  explorer,
+  closePanel,
+}: ExecuteSprocParamsPaneProps): JSX.Element => {
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const [paramKeyValues, setParamKeyValues] = useState<UnwrappedExecuteSprocParam[]>([{ key: "string", text: "" }]);
+  const [partitionValue, setPartitionValue] = useState<string>("");
+  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 = {
+    container: explorer,
+    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++) {
+      const { key: paramType, text: paramValue } = unwrappedParams[i];
+      if (paramType === "custom" && (paramValue === "" || paramValue === undefined)) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const setInvalidParamError = (invalidParam: string): void => {
+    setFormError(`Invalid param specified: ${invalidParam}`);
+    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
+  };
+
+  const submit = (): void => {
+    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
+    const { key: partitionKey } = selectedKey;
+    if (partitionKey === "custom" && (partitionValue === "" || partitionValue === undefined)) {
+      setInvalidParamError(partitionValue);
+      return;
+    }
+    if (!validateUnwrappedParams()) {
+      setInvalidParamError("");
+      return;
+    }
+    setLoadingTrue();
+    const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
+    const currentSelectedSproc = explorer.findSelectedStoredProcedure();
+    currentSelectedSproc.execute(sprocParams, partitionValue);
+    setLoadingFalse();
+    closePanel();
+  };
+
+  const deleteParamAtIndex = (indexToRemove: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(indexToRemove, 1);
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const addNewParamAtIndex = (indexToAdd: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(indexToAdd, 0, { key: "string", text: "" });
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const paramValueChange = (value: string, indexOfInput: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue[indexOfInput].text = value;
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const paramKeyChange = (
+    _event: React.FormEvent<HTMLDivElement>,
+    selectedParam: IDropdownOption,
+    indexOfParam: number
+  ): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue[indexOfParam].key = selectedParam.key.toString();
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const addNewParamAtLastIndex = (): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(cloneParamKeyValue.length, 0, { key: "string", text: "" });
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          <InputParameter
+            dropdownLabel="Key"
+            inputParameterTitle="Partition key value"
+            inputLabel="Value"
+            isAddRemoveVisible={false}
+            onParamValueChange={(_event, newInput?: string) => {
+              setPartitionValue(newInput);
+            }}
+            onParamKeyChange={onPartitionKeyChange}
+            paramValue={partitionValue}
+            selectedKey={selectedKey.key}
+          />
+          {paramKeyValues.map((paramKeyValue, index) => (
+            <InputParameter
+              key={paramKeyValue && paramKeyValue.text + index}
+              dropdownLabel={!index && "Key"}
+              inputParameterTitle={!index && "Enter input parameters (if any)"}
+              inputLabel={!index && "Param"}
+              isAddRemoveVisible={true}
+              onDeleteParamKeyPress={() => deleteParamAtIndex(index)}
+              onAddNewParamKeyPress={() => addNewParamAtIndex(index + 1)}
+              onParamValueChange={(event, newInput?: string) => {
+                paramValueChange(newInput, index);
+              }}
+              onParamKeyChange={(event: React.FormEvent<HTMLDivElement>, selectedParam: IDropdownOption) => {
+                paramKeyChange(event, selectedParam, index);
+              }}
+              paramValue={paramKeyValue && paramKeyValue.text}
+              selectedKey={paramKeyValue && paramKeyValue.key}
+            />
+          ))}
+          <Stack horizontal onClick={addNewParamAtLastIndex}>
+            <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
+            <Text className="addNewParamStyle">Add New Param</Text>
+          </Stack>
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};
diff --git a/src/Explorer/Panes/PaneComponents.ts b/src/Explorer/Panes/PaneComponents.ts
index 6bd6698b6..3dd629d66 100644
--- a/src/Explorer/Panes/PaneComponents.ts
+++ b/src/Explorer/Panes/PaneComponents.ts
@@ -1,24 +1,23 @@
-import AddDatabasePaneTemplate from "./AddDatabasePane.html";
 import AddCollectionPaneTemplate from "./AddCollectionPane.html";
+import AddDatabasePaneTemplate from "./AddDatabasePane.html";
+import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
+import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
 import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
+import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
-import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
-import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
-import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
-import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
-import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
-import SettingsPaneTemplate from "./SettingsPane.html";
-import ExecuteSprocParamsPaneTemplate from "./ExecuteSprocParamsPane.html";
-import UploadItemsPaneTemplate from "./UploadItemsPane.html";
 import LoadQueryPaneTemplate from "./LoadQueryPane.html";
 import SaveQueryPaneTemplate from "./SaveQueryPane.html";
-import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
-import UploadFilePaneTemplate from "./UploadFilePane.html";
-import StringInputPaneTemplate from "./StringInputPane.html";
+import SettingsPaneTemplate from "./SettingsPane.html";
 import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
-import GitHubReposPaneTemplate from "./GitHubReposPane.html";
+import StringInputPaneTemplate from "./StringInputPane.html";
+import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
+import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
+import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
+import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
+import UploadFilePaneTemplate from "./UploadFilePane.html";
+import UploadItemsPaneTemplate from "./UploadItemsPane.html";
 
 export class PaneComponent {
   constructor(data: any) {
@@ -134,15 +133,6 @@ export class SettingsPaneComponent {
   }
 }
 
-export class ExecuteSprocParamsComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: ExecuteSprocParamsPaneTemplate,
-    };
-  }
-}
-
 export class UploadItemsPaneComponent {
   constructor() {
     return {
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 043816fa1..3ae4cff26 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -110,7 +110,34 @@
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
+.addRemoveIcon {
+  margin-left: 4px !important;
+}
+.addRemoveIconLabel {
+  margin-top: 28px;
+  margin-left: 4px !important;
+}
+.addNewParamStyle {
+  margin-top: 5px;
+  margin-left: 5px !important;
+  cursor: pointer;
+}
 
 .panelGroupSpacing > * {
   margin-bottom: @SmallSpace;
 }
+.panelAddIconLabel {
+  font-size: 20px;
+  width: 20px;
+  margin: 30px 0 0 10px;
+  cursor: default;
+}
+.panelAddIcon {
+  font-size: 20px;
+  width: 20px;
+  margin: 30px 0 0 10px;
+  cursor: default;
+}
+.removeIcon {
+  color: @InfoIconColor;
+}
\ No newline at end of file
diff --git a/src/Explorer/Tabs/StoredProcedureTab.ts b/src/Explorer/Tabs/StoredProcedureTab.ts
index cf99243e9..7e8d9396a 100644
--- a/src/Explorer/Tabs/StoredProcedureTab.ts
+++ b/src/Explorer/Tabs/StoredProcedureTab.ts
@@ -7,13 +7,13 @@ import * as Constants from "../../Common/Constants";
 import { createStoredProcedure } from "../../Common/dataAccess/createStoredProcedure";
 import { updateStoredProcedure } from "../../Common/dataAccess/updateStoredProcedure";
 import editable from "../../Common/EditableUtility";
+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 { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import StoredProcedure from "../Tree/StoredProcedure";
 import ScriptTabBase from "./ScriptTabBase";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import template from "./StoredProcedureTab.html";
 
 enum ToggleState {
@@ -208,7 +208,7 @@ export default class StoredProcedureTab extends ScriptTabBase {
       iconSrc: ExecuteQueryIcon,
       iconAlt: label,
       onCommandClick: () => {
-        this.collection && this.collection.container.executeSprocParamsPane.open();
+        this.collection && this.collection.container.openExecuteSprocParamsPanel();
       },
       commandButtonLabel: label,
       ariaLabel: label,
diff --git a/src/Main.tsx b/src/Main.tsx
index ad24a844c..5ec3ca25b 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -244,7 +244,6 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "settings-pane", params: { data: settingsPane} }' />
       <div data-bind='component: { name: "upload-items-pane", params: { data: uploadItemsPane} }' />
       <div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
-      <div data-bind='component: { name: "execute-sproc-params-pane", params: { data: executeSprocParamsPane} }' />
       <div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
       <div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
       <div data-bind='component: { name: "upload-file-pane", params: { data: uploadFilePane} }' />