From 17a4b5532bf013071119429711dad21ddc66645d Mon Sep 17 00:00:00 2001
From: Adrian Contiu <adrian.contiu@toptal.com>
Date: Fri, 30 Aug 2024 11:54:08 +0300
Subject: [PATCH] [FX-5656] Migrate Rating to TailwindCSS (#4512)

---
 .changeset/moody-buckets-nail.md              |  9 +++
 packages/base/Rating/package.json             |  8 +--
 .../base/Rating/src/RatingIcon/RatingIcon.tsx | 18 ++----
 .../RatingIcon/__snapshots__/test.tsx.snap    |  2 +-
 packages/base/Rating/src/RatingIcon/styles.ts | 13 ----
 .../Rating/src/RatingStars/RatingStars.tsx    | 18 ++----
 .../RatingStars/__snapshots__/test.tsx.snap   | 32 +++++-----
 .../base/Rating/src/RatingStars/styles.ts     | 14 -----
 .../Rating/src/RatingThumbs/RatingThumbs.tsx  | 29 ++++-----
 .../base/Rating/src/RatingThumbs/styles.ts    | 59 ++++++++-----------
 packages/base/Rating/tsconfig.json            |  1 +
 .../src/Rating/__snapshots__/test.tsx.snap    | 44 +++++++-------
 12 files changed, 96 insertions(+), 151 deletions(-)
 create mode 100644 .changeset/moody-buckets-nail.md
 delete mode 100644 packages/base/Rating/src/RatingIcon/styles.ts
 delete mode 100644 packages/base/Rating/src/RatingStars/styles.ts

diff --git a/.changeset/moody-buckets-nail.md b/.changeset/moody-buckets-nail.md
new file mode 100644
index 0000000000..cf43871c93
--- /dev/null
+++ b/.changeset/moody-buckets-nail.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-rating': major
+'@toptal/picasso': patch
+---
+
+### Rating
+
+- migrate to TailwindCSS, material-ui@4 is no longer required for this package
+- make @toptal/picasso-tailwind-merge a peer dependency
diff --git a/packages/base/Rating/package.json b/packages/base/Rating/package.json
index 720b7e72e0..e839c0291c 100644
--- a/packages/base/Rating/package.json
+++ b/packages/base/Rating/package.json
@@ -24,15 +24,14 @@
   "dependencies": {
     "@toptal/picasso-container": "3.0.0",
     "@toptal/picasso-icons": "1.6.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
@@ -40,7 +39,8 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.1"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0"
   },
   "files": [
     "dist-package/**",
diff --git a/packages/base/Rating/src/RatingIcon/RatingIcon.tsx b/packages/base/Rating/src/RatingIcon/RatingIcon.tsx
index 19ff11dd53..c9a00244bf 100644
--- a/packages/base/Rating/src/RatingIcon/RatingIcon.tsx
+++ b/packages/base/Rating/src/RatingIcon/RatingIcon.tsx
@@ -1,10 +1,7 @@
 import React, { forwardRef } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { SizeType } from '@toptal/picasso-shared'
 import { Star16, StarSolid16, Star24, StarSolid24 } from '@toptal/picasso-icons'
-
-import styles from './styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 export interface Props {
   active: boolean
@@ -13,10 +10,6 @@ export interface Props {
   size: SizeType<'small' | 'large'>
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoRatingIcon',
-})
-
 const iconsBySize = {
   small: [Star16, StarSolid16],
   large: [Star24, StarSolid24],
@@ -27,13 +20,12 @@ const RatingIcon = forwardRef<HTMLDivElement, Props>(function RatingIcon(
   ref
 ) {
   const { active, hovered, interactive, size, ...rest } = props
-  const classes = useStyles()
 
   const iconColor = 'yellow'
-  const iconClasses = cx({
-    [classes.clickableIcon]: interactive,
-    [classes.hovered]: hovered,
-  })
+  const iconClasses = twJoin(
+    interactive && 'transition-all duration-350 ease-out hover:scale-150',
+    hovered && 'scale-150'
+  )
   const [Icon, IconSolid] = iconsBySize[size] || iconsBySize.small
 
   return (
diff --git a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
index 084cdad0db..acad53ad36 100644
--- a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`RatingIcon renders 1`] = `
   >
     <span>
       <svg
-        class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+        class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
         style="min-width: 16px; min-height: 16px;"
         viewBox="0 0 16 16"
       >
diff --git a/packages/base/Rating/src/RatingIcon/styles.ts b/packages/base/Rating/src/RatingIcon/styles.ts
deleted file mode 100644
index ad59c3644f..0000000000
--- a/packages/base/Rating/src/RatingIcon/styles.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ transitions }: Theme) =>
-  createStyles({
-    clickableIcon: {
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-      '&:hover, &$hovered': {
-        transform: 'scale(1.5)',
-      },
-    },
-    hovered: {},
-  })
diff --git a/packages/base/Rating/src/RatingStars/RatingStars.tsx b/packages/base/Rating/src/RatingStars/RatingStars.tsx
index c820dc9906..297a0e50cb 100644
--- a/packages/base/Rating/src/RatingStars/RatingStars.tsx
+++ b/packages/base/Rating/src/RatingStars/RatingStars.tsx
@@ -1,12 +1,10 @@
 import type { ReactNode, ChangeEvent } from 'react'
 import React, { forwardRef, useCallback } from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { Container } from '@toptal/picasso-container'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import { RatingIcon } from '../RatingIcon'
-import styles from './styles'
 
 export interface Props extends BaseProps {
   /** Value of the name attribute of the rating input */
@@ -25,10 +23,6 @@ export interface Props extends BaseProps {
   size?: SizeType<'small' | 'large'>
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoRating',
-})
-
 const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
   props,
   ref
@@ -44,8 +38,6 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
     ...rest
   } = props
 
-  const classes = useStyles()
-
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       if (onChange && interactive) {
@@ -82,9 +74,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
           <label
             key={itemId}
             htmlFor={shouldReset ? resetInputId : itemId}
-            className={cx(classes.label, {
-              [classes.clickableLabel]: interactive,
-            })}
+            className={twJoin('mr-[.125rem]', interactive && 'cursor-pointer')}
           >
             {renderItem(itemValue, defaultIcon)}
             <input
@@ -95,7 +85,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
               onChange={handleChange}
               readOnly={!interactive}
               checked={itemValue === value}
-              className={classes.radio}
+              className='hidden'
               data-testid={itemId}
             />
           </label>
@@ -109,7 +99,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
         id={resetInputId}
         value=''
         onChange={handleChange}
-        className={classes.radio}
+        className='hidden'
       />
     </Container>
   )
diff --git a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
index 086c6357ce..41ea2be78b 100644
--- a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
@@ -9,12 +9,12 @@ exports[`Rating.Stars renders 1`] = `
       class=""
     >
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-1"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -24,7 +24,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-1"
           id="rating-name-1"
           name="rating-name"
@@ -33,12 +33,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-2"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -48,7 +48,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-2"
           id="rating-name-2"
           name="rating-name"
@@ -57,12 +57,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-reset"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -73,7 +73,7 @@ exports[`Rating.Stars renders 1`] = `
         </span>
         <input
           checked=""
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-3"
           id="rating-name-3"
           name="rating-name"
@@ -82,12 +82,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-4"
       >
         <span>
           <svg
-            class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+            class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -97,7 +97,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-4"
           id="rating-name-4"
           name="rating-name"
@@ -106,12 +106,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-5"
       >
         <span>
           <svg
-            class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+            class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -121,7 +121,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-5"
           id="rating-name-5"
           name="rating-name"
@@ -130,7 +130,7 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <input
-        class="PicassoRating-radio"
+        class="hidden"
         id="rating-name-reset"
         name="rating-name"
         type="radio"
diff --git a/packages/base/Rating/src/RatingStars/styles.ts b/packages/base/Rating/src/RatingStars/styles.ts
deleted file mode 100644
index 121d96ace5..0000000000
--- a/packages/base/Rating/src/RatingStars/styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    radio: {
-      display: 'none',
-    },
-    label: {
-      marginRight: '.125rem',
-    },
-    clickableLabel: {
-      cursor: 'pointer',
-    },
-  })
diff --git a/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx b/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx
index a47a53b958..77fae1c6b0 100644
--- a/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx
+++ b/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx
@@ -1,7 +1,4 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import classNames from 'classnames'
 import type { ChangeEvent } from 'react'
 import React, { forwardRef, useCallback, useState } from 'react'
 import {
@@ -12,7 +9,7 @@ import {
 } from '@toptal/picasso-icons'
 import { Container } from '@toptal/picasso-container'
 
-import styles from './styles'
+import { getThumbClasses, labelClasses } from './styles'
 
 type Size = SizeType<'small' | 'large'>
 
@@ -49,8 +46,6 @@ export interface Props extends BaseProps {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles)
-
 const enum ThumbsValue {
   POSITIVE = 'positive',
   NEGATIVE = 'negative',
@@ -68,8 +63,6 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
     { name, interactive = true, size = 'small', value, onChange, testIds = {} },
     ref
   ) {
-    const classes = useStyles()
-
     const [baseUniqueId] = useState(() => globalId++)
 
     const positiveInputId = `${baseUniqueId}-posititve`
@@ -88,17 +81,14 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
 
     return (
       <Container ref={ref}>
-        <label className={classes.label} htmlFor={positiveInputId}>
+        <label className={labelClasses} htmlFor={positiveInputId}>
           <ThumbsUp
-            className={classNames(classes.thumbs, {
-              [classes.interactiveThumbs]: interactive,
-              [classes.thumbsPositive]: value === true,
-            })}
+            className={getThumbClasses({ thumbType: 'up', interactive, value })}
           />
 
           <input
             id={positiveInputId}
-            className={classes.radio}
+            className='hidden'
             type='radio'
             name={name}
             value={ThumbsValue.POSITIVE}
@@ -109,17 +99,18 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
           />
         </label>
 
-        <label className={classes.label} htmlFor={negativeInputId}>
+        <label className={labelClasses} htmlFor={negativeInputId}>
           <ThumbsDown
-            className={classNames(classes.thumbs, {
-              [classes.interactiveThumbs]: interactive,
-              [classes.thumbsNegative]: value === false,
+            className={getThumbClasses({
+              thumbType: 'down',
+              interactive,
+              value,
             })}
           />
 
           <input
             id={negativeInputId}
-            className={classes.radio}
+            className='hidden'
             type='radio'
             name={name}
             value={ThumbsValue.NEGATIVE}
diff --git a/packages/base/Rating/src/RatingThumbs/styles.ts b/packages/base/Rating/src/RatingThumbs/styles.ts
index 81dcbe0fe9..fce543fa9c 100644
--- a/packages/base/Rating/src/RatingThumbs/styles.ts
+++ b/packages/base/Rating/src/RatingThumbs/styles.ts
@@ -1,36 +1,25 @@
-import type { Theme } from '@material-ui/core'
-import { createStyles } from '@material-ui/core'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-export default ({ palette, transitions }: Theme) =>
-  createStyles({
-    radio: {
-      display: 'none',
-    },
-    label: {
-      '&:not(:last-child)': {
-        marginRight: '1em',
-      },
-    },
-    thumbs: {
-      color: palette.grey.light2,
-      transition: `color ${transitions.duration.shorter}ms linear`,
-    },
-    interactiveThumbs: {
-      cursor: 'pointer',
-      '&:hover': {
-        color: palette.text.primary,
-      },
-    },
-    thumbsPositive: {
-      color: palette.green.main,
-      '&:hover': {
-        color: palette.green.main,
-      },
-    },
-    thumbsNegative: {
-      color: palette.red.main,
-      '&:hover': {
-        color: palette.red.main,
-      },
-    },
-  })
+type Props = {
+  thumbType: 'up' | 'down'
+  interactive: boolean
+  value?: boolean
+}
+
+export const labelClasses = '[&:not(:last-child)]:mr-[1em]'
+
+export const getThumbClasses = ({ thumbType, interactive, value }: Props) => {
+  let classByType = 'text-gray-400'
+
+  if (thumbType === 'up' && value === true) {
+    classByType = 'text-green-500 hover:text-green-500'
+  } else if (thumbType === 'down' && value === false) {
+    classByType = 'text-red-500 hover:text-red-500'
+  }
+
+  return twJoin(
+    'transition-colors duration-200 ease-linear',
+    interactive ? 'cursor-pointer hover:text-graphite-700' : '',
+    classByType
+  )
+}
diff --git a/packages/base/Rating/tsconfig.json b/packages/base/Rating/tsconfig.json
index 6937c4a8c3..375a35ab40 100644
--- a/packages/base/Rating/tsconfig.json
+++ b/packages/base/Rating/tsconfig.json
@@ -4,6 +4,7 @@
   "include": ["src"],
   "references": [
     { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../Container" },
     { "path": "../Icons" },
     { "path": "../Utils" }
diff --git a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
index e9aa7b2914..875c6c58cb 100644
--- a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
@@ -21,12 +21,12 @@ exports[`Rating Thumbs renders default Stars 1`] = `
             type="number"
           >
             <label
-              class="PicassoRating-label PicassoRating-clickableLabel"
+              class="mr-[.125rem] cursor-pointer"
               for="stars-1"
             >
               <span>
                 <svg
-                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 16 16"
                 >
@@ -36,7 +36,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
                 </svg>
               </span>
               <input
-                class="PicassoRating-radio"
+                class="hidden"
                 data-testid="stars-1"
                 id="stars-1"
                 name="stars"
@@ -45,12 +45,12 @@ exports[`Rating Thumbs renders default Stars 1`] = `
               />
             </label>
             <label
-              class="PicassoRating-label PicassoRating-clickableLabel"
+              class="mr-[.125rem] cursor-pointer"
               for="stars-2"
             >
               <span>
                 <svg
-                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 16 16"
                 >
@@ -60,7 +60,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
                 </svg>
               </span>
               <input
-                class="PicassoRating-radio"
+                class="hidden"
                 data-testid="stars-2"
                 id="stars-2"
                 name="stars"
@@ -69,12 +69,12 @@ exports[`Rating Thumbs renders default Stars 1`] = `
               />
             </label>
             <label
-              class="PicassoRating-label PicassoRating-clickableLabel"
+              class="mr-[.125rem] cursor-pointer"
               for="stars-3"
             >
               <span>
                 <svg
-                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 16 16"
                 >
@@ -84,7 +84,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
                 </svg>
               </span>
               <input
-                class="PicassoRating-radio"
+                class="hidden"
                 data-testid="stars-3"
                 id="stars-3"
                 name="stars"
@@ -93,12 +93,12 @@ exports[`Rating Thumbs renders default Stars 1`] = `
               />
             </label>
             <label
-              class="PicassoRating-label PicassoRating-clickableLabel"
+              class="mr-[.125rem] cursor-pointer"
               for="stars-4"
             >
               <span>
                 <svg
-                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 16 16"
                 >
@@ -108,7 +108,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
                 </svg>
               </span>
               <input
-                class="PicassoRating-radio"
+                class="hidden"
                 data-testid="stars-4"
                 id="stars-4"
                 name="stars"
@@ -117,12 +117,12 @@ exports[`Rating Thumbs renders default Stars 1`] = `
               />
             </label>
             <label
-              class="PicassoRating-label PicassoRating-clickableLabel"
+              class="mr-[.125rem] cursor-pointer"
               for="stars-5"
             >
               <span>
                 <svg
-                  class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+                  class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 16 16"
                 >
@@ -132,7 +132,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
                 </svg>
               </span>
               <input
-                class="PicassoRating-radio"
+                class="hidden"
                 data-testid="stars-5"
                 id="stars-5"
                 name="stars"
@@ -141,7 +141,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
               />
             </label>
             <input
-              class="PicassoRating-radio"
+              class="hidden"
               id="stars-reset"
               name="stars"
               type="radio"
@@ -174,11 +174,11 @@ exports[`Rating Thumbs renders default Thumbs 1`] = `
             class=""
           >
             <label
-              class="makeStyles-label"
+              class="[&:not(:last-child)]:mr-[1em]"
               for="0-posititve"
             >
               <svg
-                class="PicassoSvgThumbsUp16-root makeStyles-thumbs makeStyles-interactiveThumbs"
+                class="PicassoSvgThumbsUp16-root transition-colors duration-200 ease-linear cursor-pointer hover:text-graphite text-gray"
                 style="min-width: 16px; min-height: 16px;"
                 viewBox="0 0 16 16"
               >
@@ -187,7 +187,7 @@ exports[`Rating Thumbs renders default Thumbs 1`] = `
                 />
               </svg>
               <input
-                class="makeStyles-radio"
+                class="hidden"
                 data-testid="positive-thumb"
                 id="0-posititve"
                 name="thumbs"
@@ -196,11 +196,11 @@ exports[`Rating Thumbs renders default Thumbs 1`] = `
               />
             </label>
             <label
-              class="makeStyles-label"
+              class="[&:not(:last-child)]:mr-[1em]"
               for="0-negative"
             >
               <svg
-                class="PicassoSvgThumbsDown16-root makeStyles-thumbs makeStyles-interactiveThumbs"
+                class="PicassoSvgThumbsDown16-root transition-colors duration-200 ease-linear cursor-pointer hover:text-graphite text-gray"
                 style="min-width: 16px; min-height: 16px;"
                 viewBox="0 0 16 16"
               >
@@ -209,7 +209,7 @@ exports[`Rating Thumbs renders default Thumbs 1`] = `
                 />
               </svg>
               <input
-                class="makeStyles-radio"
+                class="hidden"
                 data-testid="negative-thumb"
                 id="0-negative"
                 name="thumbs"