@toptal/picasso-rating 2.0.2 → 3.0.0

package/dist-package/src/RatingIcon/RatingIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RatingIcon.d.ts","sourceRoot":"","sources":["../../../src/RatingIcon/RatingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAKtD,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;CAClC;AAWD,QAAA,MAAM,UAAU,8EAuBd,CAAA;AAQF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"RatingIcon.d.ts","sourceRoot":"","sources":["../../../src/RatingIcon/RatingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAItD,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;CAClC;AAOD,QAAA,MAAM,UAAU,8EAsBd,CAAA;AAQF,eAAe,UAAU,CAAA"}

package/dist-package/src/RatingIcon/RatingIcon.js

@@ -10,25 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { Star16, StarSolid16, Star24, StarSolid24 } from '@toptal/picasso-icons';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoRatingIcon',
-});
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 const iconsBySize = {
     small: [Star16, StarSolid16],
     large: [Star24, StarSolid24],
 };
 const RatingIcon = forwardRef(function RatingIcon(props, ref) {
     const { active, hovered, interactive, size } = props, rest = __rest(props, ["active", "hovered", "interactive", "size"]);
-    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 (React.createElement("span", Object.assign({}, rest, { ref: ref }), active ? (React.createElement(IconSolid, { color: iconColor, className: iconClasses })) : (React.createElement(Icon, { color: iconColor, className: iconClasses }))));
 });

