orc-shared 5.99.0-dev.1 → 5.99.0-dev.3

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

@@ -36,8 +36,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       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,
@@ -50,10 +50,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       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"
@@ -65,15 +65,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       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",
@@ -82,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",
@@ -96,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
       };
@@ -104,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
       };

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/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/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": {

package/dist/components/Form/Inputs/Button.js

@@ -32,10 +32,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     positionedButton: {
       width: "max-content",
       position: "relative",
-      padding: "6px 14px !important",
+      padding: "".concat(theme.spacing(0.6, 1.4), " !important"),
       "&:hover": {
         borderColor: "#4fa1f0",
-        boxShadow: "0 0 4px #4fa1f0",
+        boxShadow: "".concat(theme.spacing(0, 0, 0.4), " #4fa1f0"),
         outline: "none",
         backgroundColor: "#f7f7f7 !important"
       },

package/dist/components/InternetExplorerWarningMessage.js

@@ -27,29 +27,29 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     container: {
       fontFamily: "'Open Sans', sans-serif",
-      fontSize: "14px",
+      fontSize: theme.spacing(1.4),
       background: "rgba(255,255,255,0.85)",
-      maxWidth: "700px",
-      width: "calc(100% - 40px)",
+      maxWidth: theme.spacing(70),
+      width: "calc(100% - ".concat(theme.spacing(4), ")"),
       display: "block",
       top: "50%",
       left: "50%",
       position: "absolute",
-      boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
+      boxShadow: "".concat(theme.spacing(0, 0.4, 0.8, 0), " rgba(0, 0, 0, 0.2), ").concat(theme.spacing(0, 0.6, 2, 0), " rgba(0, 0, 0, 0.19)"),
       transform: "translateY(-50%) translateX(-50%)",
-      padding: "80px",
-      borderRadius: "3px",
+      padding: theme.spacing(8),
+      borderRadius: theme.spacing(0.3),
       "& header": {
-        paddingBottom: "20px",
-        marginBottom: "20px",
+        paddingBottom: theme.spacing(2),
+        marginBottom: theme.spacing(2),
         borderBottom: "1px solid #999",
         "& h1": {
           fontWeight: 400,
-          fontWize: "30px",
+          fontWize: theme.spacing(3),
           marginTop: 0,
-          marginBottom: "5px",
+          marginBottom: theme.spacing(0.5),
           "& p": {
-            fontSize: "16px",
+            fontSize: theme.spacing(1.6),
             margin: 0,
             color: "#999",
             fontWeight: 400
@@ -62,7 +62,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flexWrap: "wrap",
       width: "100%",
       boxSizing: "border-box",
-      marginTop: "40px"
+      marginTop: theme.spacing(4)
     },
     gridItem: {
       display: "flex",
@@ -71,16 +71,16 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flexDirection: "column"
     },
     browserIconContainer: {
-      width: "48px",
+      width: theme.spacing(4.8),
       textAlign: "center"
     },
     browserIconCaption: {
-      fontSize: "11px",
+      fontSize: theme.spacing(1.1),
       color: "#999"
     },
     browserIcon: {
       stroke: "none",
-      fontSize: "48px"
+      fontSize: theme.spacing(4.8)
     }
   };
 });

package/dist/components/MaterialUI/DataDisplay/Modal.js

@@ -48,12 +48,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     containerWide: {
       width: theme.spacing(106.4),
-      height: "calc(100% - 80px)",
+      height: "calc(100% - ".concat(theme.spacing(8), ")"),
       maxHeight: theme.spacing(73)
     },
     containerFullwidth: {
-      width: "calc(100% - 80px)",
-      height: "calc(100% - 80px)"
+      width: "calc(100% - ".concat(theme.spacing(8), ")"),
+      height: "calc(100% - ".concat(theme.spacing(8), ")")
     },
     title: {
       height: theme.spacing(4),

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js

@@ -63,18 +63,18 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     textSkeleton: {
       width: "100%",
-      height: 6,
+      height: theme.spacing(0.6),
       animation: false
     },
     chipSkeleton: {
-      width: 60,
-      height: 25,
+      width: theme.spacing(6),
+      height: theme.spacing(2.5),
       animation: false,
-      borderRadius: "15px"
+      borderRadius: theme.spacing(1.5)
     },
     radioSkeleton: {
-      width: 17,
-      height: 17,
+      width: theme.spacing(1.7),
+      height: theme.spacing(1.7),
       animation: false
     },
     root: {

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -96,7 +96,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     active: {
       backgroundColor: "".concat(theme.palette.primary.dark, " !important"),
-      boxShadow: "inset 10px 0 10px 1px rgba(0,0,0,0.18)",
+      boxShadow: "inset ".concat(theme.spacing(1, 0, 1, 0.1), " rgba(0,0,0,0.18)"),
       "&:after": {
         borderLeftColor: "".concat(theme.palette.primary.dark, " !important")
       }

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/TableInfoBar.js

@@ -36,7 +36,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     label: {
       fontSize: theme.typography.h2Size,
       fontFamily: theme.typography.fontFamily,
-      fontWeight: theme.typography.fontWeightMedium
+      fontWeight: theme.typography.fontWeightRegular
     }
   };
 });

package/dist/components/MaterialUI/DataDisplay/SelectionList.js

@@ -60,7 +60,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       },
       "&::-webkit-scrollbar-thumb": {
         background: theme.palette.grey.borders,
-        border: "5px white solid",
+        border: "".concat(theme.spacing(0.5), " white solid"),
         backgroundClip: "padding-box",
         borderRadius: theme.spacing(1.5)
       }

