cozy-ui 81.3.0 → 81.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [81.4.0](https://github.com/cozy/cozy-ui/compare/v81.3.0...v81.4.0) (2023-03-13)
+
+
+### Bug Fixes
+
+* CI wasn't deploying during deploy job ([3b967ca](https://github.com/cozy/cozy-ui/commit/3b967ca))
+
+
+### Features
+
+* Add CozyUpgrade illustration ([25821e1](https://github.com/cozy/cozy-ui/commit/25821e1))
+* Add OnlyOfficePaywall ([ad344d5](https://github.com/cozy/cozy-ui/commit/ad344d5))
+* Add state on useInstance ([9aa68fc](https://github.com/cozy/cozy-ui/commit/9aa68fc))
+* Remove codemods, use theme from `@cozy/codemods` instead ([a6502e8](https://github.com/cozy/cozy-ui/commit/a6502e8))
+
 # [81.3.0](https://github.com/cozy/cozy-ui/compare/v81.2.1...v81.3.0) (2023-03-02)
 
 

package/assets/icons/illus/cozy-upgrade.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 0 0-20.435-23.542 28.937 28.937 0 0 0-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006c-2.173.073-4.368.389-6.54.974-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 0 0 .327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M57.845 24.584a26.48 26.48 0 0 1 5.954-.892 26.51 26.51 0 0 1 5.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 0 0 2.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 0 1-.291 5.324l-.018.106c-.07.49-.177 1.049-.317 1.651A12.85 12.85 0 0 1 115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 0 0-6.911-1.047 2.178 2.178 0 0 0-.358-.012c-.067.002-.127.004-.193.01-2.349.092-4.677.445-6.916 1.05-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 0 0 .348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 0 1 .06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 0 0-.018-.106 19.794 19.794 0 0 1-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 0 0 2.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 0 0-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 0 0-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 0 0 1.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323ZM105.09 78.09a.035.035 0 0 1-.013-.003.07.07 0 0 0-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 0 0 1.312 2.813 2.194 2.194 0 0 0 2.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 1 0 4.127 1.501c.959-2.64 3.974-12.315-5.855-15.91Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756Z" fill="#B2D3FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 0 0-.325.816ZM83.962 100.497c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 0 0-.323.816ZM91.418 111.358c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 0 0-.322.818ZM103.944 107.905c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 0 0-.323.818ZM105.79 97.984c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 0 0-.323.816Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 0 0-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201Z" fill="#FEDBA7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M98.794 96.382a2.624 2.624 0 0 0-.988-.153 3.14 3.14 0 0 0-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702c-.332.845-.703 1.828-1.14 3.038-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 0 0-1.001-.703Zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 0 1 1.011-2.577 5.78 5.78 0 0 1 4.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 0 1-.961.54 125.98 125.98 0 0 0-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002Z" fill="#3281EE"/><path d="M29.419 125.29a81.818 81.818 0 0 0 16.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02Z" fill="#BBD9FD"/><path d="M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM89 22c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM30 26c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26Zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0 1 27.454 16ZM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818Zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 0 1 104.455 32Z" fill="#FF9300"/><circle cx="11" cy="23" r="2" fill="#FF8E8E"/><circle cx="30" cy="34" r="2" fill="#FF8E8E"/><circle cx="50" cy="12" r="2" fill="#FF8E8E"/><circle cx="107" cy="12" r="2" fill="#FF8E8E"/><circle cx="117" cy="47" r="2" fill="#FF8E8E"/><circle cx="8" cy="53" r="2" fill="#FF8E8E"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "81.3.0",
+  "version": "81.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -41,8 +41,7 @@
     "prebuild:css:utils": "mkdir -p dist/",
     "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss",
-    "prepare": "yarn release",
-    "release": "npm-run-all --parallel sprite palette && yarn build",
+    "makeSpriteAndPalette": "npm-run-all --parallel sprite palette",
     "semantic-release": "semantic-release",
     "sprite": "scripts/make-icon-sprite.sh",
     "jest": "yarn test:jest",

package/react/BottomSheet/README.md

@@ -4,7 +4,6 @@ Display content coming up from the bottom of the screen. The pane can be swiped
 ### Usages
 
 * BottomSheet with header, text title and text content
-
 ```bash
 import BottomSheet, { BottomSheetHeader, BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transpiled/react/BottomSheet'
 
@@ -20,7 +19,6 @@ import BottomSheet, { BottomSheetHeader, BottomSheetItem, BottomSheetTitle } fr
 ```
 
 * BottomSheet with list title and list content
-
 ```bash
 import BottomSheet, { BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transpiled/react/BottomSheet'
 

package/react/Icon/Readme.md

@@ -580,6 +580,7 @@ import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import CheckWhiteIcon from 'cozy-ui/transpiled/react/Icons/CheckWhite'
 import DashWhiteIcon from 'cozy-ui/transpiled/react/Icons/DashWhite'
 import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
+import CozyUpgradeIcon from 'cozy-ui/transpiled/react/Icons/CozyUpgrade'
 
 const icons = [
   CozyIcon,
@@ -614,6 +615,7 @@ const icons = [
   CheckWhiteIcon,
   DashWhiteIcon,
   KeychainIcon,
+  CozyUpgradeIcon
 ]
 
 const wrapperStyle = {
@@ -653,7 +655,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', 'file-type-banking-account' , 'forbidden-sign', 'google', 'logout-large', 'top-select', 'bottom-select', 'check-white', 'dash-white', 'keychain', 'contacts', 'papers', 'store']
+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', 'cozy-upgrade']
 
 ;
 

package/react/Icon/icons-sprite.js

@@ -34,7 +34,7 @@ module.exports = `<svg><defs>
     </g>
 </symbol><symbol id="cozy" viewBox="0 0 52 52">
   <path fill="#297EF2" fill-rule="evenodd" d="M558.23098,44 L533.76902,44 C526.175046,44 520,37.756072 520,30.0806092 C520,26.4203755 521.393962,22.9628463 523.927021,20.3465932 C526.145918,18.0569779 529.020185,16.6317448 532.129554,16.2609951 C532.496769,13.1175003 533.905295,10.2113693 536.172045,7.96901668 C538.760238,5.40737823 542.179607,4 545.800788,4 C549.420929,4 552.841339,5.40737823 555.429532,7.96796639 C557.686919,10.2008665 559.091284,13.0912433 559.467862,16.2179336 C566.482405,16.8533543 572,22.8284102 572,30.0816594 C572,37.756072 565.820793,44 558.22994,44 L558.23098,44 Z M558.068077,40.9989547 L558.171599,40.9989547 C564.142748,40.9989547 569,36.0883546 569,30.0520167 C569,24.0167241 564.142748,19.1061239 558.171599,19.1061239 L558.062901,19.1061239 C557.28338,19.1061239 556.644649,18.478972 556.627051,17.6887604 C556.492472,11.7935317 551.63729,7 545.802791,7 C539.968291,7 535.111039,11.7956222 534.977495,17.690851 C534.959896,18.4664289 534.34187,19.0914904 533.573737,19.1092597 C527.743378,19.2451426 523,24.1536522 523,30.0530619 C523,36.0893999 527.857252,41 533.828401,41 L533.916395,41 L533.950557,40.9979094 C533.981614,40.9979094 534.01267,40.9979094 534.043727,41 L558.064971,41 L558.068077,40.9989547 Z M553.766421,29.2227318 C552.890676,28.6381003 552.847676,27.5643091 552.845578,27.5171094 C552.839285,27.2253301 552.606453,26.9957683 552.32118,27.0000592 C552.035908,27.0054228 551.809368,27.2467844 551.814612,27.5364185 C551.81671,27.5750363 551.831393,28.0792139 552.066323,28.6735 C548.949302,31.6942753 544.051427,31.698566 540.928113,28.6917363 C541.169336,28.0888684 541.185068,27.576109 541.185068,27.5374911 C541.190312,27.2478572 540.964821,27.0086409 540.681646,27.0011319 C540.401618,26.9925502 540.163541,27.2264027 540.154102,27.5160368 C540.154102,27.5589455 540.11215,28.6370275 539.234308,29.2216592 C538.995183,29.3825669 538.92806,29.7097461 539.08433,29.9532532 C539.182917,30.1077246 539.346529,30.1924694 539.516434,30.1924694 C539.612923,30.1924694 539.710461,30.1645787 539.797512,30.1066519 C540.023003,29.9564713 540.211786,29.7848363 540.370154,29.6024742 C542.104862,31.2008247 544.296845,32 546.488828,32 C548.686055,32 550.883282,31.1976066 552.621136,29.5917471 C552.780553,29.7762546 552.971434,29.9521804 553.203218,30.1066519 C553.289219,30.1645787 553.387806,30.1924694 553.484295,30.1924694 C553.652102,30.1924694 553.816763,30.1066519 553.916399,29.9521804 C554.07162,29.7076006 554.004497,29.3793488 553.766421,29.2205864 L553.766421,29.2227318 Z" transform="translate(-520)"/>
-</symbol><symbol id="cross-white" viewBox="0 0 24 24">
+</symbol><symbol id="cozy-upgrade" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" d="M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 0 0-20.435-23.542 28.937 28.937 0 0 0-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006c-2.173.073-4.368.389-6.54.974-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 0 0 .327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M57.845 24.584a26.48 26.48 0 0 1 5.954-.892 26.51 26.51 0 0 1 5.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 0 0 2.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 0 1-.291 5.324l-.018.106c-.07.49-.177 1.049-.317 1.651A12.85 12.85 0 0 1 115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 0 0-6.911-1.047 2.178 2.178 0 0 0-.358-.012c-.067.002-.127.004-.193.01-2.349.092-4.677.445-6.916 1.05-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 0 0 .348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 0 1 .06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 0 0-.018-.106 19.794 19.794 0 0 1-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 0 0 2.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 0 0-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 0 0-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 0 0 1.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323ZM105.09 78.09a.035.035 0 0 1-.013-.003.07.07 0 0 0-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 0 0 1.312 2.813 2.194 2.194 0 0 0 2.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 1 0 4.127 1.501c.959-2.64 3.974-12.315-5.855-15.91Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756Z" fill="#B2D3FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 0 0-.325.816ZM83.962 100.497c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 0 0-.323.816ZM91.418 111.358c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 0 0-.322.818ZM103.944 107.905c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 0 0-.323.818ZM105.79 97.984c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 0 0-.323.816Z" fill="#3281EE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 0 0-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201Z" fill="#FEDBA7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M98.794 96.382a2.624 2.624 0 0 0-.988-.153 3.14 3.14 0 0 0-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702c-.332.845-.703 1.828-1.14 3.038-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 0 0-1.001-.703Zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 0 1 1.011-2.577 5.78 5.78 0 0 1 4.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 0 1-.961.54 125.98 125.98 0 0 0-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002Z" fill="#3281EE"/><path d="M29.419 125.29a81.818 81.818 0 0 0 16.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02Z" fill="#BBD9FD"/><path d="M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM89 22c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM30 26c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26Zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0 1 27.454 16ZM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818Zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 0 1 104.455 32Z" fill="#FF9300"/><circle cx="11" cy="23" r="2" fill="#FF8E8E"/><circle cx="30" cy="34" r="2" fill="#FF8E8E"/><circle cx="50" cy="12" r="2" fill="#FF8E8E"/><circle cx="107" cy="12" r="2" fill="#FF8E8E"/><circle cx="117" cy="47" r="2" fill="#FF8E8E"/><circle cx="8" cy="53" r="2" fill="#FF8E8E"/></symbol><symbol id="cross-white" viewBox="0 0 24 24">
   <path fill="#FFF" fill-rule="evenodd" d="M106.585786,44 L96.2928932,33.7071068 C95.9023689,33.3165825 95.9023689,32.6834175 96.2928932,32.2928932 C96.6834175,31.9023689 97.3165825,31.9023689 97.7071068,32.2928932 L108,42.5857864 L118.292893,32.2928932 C118.683418,31.9023689 119.316582,31.9023689 119.707107,32.2928932 C120.097631,32.6834175 120.097631,33.3165825 119.707107,33.7071068 L109.414214,44 L119.707107,54.2928932 C120.097631,54.6834175 120.097631,55.3165825 119.707107,55.7071068 C119.316582,56.0976311 118.683418,56.0976311 118.292893,55.7071068 L108,45.4142136 L97.7071068,55.7071068 C97.3165825,56.0976311 96.6834175,56.0976311 96.2928932,55.7071068 C95.9023689,55.3165825 95.9023689,54.6834175 96.2928932,54.2928932 L106.585786,44 Z" transform="translate(-96 -32)"/>
 </symbol><symbol id="dash-white" viewBox="0 0 20 20"><path d="M3.497 10h13.006" stroke="#FFF" stroke-width="2"/></symbol><symbol id="device-browser" viewBox="0 0 32 32">
     <g fill="none" fill-rule="evenodd">

package/react/Icons/CozyUpgrade.jsx

@@ -0,0 +1,67 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/cozy-upgrade-2.svg` to regenerate;
+import React from 'react'
+
+function SvgCozyUpgrade(props) {
+  return (
+    <svg viewBox="0 0 128 128" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 00-20.435-23.542 28.937 28.937 0 00-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006a28.862 28.862 0 00-6.54.974c-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 00.327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.845 24.584a26.48 26.48 0 015.954-.892 26.51 26.51 0 015.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 002.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 01-.291 5.324l-.018.106a19.73 19.73 0 01-.317 1.651A12.85 12.85 0 01115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 00-6.911-1.047 2.178 2.178 0 00-.358-.012 3.077 3.077 0 00-.193.01 31.244 31.244 0 00-6.916 1.05c-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 00.348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 01.06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 00-.018-.106 19.794 19.794 0 01-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 002.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528z"
+        fill="#3281EE"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 00-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 00-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 001.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323zm23.27 6.424a.035.035 0 01-.013-.003.07.07 0 00-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 001.312 2.813 2.194 2.194 0 002.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 104.127 1.501c.959-2.64 3.974-12.315-5.855-15.91z"
+        fill="#3281EE"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756z"
+        fill="#B2D3FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 00-.325.816zm-4.963 8.787c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 00-.323.816zm7.456 10.861c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 00-.322.818zm12.526-3.453c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 00-.323.818zm1.846-9.921c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 00-.323.816z"
+        fill="#3281EE"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 00-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201z"
+        fill="#FEDBA7"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M98.794 96.382a2.624 2.624 0 00-.988-.153 3.14 3.14 0 00-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702a116.38 116.38 0 00-1.14 3.038c-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 00-1.001-.703zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 011.011-2.577 5.78 5.78 0 014.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 01-.961.54 125.98 125.98 0 00-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002z"
+        fill="#3281EE"
+      />
+      <path
+        d="M29.419 125.29a81.818 81.818 0 0016.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02z"
+        fill="#BBD9FD"
+      />
+      <path
+        d="M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm73-21c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm-59 4c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0127.454 16zM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 01104.455 32z"
+        fill="#FF9300"
+      />
+      <circle cx={11} cy={23} r={2} fill="#FF8E8E" />
+      <circle cx={30} cy={34} r={2} fill="#FF8E8E" />
+      <circle cx={50} cy={12} r={2} fill="#FF8E8E" />
+      <circle cx={107} cy={12} r={2} fill="#FF8E8E" />
+      <circle cx={117} cy={47} r={2} fill="#FF8E8E" />
+      <circle cx={8} cy={53} r={2} fill="#FF8E8E" />
+    </svg>
+  )
+}
+
+export default SvgCozyUpgrade

package/react/Paywall/OnlyOfficePaywall.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+import { useClient } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+
+import useInstance from '../helpers/useInstance'
+import Spinner from '../Spinner'
+import { IllustrationDialog } from '../CozyDialogs'
+import Icon from '../Icon'
+import CozyUpgradeIcon from '../Icons/CozyUpgrade'
+import Button from '../Buttons'
+import Typography from '../Typography'
+import withLocales from '../I18n/withLocales'
+import { makeType } from './helpers'
+import fr from './locales/fr.json'
+import en from './locales/en.json'
+
+const locales = {
+  en,
+  fr
+}
+
+const OnlyOfficePaywall = ({ onClose, isPublic, t } = { isPublic: false }) => {
+  const client = useClient()
+  const instance = useInstance(client)
+
+  if (instance.state === 'loading' && instance.state !== 'loaded')
+    return (
+      <IllustrationDialog
+        open
+        size="small"
+        content={
+          <div className="u-h-5">
+            <Spinner size="xxlarge" noMargin middle />
+          </div>
+        }
+        onClose={onClose}
+      />
+    )
+
+  const link = buildPremiumLink(instance)
+  const type = makeType(instance, isPublic, link)
+
+  const onAction = () =>
+    type === 'premium' ? window.open(link, 'self') : onClose()
+
+  return (
+    <IllustrationDialog
+      open
+      size="small"
+      actionsLayout="column"
+      title={
+        <div className="u-flex u-flex-column u-flex-items-center">
+          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
+          <Typography variant="h3" className="u-mt-1">
+            {t(`onlyOfficePaywall.${type}.title`)}
+          </Typography>
+        </div>
+      }
+      actions={
+        <Button
+          onClick={onAction}
+          label={t(`onlyOfficePaywall.${type}.action`)}
+        />
+      }
+      content={
+        type === 'default' ? (
+          <ReactMarkdown
+            source={t('onlyOfficePaywall.default.content', {
+              mail: instance?.context?.data?.attributes?.reply_to
+            })}
+            renderers={{
+              paragraph: props => (
+                <span className="u-mv-0">{props.children}</span>
+              )
+            }}
+          />
+        ) : (
+          t(`onlyOfficePaywall.${type}.content`)
+        )
+      }
+      onClose={onClose}
+    />
+  )
+}
+
+export default withLocales(locales)(OnlyOfficePaywall)

package/react/Paywall/Readme.md

@@ -0,0 +1,56 @@
+This modal is designed to restrict access to a feature to encourage upgrading
+
+### Paywall for OnlyOffice
+
+```jsx
+import { OnlyOfficePaywall } from "cozy-ui/transpiled/react/Paywall";
+import { CozyProvider } from "cozy-client";
+import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints";
+import Variants from 'cozy-ui/docs/components/Variants';
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import Button from  'cozy-ui/transpiled/react/Buttons';
+
+const initialVariants = [{
+  isPublic: false,
+  premiumLink: false
+}]
+
+const makeClient = (premiumLink) => ({
+  getStackClient: () => ({
+    fetchJSON: (_, url) => {
+      let attributes = {}
+      if(url === '/settings/context') {
+        attributes = {
+          attributes: { 
+            enable_premium_links: premiumLink,  
+            manager_url: "http://mycozy.cloud",
+            reply_to: "support@cozy.io"
+          }
+        }
+      } else if(url === '/settings/instance') {
+        attributes = {
+          attributes: { uuid: "1223" }
+        } 
+      }
+      
+      return Promise.resolve({ data: attributes  })
+    }
+  })
+});
+
+<Variants initialVariants={initialVariants}>
+  {variant => (
+    <DemoProvider mockClient={makeClient(variant.premiumLink)}>
+      <div>
+        <Button onClick={() => setState({ modalOpened: !state.modalOpened })} label="Toggle modal"/>
+        {state.modalOpened && (
+          <OnlyOfficePaywall 
+            isPublic={variant.isPublic}
+            onClose={() => setState({ modalOpened: false })} />
+        )}
+      </div>
+    </DemoProvider>
+  )}
+</Variants>
+
+```

package/react/Paywall/helpers.js

@@ -0,0 +1,15 @@
+import { arePremiumLinksEnabled } from 'cozy-client/dist/models/instance'
+
+export const makeType = (instance, isPublic, link) => {
+  const hasPremiumEnabled = arePremiumLinksEnabled(instance)
+
+  if (hasPremiumEnabled && isPublic) {
+    return 'public'
+  }
+
+  if (hasPremiumEnabled && link) {
+    return 'premium'
+  }
+
+  return 'default'
+}

package/react/Paywall/index.jsx

@@ -0,0 +1 @@
+export { default as OnlyOfficePaywall } from './OnlyOfficePaywall'

package/react/Paywall/locales/en.json

@@ -0,0 +1,19 @@
+{
+  "onlyOfficePaywall": {
+    "premium": {
+      "title": "Reserved for the higher plan",
+      "content": "Your current offer does not allow you to take advantage of this feature. Please update your subscription.",
+      "action": "See packages"
+    },
+    "public": {
+      "title": "Information",
+      "content": "You cannot edit this file online. Please ask the document owner to update their Cozy subscription.",
+      "action": "I understood"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Your current offer does not allow you to take advantage of this feature. Please [contact us](mailto:%{mail}) to update your subscription.",
+      "action": "I understood"
+    }
+  }
+}

package/react/Paywall/locales/fr.json

@@ -0,0 +1,19 @@
+{
+  "onlyOfficePaywall": {
+    "premium": {
+      "title": "Réservé au forfait supérieur",
+      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité. Merci de mettre à jour votre abonnement.",
+      "action": "Voir les forfaits"
+    },
+    "public": {
+      "title": "Information",
+      "content": "Vous ne pouvez pas éditer ce fichier en ligne. Merci de demander au propriétaire du document de mettre à jour son abonnement Cozy.",
+      "action": "J'ai compris"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité. Merci de [nous contacter](mailto:%{mail}) afin de mettre à jour votre abonnement.",
+      "action": "J'ai compris"
+    }
+  }
+}

package/react/Viewer/Readme.md

@@ -35,7 +35,6 @@ The `Viewer` can display an **information panel** to show additional information
   * **OnlyOfficeViewer** : `<object>` – Used to open an Only Office file
     * **isEnabled** : `<boolean>` – Whether Only Office is enabled on the server
     * **opener** : `<function>` – To open the Only Office file
-
 ### Demo
 
 ```jsx

package/react/__snapshots__/examples.spec.jsx.snap

@@ -4465,6 +4465,25 @@ exports[`Icon should render examples: Icon 2`] = `
         </svg>
         <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Keychain</p>
       </div>
+      <div class=\\"u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 128 128\\" fill=\\"none\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 00-20.435-23.542 28.937 28.937 0 00-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006a28.862 28.862 0 00-6.54.974c-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 00.327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968z\\" fill=\\"#fff\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M57.845 24.584a26.48 26.48 0 015.954-.892 26.51 26.51 0 015.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 002.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 01-.291 5.324l-.018.106a19.73 19.73 0 01-.317 1.651A12.85 12.85 0 01115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 00-6.911-1.047 2.178 2.178 0 00-.358-.012 3.077 3.077 0 00-.193.01 31.244 31.244 0 00-6.916 1.05c-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 00.348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 01.06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 00-.018-.106 19.794 19.794 0 01-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 002.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 00-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 00-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 001.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323zm23.27 6.424a.035.035 0 01-.013-.003.07.07 0 00-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 001.312 2.813 2.194 2.194 0 002.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 104.127 1.501c.959-2.64 3.974-12.315-5.855-15.91z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756z\\" fill=\\"#B2D3FF\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 00-.325.816zm-4.963 8.787c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 00-.323.816zm7.456 10.861c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 00-.322.818zm12.526-3.453c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 00-.323.818zm1.846-9.921c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 00-.323.816z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 00-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201z\\" fill=\\"#FEDBA7\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M98.794 96.382a2.624 2.624 0 00-.988-.153 3.14 3.14 0 00-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702a116.38 116.38 0 00-1.14 3.038c-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 00-1.001-.703zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 011.011-2.577 5.78 5.78 0 014.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 01-.961.54 125.98 125.98 0 00-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002z\\" fill=\\"#3281EE\\"></path>
+          <path d=\\"M29.419 125.29a81.818 81.818 0 0016.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02z\\" fill=\\"#BBD9FD\\"></path>
+          <path d=\\"M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm73-21c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm-59 4c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0127.454 16zM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 01104.455 32z\\" fill=\\"#FF9300\\"></path>
+          <circle cx=\\"11\\" cy=\\"23\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"30\\" cy=\\"34\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"50\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"107\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"117\\" cy=\\"47\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"8\\" cy=\\"53\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+        </svg>
+        <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CozyUpgrade</p>
+      </div>
     </div>
   </div>
 </div>"
@@ -4530,6 +4549,23 @@ exports[`Icon should render examples: Icon 3`] = `
         <symbol id=\\"cozy\\" viewBox=\\"0 0 52 52\\">
           <path fill=\\"#297EF2\\" fill-rule=\\"evenodd\\" d=\\"M558.23098,44 L533.76902,44 C526.175046,44 520,37.756072 520,30.0806092 C520,26.4203755 521.393962,22.9628463 523.927021,20.3465932 C526.145918,18.0569779 529.020185,16.6317448 532.129554,16.2609951 C532.496769,13.1175003 533.905295,10.2113693 536.172045,7.96901668 C538.760238,5.40737823 542.179607,4 545.800788,4 C549.420929,4 552.841339,5.40737823 555.429532,7.96796639 C557.686919,10.2008665 559.091284,13.0912433 559.467862,16.2179336 C566.482405,16.8533543 572,22.8284102 572,30.0816594 C572,37.756072 565.820793,44 558.22994,44 L558.23098,44 Z M558.068077,40.9989547 L558.171599,40.9989547 C564.142748,40.9989547 569,36.0883546 569,30.0520167 C569,24.0167241 564.142748,19.1061239 558.171599,19.1061239 L558.062901,19.1061239 C557.28338,19.1061239 556.644649,18.478972 556.627051,17.6887604 C556.492472,11.7935317 551.63729,7 545.802791,7 C539.968291,7 535.111039,11.7956222 534.977495,17.690851 C534.959896,18.4664289 534.34187,19.0914904 533.573737,19.1092597 C527.743378,19.2451426 523,24.1536522 523,30.0530619 C523,36.0893999 527.857252,41 533.828401,41 L533.916395,41 L533.950557,40.9979094 C533.981614,40.9979094 534.01267,40.9979094 534.043727,41 L558.064971,41 L558.068077,40.9989547 Z M553.766421,29.2227318 C552.890676,28.6381003 552.847676,27.5643091 552.845578,27.5171094 C552.839285,27.2253301 552.606453,26.9957683 552.32118,27.0000592 C552.035908,27.0054228 551.809368,27.2467844 551.814612,27.5364185 C551.81671,27.5750363 551.831393,28.0792139 552.066323,28.6735 C548.949302,31.6942753 544.051427,31.698566 540.928113,28.6917363 C541.169336,28.0888684 541.185068,27.576109 541.185068,27.5374911 C541.190312,27.2478572 540.964821,27.0086409 540.681646,27.0011319 C540.401618,26.9925502 540.163541,27.2264027 540.154102,27.5160368 C540.154102,27.5589455 540.11215,28.6370275 539.234308,29.2216592 C538.995183,29.3825669 538.92806,29.7097461 539.08433,29.9532532 C539.182917,30.1077246 539.346529,30.1924694 539.516434,30.1924694 C539.612923,30.1924694 539.710461,30.1645787 539.797512,30.1066519 C540.023003,29.9564713 540.211786,29.7848363 540.370154,29.6024742 C542.104862,31.2008247 544.296845,32 546.488828,32 C548.686055,32 550.883282,31.1976066 552.621136,29.5917471 C552.780553,29.7762546 552.971434,29.9521804 553.203218,30.1066519 C553.289219,30.1645787 553.387806,30.1924694 553.484295,30.1924694 C553.652102,30.1924694 553.816763,30.1066519 553.916399,29.9521804 C554.07162,29.7076006 554.004497,29.3793488 553.766421,29.2205864 L553.766421,29.2227318 Z\\" transform=\\"translate(-520)\\"></path>
         </symbol>
+        <symbol id=\\"cozy-upgrade\\" viewBox=\\"0 0 128 128\\">
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 0 0-20.435-23.542 28.937 28.937 0 0 0-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006c-2.173.073-4.368.389-6.54.974-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 0 0 .327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968Z\\" fill=\\"#fff\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M57.845 24.584a26.48 26.48 0 0 1 5.954-.892 26.51 26.51 0 0 1 5.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 0 0 2.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 0 1-.291 5.324l-.018.106c-.07.49-.177 1.049-.317 1.651A12.85 12.85 0 0 1 115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 0 0-6.911-1.047 2.178 2.178 0 0 0-.358-.012c-.067.002-.127.004-.193.01-2.349.092-4.677.445-6.916 1.05-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 0 0 .348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 0 1 .06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 0 0-.018-.106 19.794 19.794 0 0 1-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 0 0 2.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 0 0-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 0 0-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 0 0 1.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323ZM105.09 78.09a.035.035 0 0 1-.013-.003.07.07 0 0 0-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 0 0 1.312 2.813 2.194 2.194 0 0 0 2.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 1 0 4.127 1.501c.959-2.64 3.974-12.315-5.855-15.91Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756Z\\" fill=\\"#B2D3FF\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 0 0-.325.816ZM83.962 100.497c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 0 0-.323.816ZM91.418 111.358c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 0 0-.322.818ZM103.944 107.905c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 0 0-.323.818ZM105.79 97.984c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 0 0-.323.816Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 0 0-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201Z\\" fill=\\"#FEDBA7\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M98.794 96.382a2.624 2.624 0 0 0-.988-.153 3.14 3.14 0 0 0-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702c-.332.845-.703 1.828-1.14 3.038-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 0 0-1.001-.703Zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 0 1 1.011-2.577 5.78 5.78 0 0 1 4.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 0 1-.961.54 125.98 125.98 0 0 0-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002Z\\" fill=\\"#3281EE\\"></path>
+          <path d=\\"M29.419 125.29a81.818 81.818 0 0 0 16.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02Z\\" fill=\\"#BBD9FD\\"></path>
+          <path d=\\"M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM89 22c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM30 26c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26Zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0 1 27.454 16ZM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818Zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 0 1 104.455 32Z\\" fill=\\"#FF9300\\"></path>
+          <circle cx=\\"11\\" cy=\\"23\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"30\\" cy=\\"34\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"50\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"107\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"117\\" cy=\\"47\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"8\\" cy=\\"53\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+        </symbol>
         <symbol id=\\"cross-white\\" viewBox=\\"0 0 24 24\\">
           <path fill=\\"#FFF\\" fill-rule=\\"evenodd\\" d=\\"M106.585786,44 L96.2928932,33.7071068 C95.9023689,33.3165825 95.9023689,32.6834175 96.2928932,32.2928932 C96.6834175,31.9023689 97.3165825,31.9023689 97.7071068,32.2928932 L108,42.5857864 L118.292893,32.2928932 C118.683418,31.9023689 119.316582,31.9023689 119.707107,32.2928932 C120.097631,32.6834175 120.097631,33.3165825 119.707107,33.7071068 L109.414214,44 L119.707107,54.2928932 C120.097631,54.6834175 120.097631,55.3165825 119.707107,55.7071068 C119.316582,56.0976311 118.683418,56.0976311 118.292893,55.7071068 L108,45.4142136 L97.7071068,55.7071068 C97.3165825,56.0976311 96.6834175,56.0976311 96.2928932,55.7071068 C95.9023689,55.3165825 95.9023689,54.6834175 96.2928932,54.2928932 L106.585786,44 Z\\" transform=\\"translate(-96 -32)\\"></path>
         </symbol>
@@ -5657,6 +5693,11 @@ exports[`Icon should render examples: Icon 3`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mb-1 u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">store</p>
     </div>
+    <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+        <use xlink:href=\\"#cozy-upgrade\\"></use>
+      </svg>
+      <p class=\\"MuiTypography-root u-mb-1 u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">cozy-upgrade</p>
+    </div>
   </div>
 </div>"
 `;
@@ -6150,6 +6191,23 @@ exports[`Icon should render examples: Icon 7`] = `
         <symbol id=\\"cozy\\" viewBox=\\"0 0 52 52\\">
           <path fill=\\"#297EF2\\" fill-rule=\\"evenodd\\" d=\\"M558.23098,44 L533.76902,44 C526.175046,44 520,37.756072 520,30.0806092 C520,26.4203755 521.393962,22.9628463 523.927021,20.3465932 C526.145918,18.0569779 529.020185,16.6317448 532.129554,16.2609951 C532.496769,13.1175003 533.905295,10.2113693 536.172045,7.96901668 C538.760238,5.40737823 542.179607,4 545.800788,4 C549.420929,4 552.841339,5.40737823 555.429532,7.96796639 C557.686919,10.2008665 559.091284,13.0912433 559.467862,16.2179336 C566.482405,16.8533543 572,22.8284102 572,30.0816594 C572,37.756072 565.820793,44 558.22994,44 L558.23098,44 Z M558.068077,40.9989547 L558.171599,40.9989547 C564.142748,40.9989547 569,36.0883546 569,30.0520167 C569,24.0167241 564.142748,19.1061239 558.171599,19.1061239 L558.062901,19.1061239 C557.28338,19.1061239 556.644649,18.478972 556.627051,17.6887604 C556.492472,11.7935317 551.63729,7 545.802791,7 C539.968291,7 535.111039,11.7956222 534.977495,17.690851 C534.959896,18.4664289 534.34187,19.0914904 533.573737,19.1092597 C527.743378,19.2451426 523,24.1536522 523,30.0530619 C523,36.0893999 527.857252,41 533.828401,41 L533.916395,41 L533.950557,40.9979094 C533.981614,40.9979094 534.01267,40.9979094 534.043727,41 L558.064971,41 L558.068077,40.9989547 Z M553.766421,29.2227318 C552.890676,28.6381003 552.847676,27.5643091 552.845578,27.5171094 C552.839285,27.2253301 552.606453,26.9957683 552.32118,27.0000592 C552.035908,27.0054228 551.809368,27.2467844 551.814612,27.5364185 C551.81671,27.5750363 551.831393,28.0792139 552.066323,28.6735 C548.949302,31.6942753 544.051427,31.698566 540.928113,28.6917363 C541.169336,28.0888684 541.185068,27.576109 541.185068,27.5374911 C541.190312,27.2478572 540.964821,27.0086409 540.681646,27.0011319 C540.401618,26.9925502 540.163541,27.2264027 540.154102,27.5160368 C540.154102,27.5589455 540.11215,28.6370275 539.234308,29.2216592 C538.995183,29.3825669 538.92806,29.7097461 539.08433,29.9532532 C539.182917,30.1077246 539.346529,30.1924694 539.516434,30.1924694 C539.612923,30.1924694 539.710461,30.1645787 539.797512,30.1066519 C540.023003,29.9564713 540.211786,29.7848363 540.370154,29.6024742 C542.104862,31.2008247 544.296845,32 546.488828,32 C548.686055,32 550.883282,31.1976066 552.621136,29.5917471 C552.780553,29.7762546 552.971434,29.9521804 553.203218,30.1066519 C553.289219,30.1645787 553.387806,30.1924694 553.484295,30.1924694 C553.652102,30.1924694 553.816763,30.1066519 553.916399,29.9521804 C554.07162,29.7076006 554.004497,29.3793488 553.766421,29.2205864 L553.766421,29.2227318 Z\\" transform=\\"translate(-520)\\"></path>
         </symbol>
+        <symbol id=\\"cozy-upgrade\\" viewBox=\\"0 0 128 128\\">
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 0 0-20.435-23.542 28.937 28.937 0 0 0-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006c-2.173.073-4.368.389-6.54.974-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 0 0 .327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968Z\\" fill=\\"#fff\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M57.845 24.584a26.48 26.48 0 0 1 5.954-.892 26.51 26.51 0 0 1 5.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 0 0 2.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 0 1-.291 5.324l-.018.106c-.07.49-.177 1.049-.317 1.651A12.85 12.85 0 0 1 115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 0 0-6.911-1.047 2.178 2.178 0 0 0-.358-.012c-.067.002-.127.004-.193.01-2.349.092-4.677.445-6.916 1.05-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 0 0 .348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 0 1 .06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 0 0-.018-.106 19.794 19.794 0 0 1-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 0 0 2.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 0 0-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 0 0-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 0 0 1.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323ZM105.09 78.09a.035.035 0 0 1-.013-.003.07.07 0 0 0-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 0 0 1.312 2.813 2.194 2.194 0 0 0 2.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 1 0 4.127 1.501c.959-2.64 3.974-12.315-5.855-15.91Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756Z\\" fill=\\"#B2D3FF\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 0 0-.325.816ZM83.962 100.497c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 0 0-.323.816ZM91.418 111.358c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 0 0-.322.818ZM103.944 107.905c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 0 0-.323.818ZM105.79 97.984c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 0 0-.323.816Z\\" fill=\\"#3281EE\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 0 0-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201Z\\" fill=\\"#FEDBA7\\"></path>
+          <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M98.794 96.382a2.624 2.624 0 0 0-.988-.153 3.14 3.14 0 0 0-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702c-.332.845-.703 1.828-1.14 3.038-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 0 0-1.001-.703Zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 0 1 1.011-2.577 5.78 5.78 0 0 1 4.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 0 1-.961.54 125.98 125.98 0 0 0-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002Z\\" fill=\\"#3281EE\\"></path>
+          <path d=\\"M29.419 125.29a81.818 81.818 0 0 0 16.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02Z\\" fill=\\"#BBD9FD\\"></path>
+          <path d=\\"M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM89 22c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22ZM30 26c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26Zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0 1 27.454 16ZM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818Zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 0 1 104.455 32Z\\" fill=\\"#FF9300\\"></path>
+          <circle cx=\\"11\\" cy=\\"23\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"30\\" cy=\\"34\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"50\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"107\\" cy=\\"12\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"117\\" cy=\\"47\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+          <circle cx=\\"8\\" cy=\\"53\\" r=\\"2\\" fill=\\"#FF8E8E\\"></circle>
+        </symbol>
         <symbol id=\\"cross-white\\" viewBox=\\"0 0 24 24\\">
           <path fill=\\"#FFF\\" fill-rule=\\"evenodd\\" d=\\"M106.585786,44 L96.2928932,33.7071068 C95.9023689,33.3165825 95.9023689,32.6834175 96.2928932,32.2928932 C96.6834175,31.9023689 97.3165825,31.9023689 97.7071068,32.2928932 L108,42.5857864 L118.292893,32.2928932 C118.683418,31.9023689 119.316582,31.9023689 119.707107,32.2928932 C120.097631,32.6834175 120.097631,33.3165825 119.707107,33.7071068 L109.414214,44 L119.707107,54.2928932 C120.097631,54.6834175 120.097631,55.3165825 119.707107,55.7071068 C119.316582,56.0976311 118.683418,56.0976311 118.292893,55.7071068 L108,45.4142136 L97.7071068,55.7071068 C97.3165825,56.0976311 96.6834175,56.0976311 96.2928932,55.7071068 C95.9023689,55.3165825 95.9023689,54.6834175 96.2928932,54.2928932 L106.585786,44 Z\\" transform=\\"translate(-96 -32)\\"></path>
         </symbol>

package/react/helpers/useInstance.jsx

@@ -3,9 +3,11 @@ import { useState, useEffect } from 'react'
 const useInstance = client => {
   const [instance, setInstance] = useState()
   const [context, setContext] = useState()
+  const [state, setState] = useState('idle')
   useEffect(() => {
     const fetchData = async () => {
       try {
+        setState('loading')
         const instancePromise = client
           .getStackClient()
           .fetchJSON('GET', '/settings/instance')
@@ -24,13 +26,17 @@ const useInstance = client => {
         if (!(contextFetched instanceof Error)) {
           setContext(contextFetched)
         }
-      } catch (e) {} //eslint-disable-line
+        setState('loaded')
+      } catch (e) {
+        setState('failed')
+      }
     }
     fetchData()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return {
+    state,
     instance,
     context
   }

package/react/index.js

@@ -73,6 +73,7 @@ export { default as PercentageLine } from './PercentageLine'
 export { default as Popup } from './Popup'
 export { default as IconStack } from './IconStack'
 export { default as QuotaAlert } from './QuotaAlert'
+export { OnlyOfficePaywall } from './Paywall'
 export {
   default as ViewStack,
   ModalStack,