@verdaccio/ui-components 3.0.0-next-7.4 → 3.0.0-next-7.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @verdaccio/ui-components
 
+## 3.0.0-next-7.5
+
+### Minor Changes
+
+- c9962fe: feat: forbidden user interface
+
 ## 3.0.0-next-7.4
 
 ### Patch Changes

package/build/AppTest/AppRoute.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _index = require("../index");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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; }
+const VersionPage = (0, _index.loadable)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Version" */'./pages/Version'))));
+const Front = (0, _index.loadable)(() => Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "Home" */'./pages/Front'))));
+const AppRoute = () => {
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    exact: true,
+    path: _index.Route.ROOT
+  }, /*#__PURE__*/_react.default.createElement(Front, null)), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    exact: true,
+    path: _index.Route.PACKAGE
+  }, /*#__PURE__*/_react.default.createElement(_index.VersionProvider, null, /*#__PURE__*/_react.default.createElement(VersionPage, null))), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    exact: true,
+    path: _index.Route.PACKAGE_VERSION
+  }, /*#__PURE__*/_react.default.createElement(_index.VersionProvider, null, /*#__PURE__*/_react.default.createElement(VersionPage, null))), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    exact: true,
+    path: _index.Route.SCOPE_PACKAGE_VERSION
+  }, /*#__PURE__*/_react.default.createElement(_index.VersionProvider, null, /*#__PURE__*/_react.default.createElement(VersionPage, null))), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    exact: true,
+    path: _index.Route.SCOPE_PACKAGE
+  }, /*#__PURE__*/_react.default.createElement(_index.VersionProvider, null, /*#__PURE__*/_react.default.createElement(VersionPage, null))), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, null, /*#__PURE__*/_react.default.createElement(_index.NotFound, null)));
+};
+var _default = exports.default = AppRoute;
+//# sourceMappingURL=AppRoute.js.map

package/build/AppTest/pages/Front/Home.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = require("../../../index");
+var _default = exports.default = _index.Home;
+//# sourceMappingURL=Home.js.map

