@toptal/picasso-icons 1.8.2-alpha-BILL-5689-fix-reset-button-on-input-e048b5d95.15 → 1.8.2-alpha-PF-195-add-sidebar-icons-cffaeb9bc.18

package/src/Icon/CollapseResponsive.tsx

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

package/src/Icon/CommandKey16.tsx

@@ -0,0 +1,65 @@
+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: 'PicassoSvgCommandKey16',
+})
+const SvgCommandKey16 = forwardRef(function SvgCommandKey16(
+  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='M3.003 1.055c-.942.211-1.643.876-1.915 1.814-.053.181-.061.272-.061.638 0 .419.001.431.099.733a2.478 2.478 0 0 0 1.52 1.599c.355.132.44.141 1.427.154l.94.012v3.99l-.94.012c-.99.013-1.071.021-1.433.156-.639.237-1.216.791-1.445 1.388-.144.377-.166.497-.167.942-.001.368.007.456.06.638.211.73.67 1.286 1.325 1.603.407.198.598.239 1.094.239.419 0 .431-.001.733-.099a2.478 2.478 0 0 0 1.599-1.52c.132-.355.141-.44.154-1.427l.012-.94h3.99l.012.94c.013.987.022 1.072.154 1.427.273.736.84 1.275 1.599 1.52.302.098.313.099.733.099.497-.001.69-.043 1.094-.239.655-.317 1.115-.874 1.325-1.603.052-.18.061-.274.061-.638 0-.42-.001-.431-.099-.733a2.478 2.478 0 0 0-1.52-1.599c-.355-.132-.44-.141-1.427-.154l-.94-.012v-3.99l.94-.012c.987-.013 1.072-.022 1.427-.154a2.478 2.478 0 0 0 1.52-1.599c.098-.302.099-.313.099-.733 0-.364-.009-.458-.061-.638-.21-.729-.67-1.286-1.325-1.603-.408-.198-.598-.24-1.094-.238-.445.001-.565.023-.942.167-.597.229-1.151.806-1.388 1.445-.135.362-.143.443-.156 1.433l-.012.94h-3.99l-.012-.94c-.013-.987-.022-1.072-.154-1.427A2.482 2.482 0 0 0 4.253 1.13c-.27-.088-.324-.096-.68-.106-.283-.007-.435.001-.57.031m.861.986c.501.118.964.578 1.102 1.096.024.093.034.373.034.996V5h-.867c-.943 0-.995-.006-1.302-.154-.225-.109-.543-.419-.664-.649-.243-.46-.213-1.101.071-1.515.231-.335.59-.583.949-.655.177-.035.496-.029.677.014m9.156.048c.29.11.555.323.742.593.284.414.314 1.055.071 1.515-.121.23-.439.54-.664.649-.307.148-.359.154-1.302.154H11v-.867c0-.623.01-.903.034-.996.136-.51.594-.971 1.09-1.096.241-.062.668-.039.896.048M10 8v2H6V6h4v2m-5 3.867c0 .943-.006.995-.154 1.302-.109.225-.419.543-.649.664-.46.243-1.101.213-1.515-.071a2.032 2.032 0 0 1-.444-.444c-.282-.411-.314-1.058-.074-1.508.221-.414.669-.739 1.099-.795.09-.012.518-.02.95-.018L5 11v.867m7.907-.822c.266.088.441.196.64.395.341.341.47.674.445 1.147-.026.482-.259.889-.674 1.175-.414.284-1.055.314-1.515.071-.22-.116-.54-.439-.641-.646-.153-.317-.156-.336-.169-1.261-.006-.473-.004-.879.004-.902.015-.038.111-.041.903-.031.69.009.913.021 1.007.052'
+      />
+    </svg>
+  )
+})
+
+SvgCommandKey16.displayName = 'SvgCommandKey16'
+export default SvgCommandKey16

package/src/Icon/CommandKey24.tsx