package/dist/components/MaterialUI/DataDisplay/TransferList.js

@@ -62,7 +62,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       },
       "&::-webkit-scrollbar-thumb": {
         background: theme.palette.grey.borders,
-        border: "5px white solid",
+        border: "".concat(theme.spacing(0.5), " white solid"),
         backgroundClip: "padding-box",
         borderRadius: theme.spacing(1.5)
       }

package/dist/components/MaterialUI/Inputs/CheckboxGroup.js

@@ -42,7 +42,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         return props.row ? "row" : "column";
       },
       flexWrap: "wrap",
-      marginLeft: "8px"
+      marginLeft: theme.spacing(0.8)
     },
     errorText: {
       marginTop: theme.spacing(0.5),

package/dist/components/MaterialUI/Inputs/DatePicker.js

@@ -49,7 +49,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       "&:focus, &:focus-within": {
         borderRadius: theme.shape.borderRadius,
         borderColor: theme.palette.focus,
-        boxShadow: "0 0 4px ".concat(theme.palette.focus),
+        boxShadow: "0 0 ".concat(theme.spacing(0.4), " ").concat(theme.palette.focus),
         outline: "none"
       },
       "& .react-datepicker": {

package/dist/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -125,7 +125,7 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       "&:focus-within": {
         zIndex: 99,
         border: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.focus),
-        boxShadow: "0 0 4px ".concat(theme.palette.focus)
+        boxShadow: "0 0 ".concat(theme.spacing(0.4), " ").concat(theme.palette.focus)
       }
     },
     selectRoot: {

package/dist/components/MaterialUI/Inputs/Switch.js

@@ -65,7 +65,7 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     track: {
       backgroundColor: theme.palette.grey.borders,
       opacity: "1 !important",
-      borderRadius: "20px",
+      borderRadius: theme.spacing(2),
       position: "relative",
       "&:before, &:after": {
         display: "inline-block",

package/dist/components/MaterialUI/ScopeSelector/ScopeSelector.js

@@ -34,7 +34,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       backgroundColor: theme.palette.grey.light,
       border: "1px solid ".concat(theme.palette.grey.borders),
       boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
-      width: theme.spacing(50),
       display: "flex"
     },
     scopeContainer: {
@@ -86,6 +85,7 @@ var ScopeSelector = function ScopeSelector(_ref) {
   })));
   var scopeSelector = /*#__PURE__*/_react.default.createElement(_Sidepanel.default, {
     className: classes.container,
+    widthSpacing: 50,
     in: show,
     timeout: 300
   }, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {