cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/IconButton/Readme.md

@@ -0,0 +1,87 @@
+A component suitable to be used when an Icon should be used as a button.
+Provides hover, active styles + accessible size.
+
+```jsx
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+// <-- only useful for the documentation
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import RestoreIcon from 'cozy-ui/transpiled/react/Icons/Restore'
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+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, xlarge: false }]
+// -->
+
+;
+
+<Variants initialVariants={initialVariants} radio screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {columns.map(column =>
+        <Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
+          <Stack spacing="s">
+            <Typography>{Object.values(column)[0]}</Typography>
+            <p>
+              <IconButton
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={PeopleIcon}/>
+              </IconButton>
+              <IconButton
+                color="primary"
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={RestoreIcon} />
+              </IconButton>
+              <IconButton
+                color="secondary"
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={CrossIcon}/>
+              </IconButton>
+              <IconButton
+                color="error"
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={TrashIcon}/>
+              </IconButton>
+            </p>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```
+
+### Example with embedded button
+
+```jsx
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'
+
+;
+
+<IconButton className="u-p-half">
+  <Button
+    component="div"
+    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="small"
+  />
+</IconButton>
+```

package/react/IconButton/index.jsx

@@ -0,0 +1,51 @@
+import MuiIconButton from '@material-ui/core/IconButton'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+const muiSupportedColors = ['default', 'inherit', 'primary', 'secondary']
+
+/**
+ * @typedef {Object} IconButtonPropTypes
+ * @property {React.ReactNode} children - The content of the button, typically an icon.
+ * @property {'default' | 'inherit' | 'primary' | 'secondary' | 'error'} [color='default'] - The color of the button.
+ * @property {'small' | 'medium' | 'large' | 'xlarge'} [size='large'] - The size of the button.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, IconButtonPropTypes & import('@material-ui/core/IconButton').IconButtonProps>
+ */
+const IconButton = forwardRef(
+  ({ size = 'large', className, children, color, ...props }, ref) => {
+    const selfColor = muiSupportedColors.includes(color) ? color : 'default'
+
+    return (
+      <MuiIconButton
+        ref={ref}
+        className={cx(className, size, {
+          'cozyStyles-error': color === 'error'
+        })}
+        color={selfColor}
+        {...props}
+      >
+        {children}
+      </MuiIconButton>
+    )
+  }
+)
+
+IconButton.displayName = 'IconButton'
+
+IconButton.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'error'
+  ]),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge'])
+}
+
+export default IconButton

package/react/IconStack/Readme.md

@@ -0,0 +1,35 @@
+### IconStack
+
+A component to put something in the background and center an
+other component on the foreground.
+
+Use IconStack when the resulting combination of icons is considered a single entity.
+
+```jsx
+import IconStack from 'cozy-ui/transpiled/react/IconStack'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
+import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
+
+;
+
+<IconStack
+  backgroundIcon={
+    <Icon
+      icon={FileDuotoneIcon}
+      color="blue"
+      size={32}
+    />
+  }
+  foregroundIcon={
+    <Icon
+      icon={BankIcon}
+      color="red"
+      size={16}
+    />
+  }
+  backgroundClassName={'optional-bg-wrapper-class'}
+  foregroundClassName={'optional-fg-wrapper-class'}
+  offset={{ vertical: '3px' }}
+/>
+```

