@toptal/picasso-pictograms 5.4.0 → 5.5.0

package/src/Pictogram/NetworkGroupWhite64.tsx

@@ -0,0 +1,132 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgNetworkGroupWhite64 = forwardRef(function SvgNetworkGroupWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#000'
+          d='M11.5 11.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM11.5 11.5c-2.76 0-5 2.24-5 5l.5.5h9l.5-.5c0-2.76-2.24-5-5-5ZM31.5 20.5c-6.08 0-11 4.92-11 11s4.92 11 11 11 11-4.92 11-11-4.92-11-11-11Zm-5 16c0-2.76 2.24-5 5-5-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3c2.76 0 5 2.24 5 5l-.5.5h-9l-.5-.5ZM51.5 51.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM51.5 51.5c-2.76 0-5 2.24-5 5l.5.5h9l.5-.5c0-2.76-2.24-5-5-5Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M11.5 22.5c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M11.5 11.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+        />
+        <path
+          stroke='#fff'
+          strokeLinecap='square'
+          strokeMiterlimit={10}
+          d='M6.5 16.5c0-2.76 2.24-5 5-5s5 2.24 5 5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M51.5 22.5c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M51.5 11.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+        />
+        <path
+          stroke='#fff'
+          strokeLinecap='square'
+          strokeMiterlimit={10}
+          d='M46.5 16.5c0-2.76 2.24-5 5-5s5 2.24 5 5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M11.5 62.5c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M11.5 51.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+        />
+        <path
+          stroke='#fff'
+          strokeLinecap='square'
+          strokeMiterlimit={10}
+          d='M6.5 56.5c0-2.76 2.24-5 5-5s5 2.24 5 5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M51.5 62.5c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M51.5 51.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+        />
+        <path
+          stroke='#fff'
+          strokeLinecap='square'
+          strokeMiterlimit={10}
+          d='M46.5 56.5c0-2.76 2.24-5 5-5s5 2.24 5 5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M31.5 42.5c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M31.5 31.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+        />
+        <path
+          stroke='#fff'
+          strokeLinecap='square'
+          strokeMiterlimit={10}
+          d='M26.5 36.5c0-2.76 2.24-5 5-5s5 2.24 5 5'
+        />
+        <path stroke='#fff' strokeMiterlimit={10} d='m39 39 5 5M19 19l5 5' />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgNetworkGroupWhite64.displayName = 'SvgNetworkGroupWhite64'
+export default SvgNetworkGroupWhite64

package/src/Pictogram/OpenCalendarBlue64.tsx

@@ -0,0 +1,65 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgOpenCalendarBlue64 = forwardRef(function SvgOpenCalendarBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#183A9C'
+          d='M59.5 8H53v6h-4V8H14v6h-4V8H3.5A2.5 2.5 0 0 0 1 10.5V20h61v-9.5A2.5 2.5 0 0 0 59.5 8Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M53 7.5h6.53a2.97 2.97 0 0 1 2.97 2.97v46.06a2.97 2.97 0 0 1-2.97 2.97H3.47A2.97 2.97 0 0 1 .5 56.53V10.47A2.97 2.97 0 0 1 3.47 7.5H10M14 7.5h35'
+        />
+        <path
+          fill='#204ECD'
+          d='M13 3v10h-2V3h2Zm1-1h-4v12h4V2ZM52 3v10h-2V3h2Zm1-1h-4v12h4V2Z'
+        />
+        <path
+          fill='#183A9C'
+          d='M22 28H11v9h11v-9ZM37 28H26v9h11v-9ZM52 28H41v9h11v-9ZM22 41H11v9h11v-9ZM37 41H26v9h11v-9Z'
+          opacity={0.15}
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgOpenCalendarBlue64.displayName = 'SvgOpenCalendarBlue64'
+export default SvgOpenCalendarBlue64

package/src/Pictogram/OpenCalendarWhite64.tsx

@@ -0,0 +1,65 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgOpenCalendarWhite64 = forwardRef(function SvgOpenCalendarWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#000'
+          d='M59.5 8H53v6h-4V8H14v6h-4V8H3.5A2.5 2.5 0 0 0 1 10.5V20h61v-9.5A2.5 2.5 0 0 0 59.5 8Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M53 7.5h6.53a2.97 2.97 0 0 1 2.97 2.97v46.06a2.97 2.97 0 0 1-2.97 2.97H3.47A2.97 2.97 0 0 1 .5 56.53V10.47A2.97 2.97 0 0 1 3.47 7.5H10M14 7.5h35'
+        />
+        <path
+          fill='#fff'
+          d='M13 3v10h-2V3h2Zm1-1h-4v12h4V2ZM52 3v10h-2V3h2Zm1-1h-4v12h4V2Z'
+        />
+        <path
+          fill='#000'
+          d='M22 28H11v9h11v-9ZM37 28H26v9h11v-9ZM52 28H41v9h11v-9ZM22 41H11v9h11v-9ZM37 41H26v9h11v-9Z'
+          opacity={0.3}
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgOpenCalendarWhite64.displayName = 'SvgOpenCalendarWhite64'
+export default SvgOpenCalendarWhite64

package/src/Pictogram/PayHandBlue64.tsx

@@ -0,0 +1,64 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPayHandBlue64 = forwardRef(function SvgPayHandBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#183A9D'
+          d='m63.38 44.75-1.63-1.78L41.26 59H0v4l42.5.5 20.88-18.75Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#204ECD'
+          d='M42.69 64H0v-1h42.3l20.42-18.34a5.272 5.272 0 0 0-3.11-2.18 5.279 5.279 0 0 0-4.12.64l-15.91 9.91-9.81-2.02a3.657 3.657 0 0 1-2.9-3.56c0-1.88 1.41-3.44 3.28-3.62l3.96-.4c3.4-.34 6.01-3.06 6.25-6.42H25.69c-6.7 0-12.73 3.73-15.73 9.72l-.14.28H0v-1h9.19c3.21-6.18 9.5-10 16.48-10h15.69v.5c0 4.11-3.08 7.51-7.17 7.92l-3.96.4a2.639 2.639 0 0 0-2.38 2.63c0 1.25.89 2.33 2.11 2.59l9.42 1.94 15.57-9.7a6.231 6.231 0 0 1 4.89-.76c1.68.42 3.08 1.49 3.94 2.99l.2.35-21.31 19.15.02-.02Z'
+        />
+        <path
+          fill='#183A9D'
+          d='M41.04 19.83c-.31-.81-.75-1.54-1.34-2.19a8.186 8.186 0 0 0-2.19-1.69c-.87-.48-1.87-.82-3-1.03l-3.5-.68c-.92-.19-1.6-.54-2.05-1.05-.45-.51-.67-1.11-.67-1.8 0-.43.09-.83.28-1.21.19-.38.45-.72.79-1.02.34-.3.75-.53 1.24-.71a4.57 4.57 0 0 1 1.61-.27c.8 0 1.48.12 2.03.36.55.24 1.01.53 1.36.89.35.36.62.74.79 1.16.18.42.3.8.37 1.16l4.38-1.35c-.14-.71-.41-1.46-.79-2.23a7.43 7.43 0 0 0-1.64-2.12c-.71-.64-1.6-1.17-2.67-1.59-.47-.18-.99-.32-1.54-.42V.5h-4v3.47c-.57.1-1.13.25-1.68.46-1.06.4-1.99.96-2.79 1.68-.8.71-1.43 1.55-1.89 2.51-.46.96-.69 2-.69 3.12 0 1.93.59 3.51 1.78 4.76s2.78 2.07 4.79 2.48l3.5.71c.99.19 1.74.55 2.26 1.09.52.53.78 1.17.78 1.91 0 .9-.35 1.65-1.04 2.23-.69.58-1.7.87-3.02.87-.9 0-1.67-.13-2.33-.39a4.91 4.91 0 0 1-1.66-1.05c-.45-.44-.79-.94-1.04-1.52-.25-.57-.39-1.16-.44-1.78l-4.52 1.21c.09.9.35 1.82.78 2.76.42.94 1.04 1.79 1.85 2.55.81.76 1.82 1.38 3.02 1.87.7.28 1.49.47 2.35.59v3.46h4V30a8.8 8.8 0 0 0 1.83-.51c1.12-.45 2.06-1.04 2.83-1.76a7.45 7.45 0 0 0 1.75-2.5c.4-.94.6-1.89.6-2.87 0-.88-.15-1.72-.46-2.53h-.02Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#204ECE'
+          d='M35 34h-5v-3.54c-.76-.13-1.43-.31-2.04-.56-1.25-.51-2.32-1.17-3.17-1.97a8.41 8.41 0 0 1-1.97-2.71c-.44-.99-.72-1.97-.82-2.92l-.04-.42 5.51-1.48.05.6c.04.56.18 1.11.4 1.62.22.51.53.96.93 1.36.4.39.9.71 1.49.94.6.24 1.32.36 2.15.36 1.19 0 2.1-.25 2.7-.76.58-.49.86-1.09.86-1.85 0-.61-.21-1.12-.64-1.56-.44-.46-1.11-.77-2-.94l-3.5-.71c-2.09-.42-3.79-1.31-5.05-2.62-1.27-1.34-1.92-3.06-1.92-5.1 0-1.19.25-2.31.74-3.33a8.358 8.358 0 0 1 2.01-2.67 9.38 9.38 0 0 1 2.94-1.77c.44-.17.89-.3 1.36-.4V0h5v3.62c.45.1.85.22 1.22.36 1.12.44 2.07 1 2.82 1.68.75.68 1.34 1.44 1.75 2.27.41.81.69 1.6.84 2.35l.09.44-5.34 1.65-.11-.54c-.06-.32-.18-.68-.34-1.06a3.1 3.1 0 0 0-.69-1c-.31-.31-.71-.57-1.2-.78-.49-.21-1.11-.32-1.83-.32-.53 0-1.01.08-1.43.24-.42.16-.79.37-1.08.62-.29.25-.52.54-.67.86-.16.31-.23.64-.23.99 0 .57.18 1.05.55 1.47.37.42.97.72 1.77.89l3.49.68c1.17.22 2.23.59 3.15 1.08.92.5 1.7 1.11 2.32 1.8.63.7 1.11 1.49 1.44 2.35.33.86.49 1.77.49 2.71 0 1.04-.22 2.07-.64 3.07-.43 1-1.05 1.89-1.86 2.66-.81.76-1.81 1.39-2.98 1.87-.47.19-.98.34-1.51.46V34H35Zm-4-1h3v-3.42l.41-.07c.62-.11 1.2-.27 1.72-.48 1.06-.43 1.95-.99 2.67-1.66.71-.67 1.26-1.46 1.63-2.33.37-.87.56-1.77.56-2.67 0-.81-.14-1.61-.43-2.35-.28-.75-.7-1.43-1.25-2.04-.55-.61-1.24-1.14-2.06-1.59-.82-.45-1.78-.78-2.86-.98l-3.5-.68c-1.03-.21-1.81-.62-2.33-1.21-.53-.6-.79-1.32-.79-2.13 0-.5.11-.99.33-1.43.22-.44.52-.83.91-1.17.39-.34.86-.61 1.39-.8.53-.2 1.13-.3 1.78-.3.86 0 1.61.13 2.23.4.61.26 1.12.6 1.52 1 .4.4.7.84.9 1.31.11.25.19.49.26.72l3.43-1.06a8.48 8.48 0 0 0-.65-1.66c-.36-.71-.87-1.38-1.53-1.98-.66-.6-1.5-1.1-2.51-1.49-.42-.16-.89-.29-1.45-.39l-.41-.08V1h-3v3.39l-.41.07c-.55.1-1.08.24-1.59.44-1 .38-1.88.91-2.64 1.58-.75.67-1.34 1.46-1.77 2.36-.42.89-.64 1.87-.64 2.9 0 1.81.54 3.25 1.65 4.42 1.11 1.17 2.63 1.95 4.52 2.33l3.5.71c1.08.21 1.93.62 2.52 1.23.61.63.92 1.39.92 2.25 0 1.05-.41 1.93-1.22 2.61-.78.66-1.91.99-3.34.99-.96 0-1.8-.14-2.52-.43s-1.34-.68-1.83-1.16c-.49-.48-.88-1.04-1.15-1.67-.19-.44-.32-.89-.41-1.35l-3.54.95c.12.71.34 1.45.68 2.19.39.87.98 1.68 1.74 2.39.76.72 1.73 1.31 2.87 1.77.64.26 1.37.44 2.23.56l.43.06v3.4L31 33Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgPayHandBlue64.displayName = 'SvgPayHandBlue64'
+export default SvgPayHandBlue64

package/src/Pictogram/PayHandWhite64.tsx

@@ -0,0 +1,64 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPayHandWhite64 = forwardRef(function SvgPayHandWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#000'
+          d='M63.4 44.8 61.8 43 41.3 59H0v4l42.5.5 20.9-18.7Z'
+          opacity={0.3}
+        />
+        <path
+          fill='#fff'
+          d='M42.7 64H0v-1h42.3l20.4-18.3c-.7-1.1-1.8-1.8-3.1-2.2-1.4-.4-2.9-.1-4.1.6L39.6 53l-9.8-2c-1.7-.3-2.9-1.8-2.9-3.6 0-1.9 1.4-3.4 3.3-3.6l4-.4c3.4-.3 6-3.1 6.2-6.4H25.7C19 37 13 40.7 10 46.7l-.2.3H0v-1h9.2c3.2-6.2 9.5-10 16.5-10h15.7v.5c0 4.1-3.1 7.5-7.2 7.9l-4 .4c-1.4.1-2.4 1.3-2.4 2.6 0 1.2.9 2.3 2.1 2.6l9.4 1.9 15.6-9.7c1.5-.9 3.2-1.2 4.9-.8 1.7.4 3.1 1.5 3.9 3l.2.3L42.7 64Z'
+        />
+        <path
+          fill='#000'
+          d='M41 19.8c-.3-.8-.8-1.5-1.3-2.2-.6-.6-1.3-1.2-2.2-1.7-.9-.5-1.9-.8-3-1l-3.5-.7c-.9-.2-1.6-.5-2-1.1-.5-.5-.7-1.1-.7-1.8 0-.4.1-.8.3-1.2.2-.4.5-.7.8-1 .3-.3.8-.5 1.2-.7.5-.2 1-.3 1.6-.3.8 0 1.5.1 2 .4.5.3 1 .5 1.4.9.3.4.6.7.8 1.2.2.4.3.8.4 1.2l4.4-1.4c-.1-.7-.4-1.5-.8-2.2-.4-.8-1-1.5-1.7-2.2-.7-.6-1.6-1.1-2.7-1.5-.5-.2-1-.3-1.5-.4V.5h-4V4c-.6.1-1.1.3-1.7.5-1.1.4-2 1-2.8 1.7-.8.7-1.4 1.6-1.9 2.5-.5.9-.7 2-.7 3.1 0 1.9.6 3.5 1.8 4.8 1.2 1.3 2.8 2 4.8 2.4l3.5.7c1 .2 1.7.5 2.3 1.1.5.5.8 1.2.8 1.9 0 .9-.3 1.6-1 2.2-.7.6-1.7.9-3 .9-.9 0-1.7-.1-2.3-.4-.6-.3-1.2-.6-1.7-1s-.8-.9-1-1.5c-.2-.6-.4-1.2-.4-1.8l-4.5 1.2c.1.9.4 1.8.8 2.8.4.9 1 1.8 1.9 2.5.9.7 1.8 1.4 3 1.9.7.3 1.5.5 2.4.6v3.5h4V30c.7-.1 1.3-.3 1.8-.5 1.1-.5 2.1-1 2.8-1.8.8-.7 1.3-1.6 1.8-2.5.5-.9.6-1.9.6-2.9-.3-.8-.4-1.7-.8-2.5Z'
+          opacity={0.3}
+        />
+        <path
+          fill='#fff'
+          d='M35 34h-5v-3.5c-.8-.1-1.4-.3-2-.6-1.2-.5-2.3-1.2-3.2-2-.9-.8-1.5-1.7-2-2.7-.4-1-.7-2-.8-2.9v-.4l5.5-1.5v.6c0 .6.2 1.1.4 1.6s.5 1 .9 1.4c.4.4.9.7 1.5.9.6.2 1.3.4 2.1.4 1.2 0 2.1-.2 2.7-.8.6-.5.9-1.1.9-1.9 0-.6-.2-1.1-.6-1.6-.4-.5-1.1-.8-2-.9l-3.5-.7c-2.1-.4-3.8-1.3-5-2.6-1.3-1.3-1.9-3.1-1.9-5.1 0-1.2.2-2.3.7-3.3.5-1 1.2-1.9 2-2.7.8-.7 1.8-1.3 2.9-1.7.4-.2.9-.3 1.4-.4V0h5v3.6c.5.1.8.2 1.2.4 1.1.4 2.1 1 2.8 1.7.7.7 1.3 1.4 1.8 2.3.4.8.7 1.6.8 2.3l.1.4-5.3 1.6-.1-.5c-.1-.3-.2-.7-.3-1.1-.2-.4-.4-.7-.7-1-.4-.2-.8-.5-1.3-.7-.5-.2-1.1-.3-1.8-.3-.5 0-1 .1-1.4.2-.4.1-.8.4-1.1.6-.3.2-.5.5-.7.9-.2.3-.2.6-.2 1 0 .6.2 1.1.5 1.5.4.4 1 .7 1.8.9l3.5.7c1.2.2 2.2.6 3.2 1.1.9.5 1.7 1.1 2.3 1.8.6.7 1.1 1.5 1.4 2.4.3.9.5 1.8.5 2.7 0 1-.2 2.1-.6 3.1-.4 1-1 1.9-1.9 2.7-.8.8-1.8 1.4-3 1.9-.5.2-1 .3-1.5.5V34Zm-4-1h3v-3.4l.4-.1c.6-.1 1.2-.3 1.7-.5 1.1-.4 2-1 2.7-1.7.7-.7 1.3-1.5 1.6-2.3.4-.9.6-1.8.6-2.7 0-.8-.1-1.6-.4-2.4-.3-.8-.7-1.4-1.2-2-.5-.6-1.2-1.1-2.1-1.6-.8-.4-1.8-.8-2.9-1l-3.5-.7c-1-.2-1.8-.6-2.3-1.2-.5-.6-.8-1.3-.8-2.1 0-.5.1-1 .3-1.4.2-.4.5-.8.9-1.2.4-.4.9-.6 1.4-.8.5-.2 1.1-.3 1.8-.3.9 0 1.6.1 2.2.4.6.3 1.1.6 1.5 1 .4.4.7.8.9 1.3.1.2.2.5.3.7l3.4-1.1c-.1-.5-.4-1.1-.7-1.7-.4-.7-.9-1.4-1.5-2-.6-.6-1.5-1.1-2.5-1.5-.4-.2-.9-.3-1.5-.4l-.3.2V1h-3v3.4l-.4.1c-.6.1-1.1.2-1.6.4-1 .4-1.9.9-2.6 1.6-.8.7-1.3 1.5-1.8 2.4-.4.9-.6 1.9-.6 2.9 0 1.8.5 3.2 1.6 4.4 1.1 1.2 2.6 2 4.5 2.3l3.5.7c1.1.2 1.9.6 2.5 1.2.6.6.9 1.4.9 2.2 0 1-.4 1.9-1.2 2.6-.8.7-1.9 1-3.3 1-1 0-1.8-.1-2.5-.4-.7-.3-1.3-.7-1.8-1.2s-.9-1-1.1-1.7c-.2-.4-.3-.9-.4-1.4l-3.5 1c.1.7.3 1.5.7 2.2.4.9 1 1.7 1.7 2.4.8.7 1.7 1.3 2.9 1.8.6.3 1.4.4 2.2.6l.4.1L31 33Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgPayHandWhite64.displayName = 'SvgPayHandWhite64'
+export default SvgPayHandWhite64

package/src/Pictogram/PhoneDeviceBlue64.tsx

@@ -0,0 +1,64 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPhoneDeviceBlue64 = forwardRef(function SvgPhoneDeviceBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g fillRule='evenodd' clipPath='url(#a)' clipRule='evenodd'>
+        <path
+          fill='#183A9C'
+          d='M46.68 33.16 28.76 15.2l-4.17 4.15 6.09 6.11-13.37 13.33L35.29 56.8l4.11-4.1-6.15-6.16 13.42-13.38h.01Zm-17.15 8.82c-.12.04-.24.04-.37 0-.12-.04-.22-.09-.44-.31l-2.42-2.43c-.21-.21-.28-.32-.31-.44a.665.665 0 0 1 0-.37c.04-.12.09-.22.31-.44l7.64-7.62c.21-.21.32-.28.44-.31.12-.04.24-.04.37 0 .12.04.22.09.44.31l2.42 2.43c.21.21.28.32.31.44.04.12.04.24 0 .37-.04.12-.09.22-.31.44l-7.64 7.62c-.21.21-.31.27-.44.31Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#183A9C'
+          d='M9 64V8c0-2.21 1.79-4 4-4h7c.55 0 1 .45 1 1v2c0 .55.45 1 1 1h21c.55 0 1-.45 1-1V5c0-.55.45-1 1-1h6c2.21 0 4 1.79 4 4v56h3V8.16C58 4.21 54.8 1 50.84 1H13C9.13 1 6 4.13 6 8v56h3Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#204ECD'
+          d='M13.5 1A7.498 7.498 0 0 0 6 8.5V64H5V8.5C5 3.804 8.804 0 13.5 0h37C55.196 0 59 3.804 59 8.5V64h-1V8.5C58 4.356 54.644 1 50.5 1h-37Z'
+        />
+        <path
+          fill='#204ECD'
+          d='M28.761 14.493 47.885 33.66h-1.008l-12.92 12.88 6.15 6.16-4.818 4.807-18.686-18.718 13.37-13.33-6.09-6.11 4.878-4.856Zm17.207 18.66-17.21-17.246-3.46 3.444 6.09 6.11-13.37 13.33L35.29 56.093l3.402-3.394-6.15-6.16 13.425-13.385Zm-11.365-2.615c-.038-.012-.051-.008-.065-.004l-.018.006-.019.005H34.5l-.022.014a1.468 1.468 0 0 0-.184.164l-7.64 7.62a1.407 1.407 0 0 0-.163.181.152.152 0 0 0-.027.084c0 .014.002.035.011.07v.002l.014.022c.022.032.068.087.165.184v.001l2.42 2.43c.102.102.154.143.18.162.015.01.022.013.053.023.038.012.051.008.065.003l.01-.003a.163.163 0 0 0 .055-.026c.03-.02.083-.063.18-.16l7.64-7.62a1.42 1.42 0 0 0 .162-.18.15.15 0 0 0 .023-.053c.012-.038.008-.052.004-.065l-.006-.018-.005-.019v-.002l-.014-.021a1.471 1.471 0 0 0-.164-.185l-2.42-2.43a1.407 1.407 0 0 0-.182-.162.151.151 0 0 0-.052-.023Zm-.363-.958c.22-.07.441-.064.657.002.099.03.203.072.32.152.106.071.21.165.327.282v.001l2.42 2.43c.217.217.369.404.436.653.07.22.064.441-.002.657a1.14 1.14 0 0 1-.152.32c-.072.105-.165.21-.282.326l-7.64 7.62c-.235.234-.403.358-.642.433-.224.074-.45.07-.669.002a1.14 1.14 0 0 1-.32-.152 2.319 2.319 0 0 1-.327-.283l-2.42-2.43c-.223-.223-.377-.414-.441-.672a1.162 1.162 0 0 1 .159-.958c.072-.106.165-.21.282-.327l7.64-7.62c.218-.217.405-.37.654-.436Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgPhoneDeviceBlue64.displayName = 'SvgPhoneDeviceBlue64'
+export default SvgPhoneDeviceBlue64

package/src/Pictogram/PhoneDeviceWhite64.tsx

@@ -0,0 +1,64 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPhoneDeviceWhite64 = forwardRef(function SvgPhoneDeviceWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g fillRule='evenodd' clipPath='url(#a)' clipRule='evenodd'>
+        <path
+          fill='#000'
+          d='M46.68 33.16 28.76 15.2l-4.17 4.15 6.09 6.11-13.37 13.33L35.29 56.8l4.11-4.1-6.15-6.16 13.42-13.38h.01Zm-17.15 8.82c-.12.04-.24.04-.37 0-.12-.04-.22-.09-.44-.31l-2.42-2.43c-.21-.21-.28-.32-.31-.44a.665.665 0 0 1 0-.37c.04-.12.09-.22.31-.44l7.64-7.62c.21-.21.32-.28.44-.31.12-.04.24-.04.37 0 .12.04.22.09.44.31l2.42 2.43c.21.21.28.32.31.44.04.12.04.24 0 .37-.04.12-.09.22-.31.44l-7.64 7.62c-.21.21-.31.27-.44.31Z'
+          opacity={0.3}
+        />
+        <path
+          fill='#000'
+          d='M9 64V8c0-2.21 1.79-4 4-4h7c.55 0 1 .45 1 1v2c0 .55.45 1 1 1h21c.55 0 1-.45 1-1V5c0-.55.45-1 1-1h6c2.21 0 4 1.79 4 4v56h3V8.16C58 4.21 54.8 1 50.84 1H13C9.13 1 6 4.13 6 8v56h3Z'
+          opacity={0.3}
+        />
+        <path
+          fill='#fff'
+          d='M13.5 1A7.498 7.498 0 0 0 6 8.5V64H5V8.5C5 3.804 8.804 0 13.5 0h37C55.196 0 59 3.804 59 8.5V64h-1V8.5C58 4.356 54.644 1 50.5 1h-37Z'
+        />
+        <path
+          fill='#fff'
+          d='M28.761 14.493 47.885 33.66h-1.008l-12.92 12.88 6.15 6.16-4.818 4.807-18.686-18.718 13.37-13.33-6.09-6.11 4.878-4.856Zm17.207 18.66-17.21-17.246-3.46 3.444 6.09 6.11-13.37 13.33L35.29 56.093l3.402-3.394-6.15-6.16 13.425-13.385Zm-11.365-2.615c-.038-.012-.051-.008-.065-.004l-.018.006-.019.005H34.5l-.022.014a1.468 1.468 0 0 0-.184.164l-7.64 7.62a1.407 1.407 0 0 0-.163.181.152.152 0 0 0-.027.084c0 .014.002.035.011.07v.002l.014.022c.022.032.068.087.165.184v.001l2.42 2.43c.102.102.154.143.18.162.015.01.022.013.053.023.038.012.051.008.065.003l.01-.003a.163.163 0 0 0 .055-.026c.03-.02.083-.063.18-.16l7.64-7.62a1.42 1.42 0 0 0 .162-.18.15.15 0 0 0 .023-.053c.012-.038.008-.052.004-.065l-.006-.018-.005-.019v-.002l-.014-.021a1.471 1.471 0 0 0-.164-.185l-2.42-2.43a1.407 1.407 0 0 0-.182-.162.151.151 0 0 0-.052-.023Zm-.363-.958c.22-.07.441-.064.657.002.099.03.203.072.32.152.106.071.21.165.327.282v.001l2.42 2.43c.217.217.369.404.436.653.07.22.064.441-.002.657a1.14 1.14 0 0 1-.152.32c-.072.105-.165.21-.282.326l-7.64 7.62c-.235.234-.403.358-.642.433-.224.074-.45.07-.669.002a1.14 1.14 0 0 1-.32-.152 2.319 2.319 0 0 1-.327-.283l-2.42-2.43c-.223-.223-.377-.414-.441-.672a1.162 1.162 0 0 1 .159-.958c.072-.106.165-.21.282-.327l7.64-7.62c.218-.217.405-.37.654-.436Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgPhoneDeviceWhite64.displayName = 'SvgPhoneDeviceWhite64'
+export default SvgPhoneDeviceWhite64

package/src/Pictogram/PlanHelpBlue64.tsx

@@ -0,0 +1,48 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPlanHelpBlue64 = forwardRef(function SvgPlanHelpBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g fill='#183A9C' opacity={0.15}>
+        <path d='M47 12v29H32v4h18V12h-3ZM16 41V23h-3v22h17v-4H16ZM31.5 26C37.299 26 42 21.299 42 15.5S37.299 5 31.5 5 21 9.701 21 15.5 25.701 26 31.5 26Z' />
+      </g>
+      <path
+        fill='#204ECD'
+        fillRule='evenodd'
+        d='M47 41H33v10h29V41H47Zm15-1V13H50v-1h13v40H32V41h-1v22H0l.06-40H13v1H1.05l-.036 27H30V41H16V1h31v39h15Zm-16 0V30H17v10h29Zm0-11H17V2h29v27ZM1.013 52H30v10H1l.013-10ZM21 57H10v1h11v-1Zm5-22h11v1H26v-1Zm27 11H42v1h11v-1ZM26.65 16.35 30 19.71l7.1-7.11-.7-.7-6.4 6.39-2.65-2.64-.7.7Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgPlanHelpBlue64.displayName = 'SvgPlanHelpBlue64'
+export default SvgPlanHelpBlue64

package/src/Pictogram/PlanHelpWhite64.tsx

@@ -0,0 +1,48 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgPlanHelpWhite64 = forwardRef(function SvgPlanHelpWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g fill='#000' opacity={0.3}>
+        <path d='M16 41V23h-3v22h17v-4H16ZM47 12v29H32v4h18V12h-3ZM31.5 26C37.299 26 42 21.299 42 15.5S37.299 5 31.5 5 21 9.701 21 15.5 25.701 26 31.5 26Z' />
+      </g>
+      <path
+        fill='#fff'
+        fillRule='evenodd'
+        d='M47 41H33v10h29V41H47Zm15-1V13H50v-1h13v40H32V41h-1v22H0l.1-40H13v1H1v27h29V41H16V1h31v39h15Zm-16 0V30H17v10h29Zm0-11H17V2h29v27ZM1 52h29v10H1V52Zm20 5H10v1h11v-1Zm5-22h11v1H26v-1Zm27 11H42v1h11v-1ZM26.6 16.4l3.4 3.3 7.1-7.1-.7-.7-6.4 6.4-2.6-2.7-.8.8Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgPlanHelpWhite64.displayName = 'SvgPlanHelpWhite64'
+export default SvgPlanHelpWhite64