@toptal/picasso-notification 2.0.16 → 3.0.1

package/dist-package/src/Notification/Notification.d.ts

@@ -21,6 +21,6 @@ export interface PrivateProps extends StandardProps, HTMLAttributes<HTMLDivEleme
 }
 /** `elevated` and `icon` props are omitted from the public declaration, since they're only for internal use */
 export declare type PublicProps = Omit<PrivateProps, 'elevated' | 'icon'>;
-export declare const Notification: React.ForwardRefExoticComponent<PrivateProps & React.RefAttributes<HTMLElement>>;
+export declare const Notification: React.ForwardRefExoticComponent<PrivateProps & React.RefAttributes<HTMLDivElement>>;
 export default Notification;
 //# sourceMappingURL=Notification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,KAAmC,MAAM,OAAO,CAAA;AAMvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAc3D,oBAAY,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,WAAW,YACf,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,CAAC;IAChC,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAA;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxD,oCAAoC;IACpC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;CACF;AAED,+GAA+G;AAC/G,oBAAY,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,MAAM,CAAC,CAAA;AA8EjE,eAAO,MAAM,YAAY,kFAkCxB,CAAA;AASD,eAAe,YAAY,CAAA"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,KAAmC,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAW,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAcpE,oBAAY,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,WAAW,YACf,SAAQ,aAAa,EACnB,cAAc,CAAC,cAAc,CAAC;IAChC,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAA;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxD,oCAAoC;IACpC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;CACF;AAED,+GAA+G;AAC/G,oBAAY,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,MAAM,CAAC,CAAA;AAsEjE,eAAO,MAAM,YAAY,qFAwCxB,CAAA;AASD,eAAe,YAAY,CAAA"}

package/dist-package/src/Notification/Notification.js

@@ -10,55 +10,51 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { SnackbarContent } from '@material-ui/core';
-import cx from 'classnames';
-import capitalize from '@material-ui/core/utils/capitalize';
 import { CloseMinor16, ExclamationSolid16, ExclamationSolid24, CheckSolid24, Info24, } from '@toptal/picasso-icons';
 import { Container } from '@toptal/picasso-container';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
+import { capitalize } from '@toptal/picasso-utils';
 const renderNotificationCloseButton = ({ onClose, testIds }) => (React.createElement(ButtonCircular, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton, onClick: onClose, 
     // TODO: [FX-5219] need to avoid such customization
     className: 'absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent', icon: React.createElement(CloseMinor16, { color: 'darkGrey' }) }));
