orc-shared 5.10.2 → 5.99.0-dev.10

package/dist/components/AppFrame/About.js

@@ -42,21 +42,21 @@ var ABOUT_NAME = exports.ABOUT_NAME = "__aboutBox";
 var getModalRoot = function getModalRoot() {
   return document.getElementById("modal");
 };
-var useStyles = (0, _styles.makeStyles)(function () {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     aboutBox: function aboutBox(props) {
       return {
         boxSizing: "border-box",
         zIndex: 9999,
         position: "absolute",
-        top: "calc(50% - 210px)",
-        left: "calc(50% - 210px)",
-        height: "420px",
-        width: "420px",
-        padding: "15px 20px",
+        top: "calc(50% - ".concat(theme.spacing(21), ")"),
+        left: "calc(50% - ".concat(theme.spacing(21), ")"),
+        height: theme.spacing(42),
+        width: theme.spacing(42),
+        padding: theme.spacing(1.5, 2),
         color: "#ffffff",
-        fontSize: "13px",
-        lineHeight: "16px",
+        fontSize: theme.spacing(1.3),
+        lineHeight: theme.spacing(1.6),
         background: "#0a0a07 url(".concat(props.bgImage, ")"),
         "&.enter-active": {
           opacity: 1,
@@ -74,8 +74,8 @@ var useStyles = (0, _styles.makeStyles)(function () {
       zIndex: 9999,
       position: "absolute",
       color: "#ffffff",
-      top: "15px",
-      right: "20px",
+      top: theme.spacing(1.5),
+      right: theme.spacing(2),
       margin: "0",
       cursor: "pointer",
       opacity: "1",
@@ -88,13 +88,13 @@ var useStyles = (0, _styles.makeStyles)(function () {
       textDecoration: "none"
     },
     aboutParagraph: {
-      marginTop: "20px"
+      marginTop: theme.spacing(2)
     },
     longAboutParagraph: function longAboutParagraph(props) {
       var _props$lang;
       return {
-        marginTop: "20px",
-        fontSize: (_props$lang = props.lang) != null && _props$lang.toLowerCase().startsWith("fr") ? "10px" : undefined
+        marginTop: theme.spacing(2),
+        fontSize: (_props$lang = props.lang) != null && _props$lang.toLowerCase().startsWith("fr") ? theme.spacing(1) : undefined
       };
     }
   };

package/dist/components/AppFrame/Anchor.js

@@ -28,12 +28,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         cursor: "pointer",
         boxSizing: "border-box",
         fontFamily: theme.typography.button.fontFamily,
-        fontSize: "12px",
+        fontSize: theme.spacing(1.2),
         textTransform: "uppercase",
-        height: "40px",
-        minWidth: "180px",
-        paddingTop: "14px",
-        paddingRight: "14px",
+        height: theme.spacing(4),
+        minWidth: theme.spacing(18),
+        paddingTop: theme.spacing(1.4),
+        paddingRight: theme.spacing(1.4),
         color: props.open ? theme.palette.primary.light : theme.palette.text.disabled,
         "&:hover": {
           color: theme.palette.primary.light
@@ -42,8 +42,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     indicator: function indicator(props) {
       return {
-        fontSize: "12px",
-        padding: "0 11px",
+        fontSize: theme.spacing(1.2),
+        padding: theme.spacing(0, 1.1),
         color: props.open ? theme.palette.text.disabled : theme.palette.primary.light
       };
     }

package/dist/components/AppFrame/AppFrame.js

@@ -65,15 +65,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       return {
         overflow: "hidden",
         backgroundColor: "white",
-        borderTopLeftRadius: "10px",
-        height: "calc(100% - 40px)",
+        borderTopLeftRadius: theme.spacing(1),
+        height: "calc(100% - ".concat(theme.spacing(4), ")"),
         position: "absolute",
         bottom: 0,
         right: 0,
         display: "flex",
         flexDirection: "column",
         transition: "width 0.3s ease-out",
-        width: props.toggleOpen ? "calc(100% - 200px)" : "calc(100% - 50px)"
+        width: props.toggleOpen ? "calc(100% - ".concat(theme.spacing(20), ")") : "calc(100% - ".concat(theme.spacing(5), ")")
       };
     }
   };

package/dist/components/AppFrame/Help.js

@@ -25,13 +25,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     helpLink: {
       fontFamily: theme.typography.button.fontFamily,
-      fontSize: "12px",
+      fontSize: theme.spacing(1.2),
       textTransform: "uppercase",
       color: theme.palette.grey.borders,
-      width: "40px",
+      width: theme.spacing(4),
       cursor: "pointer",
-      paddingTop: "14px",
-      paddingRight: "10px",
+      paddingTop: theme.spacing(1.4),
+      paddingRight: theme.spacing(1),
       textDecoration: "none",
       "&:hover": {
         color: theme.palette.primary.light

package/dist/components/AppFrame/MenuItem.js

@@ -7,6 +7,7 @@ var _styles = require("@material-ui/core/styles");
 var _reactRouterDom = require("react-router-dom");
 var _reactIntl = require("react-intl");
 var _Icon = _interopRequireDefault(require("../MaterialUI/DataDisplay/Icon"));
+var _toastHelper = require("../../utils/toastHelper");
 var _excluded = ["staticContext", "dispatch", "component"],
   _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href", "menuToggle", "active"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,22 +30,14 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var getToastColor = function getToastColor(theme, alertType) {
-  var toastBorderColors = {
-    error: theme.palette.error.main,
-    warn: theme.palette.warning.main,
-    confirm: theme.palette.success.main
-  };
-  return toastBorderColors[alertType] || "red";
-};
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     block: function block(props) {
       return {
         display: "block",
         position: "relative",
-        padding: "0 10px",
-        marginBottom: "35px",
+        padding: theme.spacing(0, 1),
+        marginBottom: theme.spacing(3.5),
         textDecoration: "none",
         cursor: "pointer",
         color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
@@ -54,13 +47,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       };
     },
     alert: function alert(props) {
-      var toastColor = getToastColor(theme, props.alertType);
+      var toastColor = (0, _toastHelper.getToastColor)(theme, props.alertType);
       return {
         borderRadius: "50%",
-        border: "4px solid ".concat(toastColor),
+        border: "".concat(theme.spacing(0.4), " solid ").concat(toastColor),
         position: "absolute",
         top: 0,
-        left: "27px",
+        left: theme.spacing(2.7),
         visibility: "hidden",
         "&.show": {
           visibility: "visible"
@@ -68,19 +61,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       };
     },
     alertMessage: function alertMessage(props) {
-      var toastColor = getToastColor(theme, props.alertType);
+      var toastColor = (0, _toastHelper.getToastColor)(theme, props.alertType);
       return {
         position: "absolute",
         zIndex: 10000,
-        top: "calc(-10px - 0.7em)",
-        left: "22px",
+        top: "calc(".concat(theme.spacing(-1), " - 0.7em)"),
+        left: theme.spacing(2.2),
         width: "max-content",
-        borderRadius: "5px",
-        padding: "10px 15px",
-        boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.5)",
+        borderRadius: theme.spacing(0.5),
+        padding: theme.spacing(1, 1.5),
+        boxShadow: "".concat(theme.spacing(0, 0.2, 0.4, 0), " rgba(0, 0, 0, 0.5)"),
         color: theme.palette.grey.light,
         backgroundColor: toastColor,
-        fontSize: "11px",
+        fontSize: theme.spacing(1.1),
         fontWeight: "bold",
         lineHeight: 1.2,
         transition: "transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 100ms 50ms ease-out",
@@ -89,7 +82,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         "&::before": {
           content: "",
           position: "absolute",
-          top: "calc(10px + 0.2em)",
+          top: "calc(".concat(theme.spacing(1), " + 0.2em)"),
           left: "-0.9em",
           border: "solid transparent",
           borderWidth: "0.4em 0.9em 0.4em 0",
@@ -103,7 +96,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     menuIcon: function menuIcon(props) {
       return {
-        fontSize: "24px",
+        fontSize: theme.spacing(2.4),
         verticalAlign: "middle",
         color: props.active ? theme.palette.primary.light : theme.palette.text.hint
       };
@@ -111,10 +104,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     label: function label(props) {
       return {
         fontFamily: theme.typography.button.fontFamily,
-        fontSize: "13px",
+        fontSize: theme.spacing(1.3),
         verticalAlign: "middle",
         textTransform: "uppercase",
-        paddingLeft: "10px",
+        paddingLeft: theme.spacing(1),
         transition: "opacity 0.3s ease-out",
         opacity: props.showLabel ? 1 : 0
       };
@@ -186,7 +179,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
@@ -203,7 +195,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");

package/dist/components/AppFrame/Preferences.js

@@ -50,19 +50,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       backgroundColor: "#f7f7f7",
       borderLeft: "1px solid ".concat(theme.palette.grey.borders),
       borderTop: "1px solid ".concat(theme.palette.grey.borders),
-      borderTopLeftRadius: "5px",
-      top: "40px",
-      boxShadow: "-3px 2px 5px 0px rgba(0, 0, 0, 0.2)",
+      borderTopLeftRadius: theme.spacing(0.5),
+      top: theme.spacing(4),
+      boxShadow: "".concat(theme.spacing(-0.3, 0.2, 0.5, 0), " rgba(0, 0, 0, 0.2)"),
       zIndex: 9998,
       transition: "right 400ms ease-out"
     },
     header: {
       flex: "0 0 auto",
       borderBottom: "1px solid ".concat(theme.palette.grey.borders),
-      borderTopLeftRadius: "5px",
-      padding: "15px 30px",
-      height: "18px",
-      fontSize: "15px",
+      borderTopLeftRadius: theme.spacing(0.5),
+      padding: theme.spacing(1.5, 3),
+      height: theme.spacing(1.8),
+      fontSize: theme.spacing(1.5),
       fontFamily: theme.typography.button.fontFamily,
       textTransform: "uppercase",
       color: theme.palette.primary.main,
@@ -72,8 +72,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flex: "1 1 auto",
       display: "flex",
       flexDirection: "column",
-      padding: "20px 30px",
-      fontSize: "12px"
+      padding: theme.spacing(2, 3),
+      fontSize: theme.spacing(1.2)
     },
     footer: {
       flex: "0 0 auto",
@@ -82,12 +82,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       justifyContent: "flex-end",
       backgroundColor: "#ffffff",
       borderTop: "1px solid ".concat(theme.palette.grey.borders),
-      paddingRight: "10px",
-      height: "60px"
+      paddingRight: theme.spacing(1),
+      height: theme.spacing(6)
     },
     prefButton: {
-      marginRight: "20px",
-      minWidth: "110px"
+      marginRight: theme.spacing(2),
+      minWidth: theme.spacing(11)
     },
     wrapper: {
       display: "flex",
@@ -185,7 +185,7 @@ var Preferences = exports.Preferences = function Preferences() {
     applicationSelectProps = _usePreferenceSetup.applicationSelectProps;
   return /*#__PURE__*/_react.default.createElement(_Sidepanel.default, {
     in: show,
-    width: "380px",
+    widthSpacing: 38,
     timeout: 400,
     className: classes.prefPanel
   }, /*#__PURE__*/_react.default.createElement(Wrapper, {

package/dist/components/AppFrame/Sidebar.js

@@ -32,9 +32,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     bar: {
       boxSizing: "border-box",
-      paddingTop: "60px",
-      height: "calc(100% - 40px)",
-      width: "200px",
+      paddingTop: theme.spacing(6),
+      height: "calc(100% - ".concat(theme.spacing(4), ")"),
+      width: theme.spacing(20),
       display: "flex",
       flexDirection: "column",
       justifyContent: "flex-start",
@@ -42,9 +42,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     logoSvg: {
       flex: "0 0 auto",
-      margin: "auto 12.5px 7px",
-      height: "25px",
-      width: "25px",
+      margin: "auto ".concat(theme.spacing(1.25, 0.7)),
+      height: theme.spacing(2.5),
+      width: theme.spacing(2.5),
       fillRule: "evenodd",
       clipRule: "evenodd",
       fill: "#666666"

package/dist/components/AppFrame/Topbar.js

@@ -48,7 +48,7 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     wrapper: {
-      height: "40px",
+      height: theme.spacing(4),
       color: theme.palette.text.hint,
       display: "flex",
       justifyContent: "space-between"
@@ -63,16 +63,16 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       backgroundColor: "#000000",
       color: theme.palette.primary.light,
       fontFamily: theme.typography.button.fontFamily,
-      fontSize: "14px",
+      fontSize: theme.spacing(1.4),
       textTransform: "uppercase",
-      paddingRight: "20px",
-      paddingLeft: "6px",
+      paddingRight: theme.spacing(2),
+      paddingLeft: theme.spacing(0.6),
       display: "flex",
       alignItems: "center"
     },
     appLogo: {
-      height: "30px",
-      marginRight: "10px"
+      height: theme.spacing(3),
+      marginRight: theme.spacing(1)
     },
     qaContainerColor: {
       backgroundColor: "#9F0F18",

package/dist/components/ApplicationModuleLoader.js

@@ -6,9 +6,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _scopes = require("../actions/scopes");
 var _settings = require("../selectors/settings");
-var _Authenticate = require("./Authenticate");
 var _constants = require("../constants");
 var _modules = require("../actions/modules");
+var _LoadingIcon = _interopRequireDefault(require("./LoadingIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 (function () {
@@ -60,7 +61,7 @@ var ApplicationModuleLoader = function ApplicationModuleLoader(_ref) {
   }, true);
   var applicationModuleReady = scopeLoadedFromAllModules && defaultScope != null;
   if (!applicationModuleReady) {
-    return /*#__PURE__*/_react.default.createElement(_Authenticate.Loader, null);
+    return /*#__PURE__*/_react.default.createElement(_LoadingIcon.default, null);
   }
   return _react.default.Children.only(children);
 };

package/dist/components/Authenticate.js

@@ -1,17 +1,15 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useAuthenticationData = exports.default = exports.Wrapper = exports.Loader = exports.Error = void 0;
+exports.useAuthenticationData = exports.default = exports.Error = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styles = require("@material-ui/core/styles");
 var _utils = require("../utils");
-var _Placeholder = _interopRequireDefault(require("../components/Placeholder"));
 var _reactRedux = require("react-redux");
 var _authentication = require("../actions/authentication");
 var _request = require("../reducers/request");
 var _ApplicationModuleLoader = _interopRequireDefault(require("./ApplicationModuleLoader"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _LoadingIcon = _interopRequireDefault(require("./LoadingIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -27,6 +25,16 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
+var useStyles = (0, _styles.makeStyles)({
+  wrapper: {
+    display: "flex",
+    width: "60%",
+    height: "100%",
+    padding: "0 20vw",
+    flexDirection: "column",
+    justifyContent: "center"
+  }
+});
 var useAuthenticationData = exports.useAuthenticationData = function useAuthenticationData() {
   return {
     loading: (0, _reactRedux.useSelector)(function (state) {
@@ -49,24 +57,25 @@ __signature__(useAuthenticationData, "useSelector{}\nuseSelector{}\nuseSelector{
 __signature__(useAuthenticationData, "useSelector{}\nuseSelector{}\nuseSelector{}\nuseSelector{}", function () {
   return [_reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector];
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "Authenticate__Wrapper",
-  componentId: "sc-cw6rn1-0"
-})(["display:flex;width:60%;height:100%;padding:0 20vw;flex-direction:column;justify-content:center;"]);
-var Loader = exports.Loader = (0, _styledComponents.withTheme)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Placeholder.default, {
-    icon: (0, _utils.getThemeProp)(["icons", "loading"], "loading")(props),
-    animate: true
-  }));
-});
 var Error = exports.Error = function Error(_ref) {
   var requestError = _ref.requestError,
     needLogin = _ref.needLogin;
+  var classes = useStyles();
   if (needLogin) {
-    return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("h1", null, "Not logged in"));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.wrapper
+    }, /*#__PURE__*/_react.default.createElement("h1", null, "Not logged in"));
   }
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("h1", null, (0, _utils.safeGet)(requestError, "payload", "message") || "An error occurred"), "Last failing action: ", /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(requestError, null, 2)));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.wrapper
+  }, /*#__PURE__*/_react.default.createElement("h1", null, (0, _utils.safeGet)(requestError, "payload", "message") || "An error occurred"), "Last failing action: ", /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(requestError, null, 2)));
 };
+__signature__(Error, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Error, "useStyles{classes}", function () {
+  return [useStyles];
+});
 var Authenticate = function Authenticate(_ref2) {
   var children = _ref2.children;
   var _useAuthenticationDat = useAuthenticationData(),
@@ -75,7 +84,7 @@ var Authenticate = function Authenticate(_ref2) {
     requestError = _useAuthenticationDat.requestError,
     needLogin = _useAuthenticationDat.needLogin;
   if (loading) {
-    return /*#__PURE__*/_react.default.createElement(Loader, null);
+    return /*#__PURE__*/_react.default.createElement(_LoadingIcon.default, null);
   }
   if (!authedUser) {
     return /*#__PURE__*/_react.default.createElement(Error, {
@@ -103,9 +112,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(useAuthenticationData, "useAuthenticationData", "/home/vsts/work/1/s/src/components/Authenticate.js");
-  reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/Authenticate.js");
-  reactHotLoader.register(Loader, "Loader", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(Error, "Error", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(Authenticate, "Authenticate", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Authenticate.js");
@@ -121,9 +129,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(useAuthenticationData, "useAuthenticationData", "/home/vsts/work/1/s/src/components/Authenticate.js");
-  reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/Authenticate.js");
-  reactHotLoader.register(Loader, "Loader", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(Error, "Error", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(Authenticate, "Authenticate", "/home/vsts/work/1/s/src/components/Authenticate.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Authenticate.js");

package/dist/components/DropMenu/Menu.js

@@ -26,7 +26,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     drawer: {
       position: "absolute",
       zIndex: 19999,
-      margin: "4px 0 0",
+      margin: theme.spacing(0.4, 0, 0),
       left: function left(props) {
         return props.alignRight ? "auto" : "0";
       },
@@ -47,19 +47,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       color: theme.palette.text.primary,
       backgroundColor: "white",
       border: "1px solid ".concat(theme.palette.text.hint),
-      borderRadius: "5px",
+      borderRadius: theme.spacing(0.5),
       listStyleType: "none",
-      padding: "5px 0",
+      padding: theme.spacing(0.5, 0),
       margin: "0",
       fontFamily: "Open Sans, sans-serif",
-      fontSize: "12px",
+      fontSize: theme.spacing(1.2),
       width: "max-content"
     },
     item: {
       boxSizing: "border-box",
-      height: "30px",
-      minWidth: "178px",
-      padding: "9px 12px",
+      height: theme.spacing(3),
+      minWidth: theme.spacing(17.8),
+      padding: theme.spacing(0.9, 1.2),
       display: "flex",
       alignItems: "center",
       cursor: "pointer",
@@ -69,8 +69,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     },
     itemIcon: {
-      paddingRight: "11px",
-      fontSize: "17px"
+      paddingRight: theme.spacing(1.1),
+      fontSize: theme.spacing(1.7)
     }
   };
 });

package/dist/components/ErrorPlaceholder.js

@@ -1,14 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.Wrapper = void 0;
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _utils = require("../utils");
-var _Placeholder = _interopRequireDefault(require("./Placeholder"));
-var _excluded = ["message", "description", "onClick"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _Placeholder = _interopRequireDefault(require("./MaterialUI/DataDisplay/PredefinedElements/Placeholder"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -18,31 +13,22 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
 })();
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "ErrorPlaceholder__Wrapper",
-  componentId: "sc-1qmr4g4-0"
-})(["display:flex;width:60%;height:100%;padding:0 20vw;flex-direction:column;justify-content:center;"]);
-var ErrorPlaceholder = (0, _styledComponents.withTheme)(function (_ref) {
+var ErrorPlaceholder = function ErrorPlaceholder(_ref) {
   var message = _ref.message,
-    description = _ref.description,
-    onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded);
+    description = _ref.description;
   return /*#__PURE__*/_react.default.createElement(_Placeholder.default, {
-    icon: (0, _utils.getThemeProp)(["icons", "reportProblem"], "error")(props),
-    warn: true,
+    icon: "report-problem-triangle",
+    error: true,
     title: message,
-    subtitle: description,
-    onClick: onClick
+    subtitle: description
   });
-});
+};
 var _default = ErrorPlaceholder;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -52,7 +38,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
   reactHotLoader.register(ErrorPlaceholder, "ErrorPlaceholder", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
 })();
@@ -67,7 +52,6 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
   reactHotLoader.register(ErrorPlaceholder, "ErrorPlaceholder", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/ErrorPlaceholder.js");
 })();

package/dist/components/Form/Field.js

@@ -26,13 +26,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flex: "0 1 auto",
       display: "flex",
       flexDirection: "column",
-      marginTop: 20,
+      marginTop: theme.spacing(2),
       position: "relative"
     },
     label: {
-      minHeight: 17,
+      minHeight: theme.spacing(1.7),
       color: theme.palette.text.hint,
-      marginBottom: "10px"
+      marginBottom: theme.spacing(1)
     },
     invalidLabel: {
       color: theme.palette.error.main
@@ -41,7 +41,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       textAlign: "center"
     },
     labelOnly: {
-      marginBottom: "0px"
+      marginBottom: 0
     },
     requiredLabel: {
       "&::after": {