@toptal/picasso-pictograms 5.4.0 → 5.5.0

package/src/Pictogram/DashboardSettingsWhite64.tsx

@@ -0,0 +1,67 @@
+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 SvgDashboardSettingsWhite64 = forwardRef(
+  function SvgDashboardSettingsWhite64(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='M17 36H6v22h11V36ZM44 36h-9v22h9V36ZM43.13 23l.5.66c-.84 1.13-1.84 2.13-2.97 2.97l-2.68-2.04c-1.06.66-2.22 1.14-3.43 1.42l-.45 3.34c-1.39.2-2.81.2-4.2 0l-.45-3.34c-1.21-.28-2.37-.76-3.42-1.42l-2.68 2.04c-.86-.64-1.64-1.37-2.34-2.18v7.56h37v-9H43.14l-.01-.01Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M16.28 23.5H6.5v8h9.78v-8ZM29.5 36.5h-8v21h8v-21ZM57.5 36.5h-8v21h8v-21Z'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M50 15.5h11.5c1.1 0 2 .9 2 2v44c0 1.1-.9 2-2 2h-59c-1.1 0-2-.9-2-2v-44c0-1.1.9-2 2-2H14'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M34.1.65c-1.39-.2-2.81-.2-4.2 0l-.45 3.34c-1.21.28-2.37.76-3.43 1.42l-2.68-2.04c-1.13.84-2.13 1.84-2.97 2.97l2.04 2.68c-.66 1.06-1.14 2.22-1.42 3.43l-3.34.45c-.2 1.39-.2 2.81 0 4.2l3.34.45c.28 1.21.76 2.37 1.42 3.43l-2.04 2.68c.84 1.13 1.84 2.13 2.97 2.97l2.68-2.04c1.06.66 2.21 1.14 3.42 1.42l.45 3.34c1.39.2 2.81.2 4.2 0l.45-3.34c1.21-.28 2.37-.76 3.43-1.42l2.68 2.04c1.13-.84 2.13-1.84 2.97-2.97l-2.04-2.68c.66-1.06 1.14-2.22 1.42-3.43l3.34-.45c.2-1.39.2-2.81 0-4.2L43 12.45c-.28-1.21-.76-2.37-1.42-3.43l2.04-2.68c-.84-1.13-1.84-2.13-2.97-2.97l-2.68 2.04c-1.06-.66-2.22-1.14-3.43-1.42L34.09.65h.01Z'
+            clipRule='evenodd'
+          />
+          <path stroke='#fff' strokeMiterlimit={10} d='m27 15 3.5 3.5L37 12' />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgDashboardSettingsWhite64.displayName = 'SvgDashboardSettingsWhite64'
+export default SvgDashboardSettingsWhite64

package/src/Pictogram/DashboardViewBlue64.tsx

@@ -0,0 +1,57 @@
+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 SvgDashboardViewBlue64 = forwardRef(function SvgDashboardViewBlue64(
+  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='M4.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM14.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM16 13H1v42.56C1 56.91 2.09 58 3.44 58H16V15h47v-2H16Zm-2 13H2v-5h12v5Z'
+          opacity={0.15}
+        />
+        <path fill='#183A9C' d='M59 32H20v7h39v-7Z' opacity={0.15} />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M60.5 5.5h-57a3 3 0 0 0-3 3v47a3 3 0 0 0 3 3h57a3 3 0 0 0 3-3v-47a3 3 0 0 0-3-3ZM5 17.5h6M5 23.5h6M5 29.5h6M5 35.5h6M20 19.5h6M20 23.5h39M20 27.5h19M20 44.5h9M20 48.5h9M20 52.5h9M35 44.5h9M35 48.5h9M35 52.5h9M50 44.5h9M50 48.5h9M50 52.5h9'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDashboardViewBlue64.displayName = 'SvgDashboardViewBlue64'
+export default SvgDashboardViewBlue64

package/src/Pictogram/DashboardViewWhite64.tsx

@@ -0,0 +1,57 @@
+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 SvgDashboardViewWhite64 = forwardRef(function SvgDashboardViewWhite64(
+  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='M4.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM14.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM16 13H1v42.56C1 56.91 2.09 58 3.44 58H16V15h47v-2H16Zm-2 13H2v-5h12v5Z'
+          opacity={0.3}
+        />
+        <path fill='#000' d='M59 32H20v7h39v-7Z' opacity={0.3} />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M60.5 5.5h-57a3 3 0 0 0-3 3v47a3 3 0 0 0 3 3h57a3 3 0 0 0 3-3v-47a3 3 0 0 0-3-3ZM5 17.5h6M5 23.5h6M5 29.5h6M5 35.5h6M20 19.5h6M20 23.5h39M20 27.5h19M20 44.5h9M20 48.5h9M20 52.5h9M35 44.5h9M35 48.5h9M35 52.5h9M50 44.5h9M50 48.5h9M50 52.5h9'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDashboardViewWhite64.displayName = 'SvgDashboardViewWhite64'
+export default SvgDashboardViewWhite64

package/src/Pictogram/DeletedMembersBlue64.tsx

@@ -0,0 +1,76 @@
+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 SvgDeletedMembersBlue64 = forwardRef(function SvgDeletedMembersBlue64(
+  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='M63.205 52.5h-30.15l-.32.535A1.3 1.3 0 0 0 33.85 55h28.545a1.3 1.3 0 0 0 1.125-1.95l-.32-.55h.005ZM49.21 46.75h-2.42l-1.73-9h5.88l-1.73 9Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#183A9C'
+          d='M48 52.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM46 .5V12h11.5L46 .5ZM24.5 19.75a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5ZM24.5 19.75a9.75 9.75 0 0 0-9.75 9.75h19.5a9.75 9.75 0 0 0-9.75-9.75ZM33.5 55.5l14 3.5h-41v4.5h51v-8h-24Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='m49.38 28.53 14.16 24.525c.565.975-.14 2.2-1.27 2.2H33.765a1.484 1.484 0 0 1-1.285-2.225l14.145-24.5c.61-1.06 2.145-1.06 2.755 0Z'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M49.21 46.75h-2.42l-1.73-9h5.88l-1.73 9ZM48 52.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M57.75 38.5V12.25l-12-12H6.25v63.5h51.5V55.5'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M45.75.5v11.75H57.5M24.5 19.75a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5ZM14.75 29.5a9.75 9.75 0 0 1 9.75-9.75 9.75 9.75 0 0 1 9.75 9.75M40 19.25h9M40 24.25h9M40 29.25h6.205M15 37.25h26.5M15 42.25h12.25M15 47.25h10.25M15 52.25h4.5'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDeletedMembersBlue64.displayName = 'SvgDeletedMembersBlue64'
+export default SvgDeletedMembersBlue64

package/src/Pictogram/DeletedMembersWhite64.tsx

@@ -0,0 +1,81 @@
+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 SvgDeletedMembersWhite64 = forwardRef(function SvgDeletedMembersWhite64(
+  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.205 52.5h-30.15l-.32.535A1.3 1.3 0 0 0 33.85 55h28.545a1.3 1.3 0 0 0 1.125-1.95l-.32-.55h.005ZM49.21 46.75h-2.42l-1.73-9h5.88l-1.73 9Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M49.21 46.75h-2.42l-1.73-9h5.88l-1.73 9Z'
+        />
+        <path
+          fill='#000'
+          d='M48 52.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM46 .5V12h11.5L46 .5ZM24.5 19.75a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5ZM24.5 19.75a9.75 9.75 0 0 0-9.75 9.75h19.5a9.75 9.75 0 0 0-9.75-9.75ZM33.5 55.5l14 3.5h-41v4.5h51v-8h-24Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='m49.38 28.53 14.16 24.525c.565.975-.14 2.2-1.27 2.2H33.765a1.484 1.484 0 0 1-1.285-2.225l14.145-24.5c.61-1.06 2.145-1.06 2.755 0Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M48 52.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M57.75 38.5V12.25l-12-12H6.25v63.5h51.5V55.5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M45.75.5v11.75H57.5M24.5 19.75a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5ZM14.75 29.5a9.75 9.75 0 0 1 9.75-9.75 9.75 9.75 0 0 1 9.75 9.75M40 19.25h9M40 24.25h9M40 29.25h6.205M15 37.25h26.5M15 42.25h12.25M15 47.25h10.25M15 52.25h4.5'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDeletedMembersWhite64.displayName = 'SvgDeletedMembersWhite64'
+export default SvgDeletedMembersWhite64

package/src/Pictogram/DiamondRawBlue64.tsx

@@ -0,0 +1,60 @@
+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 SvgDiamondRawBlue64 = forwardRef(function SvgDiamondRawBlue64(
+  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='M22.6 24.17c-.32.21-.7.33-1.1.33-1.1 0-2-.9-2-2 0-.17.02-.34.07-.5H4.43c.04.16.07.33.07.5 0 .74-.4 1.37-.99 1.72l26.27 26.27c.33-.55.9-.92 1.56-.97L22.6 24.17ZM58.5 22.5c0-.17.03-.34.07-.5H43.43c.05.16.07.33.07.5 0 1.1-.9 2-2 2-.4 0-.78-.12-1.1-.33l-8.74 25.35c.66.05 1.23.42 1.56.97l26.27-26.27c-.59-.35-.99-.98-.99-1.72ZM41.36 20.51 37.59 9.18c-.31.2-.68.32-1.08.32-1.1 0-2-.9-2-2 0-.17.03-.34.07-.5h-6.14c.04.16.07.33.07.5 0 1.1-.9 2-2 2-.4 0-.77-.12-1.08-.32l-3.77 11.33c1.04.07 1.86.94 1.86 1.99 0 .17-.02.34-.07.5h16.14c-.05-.16-.07-.33-.07-.5 0-1.05.82-1.92 1.86-1.99h-.02Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECC'
+          strokeMiterlimit={10}
+          d='m4.97 24.97 24.06 24.06M15.03 9.97 4.97 20.03M23 7.5h-2M33 7.5h-3M42 7.5h-2M58.03 20.03 47.97 9.97M33.97 49.03l24.06-24.06M6 22.5h12M45 22.5h12M25 22.5h13M17 63.5h29M2.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM21.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM17.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM26.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM45.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM36.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM60.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM41.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM31.5 53.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM22.64 25.81l7.72 22.38M22.61 19.18l2.78-8.36M37.61 10.82l2.78 8.36M40.36 25.81l-7.72 22.38'
+        />
+        <path
+          fill='#204ECD'
+          d='m32.51 53.22.17.17-.08-.22s-.06.03-.09.05ZM30.32 53.39l.17-.17s-.06-.03-.09-.05l-.08.22Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDiamondRawBlue64.displayName = 'SvgDiamondRawBlue64'
+export default SvgDiamondRawBlue64

package/src/Pictogram/DiamondRawWhite64.tsx

@@ -0,0 +1,60 @@
+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 SvgDiamondRawWhite64 = forwardRef(function SvgDiamondRawWhite64(
+  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='M22.6 24.17c-.32.21-.7.33-1.1.33-1.1 0-2-.9-2-2 0-.17.02-.34.07-.5H4.43c.04.16.07.33.07.5 0 .74-.4 1.37-.99 1.72l26.27 26.27c.33-.55.9-.92 1.56-.97L22.6 24.17ZM58.5 22.5c0-.17.03-.34.07-.5H43.43c.05.16.07.33.07.5 0 1.1-.9 2-2 2-.4 0-.78-.12-1.1-.33l-8.74 25.35c.66.05 1.23.42 1.56.97l26.27-26.27c-.59-.35-.99-.98-.99-1.72ZM41.36 20.51 37.59 9.18c-.31.2-.68.32-1.08.32-1.1 0-2-.9-2-2 0-.17.03-.34.07-.5h-6.14c.04.16.07.33.07.5 0 1.1-.9 2-2 2-.4 0-.77-.12-1.08-.32l-3.77 11.33c1.04.07 1.86.94 1.86 1.99 0 .17-.02.34-.07.5h16.14c-.05-.16-.07-.33-.07-.5 0-1.05.82-1.92 1.86-1.99h-.02Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='m4.97 24.97 24.06 24.06M15.03 9.97 4.97 20.03M23 7.5h-2M33 7.5h-3M42 7.5h-2M58.03 20.03 47.97 9.97M33.97 49.03l24.06-24.06M6 22.5h12M45 22.5h12M25 22.5h13M17 63.5h29M2.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM21.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM17.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM26.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM45.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM36.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM60.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM41.5 24.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM31.5 53.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM22.64 25.81l7.72 22.38M22.61 19.18l2.78-8.36M37.61 10.82l2.78 8.36M40.36 25.81l-7.72 22.38'
+        />
+        <path
+          fill='#204ECD'
+          d='m32.51 53.22.17.17-.08-.22s-.06.03-.09.05ZM30.32 53.39l.17-.17s-.06-.03-.09-.05l-.08.22Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDiamondRawWhite64.displayName = 'SvgDiamondRawWhite64'
+export default SvgDiamondRawWhite64

package/src/Pictogram/DollarCoinBlue64.tsx

@@ -0,0 +1,61 @@
+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 SvgDollarCoinBlue64 = forwardRef(function SvgDollarCoinBlue64(
+  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='M18 44.5C18 30.42 29.42 19 43.5 19c3.94 0 7.67.9 11.01 2.49C50.4 12.92 41.64 7 31.5 7 17.42 7 6 18.42 6 32.5c0 10.14 5.92 18.9 14.49 23.01C18.89 52.18 18 48.45 18 44.5Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M31.5 63.5c17.12 0 31-13.88 31-31 0-17.12-13.88-31-31-31-17.12 0-31 13.88-31 31 0 17.12 13.88 31 31 31Z'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M42.5 24v-.66a5.84 5.84 0 0 0-5.84-5.84H26.35a5.84 5.84 0 0 0-5.84 5.84c0 2.49 1.57 4.7 3.92 5.52l14.37 5c2.82.98 4.71 3.64 4.71 6.62 0 3.87-3.14 7.01-7.01 7.01h-9.49c-4.14 0-7.5-3.36-7.5-7.5M31.5 11v43'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDollarCoinBlue64.displayName = 'SvgDollarCoinBlue64'
+export default SvgDollarCoinBlue64

package/src/Pictogram/DollarCoinWhite64.tsx

@@ -0,0 +1,61 @@
+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 SvgDollarCoinWhite64 = forwardRef(function SvgDollarCoinWhite64(
+  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='M18 44.5C18 30.42 29.42 19 43.5 19c3.94 0 7.67.9 11.01 2.49C50.4 12.92 41.64 7 31.5 7 17.42 7 6 18.42 6 32.5c0 10.14 5.92 18.9 14.49 23.01C18.89 52.18 18 48.45 18 44.5Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M31.5 63.5c17.12 0 31-13.88 31-31 0-17.12-13.88-31-31-31-17.12 0-31 13.88-31 31 0 17.12 13.88 31 31 31Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M42.5 24v-.66a5.84 5.84 0 0 0-5.84-5.84H26.35a5.84 5.84 0 0 0-5.84 5.84c0 2.49 1.57 4.7 3.92 5.52l14.37 5c2.82.98 4.71 3.64 4.71 6.62 0 3.87-3.14 7.01-7.01 7.01h-9.49c-4.14 0-7.5-3.36-7.5-7.5M31.5 11v43'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgDollarCoinWhite64.displayName = 'SvgDollarCoinWhite64'
+export default SvgDollarCoinWhite64

package/src/Pictogram/FlagFlagsBlue64.tsx

@@ -0,0 +1,61 @@
+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 SvgFlagFlagsBlue64 = forwardRef(function SvgFlagFlagsBlue64(
+  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='M35 50h-9.17v-8.52H35V14h17.47L35 50ZM24 41H3V5h4l17 36Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M35 13.5h27.2L53.1 32l9.1 18.5H25.5V42M34.5 41.5l-9 9'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M3 41.5h31.5v-37H3M2.5 0v64'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgFlagFlagsBlue64.displayName = 'SvgFlagFlagsBlue64'
+export default SvgFlagFlagsBlue64