@toptal/picasso-image 1.0.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127 → 2.0.1-alpha-fx-5546-fix-overview-c9a7f8fb5.0

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,aAAK,WAAW,GAAG,WAAW,GAAG,UAAU,CAAA;AAE3C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,iBAAiB,CAAC,gBAAgB,CAAC;IAC3E,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uBAAuB;IACvB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAID,eAAO,MAAM,KAAK,gFAgChB,CAAA;AAQF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,aAAK,WAAW,GAAG,WAAW,GAAG,UAAU,CAAA;AAE3C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,iBAAiB,CAAC,gBAAgB,CAAC;IAC3E,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uBAAuB;IACvB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAED,eAAO,MAAM,KAAK,gFA6BhB,CAAA;AAQF,eAAe,KAAK,CAAA"}

package/dist-package/src/Image/Image.js

@@ -10,16 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoImage' });
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const Image = forwardRef(function Image(props, ref) {
     const { src, srcSet, alt, className, variant = 'rectangle', style } = props, rest = __rest(props, ["src", "srcSet", "alt", "className", "variant", "style"]);
-    const classes = useStyles();
-    return (React.createElement("img", Object.assign({}, rest, { ref: ref, src: src, srcSet: srcSet, alt: alt, className: cx({
-            [classes.circular]: variant === 'circular',
-        }, classes.root, className), style: style })));
+    return (React.createElement("img", Object.assign({}, rest, { ref: ref, src: src, srcSet: srcSet, alt: alt, className: twMerge(variant === 'circular' && 'rounded-full', 'block', className), style: style })));
 });
 Image.defaultProps = {
     variant: 'rectangle',

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,MAAM,MAAM,UAAU,CAAA;AAe7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;AAErE,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA0B,SAAS,KAAK,CACrE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,GAAG,EACH,MAAM,EACN,GAAG,EACH,SAAS,EACT,OAAO,GAAG,WAAW,EACrB,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EARH,yDAQL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX;YACE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU;SAC3C,EACD,OAAO,CAAC,IAAI,EACZ,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAexD,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA0B,SAAS,KAAK,CACrE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,GAAG,EACH,MAAM,EACN,GAAG,EACH,SAAS,EACT,OAAO,GAAG,WAAW,EACrB,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EARH,yDAQL,CAAQ,CAAA;IAET,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,OAAO,KAAK,UAAU,IAAI,cAAc,EACxC,OAAO,EACP,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-image",
-  "version": "1.0.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127+b75438bf7",
+  "version": "2.0.1-alpha-fx-5546-fix-overview-c9a7f8fb5.0+c9a7f8fb5",
   "description": "Toptal UI components library - Image",
   "publishConfig": {
     "access": "public"
@@ -22,18 +22,16 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-utils": "1.0.4-alpha-FX-NULL-fix-checkbox-class-b75438bf7.127+b75438bf7",
+    "@toptal/picasso-utils": "1.0.4-alpha-fx-5546-fix-overview-c9a7f8fb5.149+c9a7f8fb5",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2"
   },
-  "sideEffects": [
-    "**/styles.ts",
-    "**/styles.js"
-  ],
+  "sideEffects": false,
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
@@ -44,5 +42,5 @@
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "b75438bf79ceee27cb29b794511620f600b62864"
+  "gitHead": "c9a7f8fb543ed2ceca8bf086ad9a54578c0552ec"
 }

package/src/Image/Image.tsx

@@ -1,11 +1,7 @@
 import type { ImgHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 type VariantType = 'rectangle' | 'circular'
 
@@ -20,8 +16,6 @@ export interface Props extends BaseProps, ImgHTMLAttributes<HTMLImageElement> {
   variant?: VariantType
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoImage' })
-
 export const Image = forwardRef<HTMLImageElement, Props>(function Image(
   props,
   ref
@@ -35,7 +29,6 @@ export const Image = forwardRef<HTMLImageElement, Props>(function Image(
     style,
     ...rest
   } = props
-  const classes = useStyles()
 
   return (
     <img
@@ -44,11 +37,9 @@ export const Image = forwardRef<HTMLImageElement, Props>(function Image(
       src={src}
       srcSet={srcSet}
       alt={alt}
-      className={cx(
-        {
-          [classes.circular]: variant === 'circular',
-        },
-        classes.root,
+      className={twMerge(
+        variant === 'circular' && 'rounded-full',
+        'block',
         className
       )}
       style={style}

package/src/Image/__snapshots__/test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Image circular variant render 1`] = `
 <div>
   <img
     alt="Circular image"
-    class="PicassoImage-circular PicassoImage-root"
+    class="rounded-full block"
     src="localhost"
   />
 </div>
@@ -14,7 +14,7 @@ exports[`Image renders 1`] = `
 <div>
   <img
     alt="Default image"
-    class="PicassoImage-root"
+    class="block"
     src="localhost"
   />
 </div>

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

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

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

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

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

@@ -1,10 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        display: 'block',
-    },
-    circular: {
-        borderRadius: '50%',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Image/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,KAAK;KACpB;CACF,CAAC,CAAA"}

package/src/Image/styles.ts

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      display: 'block',
-    },
-    circular: {
-      borderRadius: '50%',
-    },
-  })