orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/dist/components/AppFrame/AppFrame.js

@@ -1,12 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.ViewPort = exports.Base = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactRedux = require("react-redux");
+var _styles = require("@material-ui/core/styles");
 var _utils = require("../../utils");
 var _applications = require("../../actions/applications");
 var _useToggle3 = _interopRequireDefault(require("../../hooks/useToggle"));
@@ -51,14 +51,33 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Base = exports.Base = _styledComponents.default.div.withConfig({
-  displayName: "AppFrame__Base",
-  componentId: "sc-1no0pw0-0"
-})(["background-color:", ";height:100%;overflow:hidden;", ";"], (0, _utils.getThemeProp)(["colors", "bgDark"], "#333333"), (0, _utils.ifFlag)("preferencesOpen", (0, _styledComponents.css)(["pointer-events:none;"])));
-var ViewPort = exports.ViewPort = _styledComponents.default.div.withConfig({
-  displayName: "AppFrame__ViewPort",
-  componentId: "sc-1no0pw0-1"
-})(["overflow:hidden;background-color:white;border-top-left-radius:10px;height:calc(100% - 40px);width:calc(100% - 50px);position:absolute;bottom:0;right:0;display:flex;flex-direction:column;transition:width 0.3s ease-out;", ";"], (0, _utils.ifFlag)("open", (0, _styledComponents.css)(["width:calc(100% - 200px);"])));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    base: function base(props) {
+      return {
+        backgroundColor: theme.palette.grey.dark,
+        height: "100%",
+        overflow: "hidden",
+        pointerEvents: props.preferencesOpen ? "none" : undefined
+      };
+    },
+    viewPort: function viewPort(props) {
+      return {
+        overflow: "hidden",
+        backgroundColor: "white",
+        borderTopLeftRadius: "10px",
+        height: "calc(100% - 40px)",
+        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)"
+      };
+    }
+  };
+});
 var getApp = function getApp(apps, id) {
   return apps.filter(function (app) {
     return app.name === id;
@@ -75,6 +94,18 @@ var AppFrame = function AppFrame(_ref) {
     forceShowScope = _ref$forceShowScope === void 0 ? [] : _ref$forceShowScope;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
+    _useViewState2 = _slicedToArray(_useViewState, 1),
+    prefViewState = _useViewState2[0];
+  var _useToggle = (0, _useToggle3.default)(initOpen),
+    _useToggle2 = _slicedToArray(_useToggle, 3),
+    open = _useToggle2[0],
+    toggle = _useToggle2[1],
+    reset = _useToggle2[2];
+  var classes = useStyles({
+    preferencesOpen: prefViewState.show,
+    toggleOpen: open
+  });
   var locale = (0, _reactRedux.useSelector)(_locale.currentLocale);
   var needLogin = (0, _reactRedux.useSelector)(_requests.logoutSelector);
   var applications = (0, _utils.unwrapImmutable)((0, _reactRedux.useSelector)(_applications2.localizedAppSelector));
@@ -85,11 +116,6 @@ var AppFrame = function AppFrame(_ref) {
   (0, _useLoader.default)((0, _applications.getApplications)(), function (state) {
     return (0, _applications2.localizedAppSelector)(state).size;
   });
-  var _useToggle = (0, _useToggle3.default)(initOpen),
-    _useToggle2 = _slicedToArray(_useToggle, 3),
-    open = _useToggle2[0],
-    toggle = _useToggle2[1],
-    reset = _useToggle2[2];
   var currentApplication = getApp(applications, applicationId);
   (0, _useLoader.default)((0, _versionInfo.getVersionInfo)(locale), function () {
     return locale === null || helpUrl !== null;
@@ -121,11 +147,8 @@ var AppFrame = function AppFrame(_ref) {
       };
     });
   }, [modules]);
-  var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
-    _useViewState2 = _slicedToArray(_useViewState, 1),
-    prefViewState = _useViewState2[0];
-  return /*#__PURE__*/_react.default.createElement(Base, {
-    preferencesOpen: prefViewState.show
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.base
   }, /*#__PURE__*/_react.default.createElement(_ConnectedToastList.default, null), /*#__PURE__*/_react.default.createElement(_ActionModal.default, {
     title: formatMessage(_sharedMessages.default.error),
     message: formatMessage(_sharedMessages.default.needToRefresh),
@@ -146,18 +169,19 @@ var AppFrame = function AppFrame(_ref) {
     toggle: toggle,
     modules: menuItemFromModules,
     activeModules: activeModules
-  }), /*#__PURE__*/_react.default.createElement(ViewPort, {
-    open: open,
-    onClick: reset
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: reset,
+    className: classes.viewPort,
+    "data-test-id": "viewport"
   }, noScope && !forceShowScope.includes(moduleName) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Scope.Bar, null), children) : /*#__PURE__*/_react.default.createElement(_Scope.default, null, children)), /*#__PURE__*/_react.default.createElement(_About.default, {
     currentApplication: currentApplication
   }), /*#__PURE__*/_react.default.createElement(_loadingScreen.default, null), /*#__PURE__*/_react.default.createElement(_Preferences.default, null));
 };
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
-  return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseViewState{[prefViewState]}\nuseToggle{[open, toggle, reset]}\nuseStyles{classes}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}", function () {
+  return [_reactIntl.useIntl, _useViewState3.default, _useToggle3.default, useStyles, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useLoader.default];
 });
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
-  return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseViewState{[prefViewState]}\nuseToggle{[open, toggle, reset]}\nuseStyles{classes}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}", function () {
+  return [_reactIntl.useIntl, _useViewState3.default, _useToggle3.default, useStyles, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useLoader.default];
 });
 AppFrame.displayName = "AppFrame";
 AppFrame.propTypes = {
@@ -178,8 +202,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Base, "Base", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
-  reactHotLoader.register(ViewPort, "ViewPort", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(getApp, "getApp", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(AppFrame, "AppFrame", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
@@ -195,8 +218,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Base, "Base", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
-  reactHotLoader.register(ViewPort, "ViewPort", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(getApp, "getApp", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(AppFrame, "AppFrame", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/AppFrame.js");

package/dist/components/AppFrame/Help.js

@@ -1,11 +1,10 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.HelpLink = void 0;
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _utils = require("../../utils");
+var _reactIntl = require("react-intl");
+var _styles = require("@material-ui/core/styles");
 var _sharedMessages = _interopRequireDefault(require("./../../sharedMessages"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
@@ -22,19 +21,40 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var HelpLink = exports.HelpLink = _styledComponents.default.a.withConfig({
-  displayName: "Help__HelpLink",
-  componentId: "sc-1ndo3tq-0"
-})(["font-family:", ";font-size:12px;text-transform:uppercase;color:", ";width:40px;cursor:pointer;padding-top:14px;padding-right:10px;text-decoration:none;&:hover{color:", ";}"], (0, _utils.getThemeProp)(["fonts", "header"], "sans-serif"), (0, _utils.getThemeProp)(["colors", "textLight"], "#cccccc"), (0, _utils.getThemeProp)(["colors", "application", "base"], "#cccccc"));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    helpLink: {
+      fontFamily: theme.typography.button.fontFamily,
+      fontSize: "12px",
+      textTransform: "uppercase",
+      color: theme.palette.grey.borders,
+      width: "40px",
+      cursor: "pointer",
+      paddingTop: "14px",
+      paddingRight: "10px",
+      textDecoration: "none",
+      "&:hover": {
+        color: theme.palette.primary.light
+      }
+    }
+  };
+});
 var Help = function Help(_ref) {
   var helpUrl = _ref.helpUrl;
-  return /*#__PURE__*/_react.default.createElement(HelpLink, {
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("a", {
     href: helpUrl,
-    target: "_blank"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: _sharedMessages.default.help
-  }));
+    target: "_blank",
+    rel: "noreferrer",
+    className: classes.helpLink
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.help));
 };
+__signature__(Help, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Help, "useStyles{classes}", function () {
+  return [useStyles];
+});
 var _default = Help;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -44,7 +64,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(HelpLink, "HelpLink", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
   reactHotLoader.register(Help, "Help", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
 })();
@@ -59,7 +79,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(HelpLink, "HelpLink", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
   reactHotLoader.register(Help, "Help", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/Help.js");
 })();

package/dist/components/AppFrame/MenuItem.js

@@ -1,17 +1,14 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.MenuIcon = exports.Label = exports.BlockWithA = exports.Block = exports.AlertMessage = exports.Alert = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledTransitionGroup = _interopRequireDefault(require("styled-transition-group"));
+var _styles = require("@material-ui/core/styles");
 var _reactRouterDom = require("react-router-dom");
-var _utils = require("../../utils");
-var _Text = _interopRequireDefault(require("../Text"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _templateObject;
-var _excluded = ["menuToggle", "staticContext", "dispatch", "active", "component"],
-  _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href"];
+var _reactIntl = require("react-intl");
+var _Icon = _interopRequireDefault(require("../MaterialUI/DataDisplay/Icon"));
+var _excluded = ["staticContext", "dispatch", "component"],
+  _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href", "menuToggle", "active"];
 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; }
@@ -24,7 +21,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   enterModule && enterModule(module);
 })();
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 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) {
@@ -33,98 +29,154 @@ 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",
+        textDecoration: "none",
+        cursor: "pointer",
+        color: props.active ? theme.palette.primary.light : theme.palette.text.hint,
+        "&:hover": {
+          color: props.menuToggle ? undefined : theme.palette.primary.light
+        }
+      };
+    },
+    alert: function alert(props) {
+      var toastColor = getToastColor(theme, props.alertType);
+      return {
+        borderRadius: "50%",
+        border: "4px solid ".concat(toastColor),
+        position: "absolute",
+        top: 0,
+        left: "27px",
+        visibility: "hidden",
+        "&.show": {
+          visibility: "visible"
+        }
+      };
+    },
+    alertMessage: function alertMessage(props) {
+      var toastColor = getToastColor(theme, props.alertType);
+      return {
+        position: "absolute",
+        zIndex: 10000,
+        top: "calc(-10px - 0.7em)",
+        left: "22px",
+        width: "max-content",
+        borderRadius: "5px",
+        padding: "10px 15px",
+        boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.5)",
+        color: theme.palette.grey.light,
+        backgroundColor: toastColor,
+        fontSize: "11px",
+        fontWeight: "bold",
+        lineHeight: 1.2,
+        transition: "transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 100ms 50ms ease-out",
+        opacity: 0.01,
+        transform: "translateX(-50%) scaleX(0)",
+        "&::before": {
+          content: "",
+          position: "absolute",
+          top: "calc(10px + 0.2em)",
+          left: "-0.9em",
+          border: "solid transparent",
+          borderWidth: "0.4em 0.9em 0.4em 0",
+          borderRightColor: toastColor
+        },
+        "&.show": {
+          opacity: 1,
+          transform: "translateX(0) scaleX(1)"
+        }
+      };
+    },
+    menuIcon: function menuIcon(props) {
+      return {
+        fontSize: "24px",
+        verticalAlign: "middle",
+        color: props.active ? theme.palette.primary.light : theme.palette.text.hint
+      };
+    },
+    label: function label(props) {
+      return {
+        fontFamily: theme.typography.button.fontFamily,
+        fontSize: "13px",
+        verticalAlign: "middle",
+        textTransform: "uppercase",
+        paddingLeft: "10px",
+        transition: "opacity 0.3s ease-out",
+        opacity: props.showLabel ? 1 : 0
+      };
+    }
+  };
+});
 var FilteredLink = function FilteredLink(_ref) {
-  var menuToggle = _ref.menuToggle,
-    staticContext = _ref.staticContext,
+  var staticContext = _ref.staticContext,
     dispatch = _ref.dispatch,
-    active = _ref.active,
     component = _ref.component,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, props);
 };
