[TAPS-1825] Add CloseCircle icon (#4871)

* [TAPS-1825] Add CloseCircle icon

* Add CloseCircle icon in 16px and 24px sizes

Author: OleksandrNechai

.changeset/add-close-circle-icon.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-icons': minor
+---
+
+- added CloseCircle icon in 16px and 24px sizes

packages/base/Icons/src/Icon/CloseCircle16.tsx

@@ -0,0 +1,58 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
+
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+  classes?: {
+    root?: string
+  }
+}
+const SvgCloseCircle16 = forwardRef(function SvgCloseCircle16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    classes,
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm0-1A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm2.5-10.207L8 7.293l-2.5-2.5-.707.707 2.5 2.5-2.5 2.5.707.707 2.5-2.5 2.5 2.5.707-.707-2.5-2.5 2.5-2.5-.707-.707Z' />
+    </svg>
+  )
+})
+
+SvgCloseCircle16.displayName = 'SvgCloseCircle16'
+export default SvgCloseCircle16

packages/base/Icons/src/Icon/CloseCircle24.tsx

@@ -0,0 +1,58 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
+
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+  classes?: {
+    root?: string
+  }
+}
+const SvgCloseCircle24 = forwardRef(function SvgCloseCircle24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    classes,
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Zm0-1C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm4.5-15.207-4.5 4.5-4.5-4.5-.707.707 4.5 4.5-4.5 4.5.707.707 4.5-4.5 4.5 4.5.707-.707-4.5-4.5 4.5-4.5-.707-.707Z' />
+    </svg>
+  )
+})
+
+SvgCloseCircle24.displayName = 'SvgCloseCircle24'
+export default SvgCloseCircle24

packages/base/Icons/src/Icon/CloseCircleResponsive.tsx

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

packages/base/Icons/src/Icon/index.ts

@@ -96,6 +96,8 @@ export { default as ChevronRight16 } from './ChevronRight16'
 export { default as ChevronRight24 } from './ChevronRight24'
 export { default as Close16 } from './Close16'
 export { default as Close24 } from './Close24'
+export { default as CloseCircle16 } from './CloseCircle16'
+export { default as CloseCircle24 } from './CloseCircle24'
 export { default as CloseMinor16 } from './CloseMinor16'
 export { default as CloseMinor24 } from './CloseMinor24'
 export { default as Code16 } from './Code16'
@@ -518,6 +520,7 @@ export { default as ChevronResponsive } from './ChevronResponsive'
 export { default as ChevronMinorResponsive } from './ChevronMinorResponsive'
 export { default as ChevronRightResponsive } from './ChevronRightResponsive'
 export { default as CloseResponsive } from './CloseResponsive'
+export { default as CloseCircleResponsive } from './CloseCircleResponsive'
 export { default as CloseMinorResponsive } from './CloseMinorResponsive'
 export { default as CodeResponsive } from './CodeResponsive'
 export { default as CodeBlockResponsive } from './CodeBlockResponsive'