@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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-icons",
-  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
+  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c6a9da7e9.4084+c6a9da7e9",
   "description": "Toptal UI components library - Icons",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.4082+ca4ef823d",
+    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c6a9da7e9.4084+c6a9da7e9",
     "classnames": "^2.3.1"
   },
   "sideEffects": [
@@ -34,17 +34,12 @@
     "@toptal/picasso-provider": "3.5.0",
     "react": ">=16.12.0 < 19.0.0"
   },
-  "type": "module",
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
     "@babel/types": "^7.20.7",
-    "@toptal/picasso-provider": "3.4.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-ca4ef823d.44+ca4ef823d"
+    "@toptal/picasso-provider": "3.4.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c6a9da7e9.46+c6a9da7e9"
   },
-  "files": [
-    "dist-package/**",
-    "!dist-package/tsconfig.tsbuildinfo"
-  ],
-  "gitHead": "ca4ef823de9250ac91938e59b5156c3c35f0808c"
+  "gitHead": "c6a9da7e9866499202631169376c9acb579d4210"
 }

package/src/Icon/Abstract16.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: 'PicassoSvgAbstract16',
+})
+const SvgAbstract16 = forwardRef(function SvgAbstract16(
+  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 0c6.4 0 8 1.6 8 8s-1.6 8-8 8-8-1.6-8-8 1.6-8 8-8Zm-.1 6.5c-1.2-.5-2.5-.2-3.4.6-.9.9-1.1 2.2-.6 3.4.4 1.1 1.5 1.9 2.8 1.9 1.7 0 3-1.4 3.1-3.1C9.8 8.1 9 7 7.9 6.5Zm4.4-2.7H3.8v1.5h7v7h1.5V3.8Zm-5.6 4c.8 0 1.5.7 1.6 1.5 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.5 1.6-1.5Z' />
+    </svg>
+  )
+})
+
+SvgAbstract16.displayName = 'SvgAbstract16'
+export default SvgAbstract16

package/src/Icon/Abstract24.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: 'PicassoSvgAbstract24',
+})
+const SvgAbstract24 = forwardRef(function SvgAbstract24(
+  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.3 0C21.7.1 24 2.5 24 12c0 9.6-2.4 12-12 12S0 21.6 0 12v-.3C.1 2.3 2.5 0 12 0Zm-.5 9.7c-1.7-.7-3.7-.3-5 1-1.3 1.3-1.7 3.3-1 5 .7 1.7 2.4 2.9 4.2 2.9 2.6 0 4.6-2.1 4.6-4.6 0-1.9-1.1-3.6-2.8-4.3Zm6.6-4.1H5.6v2.3h10.5v10.5h2.3V5.6Zm-8.4 6c1.3 0 2.4 1.1 2.4 2.4 0 1.3-1.1 2.3-2.4 2.3-1.3 0-2.3-1-2.3-2.3 0-1.3 1-2.4 2.3-2.4Z' />
+    </svg>
+  )
+})
+
+SvgAbstract24.displayName = 'SvgAbstract24'
+export default SvgAbstract24

package/src/Icon/AbstractResponsive.tsx

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

package/src/Icon/Ach16.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: 'PicassoSvgAch16',
+})
+const SvgAch16 = forwardRef(function SvgAch16(
+  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 7V6h2.5A1.5 1.5 0 0 1 16 7.5v6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-6A1.5 1.5 0 0 1 1.5 6H3v1H1.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5H12Zm-3 3h5v1H9v-1Zm-2 2h7v1H7v-1Zm1.5-7.793L3 9.707V11h1.293l5.5-5.5L8.5 4.207Zm.707-.707L10.5 4.793 11.793 3.5 10.5 2.207 9.207 3.5ZM2 9.293l8.5-8.5L13.207 3.5l-8.5 8.5H2V9.293Z' />
+    </svg>
+  )
+})
+
+SvgAch16.displayName = 'SvgAch16'
+export default SvgAch16