-var Block = exports.Block = (0, _styledComponents.default)(FilteredLink).withConfig({
-  displayName: "MenuItem__Block",
-  componentId: "sc-184jekw-0"
-})(["display:block;position:relative;padding:0 10px;margin-bottom:35px;color:", ";text-decoration:none;cursor:pointer;", ";"], (0, _utils.ifFlag)("active", (0, _utils.getThemeProp)(["colors", "application", "highlight"]), (0, _utils.getThemeProp)(["colors", "textMedium"], "#999999")), (0, _utils.ifFlag)("menuToggle", "", (0, _styledComponents.css)(["&:hover{color:", ";}"], (0, _utils.getThemeProp)(["colors", "application", "highlight"], "#ffffff"))));
-var BlockWithA = exports.BlockWithA = Block.withComponent("a");
-var Alert = exports.Alert = _styledComponents.default.div.withConfig({
-  displayName: "MenuItem__Alert",
-  componentId: "sc-184jekw-1"
-})(["border-radius:50%;border:4px solid ", ";position:absolute;top:0;left:27px;"], (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
-  return props.type;
-}], "red"));
-var transformTime = function transformTime(_ref2) {
-  var timeout = _ref2.timeout;
-  return timeout;
-};
-var opacityTime = function opacityTime(_ref3) {
-  var timeout = _ref3.timeout;
-  return Math.round(timeout * 0.5);
-};
-var opacityDelay = function opacityDelay(_ref4) {
-  var timeout = _ref4.timeout;
-  return Math.round(timeout * 0.25);
-};
-// XXX: The below is a hack to get syntax highlighting in transition styles.
-// Adding the "transition" tag to styled-components tags would solve it.
-var alertStyling = (0, _styledComponents.css)(["position:absolute;z-index:10000;top:calc(-10px - 0.7em);left:22px;width:auto;width:max-content;border-radius:5px;padding:10px 15px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.5);color:", ";background-color:", ";font-size:11px;font-weight:bold;line-height:1.2;&::before{content:\"\";position:absolute;top:calc(10px + 0.2em);left:-0.9em;border:solid transparent;border-width:0.4em 0.9em 0.4em 0;border-right-color:", ";}"], (0, _utils.getThemeProp)(["colors", "textWhite"], "#efefef"), (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
-  return props.type;
-}], "red"), (0, _utils.getThemeProp)(["colors", "toasts", function (props) {
-  return props.type;
-}], "red"));
-var transitionStatement = (0, _styledComponents.css)(["transition:transform ", "ms cubic-bezier(0.68,-0.55,0.27,1.55),opacity ", "ms ", "ms ease-out;"], transformTime, opacityTime, opacityDelay);
-var AlertMessage = exports.AlertMessage = _styledTransitionGroup.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\t", "\n\n\t&:enter {\n\t\topacity: 0.01;\n\t\ttransform: translateX(-50%) scaleX(0);\n\t}\n\t&:enter-active {\n\t\topacity: 1;\n\t\ttransform: translateX(0) scaleX(1);\n\t}\n\t&:exit {\n\t\topacity: 1;\n\t\ttransform: translateX(0) scaleX(1);\n\t}\n\t&:exit-active {\n\t\topacity: 0.01;\n\t\ttransform: translateX(-50%) scaleX(0);\n\t}\n"])), alertStyling, transitionStatement);
-AlertMessage.defaultProps = {
-  timeout: 200,
-  unmountOnExit: true,
-  appear: true
-};
-var MenuIcon = exports.MenuIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
-  displayName: "MenuItem__MenuIcon",
-  componentId: "sc-184jekw-2"
-})(["font-size:24px;vertical-align:middle;"]);
-var Label = exports.Label = _styledComponents.default.span.withConfig({
-  displayName: "MenuItem__Label",
-  componentId: "sc-184jekw-3"
-})(["font-family:", ";font-size:13px;vertical-align:middle;text-transform:uppercase;padding-left:10px;transition:opacity 0.3s ease-out;opacity:", ";"], (0, _utils.getThemeProp)(["fonts", "header"], "sans-serif"), (0, _utils.ifFlag)("show", 1, 0));
-var MenuItem = function MenuItem(_ref5) {
-  var _ref5$open = _ref5.open,
-    open = _ref5$open === void 0 ? false : _ref5$open,
-    _ref5$label = _ref5.label,
-    label = _ref5$label === void 0 ? "" : _ref5$label,
-    icon = _ref5.icon,
-    alert = _ref5.alert,
-    _ref5$isHidden = _ref5.isHidden,
-    isHidden = _ref5$isHidden === void 0 ? false : _ref5$isHidden,
-    href = _ref5.href,
-    props = _objectWithoutProperties(_ref5, _excluded2);
-  var ItemWrapper = Block;
-  if (props.menuToggle) {
-    ItemWrapper = BlockWithA;
-  }
+var MenuItem = function MenuItem(_ref2) {
+  var _ref2$open = _ref2.open,
+    open = _ref2$open === void 0 ? false : _ref2$open,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "" : _ref2$label,
+    icon = _ref2.icon,
+    alert = _ref2.alert,
+    _ref2$isHidden = _ref2.isHidden,
+    isHidden = _ref2$isHidden === void 0 ? false : _ref2$isHidden,
+    href = _ref2.href,
+    menuToggle = _ref2.menuToggle,
+    active = _ref2.active,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var classes = useStyles({
+    active: active,
+    menuToggle: menuToggle,
+    alertType: alert == null ? void 0 : alert.type,
+    showLabel: open
+  });
   var alertMessage = (0, _react.useRef)("");
-  if (alert && alert.message) {
+  var showAlert = !!alert;
+  var showAlertMessage = !!(alert != null && alert.message);
+  if (showAlert && showAlertMessage) {
     alertMessage.current = alert.message;
   }
-  return !isHidden && /*#__PURE__*/_react.default.createElement(ItemWrapper, _extends({
-    to: href
-  }, props), /*#__PURE__*/_react.default.createElement(MenuIcon, {
-    id: icon
-  }), alert ? /*#__PURE__*/_react.default.createElement(Alert, {
-    type: alert.type
-  }, /*#__PURE__*/_react.default.createElement(AlertMessage, {
-    in: !!alert.message,
-    type: alert.type
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: alertMessage.current
-  }))) : null, /*#__PURE__*/_react.default.createElement(Label, {
-    show: open
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: label
-  })));
+  if (isHidden) {
+    return false;
+  }
+  var ItemWrapper = menuToggle ? "a" : FilteredLink;
+  return /*#__PURE__*/_react.default.createElement(ItemWrapper, _extends({
+    to: href,
+    className: classes.block
+  }, props), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: icon,
+    className: classes.menuIcon
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.alert, " ").concat(showAlert ? "show" : undefined)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.alertMessage, " ").concat(showAlertMessage ? "show" : undefined)
+  }, alertMessage.current)), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.label
+  }, typeof label === "string" ? label : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, label)));
 };
