@scaleflex/icons-tw 0.0.109 → 0.0.120

package/src/arrow-bottom.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const ArrowBottom = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 11 12'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M10.8468 3.13984C11.0457 3.33138 11.0517 3.64791 10.8602 3.84682L6.04534 8.84682C5.95332 8.94238 5.82709 8.99746 5.69445 8.99991C5.5618 9.00237 5.43362 8.95201 5.33812 8.85992L0.152931 3.85992C-0.0458479 3.66824 -0.0516033 3.35171 0.140078 3.15293C0.331758 2.95415 0.648288 2.9484 0.847067 3.14008L5.67208 7.79277L10.1398 3.15318C10.3314 2.95427 10.6479 2.9483 10.8468 3.13984Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default ArrowBottom

package/src/arrow.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Arrow = ({ stroke = 'currentColor', size = '0.625rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size} /* TODO: check if we need to set different width as it was:  width={size * (51 / 56)}*/
+    height={size}
+    viewBox='0 0 51 56'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M12.2754 3L37.2754 27.0741L12.2754 53'
+      stroke={stroke}
+      strokeWidth='5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export default Arrow

package/src/censor.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Censor = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 50'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <g clipPath='url(#clip0)'>
+      <path
+        d='M50.2754 25.076C50.2754 29.8718 40.0104 40.1521 25.3323 40.1521C11.0368 40.1521 0.312696 30.0249 0.312696 25.076C0.312696 20.1272 11.0368 10 25.2558 10C40.0869 10 50.2754 20.0507 50.2754 25.076ZM25.3323 12.7448C18.7152 12.7448 13.3174 18.2242 13.3174 25.0812C13.3174 31.933 18.7152 37.4124 25.3323 37.4124C31.9494 37.4124 37.3472 31.933 37.3472 25.0812C37.3472 18.3008 31.9494 12.7448 25.3323 12.7448ZM25.3323 17.2345C21.0722 17.2345 17.654 20.7344 17.654 25.076C17.654 29.4177 21.0773 32.9176 25.3323 32.9176C29.5924 32.9176 33.0106 29.4126 33.0106 25.076C32.9392 20.7344 29.5159 17.2345 25.3323 17.2345Z'
+        fill={color}
+      />
+      <path
+        d='M2.76666 12.0969L49.4591 34.6982C50.1223 35.0196 50.3978 35.8104 50.0764 36.4737L49.4948 37.6726C49.1734 38.3358 48.3775 38.6113 47.7193 38.2899L1.02692 15.6886C0.363679 15.3672 0.0881775 14.5713 0.409596 13.9132L0.99121 12.7193C1.30753 12.0561 2.10342 11.7806 2.76666 12.0969Z'
+        fill={color}
+      />
+    </g>
+    <defs>
+      <rect width='50' height='50' fill='white' transform='translate(0.275391)' />
+    </defs>
+  </svg>
+)
+
+export default Censor

package/src/copy-outline.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const CopyOutline = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 16 16'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M2.33984 12.111V2.04761C2.33984 1.49532 2.78756 1.04761 3.33984 1.04761H10.8182C11.3705 1.04761 11.8182 1.49532 11.8182 2.04761V12.111C11.8182 12.6633 11.3705 13.111 10.8182 13.111H3.33984C2.78756 13.111 2.33984 12.6633 2.33984 12.111ZM3.33984 12.111V2.04761L10.8182 2.04761L10.8182 12.111L3.33984 12.111Z'
+      fill={color}
+    />
+    <path
+      d='M13.66 4.97388C13.66 4.69774 13.4361 4.47388 13.16 4.47388C12.8838 4.47388 12.66 4.69774 12.66 4.97388V13.9523H5.40491C5.12876 13.9523 4.90491 14.1761 4.90491 14.4523C4.90491 14.7284 5.12876 14.9523 5.40491 14.9523H13.16C13.4361 14.9523 13.66 14.7284 13.66 14.4523V4.97388Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default CopyOutline

package/src/cross-outline.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const CrossOutline = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 44 44'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M43.3196 40.0403C44.2253 40.9461 44.2253 42.4146 43.3196 43.3204C42.4138 44.2262 40.9453 44.2262 40.0396 43.3204L21.9997 25.2802L3.95952 43.3207C3.05376 44.2264 1.58525 44.2264 0.679494 43.3207C-0.226258 42.4149 -0.226258 40.9464 0.679495 40.0406L18.7197 22.0001L0.679313 3.95941C-0.226437 3.05364 -0.226439 1.5851 0.679314 0.679328C1.58507 -0.226442 3.05358 -0.226443 3.95934 0.679328L21.9997 18.72L40.0398 0.679604C40.9455 -0.226163 42.414 -0.226165 43.3198 0.679605C44.2255 1.58537 44.2255 3.05392 43.3198 3.95969L25.2797 22.0001L43.3196 40.0403Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default CrossOutline

package/src/download.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Download = ({ color = 'currentColor', size = '1rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 50'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M36.8805 21.0001C36.6807 20.472 36.0813 20.0494 35.4818 20.0494H30.4468V1.58463C30.4468 0.739559 29.7475 0.00012207 28.9483 0.00012207H21.0361C20.2369 0.00012207 19.5376 0.739559 19.5376 1.58463V20.1551H14.5025C13.9031 20.1551 13.4036 20.472 13.1039 21.1058C12.9041 21.6339 13.004 22.3734 13.3037 22.7959L23.7934 35.4719C24.0931 35.7888 24.4927 36.0001 24.8923 36.0001C25.2919 36.0001 25.6915 35.7888 25.9912 35.4719L36.4809 22.7959C37.0803 22.2677 37.0803 21.6339 36.8805 21.0001Z'
+      fill={color}
+    />
+    <path
+      d='M43.7343 34.0001V43.6001H6.26566V34.0001H0V46.8001C0 48.6135 1.35756 50.0001 3.13283 50.0001H46.8672C48.6424 50.0001 50 48.6135 50 46.8001V34.0001H43.7343Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Download

package/src/eye-closed.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const EyeClosed = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 44 44'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M36.2553 6.05501C36.5966 5.71376 37.1514 5.71376 37.4926 6.05501C37.8339 6.39626 37.8339 6.95103 37.4926 7.29228L32.3765 12.4084C38.3601 15.8067 42.6046 20.7607 42.7917 20.9825C43.0682 21.3097 43.0699 21.7874 42.7936 22.113C42.3893 22.5908 32.7818 33.7978 22.0001 33.7978C18.9909 33.7978 15.9678 33.1203 13.0065 31.7785L7.74272 37.0423C7.57292 37.2121 7.34897 37.2978 7.12495 37.2978C6.90092 37.2978 6.67698 37.212 6.50545 37.0423C6.1642 36.701 6.1642 36.1462 6.50545 35.805L17.0426 25.2678C17.0453 25.265 17.0481 25.2622 17.0509 25.2595C17.0531 25.2573 17.0553 25.2551 17.0575 25.2529L25.7063 16.6041C25.7081 16.6023 25.7098 16.6005 25.7116 16.5987C25.7134 16.5969 25.7152 16.5952 25.717 16.5934L30.2895 12.0208C30.3028 12.0067 30.3164 11.9931 30.3304 11.9799L36.2553 6.05501ZM31.0895 13.6954L27.5301 17.2548C28.4835 18.476 28.9998 19.9721 28.9998 21.5478C28.9998 25.4083 25.8603 28.5478 21.9999 28.5478C20.4242 28.5478 18.9281 28.0314 17.7069 27.078L14.3353 30.4497C16.8728 31.5113 19.445 32.0478 22 32.0478C30.6537 32.0478 38.863 23.8071 40.9489 21.5478C39.6267 20.1195 35.855 16.3016 31.0895 13.6954ZM18.9574 25.8276C19.8392 26.458 20.8929 26.7977 21.9999 26.7977C24.8943 26.7977 27.2499 24.4422 27.2499 21.5477C27.2499 20.4409 26.9092 19.3873 26.2793 18.5056L18.9574 25.8276Z'
+      fill={color}
+    />
+    <path
+      d='M27.7418 10.3057C25.7504 9.63545 23.8184 9.29773 22.0001 9.29773C11.2183 9.29773 1.61084 20.5047 1.20659 20.9825C0.951064 21.2835 0.930064 21.721 1.15762 22.0482C1.27837 22.2215 4.17111 26.3287 9.18485 29.659C9.33358 29.7587 9.49985 29.806 9.66785 29.806C9.94963 29.806 10.2279 29.6695 10.3959 29.4122C10.6636 29.0115 10.5534 28.4672 10.1509 28.2012C6.46889 25.753 3.94889 22.7973 3.00561 21.595C5.01989 19.4075 13.2834 11.0478 22.0001 11.0478C23.6293 11.0478 25.3741 11.3558 27.1835 11.963C27.642 12.1275 28.139 11.8738 28.2913 11.4135C28.4453 10.955 28.2003 10.4598 27.7418 10.3057Z'
+      fill={color}
+    />
+    <path
+      d='M23.2197 14.6685C22.8224 14.5985 22.4164 14.5477 22 14.5477C18.1395 14.5477 15 17.6872 15 21.5477C15 21.9642 15.0508 22.3702 15.1225 22.7674C15.1977 23.1909 15.567 23.4902 15.9817 23.4902C16.0325 23.4902 16.0832 23.4867 16.1357 23.4762C16.6099 23.3922 16.9285 22.9371 16.8445 22.4629C16.7902 22.1654 16.75 21.8627 16.75 21.5477C16.75 18.6532 19.1055 16.2977 22 16.2977C22.315 16.2977 22.6177 16.338 22.9152 16.3905C23.3807 16.485 23.8444 16.1559 23.9284 15.6817C24.0124 15.2075 23.694 14.7525 23.2197 14.6685Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default EyeClosed

package/src/eye-open.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const EyeOpen = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 32'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M25 31.625C8.64336 31.625 0.533984 17.3656 0.196875 16.759C-0.065625 16.2867 -0.065625 15.7129 0.196875 15.2406C0.533984 14.6344 8.64336 0.375 25 0.375C41.3566 0.375 49.466 14.6344 49.8031 15.241C50.0656 15.7133 50.0656 16.2871 49.8031 16.7594C49.466 17.3656 41.3566 31.625 25 31.625ZM3.40117 15.9977C5.25977 18.8145 12.557 28.5 25 28.5C37.4824 28.5 44.7473 18.8223 46.5988 16.0023C44.7402 13.1855 37.443 3.5 25 3.5C12.5176 3.5 5.25273 13.1777 3.40117 15.9977ZM25 25.375C19.8305 25.375 15.625 21.1695 15.625 16C15.625 10.8305 19.8305 6.625 25 6.625C30.1695 6.625 34.375 10.8305 34.375 16C34.375 21.1695 30.1695 25.375 25 25.375ZM25 9.75C21.5539 9.75 18.75 12.5539 18.75 16C18.75 19.4461 21.5539 22.25 25 22.25C28.4461 22.25 31.25 19.4461 31.25 16C31.25 12.5539 28.4461 9.75 25 9.75Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default EyeOpen

package/src/heart-icon.tsx

@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const HeartIcon = ({ color = 'currentColor', ...rest }: IconProps): ReactElement => (
+  <svg viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' {...rest}>
+    <path
+      d='M36.9937 3C34.2805 3 31.793 3.85977 29.6004 5.55547C27.4983 7.18115 26.0988 9.25176 25.2749 10.7574C24.451 9.25166 23.0515 7.18115 20.9494 5.55547C18.7568 3.85977 16.2693 3 13.5562 3C5.98467 3 0.274902 9.19307 0.274902 17.4057C0.274902 26.2781 7.39824 32.3485 18.182 41.5383C20.0133 43.0989 22.089 44.8679 24.2464 46.7545C24.5308 47.0035 24.896 47.1406 25.2749 47.1406C25.6538 47.1406 26.019 47.0035 26.3034 46.7546C28.461 44.8677 30.5366 43.0988 32.3689 41.5373C43.1516 32.3485 50.2749 26.2781 50.2749 17.4057C50.2749 9.19307 44.5651 3 36.9937 3Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default HeartIcon

package/src/icon.props.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, Ref } from 'react'
+
+import type { StylableComponent } from './utils/types'
+
+export interface IconProps extends HTMLAttributes<SVGSVGElement>, StylableComponent {
+  size?: string
+  width?: string
+  height?: string
+  color?: string
+  color2?: string
+  stroke?: string
+  stroke2?: string
+  viewBox?: string
+  className?: string
+  ref?: Ref<SVGSVGElement>
+}

package/src/info-outline.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const InfoOutline = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 50'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M25 50C11.2033 50 0 38.7967 0 25C0 11.2033 11.2033 0 25 0C38.7967 0 50 11.2033 50 25C50 38.7967 38.6929 50 25 50ZM25 3.52697C13.1743 3.52697 3.63071 13.1743 3.63071 24.8963C3.63071 36.6183 13.278 46.2656 25 46.2656C36.8257 46.2656 46.3693 36.6183 46.3693 24.8963C46.3693 13.1743 36.8257 3.52697 25 3.52697Z'
+      fill={color}
+    />
+    <path
+      d='M28.3755 13.125C28.3755 11.3992 26.9765 10 25.2505 10C23.5245 10 22.1255 11.3992 22.1255 13.125C22.1255 14.8516 23.5245 16.25 25.2505 16.25C26.9765 16.25 28.3755 14.8516 28.3755 13.125Z'
+      fill={color}
+    />
+    <path
+      d='M20.563 38.5H29.938C30.8009 38.5 31.5005 37.8012 31.5005 36.9375C31.5005 36.0746 30.8009 35.375 29.938 35.375H28.3755V20.9375C28.3755 20.0746 27.6759 19.375 26.813 19.375H20.563C19.7001 19.375 19.0005 20.0746 19.0005 20.9375C19.0005 21.8012 19.7001 22.5 20.563 22.5H22.1255V35.375H20.563C19.7001 35.375 19.0005 36.0746 19.0005 36.9375C19.0005 37.8012 19.7001 38.5 20.563 38.5Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default InfoOutline

package/src/intermediate.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Intermediate = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 14 14'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M0.75 7.00006C0.75 6.48229 1.16973 6.06256 1.6875 6.06256H12.3125C12.8303 6.06256 13.25 6.48229 13.25 7.00006C13.25 7.51783 12.8303 7.93756 12.3125 7.93756H1.6875C1.16973 7.93756 0.75 7.51783 0.75 7.00006Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Intermediate

package/src/search.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Search = ({ color = 'currentColor', ref, ...rest }: IconProps): JSX.Element => (
+  <svg ref={ref} viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' {...rest}>
+    <path
+      d='M44.8536 47.6383L32.947 37.4596C28.9393 40.6797 23.7488 42.2147 18.6058 41.6246C8.02873 40.411 0.369785 30.9133 1.56681 20.495C2.76383 10.0766 12.3775 2.56074 22.9546 3.77433C33.5317 4.98792 41.1906 14.4856 39.9936 24.904C39.5873 28.4405 38.2325 31.6745 36.0484 34.426L48.2992 45.0316C48.6435 45.4584 48.7716 46.0542 48.7057 46.6277C48.6398 47.2011 48.3909 47.6568 47.9478 48.0902C47.5157 48.428 46.9115 48.5523 46.3293 48.4855C45.7471 48.4187 45.1868 48.1607 44.8536 47.6383ZM5.54534 20.9514C4.6009 29.1715 10.6248 36.6415 18.97 37.599C27.3152 38.5566 34.8766 32.6452 35.821 24.4252C36.7654 16.2052 30.7415 8.73513 22.3963 7.77762C14.1591 6.73566 6.48978 12.7314 5.54534 20.9514Z'
+      fill={color}
+      stroke={color}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+export default Search

package/src/sparkle-icon.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const SparkleIcon = ({ color = 'currentColor', ...rest }: IconProps): ReactElement => (
+  <svg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' {...rest}>
+    <path
+      d='M5.8888 0.0110635C5.98021 0.0261177 6.06839 0.0562677 6.1503 0.0995714L6.26797 0.173999L6.37157 0.267535C6.43543 0.334841 6.48832 0.411726 6.52746 0.495846L6.57574 0.626596L6.57876 0.638665L7.39343 3.7978L7.43567 3.9034C7.45452 3.9364 7.47797 3.96681 7.50507 3.99392C7.55921 4.04806 7.62708 4.08638 7.7012 4.10556L10.8603 4.92024L10.8704 4.92225L11.0021 4.97053C11.0866 5.00954 11.1638 5.06252 11.2315 5.12642L11.325 5.23002L11.4004 5.34769C11.4658 5.47095 11.5 5.60906 11.5 5.75C11.5 5.93784 11.4388 6.12054 11.325 6.26998C11.2112 6.41943 11.0515 6.5278 10.8704 6.57775L10.8603 6.57976L7.7012 7.39444C7.62708 7.41362 7.55921 7.45194 7.50507 7.50608C7.47797 7.53319 7.45452 7.5636 7.43567 7.5966L7.39343 7.7022L6.57876 10.8613L6.57574 10.8734C6.52529 11.0537 6.41708 11.2128 6.26797 11.326C6.11879 11.4392 5.93624 11.5 5.74899 11.5C5.56169 11.5 5.37924 11.4392 5.23002 11.326C5.08079 11.2128 4.97273 11.0538 4.92225 10.8734L4.91923 10.8613L4.10456 7.7022C4.08538 7.62806 4.04707 7.56023 3.99292 7.50608C3.9658 7.47897 3.9354 7.45552 3.9024 7.43668L3.79679 7.39444L0.63766 6.57976L0.623579 6.57574C0.443915 6.52474 0.285591 6.41597 0.172993 6.26697C0.0887356 6.15533 0.033463 6.02546 0.0110635 5.8888L0 5.75L0.0110635 5.6112C0.0334629 5.47454 0.0887356 5.34466 0.172993 5.23303L0.265524 5.12843C0.365921 5.03275 0.488832 4.96251 0.623579 4.92426L0.63766 4.92024L3.79679 4.10556L3.9024 4.06231C3.93535 4.04349 3.96584 4.01998 3.99292 3.99292C4.04688 3.93891 4.08534 3.87167 4.10456 3.7978L4.91923 0.638665L4.92225 0.626596L5.50157 0.788525L4.92325 0.626596C4.97375 0.446277 5.08183 0.287171 5.23102 0.173999L5.3487 0.0995714C5.47153 0.0346761 5.60868 5.60275e-05 5.74899 0L5.8888 0.0110635ZM5.26823 4.09752V4.09852C5.19528 4.38036 5.04872 4.63801 4.84279 4.8438C4.68834 4.99815 4.50464 5.11919 4.3037 5.20085L4.09651 5.26924L2.23181 5.75L4.09651 6.23076L4.3037 6.29915C4.50467 6.38087 4.68835 6.50176 4.84279 6.6562C5.04884 6.86225 5.19544 7.12032 5.26823 7.40248L5.74899 9.26618L6.22975 7.40248L6.29815 7.19529C6.37987 6.99434 6.50077 6.81064 6.65519 6.6562C6.86125 6.45015 7.11931 6.30355 7.40148 6.23076L9.26517 5.75L7.40148 5.26924C7.11931 5.19645 6.86125 5.04985 6.65519 4.8438C6.50077 4.68936 6.37987 4.50566 6.29815 4.3047L6.22975 4.09752L5.74899 2.23281L5.26823 4.09752Z'
+      fill={color}
+    />
+    <path
+      d='M11.1177 8.04317C11.1842 8.05403 11.2485 8.07576 11.308 8.10724L11.3924 8.16161L11.4682 8.22956C11.5143 8.27823 11.5525 8.33381 11.5808 8.3946L11.6157 8.48974L11.6186 8.49945L12.0109 10.0236L13.536 10.4168L13.5438 10.4187L13.6389 10.4537C13.7 10.4819 13.7559 10.5201 13.8049 10.5663L13.8729 10.641L13.9272 10.7265C13.9746 10.8158 14 10.9156 14 11.0177C14 11.1537 13.9552 11.2862 13.8729 11.3944C13.7905 11.5025 13.6748 11.5806 13.5438 11.6167L13.536 11.6186L12.0109 12.0118L11.6177 13.536L11.6157 13.5467C11.5791 13.6771 11.5004 13.792 11.3924 13.8738C11.2845 13.9557 11.1523 14 11.0167 14C10.8814 13.9999 10.7499 13.9556 10.642 13.8738C10.534 13.7919 10.4553 13.6763 10.4187 13.5457L10.4158 13.536L10.0236 12.0118L8.49847 11.6186L8.48683 11.6157C8.35682 11.5788 8.24212 11.5003 8.16063 11.3924C8.09944 11.3114 8.05934 11.2169 8.04317 11.1177L8.0354 11.0177L8.04317 10.9177C8.05934 10.8185 8.09944 10.724 8.16063 10.643L8.22762 10.5682C8.30033 10.4988 8.38917 10.4474 8.48683 10.4197L8.49847 10.4168L10.0236 10.0236L10.4168 8.49945L10.4187 8.48877C10.4553 8.35835 10.5341 8.24347 10.642 8.16161L10.7274 8.10724C10.8164 8.06031 10.9162 8.0354 11.0177 8.0354L11.1177 8.04317ZM10.9857 10.2721C10.9413 10.4439 10.8519 10.601 10.7265 10.7265C10.6322 10.8207 10.52 10.8951 10.3974 10.9449L10.2712 10.9857L10.1488 11.0167L10.2712 11.0488L10.3974 11.0905C10.5201 11.1404 10.6322 11.2147 10.7265 11.309C10.8519 11.4345 10.9413 11.5914 10.9857 11.7633L11.0167 11.8856L11.0488 11.7633L11.0905 11.6371C11.1403 11.5147 11.214 11.403 11.308 11.309C11.4336 11.1833 11.5913 11.0932 11.7633 11.0488L11.8837 11.0177L11.7633 10.9867C11.5913 10.9423 11.4336 10.8521 11.308 10.7265C11.214 10.6324 11.1403 10.5207 11.0905 10.3983L11.0488 10.2721L11.0167 10.1488L10.9857 10.2721Z'
+      fill={color}
+    />
+  </svg>
+)

package/src/spinner.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Spinner = ({ color = 'currentColor', ...rest }: IconProps): ReactElement => (
+  <svg viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg' {...rest}>
+    <path
+      d='M41.3465 44.355C33.5656 50.7844 22.9687 51.6268 14.3708 47.3665L17.8949 44.4545C24.754 47.117 32.7424 46.1093 38.709 41.1792C44.6755 36.249 47.1546 28.6071 45.8085 21.3893L49.3325 18.4773C51.9291 27.6967 49.1274 37.9256 41.3465 44.355Z'
+      fill={color}
+    />
+    <path
+      d='M36.1749 2.63356L32.6509 5.54555C25.821 2.91828 17.838 3.86187 11.8366 8.82088C5.87009 13.7511 3.42028 21.4282 4.7372 28.6107L1.21311 31.5227C-1.38344 22.3034 1.45314 12.0456 9.19916 5.64502C16.9801 -0.784402 27.5768 -1.62682 36.1749 2.63356Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Spinner

package/src/success.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Success = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 50'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50ZM38.0381 19.0686C38.9264 18.1139 38.8725 16.6199 37.9177 15.7317C36.963 14.8435 35.469 14.8974 34.5808 15.8521L22.2804 29.0733L15.4192 21.6984C14.531 20.7437 13.037 20.6898 12.0823 21.578C11.1275 22.4662 11.0736 23.9602 11.9618 24.915L20.5517 34.1479C20.9984 34.628 21.6246 34.9008 22.2804 34.9008C22.9362 34.9008 23.5624 34.628 24.0091 34.1479L38.0381 19.0686Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Success

package/src/tick.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Tick = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 14 14'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M12.9783 2.30184C12.7972 2.12074 12.586 2 12.3143 2C12.0728 2 11.8314 2.09055 11.6503 2.30184L4.73816 9.84779L2.29327 7.34254C2.11217 7.16143 1.8707 7.07088 1.62923 7.07088C1.38776 7.07088 1.14629 7.19162 0.995367 7.37272C0.663345 7.76511 0.663345 8.36879 1.02555 8.73099L4.13448 11.9003C4.31559 12.0814 4.52687 12.1719 4.76835 12.1719C5.00982 12.1719 5.25129 12.0814 5.43239 11.8701L12.9783 3.62993C13.3406 3.2979 13.3406 2.66404 12.9783 2.30184Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Tick

package/src/upload.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import type { IconProps } from './icon.props'
+
+export const Upload = ({ color = 'currentColor', size = '0.875rem', ref, ...rest }: IconProps): JSX.Element => (
+  <svg
+    ref={ref}
+    width={size}
+    height={size}
+    viewBox='0 0 50 50'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...rest}
+  >
+    <path
+      d='M13.1195 15.0001C13.3193 15.5283 13.9187 15.9508 14.5181 15.9508H19.5531V34.4156C19.5531 35.2607 20.2525 36.0001 21.0517 36.0001H28.9639C29.7631 36.0001 30.4624 35.2607 30.4624 34.4156V15.8452H35.4974C36.0968 15.8452 36.5963 15.5283 36.8961 14.8945C37.0959 14.3663 36.9959 13.6269 36.6962 13.2043L26.2066 0.528297C25.9069 0.211396 25.5073 0.00012207 25.1077 0.00012207C24.7081 0.00012207 24.3085 0.211396 24.0088 0.528297L13.5191 13.2043C12.9197 13.7325 12.9197 14.3663 13.1195 15.0001Z'
+      fill={color}
+    />
+    <path
+      d='M43.7343 34.0001V43.6001H6.26566V34.0001H0V46.8001C0 48.6135 1.35756 50.0001 3.13283 50.0001H46.8672C48.6424 50.0001 50 48.6135 50 46.8001V34.0001H43.7343Z'
+      fill={color}
+    />
+  </svg>
+)
+
+export default Upload

package/src/utils/functions/index.ts

@@ -0,0 +1 @@
+// export * from './intrinsic-component';

package/src/utils/functions/intrinsic-component.ts

@@ -0,0 +1,29 @@
+// DEPRECATED after React upgrade to v19
+// import {
+//   forwardRef,
+//   ForwardRefExoticComponent,
+//   ForwardRefRenderFunction,
+//   MutableRefObject,
+//   PropsWithoutRef,
+//   ReactElement,
+//   RefAttributes,
+// } from 'react';
+
+// interface RenderFunction<P, E>
+//   extends Pick<ForwardRefRenderFunction<E, P>, 'defaultProps' | 'displayName' | 'propTypes'> {
+//   (props: P, ref: ((instance: E | null) => void) | MutableRefObject<E | null> | null): ReactElement | null;
+// }
+
+// /**
+//  * Wrapper around React's `forwardRef` function, which adds a `displayName` to each component
+//  * created using it
+//  */
+// export function intrinsicComponent<P = Record<string, unknown>, E = HTMLElement>(
+//   render: RenderFunction<P, E>,
+//   displayName?: string
+// ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>> {
+//   const component = forwardRef<E, P>(render);
+//   component.displayName = displayName || render.name;
+
+//   return component;
+// }

package/src/utils/types/index.ts

@@ -0,0 +1,2 @@
+export type { StylableComponent } from './stylable-component'
+export type { IntrinsicComponent } from './intrinsic-component'

package/src/utils/types/intrinsic-component.d.ts

@@ -0,0 +1 @@
+export type IntrinsicComponent<P> = Omit<P, 'style' | 'children'>

package/src/utils/types/stylable-component.d.ts

@@ -0,0 +1,7 @@
+export type StylableComponent<S extends string | string[] = undefined> = (S extends undefined
+  ? {}
+  : {
+      customProperties?: Partial<Record<S extends string ? S : S[number], string | undefined>>
+    }) & {
+  className?: string
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "lib",
+    "tsBuildInfoFile": "tsconfig.tsbuildinfo"
+  },
+  "references": []
+}

package/tsconfig.json

@@ -1,22 +1,4 @@
 {
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "esnext",
-    "moduleResolution": "node",
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "jsx": "react",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
-  }
-}
+  "extends": "../../tsconfig.json",
+  "exclude": ["lib"]
+}