@toptal/picasso-icons 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c6a9da7e9.4084

package/src/Icon/PortfolioDesigner16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPortfolioDesigner16',
+})
+const SvgPortfolioDesigner16 = forwardRef(function SvgPortfolioDesigner16(
+  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='M0 0h7v7H0V0Zm1 1v5h5V1H1Zm8-1h7v7H9V0Zm1 1v5h5V1h-5ZM0 9h7v7H0V9Zm1 6h5v-5H1v5Zm8-6h7v7H9V9Zm1 6h5v-5h-5v5Z' />
+    </svg>
+  )
+})
+
+SvgPortfolioDesigner16.displayName = 'SvgPortfolioDesigner16'
+export default SvgPortfolioDesigner16

package/src/Icon/PortfolioDesigner24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPortfolioDesigner24',
+})
+const SvgPortfolioDesigner24 = forwardRef(function SvgPortfolioDesigner24(
+  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='M1 1h9v9H1V1Zm1 1v7h7V2H2Zm12-1h9v9h-9V1Zm1 1v7h7V2h-7ZM1 14h9v9H1v-9Zm1 8h7v-7H2v7Zm12-8h9v9h-9v-9Zm1 8h7v-7h-7v7Z' />
+    </svg>
+  )
+})
+
+SvgPortfolioDesigner24.displayName = 'SvgPortfolioDesigner24'
+export default SvgPortfolioDesigner24

package/src/Icon/PortfolioDesignerResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import PortfolioDesigner16 from './PortfolioDesigner16'
+import PortfolioDesigner24 from './PortfolioDesigner24'
+import type { Props } from './PortfolioDesigner16'
+
+const PortfolioDesignerResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <PortfolioDesigner16 {...props} />,
+    },
+    <PortfolioDesigner24 {...props} />
+  ) as JSX.Element
+}
+
+export default PortfolioDesignerResponsive

package/src/Icon/PortfolioFinance16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPortfolioFinance16',
+})
+const SvgPortfolioFinance16 = forwardRef(function SvgPortfolioFinance16(
+  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='M14.883 10.441 16 11l-8 4-8-4 1.117-.559L8 13.882l6.883-3.44Zm0-3L16 8l-8 4-8-4 1.117-.559L8 10.882l6.883-3.44ZM8 1l8 4-8 4-8-4 8-4Zm0 1.118L2.236 5 8 7.882 13.764 5 8 2.118Z' />
+    </svg>
+  )
+})
+
+SvgPortfolioFinance16.displayName = 'SvgPortfolioFinance16'
+export default SvgPortfolioFinance16

package/src/Icon/PortfolioFinance24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPortfolioFinance24',
+})
+const SvgPortfolioFinance24 = forwardRef(function SvgPortfolioFinance24(
+  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='M1.106 15.447 12 20.882l10.894-5.435L24 16l-12 6-12-6 1.106-.553Zm0-4L12 16.882l10.894-5.435L24 12l-12 6-12-6 1.106-.553ZM0 8l12-6 12 6-12 6L0 8Zm12 4.882L21.764 8 12 3.118 2.236 8 12 12.882Z' />
+    </svg>
+  )
+})
+
+SvgPortfolioFinance24.displayName = 'SvgPortfolioFinance24'
+export default SvgPortfolioFinance24

package/src/Icon/PortfolioFinanceResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import PortfolioFinance16 from './PortfolioFinance16'
+import PortfolioFinance24 from './PortfolioFinance24'
+import type { Props } from './PortfolioFinance16'
+
+const PortfolioFinanceResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <PortfolioFinance16 {...props} />,
+    },
+    <PortfolioFinance24 {...props} />
+  ) as JSX.Element
+}
+
+export default PortfolioFinanceResponsive

