Merge pull request #15721 from jeclrsg/hpcc-27025-replace-material-ui-stepper

HPCC-27025 Replace MaterialUI Stepper component

Reviewed-By: Gordon Smith <gordon.smith@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/package-lock.json

@@ -28,9 +28,6 @@
         "@hpcc-js/react": "^2.42.0",
         "@hpcc-js/tree": "^2.32.0",
         "@hpcc-js/util": "^2.40.0",
-        "@material-ui/core": "^4.12.3",
-        "@material-ui/icons": "^4.11.2",
-        "@material-ui/lab": "^4.0.0-alpha.60",
         "clipboard": "^2.0.8",
         "detect-browser": "^5.3.0",
         "dijit": "^1.16.4",
@@ -109,11 +106,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -860,188 +852,6 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/@material-ui/core": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
-      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.4",
-        "@material-ui/system": "^4.12.1",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/icons": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
-      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.0.0",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/lab": {
-      "version": "4.0.0-alpha.60",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
-      "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.12.1",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/styles": {
-      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
-      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/system": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
-      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "peerDependencies": {
-        "@types/react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/utils": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
-      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
     "node_modules/@microsoft/load-themed-styles": {
       "version": "1.10.196",
       "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.196.tgz",
@@ -1406,14 +1216,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react/node_modules/csstype": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
@@ -2219,14 +2021,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -2486,15 +2280,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2507,11 +2292,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csstype": {
-      "version": "2.6.17",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
-      "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
-    },
     "node_modules/current-module-paths": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/current-module-paths/-/current-module-paths-1.1.0.tgz",
@@ -2739,20 +2519,6 @@
         "dojo": "1.16.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/dom-helpers/node_modules/csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -3761,11 +3527,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -3984,11 +3745,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "node_modules/is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -4215,93 +3971,6 @@
         "node": "*"
       }
     },
-    "node_modules/jss": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
-      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
-      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.9.0"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
-      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
-      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
-      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
-      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
-      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
-      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.9.0"
-      }
-    },
-    "node_modules/jss/node_modules/csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -5618,11 +5287,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
     "node_modules/postcss": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
@@ -5973,21 +5637,6 @@
         "throttle-debounce": "^3.0.1"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -7568,11 +7217,6 @@
       "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
       "dev": true
     },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
     "@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz",
@@ -8242,95 +7886,6 @@
         "vary": "^1.1.2"
       }
     },
-    "@material-ui/core": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
-      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.4",
-        "@material-ui/system": "^4.12.1",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      }
-    },
-    "@material-ui/icons": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
-      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
-      "requires": {
-        "@babel/runtime": "^7.4.4"
-      }
-    },
-    "@material-ui/lab": {
-      "version": "4.0.0-alpha.60",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
-      "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
-      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.2",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/system": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
-      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.2",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "requires": {}
-    },
-    "@material-ui/utils": {
-      "version": "4.11.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
-      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      }
-    },
     "@microsoft/load-themed-styles": {
       "version": "1.10.196",
       "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.196.tgz",
@@ -8697,14 +8252,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -9320,11 +8867,6 @@
         "shallow-clone": "^3.0.0"
       }
     },
-    "clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
-    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -9528,26 +9070,12 @@
         "semver": "^7.3.5"
       }
     },
-    "css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "requires": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "csstype": {
-      "version": "2.6.17",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
-      "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
-    },
     "current-module-paths": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/current-module-paths/-/current-module-paths-1.1.0.tgz",
@@ -9727,22 +9255,6 @@
         "dojo": "1.16.4"
       }
     },
-    "dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "3.0.10",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-        }
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10507,11 +10019,6 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10659,11 +10166,6 @@
         "is-extglob": "^2.1.1"
       }
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -10826,91 +10328,6 @@
         "through": ">=2.2.7 <3"
       }
     },