package/dist-package/src/RatingIcon/RatingIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingIcon.js","sourceRoot":"","sources":["../../../src/RatingIcon/RatingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEhF,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE;IACnC,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;CAC7B,CAAA;AAED,MAAM,UAAU,GAAG,UAAU,CAAwB,SAAS,UAAU,CACtE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvD,4CAA+C,CAAQ,CAAA;IAC7D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,SAAS,GAAG,QAAQ,CAAA;IAC1B,MAAM,WAAW,GAAG,EAAE,CAAC;QACrB,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,WAAW;QACpC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;KAC3B,CAAC,CAAA;IACF,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,KAAK,CAAA;IAEhE,OAAO,CACL,8CAAU,IAAI,IAAE,GAAG,EAAE,GAAG,KACrB,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAI,CACnD,CACI,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"RatingIcon.js","sourceRoot":"","sources":["../../../src/RatingIcon/RatingIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AASvD,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;CAC7B,CAAA;AAED,MAAM,UAAU,GAAG,UAAU,CAAwB,SAAS,UAAU,CACtE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvD,4CAA+C,CAAQ,CAAA;IAE7D,MAAM,SAAS,GAAG,QAAQ,CAAA;IAC1B,MAAM,WAAW,GAAG,MAAM,CACxB,WAAW,IAAI,sDAAsD,EACrE,OAAO,IAAI,WAAW,CACvB,CAAA;IACD,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,KAAK,CAAA;IAEhE,OAAO,CACL,8CAAU,IAAI,IAAE,GAAG,EAAE,GAAG,KACrB,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAI,CACnD,CACI,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/dist-package/src/RatingStars/RatingStars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RatingStars.d.ts","sourceRoot":"","sources":["../../../src/RatingStars/RatingStars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAQjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,KAAK,SAAS,CAAA;IACjE,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;CACnC;AAMD,QAAA,MAAM,WAAW,8EAoFf,CAAA;AAUF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"RatingStars.d.ts","sourceRoot":"","sources":["../../../src/RatingStars/RatingStars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAMjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,KAAK,SAAS,CAAA;IACjE,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;CACnC;AAED,QAAA,MAAM,WAAW,8EAgFf,CAAA;AAUF,eAAe,WAAW,CAAA"}

package/dist-package/src/RatingStars/RatingStars.js

@@ -10,17 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useCallback } from 'react';
-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';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoRating',
-});
 const RatingStars = forwardRef(function RatingStars(props, ref) {
     const { name, value, onChange, renderItem = (_, icon) => icon, max, interactive = true, size = 'small' } = props, rest = __rest(props, ["name", "value", "onChange", "renderItem", "max", "interactive", "size"]);
-    const classes = useStyles();
     const handleChange = useCallback((event) => {
         if (onChange && interactive) {
             onChange(event);
@@ -36,13 +30,11 @@ const RatingStars = forwardRef(function RatingStars(props, ref) {
             const defaultIcon = (React.createElement(RatingIcon, { active: !!value && itemValue <= value, interactive: interactive, size: size }));
             // When the user clicks again on the selected rating, reset the rating
             const shouldReset = itemValue === Number(value);
-            return (React.createElement("label", { key: itemId, htmlFor: shouldReset ? resetInputId : itemId, className: cx(classes.label, {
-                    [classes.clickableLabel]: interactive,
-                }) },
+            return (React.createElement("label", { key: itemId, htmlFor: shouldReset ? resetInputId : itemId, className: twJoin('mr-[.125rem]', interactive && 'cursor-pointer') },
                 renderItem(itemValue, defaultIcon),
-                React.createElement("input", { type: 'radio', name: name, id: itemId, value: itemValue, onChange: handleChange, readOnly: !interactive, checked: itemValue === value, className: classes.radio, "data-testid": itemId })));
+                React.createElement("input", { type: 'radio', name: name, id: itemId, value: itemValue, onChange: handleChange, readOnly: !interactive, checked: itemValue === value, className: 'hidden', "data-testid": itemId })));
         }),
-        React.createElement("input", { type: 'radio', name: name, id: resetInputId, value: '', onChange: handleChange, className: classes.radio })));
+        React.createElement("input", { type: 'radio', name: name, id: resetInputId, value: '', onChange: handleChange, className: 'hidden' })));
 });
 RatingStars.defaultProps = {
     interactive: true,

package/dist-package/src/RatingStars/RatingStars.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingStars.js","sourceRoot":"","sources":["../../../src/RatingStars/RatingStars.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RatingStars.js","sourceRoot":"","sources":["../../../src/RatingStars/RatingStars.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAmB1C,MAAM,WAAW,GAAG,UAAU,CAAwB,SAAS,WAAW,CACxE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAC9B,GAAG,EACH,WAAW,GAAG,IAAI,EAClB,IAAI,GAAG,OAAO,KAEZ,KAAK,EADJ,IAAI,UACL,KAAK,EATH,yEASL,CAAQ,CAAA;IAET,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE;QACvC,IAAI,QAAQ,IAAI,WAAW,EAAE;YAC3B,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,WAAW,CAAC,CACxB,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,IAAI,QAAQ,CAAA;IAEpC,OAAO,CACL,oBAAC,SAAS;IACR,wDAAwD;wBACpD,IAAI,IACR,GAAG,EAAE,GAAG;QAEP,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAChC,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAA;YAC3B,MAAM,MAAM,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAA;YAErC,MAAM,WAAW,GAAG,CAClB,oBAAC,UAAU,IACT,MAAM,EAAE,CAAC,CAAC,KAAK,IAAI,SAAS,IAAI,KAAK,EACrC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;YAED,sEAAsE;YACtE,MAAM,WAAW,GAAG,SAAS,KAAK,MAAM,CAAC,KAAK,CAAC,CAAA;YAE/C,OAAO,CACL,+BACE,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,EAC5C,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,WAAW,IAAI,gBAAgB,CAAC;gBAEjE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC;gBACnC,+BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,WAAW,EACtB,OAAO,EAAE,SAAS,KAAK,KAAK,EAC5B,SAAS,EAAC,QAAQ,iBACL,MAAM,GACnB,CACI,CACT,CAAA;QACH,CAAC,CAAC;QAGF,+BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,YAAY,EAChB,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,QAAQ,GAClB,CACQ,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,WAAW,EAAE,IAAI;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,OAAO;CACd,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/dist-package/src/RatingThumbs/RatingThumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RatingThumbs.d.ts","sourceRoot":"","sources":["../../../src/RatingThumbs/RatingThumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAA4C,MAAM,OAAO,CAAA;AAWhE,aAAK,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAEvE;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IAGX,OAAO,CAAC,EAAE;QACR,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAgBD,eAAO,MAAM,YAAY,8EAqExB,CAAA;AAID,eAAe,YAAY,CAAA"}
+{"version":3,"file":"RatingThumbs.d.ts","sourceRoot":"","sources":["../../../src/RatingThumbs/RatingThumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAA4C,MAAM,OAAO,CAAA;AAWhE,aAAK,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAEvE;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IAGX,OAAO,CAAC,EAAE;QACR,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF;AAcD,eAAO,MAAM,YAAY,8EAiExB,CAAA;AAID,eAAe,YAAY,CAAA"}

package/dist-package/src/RatingThumbs/RatingThumbs.js

@@ -1,17 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { ThumbsDown16, ThumbsDown24, ThumbsUp16, ThumbsUp24, } from '@toptal/picasso-icons';
 import { Container } from '@toptal/picasso-container';
-import styles from './styles';
-const useStyles = makeStyles(styles);
+import { getThumbClasses, labelClasses } from './styles';
 const componentsBySize = {
     small: [ThumbsUp16, ThumbsDown16],
     large: [ThumbsUp24, ThumbsDown24],
 };
 let globalId = 0;
 export const RatingThumbs = forwardRef(function RatingThumbs({ name, interactive = true, size = 'small', value, onChange, testIds = {} }, ref) {
-    const classes = useStyles();
     const [baseUniqueId] = useState(() => globalId++);
     const positiveInputId = `${baseUniqueId}-posititve`;
     const negativeInputId = `${baseUniqueId}-negative`;
@@ -22,18 +18,16 @@ export const RatingThumbs = forwardRef(function RatingThumbs({ name, interactive
         }
     }, [onChange, interactive]);
     return (React.createElement(Container, { ref: ref },
-        React.createElement("label", { className: classes.label, htmlFor: positiveInputId },
-            React.createElement(ThumbsUp, { className: classNames(classes.thumbs, {
-                    [classes.interactiveThumbs]: interactive,
-                    [classes.thumbsPositive]: value === true,
+        React.createElement("label", { className: labelClasses, htmlFor: positiveInputId },
+            React.createElement(ThumbsUp, { className: getThumbClasses({ thumbType: 'up', interactive, value }) }),
+            React.createElement("input", { id: positiveInputId, className: 'hidden', type: 'radio', name: name, value: "positive" /* ThumbsValue.POSITIVE */, onChange: handleChange, readOnly: !interactive, checked: value === true, "data-testid": testIds.positiveInput })),
+        React.createElement("label", { className: labelClasses, htmlFor: negativeInputId },
+            React.createElement(ThumbsDown, { className: getThumbClasses({
+                    thumbType: 'down',
+                    interactive,
+                    value,
                 }) }),
-            React.createElement("input", { id: positiveInputId, className: classes.radio, type: 'radio', name: name, value: "positive" /* ThumbsValue.POSITIVE */, onChange: handleChange, readOnly: !interactive, checked: value === true, "data-testid": testIds.positiveInput })),
-        React.createElement("label", { className: classes.label, htmlFor: negativeInputId },
-            React.createElement(ThumbsDown, { className: classNames(classes.thumbs, {
-                    [classes.interactiveThumbs]: interactive,
-                    [classes.thumbsNegative]: value === false,
-                }) }),
-            React.createElement("input", { id: negativeInputId, className: classes.radio, type: 'radio', name: name, value: "negative" /* ThumbsValue.NEGATIVE */, onChange: handleChange, readOnly: !interactive, checked: value === false, "data-testid": testIds.negativeInput }))));
+            React.createElement("input", { id: negativeInputId, className: 'hidden', type: 'radio', name: name, value: "negative" /* ThumbsValue.NEGATIVE */, onChange: handleChange, readOnly: !interactive, checked: value === false, "data-testid": testIds.negativeInput }))));
 });
 RatingThumbs.displayName = 'RatingThumbs';
 export default RatingThumbs;

package/dist-package/src/RatingThumbs/RatingThumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingThumbs.js","sourceRoot":"","sources":["../../../src/RatingThumbs/RatingThumbs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RatingThumbs.js","sourceRoot":"","sources":["../../../src/RatingThumbs/RatingThumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,GACX,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AA0CxD,MAAM,gBAAgB,GAAG;IACvB,KAAK,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;IACjC,KAAK,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;CACzB,CAAA;AAEV,IAAI,QAAQ,GAAG,CAAC,CAAA;AAEhB,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,EAAE,EAC3E,GAAG;IAEH,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEjD,MAAM,eAAe,GAAG,GAAG,YAAY,YAAY,CAAA;IACnD,MAAM,eAAe,GAAG,GAAG,YAAY,WAAW,CAAA;IAElD,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAErD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE;QACvC,IAAI,WAAW,EAAE;YACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,MAAM,CAAC,KAAK,0CAAyB,EAAE,KAAK,CAAC,CAAA;SAC/D;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,WAAW,CAAC,CACxB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG;QACjB,+BAAO,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe;YACtD,oBAAC,QAAQ,IACP,SAAS,EAAE,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,GACnE;YAEF,+BACE,EAAE,EAAE,eAAe,EACnB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,yCACL,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,WAAW,EACtB,OAAO,EAAE,KAAK,KAAK,IAAI,iBACV,OAAO,CAAC,aAAa,GAClC,CACI;QAER,+BAAO,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe;YACtD,oBAAC,UAAU,IACT,SAAS,EAAE,eAAe,CAAC;oBACzB,SAAS,EAAE,MAAM;oBACjB,WAAW;oBACX,KAAK;iBACN,CAAC,GACF;YAEF,+BACE,EAAE,EAAE,eAAe,EACnB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,yCACL,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,WAAW,EACtB,OAAO,EAAE,KAAK,KAAK,KAAK,iBACX,OAAO,CAAC,aAAa,GAClC,CACI,CACE,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

package/dist-package/src/RatingThumbs/styles.d.ts

@@ -1,4 +1,9 @@
-import type { Theme } from '@material-ui/core';
-declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "radio" | "label" | "thumbs" | "interactiveThumbs" | "thumbsPositive" | "thumbsNegative">;
-export default _default;
+declare type Props = {
+    thumbType: 'up' | 'down';
+    interactive: boolean;
+    value?: boolean;
+};
+export declare const labelClasses = "[&:not(:last-child)]:mr-[1em]";
+export declare const getThumbClasses: ({ thumbType, interactive, value }: Props) => string;
+export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/RatingThumbs/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RatingThumbs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;mDAGJ,KAAK;AAA/C,wBAgCI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RatingThumbs/styles.ts"],"names":[],"mappings":"AAEA,aAAK,KAAK,GAAG;IACX,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,YAAY,kCAAkC,CAAA;AAE3D,eAAO,MAAM,eAAe,sCAAuC,KAAK,WAcvE,CAAA"}

package/dist-package/src/RatingThumbs/styles.js

@@ -1,34 +1,13 @@
-import { createStyles } from '@material-ui/core';
-export default ({ palette, transitions }) => 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,
-        },
-    },
-});
+import { twJoin } from '@toptal/picasso-tailwind-merge';
+export const labelClasses = '[&:not(:last-child)]:mr-[1em]';
+export const getThumbClasses = ({ thumbType, interactive, value }) => {
+    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);
+};
 //# sourceMappingURL=styles.js.map