package/src/Icon/Preview16.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPreview16',
+})
+const SvgPreview16 = forwardRef(function SvgPreview16(
+  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
+      fill='none'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M.1 0h3v1h-2v2h-1V0Zm12 0h3v3h-1V1h-2V0Zm-11 12h-1v3h3v-1h-2v-2Zm13 2v-2h1v3h-3v-1h2ZM1.176 7.5c.056.09.13.205.223.336.248.35.63.82 1.158 1.29C3.61 10.062 5.247 11 7.6 11c2.354 0 3.99-.938 5.043-1.874.529-.47.91-.94 1.158-1.29.094-.131.168-.246.223-.336a6.276 6.276 0 0 0-.223-.336c-.248-.35-.63-.82-1.158-1.29C11.59 4.938 9.953 4 7.6 4c-2.354 0-3.99.938-5.043 1.874-.528.47-.91.94-1.158 1.29a6.285 6.285 0 0 0-.223.336Zm13.424 0 .447-.224-.447.224Zm.447-.224-.001-.002-.002-.004-.006-.012a2.724 2.724 0 0 0-.103-.184 6.99 6.99 0 0 0-.318-.488c-.283-.4-.713-.93-1.31-1.46C12.11 4.062 10.247 3 7.6 3 4.954 3 3.09 4.062 1.893 5.126a8.693 8.693 0 0 0-1.31 1.46 7.005 7.005 0 0 0-.42.672l-.007.012-.002.004v.001S.152 7.276.6 7.5l-.447-.224L.04 7.5l.112.224.056-.028L.6 7.5l-.447.224.001.002.002.004.006.012a2.748 2.748 0 0 0 .103.184c.07.12.176.288.318.488.283.4.714.93 1.31 1.46C3.09 10.938 4.953 12 7.6 12c2.646 0 4.51-1.062 5.707-2.126a8.688 8.688 0 0 0 1.31-1.46 6.99 6.99 0 0 0 .42-.672l.007-.012.002-.004v-.001s.001-.001-.446-.225l.447.224.112-.224-.112-.224ZM7.6 6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM5.1 7.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgPreview16.displayName = 'SvgPreview16'
+export default SvgPreview16

package/src/Icon/Preview24.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgPreview24',
+})
+const SvgPreview24 = forwardRef(function SvgPreview24(
+  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
+      fill='none'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M.079 0h3.987v1h-2.99v3H.078V0Zm18.937 0h3.987v4h-.997V1h-2.99V0ZM1.076 19H.078v4h3.987v-1h-2.99v-3Zm20.93 3v-3h.997v4h-3.987v-1h2.99ZM1.17 11.5c.104.153.257.37.46.627.427.541 1.073 1.264 1.944 1.988C5.314 15.56 7.946 17 11.541 17c3.595 0 6.227-1.44 7.968-2.885a13.39 13.39 0 0 0 1.943-1.988c.204-.258.357-.474.46-.627-.103-.153-.256-.37-.46-.627a13.393 13.393 0 0 0-1.944-1.988C17.769 7.44 15.137 6 11.542 6 7.946 6 5.314 7.44 3.573 8.885a13.39 13.39 0 0 0-1.943 1.988c-.204.258-.357.474-.46.627Zm21.336 0 .43-.252v-.001l-.001-.002-.003-.004-.01-.017-.035-.056a11.488 11.488 0 0 0-.653-.915 14.396 14.396 0 0 0-2.09-2.138C18.272 6.56 15.423 5 11.542 5 7.66 5 4.81 6.56 2.938 8.115a14.396 14.396 0 0 0-2.09 2.137 11.485 11.485 0 0 0-.653.916 4.307 4.307 0 0 0-.034.056l-.01.017-.003.004v.002H.146l.43.253-.43-.252L0 11.5l.146.252.431-.252-.43.252v.001l.001.002.003.004.01.017.034.056a11.485 11.485 0 0 0 .653.915 14.4 14.4 0 0 0 2.09 2.138C4.81 16.44 7.66 18 11.54 18c3.88 0 6.73-1.56 8.603-3.115a14.4 14.4 0 0 0 2.09-2.137 11.488 11.488 0 0 0 .652-.916l.035-.056.01-.016.003-.005v-.002h.001l-.43-.253Zm0 0 .43.252.147-.252-.147-.252-.43.252ZM11.54 8c-1.927 0-3.489 1.567-3.489 3.5S9.614 15 11.541 15c1.927 0 3.489-1.567 3.489-3.5S13.468 8 11.54 8Zm-4.485 3.5c0-2.485 2.008-4.5 4.485-4.5a4.493 4.493 0 0 1 4.485 4.5c0 2.485-2.008 4.5-4.485 4.5a4.493 4.493 0 0 1-4.485-4.5Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgPreview24.displayName = 'SvgPreview24'
+export default SvgPreview24

package/src/Icon/PreviewResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Preview16 from './Preview16'
+import Preview24 from './Preview24'
+import type { Props } from './Preview16'
+
+const PreviewResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Preview16 {...props} />,
+    },
+    <Preview24 {...props} />
+  ) as JSX.Element
+}
+
+export default PreviewResponsive