-    "jss": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
-      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "3.0.10",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-        }
-      }
-    },
-    "jss-plugin-camel-case": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
-      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.9.0"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
-      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
-      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
-      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
-      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
-      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.9.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
-      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.9.0"
-      }
-    },
     "keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -11945,11 +11362,6 @@
         "find-up": "^4.0.0"
       }
     },
-    "popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
     "postcss": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
@@ -12199,17 +11611,6 @@
         "throttle-debounce": "^3.0.1"
       }
     },
-    "react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

esp/src/package.json

@@ -53,9 +53,6 @@
     "@hpcc-js/react": "^2.42.0",
     "@hpcc-js/tree": "^2.32.0",
     "@hpcc-js/util": "^2.40.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
     "clipboard": "^2.0.8",
     "detect-browser": "^5.3.0",
     "dijit": "^1.16.4",

esp/src/src-react/components/controls/Stepper.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { mergeStyleSets, useTheme } from "@fluentui/react";
+
+export interface StepProps {
+    label?: string;
+    completed?: boolean;
+    failed?: boolean;
+    step?: number;
+    showConnector?: boolean;
+}
+
+const Step: React.FunctionComponent<StepProps> = ({
+    label = "",
+    completed = false,
+    failed = false,
+    step = 1,
+    showConnector = false
+}) => {
+
+    const theme = useTheme();
+
+    const stepStyles = React.useMemo(() => mergeStyleSets({
+        wrapper: {
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            alignItems: "center",
+            padding: "0 8px",
+            minWidth: "100px",
+        },
+        svg: {
+            color: theme.palette.neutralPrimary,
+            fill: "currentColor",
+            width: "1em",
+            height: "1em",
+            fontSize: "1.5rem",
+            text: {
+                color: theme.palette.white
+            }
+        },
+        failed: {
+            color: `${theme.palette.red} !important`
+        },
+        completed: {
+            color: theme.palette.themePrimary,
+            circle: {
+                color: theme.palette.white
+            }
+        },
+        label: {
+            margin: "16px 0 0 0",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", \"sans-serif\""
+        },
+        connector: {
+            top: "12px",
+            left: "calc(-50% + 20px)",
+            right: "calc(50% + 20px)",
+            position: "absolute",
+            borderTopStyle: "solid",
+            borderTopWidth: "1px"
+        }
+    }), [theme]);
+
+    return <div className={stepStyles.wrapper}>
+        {showConnector ? <div className={stepStyles.connector}></div> : ""}
+        {failed ?
+            <svg className={[stepStyles.svg, stepStyles.failed].join(" ")} viewBox={"0 0 24 24"}>
+                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
+            </svg> :
+            completed ?
+                <svg className={[stepStyles.svg, stepStyles.completed].join(" ")} viewBox={"0 0 24 24"}>
+                    <circle cx="12" cy="12" r="12"></circle>
+                    <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
+                </svg> :
+                <svg className={stepStyles.svg} viewBox={"0 0 24 24"}>
+                    <circle cx="12" cy="12" r="12"></circle>
+                    <text x="7" y="18">{step}</text>
+                </svg>
+        }
+        {failed ?
+            <span className={[stepStyles.failed, stepStyles.label].join(" ")}>{label}</span> :
+            <span className={stepStyles.label}>{label}</span>
+        }
+    </div>;
+
+};
+
+export type Orientation = "horizontal" | "vertical";
+
+interface StepperProps {
+    activeStep?: number;
+    steps: StepProps[];
+    orientation?: Orientation;
+}
+
+const stepperStyles = mergeStyleSets({
+    wrapper: {
+        display: "flex",
+        flexDirection: "row",
+        padding: "8px"
+    },
+});
+
+export const Stepper: React.FunctionComponent<StepperProps> = ({
+    activeStep = 0,
+    steps,
+    orientation = "horizontal",
+}) => {
+
+    return <div className={stepperStyles.wrapper}>
+        {steps && steps.map((props, i) => {
+            const { label, completed, failed, step, showConnector } = { ...props };
+            return <Step key={`${label}_${i}`} label={label} step={step} failed={failed} completed={completed} showConnector={showConnector}></Step>;
+        })}
+    </div >;
+
+};