package/dist-package/src/RatingThumbs/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RatingThumbs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjD,YAAY,CAAC;IACX,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;KAChB;IACD,KAAK,EAAE;QACL,oBAAoB,EAAE;YACpB,WAAW,EAAE,KAAK;SACnB;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QAC1B,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,OAAO,WAAW;KAC7D;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;SAC5B;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;QACzB,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;SAC1B;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;SACxB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RatingThumbs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAQvD,MAAM,CAAC,MAAM,YAAY,GAAG,+BAA+B,CAAA;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAS,EAAE,EAAE;IAC1E,IAAI,WAAW,GAAG,eAAe,CAAA;IAEjC,IAAI,SAAS,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE;QACxC,WAAW,GAAG,qCAAqC,CAAA;KACpD;SAAM,IAAI,SAAS,KAAK,MAAM,IAAI,KAAK,KAAK,KAAK,EAAE;QAClD,WAAW,GAAG,iCAAiC,CAAA;KAChD;IAED,OAAO,MAAM,CACX,4CAA4C,EAC5C,WAAW,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,EAAE,EAC3D,WAAW,CACZ,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-rating",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Toptal UI components library - Rating",
   "publishConfig": {
     "access": "public"
@@ -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/**",

package/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 (

package/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"
       >

package/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>
   )

package/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"

package/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}

package/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
+  )
+}

package/dist-package/src/RatingIcon/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "clickableIcon" | "hovered">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/RatingIcon/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RatingIcon/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;0CAGpB,KAAK;AAAtC,wBASI"}

package/dist-package/src/RatingIcon/styles.js

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ transitions }) => createStyles({
-    clickableIcon: {
-        transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-        '&:hover, &$hovered': {
-            transform: 'scale(1.5)',
-        },
-    },
-    hovered: {},
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/RatingIcon/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RatingIcon/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,WAAW,EAAS,EAAE,EAAE,CACxC,YAAY,CAAC;IACX,aAAa,EAAE;QACb,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC/E,oBAAoB,EAAE;YACpB,SAAS,EAAE,YAAY;SACxB;KACF;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

package/dist-package/src/RatingStars/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "radio" | "label" | "clickableLabel">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/RatingStars/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RatingStars/styles.ts"],"names":[],"mappings":";AAEA,wBAWI"}

package/dist-package/src/RatingStars/styles.js

@@ -1,13 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    radio: {
-        display: 'none',
-    },
-    label: {
-        marginRight: '.125rem',
-    },
-    clickableLabel: {
-        cursor: 'pointer',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/RatingStars/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RatingStars/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;KAChB;IACD,KAAK,EAAE;QACL,WAAW,EAAE,SAAS;KACvB;IACD,cAAc,EAAE;QACd,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}

package/src/RatingIcon/styles.ts

@@ -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: {},
-  })

package/src/RatingStars/styles.ts

@@ -1,14 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    radio: {
-      display: 'none',
-    },
-    label: {
-      marginRight: '.125rem',
-    },
-    clickableLabel: {
-      cursor: 'pointer',
-    },
-  })