@toptal/picasso-icons 1.11.1-alpha-date-picker-allow-specific-dates-to-be-disabled-88666f1f0.52 → 1.12.0

package/src/Icon/ProjectDiscovery24.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 24
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgProjectDiscovery24',
-})
 const SvgProjectDiscovery24 = forwardRef(function SvgProjectDiscovery24(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgProjectDiscovery24 = forwardRef(function SvgProjectDiscovery24(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -48,7 +40,12 @@ const SvgProjectDiscovery24 = forwardRef(function SvgProjectDiscovery24(
     <svg
       fill='none'
       viewBox='0 0 24 24'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/QuestionMark16.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 16
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgQuestionMark16',
-})
 const SvgQuestionMark16 = forwardRef(function SvgQuestionMark16(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgQuestionMark16 = forwardRef(function SvgQuestionMark16(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgQuestionMark16 = forwardRef(function SvgQuestionMark16(
   return (
     <svg
       viewBox='0 0 16 16'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/QuestionMark24.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 24
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgQuestionMark24',
-})
 const SvgQuestionMark24 = forwardRef(function SvgQuestionMark24(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgQuestionMark24 = forwardRef(function SvgQuestionMark24(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgQuestionMark24 = forwardRef(function SvgQuestionMark24(
   return (
     <svg
       viewBox='0 0 24 24'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/Quote16.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 16
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgQuote16',
-})
 const SvgQuote16 = forwardRef(function SvgQuote16(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgQuote16 = forwardRef(function SvgQuote16(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -48,7 +40,12 @@ const SvgQuote16 = forwardRef(function SvgQuote16(
     <svg
       fill='none'
       viewBox='0 0 16 16'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/Quote24.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 24
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgQuote24',
-})
 const SvgQuote24 = forwardRef(function SvgQuote24(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgQuote24 = forwardRef(function SvgQuote24(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -48,7 +40,12 @@ const SvgQuote24 = forwardRef(function SvgQuote24(
     <svg
       fill='none'
       viewBox='0 0 24 24'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/RankOne16.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 16
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgRankOne16',
-})
 const SvgRankOne16 = forwardRef(function SvgRankOne16(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgRankOne16 = forwardRef(function SvgRankOne16(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgRankOne16 = forwardRef(function SvgRankOne16(
   return (
     <svg
       viewBox='0 0 16 16'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/RankOne24.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 24
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgRankOne24',
-})
 const SvgRankOne24 = forwardRef(function SvgRankOne24(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgRankOne24 = forwardRef(function SvgRankOne24(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgRankOne24 = forwardRef(function SvgRankOne24(
   return (
     <svg
       viewBox='0 0 24 24'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/RankThree16.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 16
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgRankThree16',
-})
 const SvgRankThree16 = forwardRef(function SvgRankThree16(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgRankThree16 = forwardRef(function SvgRankThree16(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgRankThree16 = forwardRef(function SvgRankThree16(
   return (
     <svg
       viewBox='0 0 16 16'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/RankThree24.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 24
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgRankThree24',
-})
 const SvgRankThree24 = forwardRef(function SvgRankThree24(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgRankThree24 = forwardRef(function SvgRankThree24(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgRankThree24 = forwardRef(function SvgRankThree24(
   return (
     <svg
       viewBox='0 0 24 24'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}

package/src/Icon/RankTwo16.tsx

@@ -1,11 +1,10 @@
 import type { Ref } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { getColorClass } from './styles'
 
-import styles from './styles'
 const BASE_SIZE = 16
 
 type ScaleType = 1 | 2 | 3 | 4
@@ -13,15 +12,16 @@ export interface Props extends StandardProps {
   scale?: ScaleType
   color?: string
   base?: number
+  classes?: {
+    root?: string
+  }
 }
-const useStyles = makeStyles(styles, {
-  name: 'PicassoSvgRankTwo16',
-})
 const SvgRankTwo16 = forwardRef(function SvgRankTwo16(
   props: Props,
   ref: Ref<SVGSVGElement>
 ) {
   const {
+    classes,
     className,
     style = {},
     color,
@@ -29,15 +29,7 @@ const SvgRankTwo16 = forwardRef(function SvgRankTwo16(
     base,
     'data-testid': testId,
   } = props
-  const classes: Record<string, string> = useStyles(props)
-  const classNames = [classes.root, className]
   const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
-  const colorClassName = kebabToCamelCase(`${color}`)
-
-  if (classes[colorClassName]) {
-    classNames.push(classes[colorClassName])
-  }
-
   const svgStyle = {
     minWidth: `${scaledSize}px`,
     minHeight: `${scaledSize}px`,
@@ -47,7 +39,12 @@ const SvgRankTwo16 = forwardRef(function SvgRankTwo16(
   return (
     <svg
       viewBox='0 0 16 16'
-      className={cx(...classNames)}
+      className={twMerge(
+        'fill-current inline-block text-inherit h-[1em] align-[-.125em]',
+        classes?.root,
+        className,
+        getColorClass(color)
+      )}
       style={svgStyle}
       ref={ref}
       data-testid={testId}