package/src/Icon/Profile16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgProfile16',
+})
+const SvgProfile16 = forwardRef(function SvgProfile16(
+  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='M5.639 9.408a5 5 0 1 1 4.723 0A7.003 7.003 0 0 1 15 16h-1a6 6 0 1 0-12 0H1a7.003 7.003 0 0 1 4.639-6.592ZM8 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' />
+    </svg>
+  )
+})
+
+SvgProfile16.displayName = 'SvgProfile16'
+export default SvgProfile16

package/src/Icon/Profile24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgProfile24',
+})
+const SvgProfile24 = forwardRef(function SvgProfile24(
+  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='M9.235 14.433A7.002 7.002 0 0 1 12 1a7 7 0 0 1 2.765 13.433A9.004 9.004 0 0 1 21 23h-1a8 8 0 1 0-16 0H3c0-4.006 2.617-7.4 6.235-8.567ZM12 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z' />
+    </svg>
+  )
+})
+
+SvgProfile24.displayName = 'SvgProfile24'
+export default SvgProfile24

package/src/Icon/ProfileCrossed16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgProfileCrossed16',
+})
+const SvgProfileCrossed16 = forwardRef(function SvgProfileCrossed16(
+  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='M12.997 5.126 13 5a5 5 0 0 1-2.64 4.41 7 7 0 0 1 4.635 6.315L15 16h-1a6 6 0 0 0-5.878-5.999l1.242-1.24a4.012 4.012 0 0 0 2.398-2.397l1.235-1.238ZM14.5.793l.707.707L1.5 15.207.793 14.5 14.5.793ZM8 0c1.605 0 3.034.757 3.95 1.933l-.715.714a4 4 0 1 0-5.588 5.588l-.713.714A5 5 0 0 1 8 0Z' />
+    </svg>
+  )
+})
+
+SvgProfileCrossed16.displayName = 'SvgProfileCrossed16'
+export default SvgProfileCrossed16

package/src/Icon/ProfileCrossed24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+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: 'PicassoSvgProfileCrossed24',
+})
+const SvgProfileCrossed24 = forwardRef(function SvgProfileCrossed24(
+  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='M18.951 7.17a7.002 7.002 0 0 1-4.189 7.263 9.001 9.001 0 0 1 6.234 8.288L21 23h-1a8 8 0 0 0-8.933-7.946l1.057-1.057.1-.001A6 6 0 0 0 18 8.124l.952-.953ZM4.054 22.069a8.063 8.063 0 0 0-.05.683L4 23h-.878l.932-.932ZM21.5 1.793l.707.707L2.5 22.207l-.707-.707L21.5 1.793ZM12 1a6.993 6.993 0 0 1 5.8 3.08l-.722.722a6 6 0 1 0-8.275 8.276l-.722.722A7 7 0 0 1 12 1Z' />
+    </svg>
+  )
+})
+
+SvgProfileCrossed24.displayName = 'SvgProfileCrossed24'
+export default SvgProfileCrossed24