@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/pages/Version/DetailContainer/Versions/__snapshots__/Versions.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Version /> component should render the component in default state 1`] = `"<h6 class=\\"MuiTypography-root css-1ikpjfo e1h4if9v0 MuiTypography-subtitle1\\">Current Tags</h6><ul class=\\"MuiList-root MuiList-dense MuiList-padding\\"><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">canary</span></div><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8.0.1-master.1</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">token</span></div><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">2.2.1-pr-token-3</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">next</span></div><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8.0.1-next.1</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">beta</span></div><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">2.0.0-beta.3</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">latest</span></div><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8.0.0</span></div></li></ul><h6 class=\\"MuiTypography-root css-1ikpjfo e1h4if9v0 MuiTypography-subtitle1\\">Version History</h6><ul class=\\"MuiList-root MuiList-dense MuiList-padding\\"><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-master.1\\">8.0.1-master.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-dependabot-npm-and-yarn-eslint-plugin-jest-22-16-0.0\\">8.0.1-dependabot-npm-and-yarn-eslint-plugin-jest-22-16-0.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-next.1\\">8.0.1-next.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-remove-install-warnings.16\\">8.0.1-remove-install-warnings.16</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-master.19\\">8.0.1-master.19</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-master.18\\">8.0.1-master.18</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-master.7\\">8.0.1-master.7</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.0\\">8.0.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-greenkeeper-tools-eslint-6-2-2.6\\">8.0.1-greenkeeper-tools-eslint-6-2-2.6</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.1-master.5\\">8.0.1-master.5</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.0-remove-eslint-warnings.28\\">8.0.0-remove-eslint-warnings.28</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.0-master.16\\">8.0.0-master.16</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.0-next.4\\">8.0.0-next.4</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 month ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/8.0.0-next.3\\">8.0.0-next.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.3.0\\">2.3.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-1\\">2.2.1-1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-pr-token-3\\">2.2.1-pr-token-3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-pr-token-2\\">2.2.1-pr-token-2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-pr-token-1\\">2.2.1-pr-token-1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-pr-token\\">2.2.1-pr-token</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1-pr-168-1\\">2.2.1-pr-168-1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.2.1\\">2.2.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">3 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.1.0\\">2.1.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">6 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.0.0\\">2.0.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">6 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.0.0-beta.3\\">2.0.0-beta.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">7 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.0.0-beta.2\\">2.0.0-beta.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">7 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.7\\">1.1.7</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">7 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.6\\">1.1.6</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.5\\">1.1.5</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.4\\">1.1.4</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.0.0-beta.1\\">2.0.0-beta.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/2.0.0-beta.0\\">2.0.0-beta.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">8 months ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.2.0\\">1.2.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.3\\">1.1.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.2\\">1.1.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.1\\">1.1.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.1.0\\">1.1.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.0.3\\">1.0.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.0.2\\">1.0.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.0.1\\">1.0.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/1.0.0\\">1.0.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.4.2\\">0.4.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.4.1\\">0.4.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.4.0\\">0.4.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.3.0\\">0.3.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.2.1\\">0.2.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.2.0\\">0.2.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.1.4\\">0.1.4</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.1.3\\">0.1.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">over 1 year ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.1.2\\">0.1.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.1.1\\">0.1.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.1.0\\">0.1.0</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.14\\">0.0.14</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.13\\">0.0.13</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.12\\">0.0.12</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.11\\">0.0.11</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.10\\">0.0.10</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.8\\">0.0.8</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.7\\">0.0.7</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.6\\">0.0.6</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">almost 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.5\\">0.0.5</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.4\\">0.0.4</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.3\\">0.0.3</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.2\\">0.0.2</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 years ago</span></div></li><li class=\\"MuiListItem-root version-item MuiListItem-dense MuiListItem-gutters\\"><a class=\\"MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary\\" href=\\"/-/web/detail/foo/v/0.0.1\\">0.0.1</a><div class=\\"css-5ufqjc e1h4if9v1\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e1h4if9v2 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\">about 2 years ago</span></div></li></ul>"`;

package/src/pages/Version/DetailContainer/Versions/index.ts

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

package/src/pages/Version/DetailContainer/Versions/styles.ts

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+import Link from 'verdaccio-ui/components/Link';
+import { default as MuiListItemText } from 'verdaccio-ui/components/ListItemText';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+}));
+
+export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  flex: '1 1 auto',
+  borderBottom: `1px dotted ${
+    theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+  } `,
+  whiteSpace: 'nowrap',
+  height: '0.5em',
+  margin: '0 16px',
+}));
+
+export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
+  flex: 'none',
+  opacity: 0.6,
+  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
+}));
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+});

package/src/pages/Version/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailContainer renders correctly 1`] = `
+.emotion-0 {
+  margin-bottom: 16px;
+}
+
+<div
+  class="MuiBox-root MuiBox-root-1"
+>
+  <div
+    class="MuiTabs-root emotion-0 emotion-1"
+    color="primary"
+  >
+    <div
+      class="MuiTabs-scroller MuiTabs-fixed"
+      style="overflow: hidden;"
+    >
+      <div
+        class="MuiTabs-flexContainer"
+        role="tablist"
+      >
+        <button
+          aria-selected="true"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
+          data-testid="readme-tab"
+          id="readme-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Readme
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          data-testid="dependencies-tab"
+          id="dependencies-tab"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Dependencies
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          data-testid="versions-tab"
+          id="versions-tab"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Versions
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          data-testid="uplinks-tab"
+          id="uplinks-tab"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Uplinks
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+      <span
+        class="PrivateTabIndicator-root-2 PrivateTabIndicator-colorPrimary-3 MuiTabs-indicator"
+        style="left: 0px; width: 0px;"
+      />
+    </div>
+  </div>
+</div>
+`;

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

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