@@ -0,0 +1,65 @@
+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: 'PicassoSvgCommandKey24',
+})
+const SvgCommandKey24 = forwardRef(function SvgCommandKey24(
+  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='M4.933 2.056c-1.018.195-1.785.691-2.333 1.51-.405.606-.572 1.17-.572 1.934 0 .765.167 1.328.575 1.938.54.808 1.355 1.33 2.347 1.503.256.044.677.059 1.695.059H8v5.994l-1.51.016c-1.627.016-1.686.023-2.338.269-.303.114-.789.435-1.083.715-.285.272-.667.83-.788 1.152-.201.533-.253.812-.253 1.354 0 .765.167 1.328.575 1.938.715 1.07 2.03 1.685 3.265 1.529 1.602-.202 2.797-1.336 3.072-2.915.045-.258.06-.676.06-1.697V16h5.994l.016 1.51c.016 1.629.023 1.686.271 2.344.126.335.514.894.815 1.177.746.697 1.835 1.062 2.791.935.827-.11 1.507-.44 2.073-1.006.57-.57.902-1.26 1.007-2.09.12-.953-.244-2.034-.936-2.774-.283-.301-.842-.689-1.177-.815-.658-.248-.715-.255-2.344-.271L16 14.994V9h1.355c1.021 0 1.439-.015 1.697-.06 1.572-.274 2.701-1.457 2.914-3.055.126-.95-.241-2.047-.935-2.789-.283-.301-.842-.689-1.177-.815-.533-.201-.812-.253-1.354-.253-.764 0-1.328.167-1.934.572-.747.5-1.194 1.139-1.457 2.08-.077.275-.085.428-.099 1.81L14.994 8H9V6.645c0-1.024-.015-1.438-.06-1.699-.292-1.676-1.628-2.854-3.32-2.927a3.299 3.299 0 0 0-.687.037m1.203 1.023c.444.113.758.295 1.108.641.358.354.564.7.676 1.14.073.284.08.444.08 1.726V8H6.586c-1.276 0-1.443-.008-1.722-.079-.457-.117-.757-.293-1.125-.66-.367-.368-.543-.668-.66-1.125a2.655 2.655 0 0 1 .209-1.829c.173-.326.693-.846 1.02-1.019a2.646 2.646 0 0 1 1.828-.209m13 0c.17.043.42.138.557.209.326.173.846.693 1.019 1.019.386.733.379 1.695-.019 2.409-.188.338-.639.789-.977.977-.504.281-.701.307-2.302.307H16V6.586c0-1.581.025-1.779.288-2.279.173-.326.693-.846 1.02-1.019a2.646 2.646 0 0 1 1.828-.209M15 12v3H9V9h6v3m-7 5.414c0 1.6-.026 1.797-.306 2.302-.187.338-.674.822-1.001.995-.718.38-1.666.38-2.386.001-.326-.173-.846-.693-1.019-1.019a2.655 2.655 0 0 1-.209-1.829c.117-.457.293-.757.66-1.125.363-.362.666-.542 1.109-.658.26-.068.447-.077 1.722-.079L8 16v1.414m11.136-1.335c.17.043.42.138.557.209.326.173.846.693 1.019 1.019.386.733.379 1.693-.018 2.409-.187.338-.674.822-1.001.995-.718.38-1.666.38-2.386.001-.326-.173-.846-.693-1.019-1.019-.263-.5-.288-.698-.288-2.279V16h1.414c1.276 0 1.443.008 1.722.079'
+      />
+    </svg>
+  )
+})
+
+SvgCommandKey24.displayName = 'SvgCommandKey24'
+export default SvgCommandKey24

package/src/Icon/CommandKeyResponsive.tsx

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

package/src/Icon/Expand16.tsx

