@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/LegalInfo16.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: 'PicassoSvgLegalInfo16',
+})
+const SvgLegalInfo16 = forwardRef(function SvgLegalInfo16(
+  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='m11 0 4 4v12H1V0h10Zm-.414 1H2v14h12V4.414L10.586 1ZM8 11V7H6V6h3v5h2v1H6v-1h2ZM7 4h2v1H7V4Z' />
+    </svg>
+  )
+})
+
+SvgLegalInfo16.displayName = 'SvgLegalInfo16'
+export default SvgLegalInfo16

package/src/Icon/LegalInfo24.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: 'PicassoSvgLegalInfo24',
+})
+const SvgLegalInfo24 = forwardRef(function SvgLegalInfo24(
+  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='m16 0 6 6v18H2V0h14Zm-.414 1H3v22h18V6.414L15.586 1ZM13 17h3v1H9v-1h3v-7H9V9h4v8ZM11 7h2v1h-2V7Z' />
+    </svg>
+  )
+})
+
+SvgLegalInfo24.displayName = 'SvgLegalInfo24'
+export default SvgLegalInfo24

package/src/Icon/LegalInfoResponsive.tsx

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

package/src/Icon/Length16.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: 'PicassoSvgLength16',
+})
+const SvgLength16 = forwardRef(function SvgLength16(
+  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 1v14H0V1h1Zm15 0v14h-1V1h1Zm-5.5 3.29 3 3 .707.707-3.707 3.707-.707-.707 2.999-3-3-3 .708-.707Zm-5 0 .707.707-3 3 3 3-.707.707-3.707-3.707.707-.707 3-3Z' />
+    </svg>
+  )
+})
+
+SvgLength16.displayName = 'SvgLength16'
+export default SvgLength16

package/src/Icon/Length24.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: 'PicassoSvgLength24',
+})
+const SvgLength24 = forwardRef(function SvgLength24(
+  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 2v20H0V2h1Zm23 0v20h-1V2h1Zm-7.5 4.29 5 5 .707.707-.707.707-5 5-.707-.707 4.999-5-5-5 .708-.707Zm-9 0 .707.707-5 5 5 5-.707.707-5.707-5.707.707-.707 5-5Z' />
+    </svg>
+  )
+})
+
+SvgLength24.displayName = 'SvgLength24'
+export default SvgLength24

package/src/Icon/LengthResponsive.tsx

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

package/src/Icon/Link16.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: 'PicassoSvgLink16',
+})
+const SvgLink16 = forwardRef(function SvgLink16(
+  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 10a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3h2a3 3 0 0 1 3 3v1a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3H3Zm10-3h-2a3 3 0 0 1-3 3H6a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2ZM8 4H3a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h2a3 3 0 0 1 3-3h2a2 2 0 0 0-2-2Zm2 3H8a2 2 0 0 0-2 2h2a2 2 0 0 0 2-2Z' />
+    </svg>
+  )
+})
+
+SvgLink16.displayName = 'SvgLink16'
+export default SvgLink16

package/src/Icon/Link24.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: 'PicassoSvgLink24',
+})
+const SvgLink24 = forwardRef(function SvgLink24(
+  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 15a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4h3a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4H4Zm16-5h-3v1a4 4 0 0 1-4 4H8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3Zm-7-4H4a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h3v-1a4 4 0 0 1 4-4h5a3 3 0 0 0-3-3Zm3 4h-5a3 3 0 0 0-3 3v1h5a3 3 0 0 0 3-3v-1Z' />
+    </svg>
+  )
+})
+
+SvgLink24.displayName = 'SvgLink24'
+export default SvgLink24

package/src/Icon/LinkResponsive.tsx

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

package/src/Icon/Linkedin16.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: 'PicassoSvgLinkedin16',
+})
+const SvgLinkedin16 = forwardRef(function SvgLinkedin16(
+  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.631 13.635h-2.369V9.922c0-.885-.018-2.025-1.235-2.025-1.235 0-1.424.964-1.424 1.96v3.778H6.234V6H8.51v1.04h.03c.319-.6 1.092-1.233 2.247-1.233 2.401 0 2.845 1.58 2.845 3.637v4.19ZM3.558 4.955A1.375 1.375 0 0 1 2.183 3.58a1.376 1.376 0 1 1 1.375 1.377Zm1.188 8.68H2.37V6h2.376v7.635ZM14.816 0H1.182C.528 0 0 .516 0 1.153v13.694C0 15.485.528 16 1.18 16h13.635c.652 0 1.185-.515 1.185-1.153V1.153C16 .516 15.467 0 14.815 0h.002Z' />
+    </svg>
+  )
+})
+
+SvgLinkedin16.displayName = 'SvgLinkedin16'
+export default SvgLinkedin16

package/src/Icon/Linkedin24.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: 'PicassoSvgLinkedin24',
+})
+const SvgLinkedin24 = forwardRef(function SvgLinkedin24(
+  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='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286h-.001ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z' />
+    </svg>
+  )
+})
+
+SvgLinkedin24.displayName = 'SvgLinkedin24'
+export default SvgLinkedin24

package/src/Icon/LinkedinResponsive.tsx

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

package/src/Icon/ListOrdered16.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: 'PicassoSvgListOrdered16',
+})
+const SvgListOrdered16 = forwardRef(function SvgListOrdered16(
+  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='M2.752 11.938c.504 0 .895.099 1.173.297a.934.934 0 0 1 .417.801.798.798 0 0 1-.255.591c-.17.166-.377.269-.621.309.24.024.457.121.651.291.194.17.291.389.291.657 0 .352-.152.638-.456.858-.304.22-.704.33-1.2.33-.368 0-.695-.058-.981-.174a1.747 1.747 0 0 1-.675-.456l.522-.702.108.096c.115.09.248.162.399.216.202.072.397.108.585.108.216 0 .382-.036.498-.108.116-.072.174-.166.174-.282a.268.268 0 0 0-.159-.255c-.106-.054-.291-.081-.555-.081h-.24c-.171.001-.271.003-.3.006v-.918l.03.002c.076.003.246.004.51.004.432 0 .648-.104.648-.312 0-.12-.062-.211-.186-.273a1.09 1.09 0 0 0-.486-.093c-.376 0-.708.128-.996.384l-.498-.648.12-.123c.372-.35.866-.525 1.482-.525ZM15 14v1H6v-1h9ZM2.752 5.938c.476 0 .865.122 1.167.366.302.244.453.566.453.966 0 .3-.112.592-.336.876-.224.284-.59.602-1.098.954h1.464v.9H1.264v-.804l.2-.144c.773-.561 1.272-.945 1.495-1.152.242-.224.363-.434.363-.63a.356.356 0 0 0-.159-.309.67.67 0 0 0-.393-.111c-.4 0-.756.146-1.068.438l-.57-.684.127-.128c.177-.16.38-.285.611-.373.288-.11.582-.165.882-.165ZM15 8v1H6V8h9ZM3.322-.002V4H2.29V1.318l-.672.678-.588-.618 1.398-1.38h.894ZM15 2v1H6V2h9Z' />
+    </svg>
+  )
+})
+
+SvgListOrdered16.displayName = 'SvgListOrdered16'
+export default SvgListOrdered16