cozy-ui 138.3.0 → 138.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [138.5.0](https://github.com/cozy/cozy-ui/compare/v138.4.0...v138.5.0) (2026-04-10)
+
+
+### Features
+
+* Change the CloudSync icon ([a4ad3a0](https://github.com/cozy/cozy-ui/commit/a4ad3a0))
+
+# [138.4.0](https://github.com/cozy/cozy-ui/compare/v138.3.0...v138.4.0) (2026-04-09)
+
+
+### Features
+
+* Add new menu icon ([49a2ef6](https://github.com/cozy/cozy-ui/commit/49a2ef6))
+
 # [138.3.0](https://github.com/cozy/cozy-ui/compare/v138.2.0...v138.3.0) (2026-04-08)
 
 

package/assets/icons/illus/cloud-sync.svg

@@ -1,8 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <path fill="#B2D3FF" d="M8.889 27.892c-4.91 0-8.889-3.98-8.889-8.889 0-4.353 3.129-7.975 7.26-8.74.765-4.13 4.387-7.26 8.74-7.26 4.353 0 7.975 3.13 8.74 7.26 4.131.765 7.26 4.387 7.26 8.74 0 4.822-3.839 8.747-8.627 8.885l-.262.004H8.89z"/>
-            <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>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13 9.987c-.013 0-.02 0-.033.006A2.327 2.327 0 0 0 10.667 8 2.33 2.33 0 0 0 8.56 9.347a1.992 1.992 0 0 0-1.893 1.986c0 1.107.893 2 2 2L13 13.32a1.667 1.667 0 0 0 0-3.333ZM13.007 12h-4.34A.669.669 0 0 1 8 11.333c0-.366.3-.666.667-.666H9.5V10.5c0-.647.52-1.167 1.167-1.167.646 0 1.167.52 1.167 1.167v.833h1.173a.33.33 0 0 1 .333.334.343.343 0 0 1-.333.333ZM5.334 2.84v1.393A4 4 0 0 0 2.667 8c0 1.18.52 2.227 1.333 2.96V9.333h1.333v4h-4V12h1.82a5.295 5.295 0 0 1-1.82-4 5.33 5.33 0 0 1 4-5.16ZM12 4h-1.82a5.32 5.32 0 0 1 1.774 3.333h-1.347A4.002 4.002 0 0 0 9.334 5.04v1.627H8v-4h4V4Z"/></svg>

package/assets/icons/ui/menu.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.524 2c1.19 0 2.133 0 2.884.08.773.08 1.408.248 1.951.626.377.263.699.582.951.942.369.523.532 1.127.612 1.874C16 6.258 16 7.185 16 8.374v.052c0 1.189 0 2.116-.078 2.851-.08.747-.243 1.352-.612 1.874-.252.36-.574.68-.95.943-.544.378-1.18.547-1.952.628-.751.078-1.694.078-2.884.078H6.476c-1.19 0-2.133 0-2.884-.078-.773-.081-1.407-.25-1.951-.628a3.859 3.859 0 0 1-.952-.943c-.368-.522-.531-1.127-.61-1.874C0 10.542 0 9.614 0 8.426v-.052c0-1.188 0-2.116.078-2.852.08-.747.243-1.351.611-1.874.253-.36.575-.679.952-.942.543-.378 1.179-.546 1.95-.627C4.344 2 5.287 2 6.477 2h3.048Zm-3.012.984c-1.234 0-2.11.001-2.788.073-.664.069-1.072.2-1.393.423-.274.193-.51.427-.693.69-.238.336-.376.766-.449 1.444-.072.686-.073 1.566-.073 2.786s0 2.101.073 2.785c.073.678.211 1.11.449 1.445.19.271.426.504.693.69.32.223.73.355 1.393.424.494.052 1.092.062 1.857.066V3h1.116v10.815h2.791c1.234 0 2.11 0 2.788-.072.664-.069 1.072-.2 1.393-.424.267-.185.502-.417.693-.688.238-.336.376-.767.448-1.446.072-.684.074-1.565.074-2.785 0-1.22 0-2.101-.074-2.786-.072-.678-.21-1.109-.448-1.444a2.815 2.815 0 0 0-.693-.69c-.32-.223-.73-.354-1.393-.423-.678-.071-1.555-.073-2.788-.073H6.512ZM3.535 7.651a.559.559 0 1 1 0 1.117h-.744a.56.56 0 0 1-.559-.559.558.558 0 0 1 .559-.558h.744Zm0-2.232a.559.559 0 1 1 0 1.116h-.744a.56.56 0 0 1-.559-.558.558.558 0 0 1 .559-.558h.744Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "138.3.0",
+  "version": "138.5.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Icon/Readme.md

@@ -235,6 +235,7 @@ import MagicTrick from 'cozy-ui/transpiled/react/Icons/MagicTrick'
 import Magnet from 'cozy-ui/transpiled/react/Icons/Magnet'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
 import Matrix from 'cozy-ui/transpiled/react/Icons/Matrix'
+import Menu from 'cozy-ui/transpiled/react/Icons/Menu'
 import Merge from 'cozy-ui/transpiled/react/Icons/Merge'
 import Moped from 'cozy-ui/transpiled/react/Icons/Moped'
 import Mosaic from 'cozy-ui/transpiled/react/Icons/Mosaic'
@@ -532,6 +533,7 @@ const icons = [
   Magnet,
   Magnifier,
   Matrix,
+  Menu,
   Merge,
   Moped,
   Mosaic,
@@ -1028,7 +1030,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp', 'article', 'assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expand','expert','export','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','narrow','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','sharings','share-external','shield','shield-infected','shield-clean','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','upgrade-plan','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp', 'article', 'assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expand','expert','export','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','menu','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','narrow','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','sharings','share-external','shield','shield-infected','shield-clean','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','upgrade-plan','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/CloudSync.jsx

@@ -3,17 +3,8 @@ import React from 'react'
 
 function SvgCloudSync(props) {
   return (
-    <svg viewBox="0 0 32 32" {...props}>
-      <g fill="none" fillRule="evenodd">
-        <path
-          fill="#B2D3FF"
-          d="M8.889 27.892A8.889 8.889 0 010 19.003a8.892 8.892 0 017.26-8.74c.765-4.13 4.387-7.26 8.74-7.26 4.353 0 7.975 3.13 8.74 7.26a8.892 8.892 0 017.26 8.74 8.888 8.888 0 01-8.627 8.885l-.262.004H8.89z"
-        />
-        <path
-          fill="#297EF1"
-          d="M22.052 19.17a.89.89 0 01.405 1.19c-1.201 2.435-3.707 4.032-6.457 4.032-2.103 0-4.04-.962-5.373-2.471a.875.875 0 01-.85.693.889.889 0 01-.888-.889V18.17c0-.056.014-.106.023-.158.005-.024.004-.048.01-.071a.866.866 0 01.132-.285l.022-.024a.896.896 0 01.879-.327c.024.005.047.012.07.018a.842.842 0 01.22.102c.024.015.048.026.071.043.01.008.021.011.031.02l2.667 2.221a.89.89 0 01.113 1.252c-.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.04a.889.889 0 011.19-.404zm1.031-2.589c-.003.018-.002.036-.007.053a.862.862 0 01-.138.28c-.011.016-.024.026-.035.039a.88.88 0 01-.19.171c-.023.016-.043.03-.067.043a.91.91 0 01-.295.103c-.003 0-.005.002-.007.003-.008 0-.015-.003-.023-.002a.85.85 0 01-.362-.036.884.884 0 01-.225-.11c-.02-.014-.042-.023-.06-.038-.007-.005-.015-.006-.02-.012l-2.668-2.223a.888.888 0 01-.113-1.251.872.872 0 01.713-.305A5.448 5.448 0 0016 11.948c-2.103 0-4.007 1.213-4.89 3.06a.887.887 0 11-1.604-.764C10.682 11.78 13.21 10.17 16 10.17c2.127 0 4.061.93 5.385 2.412a.876.876 0 01.837-.634.89.89 0 01.889.888v3.556c0 .068-.014.128-.028.19z"
-        />
-      </g>
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M13 9.987c-.013 0-.02 0-.033.006A2.327 2.327 0 0010.667 8 2.33 2.33 0 008.56 9.347a1.992 1.992 0 00-1.893 1.986c0 1.107.893 2 2 2L13 13.32a1.667 1.667 0 000-3.333zM13.007 12h-4.34A.669.669 0 018 11.333c0-.366.3-.666.667-.666H9.5V10.5c0-.647.52-1.167 1.167-1.167.646 0 1.167.52 1.167 1.167v.833h1.173a.33.33 0 01.333.334.343.343 0 01-.333.333zM5.334 2.84v1.393A4 4 0 002.667 8c0 1.18.52 2.227 1.333 2.96V9.333h1.333v4h-4V12h1.82a5.295 5.295 0 01-1.82-4 5.33 5.33 0 014-5.16zM12 4h-1.82a5.32 5.32 0 011.774 3.333h-1.347A4.002 4.002 0 009.334 5.04v1.627H8v-4h4V4z" />
     </svg>
   )
 }

package/react/Icons/Menu.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/menu.svg` to regenerate;
+import React from 'react'
+
+function SvgMenu(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M9.524 2c1.19 0 2.133 0 2.884.08.773.08 1.408.248 1.951.626.377.263.699.582.951.942.369.523.532 1.127.612 1.874C16 6.258 16 7.185 16 8.374v.052c0 1.189 0 2.116-.078 2.851-.08.747-.243 1.352-.612 1.874-.252.36-.574.68-.95.943-.544.378-1.18.547-1.952.628-.751.078-1.694.078-2.884.078H6.476c-1.19 0-2.133 0-2.884-.078-.773-.081-1.407-.25-1.951-.628a3.859 3.859 0 01-.952-.943c-.368-.522-.531-1.127-.61-1.874C0 10.542 0 9.614 0 8.426v-.052c0-1.188 0-2.116.078-2.852.08-.747.243-1.351.611-1.874.253-.36.575-.679.952-.942.543-.378 1.179-.546 1.95-.627C4.344 2 5.287 2 6.477 2h3.048zm-3.012.984c-1.234 0-2.11.001-2.788.073-.664.069-1.072.2-1.393.423-.274.193-.51.427-.693.69-.238.336-.376.766-.449 1.444-.072.686-.073 1.566-.073 2.786s0 2.101.073 2.785c.073.678.211 1.11.449 1.445.19.271.426.504.693.69.32.223.73.355 1.393.424.494.052 1.092.062 1.857.066V3h1.116v10.815h2.791c1.234 0 2.11 0 2.788-.072.664-.069 1.072-.2 1.393-.424.267-.185.502-.417.693-.688.238-.336.376-.767.448-1.446.072-.684.074-1.565.074-2.785 0-1.22 0-2.101-.074-2.786-.072-.678-.21-1.109-.448-1.444a2.815 2.815 0 00-.693-.69c-.32-.223-.73-.354-1.393-.423-.678-.071-1.555-.073-2.788-.073H6.512zM3.535 7.651a.559.559 0 110 1.117h-.744a.56.56 0 01-.559-.559.558.558 0 01.559-.558h.744zm0-2.232a.559.559 0 110 1.116h-.744a.56.56 0 01-.559-.558.558.558 0 01.559-.558h.744z" />
+    </svg>
+  )
+}
+
+export default SvgMenu

package/react/ProgressionBanner/Readme.md

@@ -1,35 +1,41 @@
 A banner with a progress bar at the bottom.
 
 ```jsx
-import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression'
-import ProgressionBanner from 'cozy-ui/transpiled/react/ProgressionBanner'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync'
-import Variants from 'cozy-ui/docs/components/Variants'
-import MuiButton from 'cozy-ui/transpiled/react/Button'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import useProgression from "cozy-ui/transpiled/react/helpers/useProgression";
+import ProgressionBanner from "cozy-ui/transpiled/react/ProgressionBanner";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CloudSync from "cozy-ui/transpiled/react/Icons/CloudSync2";
+import Variants from "cozy-ui/docs/components/Variants";
+import MuiButton from "cozy-ui/transpiled/react/Button";
+import { BreakpointsProvider } from "cozy-ui/transpiled/react/providers/Breakpoints";
 
-const { progression } = useProgression()
+const { progression } = useProgression();
 
 const initialVariants = [
-  { withValue: true, progressBar: true, withButton: false }
-]
-
-;
+  { withValue: true, progressBar: true, withButton: false },
+];
 
 <BreakpointsProvider>
   <Variants initialVariants={initialVariants}>
-    {variant => (
+    {(variant) => (
       <ProgressionBanner
         progressBar={variant.progressBar}
         value={variant.withValue && progression}
-        text={variant.withButton ? "Storage limit nearly reached" : "4 remaining items"}
+        text={
+          variant.withButton
+            ? "Storage limit nearly reached"
+            : "4 remaining items"
+        }
         icon={<Icon icon={CloudSync} />}
-        button={variant.withButton && <MuiButton color='primary' onClick={() => alert("Clicked!")}>
-            Manage your storage space
-          </MuiButton>}
+        button={
+          variant.withButton && (
+            <MuiButton color="primary" onClick={() => alert("Clicked!")}>
+              Manage your storage space
+            </MuiButton>
+          )
+        }
       />
     )}
   </Variants>
-</BreakpointsProvider>
+</BreakpointsProvider>;
 ```