package/src/Icon/Ach24.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: 'PicassoSvgAch24',
+})
+const SvgAch24 = forwardRef(function SvgAch24(
+  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='m15.5 1.793.354.354 4 4 .353.353-.353.354-12 12-.147.146H3v-4.707l.146-.146 12-12 .354-.354ZM4 14.707V18h3.293l9-9L13 5.707l-9 9ZM13.707 5 17 8.293 18.793 6.5 15.5 3.207 13.707 5ZM1.64 9a.64.64 0 0 0-.64.64v10.73c0 .354.286.64.64.64h20.72a.64.64 0 0 0 .64-.64V9.64a.64.64 0 0 0-.64-.64H20V8h2.36c.906 0 1.64.734 1.64 1.64v10.73a1.64 1.64 0 0 1-1.64 1.64H1.64A1.64 1.64 0 0 1 0 20.37V9.64C0 8.734.734 8 1.64 8H6v1H1.64ZM21 16h-7v-1h7v1Zm-10 3h10v-1H11v1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgAch24.displayName = 'SvgAch24'
+export default SvgAch24

package/src/Icon/Ach32.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 = 32
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgAch32',
+})
+const SvgAch32 = forwardRef(function SvgAch32(
+  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 32 32'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M25 12v-1h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V13a2 2 0 0 1 2-2h6v1H2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1h-5ZM14 24h14v1H14v-1Zm4-4h10v1H18v-1Zm-.5-13.793L5 18.707V23h4.293l12.5-12.5L17.5 6.207Zm.707-.707L22.5 9.793 24.793 7.5 20.5 3.207 18.207 5.5ZM4 18.293l16.5-16.5L26.207 7.5 9.707 24H4v-5.707Z' />
+    </svg>
+  )
+})
+
+SvgAch32.displayName = 'SvgAch32'
+export default SvgAch32

package/src/Icon/AchResponsive.tsx

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

package/src/Icon/Add16.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: 'PicassoSvgAdd16',
+})
+const SvgAdd16 = forwardRef(function SvgAdd16(
+  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='M10 0v1H1v10h2v2.586L5.586 11H15V6h1v6H6l-4 4v-4H0V0h10Zm4 0v2h2v1h-2v2h-1V3h-2V2h2V0h1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgAdd16.displayName = 'SvgAdd16'
+export default SvgAdd16

package/src/Icon/Add24.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: 'PicassoSvgAdd24',
+})
+const SvgAdd24 = forwardRef(function SvgAdd24(
+  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='M15 1v1H2v15h2v3.586L7.586 17H22V9h1v9H8l-5 5v-5H1V1h14Zm5 0v3h3v1h-3v3h-1V5h-3V4h3V1h1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgAdd24.displayName = 'SvgAdd24'
+export default SvgAdd24

package/src/Icon/AddDocument16.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: 'PicassoSvgAddDocument16',
+})
+const SvgAddDocument16 = forwardRef(function SvgAddDocument16(
+  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 0v8h-1V1H1v14h7v1H0V0h13Zm0 11v2h2v1h-2v2h-1v-2h-2v-1h2v-2h1ZM6 8v1H3V8h3Zm4-2v1H3V6h7Zm0-2v1H3V4h7Z' />
+    </svg>
+  )
+})
+
+SvgAddDocument16.displayName = 'SvgAddDocument16'
+export default SvgAddDocument16

package/src/Icon/AddDocument24.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: 'PicassoSvgAddDocument24',
+})
+const SvgAddDocument24 = forwardRef(function SvgAddDocument24(
+  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 1v12h-1V2H2v20h11v1H1V1h18Zm0 15v3h3v1h-3v3h-1v-3h-3v-1h3v-3h1ZM9 13v1H4v-1h5Zm7-3v1H4v-1h12Zm0-3v1H4V7h12Z' />
+    </svg>
+  )
+})
+
+SvgAddDocument24.displayName = 'SvgAddDocument24'
+export default SvgAddDocument24

package/src/Icon/AddDocumentResponsive.tsx

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

package/src/Icon/AddResponsive.tsx

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