package/react/IconStack/index.jsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './styles.styl'
+import migrateProps from '../helpers/migrateProps'
+
+const IconStack = ({
+  backgroundClassName,
+  foregroundClassName,
+  backgroundIcon,
+  foregroundIcon,
+  offset
+}) => {
+  return (
+    <div
+      className={classNames(styles['IconStack-wrapper'], backgroundClassName)}
+    >
+      {backgroundIcon}
+      {foregroundIcon && (
+        <div
+          style={{
+            marginTop: offset?.vertical,
+            marginLeft: offset?.horizontal
+          }}
+          className={classNames(
+            styles['IconStack-foregroundIcon'],
+            foregroundClassName
+          )}
+        >
+          {foregroundIcon}
+        </div>
+      )}
+    </div>
+  )
+}
+
+IconStack.propTypes = {
+  backgroundClassName: PropTypes.string,
+  foregroundClassName: PropTypes.string,
+  backgroundIcon: PropTypes.node,
+  foregroundIcon: PropTypes.node,
+  offset: PropTypes.shape({
+    vertical: PropTypes.string,
+    horizontal: PropTypes.string
+  })
+}
+
+export default migrateProps([
+  { src: 'className', dest: 'backgroundClassName' },
+  { src: 'background', dest: 'backgroundIcon' },
+  { src: 'foreground', dest: 'foregroundIcon' }
+])(IconStack)

package/react/IconStack/styles.styl

@@ -0,0 +1,10 @@
+.IconStack-wrapper {
+    position relative
+    display inline-block
+}
+.IconStack-foregroundIcon{
+    position absolute
+    left 50%
+    top 50%
+    transform translate(-50%,-50%)
+}

package/react/Icons/Account.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/account.svg` to regenerate;
+import React from 'react'
+
+function SvgAccount(props) {
+  return (
+    <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>
+  )
+}
+
+export default SvgAccount

package/react/Icons/Accounts.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/accounts.svg` to regenerate;
+import React from 'react'
+
+function SvgAccounts(props) {
+  return (
+    <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>
+  )
+}
+
+export default SvgAccounts

package/react/Icons/Album.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album.svg` to regenerate;
+import React from 'react'
+
+function SvgAlbum(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 SvgAlbum

package/react/Icons/AlbumAdd.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/album-add.svg` to regenerate;
+import React from 'react'
+
+function SvgAlbumAdd(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 SvgAlbumAdd

package/react/Icons/AlbumRemove.jsx

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

package/react/Icons/Answer.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/answer.svg` to regenerate;
+import React from 'react'
+
+function SvgAnswer(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 SvgAnswer

package/react/Icons/Apple.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/apple.svg` to regenerate;
+import React from 'react'
+
+function SvgApple(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M11.88 8.5c.023 2.422 2.125 3.227 2.148 3.238-.018.056-.336 1.148-1.107 2.275-.667.975-1.36 1.946-2.45 1.966-1.07.02-1.415-.635-2.64-.635s-1.607.615-2.622.655c-1.052.04-1.853-1.054-2.526-2.025C1.31 11.987.26 8.36 1.67 5.912c.7-1.215 1.952-1.985 3.31-2.005 1.034-.02 2.01.695 2.641.695.632 0 1.817-.86 3.063-.733.522.022 1.986.21 2.927 1.587-.076.047-1.748 1.02-1.73 3.044M9.868 2.555c.559-.677.935-1.618.832-2.555-.805.032-1.779.537-2.357 1.213-.517.598-.97 1.556-.848 2.475.897.069 1.814-.457 2.373-1.133"
+      />
+    </svg>
+  )
+}
+
+export default SvgApple

package/react/Icons/Apps.jsx