@@ -0,0 +1,65 @@
+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: 'PicassoSvgExpand16',
+})
+const SvgExpand16 = forwardRef(function SvgExpand16(
+  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='M1.013 3.507V6H2V2.707L4.073 4.78l2.074 2.073L6.5 6.5l.353-.353L4.78 4.073 2.707 2H6v-.987H1.013v2.494m8.987-2V2h3.293L11.22 4.073 9.147 6.147 9.5 6.5l.353.353 2.074-2.073L14 2.707V6h.987V1.013H10v.494M4.073 11.22 2 13.293V10h-.987v4.987H6V14H2.707l2.073-2.074 2.074-2.073L6.5 9.5l-.354-.353-2.073 2.073M9.5 9.5l-.353.353 2.073 2.074L13.293 14H10v.987h4.987V10H14v3.293l-2.073-2.073-2.074-2.073L9.5 9.5'
+      />
+    </svg>
+  )
+})
+
+SvgExpand16.displayName = 'SvgExpand16'
+export default SvgExpand16

package/src/Icon/Expand24.tsx

@@ -0,0 +1,65 @@
+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: 'PicassoSvgExpand24',
+})
+const SvgExpand24 = forwardRef(function SvgExpand24(
+  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='M2 5.5V9h1V3.7l2.95 2.95L8.9 9.6l.35-.35.35-.35-2.95-2.95L3.7 3H9V2H2v3.5m13-3V3h5.3l-2.95 2.95L14.4 8.9l.35.35.35.35 2.95-2.95L21 3.7V9h1V2h-7v.5M5.95 17.35 3 20.3V15H2v7h7v-1H3.7l2.95-2.95 2.951-2.951-.351-.349-.351-.349L5.95 17.35m8.8-2.6-.35.35 2.95 2.95L20.3 21H15v1h7v-7h-1v5.3l-2.95-2.95-2.95-2.95-.35.35'
+      />
+    </svg>
+  )
+})
+
+SvgExpand24.displayName = 'SvgExpand24'
+export default SvgExpand24

package/src/Icon/ExpandResponsive.tsx

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

package/src/Icon/Location16.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: 'PicassoSvgLocation16',
+})
+const SvgLocation16 = forwardRef(function SvgLocation16(
+  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.97 8C12.73 5.37 10.63 3.26 8 3.03V1H7v2.03C4.37 3.27 2.26 5.37 2.03 8H0v1h2.03c.24 2.63 2.34 4.74 4.97 4.97V16h1v-2.03c2.63-.24 4.74-2.34 4.97-4.97H15V8h-2.03Zm-1.02 1A4.466 4.466 0 0 1 8 12.95V11H7v1.95A4.466 4.466 0 0 1 3.05 9H5V8H3.05A4.466 4.466 0 0 1 7 4.05V6h1V4.05c2.08.23 3.72 1.87 3.95 3.95H10v1h1.95Z' />
+    </svg>
+  )
+})
+
+SvgLocation16.displayName = 'SvgLocation16'
+export default SvgLocation16

package/src/Icon/Location24.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: 'PicassoSvgLocation24',
+})
+const SvgLocation24 = forwardRef(function SvgLocation24(
+  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='M19.97 12A8.491 8.491 0 0 0 12 4.03V1h-1v3.03A8.491 8.491 0 0 0 3.03 12H0v1h3.03A8.491 8.491 0 0 0 11 20.97V24h1v-3.03A8.491 8.491 0 0 0 19.97 13H23v-1h-3.03Zm-1 1c-.25 3.74-3.24 6.73-6.97 6.97V17h-1v2.97c-3.74-.25-6.73-3.24-6.97-6.97H7v-1H4.03C4.28 8.26 7.27 5.27 11 5.03V8h1V5.03c3.74.25 6.73 3.24 6.97 6.97H16v1h2.97Z' />
+    </svg>
+  )
+})
+
+SvgLocation24.displayName = 'SvgLocation24'
+export default SvgLocation24

package/src/Icon/LocationResponsive.tsx

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

