@toptal/picasso 13.4.0 → 13.4.2

package/src/Icon/Twitter24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgTwitter24' })
+const SvgTwitter24 = forwardRef(function SvgTwitter24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M23.954 4.323a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 7.848 4.066 5.884 1.64 2.915A4.822 4.822 0 00.974 5.39c0 1.71.87 3.213 2.188 4.096A4.904 4.904 0 01.934 8.87v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z' />
+    </svg>
+  )
+})
+
+SvgTwitter24.displayName = 'SvgTwitter24'
+export default SvgTwitter24

package/src/Icon/UiGuidelines16.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUiGuidelines16' })
+const SvgUiGuidelines16 = forwardRef(function SvgUiGuidelines16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M15 2h-5v12h5V2zm1 0v13H9V1h7v1zM0 3h7v1H0V3zm0 3h7v1H0V6zm0 3h7v1H0V9zm0 3h7v1H0v-1z' />
+    </svg>
+  )
+})
+
+SvgUiGuidelines16.displayName = 'SvgUiGuidelines16'
+export default SvgUiGuidelines16

package/src/Icon/UiGuidelines24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUiGuidelines24' })
+const SvgUiGuidelines24 = forwardRef(function SvgUiGuidelines24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M23 2h-9v20h9V2zm1 0v21H13V1h11v1zM0 4h10v1H0V4zm0 5h10v1H0V9zm0 5h10v1H0v-1zm0 5h10v1H0v-1z' />
+    </svg>
+  )
+})
+
+SvgUiGuidelines24.displayName = 'SvgUiGuidelines24'
+export default SvgUiGuidelines24

package/src/Icon/Unavailable16.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUnavailable16' })
+const SvgUnavailable16 = forwardRef(function SvgUnavailable16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M8 0a8 8 0 110 16A8 8 0 018 0zm5.29 3.416l-9.874 9.875a7 7 0 009.874-9.874zM8 1a7 7 0 00-5.29 11.584l9.874-9.875A6.973 6.973 0 008 1z' />
+    </svg>
+  )
+})
+
+SvgUnavailable16.displayName = 'SvgUnavailable16'
+export default SvgUnavailable16

package/src/Icon/Unavailable24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUnavailable24' })
+const SvgUnavailable24 = forwardRef(function SvgUnavailable24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1zm7.415 4.29L5.291 19.416A9.963 9.963 0 0012 22c5.523 0 10-4.477 10-10a9.963 9.963 0 00-2.585-6.71zM12 2C6.477 2 2 6.477 2 12c0 2.582.978 4.935 2.585 6.71L18.709 4.584A9.963 9.963 0 0012 2z' />
+    </svg>
+  )
+})
+
+SvgUnavailable24.displayName = 'SvgUnavailable24'
+export default SvgUnavailable24

package/src/Icon/Unlink16.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUnlink16' })
+const SvgUnlink16 = forwardRef(function SvgUnlink16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M13.5 1.793l.707.707L2.5 14.207l-.707-.707L13.5 1.793zM13 6a3 3 0 013 3v1a3 3 0 01-3 3H8a2.99 2.99 0 01-2.06-.818l.708-.708C7.004 11.8 7.478 12 8 12h5a2 2 0 002-2V9a2 2 0 00-2-2h-1.879l1-1H13zM8 3a2.99 2.99 0 012.06.82l-.708.706A1.993 1.993 0 008 4H3a2 2 0 00-2 2v1a2 2 0 002 2h1.878l-1 1H3a3 3 0 01-3-3V6a3 3 0 013-3h5zm2.996 4.126L11 7a3 3 0 01-2.875 2.997l2.871-2.871zM7.874 6.003l-2.87 2.871.001-.05a3 3 0 012.87-2.821z' />
+    </svg>
+  )
+})
+
+SvgUnlink16.displayName = 'SvgUnlink16'
+export default SvgUnlink16

package/src/Icon/Unlink24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUnlink24' })
+const SvgUnlink24 = forwardRef(function SvgUnlink24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M21.5 1.793l.707.707L2.5 22.207l-.707-.707L21.5 1.793zM20 9a4 4 0 014 4v2a4 4 0 01-4 4h-9a3.987 3.987 0 01-2.767-1.111l.708-.707A2.99 2.99 0 0011 18h9a3 3 0 003-3v-2a3 3 0 00-3-3h-3v1a4 4 0 01-4 4h-1.879l1-1H13a3 3 0 003-3v-.879L17.121 9H20zm-7-4c1.074 0 2.05.423 2.768 1.112l-.708.707A2.99 2.99 0 0013 6H4a3 3 0 00-3 3v2a3 3 0 003 3h3v-1a4 4 0 014-4h1.878l-1 1H11a3 3 0 00-3 3v.878L6.878 15H4a4 4 0 01-4-4V9a4 4 0 014-4h9z' />
+    </svg>
+  )
+})
+
+SvgUnlink24.displayName = 'SvgUnlink24'
+export default SvgUnlink24

package/src/Icon/Update16.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUpdate16' })
+const SvgUpdate16 = forwardRef(function SvgUpdate16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M3.5 12.753V14.5h-1v-4h4v1H3.816A5.435 5.435 0 008 13.455 5.455 5.455 0 0013.455 8h1.09A6.545 6.545 0 013.5 12.753zm9-9.506V1.5h1v4h-4v-1h2.684A5.435 5.435 0 008 2.545 5.455 5.455 0 002.545 8h-1.09A6.545 6.545 0 0112.5 3.247z' />
+    </svg>
+  )
+})
+
+SvgUpdate16.displayName = 'SvgUpdate16'
+export default SvgUpdate16

package/src/Icon/Update24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUpdate24' })
+const SvgUpdate24 = forwardRef(function SvgUpdate24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M4.5 17.832V20.5h-1v-4h4v1H5.519a8.47 8.47 0 006.481 3 8.5 8.5 0 008.5-8.5h1a9.5 9.5 0 01-17 5.832zm15-11.664V3.5h1v4h-4v-1h1.981A8.47 8.47 0 0012 3.5 8.5 8.5 0 003.5 12h-1a9.5 9.5 0 0117-5.832z' />
+    </svg>
+  )
+})
+
+SvgUpdate24.displayName = 'SvgUpdate24'
+export default SvgUpdate24

package/src/Icon/Upload16.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUpload16' })
+const SvgUpload16 = forwardRef(function SvgUpload16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M1 12v2h13v-2h1v3H0v-3h1zM7.5.793L11.207 4.5l-.707.707-2.501-2.5L8 12H7l-.001-9.293-2.499 2.5-.707-.707 3-3L7.5.793z' />
+    </svg>
+  )
+})
+
+SvgUpload16.displayName = 'SvgUpload16'
+export default SvgUpload16

package/src/Icon/Upload24.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, Ref } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { StandardProps } from '@toptal/picasso-shared'
+
+import kebabToCamelCase from '../utils/kebab-to-camel-case'
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, { name: 'PicassoSvgUpload24' })
+const SvgUpload24 = forwardRef(function SvgUpload24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M2 18v3h19v-3h1v4H1v-4h1zm9.5-16.207L16.207 6.5l-.707.707-3.501-3.501V19H11l-.001-15.294L7.5 7.207 6.793 6.5 11.5 1.793z' />
+    </svg>
+  )
+})
+
+SvgUpload24.displayName = 'SvgUpload24'
+export default SvgUpload24