@@ -0,0 +1,17 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/apps.svg` to regenerate;
+import React from 'react'
+
+function SvgApps(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M7 1a1 1 0 00-1-1H1a1 1 0 00-1 1v5a1 1 0 001 1h5a1 1 0 001-1V1z" />
+      <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"
+      />
+    </svg>
+  )
+}
+
+export default SvgApps

package/react/Icons/Archive.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/archive.svg` to regenerate;
+import React from 'react'
+
+function SvgArchive(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 SvgArchive

package/react/Icons/ArrowUp.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/arrow-up.svg` to regenerate;
+import React from 'react'
+
+function SvgArrowUp(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 SvgArrowUp

package/react/Icons/AssignAdmin.jsx

@@ -0,0 +1,22 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/assign-admin.svg` to regenerate;
+import React from 'react'
+
+function SvgAssignAdmin(props) {
+  return (
+    <svg {...props}>
+      <path d="M11.2 10.896a.896.896 0 100-1.792.896.896 0 000 1.792z" />
+      <path
+        fillRule="evenodd"
+        d="M11.2 11.6c-.584 0-1.752.288-1.792.864a2.19 2.19 0 001.792.936 2.19 2.19 0 001.792-.936c-.04-.576-1.208-.864-1.792-.864z"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M12 6.472V2.616L6 0 0 2.616v3.928c0 3.632 2.56 7.032 6 7.856.44-.104.864-.256 1.28-.44A4.778 4.778 0 0011.2 16c2.648 0 4.8-2.152 4.8-4.8a4.798 4.798 0 00-4-4.728zM6.4 11.2c0 .448.064.888.184 1.296a5.27 5.27 0 01-.584.24c-2.536-.8-4.4-3.392-4.4-6.192v-2.88L6 1.744l4.4 1.92v2.808a4.798 4.798 0 00-4 4.728zm4.8 3.2a3.2 3.2 0 110-6.4 3.2 3.2 0 110 6.4z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgAssignAdmin

package/react/Icons/AssignModerator.jsx

@@ -0,0 +1,13 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/assign-moderator.svg` to regenerate;
+import React from 'react'
+
+function SvgAssignModerator(props) {
+  return (
+    <svg {...props}>
+      <path d="M1.6 7.272v-3.76l4.8-1.8 4.8 1.8v2.952c.568.08 1.104.248 1.6.48V2.4L6.4 0 0 2.4v4.872C0 11.312 2.728 15.08 6.4 16c.024-.008.04-.016.064-.016a5.658 5.658 0 01-1.4-2.272C3.008 12.424 1.6 9.936 1.6 7.272z" />
+      <path d="M10.4 8c-2.208 0-4 1.792-4 4s1.792 4 4 4 4-1.792 4-4-1.792-4-4-4zm2.4 4.4h-2v2H10v-2H8v-.8h2v-2h.8v2h2v.8z" />
+    </svg>
+  )
+}
+
+export default SvgAssignModerator

package/react/Icons/Assistant.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/assistant.svg` to regenerate;
+import React from 'react'
+
+function SvgAssistant(props) {
+  return (
+    <svg viewBox="0 0 22 22" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.094.305a1.5 1.5 0 012.351.79l.005.02 1.581 6.135a1 1 0 00.718.719l6.136 1.58.016.005a1.5 1.5 0 010 2.892l-.016.004-6.135 1.581a1 1 0 00-.719.719l-1.582 6.135-.005.02a1.5 1.5 0 01-2.889 0l-.005-.02-1.581-6.135a1.001 1.001 0 00-.719-.719L1.115 12.45l-.023-.006a1.5 1.5 0 010-2.886l.023-.006L7.25 7.968a1 1 0 00.719-.718L9.55 1.115l.005-.02a1.5 1.5 0 01.538-.79zM11 3.503l1.095 4.247a3.002 3.002 0 002.155 2.155L18.498 11l-4.248 1.095a3.001 3.001 0 00-2.155 2.155L11 18.497 9.905 14.25a3 3 0 00-2.155-2.156L3.504 11 7.75 9.904A3 3 0 009.905 7.75L11 3.503zM19 1a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0V5h-1a1 1 0 110-2h1V2a1 1 0 011-1zM3 15a1 1 0 011 1 1 1 0 110 2 1 1 0 11-2 0 1 1 0 110-2 1 1 0 011-1z"
+      />
+    </svg>
+  )
+}
+
+export default SvgAssistant

package/react/Icons/Attachment.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/attachment.svg` to regenerate;
+import React from 'react'
+
+function SvgAttachment(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 SvgAttachment

package/react/Icons/Attention.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/attention.svg` to regenerate;
+import React from 'react'
+
+function SvgAttention(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 SvgAttention

package/react/Icons/Bank.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bank.svg` to regenerate;
+import React from 'react'
+
+function SvgBank(props) {
+  return (
+    <svg viewBox="0 0 17 16" {...props}>
+      <path d="M4.5 7.2H2.9v5.6h1.6V7.2zm4.8 0H7.7v5.6h1.6V7.2zm6.8 7.2H.9V16h15.2v-1.6zm-2-7.2h-1.6v5.6h1.6V7.2zM8.5 1.808L12.668 4H4.332L8.5 1.808zM8.5 0L.9 4v1.6h15.2V4L8.5 0z" />
+    </svg>
+  )
+}
+
+export default SvgBank

package/react/Icons/BankAccounts.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/bank-accounts.svg` to regenerate;
+import React from 'react'
+
+function SvgBankAccounts(props) {
+  return (
+    <svg viewBox="0 0 16 17" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.979.532L.031 5.578v1.957h15.896V5.578L7.98.532zm3.985 13.012h1.992v-4.98h-1.992v4.98zm-4.981 0h1.992v-4.98H6.983v4.98zm-4.98 0h1.992v-4.98H2.002v4.98zM.03 16.532h15.896v-1.993H.031v1.993z"
+      />
+    </svg>
+  )
+}
+
+export default SvgBankAccounts

package/react/Icons/BankCheck.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bank-check.svg` to regenerate;
+import React from 'react'
+
+function SvgBankCheck(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 2a2 2 0 012 2v8a2 2 0 01-2 2H2a2 2 0 01-2-2V4a2 2 0 012-2h12zm0 3H2v7h12V5zm-2 1v1h-.5a1.5 1.5 0 00-1.415 1H12v1h-1.914c.19.54.68.937 1.27.993L11.5 10h.5v1h-.5a2.5 2.5 0 01-.164-4.995L11.5 6h.5zM8 9v1H4V9h4zm0-2v1H4V7h4z"
+      />
+    </svg>
+  )
+}
+
+export default SvgBankCheck

package/react/Icons/BankGroups.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/bank-groups.svg` to regenerate;
+import React from 'react'
+
+function SvgBankGroups(props) {
+  return (
+    <svg viewBox="0 0 17 17" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.01 1L.529 5.75v1.842H15.49V5.75L8.01 1zm3.75 8.912h1.875V8.56H11.76v1.352zm-4.688 1.411h1.875V8.56H7.072v2.763zm-4.687 1.924H4.26V8.56H2.385v4.687zM.529 16.06h7.5v-1.875H.53v1.875zm10.137-4.857l-1.494 1.866a.916.916 0 00-.201.58.92.92 0 00.201.58l1.494 1.866a.977.977 0 00.33.26.93.93 0 00.407.09h3.592a.9.9 0 00.663-.273.902.902 0 00.273-.662v-3.722a.9.9 0 00-.273-.662.902.902 0 00-.662-.273h-3.593a.94.94 0 00-.737.35zm.333 3.03a.676.676 0 100-1.352.676.676 0 000 1.353z"
+      />
+    </svg>
+  )
+}
+
+export default SvgBankGroups

package/react/Icons/BankOperations.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/bank-operations.svg` to regenerate;
+import React from 'react'
+
+function SvgBankOperations(props) {
+  return (
+    <svg viewBox="0 0 17 16" {...props}>
+      <path d="M11.447 13.474a5.457 5.457 0 01-4.85-2.948h4.85l.843-1.684H6.04A5.587 5.587 0 015.974 8c0-.286.025-.564.067-.842h5.406l.843-1.684H6.597a5.466 5.466 0 018.412-1.626l1.491-1.49A7.541 7.541 0 0011.447.42c-3.3 0-6.096 2.114-7.14 5.053H1.341L.5 7.158h3.419a6.956 6.956 0 000 1.684H1.342L.5 10.526h3.806c1.045 2.94 3.84 5.053 7.141 5.053a7.525 7.525 0 005.053-1.937l-1.499-1.49a5.394 5.394 0 01-3.554 1.322z" />
+    </svg>
+  )
+}
+
+export default SvgBankOperations

package/react/Icons/BankRecurrence.jsx

@@ -0,0 +1,13 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/permissions/bank-recurrence.svg` to regenerate;
+import React from 'react'
+
+function SvgBankRecurrence(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M8.474 10.731c-1.057 0-1.97-.631-2.426-1.556h2.426l.42-.888H5.772a3.108 3.108 0 01-.034-.445c0-.15.012-.298.034-.444h2.703l.42-.89H6.049c.455-.924 1.373-1.555 2.426-1.555.678 0 1.3.262 1.78.698L11 4.864a3.661 3.661 0 00-2.526-1.022c-1.65 0-3.049 1.116-3.57 2.667H3.42L3 7.398h1.71a3.874 3.874 0 000 .889H3.42L3 9.175h1.903c.522 1.552 1.92 2.667 3.57 2.667.973 0 1.857-.386 2.527-1.022l-.75-.787a2.616 2.616 0 01-1.776.698z" />
+      <path d="M13.64 2.35A7.958 7.958 0 007.99 0C3.57 0 0 3.58 0 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08a5.99 5.99 0 01-5.65 4c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L8.99 7h7V0l-2.35 2.35z" />
+    </svg>
+  )
+}
+
+export default SvgBankRecurrence

package/react/Icons/Banking.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/banking.svg` to regenerate;
+import React from 'react'
+
+function SvgBanking(props) {
+  return (
+    <svg viewBox="0 0 16 13" {...props}>
+      <path d="M14.4 0H1.6C.712 0 .008.712.008 1.6L0 11.2c0 .888.712 1.6 1.6 1.6h12.8c.888 0 1.6-.712 1.6-1.6V1.6c0-.888-.712-1.6-1.6-1.6zm0 11.2H1.6V6.4h12.8v4.8zm0-8H1.6V1.6h12.8v1.6z" />
+    </svg>
+  )
+}
+
+export default SvgBanking

package/react/Icons/BankingAdd.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/banking-add.svg` to regenerate;
+import React from 'react'
+
+function SvgBankingAdd(props) {
+  return (
+    <svg viewBox="0 0 16 14" {...props}>
+      <path d="M13.09.455H1.456C.647.455.007 1.102.007 1.909L0 10.636a1.45 1.45 0 001.455 1.455h7.272v-1.455H1.455V6.273h13.09V1.909A1.45 1.45 0 0013.091.455zm0 2.909H1.456V1.909H13.09v1.455zM16 9.909v1.455h-2.182v2.181h-1.454v-2.181h-2.182V9.909h2.182V7.727h1.454V9.91H16z" />
+    </svg>
+  )
+}
+
+export default SvgBankingAdd

package/react/Icons/Bell.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bell.svg` to regenerate;
+import React from 'react'
+
+function SvgBell(props) {
+  return (
+    <svg viewBox="0 0 14 16" {...props}>
+      <path d="M1.4 13.6a.774.774 0 01-.57-.23.774.774 0 01-.23-.57c0-.227.077-.417.23-.57A.774.774 0 011.4 12h.8V6.4c0-1.107.333-2.09 1-2.95a4.614 4.614 0 012.6-1.69V1.2c0-.333.117-.617.35-.85C6.383.117 6.667 0 7 0c.333 0 .617.117.85.35.233.233.35.517.35.85v.56a4.614 4.614 0 012.6 1.69c.667.86 1 1.843 1 2.95V12h.8c.227 0 .417.077.57.23.153.153.23.343.23.57a.774.774 0 01-.23.57.774.774 0 01-.57.23H1.4zM7 16a1.54 1.54 0 01-1.13-.47 1.54 1.54 0 01-.47-1.13h3.2c0 .44-.157.817-.47 1.13A1.54 1.54 0 017 16zm-3.2-4h6.4V6.4a3.08 3.08 0 00-.94-2.26A3.081 3.081 0 007 3.2a3.08 3.08 0 00-2.26.94A3.081 3.081 0 003.8 6.4V12z" />
+    </svg>
+  )
+}
+
+export default SvgBell

package/react/Icons/Benefit.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/benefit.svg` to regenerate;
+import React from 'react'
+
+function SvgBenefit(props) {
+  return (
+    <svg viewBox="0 0 16 12" {...props}>
+      <path d="M13.09 7.273V1.455c0-.8-.654-1.455-1.454-1.455H1.455C.655 0 0 .655 0 1.455v5.818c0 .8.655 1.454 1.455 1.454h10.181c.8 0 1.455-.654 1.455-1.454zm-1.454 0H1.455V1.455h10.181v5.818zm-5.09-5.091a2.179 2.179 0 00-2.182 2.182c0 1.207.974 2.181 2.181 2.181a2.179 2.179 0 002.182-2.181 2.179 2.179 0 00-2.182-2.182zm9.454 0v8c0 .8-.655 1.454-1.454 1.454H2.181v-1.454h12.364v-8H16z" />
+    </svg>
+  )
+}
+
+export default SvgBenefit

package/react/Icons/Bike.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bike.svg` to regenerate;
+import React from 'react'
+
+function SvgBike(props) {
+  return (
+    <svg viewBox="0 0 16 14" {...props}>
+      <path d="M10.333 2.667c.734 0 1.334-.6 1.334-1.334C11.667.6 11.067 0 10.333 0 9.6 0 9 .6 9 1.333c0 .734.6 1.334 1.333 1.334zM3.333 7A3.3 3.3 0 000 10.333a3.301 3.301 0 003.333 3.334 3.301 3.301 0 003.334-3.334A3.301 3.301 0 003.333 7zm0 5.667C2.067 12.667 1 11.6 1 10.333 1 9.067 2.067 8 3.333 8 4.6 8 5.667 9.067 5.667 10.333c0 1.267-1.067 2.334-2.334 2.334zM7.2 6l1.6-1.6.533.533c.867.867 2 1.4 3.4 1.4V5c-1 0-1.8-.4-2.4-1L9.067 2.733c-.334-.266-.667-.4-1.067-.4-.4 0-.733.134-.933.4L5.2 4.6c-.267.267-.4.6-.4.933 0 .4.133.734.4.934l2.133 1.866v3.334h1.334V7.533L7.2 6zm5.467 1a3.301 3.301 0 00-3.334 3.333 3.301 3.301 0 003.334 3.334A3.301 3.301 0 0016 10.333 3.301 3.301 0 0012.667 7zm0 5.667c-1.267 0-2.334-1.067-2.334-2.334C10.333 9.067 11.4 8 12.667 8 13.933 8 15 9.067 15 10.333c0 1.267-1.067 2.334-2.333 2.334z" />
+    </svg>
+  )
+}
+
+export default SvgBike

package/react/Icons/Bill.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/bill.svg` to regenerate;
+import React from 'react'
+
+function SvgBill(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M14 1.2L12.8 0l-1.2 1.2L10.4 0 9.2 1.2 8 0 6.8 1.2 5.6 0 4.4 1.2 3.2 0 2 1.2.8 0v16L2 14.8 3.2 16l1.2-1.2L5.6 16l1.2-1.2L8 16l1.2-1.2 1.2 1.2 1.2-1.2 1.2 1.2 1.2-1.2 1.2 1.2V0L14 1.2zm-.4 12.472H2.4V2.328h11.2v11.344zM3.2 10.4h9.6V12H3.2v-1.6zm0-3.2h9.6v1.6H3.2V7.2zm0-3.2h9.6v1.6H3.2V4z" />
+    </svg>
+  )
+}
+
+export default SvgBill