package/src/pages/Version/DetailSidebar/DetailSidebar.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import React, { useContext } from 'react';
+
+import ActionBar from 'verdaccio-ui/components/ActionBar';
+import Author from 'verdaccio-ui/components/Author';
+import Paper from 'verdaccio-ui/components/Paper';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import { DetailContext } from '..';
+import loadable from '../../../App/utils/loadable';
+
+import DetailSidebarFundButton from './DetailSidebarFundButton';
+import DetailSidebarTitle from './DetailSidebarTitle';
+import Developers from './Developers';
+import { DeveloperType } from './Developers/DevelopersTitle';
+
+const Engines = loadable(() => import(/* webpackChunkName: "Engines" */ './Engines'));
+const Dist = loadable(() => import(/* webpackChunkName: "Dist" */ './Dist'));
+const Install = loadable(() => import(/* webpackChunkName: "Install" */ './Install'));
+const Repository = loadable(() => import(/* webpackChunkName: "Repository" */ './Repository'));
+
+const DetailSidebar: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+  const { packageMeta, packageName, packageVersion } = detailContext;
+
+  if (!packageMeta || !packageName) {
+    return null;
+  }
+
+  return (
+    <StyledPaper className={'sidebar-info'}>
+      <DetailSidebarTitle
+        description={packageMeta.latest?.description}
+        isLatest={typeof packageVersion === 'undefined'}
+        packageName={packageName}
+        version={packageVersion || packageMeta.latest.version}
+      />
+      <ActionBar />
+      <Install />
+      <DetailSidebarFundButton />
+      <Repository />
+      <Engines />
+      <Dist />
+      <Author />
+      <Developers type={DeveloperType.MAINTAINERS} />
+      <Developers type={DeveloperType.CONTRIBUTORS} />
+    </StyledPaper>
+  );
+};
+
+export default DetailSidebar;
+
+const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
+  padding: theme?.spacing(3, 2),
+}));

package/src/pages/Version/DetailSidebar/DetailSidebarFundButton.test.tsx

@@ -0,0 +1,111 @@
+import _ from 'lodash';
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../context';
+import { DetailContextProps } from '../version-config';
+
+import DetailSidebarFundButton from './DetailSidebarFundButton';
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({
+  contextValue,
+}) => (
+  <DetailContext.Provider value={contextValue}>
+    <DetailSidebarFundButton />
+  </DetailContext.Provider>
+);
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'test',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: {
+    _uplinks: {},
+    latest: {
+      name: 'verdaccio-ui/local-storage',
+      version: '8.0.1-next.1',
+      dist: {
+        fileCount: 0,
+        unpackedSize: 0,
+        tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+      },
+      homepage: 'https://verdaccio.org',
+      bugs: {
+        url: 'https://github.com/verdaccio/monorepo/issues',
+      },
+    },
+  },
+};
+
+describe('test DetailSidebarFundButton', () => {
+  test('should not display the button if fund is missing', () => {
+    const wrapper = render(<ComponentToBeRendered contextValue={detailContextValue} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is missing', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {},
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not a string', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: null,
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not an url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'somethign different as url',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should display the button if url is a valid url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'https://opencollective.com/verdaccio',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.getByText('Fund')).toBeTruthy();
+  });
+});

