cozy-ui 131.0.1 → 131.1.0-beta.1

package/react/Icon/Readme.md

@@ -1,1052 +1 @@
-Provides an easy way to use SVG icons included in Cozy-UI as well
-as your custom icons.
-
-The `icon` attribute can take an arbitrary React component, a SVG, SVGr, Sprite or Icon component. It is expected that
-this component print an `<svg>` tag and forwards any props to it. You MUST use svg-sprite-loader
-to load your SVG (either explicitly or, better, implicitly in your `webpack.config.js`). Do not put a `fill` property on your icon.
-
-Be aware that Icon forwards unknown props to the underlying `<svg />` element, such as onClick prop.
-
-```jsx
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import People from 'cozy-ui/transpiled/react/Icons/People'
-import Box from 'cozy-ui/transpiled/react/Box'
-const MyIcon = (props) => <svg {...props}><circle cx="8" cy="8" r="7" stroke="var(--primaryColor)" strokeWidth="2" /></svg>
-
-;
-
-<>
-  <Box display="flex" gridGap={5}>
-    <Icon icon="people" />
-    <Icon icon={People} />
-    <Icon icon={MyIcon} width={16} height={16} color="var(--paperBackgroundColor)"/>
-    <Icon icon={<Icon icon={People} />} />
-  </Box>
-</>
-
-```
-
-### Transform properties
-
-Use `spin` and `rotate` if you want you to turn your icons upside down 🙃.
-
-```jsx
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import SpinnerIcon from "cozy-ui/transpiled/react/Icons/Spinner"
-import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
-
-;
-
-<div>
-  <Icon icon={SpinnerIcon} color='#0bda51' spin/>{'\u00A0'}
-  <Icon icon={RightIcon} color='#c30017' rotate={45}/>
-</div>
-```
-
-### SVGr icons
-
-Cozy-ui provides SVGr icons; icons that can be directly imported as a React components.
-
-This works well with tree shaking since icons provided by cozy-ui that you do not use will
-not be present in your final bundle.
-
-```jsx static
-import Album from 'cozy-ui/transpiled/react/Icons/Album'
-<Icon icon={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'
-import cx from 'classnames'
-
-import { makeStyles } from 'cozy-ui/transpiled/react/styles'
-import Album from 'cozy-ui/transpiled/react/Icons/Album'
-import AlbumAdd from 'cozy-ui/transpiled/react/Icons/AlbumAdd'
-import AlbumRemove from 'cozy-ui/transpiled/react/Icons/AlbumRemove'
-import Answer from 'cozy-ui/transpiled/react/Icons/Answer'
-import Apple from 'cozy-ui/transpiled/react/Icons/Apple'
-import Archive from 'cozy-ui/transpiled/react/Icons/Archive'
-import ArrowUp from 'cozy-ui/transpiled/react/Icons/ArrowUp'
-import AssignAdmin from 'cozy-ui/transpiled/react/Icons/AssignAdmin'
-import AssignModerator from 'cozy-ui/transpiled/react/Icons/AssignModerator'
-import Assistant from 'cozy-ui/transpiled/react/Icons/Assistant'
-import Attachment from 'cozy-ui/transpiled/react/Icons/Attachment'
-import Attention from 'cozy-ui/transpiled/react/Icons/Attention'
-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'
-import Benefit from 'cozy-ui/transpiled/react/Icons/Benefit'
-import Bike from 'cozy-ui/transpiled/react/Icons/Bike'
-import Bill from 'cozy-ui/transpiled/react/Icons/Bill'
-import Bottom from 'cozy-ui/transpiled/react/Icons/Bottom'
-import BrowserBrave from 'cozy-ui/transpiled/react/Icons/BrowserBrave'
-import BrowserChrome from 'cozy-ui/transpiled/react/Icons/BrowserChrome'
-import BrowserDuckduckgo from 'cozy-ui/transpiled/react/Icons/BrowserDuckduckgo'
-import BrowserEdge from 'cozy-ui/transpiled/react/Icons/BrowserEdge'
-import BrowserEdgeChromium from 'cozy-ui/transpiled/react/Icons/BrowserEdgeChromium'
-import BrowserFirefox from 'cozy-ui/transpiled/react/Icons/BrowserFirefox'
-import BrowserIe from 'cozy-ui/transpiled/react/Icons/BrowserIe'
-import BrowserOpera from 'cozy-ui/transpiled/react/Icons/BrowserOpera'
-import BrowserSafari from 'cozy-ui/transpiled/react/Icons/BrowserSafari'
-import Burger from 'cozy-ui/transpiled/react/Icons/Burger'
-import Bus from 'cozy-ui/transpiled/react/Icons/Bus'
-import Calendar from 'cozy-ui/transpiled/react/Icons/Calendar'
-import Camera from 'cozy-ui/transpiled/react/Icons/Camera'
-import Car from 'cozy-ui/transpiled/react/Icons/Car'
-import CarbonCopy from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
-import CarPooling from 'cozy-ui/transpiled/react/Icons/Carpooling'
-import Categories from 'cozy-ui/transpiled/react/Icons/Categories'
-import Certified from 'cozy-ui/transpiled/react/Icons/Certified'
-import Check from 'cozy-ui/transpiled/react/Icons/Check'
-import Checkbox from 'cozy-ui/transpiled/react/Icons/Checkbox'
-import CheckCircle from 'cozy-ui/transpiled/react/Icons/CheckCircle'
-import CheckList from 'cozy-ui/transpiled/react/Icons/CheckList'
-import CheckSquare from 'cozy-ui/transpiled/react/Icons/CheckSquare'
-import Chess from 'cozy-ui/transpiled/react/Icons/Chess'
-import Child from 'cozy-ui/transpiled/react/Icons/Child'
-import CircleFilled from 'cozy-ui/transpiled/react/Icons/CircleFilled'
-import Clock from 'cozy-ui/transpiled/react/Icons/Clock'
-import ClockOutline from 'cozy-ui/transpiled/react/Icons/ClockOutline'
-import Cloud from 'cozy-ui/transpiled/react/Icons/Cloud'
-import Cloud2 from 'cozy-ui/transpiled/react/Icons/Cloud2'
-import CloudHappy from 'cozy-ui/transpiled/react/Icons/CloudHappy'
-import CloudRainbow from 'cozy-ui/transpiled/react/Icons/CloudRainbow'
-import CloudPlusOutlined from 'cozy-ui/transpiled/react/Icons/CloudPlusOutlined'
-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'
-import Compass from 'cozy-ui/transpiled/react/Icons/Compass'
-import Connector from 'cozy-ui/transpiled/react/Icons/Connector'
-import Contract from 'cozy-ui/transpiled/react/Icons/Contract'
-import Contrast from 'cozy-ui/transpiled/react/Icons/Contrast'
-import Copy from 'cozy-ui/transpiled/react/Icons/Copy'
-import CozyCircle from 'cozy-ui/transpiled/react/Icons/CozyCircle'
-import CozyLaugh from 'cozy-ui/transpiled/react/Icons/CozyLaugh'
-import CozyLock from 'cozy-ui/transpiled/react/Icons/CozyLock'
-import CozyRelease from 'cozy-ui/transpiled/react/Icons/CozyRelease'
-import CozyText from 'cozy-ui/transpiled/react/Icons/CozyText'
-import Credit from 'cozy-ui/transpiled/react/Icons/Credit'
-import CreditCard from 'cozy-ui/transpiled/react/Icons/CreditCard'
-import CreditCardAdd from 'cozy-ui/transpiled/react/Icons/CreditCardAdd'
-import Crop from 'cozy-ui/transpiled/react/Icons/Crop'
-import Cross from 'cozy-ui/transpiled/react/Icons/Cross'
-import CrossCircle from 'cozy-ui/transpiled/react/Icons/CrossCircle'
-import CrossCircleOutline from 'cozy-ui/transpiled/react/Icons/CrossCircleOutline'
-import CrossMedium from 'cozy-ui/transpiled/react/Icons/CrossMedium'
-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 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'
-import Devices from 'cozy-ui/transpiled/react/Icons/Devices'
-import Discuss from 'cozy-ui/transpiled/react/Icons/Discuss'
-import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
-import Down from 'cozy-ui/transpiled/react/Icons/Down'
-import Download from 'cozy-ui/transpiled/react/Icons/Download'
-import DrawingArrowUp from 'cozy-ui/transpiled/react/Icons/DrawingArrowUp'
-import Dropdown from 'cozy-ui/transpiled/react/Icons/Dropdown'
-import DropdownClose from 'cozy-ui/transpiled/react/Icons/DropdownClose'
-import DropdownOpen from 'cozy-ui/transpiled/react/Icons/DropdownOpen'
-import Dropup from 'cozy-ui/transpiled/react/Icons/Dropup'
-import ElectricBike from 'cozy-ui/transpiled/react/Icons/ElectricBike'
-import ElectricCar from 'cozy-ui/transpiled/react/Icons/ElectricCar'
-import ElectricScooter from 'cozy-ui/transpiled/react/Icons/ElectricScooter'
-import Email from 'cozy-ui/transpiled/react/Icons/Email'
-import EmailNotification from 'cozy-ui/transpiled/react/Icons/EmailNotification'
-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 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'
-import File from 'cozy-ui/transpiled/react/Icons/File'
-import FileAdd from 'cozy-ui/transpiled/react/Icons/FileAdd'
-import FileDuotone from 'cozy-ui/transpiled/react/Icons/FileDuotone'
-import FileNew from 'cozy-ui/transpiled/react/Icons/FileNew'
-import FileNone from 'cozy-ui/transpiled/react/Icons/FileNone'
-import FileOutline from 'cozy-ui/transpiled/react/Icons/FileOutline'
-import Filter from 'cozy-ui/transpiled/react/Icons/Filter'
-import Fingerprint from 'cozy-ui/transpiled/react/Icons/Fingerprint'
-import Fitness from 'cozy-ui/transpiled/react/Icons/Fitness'
-import Flag from 'cozy-ui/transpiled/react/Icons/Flag'
-import FlagOutlined from 'cozy-ui/transpiled/react/Icons/FlagOutlined'
-import FlashAuto from 'cozy-ui/transpiled/react/Icons/FlashAuto'
-import Flashlight from 'cozy-ui/transpiled/react/Icons/Flashlight'
-import Folder from 'cozy-ui/transpiled/react/Icons/Folder'
-import FolderAdd from 'cozy-ui/transpiled/react/Icons/FolderAdd'
-import FolderMoveto from 'cozy-ui/transpiled/react/Icons/FolderMoveto'
-import FolderOpen from 'cozy-ui/transpiled/react/Icons/FolderOpen'
-import Forbidden from 'cozy-ui/transpiled/react/Icons/Forbidden'
-import FromUser from 'cozy-ui/transpiled/react/Icons/FromUser'
-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 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'
-import Hand from 'cozy-ui/transpiled/react/Icons/Hand'
-import Heart from 'cozy-ui/transpiled/react/Icons/Heart'
-import Help from 'cozy-ui/transpiled/react/Icons/Help'
-import HelpOutlined from 'cozy-ui/transpiled/react/Icons/HelpOutlined'
-import History from 'cozy-ui/transpiled/react/Icons/History'
-import Home from 'cozy-ui/transpiled/react/Icons/Home'
-import Hourglass from 'cozy-ui/transpiled/react/Icons/Hourglass'
-import Image from 'cozy-ui/transpiled/react/Icons/Image'
-import Info from 'cozy-ui/transpiled/react/Icons/Info'
-import InfoOutlined from 'cozy-ui/transpiled/react/Icons/InfoOutlined'
-import Justice from 'cozy-ui/transpiled/react/Icons/Justice'
-import Key from 'cozy-ui/transpiled/react/Icons/Key'
-import Key2 from 'cozy-ui/transpiled/react/Icons/Key2'
-import LabelOutlined from 'cozy-ui/transpiled/react/Icons/LabelOutlined'
-import Laudry from 'cozy-ui/transpiled/react/Icons/Laudry'
-import Laptop from 'cozy-ui/transpiled/react/Icons/Laptop'
-import Left from 'cozy-ui/transpiled/react/Icons/Left'
-import Library from 'cozy-ui/transpiled/react/Icons/Library'
-import Lightbulb from 'cozy-ui/transpiled/react/Icons/Lightbulb'
-import Lightning from 'cozy-ui/transpiled/react/Icons/Lightning'
-import Link from 'cozy-ui/transpiled/react/Icons/Link'
-import LinkOut from 'cozy-ui/transpiled/react/Icons/LinkOut'
-import List from 'cozy-ui/transpiled/react/Icons/List'
-import ListMin from 'cozy-ui/transpiled/react/Icons/ListMin'
-import Location from 'cozy-ui/transpiled/react/Icons/Location'
-import Lock from 'cozy-ui/transpiled/react/Icons/Lock'
-import LockScreen from 'cozy-ui/transpiled/react/Icons/LockScreen'
-import Logout from 'cozy-ui/transpiled/react/Icons/Logout'
-import MagicTrick from 'cozy-ui/transpiled/react/Icons/MagicTrick'
-import Magnet from 'cozy-ui/transpiled/react/Icons/Magnet'
-import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
-import Matrix from 'cozy-ui/transpiled/react/Icons/Matrix'
-import Merge from 'cozy-ui/transpiled/react/Icons/Merge'
-import Moped from 'cozy-ui/transpiled/react/Icons/Moped'
-import Mosaic from 'cozy-ui/transpiled/react/Icons/Mosaic'
-import MosaicMin from 'cozy-ui/transpiled/react/Icons/MosaicMin'
-import Motorcycle from 'cozy-ui/transpiled/react/Icons/Motorcycle'
-import Mountain from 'cozy-ui/transpiled/react/Icons/Mountain'
-import Movement from 'cozy-ui/transpiled/react/Icons/Movement'
-import MovementIn from 'cozy-ui/transpiled/react/Icons/MovementIn'
-import MovementOut from 'cozy-ui/transpiled/react/Icons/MovementOut'
-import Moveto from 'cozy-ui/transpiled/react/Icons/Moveto'
-import MultiFiles from 'cozy-ui/transpiled/react/Icons/MultiFiles'
-import Music from 'cozy-ui/transpiled/react/Icons/Music'
-import New from 'cozy-ui/transpiled/react/Icons/New'
-import Next from 'cozy-ui/transpiled/react/Icons/Next'
-import Note from 'cozy-ui/transpiled/react/Icons/Note'
-import NotificationEmail from 'cozy-ui/transpiled/react/Icons/NotificationEmail'
-import Number from 'cozy-ui/transpiled/react/Icons/Number'
-import Offline from 'cozy-ui/transpiled/react/Icons/Offline'
-import Online from 'cozy-ui/transpiled/react/Icons/Online'
-import Openapp from 'cozy-ui/transpiled/react/Icons/Openapp'
-import Openwith from 'cozy-ui/transpiled/react/Icons/Openwith'
-import Palette from 'cozy-ui/transpiled/react/Icons/Palette'
-import Paper from 'cozy-ui/transpiled/react/Icons/Paper'
-import Paperplane from 'cozy-ui/transpiled/react/Icons/Paperplane'
-import Password from 'cozy-ui/transpiled/react/Icons/Password'
-import Pen from 'cozy-ui/transpiled/react/Icons/Pen'
-import People from 'cozy-ui/transpiled/react/Icons/People'
-import Peoples from 'cozy-ui/transpiled/react/Icons/Peoples'
-import Percent from 'cozy-ui/transpiled/react/Icons/Percent'
-import PercentCircle from 'cozy-ui/transpiled/react/Icons/PercentCircle'
-import PersonAdd from 'cozy-ui/transpiled/react/Icons/PersonAdd'
-import PersonalData from 'cozy-ui/transpiled/react/Icons/PersonalData'
-import Phone from 'cozy-ui/transpiled/react/Icons/Phone'
-import PhoneDownload from 'cozy-ui/transpiled/react/Icons/PhoneDownload'
-import PhoneUpload from 'cozy-ui/transpiled/react/Icons/PhoneUpload'
-import PieChart from 'cozy-ui/transpiled/react/Icons/PieChart'
-import Pin from 'cozy-ui/transpiled/react/Icons/Pin'
-import Plane from 'cozy-ui/transpiled/react/Icons/Plane'
-import Plus from 'cozy-ui/transpiled/react/Icons/Plus'
-import PlusSmall from 'cozy-ui/transpiled/react/Icons/PlusSmall'
-import PopInside from 'cozy-ui/transpiled/react/Icons/PopInside'
-import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
-import Printer from 'cozy-ui/transpiled/react/Icons/Printer'
-import Qualify from 'cozy-ui/transpiled/react/Icons/Qualify'
-import RadioChecked from 'cozy-ui/transpiled/react/Icons/RadioChecked'
-import RadioUnchecked from 'cozy-ui/transpiled/react/Icons/RadioUnchecked'
-import Refresh from 'cozy-ui/transpiled/react/Icons/Refresh'
-import Relationship from 'cozy-ui/transpiled/react/Icons/Relationship'
-import Remboursement from 'cozy-ui/transpiled/react/Icons/Remboursement'
-import Rename from 'cozy-ui/transpiled/react/Icons/Rename'
-import Repare from 'cozy-ui/transpiled/react/Icons/Repare'
-import Reply from 'cozy-ui/transpiled/react/Icons/Reply'
-import Restaurant from 'cozy-ui/transpiled/react/Icons/Restaurant'
-import Restore from 'cozy-ui/transpiled/react/Icons/Restore'
-import RestoreStraight from 'cozy-ui/transpiled/react/Icons/RestoreStraight'
-import Right from 'cozy-ui/transpiled/react/Icons/Right'
-import Rise from 'cozy-ui/transpiled/react/Icons/Rise'
-import RotateLeft from 'cozy-ui/transpiled/react/Icons/RotateLeft'
-import RotateRight from 'cozy-ui/transpiled/react/Icons/RotateRight'
-import SadCozy from 'cozy-ui/transpiled/react/Icons/SadCozy'
-import Safe from 'cozy-ui/transpiled/react/Icons/Safe'
-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 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'
-import ShareCircle from 'cozy-ui/transpiled/react/Icons/ShareCircle'
-import Shield from 'cozy-ui/transpiled/react/Icons/Shield'
-import Shop from 'cozy-ui/transpiled/react/Icons/Shop'
-import Sound from 'cozy-ui/transpiled/react/Icons/Sound'
-import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
-import SportBag from 'cozy-ui/transpiled/react/Icons/SportBag'
-import Stack from 'cozy-ui/transpiled/react/Icons/Stack'
-import Star from 'cozy-ui/transpiled/react/Icons/Star'
-import StarOutline from 'cozy-ui/transpiled/react/Icons/StarOutline'
-import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
-import Stop from 'cozy-ui/transpiled/react/Icons/Stop'
-import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
-import Support from 'cozy-ui/transpiled/react/Icons/Support'
-import Swap from 'cozy-ui/transpiled/react/Icons/Swap'
-import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
-import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
-import Tab from 'cozy-ui/transpiled/react/Icons/Tab'
-import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
-import Target from 'cozy-ui/transpiled/react/Icons/Target'
-import Task from 'cozy-ui/transpiled/react/Icons/Task'
-import Team from 'cozy-ui/transpiled/react/Icons/Team'
-import Telecom from 'cozy-ui/transpiled/react/Icons/Telecom'
-import Telephone from 'cozy-ui/transpiled/react/Icons/Telephone'
-import Text from 'cozy-ui/transpiled/react/Icons/Text'
-import TextInfo from 'cozy-ui/transpiled/react/Icons/TextInfo'
-import Top from 'cozy-ui/transpiled/react/Icons/Top'
-import ToTheCloud from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
-import Train from 'cozy-ui/transpiled/react/Icons/Train'
-import Tram from 'cozy-ui/transpiled/react/Icons/Tram'
-import Trash from 'cozy-ui/transpiled/react/Icons/Trash'
-import Trophy from 'cozy-ui/transpiled/react/Icons/Trophy'
-import Uncloud from 'cozy-ui/transpiled/react/Icons/Uncloud'
-import Unknow from 'cozy-ui/transpiled/react/Icons/Unknow'
-import Unlink from 'cozy-ui/transpiled/react/Icons/Unlink'
-import Unlock from 'cozy-ui/transpiled/react/Icons/Unlock'
-import Up from 'cozy-ui/transpiled/react/Icons/Up'
-import Upload from 'cozy-ui/transpiled/react/Icons/Upload'
-import Videos from 'cozy-ui/transpiled/react/Icons/Videos'
-import Walk from 'cozy-ui/transpiled/react/Icons/Walk'
-import Wallet from 'cozy-ui/transpiled/react/Icons/Wallet'
-import WalletAdd from 'cozy-ui/transpiled/react/Icons/WalletAdd'
-import WalletNew from 'cozy-ui/transpiled/react/Icons/WalletNew'
-import Warn from 'cozy-ui/transpiled/react/Icons/Warn'
-import Warning from 'cozy-ui/transpiled/react/Icons/Warning'
-import Water from 'cozy-ui/transpiled/react/Icons/Water'
-import WarningCircle from 'cozy-ui/transpiled/react/Icons/WarningCircle'
-import Work from 'cozy-ui/transpiled/react/Icons/Work'
-import WrenchCircle from 'cozy-ui/transpiled/react/Icons/WrenchCircle'
-
-const icons = [
-  AlbumAdd,
-  AlbumRemove,
-  Album,
-  Answer,
-  Apple,
-  Archive,
-  ArrowUp,
-  AssignAdmin,
-  AssignModerator,
-  Assistant,
-  Attachment,
-  Attention,
-  Bank,
-  BankCheck,
-  Banking,
-  BankingAdd,
-  Bell,
-  Benefit,
-  Bike,
-  Bill,
-  Bottom,
-  BrowserBrave,
-  BrowserChrome,
-  BrowserDuckduckgo,
-  BrowserEdge,
-  BrowserEdgeChromium,
-  BrowserFirefox,
-  BrowserIe,
-  BrowserOpera,
-  BrowserSafari,
-  Burger,
-  Bus,
-  Calendar,
-  Camera,
-  Car,
-  CarbonCopy,
-  CarPooling,
-  Categories,
-  Certified,
-  Check,
-  Checkbox,
-  CheckCircle,
-  CheckList,
-  CheckSquare,
-  Chess,
-  Child,
-  CircleFilled,
-  Clock,
-  ClockOutline,
-  Cloud,
-  Cloud2,
-  CloudHappy,
-  CloudRainbow,
-  CloudPlusOutlined,
-  CloudSync,
-  Cocktail,
-  Collect,
-  Comment,
-  Company,
-  Compare,
-  Compass,
-  Connector,
-  Contract,
-  Contrast,
-  Copy,
-  CozyCircle,
-  CozyLaugh,
-  CozyLock,
-  CozyRelease,
-  CozyText,
-  Credit,
-  CreditCard,
-  CreditCardAdd,
-  Crop,
-  CrossCircleOutline,
-  CrossCircle,
-  CrossMedium,
-  CrossSmall,
-  Cross,
-  Cube,
-  Dash,
-  Dashboard,
-  DataControl,
-  Debit,
-  DesktopDownload,
-  Devices,
-  Discuss,
-  Dots,
-  Down,
-  Download,
-  DrawingArrowUp,
-  DropdownClose,
-  DropdownOpen,
-  Dropdown,
-  Dropup,
-  ElectricBike,
-  ElectricCar,
-  ElectricScooter,
-  EmailNotification,
-  EmailOpen,
-  Email,
-  Eu,
-  Euro,
-  Exchange,
-  Eye,
-  EyeClosed,
-  FaceId,
-  FileAdd,
-  FileDuotone,
-  FileNew,
-  FileNone,
-  FileOutline,
-  File,
-  Filter,
-  Fingerprint,
-  Fitness,
-  Flag,
-  FlagOutlined,
-  FlashAuto,
-  Flashlight,
-  Folder,
-  FolderAdd,
-  FolderMoveto,
-  FolderOpen,
-  Forbidden,
-  FromUser,
-  Gear,
-  Globe,
-  Gouv,
-  GraphCircle,
-  GridIcon,
-  GroupList,
-  Groups,
-  Growth,
-  Hand,
-  Heart,
-  Help,
-  HelpOutlined,
-  History,
-  Home,
-  Hourglass,
-  Image,
-  InfoOutlined,
-  Info,
-  Justice,
-  Key,
-  Key2,
-  LabelOutlined,
-  Laudry,
-  Laptop,
-  Left,
-  Library,
-  Lightbulb,
-  Lightning,
-  Link,
-  LinkOut,
-  List,
-  ListMin,
-  Location,
-  Lock,
-  LockScreen,
-  Logout,
-  MagicTrick,
-  Magnet,
-  Magnifier,
-  Matrix,
-  Merge,
-  Moped,
-  Mosaic,
-  MosaicMin,
-  Motorcycle,
-  Mountain,
-  MovementIn,
-  MovementOut,
-  Movement,
-  Moveto,
-  MultiFiles,
-  Music,
-  New,
-  Next,
-  Note,
-  NotificationEmail,
-  Number,
-  Offline,
-  Online,
-  Openapp,
-  Openwith,
-  Palette,
-  Paper,
-  Paperplane,
-  Password,
-  Pen,
-  People,
-  Peoples,
-  Percent,
-  PercentCircle,
-  PersonAdd,
-  PersonalData,
-  PhoneDownload,
-  PhoneUpload,
-  Phone,
-  PieChart,
-  Pin,
-  Plane,
-  PlusSmall,
-  Plus,
-  PopInside,
-  Previous,
-  Printer,
-  Qualify,
-  RadioChecked,
-  RadioUnchecked,
-  Refresh,
-  Relationship,
-  Remboursement,
-  Rename,
-  Repare,
-  Reply,
-  Restaurant,
-  Restore,
-  RestoreStraight,
-  Right,
-  Rise,
-  RotateLeft,
-  RotateRight,
-  SadCozy,
-  Safe,
-  School,
-  Scooter,
-  Security,
-  SelectAll,
-  Server,
-  Setting,
-  Share,
-  ShareCircle,
-  Shield,
-  Shop,
-  Sound,
-  Spinner,
-  SportBag,
-  Stack,
-  Star,
-  StarOutline,
-  Stats,
-  Stop,
-  Subway,
-  Support,
-  Swap,
-  Sync,
-  SyncCozy,
-  Tab,
-  Tag,
-  Target,
-  Task,
-  Team,
-  Telecom,
-  Telephone,
-  Text,
-  TextInfo,
-  Top,
-  ToTheCloud,
-  Train,
-  Tram,
-  Trash,
-  Trophy,
-  Uncloud,
-  Unknow,
-  Unlink,
-  Unlock,
-  Up,
-  Upload,
-  Videos,
-  Walk,
-  WalletAdd,
-  WalletNew,
-  Wallet,
-  Warn,
-  WarningCircle,
-  Warning,
-  Water,
-  WrenchCircle,
-  Work
-]
-const locale = {}
-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>
-      </>
-    }
-  />
-}
-
-;
-
-<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
-
-```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'
-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'
-import ContactsIcon from 'cozy-ui/transpiled/react/Icons/Contacts'
-import CozyAuthentificationIcon from 'cozy-ui/transpiled/react/Icons/CozyAuthentification'
-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'
-import FileTypeCodeIcon from 'cozy-ui/transpiled/react/Icons/FileTypeCode'
-import FileTypeFilesIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFiles'
-import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
-import FileTypeServerIcon from 'cozy-ui/transpiled/react/Icons/FileTypeServer'
-import FileTypeImageIcon from 'cozy-ui/transpiled/react/Icons/FileTypeImage'
-import FileTypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
-import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
-import FileTypeSheetIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSheet'
-import FileTypeSlideIcon from 'cozy-ui/transpiled/react/Icons/FileTypeSlide'
-import FileTypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import FileTypeVideoIcon from 'cozy-ui/transpiled/react/Icons/FileTypeVideo'
-import FileTypeZipIcon from 'cozy-ui/transpiled/react/Icons/FileTypeZip'
-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 OnlyOfficeIcon from 'cozy-ui/transpiled/react/Icons/OnlyOffice'
-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 PhotosIcon from 'cozy-ui/transpiled/react/Icons/Photos'
-import TopSelectIcon from 'cozy-ui/transpiled/react/Icons/TopSelect'
-import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
-import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
-
-const icons = [
-  AccountIcon,
-  BottomSelectIcon,
-  ChatIcon,
-  CheckWhiteIcon,
-  CloudBrokenIcon,
-  CloudSync2,
-  ContactsIcon,
-  CozyAuthentificationIcon,
-  CozyIcon,
-  CozyLogoIcon,
-  CozyUpgradeIcon,
-  CreditCardLargeIcon,
-  CrossWhiteIcon,
-  DashWhiteIcon,
-  DeviceBrowserIcon,
-  DeviceLaptopIcon,
-  DevicePhoneIcon,
-  DeviceTabletIcon,
-  DotsWhiteIcon,
-  DriveIcon,
-  FileTypeAudioIcon,
-  FileTypeBankingAccountIcon,
-  FileTypeBinIcon,
-  FileTypeCodeIcon,
-  FileTypeFilesIcon,
-  FileTypeFolderIcon,
-  FileTypeServerIcon,
-  FileTypeImageIcon,
-  FileTypeNoteIcon,
-  FileTypePdfIcon,
-  FileTypeSheetIcon,
-  FileTypeSlideIcon,
-  FileTypeTextIcon,
-  FileTypeVideoIcon,
-  FileTypeZipIcon,
-  ForbiddenSignIcon,
-  GoogleIcon,
-  KeychainIcon,
-  LogoutLargeIcon,
-  MailIcon,
-  NotesIcon,
-  OnlyOfficeIcon,
-  PapersIcon,
-  PassIcon,
-  ShareGrey08Icon,
-  StoreIcon,
-  PhotosIcon,
-  TopSelectIcon,
-  TrashDuotoneIcon,
-  TwakeWorkplace,
-]
-
-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>
-      </>
-    }
-  />
-}
-
-;
-
-<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 permissions icons
-
-```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'
-
-import { makeStyles } from 'cozy-ui/transpiled/react/styles'
-import Accounts from 'cozy-ui/transpiled/react/Icons/Accounts'
-import Apps from 'cozy-ui/transpiled/react/Icons/Apps'
-import BankAccounts from 'cozy-ui/transpiled/react/Icons/BankAccounts'
-import BankGroups from 'cozy-ui/transpiled/react/Icons/BankGroups'
-import BankOperations from 'cozy-ui/transpiled/react/Icons/BankOperations'
-import BankRecurrence from 'cozy-ui/transpiled/react/Icons/BankRecurrence'
-import BillPermissions from 'cozy-ui/transpiled/react/Icons/BillPermissions'
-import BugReport from 'cozy-ui/transpiled/react/Icons/BugReport'
-import CalendarPermissions from 'cozy-ui/transpiled/react/Icons/CalendarPermissions'
-import Category from 'cozy-ui/transpiled/react/Icons/Category'
-import CertifiedPermissions from 'cozy-ui/transpiled/react/Icons/CertifiedPermissions'
-import ConnectedClients from 'cozy-ui/transpiled/react/Icons/ConnectedClients'
-import Consumption from 'cozy-ui/transpiled/react/Icons/Consumption'
-import ContactsAccounts from 'cozy-ui/transpiled/react/Icons/ContactsAccounts'
-import ContactsGroups from 'cozy-ui/transpiled/react/Icons/ContactsGroups'
-import Contacts from 'cozy-ui/transpiled/react/Icons/Contacts'
-import Contract from 'cozy-ui/transpiled/react/Icons/Contract'
-import Ecolyo from 'cozy-ui/transpiled/react/Icons/Ecolyo'
-import Energy from 'cozy-ui/transpiled/react/Icons/Energy'
-import Energybreakdown from 'cozy-ui/transpiled/react/Icons/Energybreakdown'
-import Fallback from 'cozy-ui/transpiled/react/Icons/Fallback'
-import Family from 'cozy-ui/transpiled/react/Icons/Family'
-import FilesPen from 'cozy-ui/transpiled/react/Icons/FilesPen'
-import FilesVersions from 'cozy-ui/transpiled/react/Icons/FilesVersions'
-import Files from 'cozy-ui/transpiled/react/Icons/Files'
-import HomePermissions from 'cozy-ui/transpiled/react/Icons/HomePermissions'
-import Identities from 'cozy-ui/transpiled/react/Icons/Identities'
-import KonnectorsResult from 'cozy-ui/transpiled/react/Icons/KonnectorsResult'
-import Konnectors from 'cozy-ui/transpiled/react/Icons/Konnectors'
-import LocationPermissions from 'cozy-ui/transpiled/react/Icons/LocationPermissions'
-import Notifications from 'cozy-ui/transpiled/react/Icons/Notifications'
-import Opinions from 'cozy-ui/transpiled/react/Icons/Opinions'
-import Passwords from 'cozy-ui/transpiled/react/Icons/Passwords'
-import Permissions from 'cozy-ui/transpiled/react/Icons/Permissions'
-import PhotosAlbum from 'cozy-ui/transpiled/react/Icons/PhotosAlbum'
-import PhotosSettings from 'cozy-ui/transpiled/react/Icons/PhotosSettings'
-import Profile from 'cozy-ui/transpiled/react/Icons/Profile'
-import SafePermissions from 'cozy-ui/transpiled/react/Icons/SafePermissions'
-import Settings from 'cozy-ui/transpiled/react/Icons/Settings'
-import Sharings from 'cozy-ui/transpiled/react/Icons/Sharings'
-import Sinister from 'cozy-ui/transpiled/react/Icons/Sinister'
-import Tags from 'cozy-ui/transpiled/react/Icons/Tags'
-import TaskToEffectuate from 'cozy-ui/transpiled/react/Icons/TaskToEffectuate'
-import Triggers from 'cozy-ui/transpiled/react/Icons/Triggers'
-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 = {}
-
-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>
-      </>
-    }
-  />
-}
-
-;
-
-<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
-
-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
-include via `Sprite`.
-`Sprite` can for example be included in the main `Layout` of your application.
-
-```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'
-
-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','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}>
-  <Sprite />
-  {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>
-  )}
-</Grid>
-```
-
-### Available illustrations from Sprite
-
-```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', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy']
-
-;
-
-<Grid container spacing={2}>
-  <Sprite />
-  {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>
-  )}
-</Grid>
-```
+See [Material UI documentation](https://material-ui.com/demos/expansion-panels/) to learn more about Accordion.