npm - @toptal/picasso-pictograms - Versions diffs - 5.4.0 → 5.5.0 - Mend

@toptal/picasso-pictograms 5.4.0 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (654) hide show

package/src/Pictogram/BudgetFinancialBlue64.tsx ADDED Viewed

@@ -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 SvgBudgetFinancialBlue64 = forwardRef(function SvgBudgetFinancialBlue64(
+  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='M37.91 34.23c-.23-.64-.57-1.21-1.01-1.73-.44-.51-.99-.96-1.64-1.33-.65-.37-1.4-.65-2.25-.81l-2.62-.53c-.69-.15-1.2-.43-1.54-.83-.34-.4-.5-.88-.5-1.42 0-.34.07-.66.21-.95.14-.3.34-.57.6-.8.26-.23.56-.42.93-.56.36-.14.76-.21 1.21-.21.6 0 1.11.09 1.52.28.41.19.75.42 1.02.7.26.28.46.59.6.91.13.33.23.63.28.91L38 26.79c-.11-.56-.3-1.15-.6-1.76-.29-.61-.7-1.17-1.23-1.67-.53-.51-1.2-.92-2-1.25-.35-.14-.74-.25-1.16-.33V19h-3v2.74c-.43.08-.85.2-1.26.36-.79.32-1.49.76-2.09 1.32a6.25 6.25 0 0 0-1.42 1.98c-.34.76-.52 1.58-.52 2.46 0 1.52.45 2.77 1.34 3.75.89.98 2.09 1.63 3.59 1.95l2.62.56c.74.15 1.31.44 1.7.86.39.42.58.92.58 1.5 0 .71-.26 1.3-.78 1.76-.52.46-1.28.69-2.26.69-.67 0-1.25-.1-1.75-.31-.49-.21-.91-.48-1.24-.83-.34-.35-.6-.74-.78-1.19-.19-.45-.3-.92-.33-1.4l-3.39.95c.07.71.26 1.44.58 2.18.32.74.78 1.41 1.39 2.01.61.6 1.36 1.09 2.26 1.47.52.22 1.12.37 1.76.47v2.73h3v-2.75c.49-.09.95-.22 1.37-.4.84-.36 1.55-.82 2.12-1.39.57-.57 1.01-1.23 1.31-1.97a5.954 5.954 0 0 0 .11-4.25l-.01-.02ZM12 59H1v5h11v-5ZM62.96 59h-11v5h11v-5ZM29 55H18v9h11v-9ZM46 55H35v9h11v-9Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M12.5 64V35.5H.5V64M29.5 16V.5h-12V64M29.5 64V48M34.5 48v16M46.5 64V.5h-12V16M63.46 64V35.5h-12V64'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M38.41 33.73c-.23-.64-.57-1.21-1.01-1.73-.44-.51-.99-.96-1.64-1.33-.65-.37-1.4-.65-2.25-.81l-2.62-.53c-.69-.15-1.2-.43-1.54-.83-.34-.4-.5-.88-.5-1.42 0-.34.07-.66.21-.95.14-.3.34-.57.6-.8.26-.23.56-.42.93-.56.36-.14.76-.21 1.21-.21.6 0 1.11.09 1.52.28.41.19.75.42 1.02.7.26.28.46.59.6.91.13.33.23.63.28.91l3.28-1.07c-.11-.56-.3-1.15-.6-1.76-.29-.61-.7-1.17-1.23-1.67-.53-.51-1.2-.92-2-1.25-.35-.14-.74-.25-1.16-.33V18.5h-3v2.74c-.43.08-.85.2-1.26.36-.79.32-1.49.76-2.09 1.32a6.25 6.25 0 0 0-1.42 1.98c-.34.76-.52 1.58-.52 2.46 0 1.52.45 2.77 1.34 3.75.89.98 2.09 1.63 3.59 1.95l2.62.56c.74.15 1.31.44 1.7.86.39.42.58.92.58 1.5 0 .71-.26 1.3-.78 1.76-.52.46-1.28.69-2.26.69-.67 0-1.25-.1-1.75-.31-.49-.21-.91-.48-1.24-.83-.34-.35-.6-.74-.78-1.19-.19-.45-.3-.92-.33-1.4l-3.39.95c.07.71.26 1.44.58 2.18.32.74.78 1.41 1.39 2.01.61.6 1.36 1.09 2.26 1.47.52.22 1.12.37 1.76.47v2.73h3v-2.75c.49-.09.95-.22 1.37-.4.84-.36 1.55-.82 2.12-1.39.57-.57 1.01-1.23 1.31-1.97a5.954 5.954 0 0 0 .11-4.25l-.01-.02Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+SvgBudgetFinancialBlue64.displayName = 'SvgBudgetFinancialBlue64'
+export default SvgBudgetFinancialBlue64

package/src/Pictogram/BudgetFinancialWhite64.tsx ADDED Viewed

@@ -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 SvgBudgetFinancialWhite64 = forwardRef(function SvgBudgetFinancialWhite64(
+  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='M38.41 33.73c-.23-.64-.57-1.21-1.01-1.73-.44-.51-.99-.96-1.64-1.33-.65-.37-1.4-.65-2.25-.81l-2.62-.53c-.69-.15-1.2-.43-1.54-.83-.34-.4-.5-.88-.5-1.42 0-.34.07-.66.21-.95.14-.3.34-.57.6-.8.26-.23.56-.42.93-.56.36-.14.76-.21 1.21-.21.6 0 1.11.09 1.52.28.41.19.75.42 1.02.7.26.28.46.59.6.91.13.33.23.63.28.91l3.28-1.07c-.11-.56-.3-1.15-.6-1.76-.29-.61-.7-1.17-1.23-1.67-.53-.51-1.2-.92-2-1.25-.35-.14-.74-.25-1.16-.33V18.5h-3v2.74c-.43.08-.85.2-1.26.36-.79.32-1.49.76-2.09 1.32a6.25 6.25 0 0 0-1.42 1.98c-.34.76-.52 1.58-.52 2.46 0 1.52.45 2.77 1.34 3.75.89.98 2.09 1.63 3.59 1.95l2.62.56c.74.15 1.31.44 1.7.86.39.42.58.92.58 1.5 0 .71-.26 1.3-.78 1.76-.52.46-1.28.69-2.26.69-.67 0-1.25-.1-1.75-.31-.49-.21-.91-.48-1.24-.83-.34-.35-.6-.74-.78-1.19-.19-.45-.3-.92-.33-1.4l-3.39.95c.07.71.26 1.44.58 2.18.32.74.78 1.41 1.39 2.01.61.6 1.36 1.09 2.26 1.47.52.22 1.12.37 1.76.47v2.73h3v-2.75c.49-.09.95-.22 1.37-.4.84-.36 1.55-.82 2.12-1.39.57-.57 1.01-1.23 1.31-1.97a5.954 5.954 0 0 0 .11-4.25l-.01-.02ZM12 59H1v5h11v-5ZM62.96 59h-11v5h11v-5ZM29 55H18v9h11v-9ZM46 55H35v9h11v-9Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M12.5 64V35.5H.5V64M29.5 16V.5h-12V64M29.5 64V48M34.5 48v16M46.5 64V.5h-12V16M63.46 64V35.5h-12V64'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M38.41 33.73c-.23-.64-.57-1.21-1.01-1.73-.44-.51-.99-.96-1.64-1.33-.65-.37-1.4-.65-2.25-.81l-2.62-.53c-.69-.15-1.2-.43-1.54-.83-.34-.4-.5-.88-.5-1.42 0-.34.07-.66.21-.95.14-.3.34-.57.6-.8.26-.23.56-.42.93-.56.36-.14.76-.21 1.21-.21.6 0 1.11.09 1.52.28.41.19.75.42 1.02.7.26.28.46.59.6.91.13.33.23.63.28.91l3.28-1.07c-.11-.56-.3-1.15-.6-1.76-.29-.61-.7-1.17-1.23-1.67-.53-.51-1.2-.92-2-1.25-.35-.14-.74-.25-1.16-.33V18.5h-3v2.74c-.43.08-.85.2-1.26.36-.79.32-1.49.76-2.09 1.32a6.25 6.25 0 0 0-1.42 1.98c-.34.76-.52 1.58-.52 2.46 0 1.52.45 2.77 1.34 3.75.89.98 2.09 1.63 3.59 1.95l2.62.56c.74.15 1.31.44 1.7.86.39.42.58.92.58 1.5 0 .71-.26 1.3-.78 1.76-.52.46-1.28.69-2.26.69-.67 0-1.25-.1-1.75-.31-.49-.21-.91-.48-1.24-.83-.34-.35-.6-.74-.78-1.19-.19-.45-.3-.92-.33-1.4l-3.39.95c.07.71.26 1.44.58 2.18.32.74.78 1.41 1.39 2.01.61.6 1.36 1.09 2.26 1.47.52.22 1.12.37 1.76.47v2.73h3v-2.75c.49-.09.95-.22 1.37-.4.84-.36 1.55-.82 2.12-1.39.57-.57 1.01-1.23 1.31-1.97a5.954 5.954 0 0 0 .11-4.25l-.01-.02Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+SvgBudgetFinancialWhite64.displayName = 'SvgBudgetFinancialWhite64'
+export default SvgBudgetFinancialWhite64

package/src/Pictogram/CalendarDateAcceptedBlue64.tsx ADDED Viewed

@@ -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 SvgCalendarDateAcceptedBlue64 = forwardRef(
+  function SvgCalendarDateAcceptedBlue64(
+    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
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M62.5 6.5H.5v52h62v-52ZM13 63.5h37M13.5 2v9M31.5 2v9M49.5 2v9'
+          />
+          <path
+            fill='#183A9C'
+            d='M62 7H1v7h61V7ZM50 59H13v4h37v-4Z'
+            opacity={0.15}
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M11 22.5h41M11 31.5h16M11 40.5h16M11 49.5h16M51.5 31.5h-18v18h18v-18Z'
+          />
+          <path stroke='#204ECD' strokeMiterlimit={10} d='m38 40 3 3 6-6' />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+SvgCalendarDateAcceptedBlue64.displayName = 'SvgCalendarDateAcceptedBlue64'
+export default SvgCalendarDateAcceptedBlue64

package/src/Pictogram/CalendarDateAcceptedWhite64.tsx ADDED Viewed

@@ -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 SvgCalendarDateAcceptedWhite64 = forwardRef(
+  function SvgCalendarDateAcceptedWhite64(
+    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
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M62.5 6.5H.5v52h62v-52ZM13 63.5h37M13.5 2v9M31.5 2v9M49.5 2v9'
+          />
+          <path
+            fill='#000'
+            d='M62 7H1v7h61V7ZM50 59H13v4h37v-4Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M11 22.5h41M11 31.5h16M11 40.5h16M11 49.5h16M51.5 31.5h-18v18h18v-18Z'
+          />
+          <path stroke='#fff' strokeMiterlimit={10} d='m38 40 3 3 6-6' />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+SvgCalendarDateAcceptedWhite64.displayName = 'SvgCalendarDateAcceptedWhite64'
+export default SvgCalendarDateAcceptedWhite64

package/src/Pictogram/CalendarDateAvailableBlue64.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+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 SvgCalendarDateAvailableBlue64 = forwardRef(
+  function SvgCalendarDateAvailableBlue64(
+    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='m36 47 3-3 4 4 9-9.13L55 42 43 54l-7-7Z'
+            opacity={0.15}
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='m36 47 3-3 4 4 9-9.13L55 42 43 54l-7-7Z'
+          />
+          <path
+            fill='#183A9C'
+            d='M27.68 45.35c0 3.99 1.33 7.68 3.56 10.65H9.93l20.19-20.29s-2.44 3.49-2.44 9.64ZM53.5 6H47v6h-4V6H14v6h-4V6H3.5A2.5 2.5 0 0 0 1 8.5V18h55V8.5A2.5 2.5 0 0 0 53.5 6Z'
+            opacity={0.15}
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M31 56.5H3.47A2.97 2.97 0 0 1 .5 53.53V8.47A2.97 2.97 0 0 1 3.47 5.5H10M47 5.5h6.53a2.97 2.97 0 0 1 2.97 2.97V31M14 5.5h29'
+          />
+          <path
+            fill='#204ECD'
+            d='M13 1v10h-2V1h2Zm1-1h-4v12h4V0ZM46 1v10h-2V1h2Zm1-1h-4v12h4V0Z'
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M45.5 63.5c9.941 0 18-8.059 18-18s-8.059-18-18-18-18 8.059-18 18 8.059 18 18 18Z'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+SvgCalendarDateAvailableBlue64.displayName = 'SvgCalendarDateAvailableBlue64'
+export default SvgCalendarDateAvailableBlue64

package/src/Pictogram/CalendarDateAvailableWhite64.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+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 SvgCalendarDateAvailableWhite64 = forwardRef(
+  function SvgCalendarDateAvailableWhite64(
+    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='m36 47 3-3 4 4 9-9.13L55 42 43 54l-7-7Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='m36 47 3-3 4 4 9-9.13L55 42 43 54l-7-7Z'
+          />
+          <path
+            fill='#000'
+            d='M27.68 45.35c0 3.99 1.33 7.68 3.56 10.65H9.93l20.19-20.29s-2.44 3.49-2.44 9.64ZM53.5 6H47v6h-4V6H14v6h-4V6H3.5A2.5 2.5 0 0 0 1 8.5V18h55V8.5A2.5 2.5 0 0 0 53.5 6Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M31 56.5H3.47A2.97 2.97 0 0 1 .5 53.53V8.47A2.97 2.97 0 0 1 3.47 5.5H10M47 5.5h6.53a2.97 2.97 0 0 1 2.97 2.97V31M14 5.5h29'
+          />
+          <path
+            fill='#fff'
+            d='M13 1v10h-2V1h2Zm1-1h-4v12h4V0ZM46 1v10h-2V1h2Zm1-1h-4v12h4V0Z'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M45.5 63.5c9.941 0 18-8.059 18-18s-8.059-18-18-18-18 8.059-18 18 8.059 18 18 18Z'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+SvgCalendarDateAvailableWhite64.displayName = 'SvgCalendarDateAvailableWhite64'
+export default SvgCalendarDateAvailableWhite64

package/src/Pictogram/CalendarDateBlue64.tsx ADDED Viewed

@@ -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 SvgCalendarDateBlue64 = forwardRef(function SvgCalendarDateBlue64(
+  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='m23.5 34.5 3-3 5 5 5-5 3 3-5 5 5 5-3 3-5-5-5 5-3-3 5-5-5-5ZM59.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='m23.5 34.5 3-3 5 5 5-5 3 3-5 5 5 5-3 3-5-5-5 5-3-3 5-5-5-5Z'
+        />
+        <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'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+SvgCalendarDateBlue64.displayName = 'SvgCalendarDateBlue64'
+export default SvgCalendarDateBlue64

package/src/Pictogram/CalendarDateCheckBlue64.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+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 SvgCalendarDateCheckBlue64 = forwardRef(
+  function SvgCalendarDateCheckBlue64(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}
+      >
+        <path
+          stroke='#204ECF'
+          strokeMiterlimit={10}
+          d='M6.976 54.783C1.578 44.373 1.193 6.976 1.193 6.976H56.71s0 37.398 5.397 47.807H6.976Z'
+        />
+        <path
+          stroke='#204ECF'
+          strokeMiterlimit={10}
+          d='M1.193 6.976v55.518H56.71v-7.71'
+        />
+        <path
+          fill='#183A9E'
+          d='M6.976 54.783c-3.894-7.48-5.166-32.617-5.59-41.831v45.494h55.132v-3.663H6.976Z'
+          opacity={0.15}
+        />
+        <path
+          fill='#183A9E'
+          d='M42.253 27.602 29.145 40.711l-8.097-8.097 2.314-2.313 5.783 5.783L39.94 25.29l2.313 2.313Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECF'
+          strokeMiterlimit={10}
+          d='M42.253 27.602 29.145 40.711l-8.097-8.097 2.314-2.313 5.783 5.783L39.94 25.29l2.313 2.313ZM6.205 5.434c.385-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783M18.928 5.434c.385-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783M31.65 5.434c.386-2.545 1.658-4.241 3.47-4.241 2.12 0 3.856 2.583 3.856 5.783s-1.735 5.783-3.855 5.783M43.988 5.434c.386-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783'
+        />
+      </svg>
+    )
+  }
+)
+SvgCalendarDateCheckBlue64.displayName = 'SvgCalendarDateCheckBlue64'
+export default SvgCalendarDateCheckBlue64

package/src/Pictogram/CalendarDateCheckWhite64.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+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 SvgCalendarDateCheckWhite64 = forwardRef(
+  function SvgCalendarDateCheckWhite64(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}
+      >
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M6.976 54.783C1.578 44.373 1.193 6.976 1.193 6.976H56.71s0 37.398 5.397 47.807H6.976Z'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M1.193 6.976v55.518H56.71v-7.71'
+        />
+        <path
+          fill='#231F20'
+          d='M6.976 54.783c-3.894-7.48-5.166-32.617-5.59-41.831v45.494h55.132v-3.663H6.976Z'
+          opacity={0.3}
+        />
+        <path
+          fill='#231F20'
+          d='M42.253 27.602 29.145 40.711l-8.097-8.097 2.314-2.313 5.783 5.783L39.94 25.29l2.313 2.313Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M42.253 27.602 29.145 40.711l-8.097-8.097 2.314-2.313 5.783 5.783L39.94 25.29l2.313 2.313ZM6.205 5.434c.385-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783M18.928 5.434c.385-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783M31.65 5.434c.386-2.545 1.658-4.241 3.47-4.241 2.12 0 3.856 2.583 3.856 5.783s-1.735 5.783-3.855 5.783M43.988 5.434c.386-2.545 1.658-4.241 3.47-4.241 2.12 0 3.855 2.583 3.855 5.783s-1.735 5.783-3.855 5.783'
+        />
+      </svg>
+    )
+  }
+)
+SvgCalendarDateCheckWhite64.displayName = 'SvgCalendarDateCheckWhite64'
+export default SvgCalendarDateCheckWhite64

package/src/Pictogram/CalendarDateWhite64.tsx ADDED Viewed

@@ -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 SvgCalendarDateWhite64 = forwardRef(function SvgCalendarDateWhite64(
+  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='m23.5 34.5 3-3 5 5 5-5 3 3-5 5 5 5-3 3-5-5-5 5-3-3 5-5-5-5ZM59.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='m23.5 34.5 3-3 5 5 5-5 3 3-5 5 5 5-3 3-5-5-5 5-3-3 5-5-5-5Z'
+        />
+        <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'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+SvgCalendarDateWhite64.displayName = 'SvgCalendarDateWhite64'
+export default SvgCalendarDateWhite64