package/build/AppTest/pages/Front/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Home.default;
+  }
+});
+var _Home = _interopRequireDefault(require("./Home"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/build/AppTest/pages/Version/Version.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Forbidden = _interopRequireDefault(require("../../../components/Forbidden"));
+var _index = require("../../../index");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Version = () => {
+  const manifestStore = (0, _reactRedux.useSelector)(state => state.manifest);
+  const isLoading = (0, _reactRedux.useSelector)(state => {
+    var _state$loading;
+    return state === null || state === void 0 ? void 0 : (_state$loading = state.loading) === null || _state$loading === void 0 ? void 0 : _state$loading.models.manifest;
+  });
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_index.Loading, null);
+  }
+
+  // @ts-expect-error
+  if (manifestStore.forbidden) {
+    return /*#__PURE__*/_react.default.createElement(_Forbidden.default, null);
+  }
+
+  // @ts-expect-error
+  if (manifestStore.hasNotBeenFound) {
+    return /*#__PURE__*/_react.default.createElement(_index.NotFound, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_index.VersionLayout, null);
+};
+var _default = exports.default = Version;
+//# sourceMappingURL=Version.js.map

package/build/AppTest/pages/Version/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Version.default;
+  }
+});
+var _Version = _interopRequireDefault(require("./Version"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/build/components/Forbidden/Forbidden.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _Lock = _interopRequireDefault(require("@mui/icons-material/Lock"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactRouterDom = require("react-router-dom");
+var _Heading = _interopRequireDefault(require("../Heading"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /* eslint-disable react/forbid-component-props */ /* eslint-disable verdaccio/jsx-no-style */
+const Foebidden = () => {
+  const history = (0, _reactRouterDom.useHistory)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const handleGoHome = (0, _react.useCallback)(() => {
+    history.push('/');
+  }, [history]);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    alignItems: "center",
+    "data-testid": "404",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    justifyContent: "center",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Lock.default, {
+    color: "primary",
+    style: {
+      fontSize: 236
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledHeading, {
+    className: "not-found-text",
+    variant: "h4"
+  }, t('error.401.sorry-no-access')), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "data-testid": "not-found-go-to-home-button",
+    onClick: handleGoHome,
+    variant: "contained"
+  }, t('button.go-to-the-home-page')));
+};
+var _default = exports.default = Foebidden;
+const Container = /*#__PURE__*/(0, _base.default)('div', process.env.NODE_ENV === "production" ? {
+  target: "e1p1nuky1"
+} : {
+  target: "e1p1nuky1",
+  label: "Container"
+})(process.env.NODE_ENV === "production" ? {
+  name: "9th5i",
+  styles: "margin:0 auto"
+} : {
+  name: "9th5i",
+  styles: "margin:0 auto",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZvcmJpZGRlbi9Gb3JiaWRkZW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEa0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRm9yYmlkZGVuL0ZvcmJpZGRlbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9mb3JiaWQtY29tcG9uZW50LXByb3BzICovXG5cbi8qIGVzbGludC1kaXNhYmxlIHZlcmRhY2Npby9qc3gtbm8tc3R5bGUgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBMb2NrSWNvbiBmcm9tICdAbXVpL2ljb25zLW1hdGVyaWFsL0xvY2snO1xuaW1wb3J0IEJveCBmcm9tICdAbXVpL21hdGVyaWFsL0JveCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BtdWkvbWF0ZXJpYWwvQnV0dG9uJztcbmltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyB1c2VIaXN0b3J5IH0gZnJvbSAncmVhY3Qtcm91dGVyLWRvbSc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4nO1xuaW1wb3J0IEhlYWRpbmcgZnJvbSAnLi4vSGVhZGluZyc7XG5cbmNvbnN0IEZvZWJpZGRlbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IGhpc3RvcnkgPSB1c2VIaXN0b3J5KCk7XG5cbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuXG4gIGNvbnN0IGhhbmRsZUdvSG9tZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBoaXN0b3J5LnB1c2goJy8nKTtcbiAgfSwgW2hpc3RvcnldKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3hcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCI0MDRcIlxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBmbGV4R3Jvdz17MX1cbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHA9ezJ9XG4gICAgPlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPExvY2tJY29uIGNvbG9yPVwicHJpbWFyeVwiIHN0eWxlPXt7IGZvbnRTaXplOiAyMzYgfX0gLz5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgICAgPFN0eWxlZEhlYWRpbmcgY2xhc3NOYW1lPVwibm90LWZvdW5kLXRleHRcIiB2YXJpYW50PVwiaDRcIj5cbiAgICAgICAge3QoJ2Vycm9yLjQwMS5zb3JyeS1uby1hY2Nlc3MnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZvZWJpZGRlbjtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnKSh7XG4gIG1hcmdpbjogJzAgYXV0bycsXG59KTtcblxuY29uc3QgU3R5bGVkSGVhZGluZyA9IHN0eWxlZChIZWFkaW5nKTx7IHRoZW1lPzogVGhlbWUgfT4oKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6IHRoZW1lPy5wYWxldHRlLm1vZGUgPT09ICdsaWdodCcgPyB0aGVtZT8ucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiB0aGVtZT8ucGFsZXR0ZS53aGl0ZSxcbiAgbWFyZ2luQm90dG9tOiAxNixcbn0pKTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledHeading = /*#__PURE__*/(0, _base.default)(_Heading.default, process.env.NODE_ENV === "production" ? {
+  target: "e1p1nuky0"
+} : {
+  target: "e1p1nuky0",
+  label: "StyledHeading"
+})(({
+  theme
+}) => ({
+  color: (theme === null || theme === void 0 ? void 0 : theme.palette.mode) === 'light' ? theme === null || theme === void 0 ? void 0 : theme.palette.primary.main : theme === null || theme === void 0 ? void 0 : theme.palette.white,
+  marginBottom: 16
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZvcmJpZGRlbi9Gb3JiaWRkZW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Ec0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRm9yYmlkZGVuL0ZvcmJpZGRlbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9mb3JiaWQtY29tcG9uZW50LXByb3BzICovXG5cbi8qIGVzbGludC1kaXNhYmxlIHZlcmRhY2Npby9qc3gtbm8tc3R5bGUgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBMb2NrSWNvbiBmcm9tICdAbXVpL2ljb25zLW1hdGVyaWFsL0xvY2snO1xuaW1wb3J0IEJveCBmcm9tICdAbXVpL21hdGVyaWFsL0JveCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BtdWkvbWF0ZXJpYWwvQnV0dG9uJztcbmltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjayB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyB1c2VIaXN0b3J5IH0gZnJvbSAncmVhY3Qtcm91dGVyLWRvbSc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4nO1xuaW1wb3J0IEhlYWRpbmcgZnJvbSAnLi4vSGVhZGluZyc7XG5cbmNvbnN0IEZvZWJpZGRlbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IGhpc3RvcnkgPSB1c2VIaXN0b3J5KCk7XG5cbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuXG4gIGNvbnN0IGhhbmRsZUdvSG9tZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBoaXN0b3J5LnB1c2goJy8nKTtcbiAgfSwgW2hpc3RvcnldKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3hcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgZGF0YS10ZXN0aWQ9XCI0MDRcIlxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBmbGV4R3Jvdz17MX1cbiAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgIHA9ezJ9XG4gICAgPlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPExvY2tJY29uIGNvbG9yPVwicHJpbWFyeVwiIHN0eWxlPXt7IGZvbnRTaXplOiAyMzYgfX0gLz5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgICAgPFN0eWxlZEhlYWRpbmcgY2xhc3NOYW1lPVwibm90LWZvdW5kLXRleHRcIiB2YXJpYW50PVwiaDRcIj5cbiAgICAgICAge3QoJ2Vycm9yLjQwMS5zb3JyeS1uby1hY2Nlc3MnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZvZWJpZGRlbjtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnKSh7XG4gIG1hcmdpbjogJzAgYXV0bycsXG59KTtcblxuY29uc3QgU3R5bGVkSGVhZGluZyA9IHN0eWxlZChIZWFkaW5nKTx7IHRoZW1lPzogVGhlbWUgfT4oKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6IHRoZW1lPy5wYWxldHRlLm1vZGUgPT09ICdsaWdodCcgPyB0aGVtZT8ucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiB0aGVtZT8ucGFsZXR0ZS53aGl0ZSxcbiAgbWFyZ2luQm90dG9tOiAxNixcbn0pKTtcbiJdfQ== */");
+//# sourceMappingURL=Forbidden.js.map

package/build/components/Forbidden/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Forbidden.default;
+  }
+});
+var _Forbidden = _interopRequireDefault(require("./Forbidden"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/build/components/NotFound/NotFound.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _FolderOff = _interopRequireDefault(require("@mui/icons-material/FolderOff"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactRouterDom = require("react-router-dom");
 var _Heading = _interopRequireDefault(require("../Heading"));
-var _package = _interopRequireDefault(require("./img/package.svg"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } // @ts-ignore
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /* eslint-disable verdaccio/jsx-no-style */
 const NotFound = () => {
   const history = (0, _reactRouterDom.useHistory)();
   const {
@@ -32,10 +32,12 @@ const NotFound = () => {
     flexGrow: 1,
     justifyContent: "center",
     p: 2
-  }, /*#__PURE__*/_react.default.createElement(EmptyPackage, {
-    alt: t('error.404.page-not-found'),
-    src: _package.default
-  }), /*#__PURE__*/_react.default.createElement(StyledHeading, {
+  }, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_FolderOff.default, {
+    color: "primary",
+    style: {
+      fontSize: 236
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledHeading, {
     className: "not-found-text",
     variant: "h4"
   }, t('error.404.sorry-we-could-not-find-it')), /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -45,18 +47,18 @@ const NotFound = () => {
   }, t('button.go-to-the-home-page')));
 };
 var _default = exports.default = NotFound;
-const EmptyPackage = /*#__PURE__*/(0, _base.default)('img', process.env.NODE_ENV === "production" ? {
+const Container = /*#__PURE__*/(0, _base.default)('div', process.env.NODE_ENV === "production" ? {
   target: "e85lhfw1"
 } : {
   target: "e85lhfw1",
-  label: "EmptyPackage"
+  label: "Container"
 })(process.env.NODE_ENV === "production" ? {
-  name: "178ibc5",
-  styles: "width:150px;margin:0 auto"
+  name: "9th5i",
+  styles: "margin:0 auto"
 } : {
-  name: "178ibc5",
-  styles: "width:150px;margin:0 auto",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQ3FCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBCb3ggZnJvbSAnQG11aS9tYXRlcmlhbC9Cb3gnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICdAbXVpL21hdGVyaWFsL0J1dHRvbic7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgdXNlSGlzdG9yeSB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLyc7XG5pbXBvcnQgSGVhZGluZyBmcm9tICcuLi9IZWFkaW5nJztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBQYWNrYWdlSW1nIGZyb20gJy4vaW1nL3BhY2thZ2Uuc3ZnJztcblxuY29uc3QgTm90Rm91bmQ6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCBoaXN0b3J5ID0gdXNlSGlzdG9yeSgpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaGFuZGxlR29Ib21lID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGhpc3RvcnkucHVzaCgnLycpO1xuICB9LCBbaGlzdG9yeV0pO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBkYXRhLXRlc3RpZD1cIjQwNFwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGZsZXhHcm93PXsxfVxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgcD17Mn1cbiAgICA+XG4gICAgICA8RW1wdHlQYWNrYWdlIGFsdD17dCgnZXJyb3IuNDA0LnBhZ2Utbm90LWZvdW5kJyl9IHNyYz17UGFja2FnZUltZ30gLz5cbiAgICAgIDxTdHlsZWRIZWFkaW5nIGNsYXNzTmFtZT1cIm5vdC1mb3VuZC10ZXh0XCIgdmFyaWFudD1cImg0XCI+XG4gICAgICAgIHt0KCdlcnJvci40MDQuc29ycnktd2UtY291bGQtbm90LWZpbmQtaXQnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdEZvdW5kO1xuXG5jb25zdCBFbXB0eVBhY2thZ2UgPSBzdHlsZWQoJ2ltZycpKHtcbiAgd2lkdGg6ICcxNTBweCcsXG4gIG1hcmdpbjogJzAgYXV0bycsXG59KTtcblxuY29uc3QgU3R5bGVkSGVhZGluZyA9IHN0eWxlZChIZWFkaW5nKTx7IHRoZW1lPzogVGhlbWUgfT4oKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6IHRoZW1lPy5wYWxldHRlLm1vZGUgPT09ICdsaWdodCcgPyB0aGVtZT8ucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiB0aGVtZT8ucGFsZXR0ZS53aGl0ZSxcbiAgbWFyZ2luQm90dG9tOiAxNixcbn0pKTtcbiJdfQ== */",
+  name: "9th5i",
+  styles: "margin:0 auto",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q2tCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHZlcmRhY2Npby9qc3gtbm8tc3R5bGUgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBGb2xkZXJPZmZJY29uIGZyb20gJ0BtdWkvaWNvbnMtbWF0ZXJpYWwvRm9sZGVyT2ZmJztcbmltcG9ydCBCb3ggZnJvbSAnQG11aS9tYXRlcmlhbC9Cb3gnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICdAbXVpL21hdGVyaWFsL0J1dHRvbic7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgdXNlSGlzdG9yeSB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLyc7XG5pbXBvcnQgSGVhZGluZyBmcm9tICcuLi9IZWFkaW5nJztcblxuY29uc3QgTm90Rm91bmQ6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCBoaXN0b3J5ID0gdXNlSGlzdG9yeSgpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaGFuZGxlR29Ib21lID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGhpc3RvcnkucHVzaCgnLycpO1xuICB9LCBbaGlzdG9yeV0pO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBkYXRhLXRlc3RpZD1cIjQwNFwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGZsZXhHcm93PXsxfVxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgcD17Mn1cbiAgICA+XG4gICAgICA8Q29udGFpbmVyPlxuICAgICAgICA8Rm9sZGVyT2ZmSWNvbiBjb2xvcj1cInByaW1hcnlcIiBzdHlsZT17eyBmb250U2l6ZTogMjM2IH19IC8+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICAgIDxTdHlsZWRIZWFkaW5nIGNsYXNzTmFtZT1cIm5vdC1mb3VuZC10ZXh0XCIgdmFyaWFudD1cImg0XCI+XG4gICAgICAgIHt0KCdlcnJvci40MDQuc29ycnktd2UtY291bGQtbm90LWZpbmQtaXQnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdEZvdW5kO1xuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKHtcbiAgbWFyZ2luOiAnMCBhdXRvJyxcbn0pO1xuXG5jb25zdCBTdHlsZWRIZWFkaW5nID0gc3R5bGVkKEhlYWRpbmcpPHsgdGhlbWU/OiBUaGVtZSB9PigoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogdGhlbWU/LnBhbGV0dGUubW9kZSA9PT0gJ2xpZ2h0JyA/IHRoZW1lPy5wYWxldHRlLnByaW1hcnkubWFpbiA6IHRoZW1lPy5wYWxldHRlLndoaXRlLFxuICBtYXJnaW5Cb3R0b206IDE2LFxufSkpO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const StyledHeading = /*#__PURE__*/(0, _base.default)(_Heading.default, process.env.NODE_ENV === "production" ? {
@@ -69,5 +71,5 @@ const StyledHeading = /*#__PURE__*/(0, _base.default)(_Heading.default, process.
 }) => ({
   color: (theme === null || theme === void 0 ? void 0 : theme.palette.mode) === 'light' ? theme === null || theme === void 0 ? void 0 : theme.palette.primary.main : theme === null || theme === void 0 ? void 0 : theme.palette.white,
   marginBottom: 16
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRHNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBCb3ggZnJvbSAnQG11aS9tYXRlcmlhbC9Cb3gnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICdAbXVpL21hdGVyaWFsL0J1dHRvbic7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgdXNlSGlzdG9yeSB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLyc7XG5pbXBvcnQgSGVhZGluZyBmcm9tICcuLi9IZWFkaW5nJztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBQYWNrYWdlSW1nIGZyb20gJy4vaW1nL3BhY2thZ2Uuc3ZnJztcblxuY29uc3QgTm90Rm91bmQ6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCBoaXN0b3J5ID0gdXNlSGlzdG9yeSgpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaGFuZGxlR29Ib21lID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGhpc3RvcnkucHVzaCgnLycpO1xuICB9LCBbaGlzdG9yeV0pO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBkYXRhLXRlc3RpZD1cIjQwNFwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGZsZXhHcm93PXsxfVxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgcD17Mn1cbiAgICA+XG4gICAgICA8RW1wdHlQYWNrYWdlIGFsdD17dCgnZXJyb3IuNDA0LnBhZ2Utbm90LWZvdW5kJyl9IHNyYz17UGFja2FnZUltZ30gLz5cbiAgICAgIDxTdHlsZWRIZWFkaW5nIGNsYXNzTmFtZT1cIm5vdC1mb3VuZC10ZXh0XCIgdmFyaWFudD1cImg0XCI+XG4gICAgICAgIHt0KCdlcnJvci40MDQuc29ycnktd2UtY291bGQtbm90LWZpbmQtaXQnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdEZvdW5kO1xuXG5jb25zdCBFbXB0eVBhY2thZ2UgPSBzdHlsZWQoJ2ltZycpKHtcbiAgd2lkdGg6ICcxNTBweCcsXG4gIG1hcmdpbjogJzAgYXV0bycsXG59KTtcblxuY29uc3QgU3R5bGVkSGVhZGluZyA9IHN0eWxlZChIZWFkaW5nKTx7IHRoZW1lPzogVGhlbWUgfT4oKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6IHRoZW1lPy5wYWxldHRlLm1vZGUgPT09ICdsaWdodCcgPyB0aGVtZT8ucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiB0aGVtZT8ucGFsZXR0ZS53aGl0ZSxcbiAgbWFyZ2luQm90dG9tOiAxNixcbn0pKTtcbiJdfQ== */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRHNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdEZvdW5kL05vdEZvdW5kLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHZlcmRhY2Npby9qc3gtbm8tc3R5bGUgKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBGb2xkZXJPZmZJY29uIGZyb20gJ0BtdWkvaWNvbnMtbWF0ZXJpYWwvRm9sZGVyT2ZmJztcbmltcG9ydCBCb3ggZnJvbSAnQG11aS9tYXRlcmlhbC9Cb3gnO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICdAbXVpL21hdGVyaWFsL0J1dHRvbic7XG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgdXNlSGlzdG9yeSB9IGZyb20gJ3JlYWN0LXJvdXRlci1kb20nO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLyc7XG5pbXBvcnQgSGVhZGluZyBmcm9tICcuLi9IZWFkaW5nJztcblxuY29uc3QgTm90Rm91bmQ6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCBoaXN0b3J5ID0gdXNlSGlzdG9yeSgpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaGFuZGxlR29Ib21lID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGhpc3RvcnkucHVzaCgnLycpO1xuICB9LCBbaGlzdG9yeV0pO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBkYXRhLXRlc3RpZD1cIjQwNFwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGZsZXhHcm93PXsxfVxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgcD17Mn1cbiAgICA+XG4gICAgICA8Q29udGFpbmVyPlxuICAgICAgICA8Rm9sZGVyT2ZmSWNvbiBjb2xvcj1cInByaW1hcnlcIiBzdHlsZT17eyBmb250U2l6ZTogMjM2IH19IC8+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICAgIDxTdHlsZWRIZWFkaW5nIGNsYXNzTmFtZT1cIm5vdC1mb3VuZC10ZXh0XCIgdmFyaWFudD1cImg0XCI+XG4gICAgICAgIHt0KCdlcnJvci40MDQuc29ycnktd2UtY291bGQtbm90LWZpbmQtaXQnKX1cbiAgICAgIDwvU3R5bGVkSGVhZGluZz5cbiAgICAgIDxCdXR0b24gZGF0YS10ZXN0aWQ9XCJub3QtZm91bmQtZ28tdG8taG9tZS1idXR0b25cIiBvbkNsaWNrPXtoYW5kbGVHb0hvbWV9IHZhcmlhbnQ9XCJjb250YWluZWRcIj5cbiAgICAgICAge3QoJ2J1dHRvbi5nby10by10aGUtaG9tZS1wYWdlJyl9XG4gICAgICA8L0J1dHRvbj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdEZvdW5kO1xuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKHtcbiAgbWFyZ2luOiAnMCBhdXRvJyxcbn0pO1xuXG5jb25zdCBTdHlsZWRIZWFkaW5nID0gc3R5bGVkKEhlYWRpbmcpPHsgdGhlbWU/OiBUaGVtZSB9PigoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogdGhlbWU/LnBhbGV0dGUubW9kZSA9PT0gJ2xpZ2h0JyA/IHRoZW1lPy5wYWxldHRlLnByaW1hcnkubWFpbiA6IHRoZW1lPy5wYWxldHRlLndoaXRlLFxuICBtYXJnaW5Cb3R0b206IDE2LFxufSkpO1xuIl19 */");
 //# sourceMappingURL=NotFound.js.map

package/build/index.js

@@ -28,6 +28,7 @@ var _exportNames = {
   Logo: true,
   MenuItem: true,
   NotFound: true,
+  Forbidden: true,
   LoginDialog: true,
   Search: true,
   HeaderInfoDialog: true,
@@ -136,6 +137,12 @@ Object.defineProperty(exports, "Footer", {
     return _Footer.default;
   }
 });
+Object.defineProperty(exports, "Forbidden", {
+  enumerable: true,
+  get: function () {
+    return _Forbidden.default;
+  }
+});
 Object.defineProperty(exports, "FundButton", {
   enumerable: true,
   get: function () {
@@ -406,6 +413,7 @@ var _Label = _interopRequireDefault(require("./components/Label"));
 var _Logo = _interopRequireDefault(require("./components/Logo"));
 var _MenuItem = _interopRequireDefault(require("./components/MenuItem"));
 var _NotFound = _interopRequireDefault(require("./components/NotFound"));
+var _Forbidden = _interopRequireDefault(require("./components/Forbidden"));
 var _LoginDialog = _interopRequireDefault(require("./components/LoginDialog"));
 var _Search = _interopRequireDefault(require("./components/Search"));
 var _HeaderInfoDialog = _interopRequireDefault(require("./components/HeaderInfoDialog"));

package/build/src/AppTest/App.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ApplicationStoryBook: any;
+export declare const ApplicationjQuery: any;
+export declare const ApplicationForbidden: any;
+export declare const ApplicationNotFound: any;

package/build/src/AppTest/AppRoute.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AppRoute: React.FC;
+export default AppRoute;

package/build/src/AppTest/pages/Front/Home.d.ts

@@ -0,0 +1,2 @@
+import { Home } from '../../../index';
+export default Home;

package/build/src/AppTest/pages/Front/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Home';

package/build/src/AppTest/pages/Version/Version.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Version: React.FC;
+export default Version;

package/build/src/AppTest/pages/Version/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Version';

package/build/src/components/Forbidden/Forbidden.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Foebidden: React.FC;
+export default Foebidden;

package/build/src/components/Forbidden/Forbidden.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/src/components/Forbidden/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Forbidden';

package/build/src/index.d.ts

@@ -22,6 +22,7 @@ export { default as Label } from './components/Label';
 export { default as Logo } from './components/Logo';
 export { default as MenuItem } from './components/MenuItem';
 export { default as NotFound } from './components/NotFound';
+export { default as Forbidden } from './components/Forbidden';
 export { default as LoginDialog } from './components/LoginDialog';
 export { default as Search } from './components/Search';
 export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';

package/build/src/sections/Detail/Detail.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: {
 export default _default;
 export declare const DetailStorybook: any;
 export declare const DetailJquery: any;
+export declare const DetailForbidden: any;

package/build/src/store/models/manifest.d.ts

@@ -13,6 +13,15 @@ export declare const manifest: {
 } & {
     reducers: {
         notFound(state: {}): {
+            hasNotBeenFound: boolean;
+            forbidden: boolean;
+            manifest: undefined;
+            packageName: undefined;
+            packageVersion: undefined;
+            readme: undefined;
+        };
+        forbidden(state: {}): {
+            forbidden: boolean;
             hasNotBeenFound: boolean;
             manifest: undefined;
             packageName: undefined;
@@ -25,6 +34,7 @@ export declare const manifest: {
         isError(state: {}): {
             isError: boolean;
             hasNotBeenFound: boolean;
+            forbidden: boolean;
             manifest: undefined;
             packageName: undefined;
             packageVersion: undefined;
@@ -36,6 +46,7 @@ export declare const manifest: {
             packageVersion: any;
             readme: any;
             hasNotBeenFound: boolean;
+            forbidden: boolean;
         };
     };
 } & ({} | {

package/build/store/api.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 exports.handleResponseType = handleResponseType;
 var _storage = _interopRequireDefault(require("./storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class CustomError extends Error {}
+
 /**
  * Handles response according to content type
  * @param {object} response
@@ -31,7 +33,9 @@ function handleResponseType(response) {
       return Promise.all([response.ok, response.blob()]);
     }
   }
-  return Promise.all([response.ok, response.text()]);
+
+  // error handling
+  return Promise.all([response.ok, response]);
 }
 const AuthHeader = 'Authorization';
 class API {
@@ -52,12 +56,14 @@ class API {
         signal: options.signal,
         ...options
       }).then(handleResponseType).then(response => {
-        if (response[0]) {
-          resolve(response[1]);
+        const [ok, data] = response;
+        if (ok === true) {
+          resolve(data);
         } else {
-          // eslint-disable-next-line no-console
-          console.error(response);
-          reject(new Error('something went wrong'));
+          var _data$statusText, _data$status;
+          const error = new CustomError((_data$statusText = data === null || data === void 0 ? void 0 : data.statusText) !== null && _data$statusText !== void 0 ? _data$statusText : 'Unknown error');
+          error.code = (_data$status = data === null || data === void 0 ? void 0 : data.status) !== null && _data$status !== void 0 ? _data$status : 500;
+          reject(error);
         }
       }).catch(error => {
         reject(error);

package/build/store/models/manifest.js

@@ -29,6 +29,18 @@ const manifest = exports.manifest = (0, _core.createModel)()({
       return {
         ...state,
         hasNotBeenFound: true,
+        forbidden: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined
+      };
+    },
+    forbidden(state) {
+      return {
+        ...state,
+        forbidden: true,
+        hasNotBeenFound: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -46,6 +58,7 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         ...state,
         isError: true,
         hasNotBeenFound: false,
+        forbidden: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -64,7 +77,8 @@ const manifest = exports.manifest = (0, _core.createModel)()({
         packageName,
         packageVersion,
         readme,
-        hasNotBeenFound: false
+        hasNotBeenFound: false,
+        forbidden: false
       };
     }
   },
@@ -90,7 +104,11 @@ const manifest = exports.manifest = (0, _core.createModel)()({
           readme
         });
       } catch (error) {
-        dispatch.manifest.notFound();
+        if (error.code === 404) {
+          dispatch.manifest.notFound();
+        } else {
+          dispatch.manifest.forbidden();
+        }
       }
     }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next-7.4",
+  "version": "3.0.0-next-7.5",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",

package/src/AppTest/App.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import AppRoute from './AppRoute';
+
+export default {
+  title: 'App/Main',
+};
+
+export const ApplicationStoryBook: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationjQuery: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/jquery`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <AppRoute />
+  </MemoryRouter>
+);
+
+export const ApplicationNotFound: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/kleur`]}>
+    <AppRoute />
+  </MemoryRouter>
+);

package/src/AppTest/AppRoute.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Route as ReactRouterDomRoute, Switch } from 'react-router-dom';
+
+import { NotFound, Route, VersionProvider, loadable } from '../index';
+
+const VersionPage = loadable(() => import(/* webpackChunkName: "Version" */ './pages/Version'));
+const Front = loadable(() => import(/* webpackChunkName: "Home" */ './pages/Front'));
+
+const AppRoute: React.FC = () => {
+  return (
+    <Switch>
+      <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+        <Front />
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+        <VersionProvider>
+          <VersionPage />
+        </VersionProvider>
+      </ReactRouterDomRoute>
+      <ReactRouterDomRoute>
+        <NotFound />
+      </ReactRouterDomRoute>
+    </Switch>
+  );
+};
+
+export default AppRoute;

package/src/AppTest/pages/Front/Home.ts

@@ -0,0 +1,3 @@
+import { Home } from '../../../index';
+
+export default Home;

package/src/AppTest/pages/Front/index.ts

@@ -0,0 +1 @@
+export { default } from './Home';

package/src/AppTest/pages/Version/Version.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import Forbidden from '../../../components/Forbidden';
+import { Loading, NotFound, RootState, VersionLayout } from '../../../index';
+
+const Version: React.FC = () => {
+  const manifestStore = useSelector((state: RootState) => state.manifest);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.forbidden) {
+    return <Forbidden />;
+  }
+
+  // @ts-expect-error
+  if (manifestStore.hasNotBeenFound) {
+    return <NotFound />;
+  }
+
+  return <VersionLayout />;
+};
+
+export default Version;

package/src/AppTest/pages/Version/index.ts

@@ -0,0 +1 @@
+export { default } from './Version';

package/src/components/Forbidden/Forbidden.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import Forbidden from './Forbidden';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<Forbidden /> component', () => {
+  test('should load the component in default state', () => {
+    render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('LockIcon')).toBeInTheDocument();
+    expect(screen.getByText('error.401.sorry-no-access')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <Forbidden />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/Forbidden/Forbidden.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react/forbid-component-props */
+
+/* eslint-disable verdaccio/jsx-no-style */
+import styled from '@emotion/styled';
+import LockIcon from '@mui/icons-material/Lock';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../..';
+import Heading from '../Heading';
+
+const Foebidden: React.FC = () => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const handleGoHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  return (
+    <Box
+      alignItems="center"
+      data-testid="404"
+      display="flex"
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      p={2}
+    >
+      <Container>
+        <LockIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
+      <StyledHeading className="not-found-text" variant="h4">
+        {t('error.401.sorry-no-access')}
+      </StyledHeading>
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
+      </Button>
+    </Box>
+  );
+};
+
+export default Foebidden;
+
+const Container = styled('div')({
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

package/src/components/Forbidden/index.ts

@@ -0,0 +1 @@
+export { default } from './Forbidden';

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-no-style */
 import styled from '@emotion/styled';
+import FolderOffIcon from '@mui/icons-material/FolderOff';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import React, { useCallback } from 'react';
@@ -7,8 +9,6 @@ import { useHistory } from 'react-router-dom';
 
 import { Theme } from '../../';
 import Heading from '../Heading';
-// @ts-ignore
-import PackageImg from './img/package.svg';
 
 const NotFound: React.FC = () => {
   const history = useHistory();
@@ -28,7 +28,9 @@ const NotFound: React.FC = () => {
       justifyContent="center"
       p={2}
     >
-      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <Container>
+        <FolderOffIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
       <StyledHeading className="not-found-text" variant="h4">
         {t('error.404.sorry-we-could-not-find-it')}
       </StyledHeading>
@@ -41,8 +43,7 @@ const NotFound: React.FC = () => {
 
 export default NotFound;
 
-const EmptyPackage = styled('img')({
-  width: '150px',
+const Container = styled('div')({
   margin: '0 auto',
 });
 

package/src/components/NotFound/Notfound.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { fireEvent, render } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import NotFound from './NotFound';
 
 const mockHistory = jest.fn();
@@ -14,12 +14,15 @@ jest.mock('react-router-dom', () => ({
 
 describe('<NotFound /> component', () => {
   test('should load the component in default state', () => {
-    const { container } = render(
+    render(
       <MemoryRouter>
         <NotFound />
       </MemoryRouter>
     );
-    expect(container.firstChild).toMatchSnapshot();
+
+    expect(screen.getByTestId('FolderOffIcon')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+    expect(screen.getByText('error.404.sorry-we-could-not-find-it')).toBeInTheDocument();
   });
 
   test('go to Home Page button click', async () => {

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as Label } from './components/Label';
 export { default as Logo } from './components/Logo';
 export { default as MenuItem } from './components/MenuItem';
 export { default as NotFound } from './components/NotFound';
+export { default as Forbidden } from './components/Forbidden';
 export { default as LoginDialog } from './components/LoginDialog';
 export { default as Search } from './components/Search';
 export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';

package/src/sections/Detail/Detail.stories.tsx

@@ -27,3 +27,13 @@ export const DetailJquery: any = () => (
     </Route>
   </MemoryRouter>
 );
+
+export const DetailForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Detail />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);

package/src/store/api.test.ts

@@ -14,7 +14,8 @@ describe('api', () => {
 
       const handled = await handleResponseType(response);
 
-      expect(handled).toEqual([ok, responseText]);
+      expect(handled[0]).toBeFalsy();
+      expect(handled[1]).toBeDefined();
     });
 
     test('should test tgz scenario', async () => {
@@ -123,7 +124,7 @@ describe('api', () => {
         })
       );
 
-      await expect(api.request('/resource')).rejects.toThrow(new Error('something went wrong'));
+      await expect(api.request('/resource')).rejects.toThrow(new Error('Unknown error'));
     });
 
     test('when api returns an error 5.x.x', async () => {

package/src/store/api.ts

@@ -1,5 +1,10 @@
 import storage from './storage';
 
+class CustomError extends Error {
+  // @ts-ignore
+  code: number;
+}
+
 /**
  * Handles response according to content type
  * @param {object} response
@@ -25,7 +30,8 @@ export function handleResponseType(response: Response): Promise<[boolean, any]>
     }
   }
 
-  return Promise.all([response.ok, response.text()]);
+  // error handling
+  return Promise.all([response.ok, response]);
 }
 
 const AuthHeader = 'Authorization';
@@ -55,12 +61,13 @@ class API {
       })
         .then(handleResponseType)
         .then((response) => {
-          if (response[0]) {
-            resolve(response[1]);
+          const [ok, data] = response;
+          if (ok === true) {
+            resolve(data);
           } else {
-            // eslint-disable-next-line no-console
-            console.error(response);
-            reject(new Error('something went wrong'));
+            const error = new CustomError(data?.statusText ?? 'Unknown error');
+            error.code = data?.status ?? 500;
+            reject(error);
           }
         })
         .catch((error) => {

package/src/store/models/manifest.ts

@@ -33,6 +33,18 @@ export const manifest = createModel<RootModel>()({
       return {
         ...state,
         hasNotBeenFound: true,
+        forbidden: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    forbidden(state) {
+      return {
+        ...state,
+        forbidden: true,
+        hasNotBeenFound: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -50,6 +62,7 @@ export const manifest = createModel<RootModel>()({
         ...state,
         isError: true,
         hasNotBeenFound: false,
+        forbidden: false,
         manifest: undefined,
         packageName: undefined,
         packageVersion: undefined,
@@ -64,6 +77,7 @@ export const manifest = createModel<RootModel>()({
         packageVersion,
         readme,
         hasNotBeenFound: false,
+        forbidden: false,
       };
     },
   },
@@ -91,7 +105,11 @@ export const manifest = createModel<RootModel>()({
         );
         dispatch.manifest.saveManifest({ packageName, packageVersion, manifest, readme });
       } catch (error: any) {
-        dispatch.manifest.notFound();
+        if (error.code === 404) {
+          dispatch.manifest.notFound();
+        } else {
+          dispatch.manifest.forbidden();
+        }
       }
     },
   }),