@toptal/picasso-empty-state 2.0.1 → 2.0.2

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateCollection.d.ts","sourceRoot":"","sources":["../../../src/EmptyStateCollection/EmptyStateCollection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAmC,MAAM,OAAO,CAAA;AASvD,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3D,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAMD,eAAO,MAAM,oBAAoB,8EA8BhC,CAAA;AAID,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"EmptyStateCollection.d.ts","sourceRoot":"","sources":["../../../src/EmptyStateCollection/EmptyStateCollection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAmC,MAAM,OAAO,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3D,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,8EA0BhC,CAAA;AAID,eAAe,oBAAoB,CAAA"}

package/dist-package/src/EmptyStateCollection/EmptyStateCollection.js

@@ -10,24 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Search16 as Search } from '@toptal/picasso-icons';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoEmptyStateCollection',
-});
 export const EmptyStateCollection = forwardRef(function EmptyStateCollection(props, ref) {
-    const classes = useStyles();
     const { icon, children, style } = props, rest = __rest(props, ["icon", "children", "style"]);
     const iconProps = {
-        className: classes.icon,
+        className: 'basis-4 min-w-4 h-4',
         color: 'dark-grey',
     };
     const iconElement = icon ? (cloneElement(icon, iconProps)) : (React.createElement(Search, Object.assign({}, iconProps)));
     return (React.createElement(Container, Object.assign({}, rest, { alignItems: 'center', flex: true, ref: ref, style: style }),
-        React.createElement(Container, { alignItems: 'center', className: classes.iconWrapper, flex: true, right: 'xsmall' }, iconElement),
+        React.createElement(Container, { alignItems: 'center', flex: true, right: 'xsmall' }, iconElement),
         React.createElement(Container, null,
             React.createElement(Typography, { size: 'xsmall' }, children))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateCollection.js","sourceRoot":"","sources":["../../../src/EmptyStateCollection/EmptyStateCollection.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,6BAA6B;CACpC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAC5C,SAAS,oBAAoB,CAAC,KAAK,EAAE,GAAG;IACtC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1C,6BAAkC,CAAQ,CAAA;IAChD,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,OAAO,CAAC,IAAI;QACvB,KAAK,EAAE,WAAoB;KAC5B,CAAA;IACD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CACzB,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,oBAAK,SAAS,EAAI,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,oBAAK,IAAI,IAAE,UAAU,EAAC,QAAQ,EAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAClE,oBAAC,SAAS,IACR,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,IAAI,QACJ,KAAK,EAAC,QAAQ,IAEb,WAAW,CACF;QACZ,oBAAC,SAAS;YACR,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,IAAE,QAAQ,CAAc,CACvC,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"EmptyStateCollection.js","sourceRoot":"","sources":["../../../src/EmptyStateCollection/EmptyStateCollection.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAOvD,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAC5C,SAAS,oBAAoB,CAAC,KAAK,EAAE,GAAG;IACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1C,6BAAkC,CAAQ,CAAA;IAEhD,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,qBAAqB;QAChC,KAAK,EAAE,WAAoB;KAC5B,CAAA;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CACzB,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,oBAAK,SAAS,EAAI,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,oBAAK,IAAI,IAAE,UAAU,EAAC,QAAQ,EAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAClE,oBAAC,SAAS,IAAC,UAAU,EAAC,QAAQ,EAAC,IAAI,QAAC,KAAK,EAAC,QAAQ,IAC/C,WAAW,CACF;QACZ,oBAAC,SAAS;YACR,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,IAAE,QAAQ,CAAc,CACvC,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStatePage.d.ts","sourceRoot":"","sources":["../../../src/EmptyStatePage/EmptyStatePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAmC,MAAM,OAAO,CAAA;AAQvD,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3D,kDAAkD;IAClD,KAAK,EAAE,YAAY,CAAA;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAMD,eAAO,MAAM,cAAc,8EAsC1B,CAAA;AAID,eAAe,cAAc,CAAA"}
+{"version":3,"file":"EmptyStatePage.d.ts","sourceRoot":"","sources":["../../../src/EmptyStatePage/EmptyStatePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAmC,MAAM,OAAO,CAAA;AAIvD,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3D,kDAAkD;IAClD,KAAK,EAAE,YAAY,CAAA;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,cAAc,8EAqC1B,CAAA;AAID,eAAe,cAAc,CAAA"}

package/dist-package/src/EmptyStatePage/EmptyStatePage.js

@@ -10,18 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoEmptyStatePage',
-});
 export const EmptyStatePage = forwardRef(function EmptyStatePage(props, ref) {
-    const classes = useStyles();
     const { image, title, children, style } = props, rest = __rest(props, ["image", "title", "children", "style"]);
     return (React.createElement(Container, Object.assign({}, rest, { direction: 'column', alignItems: 'center', flex: true, ref: ref, style: style }),
-        React.createElement(Container, { alignItems: 'center', justifyContent: 'center', bottom: 'medium', flex: true }, cloneElement(image, { className: classes.image })),
+        React.createElement(Container, { alignItems: 'center', justifyContent: 'center', bottom: 'medium', flex: true }, cloneElement(image, { className: 'w-[8rem] h-[8rem]' })),
         title && (React.createElement(Container, { bottom: 'xsmall' },
             React.createElement(Typography, { variant: 'heading', size: 'medium' }, title))),
         React.createElement(Typography, { size: 'xsmall', as: typeof children === 'string' ? 'p' : 'div' }, children)));

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyStatePage.js","sourceRoot":"","sources":["../../../src/EmptyStatePage/EmptyStatePage.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,uBAAuB;CAC9B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAlD,uCAA0C,CAAQ,CAAA;IAExD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,IAAI,QACJ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,MAAM,EAAC,QAAQ,EACf,IAAI,UAEH,YAAY,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CACxC;QACX,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,MAAM,EAAC,QAAQ;YACxB,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IACxC,KAAK,CACK,CACH,CACb;QACD,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAE7C,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
+{"version":3,"file":"EmptyStatePage.js","sourceRoot":"","sources":["../../../src/EmptyStatePage/EmptyStatePage.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AASvD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAlD,uCAA0C,CAAQ,CAAA;IAExD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,IAAI,QACJ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,MAAM,EAAC,QAAQ,EACf,IAAI,UAEH,YAAY,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAC9C;QACX,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,MAAM,EAAC,QAAQ;YACxB,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IACxC,KAAK,CACK,CACH,CACb;QACD,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAE7C,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-empty-state",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Toptal UI components library - EmptyState",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,6 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },

package/src/EmptyStateCollection/EmptyStateCollection.tsx

@@ -1,30 +1,23 @@
 import type { HTMLAttributes, ReactElement } from 'react'
 import React, { forwardRef, cloneElement } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { Search16 as Search } from '@toptal/picasso-icons'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 
-import styles from './styles'
-
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   /** Adds <Icon /> before EmptyStateCollection content */
   icon?: ReactElement
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoEmptyStateCollection',
-})
-
 export const EmptyStateCollection = forwardRef<HTMLDivElement, Props>(
   function EmptyStateCollection(props, ref) {
-    const classes = useStyles()
     const { icon, children, style, ...rest } = props
+
     const iconProps = {
-      className: classes.icon,
+      className: 'basis-4 min-w-4 h-4',
       color: 'dark-grey' as const,
     }
+
     const iconElement = icon ? (
       cloneElement(icon, iconProps)
     ) : (
@@ -33,12 +26,7 @@ export const EmptyStateCollection = forwardRef<HTMLDivElement, Props>(
 
     return (
       <Container {...rest} alignItems='center' flex ref={ref} style={style}>
-        <Container
-          alignItems='center'
-          className={classes.iconWrapper}
-          flex
-          right='xsmall'
-        >
+        <Container alignItems='center' flex right='xsmall'>
           {iconElement}
         </Container>
         <Container>

package/src/EmptyStatePage/EmptyStatePage.tsx

@@ -1,12 +1,8 @@
 import type { HTMLAttributes, ReactElement } from 'react'
 import React, { forwardRef, cloneElement } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 
-import styles from './styles'
-
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   /** Adds <Icon /> above EmptyStatePage content  */
   image: ReactElement
@@ -14,13 +10,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   title?: string
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoEmptyStatePage',
-})
-
 export const EmptyStatePage = forwardRef<HTMLDivElement, Props>(
   function EmptyStatePage(props, ref) {
-    const classes = useStyles()
     const { image, title, children, style, ...rest } = props
 
     return (
@@ -38,7 +29,7 @@ export const EmptyStatePage = forwardRef<HTMLDivElement, Props>(
           bottom='medium'
           flex
         >
-          {cloneElement(image, { className: classes.image })}
+          {cloneElement(image, { className: 'w-[8rem] h-[8rem]' })}
         </Container>
         {title && (
           <Container bottom='xsmall'>

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

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

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

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

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

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    icon: {
-        flexBasis: '1rem',
-        minWidth: '1rem',
-        height: '1rem',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/EmptyStateCollection/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA"}

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    image: {
-        width: '8rem',
-        height: '8rem',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/EmptyStatePage/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA"}

package/src/EmptyStateCollection/styles.ts

@@ -1,10 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    icon: {
-      flexBasis: '1rem',
-      minWidth: '1rem',
-      height: '1rem',
-    },
-  })

package/src/EmptyStatePage/styles.ts

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    image: {
-      width: '8rem',
-      height: '8rem',
-    },
-  })