package/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import Favorite from '@material-ui/icons/Favorite';
+import React, { useContext } from 'react';
+import { Trans } from 'react-i18next';
+
+import Button from 'verdaccio-ui/components/Button';
+import Link from 'verdaccio-ui/components/Link';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { isURL } from 'verdaccio-ui/utils/url';
+
+import { DetailContext } from '..';
+
+/* eslint-disable react/jsx-no-bind */
+const DetailSidebarFundButton: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  const fundingUrl = packageMeta?.latest?.funding?.url as string;
+
+  if (!isURL(fundingUrl)) {
+    return null;
+  }
+
+  return (
+    <StyledLink external={true} to={fundingUrl}>
+      <Button
+        color="primary"
+        fullWidth={true}
+        startIcon={<StyledFavoriteIcon />}
+        variant="outlined">
+        <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
+      </Button>
+    </StyledLink>
+  );
+};
+
+export default DetailSidebarFundButton;
+
+const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme?.spacing(1),
+  marginBottom: theme?.spacing(1),
+  textDecoration: 'none',
+  display: 'block',
+}));
+
+const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.orange,
+}));
+
+const StyledFundStrong = styled('strong')({
+  marginRight: 3,
+});

package/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Box from 'verdaccio-ui/components/Box';
+import Heading from 'verdaccio-ui/components/Heading';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+interface Props {
+  packageName: string;
+  description?: string;
+  version: string;
+  isLatest: boolean;
+}
+
+const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
+  const { t } = useTranslation();
+  return (
+    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+      <StyledHeading>{packageName}</StyledHeading>
+      {description && <div>{description}</div>}
+      <StyledBoxVersion>
+        {isLatest
+          ? t('sidebar.detail.latest-version', { version })
+          : t('sidebar.detail.version', { version })}
+      </StyledBoxVersion>
+    </Box>
+  );
+};
+
+export default DetailSidebarTitle;
+
+const StyledHeading = styled(Heading)({
+  fontSize: '1rem',
+  fontWeight: 700,
+});
+
+const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme && theme.palette.text.secondary,
+}));

package/src/pages/Version/DetailSidebar/Developers/Developers.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { render, cleanup, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContextProvider } from '../../context';
+
+import Developers from './Developers';
+import { DeveloperType } from './DevelopersTitle';
+
+describe('test Developers', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const packageMeta = {
+    latest: {
+      packageName: 'foo',
+      version: '1.0.0',
+      maintainers: [
+        {
+          name: 'dmethvin',
+          email: 'test@gmail.com',
+        },
+        {
+          name: 'mgol',
+          email: 'm.goleb@gmail.com',
+        },
+      ],
+      contributors: [
+        {
+          name: 'dmethvin',
+          email: 'test@gmail.com',
+        },
+        {
+          name: 'mgol',
+          email: 'm.goleb@gmail.com',
+        },
+      ],
+    },
+  };
+
+  test('should render the component with no items', () => {
+    const packageMeta = {
+      latest: {},
+    };
+    const wrapper = render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Developers type={DeveloperType.MAINTAINERS} />
+      </DetailContextProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component for maintainers with items', () => {
+    const wrapper = render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Developers type={DeveloperType.MAINTAINERS} />
+      </DetailContextProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component for contributors with items', () => {
+    const wrapper = render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Developers type={DeveloperType.CONTRIBUTORS} />
+      </DetailContextProvider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should test onClick the component avatar', () => {
+    const packageMeta = {
+      latest: {
+        packageName: 'foo',
+        version: '1.0.0',
+        contributors: [
+          {
+            name: 'dmethvin',
+            email: 'test@gmail.com',
+          },
+          {
+            name: 'dmethvin2',
+            email: 'test2@gmail.com',
+          },
+          {
+            name: 'dmethvin3',
+            email: 'test3@gmail.com',
+          },
+        ],
+      },
+    };
+
+    const wrapper = render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Developers type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
+      </DetailContextProvider>
+    );
+
+    // const item2 = wrapper.find(Fab);
+    // // TODO: I am not sure here how to verify the method inside the component was called.
+    // item2.simulate('click');
+
+    expect(wrapper.getByText('Contributors')).toBeInTheDocument();
+    fireEvent.click(wrapper.getByTestId('fab'));
+
+    expect(wrapper.getByTitle(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
+    expect(wrapper.getByTitle(packageMeta.latest.contributors[1].name)).toBeInTheDocument();
+  });
+});