-__signature__(MenuItem, "useRef{alertMessage}");
-__signature__(MenuItem, "useRef{alertMessage}");
+__signature__(MenuItem, "useStyles{classes}\nuseRef{alertMessage}", function () {
+  return [useStyles];
+});
+__signature__(MenuItem, "useStyles{classes}\nuseRef{alertMessage}", function () {
+  return [useStyles];
+});
 var _default = MenuItem;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -134,18 +186,9 @@ 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(Block, "Block", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(BlockWithA, "BlockWithA", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(Alert, "Alert", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(transformTime, "transformTime", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(opacityTime, "opacityTime", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(opacityDelay, "opacityDelay", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(alertStyling, "alertStyling", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(transitionStatement, "transitionStatement", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(AlertMessage, "AlertMessage", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(MenuIcon, "MenuIcon", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(Label, "Label", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
 })();
@@ -160,18 +203,9 @@ 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(Block, "Block", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(BlockWithA, "BlockWithA", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(Alert, "Alert", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(transformTime, "transformTime", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(opacityTime, "opacityTime", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(opacityDelay, "opacityDelay", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(alertStyling, "alertStyling", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(transitionStatement, "transitionStatement", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(AlertMessage, "AlertMessage", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(MenuIcon, "MenuIcon", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
-  reactHotLoader.register(Label, "Label", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(MenuItem, "MenuItem", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/AppFrame/MenuItem.js");
 })();