[FE-258](revamp): overhaul package

.storybook/main.ts

@@ -14,7 +14,6 @@ const config: StorybookConfig = {
 	addons: [
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('@storybook/addon-onboarding'),
 		getAbsolutePath('@storybook/addon-interactions'),
 		getAbsolutePath('@storybook/addon-styling-webpack'),
 	],

.storybook/preview.ts

@@ -10,11 +10,11 @@ const preview: Preview = {
 				date: /Date$/i,
 			},
 		},
-		// options: {
-		// 	storySort: {
-		// 		method: 'alphabetical',
-		// 	},
-		// },
+		options: {
+			storySort: {
+				method: 'alphabetical',
+			},
+		},
 	},
 }
 

build-storybook.log

@@ -234,8 +234,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.82ce2ef0.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin runtime~main.9c07d2b5.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin runtime~main.9c07d2b5.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AddFolderIcon-stories.b44ede9c.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AddFolderIcon-stories.b44ede9c.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-DownloadIcon-stories.b44ede9c.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-DownloadIcon-stories.b44ede9c.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AdjustmentIcon-stories.ee2c229d.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AdjustmentIcon-stories.ee2c229d.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AfterShootLogoIcon-stories.dfb0a217.iframe.bundle.js generate SourceMap
@@ -272,8 +272,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ArrowRightIcon-stories.922beee7.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ArrowUpIcon-stories.5747c34c.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ArrowUpIcon-stories.5747c34c.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AtomBgIcon-stories.0275d8ee.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-AtomBgIcon-stories.0275d8ee.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-TrainBgIcon-stories.0275d8ee.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-TrainBgIcon-stories.0275d8ee.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-BorderColorIcon-stories.0d945cc3.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-BorderColorIcon-stories.0d945cc3.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-CaptureOneIcon-stories.4b85cdc0.iframe.bundle.js generate SourceMap
@@ -562,8 +562,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ScissorsIcon-stories.1890fa11.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SearchIcon-stories.9891173b.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SearchIcon-stories.9891173b.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SelectedCircleBgIcon-stories.360d7f12.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SelectedCircleBgIcon-stories.360d7f12.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SelectedFillCircleIcon-stories.360d7f12.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-SelectedFillCircleIcon-stories.360d7f12.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ShareIcon-stories.32135488.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ShareIcon-stories.32135488.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-ShowDuplicateIcon-stories.76c97409.iframe.bundle.js generate SourceMap
@@ -675,8 +675,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin runtime~main.6b3a1351.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin runtime~main.6b3a1351.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AddFolderIcon-stories.e1c6dd4e.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AddFolderIcon-stories.e1c6dd4e.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-DownloadIcon-stories.e1c6dd4e.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-DownloadIcon-stories.e1c6dd4e.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AdjustmentIcon-stories.425677e4.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AdjustmentIcon-stories.425677e4.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AfterShootLogoIcon-stories.e551d5f8.iframe.bundle.js generate SourceMap
@@ -713,8 +713,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ArrowRightIcon-stories.7940c74e.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ArrowUpIcon-stories.64027570.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ArrowUpIcon-stories.64027570.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AtomBgIcon-stories.85ccb6a6.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-AtomBgIcon-stories.85ccb6a6.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-TrainBgIcon-stories.85ccb6a6.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-TrainBgIcon-stories.85ccb6a6.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-BorderColorIcon-stories.31dd64ac.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-BorderColorIcon-stories.31dd64ac.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-CaptureOneIcon-stories.7646cab4.iframe.bundle.js generate SourceMap
@@ -1003,8 +1003,8 @@ info => Using default Webpack5 setup
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ScissorsIcon-stories.d8a89ed7.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SearchIcon-stories.032345b6.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SearchIcon-stories.032345b6.iframe.bundle.js generated SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SelectedCircleBgIcon-stories.172df878.iframe.bundle.js generate SourceMap
-<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SelectedCircleBgIcon-stories.172df878.iframe.bundle.js generated SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SelectedFillCircleIcon-stories.172df878.iframe.bundle.js generate SourceMap
+<s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-SelectedFillCircleIcon-stories.172df878.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ShareIcon-stories.633e9acb.iframe.bundle.js generate SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ShareIcon-stories.633e9acb.iframe.bundle.js generated SourceMap
 <s> [webpack.Progress] 92% sealing asset processing RealContentHashPlugin stories-ShowDuplicateIcon-stories.17cd25c8.iframe.bundle.js generate SourceMap

