cozy-ui 118.0.0 → 119.0.0

package/react/Circle/index.jsx

@@ -3,11 +3,26 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import styles from './styles.styl'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+const sizeNameToPx = {
+  xsmall: 16,
+  small: 32,
+  medium: 40,
+  large: 48,
+  xlarge: 64
+}
+const sizeNameToPx_Twake = {
+  xsmall: 16,
+  small: 24,
+  medium: 32,
+  large: 48,
+  xlarge: 64
+}
 
 export const createSizeStyle = size => {
-  const sizeToPixel = Number.isInteger(size)
-    ? size
-    : { xsmall: 16, small: 32, medium: 40, large: 48, xlarge: 64 }[size]
+  const sizeConverter = isTwakeTheme() ? sizeNameToPx_Twake : sizeNameToPx
+  const sizeToPixel = Number.isInteger(size) ? size : sizeConverter[size]
   return { '--circleSize': `${sizeToPixel}px` }
 }
 

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { models } from 'cozy-client'
 
 import ContactName from './ContactName'
-import { Avatar } from '../../Avatar'
 import { TableCell } from '../../deprecated/Table'
+import { Avatar } from '../../legacy/Avatar'
 import styles from '../styles.styl'
 
 const { getDisplayName, getInitials } = models.contact

package/react/Dialog/index.jsx

