cozy-ui 122.14.0 → 123.0.0

package/react/AppTitle/Readme.md

@@ -12,7 +12,7 @@ const slugs = ["chat", "contacts", "drive", "mail", "notes", "pass", "store", "p
 
 <div class="u-flex u-flex-column">
   {
-    isTwakeTheme() && slugs.map(slug => <AppTitle slug={slug} />)
+    slugs.map(slug => <AppTitle slug={slug} />)
   }
   <AppTitle slug="coachco2" />
   <AppTitle slug="coachco2">CoachCO2</AppTitle>

package/react/Badge/Readme.md

@@ -73,10 +73,10 @@ import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 <InfosBadge
   badgeContent={
     <Badge color="error" variant="dot" size="small">
-      <Icon icon={LinkIcon} size={isTwakeTheme() ? 16 : 10} />
+      <Icon icon={LinkIcon} size={16} />
     </Badge>
   }
 >
-  <Avatar text="CD" size={isTwakeTheme() ? 'medium' : 'small'} />
+  <Avatar text="CD" size="medium" />
 </InfosBadge>
 ```

package/react/BarTitle/index.jsx

@@ -3,16 +3,11 @@ import React from 'react'
 
 import styles from './styles.styl'
 import Typography from '../Typography'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
 
 const BarTitle = ({ noWrap, children }) => {
   return (
     <div className={styles.BarTitle}>
-      <Typography
-        variant={isTwakeTheme() ? 'h4' : 'h5'}
-        component="h1"
-        noWrap={noWrap}
-      >
+      <Typography variant="h4" component="h1" noWrap={noWrap}>
         {children}
       </Typography>
     </div>

package/react/Buttons/Readme.md

@@ -127,7 +127,7 @@ const iconPositions = ['startIcon', 'endIcon']
             <Button
               className="u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
-              size={isTwakeTheme() ? "small" : "medium"}
+              size="small"
               label={<Icon icon={StopIcon} size={12} />}
               variant={variant}
             />
@@ -135,7 +135,7 @@ const iconPositions = ['startIcon', 'endIcon']
               className="u-ml-1 u-miw-auto u-mih-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"}
+              size="small"
               variant={variant}
               disabled
             />

package/react/Circle/index.jsx

@@ -3,16 +3,8 @@ 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,
@@ -21,7 +13,7 @@ const sizeNameToPx_Twake = {
 }
 
 export const createSizeStyle = size => {
-  const sizeConverter = isTwakeTheme() ? sizeNameToPx_Twake : sizeNameToPx
+  const sizeConverter = sizeNameToPx
   const sizeToPixel = Number.isInteger(size) ? size : sizeConverter[size]
   return { '--circleSize': `${sizeToPixel}px` }
 }

package/react/Dialog/index.jsx

@@ -3,18 +3,16 @@ import cx from 'classnames'
 import React from 'react'
 
 import { useDialogEffects } from './DialogEffects'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import { useCozyTheme } from '../providers/CozyTheme'
 
 const Dialog = ({ className, ...props }) => {
   const { type, variant } = useCozyTheme()
-  const uiThemeName = isTwakeTheme() ? 'Twake' : 'Cozy'
 
   useDialogEffects(props.open, props.fullScreen)
 
   return (
     <MUIDialog
-      className={cx(`${uiThemeName}Theme--${type}-${variant}`, className)}
+      className={cx(`TwakeTheme--${type}-${variant}`, className)}
       {...props}
     />
   )

package/react/Fab/index.js

@@ -1,9 +1,7 @@
 import Fab from '@material-ui/core/Fab'
 
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
-
 Fab.defaultProps = {
-  size: isTwakeTheme() ? 'medium' : 'large'
+  size: 'medium'
 }
 
 export default Fab

package/react/Icon/Readme.md

@@ -57,6 +57,7 @@ import Album from 'cozy-ui/transpiled/react/Icons/Album'
 
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import Grid from 'cozy-ui/transpiled/react/Grid/index.js'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
@@ -188,7 +189,7 @@ import Gear from 'cozy-ui/transpiled/react/Icons/Gear'
 import Globe from 'cozy-ui/transpiled/react/Icons/Globe'
 import Gouv from 'cozy-ui/transpiled/react/Icons/Gouv'
 import GraphCircle from 'cozy-ui/transpiled/react/Icons/GraphCircle'
-import Grid from 'cozy-ui/transpiled/react/Icons/Grid'
+import GridIcon from 'cozy-ui/transpiled/react/Icons/Grid'
 import GroupList from 'cozy-ui/transpiled/react/Icons/GroupList'
 import Groups from 'cozy-ui/transpiled/react/Icons/Groups'
 import Growth from 'cozy-ui/transpiled/react/Icons/Growth'
@@ -345,7 +346,7 @@ const icons = [
   Apple,
   Archive,
   ArrowUp,
-  ...(isTwakeTheme() ? [Assistant] : []),
+  Assistant,
   Attachment,
   Attention,
   Bank,
@@ -387,7 +388,7 @@ const icons = [
   ClockOutline,
   Cloud,
   CloudHappy,
-  ...(isTwakeTheme() ? [CloudRainbow] : []),
+  CloudRainbow,
   CloudPlusOutlined,
   CloudSync,
   Cocktail,
@@ -463,7 +464,7 @@ const icons = [
   Globe,
   Gouv,
   GraphCircle,
-  Grid,
+  GridIcon,
   GroupList,
   Groups,
   Growth,
@@ -499,7 +500,7 @@ const icons = [
   Magnifier,
   Merge,
   Moped,
-  ...(isTwakeTheme() ? [Mosaic] : []),
+  Mosaic,
   MosaicMin,
   Motorcycle,
   Mountain,
@@ -526,7 +527,7 @@ const icons = [
   People,
   Percent,
   PercentCircle,
-  ...(isTwakeTheme() ? [PersonAdd] : []),
+  PersonAdd,
   PersonalData,
   PhoneDownload,
   PhoneUpload,
@@ -613,13 +614,7 @@ const icons = [
   Work
 ]
 const locale = {}
-const wrapperStyle = {
-  fontSize: '2rem',
-  display: 'grid',
-  gridTemplateColumns: 'repeat(6, 1fr)'
-}
-
-initialState = { size: 16 };
+initialState = { size: 16 }
 
 const handleInputRangeChange = ev => {
   setState({ size: parseInt(ev.target.value, 10) })
@@ -647,34 +642,34 @@ const InfoModal = ({ icon }) => {
   />
 }
 
-const Example = () => {
-  return (
-    <DemoProvider>
-      <Typography component='p' variant='body1' className='u-mb-1'>
-        Font size: <input type='range' min='8' max='48' value={state.size} onChange={handleInputRangeChange} /> {state.size}px
-      </Typography>
-      <div style={wrapperStyle}>
-        {
-        icons.map(icon => <div
-            key={icon}
-            className="u-c-pointer u-ta-center u-mb-1"
-            onClick={() => setState({ selected: icon })}
-          >
-            <Icon icon={ icon } size={state.size} />
-            <Typography variant='body1' className='u-mt-half'>
-              { getNameFromIcon(icon) }
-            </Typography>
-          </div>
-        )}
-      { state.selected ? <InfoModal icon={state.selected} /> : null }
-      </div>
-    </DemoProvider>
-  )
-}
-
 ;
 
-<Example />
+<DemoProvider>
+  <Typography component='p' variant='body1' className='u-mb-1'>
+    Font size: <input type='range' min='8' max='48' value={state.size} onChange={handleInputRangeChange} /> {state.size}px
+  </Typography>
+
+  <Grid container spacing={2}>
+    {icons.map(icon =>
+      <Grid
+        key={icon}
+        item
+        className="u-c-pointer u-ta-center u-mb-1"
+        xs={6}
+        md={3}
+        xl={2}
+        onClick={() => setState({ selected: icon })}
+      >
+        <Icon icon={icon} size={state.size} />
+        <Typography variant='body1' className='u-mt-half'>
+          { getNameFromIcon(icon) }
+        </Typography>
+      </Grid>
+    )}
+    {state.selected ? <InfoModal icon={state.selected} /> : null}
+  </Grid>
+</DemoProvider>
+
 ```
 
 ### SVGr illustrations
@@ -682,6 +677,10 @@ const Example = () => {
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/Grid/index.js'
+import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import cx from 'classnames'
 
 import AccountIcon from 'cozy-ui/transpiled/react/Icons/Account'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
@@ -736,7 +735,7 @@ import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 const icons = [
   AccountIcon,
   BottomSelectIcon,
-  ...(isTwakeTheme() ? [ChatIcon] : []),
+  ChatIcon,
   CheckWhiteIcon,
   CloudBrokenIcon,
   CloudSync2,
@@ -753,7 +752,7 @@ const icons = [
   DevicePhoneIcon,
   DeviceTabletIcon,
   DotsWhiteIcon,
-  ...(isTwakeTheme() ? [DriveIcon] : []),
+  DriveIcon,
   FileTypeAudioIcon,
   FileTypeBankingAccountIcon,
   FileTypeBinIcon,
@@ -773,45 +772,73 @@ const icons = [
   GoogleIcon,
   KeychainIcon,
   LogoutLargeIcon,
-  ...(isTwakeTheme() ? [MailIcon] : []),
-  ...(isTwakeTheme() ? [NotesIcon] : []),
+  MailIcon,
+  NotesIcon,
   PapersIcon,
-  ...(isTwakeTheme() ? [PassIcon] : []),
+  PassIcon,
   ShareGrey08Icon,
-  ...(isTwakeTheme() ? [StoreIcon] : []),
-  ...(isTwakeTheme() ? [PhotosIcon] : []),
+  StoreIcon,
+  PhotosIcon,
   TopSelectIcon,
   TrashDuotoneIcon,
-  ...(isTwakeTheme() ? [TwakeWorkplace] : []),
+  TwakeWorkplace,
 ]
 
-const wrapperStyle = {
-  fontSize: '2rem',
-  display: 'grid',
-  gridTemplateColumns: 'repeat(6, 1fr)'
-}
-
 initialState = { size: 16 }
 
 const handleInputRangeChange = ev => {
   setState({ size: parseInt(ev.target.value, 10) })
 }
 
+const getNameFromIcon = icon => {
+  return icon.name.replace(/^Svg/, '')
+}
+
+const InfoModal = ({ icon }) => {
+  const iconName = getNameFromIcon(icon)
+  return <Dialog
+    size='large'
+    open={true}
+    title={<div className='u-ta-center'>{ iconName }</div>}
+    onClose={() => setState({ selected: null })}
+    content={
+      <>
+        <Typography variant='body1'>To import {iconName}, copy/paste the following line:</Typography>
+        <pre>
+          import {iconName}Icon from 'cozy-ui/transpiled/react/Icons/{iconName}'
+        </pre>
+      </>
+    }
+  />
+}
+
 ;
 
-<div>
+<DemoProvider>
   <Typography component='p' variant='body1' className='u-mb-1'>
     Font size: <input type='range' min='8' max='48' value={state.size} onChange={handleInputRangeChange} /> {state.size}px
   </Typography>
-  <div style={wrapperStyle}>
-    {
-    icons.map(icon => <div key={icon} className='u-ta-center u-mb-1'>
-        <Icon icon={ icon } size={state.size} />
-        <Typography variant='body1' className='u-mt-half'>{ icon.name.replace(/^Svg/, '') }</Typography>
-      </div>
+
+  <Grid container spacing={2}>
+    {icons.map(icon =>
+      <Grid
+        key={icon}
+        item
+        className="u-c-pointer u-ta-center u-mb-1"
+        xs={6}
+        md={3}
+        xl={2}
+        onClick={() => setState({ selected: icon })}
+      >
+        <Icon icon={icon} size={state.size} />
+        <Typography variant='body1' className='u-mt-half'>
+          { getNameFromIcon(icon) }
+        </Typography>
+      </Grid>
     )}
-  </div>
-</div>
+    {state.selected ? <InfoModal icon={state.selected} /> : null}
+  </Grid>
+</DemoProvider>
 ```
 
 ### SVGr permissions icons
@@ -819,6 +846,7 @@ const handleInputRangeChange = ev => {
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/Grid'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import cx from 'classnames'
@@ -872,13 +900,8 @@ import Versioning from 'cozy-ui/transpiled/react/Icons/Versioning'
 
 const icons = [Accounts, Apps, BankAccounts, BankGroups, BankOperations, BankRecurrence, BillPermissions, BugReport, CalendarPermissions, Category, CertifiedPermissions, ConnectedClients, Consumption, ContactsAccounts, ContactsGroups, Contacts, Contract, Ecolyo, Energy, Energybreakdown, Fallback, Family, FilesPen, FilesVersions, Files, HomePermissions, Identities, KonnectorsResult, Konnectors, LocationPermissions, Notifications, Opinions, Passwords, Permissions, PhotosAlbum, PhotosSettings, Profile, SafePermissions, Settings, Sharings, Sinister, Tags,TaskToEffectuate, Triggers, Versioning]
 const locale = {}
-const wrapperStyle = {
-  fontSize: '2rem',
-  display: 'grid',
-  gridTemplateColumns: 'repeat(6, 1fr)'
-}
 
-initialState = { size: 16 };
+initialState = { size: 16 }
 
 const handleInputRangeChange = ev => {
   setState({ size: parseInt(ev.target.value, 10) })
@@ -906,34 +929,33 @@ const InfoModal = ({ icon }) => {
   />
 }
 
-const Example = () => {
-  return (
-    <DemoProvider>
-      <Typography component='p' variant='body1' className='u-mb-1'>
-        Font size: <input type='range' min='8' max='48' value={state.size} onChange={handleInputRangeChange} /> {state.size}px
-      </Typography>
-      <div style={wrapperStyle}>
-        {
-        icons.map(icon => <div
-            key={icon}
-            className="u-c-pointer u-ta-center u-mb-1"
-            onClick={() => setState({ selected: icon })}
-          >
-            <Icon icon={ icon } size={state.size} />
-            <Typography variant='body1' className='u-mt-half'>
-              { getNameFromIcon(icon) }
-            </Typography>
-          </div>
-        )}
-      { state.selected ? <InfoModal icon={state.selected} /> : null }
-      </div>
-    </DemoProvider>
-  )
-}
-
 ;
 
-<Example />
+<DemoProvider>
+  <Typography component='p' variant='body1' className='u-mb-1'>
+    Font size: <input type='range' min='8' max='48' value={state.size} onChange={handleInputRangeChange} /> {state.size}px
+  </Typography>
+
+  <Grid container spacing={2}>
+    {icons.map(icon =>
+      <Grid
+        key={icon}
+        item
+        className="u-c-pointer u-ta-center u-mb-1"
+        xs={6}
+        md={3}
+        xl={2}
+        onClick={() => setState({ selected: icon })}
+      >
+        <Icon icon={icon} size={state.size} />
+        <Typography variant='body1' className='u-mt-half'>
+          { getNameFromIcon(icon) }
+        </Typography>
+      </Grid>
+    )}
+    {state.selected ? <InfoModal icon={state.selected} /> : null}
+  </Grid>
+</DemoProvider>
 ```
 
 ### Available icons from Sprite
@@ -945,6 +967,7 @@ include via `Sprite`.
 
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import Grid from 'cozy-ui/transpiled/react/Grid'
 // Sprite is necessary in order to add in the html rendering
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -953,14 +976,26 @@ const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
 const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','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','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','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','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','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','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','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','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','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']
 ;
-<div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
+
+<Grid container spacing={2}>
   <Sprite />
-  {availableIcons.map(icon => <div key={icon} style={{ textAlign: 'center'}}>
-      <Icon icon={ icon } color={ colors[i++ % colors.length] }/>
-      <Typography variant='body1' className='u-mt-half u-mb-1'>{ icon }</Typography>
-    </div>
+  {availableIcons.map(icon =>
+    <Grid
+      key={icon}
+      item
+      className="u-c-pointer u-ta-center u-mb-1"
+      xs={6}
+      md={3}
+      xl={2}
+      onClick={() => setState({ selected: icon })}
+    >
+      <Icon icon={icon} color={colors[i++ % colors.length]} />
+      <Typography variant='body1' className='u-mt-half'>
+        {icon}
+      </Typography>
+    </Grid>
   )}
-</div>
+</Grid>
 ```
 
 ### Available illustrations from Sprite
@@ -968,18 +1003,30 @@ const availableIcons = ['album-add','album-remove','album','answer','apple','arc
 ```jsx
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/Grid'
 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)' }}>
+<Grid container spacing={2}>
   <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>
+  {availableIcons.map(icon =>
+    <Grid
+      key={icon}
+      item
+      className="u-c-pointer u-ta-center u-mb-1"
+      xs={6}
+      md={3}
+      xl={2}
+      onClick={() => setState({ selected: icon })}
+    >
+      <Icon icon={icon} />
+      <Typography variant='body1' className='u-mt-half'>
+        {icon}
+      </Typography>
+    </Grid>
   )}
-</div>
+</Grid>
 ```

package/react/Icon/Sprite.jsx

@@ -1,20 +1,14 @@
 import React from 'react'
 
-import IconSpriteContent from './icons-sprite'
-import IconSpriteContentTwake from './icons-sprite-twake'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
+import IconSprintContent from './icons-sprite'
 
 const displayNone = { display: 'none' }
 
 const Sprite = () => {
-  const SpriteContent = isTwakeTheme()
-    ? IconSpriteContentTwake
-    : IconSpriteContent
-
   return (
     <div
       style={displayNone}
-      dangerouslySetInnerHTML={{ __html: SpriteContent }}
+      dangerouslySetInnerHTML={{ __html: IconSprintContent }}
     />
   )
 }

package/react/IconButton/Readme.md

@@ -81,7 +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"}
+    size="small"
   />
 </IconButton>
 ```

package/react/Icons/Account.jsx

@@ -1,21 +1,10 @@
-// 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">
-        <path
-          d="M24 17c2.21 0 4-2.015 4-4.5S26.21 8 24 8s-4 2.015-4 4.5 1.79 4.5 4 4.5zm-4 1c-2 0-4 3-4 4s0 2 1 2h14c1 0 1-1 1-2s-2-4-4-4c-.899 0-1.192.202-1.514.424-.395.273-.835.576-2.486.576-1.651 0-2.09-.303-2.486-.576C21.192 18.202 20.9 18 20 18z"
-          fillOpacity={0.5}
-        />
-        <path d="M12 18c3.314 0 6-3.134 6-7s-2.686-7-6-7-6 3.134-6 7 2.686 7 6 7zm-6 1c-3 0-6 4.5-6 6s0 3 1.5 3h21c1.5 0 1.5-1.5 1.5-3s-3-6-6-6c-1.349 0-1.788.303-2.271.637-.593.408-1.252.863-3.729.863-2.477 0-3.136-.455-3.729-.863C7.788 19.303 7.348 19 6 19z" />
-        <path d="M12 18c3.314 0 6-3.134 6-7s-2.686-7-6-7-6 3.134-6 7 2.686 7 6 7zm-6 1c-3 0-6 4.5-6 6s0 3 1.5 3h21c1.5 0 1.5-1.5 1.5-3s-3-6-6-6c-1.349 0-1.788.303-2.271.637-.593.408-1.252.863-3.729.863-2.477 0-3.136-.455-3.729-.863C7.788 19.303 7.348 19 6 19z" />
-      </g>
+    <svg viewBox="0 0 16 16" {...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" />
     </svg>
   )
 }

package/react/Icons/Accounts.jsx

@@ -1,24 +1,10 @@
-// Automatically created, please run `scripts/generate-svgr-icon.sh 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">
-        <path
-          fill="#d6d8da"
-          fillRule="nonzero"
-          d="M3 9c0 29.178 11.311 34.3 20.997 39C33.682 43.3 45 38.178 45 9L23.998 0 3 9z"
-        />
-        <path
-          fill="#5d6165"
-          d="M22.5 25.244V30.5a1 1 0 001 1h1a1 1 0 001-1v-5.256A4.502 4.502 0 0024 16.5a4.5 4.5 0 00-1.5 8.744zM24 37.5c-8.284 0-15-6.716-15-15 0-8.284 6.716-15 15-15 8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15z"
-        />
-      </g>
+    <svg viewBox="0 0 16 14" {...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" />
     </svg>
   )
 }

package/react/Icons/Album.jsx

@@ -1,17 +1,10 @@
-// Automatically created, please run `scripts/generate-svgr-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
-        fillRule="evenodd"
-        d="M1 3.01A3.005 3.005 0 014.003 0h9.99C14.55 0 15 .444 15 1c0 .552-.456 1-1.002 1H4.002a1 1 0 00-.012 2H8.51C8.78 4 9 4.228 9 4.491V10l1.5-1 1.5 1V4.491A.49.49 0 0112.495 4h1.506c.552 0 .999.456.999 1.002v9.996C15 15.55 14.55 16 13.993 16h-9.99A3 3 0 011 12.99V3.01z"
-      />
+      <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>
   )
 }