icons-legacy/culling/BorderSquareIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { IconProps } from '../../../types'
+import BaseIcon from '../../components/BaseIcon'
+import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
+
+type IconVariant = 'primary'
+type Props = Omit<IconProps, 'variant'> & {
+	variant?: IconVariant
+	inActive?: boolean
+}
+
+export const BorderSquareIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
+	//props
+	const { variant = 'primary', className, color = DEFAULT_ICON.COLOR, size, inActive = false, ...restProps } = props
+
+	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
+
+	// variants
+	const primary = (
+		<svg
+			viewBox='0 0 18 18'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6 text-white', inActive && 'text-[#777777]', className && className)}
+		>
+			<path
+				d='M13.9987 1.33325H3.9987C2.52594 1.33325 1.33203 2.52716 1.33203 3.99992V13.9999C1.33203 15.4727 2.52594 16.6666 3.9987 16.6666H13.9987C15.4715 16.6666 16.6654 15.4727 16.6654 13.9999V3.99992C16.6654 2.52716 15.4715 1.33325 13.9987 1.33325Z'
+				stroke='currentColor'
+				stroke-width='2'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+		</svg>
+	)
+
+	return <BaseIcon variants={{ primary }} variant={variant} />
+})
+
+export default React.memo(BorderSquareIcon)