package/src/Icon/Objective16.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: 'PicassoSvgObjective16',
+})
+const SvgObjective16 = forwardRef(function SvgObjective16(
+  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.42 3.29-2.02-.68-.68-2.02-2.71 2.71v2L6.66 8.65c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0l2.09-2.09c.36.5.56 1.1.56 1.73 0 1.65-1.35 3-3 3s-3-1.35-3-3a3.009 3.009 0 0 1 3.82-2.89l.27-.96A3.999 3.999 0 0 0 3.01 9c0 2.21 1.79 4 4 4s4-1.79 4-4c0-.9-.31-1.74-.85-2.44l.56-.56h1.47c.53.91.82 1.94.82 3 0 3.31-2.69 6-6 6S1 12.31 1 9a6.005 6.005 0 0 1 7.62-5.78l.27-.96C8.28 2.09 7.65 2 7.01 2 3.14 2 0 5.14 0 9s3.14 7 7 7 7-3.14 7-7c0-1.2-.32-2.36-.9-3.4l2.32-2.32ZM12.29 5H11V3.71l1.28-1.28.33.97.97.33-1.28 1.28Z' />
+    </svg>
+  )
+})
+
+SvgObjective16.displayName = 'SvgObjective16'
+export default SvgObjective16

package/src/Icon/Objective24.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: 'PicassoSvgObjective24',
+})
+const SvgObjective24 = forwardRef(function SvgObjective24(
+  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.01 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='m23.03 4.69-3.09-.62-.62-3.09-4.31 4.31v3l-4.85 4.85c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0L14 10.71c.63.79.99 1.76.99 2.78 0 2.48-2.01 4.5-4.48 4.5s-4.48-2.02-4.48-4.5 2.01-4.5 4.48-4.5c.41 0 .82.06 1.22.17L12 8.2c-.48-.14-.98-.21-1.49-.21-3.02 0-5.48 2.47-5.48 5.5s2.46 5.5 5.48 5.5 5.48-2.47 5.48-5.5c0-1.3-.46-2.51-1.28-3.49l1.01-1.01h3l.09-.09a9.42 9.42 0 0 1 1.21 4.59c0 5.24-4.27 9.5-9.51 9.5S1 18.74 1 13.5 5.27 4 10.51 4c.87 0 1.73.12 2.56.35l.27-.96c-.92-.26-1.87-.39-2.83-.39C4.72 3 0 7.71 0 13.5S4.72 24 10.51 24s10.51-4.71 10.51-10.5c0-1.89-.52-3.71-1.48-5.33l3.48-3.48ZM18.31 8h-2.29V5.71l2.69-2.69.38 1.91 1.91.38L18.31 8Z' />
+    </svg>
+  )
+})
+
+SvgObjective24.displayName = 'SvgObjective24'
+export default SvgObjective24

package/src/Icon/ObjectiveResponsive.tsx

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

package/src/Icon/PendingQueue16.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: 'PicassoSvgPendingQueue16',
+})
+const SvgPendingQueue16 = forwardRef(function SvgPendingQueue16(
+  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='M10 13h2.18c-1.22 1.26-2.9 2-4.68 2C3.92 15 1 12.08 1 8.5c0-.31.02-.62.07-.93l-.99-.14C.03 7.78 0 8.14 0 8.5 0 12.64 3.36 16 7.5 16c2.1 0 4.09-.89 5.5-2.41V16h1v-4h-4v1ZM5 8.5C5 7.67 4.33 7 3.5 7S2 7.67 2 8.5 2.67 10 3.5 10 5 9.33 5 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0C9 7.67 8.33 7 7.5 7S6 7.67 6 8.5 6.67 10 7.5 10 9 9.33 9 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0c0-.83-.67-1.5-1.5-1.5S10 7.67 10 8.5s.67 1.5 1.5 1.5S13 9.33 13 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM7.5 1C5.4 1 3.41 1.89 2 3.41V1H1v4h4V4H2.82c1.22-1.26 2.9-2 4.68-2C11.08 2 14 4.92 14 8.5c0 .31-.02.62-.07.93l.99.14c.05-.35.08-.71.08-1.07C15 4.36 11.64 1 7.5 1Z' />
+    </svg>
+  )
+})
+
+SvgPendingQueue16.displayName = 'SvgPendingQueue16'
+export default SvgPendingQueue16