cozy-ui 77.10.0 → 78.1.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [78.1.0](https://github.com/cozy/cozy-ui/compare/v78.0.0...v78.1.0) (2022-12-08)
+
+
+### Features
+
+* Add FileTypeBankingAccount, Contacts, Papers and Store illustration ([4d4a1b8](https://github.com/cozy/cozy-ui/commit/4d4a1b8))
+
+# [78.0.0](https://github.com/cozy/cozy-ui/compare/v77.10.0...v78.0.0) (2022-12-07)
+
+
+### Bug Fixes
+
+* Require `file` prop in `Qualification` ([c29f5c7](https://github.com/cozy/cozy-ui/commit/c29f5c7))
+
+
+### Features
+
+* Add an `ExpirationAlert` component ([9793851](https://github.com/cozy/cozy-ui/commit/9793851))
+* Add an `ExpirationAnnotation` component ([50109bc](https://github.com/cozy/cozy-ui/commit/50109bc))
+* Add expiration annotations to date qualifications ([a48496d](https://github.com/cozy/cozy-ui/commit/a48496d))
+* Add the expiration alert to the qualification block ([651be00](https://github.com/cozy/cozy-ui/commit/651be00))
+* Update `cozy-client` to 34.4.0 ([6bdaa34](https://github.com/cozy/cozy-ui/commit/6bdaa34))
+
+
+### BREAKING CHANGES
+
+* You need to update `cozy-client` to `>34.4.0`.
+
 # [77.10.0](https://github.com/cozy/cozy-ui/compare/v77.9.2...v77.10.0) (2022-12-05)
 
 

package/assets/icons/illus/contacts.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M32 25.995A1.997 1.997 0 0 1 30.002 28H24v-2.499c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H11v-2.5c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H1.998A2.002 2.002 0 0 1 0 25.994V6.005C0 4.897.889 4 2.001 4h27.997C31.104 4 32 4.897 32 6.005v19.99Z" fill="#FFD799"/><path d="M12 15.5c1.5 0 3 2.25 3 3l-.004.393c-.02.598-.128 1.107-.746 1.107H3.75C3 20 3 19.25 3 18.5s1.5-3 3-3 .75.75 3 .75 1.5-.75 3-.75ZM28 18v1H17v-1h11Zm0-3v1H17v-1h11ZM9 8c1.657 0 3 1.511 3 3.375s-1.343 3.375-3 3.375-3-1.51-3-3.375C6 9.511 7.343 8 9 8Zm19 4v1H17v-1h11Zm-5-3v1h-6V9h6Z" fill="#FF9300"/></g></svg>

package/assets/icons/illus/file-type-banking-account.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 5.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C28.48 2 27.92 2 26.8 2H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 3.52 2 4.08 2 5.2v14.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 23 4.08 23 5.2 23h21.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C30 21.48 30 20.92 30 19.8V5.2Z" fill="#10C016"/><path d="M2 4a2 2 0 0 0 1.999 2H28.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C32 7.52 32 8.08 32 9.2v17.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C30.48 30 29.92 30 28.8 30H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 28.48 0 27.92 0 26.8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 2 2.08 2 3.2 2H4a2 2 0 0 0-2 2Z" fill="#9FE6A2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11a2 2 0 0 1-2 2h-9a5 5 0 0 0 0 10h8.793A2.207 2.207 0 0 0 32 20.793V11Zm-11 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" fill="#10C016"/></svg>

package/assets/icons/illus/papers.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.002 28A1.997 1.997 0 0 0 32 25.995V6.005A2.003 2.003 0 0 0 29.998 4H2.001A1.998 1.998 0 0 0 0 6.005v19.99C0 27.102.895 28 1.998 28h28.004Z" fill="#E6D5FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 20.5c0-.75-1.5-3-3-3-.674 0-.894.152-1.136.319-.296.204-.625.431-1.864.431s-1.568-.227-1.864-.431C6.894 17.651 6.674 17.5 6 17.5c-1.5 0-3 2.25-3 3s0 1.5.75 1.5h10.5c.618 0 .727-.509.746-1.107L15 20.5Zm-3-7.125C12 11.511 10.657 10 9 10s-3 1.511-3 3.375 1.343 3.375 3 3.375 3-1.51 3-3.375ZM18 11a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2h-9Zm0 4a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2h-9Zm-1 5a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1Z" fill="#9C59FF"/></svg>

package/assets/icons/illus/store.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 19v8h10v-8h14v12h-3V20h-7v11H2V19h4ZM30 2v6H2V2h28Z" fill="#FDD5D5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 18.99C0 19.548.453 20 .993 20h30.014A.996.996 0 0 0 32 18.99v-1.98c0-.558-.097-1.445-.218-1.99L30 7H2L.218 15.02C.098 15.56 0 16.442 0 17.01v1.98Z" fill="#F52D2D"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "77.10.0",
+  "version": "78.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -90,7 +90,7 @@
     "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^33.0.0",
+    "cozy-client": "^34.4.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
     "cozy-harvest-lib": "^6.7.3",
@@ -179,7 +179,7 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=33.0.0",
+    "cozy-client": ">=34.4.0",
     "cozy-device-helper": "^2.0.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",

package/react/Icon/Readme.md

@@ -565,6 +565,10 @@ import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
 import FileTypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import FileTypeVideoIcon from 'cozy-ui/transpiled/react/Icons/FileTypeVideo'
 import FileTypeZipIcon from 'cozy-ui/transpiled/react/Icons/FileTypeZip'
+import FileTypeBankingAccountIcon from 'cozy-ui/transpiled/react/Icons/FileTypeBankingAccount'
+import ContactsIcon from 'cozy-ui/transpiled/react/Icons/Contacts'
+import PapersIcon from 'cozy-ui/transpiled/react/Icons/Papers'
+import StoreIcon from 'cozy-ui/transpiled/react/Icons/Store'
 import ForbiddenSignIcon from 'cozy-ui/transpiled/react/Icons/ForbiddenSign'
 import GoogleIcon from 'cozy-ui/transpiled/react/Icons/Google'
 import LogoutLargeIcon from 'cozy-ui/transpiled/react/Icons/LogoutLarge'
@@ -594,6 +598,10 @@ const icons = [
   FileTypeTextIcon,
   FileTypeVideoIcon,
   FileTypeZipIcon,
+  FileTypeBankingAccountIcon,
+  ContactsIcon,
+  PapersIcon,
+  StoreIcon,
   ForbiddenSignIcon,
   GoogleIcon,
   LogoutLargeIcon,
@@ -641,7 +649,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 
-const availableIcons = ['cozy', 'cloud-broken', 'cozy-logo', 'device-laptop', 'device-phone', 'device-tablet', 'device-browser', 'file-type-audio', 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'logout-large', 'top-select', 'bottom-select', 'check-white', 'dash-white', 'keychain']
+const availableIcons = ['cozy', 'cloud-broken', 'cozy-logo', 'device-laptop', 'device-phone', 'device-tablet', 'device-browser', 'file-type-audio', 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'file-type-banking-account' , 'forbidden-sign', 'google', 'logout-large', 'top-select', 'bottom-select', 'check-white', 'dash-white', 'keychain', 'contacts', 'papers', 'store']
 
 ;
 

package/react/Icon/icons-sprite.js

@@ -27,7 +27,7 @@ module.exports = `<svg><defs>
             <path fill="#297EF1" d="M22.052 19.17c.44.217.621.75.405 1.19-1.201 2.435-3.707 4.032-6.457 4.032-2.103 0-4.04-.962-5.373-2.471-.091.394-.427.693-.85.693-.49 0-.888-.398-.888-.889V18.17c0-.056.014-.106.023-.158.005-.024.004-.048.01-.071.028-.106.072-.201.132-.285l.022-.024c.056-.073.124-.134.198-.186.022-.016.044-.03.068-.043.184-.104.399-.142.613-.098.024.005.047.012.07.018.077.022.149.057.22.102.024.015.048.026.071.043.01.008.021.011.031.02l2.667 2.221c.377.314.427.875.113 1.252-.166.2-.4.301-.64.313.96.832 2.198 1.34 3.513 1.34 2.065 0 3.958-1.206 4.862-3.04.217-.44.75-.621 1.19-.404zm1.031-2.589c-.003.018-.002.036-.007.053-.03.105-.077.198-.138.28-.011.016-.024.026-.035.039-.055.067-.12.124-.19.171-.023.016-.043.03-.067.043-.092.05-.191.087-.295.103-.003 0-.005.002-.007.003-.008 0-.015-.003-.023-.002-.096.012-.194.004-.292-.018-.024-.005-.046-.01-.07-.018-.077-.024-.153-.062-.225-.11-.02-.014-.042-.023-.06-.038-.007-.005-.015-.006-.02-.012l-2.668-2.223c-.376-.313-.428-.874-.113-1.251.183-.22.449-.314.713-.305-.96-.838-2.22-1.348-3.586-1.348-2.103 0-4.007 1.213-4.89 3.06-.21.444-.741.631-1.184.42-.443-.211-.631-.742-.42-1.184C10.682 11.78 13.21 10.17 16 10.17c2.127 0 4.061.93 5.385 2.412.11-.364.436-.634.837-.634.49 0 .889.398.889.888v3.556c0 .068-.014.128-.028.19z"/>
         </g>
     </g>
-</symbol><symbol id="cozy-logo" viewBox="0 0 101 30">
+</symbol><symbol id="contacts" viewBox="0 0 32 32"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M32 25.995A1.997 1.997 0 0 1 30.002 28H24v-2.499c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H11v-2.5c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H1.998A2.002 2.002 0 0 1 0 25.994V6.005C0 4.897.889 4 2.001 4h27.997C31.104 4 32 4.897 32 6.005v19.99Z" fill="#FFD799"/><path d="M12 15.5c1.5 0 3 2.25 3 3l-.004.393c-.02.598-.128 1.107-.746 1.107H3.75C3 20 3 19.25 3 18.5s1.5-3 3-3 .75.75 3 .75 1.5-.75 3-.75ZM28 18v1H17v-1h11Zm0-3v1H17v-1h11ZM9 8c1.657 0 3 1.511 3 3.375s-1.343 3.375-3 3.375-3-1.51-3-3.375C6 9.511 7.343 8 9 8Zm19 4v1H17v-1h11Zm-5-3v1h-6V9h6Z" fill="#FF9300"/></g></symbol><symbol id="cozy-logo" viewBox="0 0 101 30">
     <g fill="none" fill-rule="evenodd">
         <path d="M0-5h101v40H0z"/>
         <path fill="#297EF1" d="M29.408 30H10.592C4.75 30 0 25.317 0 19.56c0-2.745 1.072-5.338 3.02-7.3a10.589 10.589 0 0 1 6.31-3.064 10.316 10.316 0 0 1 3.11-6.22A10.607 10.607 0 0 1 19.847 0a10.61 10.61 0 0 1 7.406 2.976 10.324 10.324 0 0 1 3.107 6.187C35.756 9.64 40 14.121 40 19.561 40 25.317 35.247 30 29.408 30zm-.226-2.5h.079c4.543 0 8.239-3.612 8.239-8.05 0-4.438-3.696-8.048-8.239-8.048h-.083a1.08 1.08 0 0 1-1.092-1.043C27.983 6.025 24.289 2.5 19.85 2.5c-4.44 0-8.135 3.526-8.237 7.86a1.08 1.08 0 0 1-1.068 1.044c-4.436.1-8.045 3.709-8.045 8.047 0 4.438 3.696 8.049 8.239 8.049h.067l.026-.002c.024 0 .047 0 .07.002H29.183zm-3.127-8.333v-.002c.199.12.255.366.125.55a.453.453 0 0 1-.594.116 2.329 2.329 0 0 1-.485-.387c-1.448 1.204-3.28 1.806-5.11 1.806-1.827 0-3.654-.6-5.1-1.798a2.31 2.31 0 0 1-.476.378.455.455 0 0 1-.595-.115c-.13-.183-.074-.428.125-.549.732-.438.767-1.247.767-1.279.008-.217.206-.393.44-.386.235.005.423.185.419.402 0 .03-.013.414-.214.866 2.603 2.255 6.684 2.252 9.282-.014-.196-.446-.208-.824-.21-.853-.005-.217.184-.398.422-.402.238-.003.432.169.437.388.002.035.038.84.767 1.279zm33.222-4.905a1.405 1.405 0 0 1-.227.227.516.516 0 0 1-.319.085.756.756 0 0 1-.436-.162 5.113 5.113 0 0 0-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338a3.179 3.179 0 0 0-1.19.962c-.316.416-.556.923-.721 1.521a7.592 7.592 0 0 0-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435.234-.156.429-.301.585-.436.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 0 1-1.02.949c-.378.26-.778.472-1.203.637a6.792 6.792 0 0 1-1.332.364 8.488 8.488 0 0 1-1.411.117 5.846 5.846 0 0 1-2.308-.455 5.228 5.228 0 0 1-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139-.303-.845-.455-1.804-.455-2.879 0-.98.136-1.885.41-2.717a6.046 6.046 0 0 1 1.209-2.151 5.588 5.588 0 0 1 1.969-1.418c.78-.342 1.673-.513 2.678-.513.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zm8.814-2.678c.97 0 1.848.158 2.633.474a5.489 5.489 0 0 1 2.001 1.366c.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 0 1-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 0 1-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 0 1 1.28-2.146 5.55 5.55 0 0 1 2.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM86.46 12.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V25H76.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916v-1.989h9.854v1.066zm14.144-1.066l-7.332 17.043a1.07 1.07 0 0 1-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L87.5 11.792h2.21c.217 0 .386.052.507.156a.906.906 0 0 1 .26.351l3.354 7.93c.07.2.136.4.201.605a6.6 6.6 0 0 1 .163.604 14.609 14.609 0 0 1 .416-1.222l3.237-7.917a.84.84 0 0 1 .286-.364.729.729 0 0 1 .442-.143h2.028z"/>
@@ -62,7 +62,7 @@ module.exports = `<svg><defs>
     </g>
 </symbol><symbol id="dots-white" viewBox="0 0 16 16">
   <path fill="#FFFFFF" fill-rule="evenodd" d="M34,74 C35.1045695,74 36,73.1045695 36,72 C36,70.8954305 35.1045695,70 34,70 C32.8954305,70 32,70.8954305 32,72 C32,73.1045695 32.8954305,74 34,74 Z M46,74 C47.1045695,74 48,73.1045695 48,72 C48,70.8954305 47.1045695,70 46,70 C44.8954305,70 44,70.8954305 44,72 C44,73.1045695 44.8954305,74 46,74 Z M40,74 C41.1045695,74 42,73.1045695 42,72 C42,70.8954305 41.1045695,70 40,70 C38.8954305,70 38,70.8954305 38,72 C38,73.1045695 38.8954305,74 40,74 Z" transform="translate(-32 -64)"/>
-</symbol><symbol id="file-type-audio" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><rect width="30" height="30" fill="#ACF6F7" rx="2"/><path fill="#0CCBD0" d="M8 19.998c-1.105 0-2 .888-2 2 0 1.105.898 2 1.998 2H9c1.657 0 3-1.35 3-2.997v-7.679a.63.63 0 0 1 .492-.601l6.016-1.129c.272-.05.492.124.492.418v5.478c0 .282-.215.51-.49.51H17c-1.105 0-2 .904-2 1.997v-.179a2 2 0 0 0 1.998 1.997H18c1.657 0 3-1.349 3-2.993V7c0-.554-.445-.921-.976-.825L10.976 7.82C10.437 7.918 10 8.454 10 9v10.498c0 .276-.215.5-.49.5H8z"/></g></symbol><symbol id="file-type-bin" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#A3ACB8" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/><path fill="#4F5B69" d="M7 15.568c0-.597.06-1.12.178-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.221 1.001-.221.786 0 1.391.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12-.215.298-.474.521-.776.669a2.265 2.265 0 0 1-1.006.22c-.792 0-1.397-.306-1.815-.918C7.209 17.623 7 16.734 7 15.568zm3.705 0a9.152 9.152 0 0 0-.019-.58l-2.292 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 0 0 .018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.322 1.03-.322 1.882zm5.35 0c0-.597.06-1.12.179-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.221 1.001-.221.786 0 1.39.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12-.215.298-.474.521-.777.669a2.265 2.265 0 0 1-1.005.22c-.792 0-1.397-.306-1.815-.918-.418-.613-.627-1.502-.627-2.668zm3.706 0a9.153 9.153 0 0 0-.02-.58l-2.291 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.218-.4.328-1.035.328-1.906zm-2.508 0a7.965 7.965 0 0 0 .02.55l2.282-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.323 1.03-.323 1.882zm5.988 2.368h1.431v-4.295l-1.235.993-.561-.786 2.133-1.71h.823v5.798h1.404v1.081h-3.995v-1.08zM7 24.413c0-.596.06-1.119.178-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.22 1.001-.22.786 0 1.391.29 1.815.869.424.58.636 1.48.636 2.698 0 .603-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12-.215.299-.474.521-.776.669A2.265 2.265 0 0 1 9.442 28c-.792 0-1.397-.306-1.815-.919C7.209 26.468 7 25.58 7 24.413zm3.705 0a9.152 9.152 0 0 0-.019-.58l-2.292 2.192c.193.596.546.894 1.057.894.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 0 0 .018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.322 1.03-.322 1.882zm5.987 2.368h1.431v-4.295l-1.235.993-.56-.786 2.132-1.71h.824v5.798h1.403v1.081h-3.995v-1.08zm5.913-2.368c0-.596.059-1.119.177-1.568.119-.449.286-.82.501-1.115.215-.295.472-.516.772-.664.3-.147.633-.22 1-.22.787 0 1.392.29 1.816.869.424.58.636 1.48.636 2.698 0 .603-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12-.215.299-.474.521-.777.669A2.265 2.265 0 0 1 22.54 28c-.793 0-1.398-.306-1.815-.919-.418-.613-.627-1.502-.627-2.668zm3.704 0a9.152 9.152 0 0 0-.018-.58l-2.292 2.192c.193.596.545.894 1.057.894.399 0 .708-.2.926-.6.218-.4.327-1.035.327-1.906zm-2.507 0a7.965 7.965 0 0 0 .019.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.323 1.03-.323 1.882z"/></g></symbol><symbol id="file-type-code" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#E6D5FF" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#9C59FF" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/><g stroke="#9C59FF" stroke-width="2"><path stroke-linejoin="round" d="M12 22l-4-4 4-4M20 22l4-4-4-4"/><path d="M14 25l4-14"/></g></g></symbol><symbol id="file-type-files" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#A3ACB8" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/></g></symbol><symbol id="file-type-folder" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(0 2)"><rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/><path fill="#197BFF" d="M0 .99C0 .445.45 0 1.007 0h11.986c.556 0 1.32.313 1.718.71l.578.58c.393.392 1.156.71 1.712.71h13.005C31.107 2 32 2.895 32 4H17c-.552 0-1.313.313-1.71.71l-.58.58c-.392.392-1.16.71-1.717.71H1.007A1.004 1.004 0 0 1 0 5.01V.99z"/></g></symbol><symbol id="file-type-image" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(0 3)"><rect width="32" height="26" fill="#8EE39B" rx="2"/><path fill="#1EC737" d="M0 20l6.29-6.29a.999.999 0 0 1 1.416-.004L11 17l8.294-8.294a1.003 1.003 0 0 1 1.412 0L32 20v4.002C32 25.106 31.11 26 29.998 26H2.002A2.002 2.002 0 0 1 0 24.002V20z"/><circle cx="8" cy="7" r="3" fill="#FFF"/><path stroke="#8EE39B" d="M11 16l-5.5 5.5L11 16z" stroke-linecap="round" stroke-linejoin="round"/></g></symbol><symbol id="file-type-note" viewBox="0 0 32 32"><path d="M2 2a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z" fill="#acf5f7" fill-rule="evenodd"/><path d="M8 8h14v2H8zm0 4h8v2H8zm0 4h14v2H8zm0 4h10v2H8zM1.5 4h2A1.54 1.54 0 0 1 5 5.5 1.54 1.54 0 0 1 3.5 7h-2A1.54 1.54 0 0 1 0 5.5 1.54 1.54 0 0 1 1.5 4zM1.5 11h2A1.54 1.54 0 0 1 5 12.5 1.54 1.54 0 0 1 3.5 14h-2A1.54 1.54 0 0 1 0 12.5 1.54 1.54 0 0 1 1.5 11zM1.5 18h2A1.54 1.54 0 0 1 5 19.5 1.54 1.54 0 0 1 3.5 21h-2A1.54 1.54 0 0 1 0 19.5 1.54 1.54 0 0 1 1.5 18zM1.5 25h2A1.54 1.54 0 0 1 5 26.5 1.54 1.54 0 0 1 3.5 28h-2A1.54 1.54 0 0 1 0 26.5 1.54 1.54 0 0 1 1.5 25zM31.4 18.4l-2.8-2.8a2 2 0 0 1 2.8 2.8zM30.7 19.1L20.8 29l-2.5.9a1 1 0 0 1-1.3-.6.85.85 0 0 1 0-.7l.9-2.5 9.9-9.9z" fill="#0dcbcf" fill-rule="evenodd"/></symbol><symbol id="file-type-pdf" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FCD0D5" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#F1132D" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM9 11h14v2H9v-2zm0 4h12v2H9v-2zm.066 4.784h1.904c.283 0 .548.028.796.084.248.056.464.15.648.28.184.13.33.304.436.52.107.216.16.481.16.796 0 .304-.055.568-.164.792-.11.224-.257.408-.444.552a1.89 1.89 0 0 1-.648.32 2.87 2.87 0 0 1-.784.104h-.728V25H9.066v-5.216zm1.832 2.512c.64 0 .96-.277.96-.832 0-.272-.081-.464-.244-.576-.163-.112-.401-.168-.716-.168h-.656v1.576h.656zm3.016-2.512h1.472c.4 0 .76.05 1.08.152.32.101.595.257.824.468.23.21.405.479.528.804.123.325.184.712.184 1.16 0 .448-.061.837-.184 1.168-.123.33-.296.604-.52.82a2.137 2.137 0 0 1-.804.484c-.312.107-.66.16-1.044.16h-1.536v-5.216zm1.4 4.264c.224 0 .427-.03.608-.088.181-.059.336-.153.464-.284.128-.13.228-.303.3-.516.072-.213.108-.477.108-.792 0-.31-.036-.57-.108-.78a1.263 1.263 0 0 0-.3-.504 1.092 1.092 0 0 0-.464-.268 2.152 2.152 0 0 0-.608-.08h-.224v3.312h.224zm3.68-4.264h3.288v.992H20.17v1.208h1.808v.992H20.17V25h-1.176v-5.216z"/></g></symbol><symbol id="file-type-sheet" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#9FE6A2" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#0FC016" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM8 9h4v2H8V9zm0-4h4v2H8V5zm0 8h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm6-16h4v2h-4V9zm0-4h4v2h-4V5zm0 8h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm6-12h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z"/></g></symbol><symbol id="file-type-slide" viewBox="0 0 32 32">
+</symbol><symbol id="file-type-audio" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><rect width="30" height="30" fill="#ACF6F7" rx="2"/><path fill="#0CCBD0" d="M8 19.998c-1.105 0-2 .888-2 2 0 1.105.898 2 1.998 2H9c1.657 0 3-1.35 3-2.997v-7.679a.63.63 0 0 1 .492-.601l6.016-1.129c.272-.05.492.124.492.418v5.478c0 .282-.215.51-.49.51H17c-1.105 0-2 .904-2 1.997v-.179a2 2 0 0 0 1.998 1.997H18c1.657 0 3-1.349 3-2.993V7c0-.554-.445-.921-.976-.825L10.976 7.82C10.437 7.918 10 8.454 10 9v10.498c0 .276-.215.5-.49.5H8z"/></g></symbol><symbol id="file-type-banking-account" viewBox="0 0 32 32"><path d="M30 5.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C28.48 2 27.92 2 26.8 2H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 3.52 2 4.08 2 5.2v14.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 23 4.08 23 5.2 23h21.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C30 21.48 30 20.92 30 19.8V5.2Z" fill="#10C016"/><path d="M2 4a2 2 0 0 0 1.999 2H28.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C32 7.52 32 8.08 32 9.2v17.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C30.48 30 29.92 30 28.8 30H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 28.48 0 27.92 0 26.8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 2 2.08 2 3.2 2H4a2 2 0 0 0-2 2Z" fill="#9FE6A2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11a2 2 0 0 1-2 2h-9a5 5 0 0 0 0 10h8.793A2.207 2.207 0 0 0 32 20.793V11Zm-11 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" fill="#10C016"/></symbol><symbol id="file-type-bin" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#A3ACB8" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/><path fill="#4F5B69" d="M7 15.568c0-.597.06-1.12.178-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.221 1.001-.221.786 0 1.391.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12-.215.298-.474.521-.776.669a2.265 2.265 0 0 1-1.006.22c-.792 0-1.397-.306-1.815-.918C7.209 17.623 7 16.734 7 15.568zm3.705 0a9.152 9.152 0 0 0-.019-.58l-2.292 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 0 0 .018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.322 1.03-.322 1.882zm5.35 0c0-.597.06-1.12.179-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.221 1.001-.221.786 0 1.39.29 1.815.87.424.58.636 1.479.636 2.698 0 .602-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12-.215.298-.474.521-.777.669a2.265 2.265 0 0 1-1.005.22c-.792 0-1.397-.306-1.815-.918-.418-.613-.627-1.502-.627-2.668zm3.706 0a9.153 9.153 0 0 0-.02-.58l-2.291 2.191c.193.597.546.895 1.057.895.4 0 .708-.2.926-.6.218-.4.328-1.035.328-1.906zm-2.508 0a7.965 7.965 0 0 0 .02.55l2.282-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.402-.323 1.03-.323 1.882zm5.988 2.368h1.431v-4.295l-1.235.993-.561-.786 2.133-1.71h.823v5.798h1.404v1.081h-3.995v-1.08zM7 24.413c0-.596.06-1.119.178-1.568.118-.449.285-.82.5-1.115.215-.295.473-.516.772-.664.3-.147.633-.22 1.001-.22.786 0 1.391.29 1.815.869.424.58.636 1.48.636 2.698 0 .603-.059 1.128-.177 1.577-.119.449-.286.822-.501 1.12-.215.299-.474.521-.776.669A2.265 2.265 0 0 1 9.442 28c-.792 0-1.397-.306-1.815-.919C7.209 26.468 7 25.58 7 24.413zm3.705 0a9.152 9.152 0 0 0-.019-.58l-2.292 2.192c.193.596.546.894 1.057.894.4 0 .708-.2.926-.6.219-.4.328-1.035.328-1.906zm-2.507 0a7.965 7.965 0 0 0 .018.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.322 1.03-.322 1.882zm5.987 2.368h1.431v-4.295l-1.235.993-.56-.786 2.132-1.71h.824v5.798h1.403v1.081h-3.995v-1.08zm5.913-2.368c0-.596.059-1.119.177-1.568.119-.449.286-.82.501-1.115.215-.295.472-.516.772-.664.3-.147.633-.22 1-.22.787 0 1.392.29 1.816.869.424.58.636 1.48.636 2.698 0 .603-.06 1.128-.178 1.577-.118.449-.285.822-.5 1.12-.215.299-.474.521-.777.669A2.265 2.265 0 0 1 22.54 28c-.793 0-1.398-.306-1.815-.919-.418-.613-.627-1.502-.627-2.668zm3.704 0a9.152 9.152 0 0 0-.018-.58l-2.292 2.192c.193.596.545.894 1.057.894.399 0 .708-.2.926-.6.218-.4.327-1.035.327-1.906zm-2.507 0a7.965 7.965 0 0 0 .019.55l2.283-2.192c-.187-.563-.54-.845-1.057-.845-.4 0-.707.202-.922.605-.215.403-.323 1.03-.323 1.882z"/></g></symbol><symbol id="file-type-code" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#E6D5FF" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#9C59FF" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/><g stroke="#9C59FF" stroke-width="2"><path stroke-linejoin="round" d="M12 22l-4-4 4-4M20 22l4-4-4-4"/><path d="M14 25l4-14"/></g></g></symbol><symbol id="file-type-files" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#A3ACB8" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"/></g></symbol><symbol id="file-type-folder" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(0 2)"><rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/><path fill="#197BFF" d="M0 .99C0 .445.45 0 1.007 0h11.986c.556 0 1.32.313 1.718.71l.578.58c.393.392 1.156.71 1.712.71h13.005C31.107 2 32 2.895 32 4H17c-.552 0-1.313.313-1.71.71l-.58.58c-.392.392-1.16.71-1.717.71H1.007A1.004 1.004 0 0 1 0 5.01V.99z"/></g></symbol><symbol id="file-type-image" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(0 3)"><rect width="32" height="26" fill="#8EE39B" rx="2"/><path fill="#1EC737" d="M0 20l6.29-6.29a.999.999 0 0 1 1.416-.004L11 17l8.294-8.294a1.003 1.003 0 0 1 1.412 0L32 20v4.002C32 25.106 31.11 26 29.998 26H2.002A2.002 2.002 0 0 1 0 24.002V20z"/><circle cx="8" cy="7" r="3" fill="#FFF"/><path stroke="#8EE39B" d="M11 16l-5.5 5.5L11 16z" stroke-linecap="round" stroke-linejoin="round"/></g></symbol><symbol id="file-type-note" viewBox="0 0 32 32"><path d="M2 2a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z" fill="#acf5f7" fill-rule="evenodd"/><path d="M8 8h14v2H8zm0 4h8v2H8zm0 4h14v2H8zm0 4h10v2H8zM1.5 4h2A1.54 1.54 0 0 1 5 5.5 1.54 1.54 0 0 1 3.5 7h-2A1.54 1.54 0 0 1 0 5.5 1.54 1.54 0 0 1 1.5 4zM1.5 11h2A1.54 1.54 0 0 1 5 12.5 1.54 1.54 0 0 1 3.5 14h-2A1.54 1.54 0 0 1 0 12.5 1.54 1.54 0 0 1 1.5 11zM1.5 18h2A1.54 1.54 0 0 1 5 19.5 1.54 1.54 0 0 1 3.5 21h-2A1.54 1.54 0 0 1 0 19.5 1.54 1.54 0 0 1 1.5 18zM1.5 25h2A1.54 1.54 0 0 1 5 26.5 1.54 1.54 0 0 1 3.5 28h-2A1.54 1.54 0 0 1 0 26.5 1.54 1.54 0 0 1 1.5 25zM31.4 18.4l-2.8-2.8a2 2 0 0 1 2.8 2.8zM30.7 19.1L20.8 29l-2.5.9a1 1 0 0 1-1.3-.6.85.85 0 0 1 0-.7l.9-2.5 9.9-9.9z" fill="#0dcbcf" fill-rule="evenodd"/></symbol><symbol id="file-type-pdf" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FCD0D5" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#F1132D" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM9 11h14v2H9v-2zm0 4h12v2H9v-2zm.066 4.784h1.904c.283 0 .548.028.796.084.248.056.464.15.648.28.184.13.33.304.436.52.107.216.16.481.16.796 0 .304-.055.568-.164.792-.11.224-.257.408-.444.552a1.89 1.89 0 0 1-.648.32 2.87 2.87 0 0 1-.784.104h-.728V25H9.066v-5.216zm1.832 2.512c.64 0 .96-.277.96-.832 0-.272-.081-.464-.244-.576-.163-.112-.401-.168-.716-.168h-.656v1.576h.656zm3.016-2.512h1.472c.4 0 .76.05 1.08.152.32.101.595.257.824.468.23.21.405.479.528.804.123.325.184.712.184 1.16 0 .448-.061.837-.184 1.168-.123.33-.296.604-.52.82a2.137 2.137 0 0 1-.804.484c-.312.107-.66.16-1.044.16h-1.536v-5.216zm1.4 4.264c.224 0 .427-.03.608-.088.181-.059.336-.153.464-.284.128-.13.228-.303.3-.516.072-.213.108-.477.108-.792 0-.31-.036-.57-.108-.78a1.263 1.263 0 0 0-.3-.504 1.092 1.092 0 0 0-.464-.268 2.152 2.152 0 0 0-.608-.08h-.224v3.312h.224zm3.68-4.264h3.288v.992H20.17v1.208h1.808v.992H20.17V25h-1.176v-5.216z"/></g></symbol><symbol id="file-type-sheet" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#9FE6A2" d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0 1 27.003 32H4.997A1.995 1.995 0 0 1 3 29.998V2.002z"/><path fill="#0FC016" d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5zM8 9h4v2H8V9zm0-4h4v2H8V5zm0 8h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm0 4h4v2H8v-2zm6-16h4v2h-4V9zm0-4h4v2h-4V5zm0 8h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm6-12h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z"/></g></symbol><symbol id="file-type-slide" viewBox="0 0 32 32">
     <title>icons/files/presentation</title>
     <g id="icons/files/presentation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="file-02" transform="translate(3.000000, 0.000000)">
@@ -78,12 +78,12 @@ module.exports = `<svg><defs>
         <path fill="#F9BB00" d="M3.761 6.348L1.988 4.973l-.855-.656c-.105.212-.2.43-.288.653a7.79 7.79 0 0 0 0 5.727c.088.226.183.444.288.653l.845-.653 1.773-1.374a4.649 4.649 0 0 1 0-2.978l.01.003z"/>
         <path fill="#E74133" d="M8.147 0h-.033a7.836 7.836 0 0 0-6.981 4.317l.845.653 1.774 1.375c0-.03.022-.056.032-.082a4.7 4.7 0 0 1 .696-1.306 4.591 4.591 0 0 1 3.624-1.855h.033a4.246 4.246 0 0 1 2.994 1.17l2.244-2.215A7.54 7.54 0 0 0 8.147 0"/>
     </g>
-</symbol><symbol id="keychain" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M22 0h.28A10 10 0 0 1 32 9.72v.56A10 10 0 0 1 22.28 20h-.56a9.96 9.96 0 0 1-3.42-.7L7.18 30.77A4 4 0 0 1 4.3 32H2a2 2 0 0 1-2-2v-3.8c0-.45.18-.88.5-1.2l.05-.05a2 2 0 0 1 1.08-.56l.89-.14A1.77 1.77 0 0 0 4 22.5V22a1 1 0 0 1 1-1h.5c.83 0 1.5-.67 1.5-1.5V19a1 1 0 0 1 1-1h.75c.69 0 1.25-.56 1.25-1.25v-.42a2 2 0 0 1 .59-1.42l1.88-1.88A10 10 0 0 1 22 0zm.14 4c-.46 0-.93.05-1.39.17a2 2 0 0 0-1.04 3.25l.1.11 4.66 4.66a2 2 0 0 0 3.32-.8l.04-.14c.45-1.84 0-3.85-1.36-5.33l-.19-.2A5.83 5.83 0 0 0 22.42 4h-.28z"/><path fill="#95999D" d="M15.45 17.55c.54.47 1.13.89 1.77 1.23L4 32H2a2 2 0 0 1-.82-.18l14.27-14.27z"/></g></symbol><symbol id="logout-large" viewBox="0 0 44 44"><g fill="none" fill-rule="evenodd"><rect width="27.5" height="32.5" x="1.25" y="1.25" fill="#D9DDE1" rx="2"/><path fill="#95999D" d="M4.74 1.45l13.75 5.91c.92.4 1.51 1.3 1.51 2.29v27.61a2.5 2.5 0 01-3.49 2.29L2.76 33.64a2.49 2.49 0 01-1.51-2.29V3.74a2.5 2.5 0 013.49-2.29z"/><path fill="#95999D" fill-rule="nonzero" d="M34.3 12.92l.15.13 5 5c.69.69.73 1.77.13 2.5l-.13.15-5 5-.14.13a1.88 1.88 0 01-2.64-2.64l.13-.14 1.8-1.8h-7.98a1.88 1.88 0 01-.18-3.74l.18-.01h7.98l-1.8-1.8a1.87 1.87 0 012.5-2.78z"/></g></symbol><symbol id="share-grey08" viewBox="0 0 16 16">
+</symbol><symbol id="keychain" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#D1D5DB" d="M22 0h.28A10 10 0 0 1 32 9.72v.56A10 10 0 0 1 22.28 20h-.56a9.96 9.96 0 0 1-3.42-.7L7.18 30.77A4 4 0 0 1 4.3 32H2a2 2 0 0 1-2-2v-3.8c0-.45.18-.88.5-1.2l.05-.05a2 2 0 0 1 1.08-.56l.89-.14A1.77 1.77 0 0 0 4 22.5V22a1 1 0 0 1 1-1h.5c.83 0 1.5-.67 1.5-1.5V19a1 1 0 0 1 1-1h.75c.69 0 1.25-.56 1.25-1.25v-.42a2 2 0 0 1 .59-1.42l1.88-1.88A10 10 0 0 1 22 0zm.14 4c-.46 0-.93.05-1.39.17a2 2 0 0 0-1.04 3.25l.1.11 4.66 4.66a2 2 0 0 0 3.32-.8l.04-.14c.45-1.84 0-3.85-1.36-5.33l-.19-.2A5.83 5.83 0 0 0 22.42 4h-.28z"/><path fill="#95999D" d="M15.45 17.55c.54.47 1.13.89 1.77 1.23L4 32H2a2 2 0 0 1-.82-.18l14.27-14.27z"/></g></symbol><symbol id="logout-large" viewBox="0 0 44 44"><g fill="none" fill-rule="evenodd"><rect width="27.5" height="32.5" x="1.25" y="1.25" fill="#D9DDE1" rx="2"/><path fill="#95999D" d="M4.74 1.45l13.75 5.91c.92.4 1.51 1.3 1.51 2.29v27.61a2.5 2.5 0 01-3.49 2.29L2.76 33.64a2.49 2.49 0 01-1.51-2.29V3.74a2.5 2.5 0 013.49-2.29z"/><path fill="#95999D" fill-rule="nonzero" d="M34.3 12.92l.15.13 5 5c.69.69.73 1.77.13 2.5l-.13.15-5 5-.14.13a1.88 1.88 0 01-2.64-2.64l.13-.14 1.8-1.8h-7.98a1.88 1.88 0 01-.18-3.74l.18-.01h7.98l-1.8-1.8a1.87 1.87 0 012.5-2.78z"/></g></symbol><symbol id="papers" viewBox="0 0 32 32"><path d="M30.002 28A1.997 1.997 0 0 0 32 25.995V6.005A2.003 2.003 0 0 0 29.998 4H2.001A1.998 1.998 0 0 0 0 6.005v19.99C0 27.102.895 28 1.998 28h28.004Z" fill="#E6D5FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 20.5c0-.75-1.5-3-3-3-.674 0-.894.152-1.136.319-.296.204-.625.431-1.864.431s-1.568-.227-1.864-.431C6.894 17.651 6.674 17.5 6 17.5c-1.5 0-3 2.25-3 3s0 1.5.75 1.5h10.5c.618 0 .727-.509.746-1.107L15 20.5Zm-3-7.125C12 11.511 10.657 10 9 10s-3 1.511-3 3.375 1.343 3.375 3 3.375 3-1.51 3-3.375ZM18 11a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2h-9Zm0 4a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2h-9Zm-1 5a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1Z" fill="#9C59FF"/></symbol><symbol id="share-grey08" viewBox="0 0 16 16">
   <g fill="#32363F" fill-rule="evenodd" transform="translate(-160 -32)">
     <path d="M165.082611,42.1593397 C164.543049,42.6798471 163.808912,43 163,43 C161.343146,43 160,41.6568542 160,40 C160,38.3431458 161.343146,37 163,37 C163.808912,37 164.543049,37.3201529 165.082611,37.8406603 L170.022669,35.3706317 C170.007705,35.2491857 170,35.1254927 170,35 C170,33.3431458 171.343146,32 173,32 C174.656854,32 176,33.3431458 176,35 C176,36.6568542 174.656854,38 173,38 C172.191088,38 171.456951,37.6798471 170.917389,37.1593397 L165.977331,39.6293683 C165.992295,39.7508143 166,39.8745073 166,40 C166,40.1254927 165.992295,40.2491857 165.977331,40.3706317 L170.917389,42.8406603 C171.456951,42.3201529 172.191088,42 173,42 C174.656854,42 176,43.3431458 176,45 C176,46.6568542 174.656854,48 173,48 C171.343146,48 170,46.6568542 170,45 C170,44.8745073 170.007705,44.7508143 170.022669,44.6293683 L165.082611,42.1593397 Z"/>
     <path d="M165.082611,42.1593397 C164.543049,42.6798471 163.808912,43 163,43 C161.343146,43 160,41.6568542 160,40 C160,38.3431458 161.343146,37 163,37 C163.808912,37 164.543049,37.3201529 165.082611,37.8406603 L170.022669,35.3706317 C170.007705,35.2491857 170,35.1254927 170,35 C170,33.3431458 171.343146,32 173,32 C174.656854,32 176,33.3431458 176,35 C176,36.6568542 174.656854,38 173,38 C172.191088,38 171.456951,37.6798471 170.917389,37.1593397 L165.977331,39.6293683 C165.992295,39.7508143 166,39.8745073 166,40 C166,40.1254927 165.992295,40.2491857 165.977331,40.3706317 L170.917389,42.8406603 C171.456951,42.3201529 172.191088,42 173,42 C174.656854,42 176,43.3431458 176,45 C176,46.6568542 174.656854,48 173,48 C171.343146,48 170,46.6568542 170,45 C170,44.8745073 170.007705,44.7508143 170.022669,44.6293683 L165.082611,42.1593397 Z"/>
   </g>
-</symbol><symbol id="top-select" viewBox="0 0 24 24">
+</symbol><symbol id="store" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 19v8h10v-8h14v12h-3V20h-7v11H2V19h4ZM30 2v6H2V2h28Z" fill="#FDD5D5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 18.99C0 19.548.453 20 .993 20h30.014A.996.996 0 0 0 32 18.99v-1.98c0-.558-.097-1.445-.218-1.99L30 7H2L.218 15.02C.098 15.56 0 16.442 0 17.01v1.98Z" fill="#F52D2D"/></symbol><symbol id="top-select" viewBox="0 0 24 24">
   <g fill="#95999d" fill-rule="evenodd" transform="translate(12.285714, 12.000000) rotate(270.000000) translate(-12.285714, -12.000000)">
     <path d="M6.46026077,20.3174036 C5.84657974,20.9310847 5.84657974,21.9260582 6.46026077,22.5397392 C7.0739418,23.1534203 8.06891534,23.1534203 8.68259637,22.5397392 L18.1111678,13.1111678 C18.7248488,12.4974868 18.7248488,11.5025132 18.1111678,10.8888322 L8.68259637,1.46026077 C8.06891534,0.846579743 7.0739418,0.846579743 6.46026077,1.46026077 C5.84657974,2.0739418 5.84657974,3.06891534 6.46026077,3.68259637 L14.7776644,12 L6.46026077,20.3174036 Z"/>
   </g>

package/react/Icons/Contacts.jsx

@@ -1,17 +1,17 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh /Users/vdnj/Documents/CozyCloud/cozy-ui/assets/icons/ui/permissions/contacts.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/contacts.svg` to regenerate;
 import React from 'react'
 
 function SvgContacts(props) {
   return (
-    <svg viewBox="0 0 48 48" {...props}>
-      <g fill="none" fillRule="evenodd">
+    <svg viewBox="0 0 32 32" fill="none" {...props}>
+      <g fillRule="evenodd" clipRule="evenodd">
         <path
-          d="M48 40c0 1.105-.902 2-2.009 2H36v-4.501C36 36.67 35.336 36 34.502 36h-1.504c-.827 0-1.498.665-1.498 1.499V42h-15v-4.501c0-.828-.664-1.499-1.498-1.499h-1.504c-.827 0-1.498.665-1.498 1.499V42H2.009A2 2 0 010 40V8a2 2 0 012.001-2H46c1.104 0 2 .89 2 2v32z"
-          fill="#d6d8da"
+          d="M32 25.995A1.997 1.997 0 0130.002 28H24v-2.499c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H11v-2.5c0-.829-.666-1.5-1.5-1.5-.829 0-1.5.678-1.5 1.5v2.5H1.998A2.002 2.002 0 010 25.994V6.005C0 4.897.889 4 2.001 4h27.997C31.104 4 32 4.897 32 6.005v19.99z"
+          fill="#FFD799"
         />
         <path
-          d="M25.5 13.5h9V15h-9v-1.5zm0 4.5H42v1.5H25.5V18zm0 4.5H42V24H25.5v-1.5zm0 4.5H42v1.5H25.5V27zm-12-4.875c-2.485 0-4.5-2.267-4.5-5.063C9 14.268 11.015 12 13.5 12s4.5 2.267 4.5 5.063c0 2.795-2.015 5.062-4.5 5.062zm-9 5.625c0-1.125 2.25-4.5 4.5-4.5s1.125 1.125 4.5 1.125 2.25-1.125 4.5-1.125 4.5 3.375 4.5 4.5 0 2.25-1.125 2.25H5.625C4.5 30 4.5 28.875 4.5 27.75z"
-          fill="#5d6165"
+          d="M12 15.5c1.5 0 3 2.25 3 3l-.004.393c-.02.598-.128 1.107-.746 1.107H3.75C3 20 3 19.25 3 18.5s1.5-3 3-3 .75.75 3 .75 1.5-.75 3-.75zM28 18v1H17v-1h11zm0-3v1H17v-1h11zM9 8c1.657 0 3 1.511 3 3.375s-1.343 3.375-3 3.375-3-1.51-3-3.375C6 9.511 7.343 8 9 8zm19 4v1H17v-1h11zm-5-3v1h-6V9h6z"
+          fill="#FF9300"
         />
       </g>
     </svg>

package/react/Icons/FileTypeBankingAccount.jsx

@@ -0,0 +1,25 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/file-type-banking-account.svg` to regenerate;
+import React from 'react'
+
+function SvgFileTypeBankingAccount(props) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" {...props}>
+      <path
+        d="M30 5.2c0-1.12 0-1.68-.218-2.108a2 2 0 00-.874-.874C28.48 2 27.92 2 26.8 2H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 00-.874.874C2 3.52 2 4.08 2 5.2v14.6c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C3.52 23 4.08 23 5.2 23h21.6c1.12 0 1.68 0 2.108-.218a2 2 0 00.874-.874C30 21.48 30 20.92 30 19.8V5.2z"
+        fill="#10C016"
+      />
+      <path
+        d="M2 4a2 2 0 001.999 2H28.8c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C32 7.52 32 8.08 32 9.2v17.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C30.48 30 29.92 30 28.8 30H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C0 28.48 0 27.92 0 26.8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C1.52 2 2.08 2 3.2 2H4a2 2 0 00-2 2z"
+        fill="#9FE6A2"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M32 11a2 2 0 01-2 2h-9a5 5 0 000 10h8.793A2.207 2.207 0 0032 20.793V11zm-11 9a2 2 0 100-4 2 2 0 000 4z"
+        fill="#10C016"
+      />
+    </svg>
+  )
+}
+
+export default SvgFileTypeBankingAccount

package/react/Icons/Papers.jsx

@@ -0,0 +1,21 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/papers.svg` to regenerate;
+import React from 'react'
+
+function SvgPapers(props) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" {...props}>
+      <path
+        d="M30.002 28A1.997 1.997 0 0032 25.995V6.005A2.003 2.003 0 0029.998 4H2.001A1.998 1.998 0 000 6.005v19.99C0 27.102.895 28 1.998 28h28.004z"
+        fill="#E6D5FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 20.5c0-.75-1.5-3-3-3-.674 0-.894.152-1.136.319-.296.204-.625.431-1.864.431s-1.568-.227-1.864-.431C6.894 17.651 6.674 17.5 6 17.5c-1.5 0-3 2.25-3 3s0 1.5.75 1.5h10.5c.618 0 .727-.509.746-1.107L15 20.5zm-3-7.125C12 11.511 10.657 10 9 10s-3 1.511-3 3.375 1.343 3.375 3 3.375 3-1.51 3-3.375zM18 11a1 1 0 100 2h9a1 1 0 100-2h-9zm0 4a1 1 0 100 2h9a1 1 0 100-2h-9zm-1 5a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1z"
+        fill="#9C59FF"
+      />
+    </svg>
+  )
+}
+
+export default SvgPapers

package/react/Icons/Store.jsx

@@ -0,0 +1,23 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/store.svg` to regenerate;
+import React from 'react'
+
+function SvgStore(props) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 19v8h10v-8h14v12h-3V20h-7v11H2V19h4zM30 2v6H2V2h28z"
+        fill="#FDD5D5"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 18.99C0 19.548.453 20 .993 20h30.014A.996.996 0 0032 18.99v-1.98a11 11 0 00-.218-1.99L30 7H2L.218 15.02C.098 15.56 0 16.442 0 17.01v1.98z"
+        fill="#F52D2D"
+      />
+    </svg>
+  )
+}
+
+export default SvgStore

package/react/Viewer/Panel/Qualification.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
+
 import List from '../../MuiCozyTheme/List'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 import {
@@ -9,12 +11,15 @@ import {
   knownInformationMetadataNames,
   knownOtherMetadataNames
 } from '../helpers'
+import ExpirationAlert from '../components/ExpirationAlert'
 import QualificationListItemContact from './QualificationListItemContact'
 import ActionMenuWrapper from './ActionMenuWrapper'
 import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
 
+const { isExpiringSoon } = models.paper
+
 const makeQualificationListItemComp = metadataName => {
   if (knownDateMetadataNames.includes(metadataName)) {
     return QualificationListItemDate
@@ -32,7 +37,11 @@ const makeQualificationListItemComp = metadataName => {
   }
 }
 
-const Qualification = ({ file = {} }) => {
+const isExpirationAlertHidden = file => {
+  return file?.metadata?.hideExpirationAlert ?? false
+}
+
+const Qualification = ({ file }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
   const [optionFile, setOptionFile] = useState({
@@ -63,36 +72,41 @@ const Qualification = ({ file = {} }) => {
   }, [formatedMetadataQualification])
 
   return (
-    <List className={'u-pv-1'}>
-      {formatedMetadataQualification.map((meta, idx) => {
-        const { name } = meta
-        const QualificationListItemComp = makeQualificationListItemComp(name)
-
-        return (
-          <QualificationListItemComp
-            key={idx}
+    <>
+      {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
+        <ExpirationAlert file={file} />
+      )}
+      <List className={'u-pv-1'}>
+        {formatedMetadataQualification.map((meta, idx) => {
+          const { name } = meta
+          const QualificationListItemComp = makeQualificationListItemComp(name)
+
+          return (
+            <QualificationListItemComp
+              key={idx}
+              file={file}
+              ref={actionBtnRef.current[idx]}
+              formatedMetadataQualification={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+            />
+          )
+        })}
+
+        {optionFile.name && (
+          <ActionMenuWrapper
+            onClose={hideActionsMenu}
             file={file}
-            ref={actionBtnRef.current[idx]}
-            formatedMetadataQualification={meta}
-            toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+            optionFile={optionFile}
+            ref={actionBtnRef.current[optionFile.id]}
           />
-        )
-      })}
-
-      {optionFile.name && (
-        <ActionMenuWrapper
-          onClose={hideActionsMenu}
-          file={file}
-          optionFile={optionFile}
-          ref={actionBtnRef.current[optionFile.id]}
-        />
-      )}
-    </List>
+        )}
+      </List>
+    </>
   )
 }
 
 Qualification.propTypes = {
-  file: PropTypes.object
+  file: PropTypes.object.isRequired
 }
 
 export default withViewerLocales(Qualification)

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -1,17 +1,23 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
+
 import ListItem from '../../MuiCozyTheme/ListItem'
 import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
 import IconButton from '../../IconButton'
 import Icon from '../../Icon'
 import Dots from '../../Icons/Dots'
+import Typography from '../../Typography'
+import ExpirationAnnotation from '../components/ExpirationAnnotation'
 import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../I18n'
 import { formatDate } from '../helpers'
 
+const { isExpired, isExpiringSoon } = models.paper
+
 const QualificationListItemDate = forwardRef(
-  ({ formatedMetadataQualification, toggleActionsMenu }, ref) => {
+  ({ file, formatedMetadataQualification, toggleActionsMenu }, ref) => {
     const { t, f, lang } = useI18n()
     const { name, value } = formatedMetadataQualification
     const formattedDate = value
@@ -22,7 +28,21 @@ const QualificationListItemDate = forwardRef(
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
           primary={t(`Viewer.panel.qualification.date.title.${name}`)}
-          secondary={formattedDate}
+          secondary={
+            <>
+              <Typography component="span" variant="inherit">
+                {formattedDate}
+              </Typography>
+              {(isExpired(file) || isExpiringSoon(file)) && (
+                <>
+                  <Typography component="span" variant="inherit">
+                    {' · '}
+                  </Typography>
+                  <ExpirationAnnotation file={file} />
+                </>
+              )}
+            </>
+          }
           disabled={!value}
         />
         <ListItemSecondaryAction>
@@ -41,6 +61,7 @@ const QualificationListItemDate = forwardRef(
 QualificationListItemDate.displayName = 'QualificationListItemDate'
 
 QualificationListItemDate.propTypes = {
+  file: PropTypes.object.isRequired,
   formatedMetadataQualification: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string

package/react/Viewer/Readme.md

@@ -122,7 +122,16 @@ const files = [
     _id: 'image',
     class: 'image',
     name: 'Demo.jpg',
-    mime: 'image/jpg'
+    mime: 'image/jpg',
+    metadata: {
+      carbonCopy: true,
+      electronicSafe: true,
+      referencedDate: new Date(Date.now() - 357 * 24 * 60 * 60 * 1000).toISOString(),
+      datetimeLabel: "referencedDate",
+      qualification: {
+        label: 'personal_sporting_licence'
+      }
+    }
   },
   {
     _id: 'none',

package/react/Viewer/components/ExpirationAlert.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient, models } from 'cozy-client'
+
+import Alert from '../../Alert'
+import Button from '../../Buttons'
+import Link from '../../Link'
+import Typography from '../../Typography'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+import { useI18n } from '../../I18n'
+import { formatLocallyDistanceToNow } from '../../I18n/format'
+
+const FILES_DOCTYPE = 'io.cozy.files'
+
+const { computeExpirationDate, computeExpirationNoticeLink } = models.paper
+
+const ExpirationAlert = ({ file }) => {
+  const { t } = useI18n()
+  const client = useClient()
+  const [isBusy, setIsBusy] = useState(false)
+
+  const handleClose = async () => {
+    setIsBusy(true)
+    await client.collection(FILES_DOCTYPE).updateMetadataAttribute(file.id, {
+      ...file.metadata,
+      hideExpirationAlert: true
+    })
+    setIsBusy(false)
+  }
+
+  const expirationDate = computeExpirationDate(file)
+  const expirationNoticeLink = computeExpirationNoticeLink(file)
+
+  return (
+    <Alert
+      severity="warning"
+      block
+      action={
+        <Button
+          color="warning"
+          variant="text"
+          size="small"
+          busy={isBusy}
+          label={t('Viewer.panel.expiration.dismiss')}
+          onClick={handleClose}
+        />
+      }
+      className="u-mt-1 u-mh-1"
+    >
+      <Typography component="span" variant="inherit">
+        <Typography component="span" variant="inherit">
+          {t('Viewer.panel.expiration.description', {
+            duration: formatLocallyDistanceToNow(expirationDate)
+          })}
+        </Typography>
+        {expirationNoticeLink && (
+          <>
+            <Typography component="span" variant="inherit">
+              {' : '}
+            </Typography>
+            <Link
+              href={expirationNoticeLink}
+              rel="noreferrer"
+              target="_blank"
+              className="u-warning"
+            >
+              {new URL(expirationNoticeLink).hostname}
+            </Link>
+          </>
+        )}
+      </Typography>
+    </Alert>
+  )
+}
+
+ExpirationAlert.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default withViewerLocales(ExpirationAlert)

package/react/Viewer/components/ExpirationAnnotation.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { models } from 'cozy-client'
+
+import Typography from '../../Typography'
+import { useI18n } from '../../I18n'
+import { formatLocallyDistanceToNow } from '../../I18n/format'
+
+const { computeExpirationDate, isExpired } = models.paper
+
+const ExpirationAnnotation = ({ file }) => {
+  const { t } = useI18n()
+
+  if (isExpired(file)) {
+    return (
+      <Typography component="span" variant="inherit" color="error">
+        {t('Viewer.panel.qualification.expired')}
+      </Typography>
+    )
+  }
+
+  const expirationDate = computeExpirationDate(file)
+
+  return (
+    <Typography component="span" variant="inherit" className="u-warning">
+      {t('Viewer.panel.qualification.expiresIn', {
+        duration: formatLocallyDistanceToNow(expirationDate)
+      })}
+    </Typography>
+  )
+}
+
+ExpirationAnnotation.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default ExpirationAnnotation

package/react/Viewer/locales/en.json

@@ -72,7 +72,13 @@
           "copy": "Copy",
           "copyClipboard": "Copy to clipboard",
           "edit": "Edit"
-        }
+        },
+        "expired": "Expired",
+        "expiresIn": "Expires in %{duration}"
+      },
+      "expiration": {
+        "description": "This document will expire in %{duration}, consider renewing it",
+        "dismiss": "I understood"
       },
       "title": "Useful information"
     },