src/Icons/culling/CardBgIcon.tsx → icons-legacy/culling/CardBgIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { IconProps } from '../../../types'
 import BaseIcon from '../../components/BaseIcon'
 import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
 
 type IconVariant = 'primary'
 type Props = Omit<IconProps, 'variant'> & {
@@ -15,21 +16,28 @@ export const CardBgIcon = React.forwardRef<SVGSVGElement, Props>((props, forward
 	//props
 	const {
 		variant = 'primary',
-		color = DEFAULT_ICON.COLOR,
+		className,
 		bgColor = DEFAULT_ICON.BG_COLOR,
 		bgOpacity = DEFAULT_ICON.BG_OPACITY,
-		size = DEFAULT_ICON.SIZE,
+		color = DEFAULT_ICON.COLOR,
+		size,
 		inActive = false,
 		...restProps
 	} = props
 
 	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
 
-	const iconSize = typeof size === 'number' ? `${size}px` : size
-
 	// variants
 	const primary = (
-		<svg viewBox='0 0 63 63' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: iconSize }} {...restProps} ref={forwardedRef}>
+		<svg
+			viewBox='0 0 63 63'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6', className && className)}
+		>
 			<circle cx='31.5' cy='31.5' r='31.5' fill={bgColor} fillOpacity={bgOpacity} />
 			<path d='M44 31.3999H18' stroke={modifiedColor} stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
 			<path

src/Icons/culling/CartIcon.tsx → icons-legacy/culling/CartIcon.tsx

@@ -2,20 +2,27 @@ import React from 'react'
 import { IconProps } from '../../../types'
 import BaseIcon from '../../components/BaseIcon'
 import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
 
 type Props = IconProps
 
 export const CartIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
 	//props
-	const { variant = 'primary', color = DEFAULT_ICON.COLOR, size = DEFAULT_ICON.SIZE, inActive = false, ...restProps } = props
+	const { variant = 'primary', className, color, size, inActive = false, ...restProps } = props
 
 	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
 
-	const iconSize = typeof size === 'number' ? `${size}px` : size
-
 	// variants
 	const primary = (
-		<svg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: iconSize }} {...restProps} ref={forwardedRef}>
+		<svg
+			viewBox='0 0 36 36'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6 text-[#fff] stroke-[#fff]', className && className)}
+		>
 			<g clipPath='url(#clip0_11945_21255)'>
 				<path
 					d='M9 31.5C10.6569 31.5 12 30.1569 12 28.5C12 26.8431 10.6569 25.5 9 25.5C7.34315 25.5 6 26.8431 6 28.5C6 30.1569 7.34315 31.5 9 31.5Z'
@@ -58,7 +65,15 @@ export const CartIcon = React.forwardRef<SVGSVGElement, Props>((props, forwarded
 	)
 
 	const secondary = (
-		<svg viewBox='0 0 49 46' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: iconSize }} {...restProps} ref={forwardedRef}>
+		<svg
+			viewBox='0 0 49 46'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6', className && className)}
+		>
 			<path
 				d='M19.16 15.188H8.812M1 2.688h4.688l7.812 31.25h25l.938-3.716M15.063 45.313a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25Zm20.312 0a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25Z'
 				stroke={modifiedColor}
@@ -84,7 +99,15 @@ export const CartIcon = React.forwardRef<SVGSVGElement, Props>((props, forwarded
 	)
 
 	const tertiary = (
-		<svg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: iconSize }} {...restProps} ref={forwardedRef}>
+		<svg
+			viewBox='0 0 36 36'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6', className && className)}
+		>
 			<g clipPath='url(#clip0_5678_4243)'>
 				<path
 					d='M9 31.5C10.6569 31.5 12 30.1569 12 28.5C12 26.8431 10.6569 25.5 9 25.5C7.34315 25.5 6 26.8431 6 28.5C6 30.1569 7.34315 31.5 9 31.5Z'

src/Icons/culling/CelebrateIcon.tsx → icons-legacy/culling/CelebrateIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { IconProps } from '../../../types'
 import BaseIcon from '../../components/BaseIcon'
-import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
 
 type IconVariant = 'primary'
 type Props = Omit<IconProps, 'variant' | 'color' | 'inActive'> & {
@@ -10,9 +10,7 @@ type Props = Omit<IconProps, 'variant' | 'color' | 'inActive'> & {
 
 export const CelebrateIcon = React.forwardRef<SVGSVGElement, Props>((props, forwardedRef) => {
 	//props
-	const { variant = 'primary', size = DEFAULT_ICON.SIZE, ...restProps } = props
-
-	const iconSize = typeof size === 'number' ? `${size}px` : size
+	const { variant = 'primary', className, size, ...restProps } = props
 
 	// variants
 	const primary = (
@@ -21,9 +19,10 @@ export const CelebrateIcon = React.forwardRef<SVGSVGElement, Props>((props, forw
 			fill='none'
 			xmlns='http://www.w3.org/2000/svg'
 			xmlnsXlink='http://www.w3.org/1999/xlink'
-			style={{ width: iconSize }}
+			{...(size ? { style: { width: size } } : {})}
 			{...restProps}
 			ref={forwardedRef}
+			className={cn('w-6', className && className)}
 		>
 			<path d='M0 64.48H64V0.48H0V64.48Z' fill='url(#pattern0)' />
 			<defs>

src/Icons/culling/CheckFillCircleIcon.tsx → icons-legacy/culling/CheckFillCircleIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { IconProps } from '../../../types'
 import BaseIcon from '../../components/BaseIcon'
 import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
 
 type IconVariant = 'primary'
 type Props = Omit<IconProps, 'variant'> & {
@@ -13,20 +14,27 @@ export const CheckFillCircleIcon = React.forwardRef<SVGSVGElement, Props>((props
 	//props
 	const {
 		variant = 'primary',
-		color = DEFAULT_ICON.COLOR,
+		className,
 		fillColor = DEFAULT_ICON.FILL_COLOR,
-		size = DEFAULT_ICON.SIZE,
+		color = DEFAULT_ICON.COLOR,
+		size,
 		inActive = false,
 		...restProps
 	} = props
 
 	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
 
-	const iconSize = typeof size === 'number' ? `${size}px` : size
-
 	// variants
 	const primary = (
-		<svg style={{ width: iconSize }} {...restProps} ref={forwardedRef} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<svg
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6', className && className)}
+			viewBox='0 0 20 20'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+		>
 			<circle cx='10' cy='10' r='10' fill={fillColor} />
 			<path
 				d='M15 9.54286V10.0029C14.9994 11.0811 14.6503 12.1302 14.0047 12.9938C13.3591 13.8573 12.4516 14.4891 11.4177 14.7948C10.3837 15.1005 9.27863 15.0638 8.26724 14.6902C7.25584 14.3165 6.39233 13.6259 5.80548 12.7214C5.21863 11.8169 4.9399 10.7469 5.01084 9.67102C5.08178 8.59514 5.4986 7.57103 6.19914 6.7514C6.89968 5.93177 7.84639 5.36055 8.89809 5.12293C9.9498 4.88532 11.0501 4.99403 12.035 5.43286'

src/Icons/culling/ComputerBgIcon.tsx → icons-legacy/culling/ComputerBgIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { IconProps } from '../../../types'
 import BaseIcon from '../../components/BaseIcon'
 import DEFAULT_ICON from '../../constant'
+import { cn } from '../../utils/cn'
 
 type IconVariant = 'primary'
 type Props = Omit<IconProps, 'variant'> & {
@@ -15,21 +16,29 @@ export const ComputerBgIcon = React.forwardRef<SVGSVGElement, Props>((props, for
 	//props
 	const {
 		variant = 'primary',
-		color = DEFAULT_ICON.COLOR,
+		className,
+
 		bgColor = DEFAULT_ICON.BG_COLOR,
 		bgOpacity = DEFAULT_ICON.BG_OPACITY,
-		size = DEFAULT_ICON.SIZE,
+		color = DEFAULT_ICON.COLOR,
+		size,
 		inActive = false,
 		...restProps
 	} = props
 
 	const modifiedColor = inActive ? DEFAULT_ICON.INACTIVE_COLOR : color
 
-	const iconSize = typeof size === 'number' ? `${size}px` : size
-
 	// variants
 	const primary = (
-		<svg viewBox='0 0 63 63' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: iconSize }} {...restProps} ref={forwardedRef}>
+		<svg
+			viewBox='0 0 63 63'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			{...(size ? { style: { width: size } } : {})}
+			{...restProps}
+			ref={forwardedRef}
+			className={cn('w-6', className && className)}
+		>
 			<circle cx='31.5' cy='31.5' r='31.5' fill={bgColor} fillOpacity={bgOpacity} />
 			<path
 				d='M39 23H23C21.8954 23 21 23.8954 21 25V35C21 36.1046 21.8954 37 23 37H39C40.1046 37 41 36.1046 41 35V25C41 23.8954 40.1046 23 39 23Z'