esp/src/src/react/theme.ts

@@ -1,52 +0,0 @@
-import { createTheme } from "@material-ui/core/styles";
-
-export const theme = createTheme({
-    typography: {
-        fontSize: 15
-    },
-    palette: {
-      primary: {
-          main: "#1a9bd7",
-          light: "#66ccff",
-          dark: "#006da5",
-          contrastText: "#f5f5f5"
-      },
-      secondary: {
-          main: "#455a64",
-          light: "#718792",
-          dark: "#1c313a",
-          contrastText: "#fff"
-      }
-    },
-    overrides: {  // lets make everything look the same. if we want to overwrite use the useStyles hook inside the component
-        MuiStepIcon: {
-            root: {
-                color: "rgba(0, 0, 0, 0.38)"
-            },
-            completed: {
-                color: "#1a9bd7"
-            }
-        },
-        MuiTableContainer: {
-            root: {
-                margin: "20px 0px"
-            }
-        },
-        MuiButton: {
-            root: {
-                "color": "white",
-                "&:hover": {
-                    background: "primary",
-                    color: "white",
-                    boxShadow: "none"
-                }
-            }
-        },
-        MuiTableCell: {
-            head: {
-               fontWeight: 600,
-               width: "50%"
-            }
-        }
-    }
-});

esp/src/src/react/wuStatus.tsx

@@ -1,11 +1,9 @@
+import * as React from "react";
+import { ThemeProvider } from "@fluentui/react";
 import { Workunit, WUStateID } from "@hpcc-js/comms";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
-import Stepper from "@material-ui/core/Stepper";
-import { MuiThemeProvider } from "@material-ui/core/styles";
+import { useUserTheme } from "../../src-react/hooks/theme";
+import { StepProps, Stepper } from "../../src-react/components/controls/Stepper";
 import nlsHPCC from "../nlsHPCC";
-import { theme } from "./theme";
-import * as React from "react";
 
 const Steps = [
     {
@@ -71,7 +69,9 @@ export const WUStatus: React.FunctionComponent<WUStatus> = ({
     wuid
 }) => {
     const [activeStep, setActiveStep] = React.useState(-1);
+    const [theme] = useUserTheme();
     const [failed, setFailed] = React.useState(false);
+    const [stepProps, setStepProps] = React.useState<StepProps[]>();
     const [steps, setSteps] = React.useState([]);
 
     React.useEffect(() => {
@@ -87,19 +87,23 @@ export const WUStatus: React.FunctionComponent<WUStatus> = ({
         };
     }, [wuid]);
 
+    React.useEffect(() => {
+        setStepProps(steps.map((step, i) => {
+            const label = activeStep === i ? step.activeText : step.text;
+            return {
+                key: `${label}_${i}`,
+                label: label,
+                step: i + 1,
+                failed: failed,
+                completed: activeStep > i,
+                showConnector: i > 0 && i < steps.length + 1
+            };
+        }));
+    }, [activeStep, failed, steps]);
+
     return (
-        <MuiThemeProvider theme={theme}>
-            <Stepper activeStep={activeStep} alternativeLabel>
-                {steps.map((step, i) => {
-                    const labelProps = {
-                        error: i <= activeStep ? failed : false
-                    };
-                    const label = activeStep === i ? step.activeText : step.text;
-                    return <Step key={i}>
-                        <StepLabel {...labelProps}>{label}</StepLabel>
-                    </Step>;
-                })}
-            </Stepper>
-        </MuiThemeProvider>
+        <ThemeProvider theme={theme}>
+            <Stepper activeStep={activeStep} steps={stepProps}></Stepper>
+        </ThemeProvider>
     );
 };