cozy-ui 134.1.0 → 135.0.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [135.0.0](https://github.com/cozy/cozy-ui/compare/v134.2.0...v135.0.0) (2025-12-04)
+
+
+### Features
+
+* Add twake-i18n package ([7b9ff5f](https://github.com/cozy/cozy-ui/commit/7b9ff5f))
+* Remove I18n ([df09711](https://github.com/cozy/cozy-ui/commit/df09711))
+* Replace I18n stuff by twake-i18n ([ab99763](https://github.com/cozy/cozy-ui/commit/ab99763))
+
+
+### BREAKING CHANGES
+
+* No longer expose I18n provider. You must import everything previously based on `providers/I18n` from `twake-i18n`.
+You can use this codemods to migrate:
+
+```
+yarn add twake-i18n
+yarn global add @cozy/codemods
+yarn global add jscodeshift@0.13.1
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-ui-bc-135.js src babel --ignore-pattern=src/targets/ --extensions js,jsx,tsx --parser tsx
+```
+
+You probably will need to fix linter issue after that with something like `yarn lint --fix`.
+* you must have `twake-i18n >= 0.3.0`
+
+# [134.2.0](https://github.com/cozy/cozy-ui/compare/v134.1.0...v134.2.0) (2025-12-04)
+
+
+### Features
+
+* **Icon:** Add database and expert ([1032391](https://github.com/cozy/cozy-ui/commit/1032391))
+
 # [134.1.0](https://github.com/cozy/cozy-ui/compare/v134.0.0...v134.1.0) (2025-12-04)
 
 

package/assets/icons/ui/database.svg

@@ -0,0 +1 @@
+<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><path d="M14 3.46c0 1.91-3.134 3.459-7 3.459S0 5.37 0 3.459C0 1.55 3.134 0 7 0s7 1.549 7 3.46zM14 13.89C12.691 15.142 10.049 16 7 16s-5.691-.857-7-2.11v-1.729c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" /><path d="M14 10.863c-1.309 1.253-3.951 2.11-7 2.11s-5.691-.857-7-2.11V9.134c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" /><path d="M14 7.836c-1.309 1.252-3.951 2.11-7 2.11s-5.691-.858-7-2.11V6.107c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" /></svg>

package/assets/icons/ui/expert.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.838 12.894a.455.455 0 01.377.12l.538.516-.91 2.47-.585-1.239-1.254.578.85-2.309.985-.136zM13.695 12.894l1.015.141c.074.01.146 0 .212-.023l.858 2.326-1.254-.576L13.941 16l-.976-2.649.354-.336c.1-.096.238-.14.376-.121zM12.01 7.552c.08-.246.433-.246.514 0l.231.702c.036.11.14.186.257.186h.748c.263 0 .371.33.16.483l-.605.433a.267.267 0 00-.098.3l.23.702c.082.246-.204.451-.416.3l-.605-.435a.274.274 0 00-.319 0l-.605.434c-.212.152-.497-.053-.417-.299l.232-.702a.267.267 0 00-.098-.3l-.605-.433c-.212-.152-.103-.483.159-.483h.748a.271.271 0 00.257-.186l.231-.702z" />
+  <path clip-rule="evenodd"
+    d="M11.953 5.458a.457.457 0 01.628 0l.536.513c.1.095.24.14.377.12l.738-.102a.451.451 0 01.508.364l.129.725c.024.135.11.252.232.317l.66.345c.214.112.3.373.193.59l-.328.66a.442.442 0 000 .392l.328.66a.444.444 0 01-.194.59l-.659.346a.447.447 0 00-.232.317l-.13.725a.45.45 0 01-.507.363l-.738-.102a.455.455 0 00-.377.12l-.536.513a.457.457 0 01-.628 0l-.536-.513a.455.455 0 00-.376-.12l-.739.102a.45.45 0 01-.507-.363l-.13-.725a.446.446 0 00-.233-.317l-.66-.346a.444.444 0 01-.193-.59l.328-.66a.442.442 0 000-.391l-.328-.662a.444.444 0 01.194-.59l.66-.344a.446.446 0 00.232-.317l.13-.725a.45.45 0 01.507-.364l.739.103a.456.456 0 00.376-.121l.536-.513zm.314 1.312c-1.352 0-2.447 1.082-2.447 2.416 0 1.335 1.095 2.416 2.447 2.416 1.35 0 2.447-1.082 2.448-2.416 0-1.334-1.097-2.416-2.448-2.416z" />
+  <path
+    d="M6.4 8c.555 0 1.094.036 1.607.102-.022.222.014.453.12.669l.237.478-.237.48a1.24 1.24 0 00.535 1.64l.477.253.093.526c.027.148.079.287.151.41l-.088.242H0v-1.6C0 9.432 2.864 8 6.4 8zM6.4 0a3.202 3.202 0 013.2 3.2A3.2 3.2 0 116.4 0z" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "134.1.0",
+  "version": "135.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -151,6 +151,7 @@
     "svg-sprite-loader": "4.1.6",
     "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
+    "twake-i18n": "^0.3.0",
     "url-loader": "1.1.2",
     "webpack": "4.39.3",
     "whatwg-fetch": "3.5.0"
@@ -187,7 +188,8 @@
     "react": "^16 || ^17 || ^18",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^16 || ^17 || ^18"
+    "react-dom": "^16 || ^17 || ^18",
+    "twake-i18n": ">=0.3.0"
   },
   "eslintConfig": {
     "extends": [

package/react/ActionsBar/index.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useRef, useState, useMemo } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import ResponsiveAction from './ResponsiveAction'
 import withActionsLocales from './locales/withActionsLocales'
@@ -19,7 +20,6 @@ import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({

package/react/ActionsBar/locales/withActionsLocales.jsx

@@ -1,8 +1,9 @@
+import { withOnlyLocales } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/ActionsMenu/Actions/locales/withActionsLocales.jsx

@@ -1,9 +1,9 @@
+import { withOnlyLocales, getI18n } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import { getI18n } from '../../../providers/I18n/helpers'
-import withOnlyLocales from '../../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/ActionsMenu/ActionsItems.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, useMemo } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import { useWebviewIntent } from 'cozy-intent'
 
 import { getActionName, getOnlyNeededActions } from './Actions/helpers'
-import { useI18n } from '../providers/I18n'
 
 const ActionsItems = forwardRef(
   (

package/react/ActionsMenu/ActionsMenuButton.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import ActionsMenu from '.'
 import { locales } from './Actions/locales/withActionsLocales'
@@ -6,7 +7,6 @@ import Icon from '../Icon'
 import IconButton from '../IconButton'
 import DotsIcon from '../Icons/Dots'
 import ListItemIcon from '../ListItemIcon'
-import { useI18n, useExtendI18n } from '../providers/I18n'
 
 const ActionsMenuButton = ({ docs, actions }) => {
   const [showActions, setShowActions] = useState(false)

package/react/CozyDialogs/DialogBackButton.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { createUseI18n } from 'twake-i18n'
 
 import locales from './locales'
 import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import PreviousIcon from '../Icons/Previous'
-import { createUseI18n } from '../providers/I18n'
 
 const useI18n = createUseI18n(locales)
 

package/react/CozyDialogs/DialogCloseButton.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { createUseI18n } from 'twake-i18n'
 
 import locales from './locales'
 import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import CrossMediumIcon from '../Icons/CrossMedium'
-import { createUseI18n } from '../providers/I18n'
 
 const useI18n = createUseI18n(locales)
 

package/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import CozyLocation from './icons/CozyLocation'
 import withSpecificDialogsLocales from './withSpecificDialogsLocales'
@@ -7,7 +8,6 @@ import { IllustrationDialog } from '..'
 import Button from '../../Buttons'
 import Icon from '../../Icon'
 import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
 
 const createStyles = () => ({
   typography: {

package/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import DefaultQRCode from './icons/QRCodeInstallFlagshipAppDialog.png'
 import appStoreIcon from './icons/appstore.png'
@@ -8,7 +9,6 @@ import withSpecificDialogsLocales from './withSpecificDialogsLocales'
 import { IllustrationDialog } from '..'
 import Link from '../../Link'
 import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
 
 const InstallFlagshipAppDialog = forwardRef(
   ({ onClose, playStoreUrl, appStoreUrl, QRCode }, ref) => {

package/react/CozyDialogs/SpecificDialogs/ShortcutDialog.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import {
   checkAndSaveShortcut,
@@ -11,7 +12,6 @@ import Button from '../../Buttons'
 import Stack from '../../Stack'
 import TextField from '../../TextField'
 import { useAlert } from '../../providers/Alert'
-import { useI18n } from '../../providers/I18n'
 
 const ENTER_KEY = 13
 

package/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx

@@ -1,8 +1,9 @@
+import { withOnlyLocales } from 'twake-i18n'
+
 import en from './locales/en.json'
 import fr from './locales/fr.json'
 import ru from './locales/ru.json'
 import vi from './locales/vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/DateMonthPicker/Readme.md

@@ -1,5 +1,5 @@
 ```jsx
-import I18n from 'cozy-ui/transpiled/react/providers/I18n';
+import I18n from 'twake-i18n';
 import DateMonthPicker from 'cozy-ui/transpiled/react/DateMonthPicker';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 import Button from 'cozy-ui/transpiled/react/deprecated/Button';

package/react/DateMonthPicker/index.jsx

@@ -3,12 +3,12 @@ import format from 'date-fns/format'
 import range from 'lodash/range'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
 import LeftIcon from '../Icons/Left'
 import RightIcon from '../Icons/Right'
-import { useI18n } from '../providers/I18n'
 
 const MonthButton = ({ monthNum, onClick, isSelected }) => {
   const { f } = useI18n()

package/react/DateMonthPicker/index.spec.jsx

@@ -1,8 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
+import I18n from 'twake-i18n'
 
 import DateMonthPicker from '.'
-import I18n from '../providers/I18n'
 
 describe('DateMonthPicker', () => {
   const setup = ({ initialValue }) => {

package/react/DatePicker/index.jsx

@@ -16,11 +16,11 @@ import LocaleFR from 'date-fns/locale/fr'
 import subDays from 'date-fns/subDays'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useState } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import { makeFormat } from './helpers'
 import withOwnLocales from './locales/withOwnLocales'
 import useBreakpoints from '../providers/Breakpoints'
-import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
 const localesFNS = {

package/react/DatePicker/locales/withOwnLocales.jsx

@@ -1,8 +1,9 @@
+import { withOnlyLocales } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/EditBadge/EditMenu.jsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { handleDelete, handleUpload } from './helpers'
 import { locales } from './locales'
@@ -10,7 +11,6 @@ import ListItemText from '../ListItemText'
 import Menu from '../Menu'
 import MenuItem from '../MenuItem'
 import { useAlert } from '../providers/Alert'
-import { useI18n, useExtendI18n } from '../providers/I18n'
 
 const EditMenu = ({
   anchorRef,

package/react/Icon/Readme.md

@@ -146,6 +146,7 @@ import CrossSmall from 'cozy-ui/transpiled/react/Icons/CrossSmall'
 import Cube from 'cozy-ui/transpiled/react/Icons/Cube'
 import Dash from 'cozy-ui/transpiled/react/Icons/Dash'
 import Dashboard from 'cozy-ui/transpiled/react/Icons/Dashboard'
+import Database from 'cozy-ui/transpiled/react/Icons/Database'
 import DataControl from 'cozy-ui/transpiled/react/Icons/DataControl'
 import Debit from 'cozy-ui/transpiled/react/Icons/Debit'
 import DesktopDownload from 'cozy-ui/transpiled/react/Icons/DesktopDownload'
@@ -168,6 +169,7 @@ import EmailOpen from 'cozy-ui/transpiled/react/Icons/EmailOpen'
 import Eu from 'cozy-ui/transpiled/react/Icons/Eu'
 import Euro from 'cozy-ui/transpiled/react/Icons/Euro'
 import Exchange from 'cozy-ui/transpiled/react/Icons/Exchange'
+import Expert from 'cozy-ui/transpiled/react/Icons/Expert'
 import Eye from 'cozy-ui/transpiled/react/Icons/Eye'
 import EyeClosed from 'cozy-ui/transpiled/react/Icons/EyeClosed'
 import FaceId from 'cozy-ui/transpiled/react/Icons/FaceId'
@@ -431,6 +433,7 @@ const icons = [
   Cube,
   Dash,
   Dashboard,
+  Database,
   DataControl,
   Debit,
   DesktopDownload,
@@ -453,6 +456,7 @@ const icons = [
   Eu,
   Euro,
   Exchange,
+  Expert,
   Eye,
   EyeClosed,
   FaceId,
@@ -1000,7 +1004,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','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','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','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','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','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','expert','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','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','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/Database.jsx

@@ -0,0 +1,14 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/database.svg` to regenerate;
+import React from 'react'
+
+function SvgDatabase(props) {
+  return (
+    <svg viewBox="0 0 14 16" {...props}>
+      <path d="M14 3.46c0 1.91-3.134 3.459-7 3.459S0 5.37 0 3.459C0 1.55 3.134 0 7 0s7 1.549 7 3.46zm0 10.43C12.691 15.142 10.049 16 7 16s-5.691-.857-7-2.11v-1.729c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" />
+      <path d="M14 10.863c-1.309 1.253-3.951 2.11-7 2.11s-5.691-.857-7-2.11V9.134c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" />
+      <path d="M14 7.836c-1.309 1.252-3.951 2.11-7 2.11s-5.691-.858-7-2.11V6.107c1.308 1.253 3.951 2.11 7 2.11s5.692-.858 7-2.11v1.73z" />
+    </svg>
+  )
+}
+
+export default SvgDatabase

package/react/Icons/Expert.jsx

@@ -0,0 +1,17 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/expert.svg` to regenerate;
+import React from 'react'
+
+function SvgExpert(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M10.838 12.894a.455.455 0 01.377.12l.538.516-.91 2.47-.585-1.239-1.254.578.85-2.309.985-.136zm2.857 0l1.015.141c.074.01.146 0 .212-.023l.858 2.326-1.254-.576L13.941 16l-.976-2.649.354-.336c.1-.096.238-.14.376-.121zM12.01 7.552c.08-.246.433-.246.514 0l.231.702c.036.11.14.186.257.186h.748c.263 0 .371.33.16.483l-.605.433a.267.267 0 00-.098.3l.23.702c.082.246-.204.451-.416.3l-.605-.435a.274.274 0 00-.319 0l-.605.434c-.212.152-.497-.053-.417-.299l.232-.702a.267.267 0 00-.098-.3l-.605-.433c-.212-.152-.103-.483.159-.483h.748a.271.271 0 00.257-.186l.231-.702z" />
+      <path
+        clipRule="evenodd"
+        d="M11.953 5.458a.457.457 0 01.628 0l.536.513c.1.095.24.14.377.12l.738-.102a.451.451 0 01.508.364l.129.725a.45.45 0 00.232.317l.66.345c.214.112.3.373.193.59l-.328.66a.442.442 0 000 .392l.328.66a.444.444 0 01-.194.59l-.659.346a.447.447 0 00-.232.317l-.13.725a.45.45 0 01-.507.363l-.738-.102a.455.455 0 00-.377.12l-.536.513a.457.457 0 01-.628 0l-.536-.513a.455.455 0 00-.376-.12l-.739.102a.45.45 0 01-.507-.363l-.13-.725a.446.446 0 00-.233-.317l-.66-.346a.444.444 0 01-.193-.59l.328-.66a.442.442 0 000-.391l-.328-.662a.444.444 0 01.194-.59l.66-.344a.446.446 0 00.232-.317l.13-.725a.45.45 0 01.507-.364l.739.103a.456.456 0 00.376-.121l.536-.513zm.314 1.312c-1.352 0-2.447 1.082-2.447 2.416 0 1.335 1.095 2.416 2.447 2.416 1.35 0 2.447-1.082 2.448-2.416 0-1.334-1.097-2.416-2.448-2.416z"
+      />
+      <path d="M6.4 8c.555 0 1.094.036 1.607.102-.022.222.014.453.12.669l.237.478-.237.48a1.24 1.24 0 00.535 1.64l.477.253.093.526c.027.148.079.287.151.41l-.088.242H0v-1.6C0 9.432 2.864 8 6.4 8zm0-8a3.202 3.202 0 013.2 3.2A3.2 3.2 0 116.4 0z" />
+    </svg>
+  )
+}
+
+export default SvgExpert

package/react/Labs/PasswordInput/index.jsx

@@ -7,8 +7,8 @@ import styles from './styles.styl'
 import Icon from '../../Icon'
 import EyeIcon from '../../Icons/Eye'
 import EyeClosedIcon from '../../Icons/EyeClosed'
-import Input from '../../legacy/Input'
 import InputGroup from '../../InputGroup'
+import Input from '../../legacy/Input'
 
 const HideShowButton = props => {
   const { hidden, className, ...rest } = props

package/react/Nav/index.jsx

@@ -1,5 +1,6 @@
 import cx from 'classnames'
 import React, { Children, isValidElement, useState, forwardRef } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import withNavLocales from './locales/withNavLocales'
 import styles from './styles.styl'
@@ -9,7 +10,6 @@ import BottomIcon from '../Icons/Bottom'
 import TopIcon from '../Icons/Top'
 import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
-import { useI18n } from '../providers/I18n'
 
 export const NavItem = ({ className, children, secondary, ...restProps }) => (
   <li

package/react/Nav/locales/withNavLocales.jsx

@@ -1,8 +1,9 @@
+import { withOnlyLocales } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/PasswordField/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useI18n, withOnlyLocales } from 'twake-i18n'
 
 import en from './locales/en.json'
 import fr from './locales/fr.json'
@@ -10,8 +11,6 @@ import EyeIcon from '../Icons/Eye'
 import EyeClosedIcon from '../Icons/EyeClosed'
 import InputAdornment from '../InputAdornment'
 import TextField from '../TextField'
-import { useI18n } from '../providers/I18n'
-import withOnlyLocales from '../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/SearchBar/index.jsx

@@ -2,6 +2,7 @@ import cx from 'classnames'
 import debounce from 'lodash/debounce'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useState, useMemo } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from './locales/withOnlyLocales'
 import ButtonBase from '../ButtonBase'
@@ -13,7 +14,6 @@ import MagnifierIcon from '../Icons/Magnifier'
 import InputBase from '../InputBase'
 import Paper from '../Paper'
 import Typography from '../Typography'
-import { useI18n, useExtendI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
 const sizeToPixel = {

package/react/SearchBar/locales/withOnlyLocales.jsx

@@ -1,8 +1,9 @@
+import { withOnlyLocales } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/SelectionBar/SelectionBarAction.jsx

@@ -1,13 +1,13 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n } from 'twake-i18n'
 
 import styles from './styles.styl'
 import Button from '../Button'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import useBreakpoints from '../providers/Breakpoints'
-import { useI18n } from '../providers/I18n'
 
 const SelectionBarAction = ({ selectedCount, selected, action }) => {
   const { isDesktop } = useBreakpoints()

package/react/SelectionBar/SelectionBarMore.jsx

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import DotsIcon from '../Icons/Dots'
 import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu'
-import { useI18n } from '../providers/I18n'
 
 const SelectionBarMore = ({ actions, selectedCount, selected }) => {
   const { t } = useI18n()

package/react/SelectionBar/index.jsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import { useWebviewIntent } from 'cozy-intent'
 
@@ -12,7 +13,6 @@ import Icon from '../Icon'
 import IconButton from '../IconButton'
 import CrossIcon from '../Icons/Cross'
 import useBreakpoints from '../providers/Breakpoints'
-import { useI18n } from '../providers/I18n'
 
 /*
 

package/react/Spinner/Readme.md

@@ -52,7 +52,7 @@ When you use `loadingType`, `<Spinner />` needs to be in an `<I18n />` wrapper a
 
 ```jsx
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import I18n from 'cozy-ui/transpiled/react/providers/I18n'
+import I18n from 'twake-i18n'
 
 ;
 

package/react/Spinner/index.jsx

@@ -1,12 +1,12 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { translate } from 'twake-i18n'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
 import SpinnerIcon from '../Icons/Spinner'
 import Typography from '../Typography'
-import { translate } from '../providers/I18n'
 
 export const Spinner = ({
   t,

package/react/Table/Virtualized/Dnd/TableRow.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react'
 import cx from 'classnames'
-
+import React, { useEffect } from 'react'
 import { useDrag, useDrop } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 

package/react/Wizard/index.jsx

@@ -4,9 +4,9 @@ import React from 'react'
 import styles from './styles.styl'
 import Icon from '../Icon'
 import CloudIcon from '../Icons/Cloud'
-import Input from '../legacy/Input'
 import Typography from '../Typography'
 import Button from '../deprecated/Button'
+import Input from '../legacy/Input'
 
 export const Wizard = ({ children, tag, ...props }) => {
   const Component = tag || 'div'

package/react/deprecated/ActionMenu/Actions/ActionsItems.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import { getActionName, getOnlyNeededActions } from './helpers'
-import { useI18n } from '../../../providers/I18n'
 
 const ActionsItems = ({ doc, actions, isLast, setIsRenaming, onClose }) => {
   const { t } = useI18n()

package/react/deprecated/ActionMenu/Actions/call.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import { useI18n } from 'twake-i18n'
 
 import withActionsLocales from './locales/withActionsLocales'
 import TelephoneIcon from '../../../Icons/Telephone'
-import { useI18n } from '../../../providers/I18n'
 import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
 
 export const call = () => {

package/react/deprecated/ActionMenu/Actions/emailTo.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import { useI18n } from 'twake-i18n'
 
 import withActionsLocales from './locales/withActionsLocales'
 import EmailIcon from '../../../Icons/Email'
-import { useI18n } from '../../../providers/I18n'
 import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
 
 export const emailTo = () => {

package/react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx

@@ -1,8 +1,9 @@
+import { withLocales } from 'twake-i18n'
+
 import en from './en.json'
 import fr from './fr.json'
 import ru from './ru.json'
 import vi from './vi.json'
-import withLocales from '../../../../providers/I18n/withLocales'
 
 export const locales = {
   en,