@@ -7,12 +7,13 @@ import { useCozyTheme } from '../providers/CozyTheme'
 
 const Dialog = ({ className, ...props }) => {
   const { type, variant } = useCozyTheme()
+  const uiThemeName = localStorage.getItem('ui-theme-name') || 'Cozy'
 
   useDialogEffects(props.open, props.fullScreen)
 
   return (
     <MUIDialog
-      className={cx(`CozyTheme--${type}-${variant}`, className)}
+      className={cx(`${uiThemeName}Theme--${type}-${variant}`, className)}
       {...props}
     />
   )

package/react/GhostFileBadge/Readme.md

@@ -3,7 +3,7 @@ Ghost badges are specifically used to indicate that a file in a Cozy is a ghost
 ```jsx
 import GhostFileBadge from 'cozy-ui/transpiled/react/GhostFileBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 
 import FolderIcon from "cozy-ui/transpiled/react/Icons/Folder";
 

package/react/Icon/Readme.md

@@ -72,8 +72,8 @@ import Archive from 'cozy-ui/transpiled/react/Icons/Archive'
 import ArrowUp from 'cozy-ui/transpiled/react/Icons/ArrowUp'
 import Attachment from 'cozy-ui/transpiled/react/Icons/Attachment'
 import Attention from 'cozy-ui/transpiled/react/Icons/Attention'
-import BankCheck from 'cozy-ui/transpiled/react/Icons/BankCheck'
 import Bank from 'cozy-ui/transpiled/react/Icons/Bank'
+import BankCheck from 'cozy-ui/transpiled/react/Icons/BankCheck'
 import Banking from 'cozy-ui/transpiled/react/Icons/Banking'
 import BankingAdd from 'cozy-ui/transpiled/react/Icons/BankingAdd'
 import Bell from 'cozy-ui/transpiled/react/Icons/Bell'
@@ -112,8 +112,9 @@ import ClockOutline from 'cozy-ui/transpiled/react/Icons/ClockOutline'
 import Cloud from 'cozy-ui/transpiled/react/Icons/Cloud'
 import CloudHappy from 'cozy-ui/transpiled/react/Icons/CloudHappy'
 import CloudPlusOutlined from 'cozy-ui/transpiled/react/Icons/CloudPlusOutlined'
-import Collect from 'cozy-ui/transpiled/react/Icons/Collect'
+import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync'
 import Cocktail from 'cozy-ui/transpiled/react/Icons/Cocktail'
+import Collect from 'cozy-ui/transpiled/react/Icons/Collect'
 import Comment from 'cozy-ui/transpiled/react/Icons/Comment'
 import Company from 'cozy-ui/transpiled/react/Icons/Company'
 import Compare from 'cozy-ui/transpiled/react/Icons/Compare'
@@ -341,10 +342,10 @@ const icons = [
   ArrowUp,
   Attachment,
   Attention,
-  BankCheck,
   Bank,
-  BankingAdd,
+  BankCheck,
   Banking,
+  BankingAdd,
   Bell,
   Benefit,
   Bike,
@@ -381,8 +382,9 @@ const icons = [
   Cloud,
   CloudHappy,
   CloudPlusOutlined,
-  Collect,
+  CloudSync,
   Cocktail,
+  Collect,
   Comment,
   Company,
   Compare,
@@ -665,7 +667,7 @@ const Example = () => {
 <Example />
 ```
 
-## SVGr illustrations
+### SVGr illustrations
 
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -674,6 +676,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import AccountIcon from 'cozy-ui/transpiled/react/Icons/Account'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import CreditCardLargeIcon from 'cozy-ui/transpiled/react/Icons/CreditCardLarge'
+import ChatIcon from 'cozy-ui/transpiled/react/Icons/Chat'
 import CheckWhiteIcon from 'cozy-ui/transpiled/react/Icons/CheckWhite'
 import CloudBrokenIcon from 'cozy-ui/transpiled/react/Icons/CloudBroken'
 import CloudSync2 from 'cozy-ui/transpiled/react/Icons/CloudSync2'
@@ -682,11 +685,14 @@ import CozyAuthentificationIcon from 'cozy-ui/transpiled/react/Icons/CozyAuthent
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
 import CozyLogoIcon from 'cozy-ui/transpiled/react/Icons/CozyLogo'
 import CozyUpgradeIcon from 'cozy-ui/transpiled/react/Icons/CozyUpgrade'
+import CrossWhiteIcon from 'cozy-ui/transpiled/react/Icons/CrossWhite'
 import DashWhiteIcon from 'cozy-ui/transpiled/react/Icons/DashWhite'
 import DeviceBrowserIcon from 'cozy-ui/transpiled/react/Icons/DeviceBrowser'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DevicePhoneIcon from 'cozy-ui/transpiled/react/Icons/DevicePhone'
 import DeviceTabletIcon from 'cozy-ui/transpiled/react/Icons/DeviceTablet'
+import DotsWhiteIcon from 'cozy-ui/transpiled/react/Icons/DotsWhite'
+import DriveIcon from 'cozy-ui/transpiled/react/Icons/Drive'
 import FileTypeAudioIcon from 'cozy-ui/transpiled/react/Icons/FileTypeAudio'
 import FileTypeBankingAccountIcon from 'cozy-ui/transpiled/react/Icons/FileTypeBankingAccount'
 import FileTypeBinIcon from 'cozy-ui/transpiled/react/Icons/FileTypeBin'
@@ -706,7 +712,11 @@ import ForbiddenSignIcon from 'cozy-ui/transpiled/react/Icons/ForbiddenSign'
 import GoogleIcon from 'cozy-ui/transpiled/react/Icons/Google'
 import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
 import LogoutLargeIcon from 'cozy-ui/transpiled/react/Icons/LogoutLarge'
+import MailIcon from 'cozy-ui/transpiled/react/Icons/Mail'
+import NotesIcon from 'cozy-ui/transpiled/react/Icons/Notes'
 import PapersIcon from 'cozy-ui/transpiled/react/Icons/Papers'
+import PassIcon from 'cozy-ui/transpiled/react/Icons/Pass'
+import ShareGrey08Icon from 'cozy-ui/transpiled/react/Icons/ShareGrey08'
 import StoreIcon from 'cozy-ui/transpiled/react/Icons/Store'
 import TopSelectIcon from 'cozy-ui/transpiled/react/Icons/TopSelect'
 import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
@@ -714,6 +724,7 @@ import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
 const icons = [
   AccountIcon,
   BottomSelectIcon,
+  ...(isTwakeTheme() ? [ChatIcon] : []),
   CheckWhiteIcon,
   CloudBrokenIcon,
   CloudSync2,
@@ -723,11 +734,14 @@ const icons = [
   CozyLogoIcon,
   CozyUpgradeIcon,
   CreditCardLargeIcon,
+  CrossWhiteIcon,
   DashWhiteIcon,
   DeviceBrowserIcon,
   DeviceLaptopIcon,
   DevicePhoneIcon,
   DeviceTabletIcon,
+  DotsWhiteIcon,
+  ...(isTwakeTheme() ? [DriveIcon] : []),
   FileTypeAudioIcon,
   FileTypeBankingAccountIcon,
   FileTypeBinIcon,
@@ -747,7 +761,11 @@ const icons = [
   GoogleIcon,
   KeychainIcon,
   LogoutLargeIcon,
+  ...(isTwakeTheme() ? [MailIcon] : []),
+  ...(isTwakeTheme() ? [NotesIcon] : []),
   PapersIcon,
+  ...(isTwakeTheme() ? [PassIcon] : []),
+  ShareGrey08Icon,
   StoreIcon,
   TopSelectIcon,
   TrashDuotoneIcon
@@ -783,28 +801,7 @@ const handleInputRangeChange = ev => {
 </div>
 ```
 
-### Available illustrations
-
-```jsx
-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 = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'store', 'top-select', 'trash-duotone', 'cozy']
-
-;
-
-<div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
-  <Sprite />
-  {availableIcons.map(icon => <div key={icon} style={{ textAlign: 'center'}}>
-      <Icon icon={ icon }/>
-      <Typography variant='body1' className='u-mb-1 u-mt-half'>{ icon }</Typography>
-    </div>
-  )}
-</div>
-```
-
-### Permissions Icons
+### SVGr permissions icons
 
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -926,7 +923,7 @@ const Example = () => {
 <Example />
 ```
 
-### Available UI icons from Sprite
+### Available icons from Sprite
 
 When using `Icon`, you can either give a React component or use the identifier
 of an already loaded one. `cozy-ui` is shipped with built-in icons, containing Illustrations and SVGr Icons that you can
@@ -952,3 +949,24 @@ const availableIcons = ['album-add','album-remove','album','answer','apple','arc
   )}
 </div>
 ```
+
+### Available illustrations from Sprite
+
+```jsx
+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 = ['account', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'store', 'top-select', 'trash-duotone', 'cozy']
+
+;
+
+<div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
+  <Sprite />
+  {availableIcons.map(icon => <div key={icon} style={{ textAlign: 'center'}}>
+      <Icon icon={ icon }/>
+      <Typography variant='body1' className='u-mb-1 u-mt-half'>{ icon }</Typography>
+    </div>
+  )}
+</div>
+```

package/react/IconButton/Readme.md

@@ -16,7 +16,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 const columns = [{ title: 'default', disabled: false }, { title: 'disabled', disabled: true }]
-const initialVariants = [{ small: false, medium: true, large: false }]
+const initialVariants = [{ small: false, medium: true, large: false, xlarge: false }]
 // -->
 
 ;
@@ -81,6 +81,7 @@ import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'
     className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
     classes={{ label: "u-flex u-w-auto" }}
     label={<Icon icon={StopIcon} size={12} />}
+    size={isTwakeTheme() ? "small" : "medium"}
   />
 </IconButton>
-```
+```

package/react/IconButton/index.jsx

@@ -35,7 +35,7 @@ IconButton.propTypes = {
     'secondary',
     'error'
   ]),
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge'])
 }
 
 export default IconButton

package/react/Icons/Account.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/account.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/account.svg` to regenerate
 import React from 'react'
 
+import SvgAccountTwake from './Account_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAccount(props) {
+  if (isTwakeTheme()) return SvgAccountTwake(props)
   return (
     <svg viewBox="0 0 32 32" fill="none" {...props}>
       <g fillRule="evenodd" clipRule="evenodd" fill="#855CEA">

package/react/Icons/Account_twake.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/account_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAccountTwake(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        d="M8 1.9a2.1 2.1 0 110 4.2 2.1 2.1 0 010-4.2zm0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H1.9V13c0-.64 3.13-2.1 6.1-2.1zM8 0C5.79 0 4 1.79 4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
+        fill="#1D212A"
+        fillOpacity={0.9}
+      />
+    </svg>
+  )
+}
+
+export default SvgAccountTwake

package/react/Icons/Accounts.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh /Users/vdnj/Documents/CozyCloud/cozy-ui/assets/icons/ui/permissions/accounts.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/accounts.svg` to regenerate
 import React from 'react'
 
+import SvgAccountsTwake from './Accounts_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAccounts(props) {
+  if (isTwakeTheme()) return SvgAccountsTwake(props)
   return (
     <svg viewBox="0 0 48 48" {...props}>
       <g fill="none" fillRule="evenodd">

package/react/Icons/Accounts_twake.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/permissions/accounts_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAccountsTwake(props) {
+  return (
+    <svg viewBox="0 0 16 14" fill="none" {...props}>
+      <path
+        d="M1.614 11.296v-.524c0-.275.129-.533.33-.654a8.786 8.786 0 014.51-1.243.16.16 0 01.065.009 5.564 5.564 0 01.476-1.598 5.924 5.924 0 00-.54-.024c-1.953 0-3.776.54-5.333 1.468C.412 9.15 0 9.94 0 10.772v2.138h7.472a5.754 5.754 0 01-.783-1.614H1.614zm4.841-4.841a3.227 3.227 0 100-6.455 3.227 3.227 0 100 6.455zm0-4.841c.887 0 1.614.726 1.614 1.613 0 .888-.727 1.614-1.614 1.614A1.618 1.618 0 014.84 3.227c0-.887.726-1.613 1.614-1.613zm8.674 8.068c0-.177-.025-.339-.049-.508l.92-.815-.807-1.396-1.17.396a2.943 2.943 0 00-.871-.509l-.242-1.202h-1.614l-.242 1.202a2.94 2.94 0 00-.871.509l-1.17-.396-.807 1.396.92.815c-.025.17-.049.33-.049.508s.024.34.049.509l-.92.814.807 1.396 1.17-.395c.258.218.548.387.871.508l.242 1.203h1.614l.242-1.203c.323-.12.613-.29.871-.508l1.17.395.807-1.396-.92-.814c.024-.17.049-.331.049-.509zm-3.026 1.614a1.618 1.618 0 01-1.614-1.614c0-.887.726-1.613 1.614-1.613.887 0 1.614.726 1.614 1.613 0 .888-.727 1.614-1.614 1.614z"
+        fill="#1D212A"
+        fillOpacity={0.9}
+      />
+    </svg>
+  )
+}
+
+export default SvgAccountsTwake

package/react/Icons/Album.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/album.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album.svg` to regenerate
 import React from 'react'
 
+import SvgAlbumTwake from './Album_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAlbum(props) {
+  if (isTwakeTheme()) return SvgAlbumTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/AlbumAdd.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/album-add.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album-add.svg` to regenerate
 import React from 'react'
 
+import SvgAlbumAddTwake from './AlbumAdd_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAlbumAdd(props) {
+  if (isTwakeTheme()) return SvgAlbumAddTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/AlbumAdd_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/album-add_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAlbumAddTwake(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M1.6 3.2H0v11.2c0 .88.72 1.6 1.6 1.6h11.2v-1.6H1.6V3.2zM14.4 0H4.8c-.88 0-1.6.72-1.6 1.6v9.6c0 .88.72 1.6 1.6 1.6h9.6c.88 0 1.6-.72 1.6-1.6V1.6c0-.88-.72-1.6-1.6-1.6zm0 11.2H4.8V1.6h9.6v9.6zM8.8 9.6h1.6V7.2h2.4V5.6h-2.4V3.2H8.8v2.4H6.4v1.6h2.4v2.4z" />
+    </svg>
+  )
+}
+
+export default SvgAlbumAddTwake

package/react/Icons/AlbumRemove.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/album-remove.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album-remove.svg` to regenerate
 import React from 'react'
 
+import SvgAlbumRemoveTwake from './AlbumRemove_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAlbumRemove(props) {
+  if (isTwakeTheme()) return SvgAlbumRemoveTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/AlbumRemove_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/album-remove_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAlbumRemoveTwake(props) {
+  return (
+    <svg viewBox="0 0 16 3" {...props}>
+      <path d="M16 2.286H0V0h16v2.286z" />
+    </svg>
+  )
+}
+
+export default SvgAlbumRemoveTwake

package/react/Icons/Album_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/album_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAlbumTwake(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M12.2 0H2.6C1.72 0 1 .72 1 1.6v12.8c0 .88.72 1.6 1.6 1.6h9.6c.88 0 1.6-.72 1.6-1.6V1.6c0-.88-.72-1.6-1.6-1.6zm0 14.4H2.6V1.6h4v5.6l2-1.2 2 1.2V1.6h1.6v12.8zM8.696 9.2l2.704 3.6h-8l1.904-2.536L6.6 12l2.096-2.8z" />
+    </svg>
+  )
+}
+
+export default SvgAlbumTwake

package/react/Icons/Answer.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/answer.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/answer.svg` to regenerate
 import React from 'react'
 
+import SvgAnswerTwake from './Answer_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAnswer(props) {
+  if (isTwakeTheme()) return SvgAnswerTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/Answer_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/answer_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAnswerTwake(props) {
+  return (
+    <svg viewBox="0 0 16 13" {...props}>
+      <path d="M3.114 6.594L5.75 9.231a.833.833 0 01.261.636.915.915 0 01-.284.636.959.959 0 01-.636.262.833.833 0 01-.636-.262L.273 6.321A.872.872 0 010 5.685c0-.242.09-.454.273-.636L4.455.867a.848.848 0 01.625-.25c.25 0 .465.083.647.25A.885.885 0 016 1.515c0 .25-.09.466-.273.647L3.114 4.776h8.34c1.258 0 2.33.443 3.216 1.33.887.886 1.33 1.958 1.33 3.215v2.728a.88.88 0 01-.261.648.88.88 0 01-.648.26.88.88 0 01-.648-.26.88.88 0 01-.261-.648V9.32a2.63 2.63 0 00-.796-1.931 2.63 2.63 0 00-1.931-.796H3.114z" />
+    </svg>
+  )
+}
+
+export default SvgAnswerTwake

package/react/Icons/Apps.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh /Users/vdnj/Documents/CozyCloud/cozy-ui/assets/icons/ui/permissions/apps.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/apps.svg` to regenerate
 import React from 'react'
 
+import SvgAppsTwake from './Apps_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgApps(props) {
+  if (isTwakeTheme()) return SvgAppsTwake(props)
   return (
     <svg viewBox="0 0 48 48" {...props}>
       <g fill="none" fillRule="evenodd">

package/react/Icons/Apps_twake.jsx

@@ -0,0 +1,23 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/permissions/apps_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAppsTwake(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        d="M7 1a1 1 0 00-1-1H1a1 1 0 00-1 1v5a1 1 0 001 1h5a1 1 0 001-1V1z"
+        fill="#1D212A"
+        fillOpacity={0.9}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 1a1 1 0 011-1h5a1 1 0 011 1v5a1 1 0 01-1 1h-5a1 1 0 01-1-1V1zm2 4V2h3v3h-3zm-1 4a1 1 0 00-1 1v5a1 1 0 001 1h5a1 1 0 001-1v-5a1 1 0 00-1-1h-5zm1 2v3h3v-3h-3zM0 10a1 1 0 011-1h5a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1v-5zm2 4v-3h3v3H2z"
+        fill="#1D212A"
+        fillOpacity={0.9}
+      />
+    </svg>
+  )
+}
+
+export default SvgAppsTwake

package/react/Icons/Archive.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/archive.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/archive.svg` to regenerate
 import React from 'react'
 
+import SvgArchiveTwake from './Archive_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgArchive(props) {
+  if (isTwakeTheme()) return SvgArchiveTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/Archive_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/archive_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgArchiveTwake(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M15.591 1.982L14.356.49A1.29 1.29 0 0013.333 0H2.667a1.32 1.32 0 00-1.031.489L.409 1.982A1.74 1.74 0 000 3.112v11.11C0 15.2.8 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V3.112a1.74 1.74 0 00-.409-1.13zM2.88 1.778h10.24l.72.862H2.169l.711-.862zM1.778 14.222V4.444h12.444v9.778H1.778zm7.51-8H6.712V8.89H4.444L8 12.444l3.556-3.555H9.289V6.222z" />
+    </svg>
+  )
+}
+
+export default SvgArchiveTwake

package/react/Icons/ArrowUp.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/arrow-up.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/arrow-up.svg` to regenerate
 import React from 'react'
 
+import SvgArrowUpTwake from './ArrowUp_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgArrowUp(props) {
+  if (isTwakeTheme()) return SvgArrowUpTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/ArrowUp_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/arrow-up_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgArrowUpTwake(props) {
+  return (
+    <svg viewBox="0 0 17 17" {...props}>
+      <path d="M7.56 4.28L2.528 9.314a.941.941 0 01-.719.295 1.034 1.034 0 01-.719-.32 1.084 1.084 0 01-.295-.72.941.941 0 01.295-.719l6.78-6.78a.901.901 0 01.334-.218c.12-.043.248-.064.385-.064s.266.021.385.064c.12.043.232.115.334.218l6.78 6.78a.958.958 0 01.283.706c0 .283-.094.527-.283.732a1 1 0 01-.732.309 1 1 0 01-.732-.309L9.616 4.28v11.48a.994.994 0 01-.295.732.994.994 0 01-.732.296.994.994 0 01-.732-.296.994.994 0 01-.295-.732V4.28z" />
+    </svg>
+  )
+}
+
+export default SvgArrowUpTwake

package/react/Icons/Attachment.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/attachment.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/attachment.svg` to regenerate
 import React from 'react'
 
+import SvgAttachmentTwake from './Attachment_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAttachment(props) {
+  if (isTwakeTheme()) return SvgAttachmentTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/Attachment_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/attachment_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAttachmentTwake(props) {
+  return (
+    <svg viewBox="0 0 9 16" {...props}>
+      <path d="M7.41 3.636V12a2.908 2.908 0 11-5.82 0V2.91a1.819 1.819 0 013.637 0v7.636a.73.73 0 01-.727.727.73.73 0 01-.727-.727v-6.91H2.682v6.91a1.819 1.819 0 003.636 0V2.909a2.908 2.908 0 10-5.818 0V12c0 2.21 1.79 4 4 4s4-1.79 4-4V3.636H7.41z" />
+    </svg>
+  )
+}
+
+export default SvgAttachmentTwake

package/react/Icons/Attention.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/attention.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/attention.svg` to regenerate
 import React from 'react'
 
+import SvgAttentionTwake from './Attention_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgAttention(props) {
+  if (isTwakeTheme()) return SvgAttentionTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/Attention_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/attention_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgAttentionTwake(props) {
+  return (
+    <svg viewBox="0 0 22 19" {...props}>
+      <path d="M11 3.99L18.53 17H3.47L11 3.99zM11 0L0 19h22L11 0zm1 14h-2v2h2v-2zm0-6h-2v4h2V8z" />
+    </svg>
+  )
+}
+
+export default SvgAttentionTwake

package/react/Icons/Bank.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/bank.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bank.svg` to regenerate
 import React from 'react'
 
+import SvgBankTwake from './Bank_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgBank(props) {
+  if (isTwakeTheme()) return SvgBankTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

package/react/Icons/BankAccounts.jsx

@@ -1,7 +1,11 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh /Users/vdnj/Documents/CozyCloud/cozy-ui/assets/icons/ui/permissions/bank-accounts.svg` to regenerate;
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/bank-accounts.svg` to regenerate
 import React from 'react'
 
+import SvgBankAccountsTwake from './BankAccounts_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgBankAccounts(props) {
+  if (isTwakeTheme()) return SvgBankAccountsTwake(props)
   return (
     <svg viewBox="0 0 48 48" {...props}>
       <g fill="none" fillRule="evenodd">