cozy-ui 123.2.1 → 124.1.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [124.1.0](https://github.com/cozy/cozy-ui/compare/v124.0.0...v124.1.0) (2025-05-26)
+
+
+### Features
+
+* **Icons:** Add cloud2, discuss, email-open, key2, peoples, secutiry ([76b2dff](https://github.com/cozy/cozy-ui/commit/76b2dff))
+
+# [124.0.0](https://github.com/cozy/cozy-ui/compare/v123.2.1...v124.0.0) (2025-05-22)
+
+
+### Features
+
+* Add dragndrop on virtualized table ([519e610](https://github.com/cozy/cozy-ui/commit/519e610))
+* Add react-dnd ([4f2805e](https://github.com/cozy/cozy-ui/commit/4f2805e))
+* Add react-virtuoso ([e121afe](https://github.com/cozy/cozy-ui/commit/e121afe))
+* Add Virtual table example and adjust style ([9cc9506](https://github.com/cozy/cozy-ui/commit/9cc9506))
+* **Filename:** Add `path` and rework `icon` ([35a8459](https://github.com/cozy/cozy-ui/commit/35a8459))
+* Memo rows and cells ([bae4212](https://github.com/cozy/cozy-ui/commit/bae4212))
+* **TableRow:** Add disabled style ([2a0d626](https://github.com/cozy/cozy-ui/commit/2a0d626))
+* Upgrade react ([fe320be](https://github.com/cozy/cozy-ui/commit/fe320be))
+* **VirtualizedTable:** Add selection props ([f819531](https://github.com/cozy/cozy-ui/commit/f819531))
+
+
+### BREAKING CHANGES
+
+* You have to add `react-dnd ^16.0.1` and `react-dnd-html5-backend ^16.0.1` to use dragndrop on virtualized table. Typically if you use `dragProps: {{ enabled: true }}` on `react/Table/Virtualized` component.
+You also need to wrap your table into the DnD Provider like so:
+```
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+<DndProvider backend={HTML5Backend}>...</DndProvider>
+```
+* **Filename:** You must use `<Icon />` component to use `icon` prop. So replace `<Filename icon={something} />` by `<Filename icon={<Icon icon={something} />} />`
+* You must have `react ^16.14.0` and `react-dom ^16.14.0`.
+
 ## [123.2.1](https://github.com/cozy/cozy-ui/compare/v123.2.0...v123.2.1) (2025-05-20)
 
 

package/assets/icons/ui/cloud2.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1426_12806)"><mask id="path-1-inside-1_1426_12806"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4 13.2a5.6 5.6 0 1 0-5.152-7.8A3.961 3.961 0 0 0 4 5.2a3.954 3.954 0 0 0-1.161.172 3.968 3.968 0 0 0-1.525.864 4.01 4.01 0 0 0-1.27 2.377 3.99 3.99 0 0 0 .63 2.81 3.955 3.955 0 0 0 .943.99 4.029 4.029 0 0 0 1.411.668A3.92 3.92 0 0 0 4 13.2h6.4Z"/></mask><path d="M10.4 13.2v-1.3H9.1v1.3h1.3ZM5.248 5.4l-.405 1.235 1.132.372.469-1.096L5.248 5.4Zm-.087-.028-.377 1.244.377-1.244Zm-.189-.052-.317 1.26.002.001.315-1.26Zm-.191-.043.254-1.275h-.001l-.253 1.275Zm-.194-.034.191-1.285-.19 1.285Zm-.195-.024.128-1.293H4.52l-.127 1.293Zm-.196-.014-.064 1.298h.001l.063-1.298Zm-.392 0 .063 1.298h.001l-.064-1.298Zm-.196.014-.127-1.293.127 1.293Zm-.195.024-.19-1.286.19 1.286Zm-.193.034-.254-1.275.254 1.275Zm-.192.043.316 1.261-.316-1.26Zm-.189.052.377 1.245-.377-1.245Zm-.186.062L2.215 4.21l.438 1.224Zm-.184.07-.497-1.2.497 1.2Zm-.18.08.556 1.176-.555-1.176Zm-.175.089.613 1.146h.001l-.614-1.146Zm-.17.096.668 1.115-.668-1.115Zm-.166.105L2.5 6.955l-.722-1.08Zm-.16.113L.842 4.943l.774 1.044Zm-.156.121L.638 5.103l.824 1.005Zm-.148.128L.44 5.273l.873.963Zm-.142.136-.92-.92.92.92Zm-.136.142L2 7.388v-.001l-.963-.873Zm-.128.149 1.005.824-1.005-.824Zm-.12.154 1.043.775-1.044-.775Zm-.114.161 1.081.722-1.08-.722Zm-.105.166 1.115.668L.57 7.144Zm-.097.17-1.146-.612 1.146.613Zm-.088.176L-.79 6.934l1.175.556Zm-.08.18 1.201.497-1.2-.497Zm-.07.183L-.99 7.415l1.224.438Zm-.114.375-1.261-.315 1.26.315Zm-.043.192 1.275.254L.077 8.42Zm-.034.193 1.286.191-1.286-.19Zm-.024.195 1.294.128-1.294-.128Zm-.014.196-1.299-.064 1.299.064Zm0 .393 1.298-.064-1.298.064Zm.014.195-1.293.128 1.293-.128Zm.024.195-1.286.191 1.286-.19Zm.034.194-1.275.253 1.275-.253Zm.043.191-1.261.316 1.26-.316Zm.052.19 1.244-.378-1.244.377Zm.062.186 1.224-.438-1.224.438Zm.07.183-1.2.498 1.2-.498Zm.08.18 1.175-.556-1.175.556Zm.088.175-1.146.613 1.146-.613Zm.097.17 1.115-.668-1.115.669Zm.105.167 1.081-.722-1.08.722Zm.113.16 1.044-.774-1.044.774Zm.25.304-.964.873.963-.873Zm.135.142.92-.92H2.09l-.918.92Zm.142.135-.874.963h.001l.873-.963Zm.148.129-.824 1.004.824-1.005Zm.155.12-.774 1.044.774-1.044Zm.16.113-.722 1.08v.001l.723-1.08Zm.167.105.668-1.115-.668 1.115Zm.346.185-.556 1.176.556-1.176Zm.18.08-.499 1.2.001.001.497-1.201Zm.183.07.438-1.223-.438 1.224Zm.186.062-.378 1.244h.001l.377-1.244Zm.19.053.315-1.261-.316 1.26Zm.19.043.254-1.275-.253 1.275Zm.194.033.191-1.286-.19 1.286Zm.195.024.128-1.293h-.001l-.127 1.293Zm6.792.02v1.3h1.3v-1.3h-1.3Zm0 1.3a6.9 6.9 0 0 0 6.9-6.9h-2.6a4.3 4.3 0 0 1-4.3 4.3v2.6Zm6.9-6.9A6.9 6.9 0 0 0 10.4.7v2.6a4.3 4.3 0 0 1 4.3 4.3h2.6ZM10.4.7a6.902 6.902 0 0 0-6.347 4.189l2.39 1.022A4.302 4.302 0 0 1 10.4 3.3V.7ZM5.654 4.165a5.232 5.232 0 0 0-.116-.037l-.753 2.489.058.018.81-2.47Zm-.115-.036a5.246 5.246 0 0 0-.251-.07l-.631 2.522.127.035.755-2.487Zm-.25-.07a5.279 5.279 0 0 0-.254-.057l-.509 2.55c.045.009.088.018.13.029l.633-2.522Zm-.255-.057a5.323 5.323 0 0 0-.256-.044l-.382 2.571c.044.007.088.014.131.023l.507-2.55Zm-.257-.045a5.355 5.355 0 0 0-.257-.031l-.256 2.587c.044.004.089.01.133.016l.38-2.572Zm-.258-.031a5.329 5.329 0 0 0-.26-.02l-.126 2.597.133.01.253-2.587Zm-.258-.02A5.27 5.27 0 0 0 4 3.9v2.6l.131.003.129-2.596ZM4 3.9a5.27 5.27 0 0 0-.262.007l.13 2.596c.043-.002.087-.003.131-.003V3.9Zm-.26.007c-.088.004-.174.01-.26.019l.254 2.587.132-.01-.126-2.596Zm-.26.019c-.087.008-.173.019-.258.031l.38 2.573c.045-.007.089-.013.133-.017L3.48 3.926Zm-.259.032c-.085.012-.17.027-.256.044l.507 2.55.131-.023-.382-2.571Zm-.257.044a5.291 5.291 0 0 0-.254.057l.634 2.522.13-.03-.51-2.549Zm-.252.057a5.247 5.247 0 0 0-.252.07l.756 2.487.127-.035-.631-2.522Zm-.25.07a5.275 5.275 0 0 0-.248.081l.876 2.448c.041-.015.083-.029.125-.041l-.754-2.489Zm-.248.081c-.083.03-.163.06-.243.093l.994 2.403c.042-.017.083-.033.125-.048L2.215 4.21Zm-.244.094a5.32 5.32 0 0 0-.237.105l1.112 2.35.121-.053-.996-2.402Zm-.236.105a5.185 5.185 0 0 0-.234.117L2.728 6.82l.117-.06-1.11-2.35Zm-.233.117a5.29 5.29 0 0 0-.227.128l1.337 2.23.115-.065-1.225-2.293Zm-.227.128a5.26 5.26 0 0 0-.22.14l1.446 2.16.111-.07-1.337-2.23Zm-.22.14a5.289 5.289 0 0 0-.212.15l1.549 2.088a2.69 2.69 0 0 1 .108-.077L1.056 4.793Zm-.212.15a5.3 5.3 0 0 0-.205.16l1.65 2.01a2.71 2.71 0 0 1 .104-.082L.842 4.943Zm-.205.16a5.328 5.328 0 0 0-.197.169L2.187 7.2c.033-.03.066-.06.1-.087l-1.65-2.01Zm-.197.17a5.316 5.316 0 0 0-.188.178l1.838 1.84a2.72 2.72 0 0 1 .096-.092L.44 5.273Zm-.189.179a5.313 5.313 0 0 0-.18.188L2 7.387c.03-.033.06-.065.091-.096L.252 5.453Zm-.179.188c-.058.064-.115.13-.17.197l2.01 1.649.086-.1L.073 5.642Zm-.17.197a5.299 5.299 0 0 0-.16.205l2.088 1.549.082-.105-2.01-1.65Zm-.16.205c-.051.07-.101.14-.15.213L1.755 7.7c.024-.036.05-.072.076-.108L-.257 6.043Zm-.15.213a5.308 5.308 0 0 0-.139.22l2.23 1.336a2.71 2.71 0 0 1 .071-.112L-.407 6.256Zm-.139.22c-.044.074-.087.15-.128.226l2.293 1.225c.02-.038.042-.077.065-.115l-2.23-1.336Zm-.128.226c-.04.076-.08.154-.117.232l2.35 1.112c.019-.04.039-.08.06-.119L-.674 6.702Zm-.117.232a5.294 5.294 0 0 0-.106.238l2.403.995c.016-.04.034-.081.053-.121L-.79 6.934Zm-.105.238a5.3 5.3 0 0 0-.094.243l2.448.876c.015-.042.03-.083.047-.124l-2.401-.995Zm-.094.243c-.03.082-.057.164-.082.247l2.488.755c.013-.043.027-.085.042-.127L-.99 7.415Zm-.082.247a5.29 5.29 0 0 0-.07.25l2.523.632c.01-.043.022-.085.035-.127l-2.488-.755Zm-.07.25a5.3 5.3 0 0 0-.056.254l2.55.507a2.68 2.68 0 0 1 .029-.129l-2.522-.631Zm-.056.254a5.3 5.3 0 0 0-.045.257l2.572.381c.007-.044.014-.087.023-.13l-2.55-.508Zm-.045.257a5.281 5.281 0 0 0-.031.258l2.587.255a2.69 2.69 0 0 1 .016-.132l-2.572-.381Zm-.031.258a5.296 5.296 0 0 0-.02.26l2.597.127c.002-.044.006-.088.01-.132l-2.587-.255Zm-.02.26a5.305 5.305 0 0 0-.006.26h2.6c0-.045.001-.089.003-.133l-2.597-.128Zm-.006.26c0 .086.002.173.006.26l2.597-.128A2.7 2.7 0 0 1 1.3 9.2h-2.6Zm.006.26c.005.086.011.173.02.259l2.587-.255a2.709 2.709 0 0 1-.01-.132l-2.597.127Zm.02.259c.008.086.019.172.031.258l2.572-.381a2.716 2.716 0 0 1-.016-.132l-2.587.255Zm.031.258c.013.086.028.171.045.256l2.55-.507a2.7 2.7 0 0 1-.023-.13l-2.572.381Zm.045.256c.017.085.036.17.057.254l2.522-.631a2.712 2.712 0 0 1-.03-.13l-2.55.507Zm.057.254c.02.084.044.168.07.25l2.487-.754a2.716 2.716 0 0 1-.035-.128l-2.522.632Zm.07.25c.024.084.052.166.08.248l2.449-.876a2.656 2.656 0 0 1-.042-.126l-2.488.755Zm.08.248c.03.082.061.162.094.242l2.403-.994a2.752 2.752 0 0 1-.048-.124l-2.448.876Zm.095.243c.033.08.068.159.105.237l2.35-1.111a2.716 2.716 0 0 1-.054-.122l-2.401.996Zm.105.237c.037.079.076.156.117.233l2.293-1.226c-.021-.039-.04-.078-.06-.118l-2.35 1.111Zm.117.233c.04.076.083.152.128.227l2.23-1.338a2.65 2.65 0 0 1-.065-.115l-2.293 1.226Zm.128.226c.044.074.091.148.14.22l2.16-1.445a2.655 2.655 0 0 1-.07-.111l-2.23 1.336Zm.14.22c.047.072.097.143.15.213l2.087-1.55a2.694 2.694 0 0 1-.076-.107l-2.162 1.444Zm.149.213c.052.07.105.138.16.205l2.01-1.65a2.686 2.686 0 0 1-.082-.104l-2.088 1.549Zm.16.205c.055.067.112.132.17.197L2 11.014a2.704 2.704 0 0 1-.087-.1l-2.01 1.649Zm.17.197c.058.064.118.127.18.188L2.09 11.11a2.673 2.673 0 0 1-.09-.095L.073 12.76Zm.18.188c.06.061.124.121.187.18L2.187 11.2a2.764 2.764 0 0 1-.096-.091L.252 12.948Zm.188.18c.064.058.13.114.197.17l1.65-2.01a2.65 2.65 0 0 1-.101-.087L.44 13.128Zm.197.17c.067.054.135.108.205.16l1.549-2.089a2.657 2.657 0 0 1-.105-.082l-1.65 2.01Zm.205.16c.07.051.14.101.212.149l1.446-2.161a2.78 2.78 0 0 1-.11-.077L.844 13.457Zm.213.15c.072.047.145.094.22.139l1.335-2.231a2.645 2.645 0 0 1-.111-.07l-1.444 2.161Zm.22.138c.073.045.149.088.226.129l1.225-2.293a2.69 2.69 0 0 1-.115-.066l-1.337 2.23Zm.226.129c.076.04.154.08.232.117l1.112-2.35a2.632 2.632 0 0 1-.119-.06l-1.225 2.293Zm.232.117c.079.037.158.072.237.105l.996-2.402a2.722 2.722 0 0 1-.121-.054l-1.112 2.35Zm.238.105c.08.033.161.065.243.094l.876-2.448a2.729 2.729 0 0 1-.125-.048l-.994 2.402Zm.243.094c.081.029.164.056.246.081l.756-2.488a2.787 2.787 0 0 1-.127-.041l-.875 2.448Zm.247.081c.082.025.166.048.25.07l.632-2.523a2.776 2.776 0 0 1-.128-.035l-.754 2.488Zm.25.07c.084.02.169.04.254.057l.507-2.55a2.782 2.782 0 0 1-.13-.03l-.63 2.523Zm.254.057c.085.017.17.031.257.044l.38-2.572a2.779 2.779 0 0 1-.13-.022l-.507 2.55Zm.256.044c.086.013.172.024.26.032l.253-2.588a2.587 2.587 0 0 1-.13-.016l-.383 2.572Zm.258.032a5.2 5.2 0 0 0 .26.02l.127-2.598a2.569 2.569 0 0 1-.131-.01l-.256 2.588Zm.26.02c.086.003.173.006.26.006v-2.6c-.043 0-.088-.002-.133-.004l-.126 2.597ZM4 14.5h6.4v-2.6H4v2.6Zm7.7-1.3H9.1h2.6Z" mask="url(#path-1-inside-1_1426_12806)"/></g><defs><clipPath id="clip0_1426_12806"><path d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/assets/icons/ui/discuss.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.688 12.323c.246-.538.41-1.004.493-1.399-1.068-1.004-1.72-2.344-1.72-3.816C1.462 3.99 4.39 1.462 8 1.462c3.611 0 6.538 2.528 6.538 5.646 0 3.119-2.927 5.647-6.538 5.647-.74 0-1.452-.106-2.116-.302-.518.404-1.237.762-2.156 1.075a12.364 12.364 0 0 1-.657.205l-.008.003a17.328 17.328 0 0 1-.628.169.299.299 0 0 1-.334-.436l.112-.202a15.704 15.704 0 0 0 .475-.944Zm-1.757.242a11.8 11.8 0 0 0 .605-1.264C.584 10.143 0 8.698 0 7.108 0 2.988 3.79 0 8 0s8 2.989 8 7.108c0 4.12-3.79 7.109-8 7.109-.63 0-1.245-.065-1.837-.188-.908.546-2.057.963-3.373 1.293a1.76 1.76 0 0 1-1.968-2.56l.109-.197Z"/></svg>

package/assets/icons/ui/email-open.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d_1426_12797)" clip-path="url(#clip0_1426_12797)"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.572 10.531 1.405 6.913l.746-1.065 5.167 3.619c.41.287.955.287 1.364 0l5.167-3.62.746 1.066-5.167 3.618c-.857.601-1.999.6-2.856 0ZM1.3 6.647v6.562c0 .805.653 1.458 1.459 1.458H13.24c.806 0 1.459-.653 1.459-1.458V6.647a.999.999 0 0 0-.393-.795L8.606 1.505a.999.999 0 0 0-1.212 0l-5.7 4.347a.999.999 0 0 0-.394.795Zm-1.3 0c0-.717.335-1.394.905-1.828L6.605.47a2.299 2.299 0 0 1 2.79 0l5.7 4.348c.57.434.905 1.11.905 1.828v6.562a2.759 2.759 0 0 1-2.759 2.758H2.76A2.759 2.759 0 0 1 0 13.21V6.647Z"/></g><defs><clipPath id="clip0_1426_12797"><path d="M0 0h16v16H0z"/></clipPath><filter id="filter0_d_1426_12797" x="-1.231" y="-.985" width="18.462" height="18.429" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy=".246"/><feGaussianBlur stdDeviation=".615"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1426_12797"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1426_12797" result="shape"/></filter></defs></svg>

package/assets/icons/ui/key2.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1426_12815)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.873 0C8.366 0 7.06.545 5.987 1.618c-.866.866-1.39 1.885-1.548 3.048-.135.991-.032 1.936.314 2.823L.025 12.218 0 14.157a1.16 1.16 0 0 0 1.152 1.174l3.495.021a1.16 1.16 0 0 0 1.167-1.159V13.04l.001-.001.002-.001h1.156c.64 0 1.16-.52 1.16-1.16v-1.16a5.32 5.32 0 0 0 2.663.21 5.382 5.382 0 0 0 2.963-1.537c1.074-1.073 1.619-2.38 1.619-3.886 0-1.508-.545-2.814-1.619-3.887C12.686.545 11.381 0 9.873 0ZM6.804 2.435c.859-.859 1.872-1.28 3.07-1.28 1.197 0 2.21.421 3.068 1.28.86.86 1.28 1.872 1.28 3.07 0 1.197-.42 2.21-1.28 3.069a4.228 4.228 0 0 1-2.34 1.215 4.184 4.184 0 0 1-2.592-.37l-.37-.18-.663.663v1.978l-.001.001-.002.001H5.817c-.64 0-1.16.52-1.16 1.16v1.153l-.002.002h-.001l-3.496-.022h-.002l-.001-.003.018-1.47L6.137 7.74l-.177-.37c-.373-.78-.502-1.625-.376-2.548.122-.895.52-1.687 1.22-2.387Zm3.94 3.63a1.454 1.454 0 1 0 0-2.909 1.454 1.454 0 0 0 0 2.908Z"/></g><defs><clipPath id="clip0_1426_12815"><path d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/assets/icons/ui/peoples.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6 9.167c-1.56 0-4.667.78-4.667 2.333v1.167h9.334V11.5c0-1.553-3.107-2.333-4.667-2.333Zm-3.107 2.167c.56-.387 1.914-.834 3.107-.834 1.193 0 2.547.447 3.107.834H2.893ZM6 8a2.336 2.336 0 0 0 2.333-2.333A2.336 2.336 0 0 0 6 3.334a2.336 2.336 0 0 0-2.333 2.333A2.336 2.336 0 0 0 6 8Zm0-3.333c.553 0 1 .447 1 1 0 .553-.447 1-1 1-.553 0-1-.447-1-1 0-.553.447-1 1-1Zm4.693 4.54C11.467 9.767 12 10.513 12 11.5v1.167h2.667V11.5c0-1.347-2.334-2.113-3.974-2.293ZM10 8a2.336 2.336 0 0 0 2.333-2.333A2.336 2.336 0 0 0 10 3.334c-.36 0-.693.086-1 .233.42.593.667 1.32.667 2.1S9.42 7.173 9 7.767c.307.146.64.233 1 .233Z"/></svg>

package/assets/icons/ui/security.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 .667 2 3.333v4c0 3.7 2.56 7.16 6 8 3.44-.84 6-4.3 6-8v-4L8 .667Zm0 7.326h4.667c-.354 2.747-2.187 5.194-4.667 5.96V8H3.333V4.2L8 2.126v5.867Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "123.2.1",
+  "version": "124.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -130,12 +130,14 @@
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
     "prop-types": "15.7.2",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "16.14.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "16.14.0",
     "react-hot-loader": "^4.3.11",
     "react-redux": "7.2.7",
     "react-styleguidist": "10.6.2",
-    "react-test-renderer": "16.12.0",
+    "react-test-renderer": "16.14.0",
     "redux": "3.7.2",
     "redux-mock-store": "^1.5.4",
     "remark-cli": "^8.0.1",
@@ -179,6 +181,7 @@
     "react-remove-scroll": "^2.4.0",
     "react-select": "^4.3.0",
     "react-swipeable-views": "^0.13.3",
+    "react-virtuoso": "4.12.7",
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
@@ -186,8 +189,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-flags": ">=2.10.1",
     "cozy-intent": ">=2.29.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.14.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^16.14.0"
   },
   "eslintConfig": {
     "extends": [

package/react/Filename/Readme.md

@@ -3,23 +3,25 @@
 ```jsx
 import Filename from 'cozy-ui/transpiled/react/Filename'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 const initialVariants = [
-  { midEllipsis: false, icon: false, body1Variant: false, extension: true, short: false }
+  { midEllipsis: false, icon: true, body1Variant: false, extension: true, short: false, withPath: true }
 ]
 
 ;
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
-  <Filename
-    icon={variant.icon ? FileIcon : undefined}
-    variant={variant.body1Variant ? 'body1' : undefined}
-    midEllipsis={variant.midEllipsis}
-    filename={variant.short ? "Lacinia condimentum this is the end" : "Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end"}
-    extension={variant.extension ? ".pdf" : undefined}
-  />
+    <Filename
+      icon={variant.icon ? <Icon icon={FileIcon} size={32} /> : undefined}
+      variant={variant.body1Variant ? 'body1' : undefined}
+      midEllipsis={variant.midEllipsis}
+      filename={variant.short ? "Lacinia condimentum this is the end" : "Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end"}
+      extension={variant.extension ? ".pdf" : undefined}
+      path={variant.withPath ? '/some/folder/and/subfolder' : undefined}
+    />
   )}
 </Variants>
 ```

package/react/Filename/index.jsx

@@ -1,18 +1,15 @@
+import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Fragment } from 'react'
 
-import Icon, { iconPropType } from '../Icon'
+import styles from './styles.styl'
+import { iconPropType } from '../Icon'
 import MidEllipsis from '../MidEllipsis'
 import Typography from '../Typography'
 
-const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
+const NameAndExtension = ({ filename, extension, variant, midEllipsis }) => {
   return (
-    <div className="u-flex u-flex-items-center">
-      {icon && (
-        <div className="u-mr-1">
-          <Icon icon={icon} width={30} height={30} />
-        </div>
-      )}
+    <>
       {filename && (
         <Typography variant={variant} component="span" noWrap>
           {midEllipsis ? <MidEllipsis text={filename} /> : filename}
@@ -23,7 +20,56 @@ const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
           {extension}
         </Typography>
       )}
-    </div>
+    </>
+  )
+}
+
+const Filename = ({
+  icon,
+  filename,
+  extension,
+  midEllipsis,
+  variant,
+  path
+}) => {
+  const [Wrapper, wrapperProps] = path
+    ? [Fragment, {}]
+    : ['div', { className: cx('u-flex u-flex-items-center') }]
+
+  return (
+    <Wrapper {...wrapperProps}>
+      {icon && (
+        <div
+          className={cx('u-flex u-pos-relative u-mr-1', {
+            [styles['icon-withPath']]: !!path
+          })}
+        >
+          {icon}
+        </div>
+      )}
+      {path ? (
+        <>
+          <div className="u-flex">
+            <NameAndExtension
+              filename={filename}
+              extension={extension}
+              variant={variant}
+              midEllipsis={midEllipsis}
+            />
+          </div>
+          <Typography variant="body2" component="div" noWrap>
+            {path}
+          </Typography>
+        </>
+      ) : (
+        <NameAndExtension
+          filename={filename}
+          extension={extension}
+          variant={variant}
+          midEllipsis={midEllipsis}
+        />
+      )}
+    </Wrapper>
   )
 }
 

package/react/Filename/styles.styl

@@ -0,0 +1,3 @@
+.icon-withPath
+    float left
+    top 4px

package/react/Icon/Readme.md

@@ -112,6 +112,7 @@ import CircleFilled from 'cozy-ui/transpiled/react/Icons/CircleFilled'
 import Clock from 'cozy-ui/transpiled/react/Icons/Clock'
 import ClockOutline from 'cozy-ui/transpiled/react/Icons/ClockOutline'
 import Cloud from 'cozy-ui/transpiled/react/Icons/Cloud'
+import Cloud2 from 'cozy-ui/transpiled/react/Icons/Cloud2'
 import CloudHappy from 'cozy-ui/transpiled/react/Icons/CloudHappy'
 import CloudRainbow from 'cozy-ui/transpiled/react/Icons/CloudRainbow'
 import CloudPlusOutlined from 'cozy-ui/transpiled/react/Icons/CloudPlusOutlined'
@@ -147,6 +148,7 @@ import DataControl from 'cozy-ui/transpiled/react/Icons/DataControl'
 import Debit from 'cozy-ui/transpiled/react/Icons/Debit'
 import DesktopDownload from 'cozy-ui/transpiled/react/Icons/DesktopDownload'
 import Devices from 'cozy-ui/transpiled/react/Icons/Devices'
+import Discuss from 'cozy-ui/transpiled/react/Icons/Discuss'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
 import Down from 'cozy-ui/transpiled/react/Icons/Down'
 import Download from 'cozy-ui/transpiled/react/Icons/Download'
@@ -160,6 +162,7 @@ import ElectricCar from 'cozy-ui/transpiled/react/Icons/ElectricCar'
 import ElectricScooter from 'cozy-ui/transpiled/react/Icons/ElectricScooter'
 import Email from 'cozy-ui/transpiled/react/Icons/Email'
 import EmailNotification from 'cozy-ui/transpiled/react/Icons/EmailNotification'
+import EmailOpen from 'cozy-ui/transpiled/react/Icons/EmailOpen'
 import Eu from 'cozy-ui/transpiled/react/Icons/Eu'
 import Euro from 'cozy-ui/transpiled/react/Icons/Euro'
 import Exchange from 'cozy-ui/transpiled/react/Icons/Exchange'
@@ -205,6 +208,7 @@ import Info from 'cozy-ui/transpiled/react/Icons/Info'
 import InfoOutlined from 'cozy-ui/transpiled/react/Icons/InfoOutlined'
 import Justice from 'cozy-ui/transpiled/react/Icons/Justice'
 import Key from 'cozy-ui/transpiled/react/Icons/Key'
+import Key2 from 'cozy-ui/transpiled/react/Icons/Key2'
 import LabelOutlined from 'cozy-ui/transpiled/react/Icons/LabelOutlined'
 import Laudry from 'cozy-ui/transpiled/react/Icons/Laudry'
 import Laptop from 'cozy-ui/transpiled/react/Icons/Laptop'
@@ -250,6 +254,7 @@ import Paperplane from 'cozy-ui/transpiled/react/Icons/Paperplane'
 import Password from 'cozy-ui/transpiled/react/Icons/Password'
 import Pen from 'cozy-ui/transpiled/react/Icons/Pen'
 import People from 'cozy-ui/transpiled/react/Icons/People'
+import Peoples from 'cozy-ui/transpiled/react/Icons/Peoples'
 import Percent from 'cozy-ui/transpiled/react/Icons/Percent'
 import PercentCircle from 'cozy-ui/transpiled/react/Icons/PercentCircle'
 import PersonAdd from 'cozy-ui/transpiled/react/Icons/PersonAdd'
@@ -285,6 +290,7 @@ import SadCozy from 'cozy-ui/transpiled/react/Icons/SadCozy'
 import Safe from 'cozy-ui/transpiled/react/Icons/Safe'
 import School from 'cozy-ui/transpiled/react/Icons/School'
 import Scooter from 'cozy-ui/transpiled/react/Icons/Scooter'
+import Security from 'cozy-ui/transpiled/react/Icons/Security'
 import SelectAll from 'cozy-ui/transpiled/react/Icons/SelectAll'
 import Server from 'cozy-ui/transpiled/react/Icons/Server'
 import Setting from 'cozy-ui/transpiled/react/Icons/Setting'
@@ -387,6 +393,7 @@ const icons = [
   Clock,
   ClockOutline,
   Cloud,
+  Cloud2,
   CloudHappy,
   CloudRainbow,
   CloudPlusOutlined,
@@ -422,6 +429,7 @@ const icons = [
   Debit,
   DesktopDownload,
   Devices,
+  Discuss,
   Dots,
   Down,
   Download,
@@ -434,6 +442,7 @@ const icons = [
   ElectricCar,
   ElectricScooter,
   EmailNotification,
+  EmailOpen,
   Email,
   Eu,
   Euro,
@@ -480,6 +489,7 @@ const icons = [
   Info,
   Justice,
   Key,
+  Key2,
   LabelOutlined,
   Laudry,
   Laptop,
@@ -525,6 +535,7 @@ const icons = [
   Password,
   Pen,
   People,
+  Peoples,
   Percent,
   PercentCircle,
   PersonAdd,
@@ -560,6 +571,7 @@ const icons = [
   Safe,
   School,
   Scooter,
+  Security,
   SelectAll,
   Server,
   Setting,
@@ -974,7 +986,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/Cloud2.jsx

@@ -0,0 +1,29 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cloud2.svg` to regenerate;
+import React from 'react'
+
+function SvgCloud2(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <g clipPath="url(#cloud2_svg__clip0_1426_12806)">
+        <mask id="cloud2_svg__a">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.4 13.2a5.6 5.6 0 10-5.152-7.8A3.961 3.961 0 004 5.2a3.954 3.954 0 00-1.161.172 3.968 3.968 0 00-1.525.864 4.01 4.01 0 00-1.27 2.377 3.99 3.99 0 00.63 2.81 3.955 3.955 0 00.943.99 4.029 4.029 0 001.411.668A3.92 3.92 0 004 13.2h6.4z"
+          />
+        </mask>
+        <path
+          d="M10.4 13.2v-1.3H9.1v1.3h1.3zM5.248 5.4l-.405 1.235 1.132.372.469-1.096L5.248 5.4zm-.087-.028l-.377 1.244.377-1.244zm-.189-.052l-.317 1.26.002.001.315-1.26zm-.191-.043l.254-1.275h-.001l-.253 1.275zm-.194-.034l.191-1.285-.19 1.285zm-.195-.024l.128-1.293-.127 1.293zm-.196-.014l-.064 1.298h.001l.063-1.298zm-.392 0l.063 1.298h.001l-.064-1.298zm-.196.014l-.127-1.293.127 1.293zm-.195.024l-.19-1.286.19 1.286zm-.193.034l-.254-1.275.254 1.275zm-.192.043l.316 1.261-.316-1.26zm-.189.052l.377 1.245-.377-1.245zm-.186.062L2.215 4.21l.438 1.224zm-.184.07l-.497-1.2.497 1.2zm-.18.08l.556 1.176-.555-1.176zm-.175.089l.613 1.146h.001l-.614-1.146zm-.17.096l.668 1.115-.668-1.115zm-.166.105L2.5 6.955l-.722-1.08zm-.16.113L.842 4.943l.774 1.044zm-.156.121L.638 5.103l.824 1.005zm-.148.128L.44 5.273l.873.963zm-.142.136l-.92-.92.92.92zm-.136.142L2 7.388v-.001l-.963-.873zm-.128.149l1.005.824-1.005-.824zm-.12.154l1.043.775-1.044-.775zm-.114.161l1.081.722-1.08-.722zm-.105.166l1.115.668L.57 7.144zm-.097.17l-1.146-.612 1.146.613zm-.088.176L-.79 6.934l1.175.556zm-.08.18l1.201.497-1.2-.497zm-.07.183L-.99 7.415l1.224.438zm-.114.375l-1.261-.315 1.26.315zm-.043.192l1.275.254L.077 8.42zm-.034.193l1.286.191-1.286-.19zm-.024.195l1.294.128-1.294-.128zm-.014.196l-1.299-.064 1.299.064zm0 .393l1.298-.064-1.298.064zm.014.195l-1.293.128 1.293-.128zm.024.195l-1.286.191 1.286-.19zm.034.194l-1.275.253 1.275-.253zm.043.191l-1.261.316 1.26-.316zm.052.19l1.244-.378-1.244.377zm.062.186l1.224-.438-1.224.438zm.07.183l-1.2.498 1.2-.498zm.08.18l1.175-.556-1.175.556zm.088.175l-1.146.613 1.146-.613zm.097.17l1.115-.668-1.115.669zm.105.167l1.081-.722-1.08.722zm.113.16l1.044-.774-1.044.774zm.25.304l-.964.873.963-.873zm.135.142l.92-.92H2.09l-.918.92zm.142.135l-.874.963h.001l.873-.963zm.148.129l-.824 1.004.824-1.005zm.155.12l-.774 1.044.774-1.044zm.16.113l-.722 1.08v.001l.723-1.08zm.167.105l.668-1.115-.668 1.115zm.346.185l-.556 1.176.556-1.176zm.18.08l-.499 1.2.001.001.497-1.201zm.183.07l.438-1.223-.438 1.224zm.186.062l-.378 1.244h.001l.377-1.244zm.19.053l.315-1.261-.316 1.26zm.19.043l.254-1.275-.253 1.275zm.194.033l.191-1.286-.19 1.286zm.195.024l.128-1.293h-.001l-.127 1.293zm6.792.02v1.3h1.3v-1.3h-1.3zm0 1.3a6.9 6.9 0 006.9-6.9h-2.6a4.3 4.3 0 01-4.3 4.3v2.6zm6.9-6.9A6.9 6.9 0 0010.4.7v2.6a4.3 4.3 0 014.3 4.3h2.6zM10.4.7a6.902 6.902 0 00-6.347 4.189l2.39 1.022A4.302 4.302 0 0110.4 3.3V.7zM5.654 4.165a5.232 5.232 0 00-.116-.037l-.753 2.489.058.018.81-2.47zm-.115-.036a5.246 5.246 0 00-.251-.07l-.631 2.522.127.035.755-2.487zm-.25-.07a5.279 5.279 0 00-.254-.057l-.509 2.55c.045.009.088.018.13.029l.633-2.522zm-.255-.057a5.323 5.323 0 00-.256-.044l-.382 2.571c.044.007.088.014.131.023l.507-2.55zm-.257-.045a5.355 5.355 0 00-.257-.031l-.256 2.587c.044.004.089.01.133.016l.38-2.572zm-.258-.031a5.329 5.329 0 00-.26-.02l-.126 2.597.133.01.253-2.587zm-.258-.02A5.27 5.27 0 004 3.9v2.6l.131.003.129-2.596zM4 3.9a5.27 5.27 0 00-.262.007l.13 2.596a2.83 2.83 0 01.131-.003V3.9zm-.26.007c-.088.004-.174.01-.26.019l.254 2.587.132-.01-.126-2.596zm-.26.019a5.347 5.347 0 00-.258.031l.38 2.573c.045-.007.089-.013.133-.017L3.48 3.926zm-.259.032c-.085.012-.17.027-.256.044l.507 2.55.131-.023-.382-2.571zm-.257.044a5.291 5.291 0 00-.254.057l.634 2.522.13-.03-.51-2.549zm-.252.057a5.247 5.247 0 00-.252.07l.756 2.487.127-.035-.631-2.522zm-.25.07a5.275 5.275 0 00-.248.081l.876 2.448c.041-.015.083-.029.125-.041l-.754-2.489zm-.248.081c-.083.03-.163.06-.243.093l.994 2.403c.042-.017.083-.033.125-.048L2.215 4.21zm-.244.094a5.32 5.32 0 00-.237.105l1.112 2.35.121-.053-.996-2.402zm-.236.105a5.185 5.185 0 00-.234.117L2.728 6.82l.117-.06-1.11-2.35zm-.233.117a5.29 5.29 0 00-.227.128l1.337 2.23.115-.065-1.225-2.293zm-.227.128a5.26 5.26 0 00-.22.14L2.5 6.954l.111-.07-1.337-2.23zm-.22.14a5.289 5.289 0 00-.212.15l1.549 2.088a2.69 2.69 0 01.108-.077L1.056 4.793zm-.212.15a5.3 5.3 0 00-.205.16l1.65 2.01a2.71 2.71 0 01.104-.082L.842 4.943zm-.205.16a5.328 5.328 0 00-.197.169L2.187 7.2c.033-.03.066-.06.1-.087l-1.65-2.01zm-.197.17a5.316 5.316 0 00-.188.178l1.838 1.84a2.72 2.72 0 01.096-.092L.44 5.273zm-.189.179a5.313 5.313 0 00-.18.188L2 7.387c.03-.033.06-.065.091-.096L.252 5.453zm-.179.188c-.058.064-.115.13-.17.197l2.01 1.649.086-.1L.073 5.642zm-.17.197a5.299 5.299 0 00-.16.205L1.83 7.592l.082-.105-2.01-1.65zm-.16.205c-.051.07-.101.14-.15.213L1.755 7.7c.024-.036.05-.072.076-.108L-.257 6.043zm-.15.213a5.308 5.308 0 00-.139.22l2.23 1.336a2.71 2.71 0 01.071-.112L-.407 6.256zm-.139.22c-.044.074-.087.15-.128.226l2.293 1.225c.02-.038.042-.077.065-.115l-2.23-1.336zm-.128.226c-.04.076-.08.154-.117.232l2.35 1.112c.019-.04.039-.08.06-.119L-.674 6.702zm-.117.232a5.294 5.294 0 00-.106.238l2.403.995c.016-.04.034-.081.053-.121L-.79 6.934zm-.105.238a5.3 5.3 0 00-.094.243l2.448.876c.015-.042.03-.083.047-.124l-2.401-.995zm-.094.243c-.03.082-.057.164-.082.247l2.488.755c.013-.043.027-.085.042-.127L-.99 7.415zm-.082.247a5.29 5.29 0 00-.07.25l2.523.632c.01-.043.022-.085.035-.127l-2.488-.755zm-.07.25a5.3 5.3 0 00-.056.254l2.55.507a2.68 2.68 0 01.029-.129l-2.522-.631zm-.056.254a5.3 5.3 0 00-.045.257l2.572.381a2.71 2.71 0 01.023-.13l-2.55-.508zm-.045.257a5.281 5.281 0 00-.031.258l2.587.255a2.69 2.69 0 01.016-.132l-2.572-.381zm-.031.258a5.296 5.296 0 00-.02.26l2.597.127c.002-.044.006-.088.01-.132l-2.587-.255zm-.02.26a5.305 5.305 0 00-.006.26h2.6c0-.045.001-.089.003-.133l-2.597-.128zm-.006.26c0 .086.002.173.006.26l2.597-.128A2.7 2.7 0 011.3 9.2h-2.6zm.006.26c.005.086.011.173.02.259l2.587-.255a2.709 2.709 0 01-.01-.132l-2.597.127zm.02.259c.008.086.019.172.031.258l2.572-.381a2.716 2.716 0 01-.016-.132l-2.587.255zm.031.258c.013.086.028.171.045.256l2.55-.507a2.7 2.7 0 01-.023-.13l-2.572.381zm.045.256c.017.085.036.17.057.254l2.522-.631a2.712 2.712 0 01-.03-.13l-2.55.507zm.057.254c.02.084.044.168.07.25l2.487-.754a2.716 2.716 0 01-.035-.128l-2.522.632zm.07.25c.024.084.052.166.08.248l2.449-.876a2.656 2.656 0 01-.042-.126l-2.488.755zm.08.248c.03.082.061.162.094.242l2.403-.994a2.752 2.752 0 01-.048-.124l-2.448.876zm.095.243c.033.08.068.159.105.237l2.35-1.111a2.716 2.716 0 01-.054-.122l-2.401.996zm.105.237c.037.079.076.156.117.233l2.293-1.226c-.021-.039-.04-.078-.06-.118l-2.35 1.111zm.117.233c.04.076.083.152.128.227l2.23-1.338a2.65 2.65 0 01-.065-.115l-2.293 1.226zm.128.226c.044.074.091.148.14.22l2.16-1.445a2.655 2.655 0 01-.07-.111l-2.23 1.336zm.14.22c.047.072.097.143.15.213l2.087-1.55a2.694 2.694 0 01-.076-.107l-2.162 1.444zm.149.213c.052.07.105.138.16.205l2.01-1.65a2.686 2.686 0 01-.082-.104l-2.088 1.549zm.16.205c.055.067.112.132.17.197L2 11.014a2.704 2.704 0 01-.087-.1l-2.01 1.649zm.17.197c.058.064.118.127.18.188L2.09 11.11a2.673 2.673 0 01-.09-.095L.073 12.76zm.18.188c.06.061.124.121.187.18L2.187 11.2a2.764 2.764 0 01-.096-.091L.252 12.948zm.188.18c.064.058.13.114.197.17l1.65-2.01a2.65 2.65 0 01-.101-.087L.44 13.128zm.197.17c.067.054.135.108.205.16l1.549-2.089a2.657 2.657 0 01-.105-.082l-1.65 2.01zm.205.16c.07.051.14.101.212.149L2.5 11.446a2.78 2.78 0 01-.11-.077L.844 13.457zm.213.15c.072.047.145.094.22.139l1.335-2.231a2.645 2.645 0 01-.111-.07l-1.444 2.161zm.22.138c.073.045.149.088.226.129l1.225-2.293a2.69 2.69 0 01-.115-.066l-1.337 2.23zm.226.129c.076.04.154.08.232.117l1.112-2.35a2.632 2.632 0 01-.119-.06l-1.225 2.293zm.232.117c.079.037.158.072.237.105l.996-2.402a2.722 2.722 0 01-.121-.054l-1.112 2.35zm.238.105c.08.033.161.065.243.094l.876-2.448a2.729 2.729 0 01-.125-.048l-.994 2.402zm.243.094c.081.029.164.056.246.081l.756-2.488a2.787 2.787 0 01-.127-.041l-.875 2.448zm.247.081c.082.025.166.048.25.07l.632-2.523a2.776 2.776 0 01-.128-.035l-.754 2.488zm.25.07c.084.02.169.04.254.057l.507-2.55a2.782 2.782 0 01-.13-.03l-.63 2.523zm.254.057c.085.017.17.031.257.044l.38-2.572a2.779 2.779 0 01-.13-.022l-.507 2.55zm.256.044c.086.013.172.024.26.032l.253-2.588a2.587 2.587 0 01-.13-.016l-.383 2.572zm.258.032a5.2 5.2 0 00.26.02l.127-2.598a2.569 2.569 0 01-.131-.01l-.256 2.588zm.26.02c.086.003.173.006.26.006v-2.6c-.043 0-.088-.002-.133-.004l-.126 2.597zM4 14.5h6.4v-2.6H4v2.6zm7.7-1.3H9.1h2.6z"
+          mask="url(#cloud2_svg__a)"
+        />
+      </g>
+      <defs>
+        <clipPath id="cloud2_svg__clip0_1426_12806">
+          <path d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgCloud2

package/react/Icons/Discuss.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/discuss.svg` to regenerate;
+import React from 'react'
+
+function SvgDiscuss(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.688 12.323c.246-.538.41-1.004.493-1.399-1.068-1.004-1.72-2.344-1.72-3.816C1.462 3.99 4.39 1.462 8 1.462c3.611 0 6.538 2.528 6.538 5.646 0 3.119-2.927 5.647-6.538 5.647-.74 0-1.452-.106-2.116-.302-.518.404-1.237.762-2.156 1.075a12.364 12.364 0 01-.657.205l-.008.003a17.328 17.328 0 01-.628.169.299.299 0 01-.334-.436l.112-.202a15.704 15.704 0 00.475-.944zm-1.757.242a11.8 11.8 0 00.605-1.264C.584 10.143 0 8.698 0 7.108 0 2.988 3.79 0 8 0s8 2.989 8 7.108c0 4.12-3.79 7.109-8 7.109-.63 0-1.245-.065-1.837-.188-.908.546-2.057.963-3.373 1.293a1.76 1.76 0 01-1.968-2.56l.109-.197z"
+      />
+    </svg>
+  )
+}
+
+export default SvgDiscuss

package/react/Icons/EmailOpen.jsx

@@ -0,0 +1,55 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/email-open.svg` to regenerate;
+import React from 'react'
+
+function SvgEmailOpen(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <g
+        filter="url(#email-open_svg__filter0_d_1426_12797)"
+        clipPath="url(#email-open_svg__clip0_1426_12797)"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.572 10.531L1.405 6.913l.746-1.065 5.167 3.619c.41.287.955.287 1.364 0l5.167-3.62.746 1.066-5.167 3.618a2.49 2.49 0 01-2.856 0zM1.3 6.647v6.562c0 .805.653 1.458 1.459 1.458H13.24c.806 0 1.459-.653 1.459-1.458V6.647a.999.999 0 00-.393-.795l-5.7-4.347a.999.999 0 00-1.212 0l-5.7 4.347a.999.999 0 00-.394.795zm-1.3 0c0-.717.335-1.394.905-1.828L6.605.47a2.299 2.299 0 012.79 0l5.7 4.348c.57.434.905 1.11.905 1.828v6.562a2.759 2.759 0 01-2.759 2.758H2.76A2.759 2.759 0 010 13.21V6.647z"
+        />
+      </g>
+      <defs>
+        <clipPath id="email-open_svg__clip0_1426_12797">
+          <path d="M0 0h16v16H0z" />
+        </clipPath>
+        <filter
+          id="email-open_svg__filter0_d_1426_12797"
+          x={-1.231}
+          y={-0.985}
+          width={18.462}
+          height={18.429}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy={0.246} />
+          <feGaussianBlur stdDeviation={0.615} />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1426_12797"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1426_12797"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgEmailOpen

package/react/Icons/Key2.jsx

@@ -0,0 +1,23 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/key2.svg` to regenerate;
+import React from 'react'
+
+function SvgKey2(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <g clipPath="url(#key2_svg__clip0_1426_12815)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.873 0C8.366 0 7.06.545 5.987 1.618c-.866.866-1.39 1.885-1.548 3.048-.135.991-.032 1.936.314 2.823L.025 12.218 0 14.157a1.16 1.16 0 001.152 1.174l3.495.021a1.16 1.16 0 001.167-1.159V13.04l.001-.001.002-.001h1.156c.64 0 1.16-.52 1.16-1.16v-1.16a5.32 5.32 0 002.663.21 5.382 5.382 0 002.963-1.537c1.074-1.073 1.619-2.38 1.619-3.886 0-1.508-.545-2.814-1.619-3.887C12.686.545 11.381 0 9.873 0zM6.804 2.435c.859-.859 1.872-1.28 3.07-1.28 1.197 0 2.21.421 3.068 1.28.86.86 1.28 1.872 1.28 3.07 0 1.197-.42 2.21-1.28 3.069a4.228 4.228 0 01-2.34 1.215 4.184 4.184 0 01-2.592-.37l-.37-.18-.663.663v1.978l-.001.001-.002.001H5.817c-.64 0-1.16.52-1.16 1.16v1.153l-.002.002h-.001l-3.496-.022h-.002l-.001-.003.018-1.47L6.137 7.74l-.177-.37c-.373-.78-.502-1.625-.376-2.548.122-.895.52-1.687 1.22-2.387zm3.94 3.63a1.454 1.454 0 100-2.909 1.454 1.454 0 000 2.908z"
+        />
+      </g>
+      <defs>
+        <clipPath id="key2_svg__clip0_1426_12815">
+          <path d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgKey2

package/react/Icons/Peoples.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/peoples.svg` to regenerate;
+import React from 'react'
+
+function SvgPeoples(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M6 9.167c-1.56 0-4.667.78-4.667 2.333v1.167h9.334V11.5c0-1.553-3.107-2.333-4.667-2.333zm-3.107 2.167c.56-.387 1.914-.834 3.107-.834 1.193 0 2.547.447 3.107.834H2.893zM6 8a2.336 2.336 0 002.333-2.333A2.336 2.336 0 006 3.334a2.336 2.336 0 00-2.333 2.333A2.336 2.336 0 006 8zm0-3.333a1 1 0 110 2 1 1 0 110-2zm4.693 4.54C11.467 9.767 12 10.513 12 11.5v1.167h2.667V11.5c0-1.347-2.334-2.113-3.974-2.293zM10 8a2.336 2.336 0 002.333-2.333A2.336 2.336 0 0010 3.334c-.36 0-.693.086-1 .233.42.593.667 1.32.667 2.1S9.42 7.173 9 7.767c.307.146.64.233 1 .233z" />
+    </svg>
+  )
+}
+
+export default SvgPeoples

package/react/Icons/Security.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/security.svg` to regenerate;
+import React from 'react'
+
+function SvgSecurity(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M8 .667L2 3.333v4c0 3.7 2.56 7.16 6 8 3.44-.84 6-4.3 6-8v-4L8 .667zm0 7.326h4.667c-.354 2.747-2.187 5.194-4.667 5.96V8H3.333V4.2L8 2.126v5.867z" />
+    </svg>
+  )
+}
+
+export default SvgSecurity

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -506,6 +506,66 @@ export const makeLightNormalOverrides = theme => ({
       paddingRight: 16
     }
   },
+  MuiTableHead: {
+    root: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  MuiTableRow: {
+    root: {
+      '&.disabled': {
+        cursor: 'pointer',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }
+    }
+  },
+  MuiTableCell: {
+    root: {
+      padding: '8px 4px'
+    },
+    head: {
+      ...theme.typography.subtitle2,
+      color: theme.palette.text.secondary,
+      lineHeight: 1.292
+    },
+    body: {
+      color: theme.palette.text.secondary,
+      '&.sortable': {
+        '&$paddingNone': {
+          '&$alignLeft': {
+            paddingLeft: '12px'
+          },
+          '&$alignRight': {
+            paddingRight: '12px'
+          }
+        },
+        '&$alignLeft': {
+          paddingLeft: '16px'
+        },
+        '&$alignRight': {
+          paddingRight: '16px'
+        }
+      }
+    },
+    stickyHeader: {
+      backgroundColor: theme.palette.background.paper
+    }
+  },
+  MuiTableSortLabel: {
+    root: {
+      padding: '8px 12px',
+      color: theme.palette.text.secondary,
+      '&:hover': {
+        color: theme.palette.text.primary,
+        borderRadius: 999,
+        backgroundColor: theme.palette.action.hover
+      }
+    },
+    icon: {
+      fontSize: 14
+    }
+  },
   MuiFormLabel: {
     root: {
       color: theme.palette.text.secondary,