-const renderNotificationIcon = ({ icon, variant, classes }) => {
-    const iconProps = {
-        className: classes === null || classes === void 0 ? void 0 : classes.icon,
-    };
+const renderNotificationIcon = ({ icon, variant = 'yellow' }) => {
     // TODO: these are Icons required circular Icon bg color definitions, all Icons should be white on that color
     // Missing the following: https://github.com/toptal/picasso/issues/253
     switch (variant) {
         case 'red':
-            return React.createElement(ExclamationSolid24, Object.assign({}, iconProps, { color: 'red' }));
+            return React.createElement(ExclamationSolid24, { color: 'red' });
         case 'yellow':
-            return React.createElement(ExclamationSolid16, Object.assign({}, iconProps, { color: 'yellow' }));
+            return React.createElement(ExclamationSolid16, { color: 'yellow' });
         case 'green':
-            return React.createElement(CheckSolid24, Object.assign({}, iconProps, { color: 'green' }));
+            return React.createElement(CheckSolid24, { color: 'green' });
         default: {
-            const infoProps = Object.assign(Object.assign({}, iconProps), { color: 'grey' });
+            const infoProps = { color: 'grey' };
             return icon ? cloneElement(icon, infoProps) : React.createElement(Info24, Object.assign({}, infoProps));
         }
     }
 };
 const renderNotificationContent = (props) => {
-    const { classes, children, onClose, variant, testIds } = props;
-    const capitalizedVariant = capitalize(variant);
-    return (React.createElement(Container, { flex: true, className: classes === null || classes === void 0 ? void 0 : classes.contentWrapper, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content },
-        React.createElement(Container, { flex: true, alignItems: 'center', className: cx(classes === null || classes === void 0 ? void 0 : classes.iconWrapper, classes === null || classes === void 0 ? void 0 : classes[`iconWrapper${capitalizedVariant}`]) }, renderNotificationIcon(props)),
-        React.createElement(Typography, { size: variant === 'yellow' ? 'small' : 'medium', color: 'black', className: cx('break-words min-w-0', variant === 'yellow' ? '!mt-0' : '!mt-[1px]'), as: 'div' }, children),
+    const { children, onClose, variant, testIds } = props;
+    return (React.createElement(Container, { flex: true, className: 'flex w-full my-0 mx-auto p-0 max-w-[75em] min-w-0', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content },
+        React.createElement(Container, { flex: true, alignItems: 'center', className: twJoin('min-w-[1.5em] mr-[1em]', variant === 'yellow'
+                ? 'h-[1em] min-w-[1em] mt-[2px] basis-0'
+                : 'h-[1.5em] basis-[1.5em]') }, renderNotificationIcon(props)),
+        React.createElement(Typography, { size: variant === 'yellow' ? 'small' : 'medium', color: 'black', className: twJoin('break-words min-w-0', variant === 'yellow' ? '!mt-0' : '!mt-[1px]'), as: 'div' }, children),
         onClose && renderNotificationCloseButton(props)));
 };
-const useStyles = makeStyles(styles, {
-    name: 'Notification',
-});
 export const Notification = forwardRef(function Notification(props, ref) {
     const { className, variant, elevated, testIds, 'data-testid': dataTestId } = props, rest = __rest(props, ["className", "variant", "elevated", "testIds", 'data-testid']);
-    const classes = useStyles();
-    return (React.createElement(SnackbarContent, Object.assign({}, rest, { className: cx(classes[`notification${capitalize(variant)}`], {
-            [classes.notificationShadow]: elevated,
-            [classes.roundedBorders]: elevated,
-        }, classes.notification, className), "data-testid": dataTestId || (testIds === null || testIds === void 0 ? void 0 : testIds.notification), message: renderNotificationContent(Object.assign(Object.assign({}, props), { classes })), ref: ref })));
+    const classByVariant = {
+        notificationRed: 'bg-red-100',
+        notificationGreen: 'bg-green-100',
+        notificationWhite: 'bg-white px-[1.5em] pt-[1.5625em] pb-[1.5em]',
+        notificationYellow: 'bg-yellow-100 px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]',
+    };
+    return (React.createElement("div", Object.assign({}, rest, { className: twMerge('relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] pt-[1.5em] pb-[1.5625em] pr-[2.5em] pl-[1.5em] transition-shadow duration-300', elevated && 'shadow-3 rounded-sm', variant
+            ? classByVariant[`notification${capitalize(variant)}`]
+            : classByVariant.notificationYellow, className), "data-testid": dataTestId || (testIds === null || testIds === void 0 ? void 0 : testIds.notification), ref: ref, role: 'alert' }), renderNotificationContent(Object.assign({}, props))));
 });
 Notification.defaultProps = {
     elevated: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/Notification/Notification.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/Notification/Notification.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationActions.d.ts","sourceRoot":"","sources":["../../../src/NotificationActions/NotificationActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAM3E,eAAO,MAAM,mBAAmB,8EAoB/B,CAAA;AAMD,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"NotificationActions.d.ts","sourceRoot":"","sources":["../../../src/NotificationActions/NotificationActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3E,eAAO,MAAM,mBAAmB,8EAiB/B,CAAA;AAMD,eAAe,mBAAmB,CAAA"}

package/dist-package/src/NotificationActions/NotificationActions.js

@@ -10,16 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Container } from '@toptal/picasso-container';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoNotificationActions',
-});
 export const NotificationActions = forwardRef(function NotificationActions(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const classes = useStyles();
-    return (React.createElement(Container, Object.assign({}, rest, { classes: classes, className: className, style: style, top: 'xsmall', flex: true, ref: ref }), children));
+    return (React.createElement(Container, Object.assign({}, rest, { className: className, style: style, top: 'xsmall', flex: true, ref: ref }), children));
 });
 NotificationActions.defaultProps = {};
 NotificationActions.displayName = 'NotificationActions';

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationActions.js","sourceRoot":"","sources":["../../../src/NotificationActions/NotificationActions.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAI7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,4BAA4B;CACnC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAC3C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACrC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAC,QAAQ,EACZ,IAAI,QACJ,GAAG,EAAE,GAAG,KAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,mBAAmB,CAAC,YAAY,GAAG,EAAE,CAAA;AAErC,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"NotificationActions.js","sourceRoot":"","sources":["../../../src/NotificationActions/NotificationActions.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAIrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAC3C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACrC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAC,QAAQ,EACZ,IAAI,QACJ,GAAG,EAAE,GAAG,KAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,mBAAmB,CAAC,YAAY,GAAG,EAAE,CAAA;AAErC,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,eAAe,mBAAmB,CAAA"}

package/dist-package/src/NotificationCompound/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const NotificationCompound: import("react").ForwardRefExoticComponent<import("../Notification").PrivateProps & import("react").RefAttributes<HTMLElement>> & {
+export declare const NotificationCompound: import("react").ForwardRefExoticComponent<import("../Notification").PrivateProps & import("react").RefAttributes<HTMLDivElement>> & {
     Actions: import("react").ForwardRefExoticComponent<import("../NotificationActions/NotificationActions").Props & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/use-notification/use-notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-notifications.d.ts","sourceRoot":"","sources":["../../../src/use-notification/use-notifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAoD9C,eAAO,MAAM,gBAAgB;yBAkCb,SAAS,SAAS,YAAY,YAAY,aAAa;wBAAvD,SAAS,SAAS,YAAY,YAAY,aAAa;2BAAvD,SAAS,SAAS,YAAY,YAAY,aAAa;sCA7B3C,kBAAkB,YAAY,aAAa;;CAsDtE,CAAA"}
+{"version":3,"file":"use-notifications.d.ts","sourceRoot":"","sources":["../../../src/use-notification/use-notifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AA4C9C,eAAO,MAAM,gBAAgB;yBAkCb,SAAS,SAAS,YAAY,YAAY,aAAa;wBAAvD,SAAS,SAAS,YAAY,YAAY,aAAa;2BAAvD,SAAS,SAAS,YAAY,YAAY,aAAa;sCA7B3C,kBAAkB,YAAY,aAAa;;CAsDtE,CAAA"}

package/dist-package/src/use-notification/use-notifications.js

@@ -1,25 +1,16 @@
 import React, { forwardRef, useMemo, useCallback } from 'react';
-import cx from 'classnames';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import { useSnackbar } from 'notistack';
-import { makeStyles } from '@material-ui/core/styles';
 import { Notification as PicassoNotification } from '../Notification';
-import styles from './styles';
 const defaultPosition = {
     vertical: 'top',
     horizontal: 'right',
 };
-const useStyles = makeStyles(styles, {
-    name: 'PicassoNotification',
-});
 const StyledNotification = 
 // eslint-disable-next-line react/display-name
 forwardRef(function Notification(props, ref) {
     const { content, icon, key, onClose, variant = 'white' } = props;
-    const classes = useStyles();
-    return (React.createElement(PicassoNotification, { variant: variant, elevated: true, icon: icon, key: key, onClose: onClose, className: cx({
-            [classes.generalNotification]: variant === 'white',
-            [classes.formNotification]: variant !== 'white',
-        }), ref: ref }, content));
+    return (React.createElement(PicassoNotification, { variant: variant, elevated: true, icon: icon, key: key, onClose: onClose, className: twJoin('max-w-full', variant === 'white' ? 'w-[27.5em]' : `w-[20em]`), ref: ref }, content));
 });
 export const useNotifications = () => {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();

package/dist-package/src/use-notification/use-notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-notifications.js","sourceRoot":"","sources":["../../../src/use-notification/use-notifications.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-notifications.js","sourceRoot":"","sources":["../../../src/use-notification/use-notifications.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-notification",
-  "version": "2.0.16",
+  "version": "3.0.1",
   "description": "Toptal UI components library - Notification",
   "publishConfig": {
     "access": "public"
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.1.1",
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-icons": "1.5.0",
+    "@toptal/picasso-button": "3.0.1",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3",
     "classnames": "^2.5.1",
     "notistack": "3.0.1"
@@ -36,16 +36,17 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-provider": "*",
-    "tailwindcss": ">=3",
+    "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-provider": "5.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Notification/Notification.tsx

@@ -1,11 +1,6 @@
 import type { ReactNode, MouseEvent, ReactElement, HTMLAttributes } from 'react'
 import React, { forwardRef, cloneElement } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { SnackbarContent } from '@material-ui/core'
-import cx from 'classnames'
-import capitalize from '@material-ui/core/utils/capitalize'
-import type { StandardProps } from '@toptal/picasso-shared'
+import type { Classes, StandardProps } from '@toptal/picasso-shared'
 import {
   CloseMinor16,
   ExclamationSolid16,
@@ -16,8 +11,8 @@ import {
 import { Container } from '@toptal/picasso-container'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Typography } from '@toptal/picasso-typography'
-
-import styles from './styles'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
+import { capitalize } from '@toptal/picasso-utils'
 
 export type VariantType = 'red' | 'green' | 'white' | 'yellow'
 
@@ -54,25 +49,21 @@ const renderNotificationCloseButton = ({ onClose, testIds }: PrivateProps) => (
   />
 )
 
-const renderNotificationIcon = ({ icon, variant, classes }: PrivateProps) => {
-  const iconProps = {
-    className: classes?.icon,
-  }
-
+const renderNotificationIcon = ({ icon, variant = 'yellow' }: PrivateProps) => {
   // TODO: these are Icons required circular Icon bg color definitions, all Icons should be white on that color
   // Missing the following: https://github.com/toptal/picasso/issues/253
   switch (variant) {
     case 'red':
-      return <ExclamationSolid24 {...iconProps} color='red' />
+      return <ExclamationSolid24 color='red' />
 
     case 'yellow':
-      return <ExclamationSolid16 {...iconProps} color='yellow' />
+      return <ExclamationSolid16 color='yellow' />
 
     case 'green':
-      return <CheckSolid24 {...iconProps} color='green' />
+      return <CheckSolid24 color='green' />
 
     default: {
-      const infoProps = { ...iconProps, color: 'grey' as const }
+      const infoProps = { color: 'grey' as const }
 
       return icon ? cloneElement(icon, infoProps) : <Info24 {...infoProps} />
     }
@@ -80,22 +71,22 @@ const renderNotificationIcon = ({ icon, variant, classes }: PrivateProps) => {
 }
 
 const renderNotificationContent = (props: PrivateProps) => {
-  const { classes, children, onClose, variant, testIds } = props
-
-  const capitalizedVariant = capitalize(variant as string)
+  const { children, onClose, variant, testIds } = props
 
   return (
     <Container
       flex
-      className={classes?.contentWrapper}
+      className='flex w-full my-0 mx-auto p-0 max-w-[75em] min-w-0'
       data-testid={testIds?.content}
     >
       <Container
         flex
         alignItems='center'
-        className={cx(
-          classes?.iconWrapper,
-          classes?.[`iconWrapper${capitalizedVariant}`]
+        className={twJoin(
+          'min-w-[1.5em] mr-[1em]',
+          variant === 'yellow'
+            ? 'h-[1em] min-w-[1em] mt-[2px] basis-0'
+            : 'h-[1.5em] basis-[1.5em]'
         )}
       >
         {renderNotificationIcon(props)}
@@ -103,7 +94,7 @@ const renderNotificationContent = (props: PrivateProps) => {
       <Typography
         size={variant === 'yellow' ? 'small' : 'medium'}
         color='black'
-        className={cx(
+        className={twJoin(
           'break-words min-w-0',
           variant === 'yellow' ? '!mt-0' : '!mt-[1px]'
         )}
@@ -116,11 +107,7 @@ const renderNotificationContent = (props: PrivateProps) => {
   )
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Notification',
-})
-
-export const Notification = forwardRef<HTMLElement, PrivateProps>(
+export const Notification = forwardRef<HTMLDivElement, PrivateProps>(
   function Notification(props, ref) {
     const {
       className,
@@ -131,27 +118,33 @@ export const Notification = forwardRef<HTMLElement, PrivateProps>(
       ...rest
     } = props
 
-    const classes = useStyles()
+    const classByVariant: Classes = {
+      notificationRed: 'bg-red-100',
+      notificationGreen: 'bg-green-100',
+      notificationWhite: 'bg-white px-[1.5em] pt-[1.5625em] pb-[1.5em]',
+      notificationYellow:
+        'bg-yellow-100 px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]',
+    }
 
     return (
-      <SnackbarContent
+      <div
         {...rest}
-        className={cx(
-          classes[`notification${capitalize(variant as string)}`],
-          {
-            [classes.notificationShadow]: elevated,
-            [classes.roundedBorders]: elevated,
-          },
-          classes.notification,
+        className={twMerge(
+          'relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] pt-[1.5em] pb-[1.5625em] pr-[2.5em] pl-[1.5em] transition-shadow duration-300',
+          elevated && 'shadow-3 rounded-sm',
+          variant
+            ? classByVariant[`notification${capitalize(variant)}`]
+            : classByVariant.notificationYellow,
           className
         )}
         data-testid={dataTestId || testIds?.notification}
-        message={renderNotificationContent({
+        ref={ref}
+        role='alert'
+      >
+        {renderNotificationContent({
           ...props,
-          classes,
         })}
-        ref={ref}
-      />
+      </div>
     )
   }
 )

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

@@ -6,33 +6,29 @@ exports[`Notification renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiPaper-root MuiSnackbarContent-root Notification-notificationYellow Notification-notification MuiPaper-elevation6"
+      class="relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] transition-shadow duration-300 bg-yellow px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]"
       role="alert"
     >
       <div
-        class="MuiSnackbarContent-message"
+        class="flex w-full my-0 mx-auto p-0 max-w min-w"
       >
         <div
-          class="PicassoContainer-flex"
+          class="items-center flex mr-[1em] h-[1em] min-w mt-[2px] basis-0"
         >
-          <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex Notification-iconWrapper Notification-iconWrapperYellow"
+          <svg
+            class="PicassoSvgExclamationSolid16-root PicassoSvgExclamationSolid16-yellow"
+            style="min-width: 16px; min-height: 16px;"
+            viewBox="0 0 16 16"
           >
-            <svg
-              class="PicassoSvgExclamationSolid16-root PicassoSvgExclamationSolid16-yellow"
-              style="min-width: 16px; min-height: 16px;"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1Z"
-              />
-            </svg>
-          </div>
-          <div
-            class="m-0 text-sm text-black font-regular break-words min-w !mt-0"
-          >
-            test example string
-          </div>
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1Z"
+            />
+          </svg>
+        </div>
+        <div
+          class="m-0 text-sm text-black font-regular break-words min-w !mt-0"
+        >
+          test example string
         </div>
       </div>
     </div>

package/src/NotificationActions/NotificationActions.tsx

@@ -1,28 +1,17 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
 
-import styles from './styles'
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {}
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoNotificationActions',
-})
-
 export const NotificationActions = forwardRef<HTMLDivElement, Props>(
   function NotificationActions(props, ref) {
     const { children, className, style, ...rest } = props
 
-    const classes = useStyles()
-
     return (
       <Container
         {...rest}
-        classes={classes}
         className={className}
         style={style}
         top='xsmall'

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

@@ -6,37 +6,33 @@ exports[`NotificationActions renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiPaper-root MuiSnackbarContent-root Notification-notificationYellow Notification-notification MuiPaper-elevation6"
+      class="relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] transition-shadow duration-300 bg-yellow px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]"
       role="alert"
     >
       <div
-        class="MuiSnackbarContent-message"
+        class="flex w-full my-0 mx-auto p-0 max-w min-w"
       >
         <div
-          class="PicassoContainer-flex"
+          class="items-center flex mr-[1em] h-[1em] min-w mt-[2px] basis-0"
         >
-          <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex Notification-iconWrapper Notification-iconWrapperYellow"
+          <svg
+            class="PicassoSvgExclamationSolid16-root PicassoSvgExclamationSolid16-yellow"
+            style="min-width: 16px; min-height: 16px;"
+            viewBox="0 0 16 16"
           >
-            <svg
-              class="PicassoSvgExclamationSolid16-root PicassoSvgExclamationSolid16-yellow"
-              style="min-width: 16px; min-height: 16px;"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1Z"
-              />
-            </svg>
-          </div>
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1Z"
+            />
+          </svg>
+        </div>
+        <div
+          class="m-0 text-sm text-black font-regular break-words min-w !mt-0"
+        >
+          The time zone in your profile is set to (UTC -08:00) America - Los
           <div
-            class="m-0 text-sm text-black font-regular break-words min-w !mt-0"
+            class="mt-2 flex"
           >
-            The time zone in your profile is set to (UTC -08:00) America - Los
-            <div
-              class="PicassoContainer-topxsmallMargin PicassoContainer-flex"
-            >
-              Test
-            </div>
+            Test
           </div>
         </div>
       </div>

package/src/use-notification/__snapshots__/test.tsx.snap

@@ -14,7 +14,7 @@ exports[`useNotifications error notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
@@ -28,7 +28,7 @@ exports[`useNotifications error notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
@@ -42,7 +42,7 @@ exports[`useNotifications error notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -62,57 +62,53 @@ exports[`useNotifications error notification render 1`] = `
             class="notistack-Snackbar go3963613292"
           >
             <div
-              class="MuiPaper-root MuiSnackbarContent-root Notification-notificationRed Notification-notificationShadow Notification-roundedBorders Notification-notification PicassoNotification-formNotification MuiPaper-elevation6"
+              class="relative flex flex-nowrap items-start pt-[1.5em] pb-[1.5625em] pr-[2.5em] pl-[1.5em] transition-shadow duration-300 shadow-3 rounded-sm bg-red max-w w-[20em]"
               role="alert"
               style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="MuiSnackbarContent-message"
+                class="flex w-full my-0 mx-auto p-0 max-w min-w"
               >
                 <div
-                  class="PicassoContainer-flex"
+                  class="items-center flex min-w mr-[1em] h-[1.5em] basis-[1.5em]"
                 >
-                  <div
-                    class="PicassoContainer-centerAlignItems PicassoContainer-flex Notification-iconWrapper"
+                  <svg
+                    class="PicassoSvgExclamationSolid24-root PicassoSvgExclamationSolid24-red"
+                    style="min-width: 24px; min-height: 24px;"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-10a1 1 0 0 0-1 1v7a1 1 0 0 0 2 0V7a1 1 0 0 0-1-1Z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
+                >
+                  Error message
+                </div>
+                <button
+                  aria-disabled="false"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  data-component-type="button"
+                  role="button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                   >
                     <svg
-                      class="PicassoSvgExclamationSolid24-root PicassoSvgExclamationSolid24-red"
-                      style="min-width: 24px; min-height: 24px;"
-                      viewBox="0 0 24 24"
+                      class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
+                      style="min-width: 16px; min-height: 16px;"
+                      viewBox="0 0 16 16"
                     >
                       <path
-                        d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-10a1 1 0 0 0-1 1v7a1 1 0 0 0 2 0V7a1 1 0 0 0-1-1Z"
+                        d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
                       />
                     </svg>
-                  </div>
-                  <div
-                    class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
-                  >
-                    Error message
-                  </div>
-                  <button
-                    aria-disabled="false"
-                    class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
-                    data-component-type="button"
-                    role="button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-                    >
-                      <svg
-                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
-                        style="min-width: 16px; min-height: 16px;"
-                        viewBox="0 0 16 16"
-                      >
-                        <path
-                          d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                  </span>
+                </button>
               </div>
             </div>
           </div>
@@ -137,7 +133,7 @@ exports[`useNotifications info notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
@@ -151,7 +147,7 @@ exports[`useNotifications info notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
@@ -165,7 +161,7 @@ exports[`useNotifications info notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -185,60 +181,56 @@ exports[`useNotifications info notification render 1`] = `
             class="notistack-Snackbar go3963613292"
           >
             <div
-              class="MuiPaper-root MuiSnackbarContent-root Notification-notificationWhite Notification-notificationShadow Notification-roundedBorders Notification-notification PicassoNotification-generalNotification MuiPaper-elevation6"
+              class="relative flex flex-nowrap items-start transition-shadow duration-300 shadow-3 rounded-sm bg-white px-[1.5em] pt-[1.5625em] pb-[1.5em] max-w w-[27.5em]"
               role="alert"
               style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="MuiSnackbarContent-message"
+                class="flex w-full my-0 mx-auto p-0 max-w min-w"
               >
                 <div
-                  class="PicassoContainer-flex"
+                  class="items-center flex min-w mr-[1em] h-[1.5em] basis-[1.5em]"
+                >
+                  <svg
+                    class="PicassoSvgInfo24-root PicassoSvgInfo24-grey"
+                    fill="none"
+                    style="min-width: 24px; min-height: 24px;"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.5 22C17.299 22 22 17.299 22 11.5S17.299 1 11.5 1 1 5.701 1 11.5 5.701 22 11.5 22Zm0-1a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM12 9v7h1v1h-3v-1h1v-6h-1V9h2Zm0-2V6h-1v1h1Z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
+                >
+                  Info message
+                </div>
+                <button
+                  aria-disabled="false"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  data-component-type="button"
+                  role="button"
+                  tabindex="0"
+                  type="button"
                 >
-                  <div
-                    class="PicassoContainer-centerAlignItems PicassoContainer-flex Notification-iconWrapper"
+                  <span
+                    class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                   >
                     <svg
-                      class="PicassoSvgInfo24-root PicassoSvgInfo24-grey"
-                      fill="none"
-                      style="min-width: 24px; min-height: 24px;"
-                      viewBox="0 0 24 24"
+                      class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
+                      style="min-width: 16px; min-height: 16px;"
+                      viewBox="0 0 16 16"
                     >
                       <path
-                        clip-rule="evenodd"
-                        d="M11.5 22C17.299 22 22 17.299 22 11.5S17.299 1 11.5 1 1 5.701 1 11.5 5.701 22 11.5 22Zm0-1a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM12 9v7h1v1h-3v-1h1v-6h-1V9h2Zm0-2V6h-1v1h1Z"
-                        fill-rule="evenodd"
+                        d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
                       />
                     </svg>
-                  </div>
-                  <div
-                    class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
-                  >
-                    Info message
-                  </div>
-                  <button
-                    aria-disabled="false"
-                    class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
-                    data-component-type="button"
-                    role="button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-                    >
-                      <svg
-                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
-                        style="min-width: 16px; min-height: 16px;"
-                        viewBox="0 0 16 16"
-                      >
-                        <path
-                          d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                  </span>
+                </button>
               </div>
             </div>
           </div>
@@ -263,7 +255,7 @@ exports[`useNotifications success notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
@@ -277,7 +269,7 @@ exports[`useNotifications success notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
@@ -291,7 +283,7 @@ exports[`useNotifications success notification render 1`] = `
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="items-center inline-flex font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -311,57 +303,53 @@ exports[`useNotifications success notification render 1`] = `
             class="notistack-Snackbar go3963613292"
           >
             <div
-              class="MuiPaper-root MuiSnackbarContent-root Notification-notificationGreen Notification-notificationShadow Notification-roundedBorders Notification-notification PicassoNotification-formNotification MuiPaper-elevation6"
+              class="relative flex flex-nowrap items-start pt-[1.5em] pb-[1.5625em] pr-[2.5em] pl-[1.5em] transition-shadow duration-300 shadow-3 rounded-sm bg-green max-w w-[20em]"
               role="alert"
               style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="MuiSnackbarContent-message"
+                class="flex w-full my-0 mx-auto p-0 max-w min-w"
               >
                 <div
-                  class="PicassoContainer-flex"
+                  class="items-center flex min-w mr-[1em] h-[1.5em] basis-[1.5em]"
                 >
-                  <div
-                    class="PicassoContainer-centerAlignItems PicassoContainer-flex Notification-iconWrapper"
+                  <svg
+                    class="PicassoSvgCheckSolid24-root PicassoSvgCheckSolid24-green"
+                    style="min-width: 24px; min-height: 24px;"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm4.034 7.667-5.895 5.91-1.933-1.942-1.373 1.379 1.934 1.942 1.372 1.377 7.267-7.289-1.372-1.377Z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
+                >
+                  Success message
+                </div>
+                <button
+                  aria-disabled="false"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  data-component-type="button"
+                  role="button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                   >
                     <svg
-                      class="PicassoSvgCheckSolid24-root PicassoSvgCheckSolid24-green"
-                      style="min-width: 24px; min-height: 24px;"
-                      viewBox="0 0 24 24"
+                      class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
+                      style="min-width: 16px; min-height: 16px;"
+                      viewBox="0 0 16 16"
                     >
                       <path
-                        d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm4.034 7.667-5.895 5.91-1.933-1.942-1.373 1.379 1.934 1.942 1.372 1.377 7.267-7.289-1.372-1.377Z"
+                        d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
                       />
                     </svg>
-                  </div>
-                  <div
-                    class="m-0 text-md text-black font-regular break-words min-w !mt-[1px]"
-                  >
-                    Success message
-                  </div>
-                  <button
-                    aria-disabled="false"
-                    class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
-                    data-component-type="button"
-                    role="button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-                    >
-                      <svg
-                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
-                        style="min-width: 16px; min-height: 16px;"
-                        viewBox="0 0 16 16"
-                      >
-                        <path
-                          d="m8.707 8 3.5 3.5-.707.707-3.5-3.5-3.5 3.5-.707-.707 3.5-3.5-3.5-3.5.707-.707 3.5 3.5 3.5-3.5.707.707-3.5 3.5Z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                  </span>
+                </button>
               </div>
             </div>
           </div>

package/src/use-notification/use-notifications.tsx

@@ -1,16 +1,13 @@
 import type { ReactNode, ReactElement } from 'react'
 import React, { forwardRef, useMemo, useCallback } from 'react'
-import cx from 'classnames'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 import type { OptionsObject } from 'notistack'
 import { useSnackbar } from 'notistack'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { SnackbarOrigin } from '@material-ui/core/Snackbar'
 import type { BaseProps } from '@toptal/picasso-shared'
 
 import type { VariantType } from '../Notification'
 import { Notification as PicassoNotification } from '../Notification'
-import styles from './styles'
 
 const defaultPosition: SnackbarOrigin = {
   vertical: 'top',
@@ -25,15 +22,10 @@ interface Props extends BaseProps {
   variant?: VariantType
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoNotification',
-})
-
 const StyledNotification =
   // eslint-disable-next-line react/display-name
-  forwardRef<HTMLElement, Props>(function Notification(props, ref) {
+  forwardRef<HTMLDivElement, Props>(function Notification(props, ref) {
     const { content, icon, key, onClose, variant = 'white' } = props
-    const classes = useStyles()
 
     return (
       <PicassoNotification
@@ -42,10 +34,10 @@ const StyledNotification =
         icon={icon}
         key={key}
         onClose={onClose}
-        className={cx({
-          [classes.generalNotification]: variant === 'white',
-          [classes.formNotification]: variant !== 'white',
-        })}
+        className={twJoin(
+          'max-w-full',
+          variant === 'white' ? 'w-[27.5em]' : `w-[20em]`
+        )}
         ref={ref}
       >
         {content}

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette: { red, green, yellow, common }, shadows, breakpoints: { down }, sizes: { borderRadius }, }: Theme) => import("@material-ui/styles").StyleRules<{}, "notification" | "notificationShadow" | "roundedBorders" | "notificationRed" | "notificationGreen" | "notificationWhite" | "notificationYellow" | "iconWrapper" | "iconWrapperYellow">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,73 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { breakpointsList as breakpoints, PicassoProvider, } from '@toptal/picasso-provider';
-import { rem } from '@toptal/picasso-shared';
-PicassoProvider.override(({ layout, breakpoints: { down } }) => ({
-    MuiSnackbarContent: {
-        message: {
-            display: 'flex',
-            maxWidth: layout.contentWidth,
-            padding: 0,
-            width: '100%',
-            minWidth: 0,
-            margin: '0 auto',
-            [down(breakpoints.xl)]: {
-                maxWidth: 'unset',
-            },
-            '& > div': {
-                width: '100%',
-            },
-        },
-    },
-}));
-export default ({ palette: { red, green, yellow, common }, shadows, breakpoints: { down }, sizes: { borderRadius }, }) => createStyles({
-    notification: {
-        alignItems: 'start',
-        borderRadius: 0,
-        flexWrap: 'nowrap',
-        maxWidth: 'initial',
-        position: 'relative',
-        width: '100%',
-        boxShadow: 'none',
-        padding: '1.5em 2.5em 1.5625em 1.5em',
-    },
-    notificationShadow: {
-        boxShadow: shadows[3],
-    },
-    roundedBorders: {
-        borderRadius: borderRadius.small,
-    },
-    notificationRed: {
-        background: red.lighter,
-    },
-    notificationGreen: {
-        background: green.lighter,
-    },
-    notificationWhite: {
-        background: common.white,
-        padding: '1.5625em 1.5em 1.5em',
-    },
-    notificationYellow: {
-        background: yellow.lighter,
-        padding: `1.5em ${rem('130px')}`,
-        [down(breakpoints.lg)]: {
-            padding: '1.5em',
-        },
-        [down(breakpoints.sm)]: {
-            padding: '1.5em 1em',
-        },
-    },
-    // Content Icon
-    iconWrapper: {
-        flexBasis: '1.5em',
-        marginRight: '1em',
-        minWidth: '1.5em',
-        height: '1.5em',
-    },
-    iconWrapperYellow: {
-        flexBasis: 'unset',
-        minWidth: '1em',
-        height: '1em',
-        marginTop: '2px',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Notification/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,EAAS,EAAE,EAAE,CAAC,CAAC;IACtE,kBAAkB,EAAE;QAClB,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM,CAAC,YAAY;YAC7B,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;YACX,MAAM,EAAE,QAAQ;YAChB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;gBACtB,QAAQ,EAAE,OAAO;aAClB;YACD,SAAS,EAAE;gBACT,KAAK,EAAE,MAAM;aACd;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EACd,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EACvC,OAAO,EACP,WAAW,EAAE,EAAE,IAAI,EAAE,EACrB,KAAK,EAAE,EAAE,YAAY,EAAE,GACjB,EAAE,EAAE,CACV,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,4BAA4B;KACtC;IACD,kBAAkB,EAAE;QAClB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;KACtB;IACD,cAAc,EAAE;QACd,YAAY,EAAE,YAAY,CAAC,KAAK;KACjC;IACD,eAAe,EAAE;QACf,UAAU,EAAE,GAAG,CAAC,OAAO;KACxB;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,KAAK,CAAC,OAAO;KAC1B;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,MAAM,CAAC,KAAK;QACxB,OAAO,EAAE,sBAAsB;KAChC;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,MAAM,CAAC,OAAO;QAC1B,OAAO,EAAE,SAAS,GAAG,CAAC,OAAO,CAAC,EAAE;QAChC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;YACtB,OAAO,EAAE,OAAO;SACjB;QACD,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;YACtB,OAAO,EAAE,WAAW;SACrB;KACF;IAED,eAAe;IACf,WAAW,EAAE;QACX,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,OAAO;KAChB;IACD,iBAAiB,EAAE;QACjB,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAA"}

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

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

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

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

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

@@ -1,2 +0,0 @@
-export default () => ({});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/NotificationActions/styles.ts"],"names":[],"mappings":"AAAA,eAAe,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA"}

package/dist-package/src/use-notification/styles.d.ts

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

package/dist-package/src/use-notification/styles.d.ts.map

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

package/dist-package/src/use-notification/styles.js

@@ -1,12 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    formNotification: {
-        width: '20em',
-        maxWidth: '100%',
-    },
-    generalNotification: {
-        width: '27.5em',
-        maxWidth: '100%',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/use-notification/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/use-notification/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KACjB;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC,CAAA"}

package/src/Notification/styles.ts

@@ -1,85 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import {
-  breakpointsList as breakpoints,
-  PicassoProvider,
-} from '@toptal/picasso-provider'
-import { rem } from '@toptal/picasso-shared'
-
-PicassoProvider.override(({ layout, breakpoints: { down } }: Theme) => ({
-  MuiSnackbarContent: {
-    message: {
-      display: 'flex',
-      maxWidth: layout.contentWidth,
-      padding: 0,
-      width: '100%',
-      minWidth: 0,
-      margin: '0 auto',
-      [down(breakpoints.xl)]: {
-        maxWidth: 'unset',
-      },
-      '& > div': {
-        width: '100%',
-      },
-    },
-  },
-}))
-
-export default ({
-  palette: { red, green, yellow, common },
-  shadows,
-  breakpoints: { down },
-  sizes: { borderRadius },
-}: Theme) =>
-  createStyles({
-    notification: {
-      alignItems: 'start',
-      borderRadius: 0,
-      flexWrap: 'nowrap',
-      maxWidth: 'initial',
-      position: 'relative',
-      width: '100%',
-      boxShadow: 'none',
-      padding: '1.5em 2.5em 1.5625em 1.5em',
-    },
-    notificationShadow: {
-      boxShadow: shadows[3],
-    },
-    roundedBorders: {
-      borderRadius: borderRadius.small,
-    },
-    notificationRed: {
-      background: red.lighter,
-    },
-    notificationGreen: {
-      background: green.lighter,
-    },
-    notificationWhite: {
-      background: common.white,
-      padding: '1.5625em 1.5em 1.5em',
-    },
-    notificationYellow: {
-      background: yellow.lighter,
-      padding: `1.5em ${rem('130px')}`,
-      [down(breakpoints.lg)]: {
-        padding: '1.5em',
-      },
-      [down(breakpoints.sm)]: {
-        padding: '1.5em 1em',
-      },
-    },
-
-    // Content Icon
-    iconWrapper: {
-      flexBasis: '1.5em',
-      marginRight: '1em',
-      minWidth: '1.5em',
-      height: '1.5em',
-    },
-    iconWrapperYellow: {
-      flexBasis: 'unset',
-      minWidth: '1em',
-      height: '1em',
-      marginTop: '2px',
-    },
-  })

package/src/NotificationActions/styles.ts

@@ -1 +0,0 @@
-export default () => ({})

package/src/use-notification/styles.ts

@@ -1,13 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    formNotification: {
-      width: '20em',
-      maxWidth: '100%',
-    },
-    generalNotification: {
-      width: '27.5em',
-      maxWidth: '100%',
-    },
-  })