cozy-ui 134.2.0 → 135.1.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [135.1.0](https://github.com/cozy/cozy-ui/compare/v135.0.0...v135.1.0) (2025-12-15)
+
+
+### Features
+
+* **Icon:** Add Send ([9dc2177](https://github.com/cozy/cozy-ui/commit/9dc2177))
+
+# [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)
 
 

package/assets/icons/ui/send.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M15.594 1.252 9.75 14.927a.88.88 0 0 1-.66.53.821.821 0 0 1-.799-.253L.252 6.88a.821.821 0 0 1-.224-.807.88.88 0 0 1 .553-.64L14.45.067c.374-.137.696-.067.965.212.27.279.329.603.178.972ZM8.74 13.55 13.7 1.938 1.92 6.488 4.44 9.095l4.722-2.774-2.938 4.621 2.518 2.608Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "134.2.0",
+  "version": "135.1.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

@@ -298,6 +298,7 @@ import School from 'cozy-ui/transpiled/react/Icons/School'
 import Scooter from 'cozy-ui/transpiled/react/Icons/Scooter'
 import Security from 'cozy-ui/transpiled/react/Icons/Security'
 import SelectAll from 'cozy-ui/transpiled/react/Icons/SelectAll'
+import Send from 'cozy-ui/transpiled/react/Icons/Send'
 import Server from 'cozy-ui/transpiled/react/Icons/Server'
 import Setting from 'cozy-ui/transpiled/react/Icons/Setting'
 import Share from 'cozy-ui/transpiled/react/Icons/Share'
@@ -585,6 +586,7 @@ const icons = [
   Scooter,
   Security,
   SelectAll,
+  Send,
   Server,
   Setting,
   Share,
@@ -1004,7 +1006,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','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']
+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','send','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/Send.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/send.svg` to regenerate;
+import React from 'react'
+
+function SvgSend(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M15.594 1.252L9.75 14.927a.88.88 0 01-.66.53.821.821 0 01-.799-.253L.252 6.88a.821.821 0 01-.224-.807.88.88 0 01.553-.64L14.45.067c.374-.137.696-.067.965.212.27.279.329.603.178.972zM8.74 13.55L13.7 1.938 1.92 6.488l2.52 2.607 4.722-2.774-2.938 4.621 2.518 2.608z" />
+    </svg>
+  )
+}
+
+export default SvgSend

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,

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

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

package/react/hooks/useConfirmExit/index.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useCallback, useRef, useState } from 'react'
+import { withLocales } from 'twake-i18n'
 
 import en from './locales/en.json'
 import fr from './locales/fr.json'
@@ -7,7 +8,6 @@ import ru from './locales/ru.json'
 import vi from './locales/vi.json'
 import { ConfirmDialog } from '../../CozyDialogs'
 import Button from '../../deprecated/Button'
-import withLocales from '../../providers/I18n/withLocales'
 import useEventListener from '../useEventListener'
 
 /**

package/react/index.js

@@ -6,7 +6,6 @@ export { default as Banner } from './Banner'
 export { default as ButtonAction } from './deprecated/ButtonAction'
 export { default as BottomDrawer } from './deprecated/BottomDrawer'
 export { default as BarButton } from './BarButton'
-export { default as I18n, translate, useI18n } from './providers/I18n'
 export { default as Icon } from './Icon'
 export { default as Sprite } from './Icon/Sprite'
 export { default as Sidebar } from './Sidebar'

package/react/jestLib/I18n.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { I18n } from '../providers/I18n'
+import { I18n } from 'twake-i18n'
 
 export const I18nContext = options => {
   const I18nComponent = new I18n({