@toptal/picasso-alert 1.0.22 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAWvD,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAI3E,oBAAY,WAAW,GAAG,OAAO,CAC/B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACnC,iBAAiB,CAClB,CAAA;AAED,aAAK,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAGvE,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,aAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxD,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AA6DD,eAAO,MAAM,KAAK,8EA0ChB,CAAA;AAQF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAWvD,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAE3E,oBAAY,WAAW,GAAG,OAAO,CAC/B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACnC,iBAAiB,CAClB,CAAA;AAED,aAAK,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAGvE,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,aAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,YAAY,CAAA;CACzB,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxD,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAyDD,eAAO,MAAM,KAAK,8EAyChB,CAAA;AAQF,eAAe,KAAK,CAAA"}

package/dist-package/src/Alert/Alert.js

@@ -10,13 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core';
 import { SPACING_4 } from '@toptal/picasso-provider';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { ButtonCircular, Button, ButtonSplit } from '@toptal/picasso-button';
 import { CloseMinor16, Exclamation16, Done16, Info16, } from '@toptal/picasso-icons';
-import styles from './styles';
 const renderAlertCloseButton = ({ onClose }) => (React.createElement(Container, { left: 'small' },
     React.createElement(ButtonCircular, { variant: 'transparent', onClick: onClose, title: 'Close alert', icon: React.createElement(CloseMinor16, { color: 'dark-grey' }) })));
 const renderActionButton = (variant, props) => {
@@ -34,16 +32,12 @@ const icons = {
     blue: React.createElement(Info16, { color: 'light-blue' }),
     yellow: React.createElement(Exclamation16, { color: 'yellow' }),
 };
-const useStyles = makeStyles(styles, {
-    name: 'PicassoAlert',
-});
 export const Alert = forwardRef(function Alert(props, ref) {
-    const classes = useStyles();
     const { children, variant, onClose, className, actions } = props;
     const icon = icons[variant];
     return (React.createElement(Container, { flex: true, justifyContent: 'space-between', rounded: true, padded: 'small', role: 'alert', ref: ref, variant: variant, className: className },
-        React.createElement(Container, { inline: true, flex: true, ref: ref, className: classes.root },
-            React.createElement(Container, { right: 'small', flex: true, alignItems: 'center', className: classes.iconWrapper }, icon),
+        React.createElement(Container, { inline: true, flex: true, ref: ref, className: 'text-lg/[1.375em]' },
+            React.createElement(Container, { right: 'small', flex: true, alignItems: 'center', className: 'h-[1.375em]' }, icon),
             React.createElement(Typography, { size: 'medium', as: 'div', weight: 'regular', color: 'black' }, children)),
         React.createElement(Container, { inline: true, flex: true },
             React.createElement(Container, { inline: true, flex: true, gap: SPACING_4 },

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,MAAM,GACP,MAAM,uBAAuB,CAAA;AAI9B,OAAO,MAAM,MAAM,UAAU,CAAA;AA8B7B,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAA0B,EAAE,EAAE,CAAC,CACtE,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO;IACrB,oBAAC,cAAc,IACb,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,oBAAC,YAAY,IAAC,KAAK,EAAC,WAAW,GAAG,GACxC,CACQ,CACb,CAAA;AAED,MAAM,kBAAkB,GAAG,CACzB,OAAoC,EACpC,KAAmB,EACnB,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAhC,iBAAwB,CAAQ,CAAA;IAEtC,IAAI,IAAI,EAAE;QACR,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM;YACf,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,iBAAiB,oBAAO,IAAI,kBAChB,eAAe,IAE1B,KAAK,CACM,CACJ,CACb,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM;QACf,oBAAC,MAAM,oBACD,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,iBACA,eAAe,KAE1B,KAAK,CACC,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAC,KAAK,GAAG;IAClC,KAAK,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,YAAY,GAAG;IACpC,IAAI,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,YAAY,GAAG;IACnC,MAAM,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAC,QAAQ,GAAG;CACzC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,cAAc;CACrB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAAwB,SAAS,KAAK,CACnE,KAAK,EACL,GAAG;IAEH,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAChE,MAAM,IAAI,GAAG,KAAK,CAAC,OAAQ,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,OAAO,QACP,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAEpB,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI;YACtD,oBAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAAC,WAAW,IAE7B,IAAI,CACK;YACZ,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,IAC9D,QAAQ,CACE,CACH;QACZ,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI;YACpB,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,SAAS;gBAClC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,KAAI,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC;gBAClE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;oBACjB,kBAAkB,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,CAAC,CAC1C;YACX,OAAO,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,CAAC,CACrC,CACF,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,MAAM,GACP,MAAM,uBAAuB,CAAA;AAgC9B,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAA0B,EAAE,EAAE,CAAC,CACtE,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO;IACrB,oBAAC,cAAc,IACb,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,oBAAC,YAAY,IAAC,KAAK,EAAC,WAAW,GAAG,GACxC,CACQ,CACb,CAAA;AAED,MAAM,kBAAkB,GAAG,CACzB,OAAoC,EACpC,KAAmB,EACnB,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAhC,iBAAwB,CAAQ,CAAA;IAEtC,IAAI,IAAI,EAAE;QACR,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM;YACf,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,iBAAiB,oBAAO,IAAI,kBAChB,eAAe,IAE1B,KAAK,CACM,CACJ,CACb,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM;QACf,oBAAC,MAAM,oBACD,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,iBACA,eAAe,KAE1B,KAAK,CACC,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAC,KAAK,GAAG;IAClC,KAAK,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,YAAY,GAAG;IACpC,IAAI,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,YAAY,GAAG;IACnC,MAAM,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAC,QAAQ,GAAG;CACzC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAAwB,SAAS,KAAK,CACnE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAChE,MAAM,IAAI,GAAG,KAAK,CAAC,OAAQ,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,OAAO,QACP,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAEpB,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB;YAC5D,oBAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,aAAa,IAEtB,IAAI,CACK;YACZ,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,IAC9D,QAAQ,CACE,CACH;QACZ,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI;YACpB,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,SAAS;gBAClC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,KAAI,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC;gBAClE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;oBACjB,kBAAkB,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,CAAC,CAC1C;YACX,OAAO,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,CAAC,CACrC,CACF,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"AlertInline.d.ts","sourceRoot":"","sources":["../../../src/AlertInline/AlertInline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAA;AAUlE,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAIjF,oBAAY,WAAW,GAAG,OAAO,CAC/B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACnC,iBAAiB,CAClB,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAaD,eAAO,MAAM,WAAW,8EAoCtB,CAAA;AAQF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AlertInline.d.ts","sourceRoot":"","sources":["../../../src/AlertInline/AlertInline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAA;AAQlE,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAEjF,oBAAY,WAAW,GAAG,OAAO,CAC/B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EACnC,iBAAiB,CAClB,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AASD,eAAO,MAAM,WAAW,8EA8BtB,CAAA;AAQF,eAAe,WAAW,CAAA"}

package/dist-package/src/AlertInline/AlertInline.js

@@ -1,20 +1,14 @@
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { ExclamationSolid16, DoneSolid16, InfoSolid16, } from '@toptal/picasso-icons';
-import styles from './styles';
 const icons = {
     red: React.createElement(ExclamationSolid16, { color: 'red' }),
     green: React.createElement(DoneSolid16, { color: 'dark-green' }),
     blue: React.createElement(InfoSolid16, { color: 'light-blue' }),
     yellow: React.createElement(ExclamationSolid16, { color: 'yellow' }),
 };
-const useStyles = makeStyles(styles, {
-    name: 'PicassoAlertInline',
-});
 export const AlertInline = forwardRef(function Alert(props, ref) {
-    const classes = useStyles();
     const { variant, children, className } = props;
     const icon = icons[variant];
     let typographyColor = variant;
@@ -22,8 +16,8 @@ export const AlertInline = forwardRef(function Alert(props, ref) {
     if (variant === 'blue') {
         typographyColor = 'light-blue';
     }
-    return (React.createElement(Container, { inline: true, flex: true, ref: ref, className: classes.root },
-        React.createElement(Container, { right: 'xsmall', flex: true, alignItems: 'center', className: classes.iconWrapper }, icon),
+    return (React.createElement(Container, { inline: true, flex: true, ref: ref, className: 'text-lg/[1.375em]' },
+        React.createElement(Container, { right: 'xsmall', flex: true, alignItems: 'center', className: 'h-[1.25em]' }, icon),
         React.createElement(Typography, { size: 'small', as: 'div', weight: 'semibold', color: typographyColor, className: className }, children)));
 });
 AlertInline.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"AlertInline.js","sourceRoot":"","sources":["../../../src/AlertInline/AlertInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAG9B,OAAO,MAAM,MAAM,UAAU,CAAA;AAc7B,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,oBAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,GAAG;IACvC,KAAK,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG;IACzC,IAAI,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG;IACxC,MAAM,EAAE,oBAAC,kBAAkB,IAAC,KAAK,EAAC,QAAQ,GAAG;CAC9C,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAwB,SAAS,KAAK,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAQ,CAAC,CAAA;IAE5B,IAAI,eAAe,GAAG,OAAoB,CAAA;IAE1C,6BAA6B;IAC7B,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,eAAe,GAAG,YAAY,CAAA;KAC/B;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI;QACtD,oBAAC,SAAS,IACR,KAAK,EAAC,QAAQ,EACd,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAAC,WAAW,IAE7B,IAAI,CACK;QACZ,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,KAAK,EACR,MAAM,EAAC,UAAU,EACjB,KAAK,EAAE,eAAe,EACtB,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AlertInline.js","sourceRoot":"","sources":["../../../src/AlertInline/AlertInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAe9B,MAAM,KAAK,GAAG;IACZ,GAAG,EAAE,oBAAC,kBAAkB,IAAC,KAAK,EAAC,KAAK,GAAG;IACvC,KAAK,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG;IACzC,IAAI,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAC,YAAY,GAAG;IACxC,MAAM,EAAE,oBAAC,kBAAkB,IAAC,KAAK,EAAC,QAAQ,GAAG;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAwB,SAAS,KAAK,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAQ,CAAC,CAAA;IAE5B,IAAI,eAAe,GAAG,OAAoB,CAAA;IAE1C,6BAA6B;IAC7B,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,eAAe,GAAG,YAAY,CAAA;KAC/B;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,MAAM,QAAC,IAAI,QAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB;QAC5D,oBAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,YAAY,IACtE,IAAI,CACK;QACZ,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,KAAK,EACR,MAAM,EAAC,UAAU,EACjB,KAAK,EAAE,eAAe,EACtB,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACE,CACH,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-alert",
-  "version": "1.0.22",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Alert",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.0.8",
+    "@toptal/picasso-button": "2.1.0",
     "@toptal/picasso-container": "1.0.3",
     "@toptal/picasso-icons": "1.4.0",
     "@toptal/picasso-typography": "2.0.2",
@@ -34,7 +34,7 @@
   ],
   "peerDependencies": {
     "@toptal/picasso-provider": "*",
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.6",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

package/src/Alert/Alert.tsx

@@ -1,7 +1,5 @@
 import type { MouseEvent, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { SPACING_4 } from '@toptal/picasso-provider'
 import { Container } from '@toptal/picasso-container'
@@ -16,8 +14,6 @@ import {
 import type { VariantType as ContainerVariants } from '@toptal/picasso-container'
 import type { ButtonSplitProps, ButtonProps } from '@toptal/picasso-button'
 
-import styles from './styles'
-
 export type VariantType = Extract<
   'red' | 'green' | 'yellow' | 'blue',
   ContainerVariants
@@ -101,15 +97,10 @@ const icons = {
   yellow: <Exclamation16 color='yellow' />,
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoAlert',
-})
-
 export const Alert = forwardRef<HTMLDivElement, Props>(function Alert(
   props,
   ref
 ) {
-  const classes = useStyles()
   const { children, variant, onClose, className, actions } = props
   const icon = icons[variant!]
 
@@ -124,12 +115,12 @@ export const Alert = forwardRef<HTMLDivElement, Props>(function Alert(
       variant={variant}
       className={className}
     >
-      <Container inline flex ref={ref} className={classes.root}>
+      <Container inline flex ref={ref} className='text-lg/[1.375em]'>
         <Container
           right='small'
           flex
           alignItems='center'
-          className={classes.iconWrapper}
+          className='h-[1.375em]'
         >
           {icon}
         </Container>

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

@@ -10,10 +10,10 @@ exports[`Alert renders 1`] = `
       role="alert"
     >
       <div
-        class="PicassoContainer-flex PicassoContainer-inline PicassoAlert-root"
+        class="PicassoContainer-flex PicassoContainer-inline text-lg/[1.375em]"
       >
         <div
-          class="PicassoContainer-rightsmallMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoAlert-iconWrapper"
+          class="PicassoContainer-rightsmallMargin PicassoContainer-centerAlignItems PicassoContainer-flex h-[1.375em]"
         >
           <svg
             class="PicassoSvgExclamation16-root PicassoSvgExclamation16-yellow"
@@ -42,7 +42,7 @@ exports[`Alert renders 1`] = `
           >
             <button
               aria-disabled="false"
-              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
               data-component-type="button"
               data-testid="action-button"
               role="button"
@@ -61,7 +61,7 @@ exports[`Alert renders 1`] = `
           >
             <button
               aria-disabled="false"
-              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
               data-component-type="button"
               data-testid="action-button"
               role="button"

package/src/AlertInline/AlertInline.tsx

@@ -1,8 +1,6 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { BaseProps, ColorType } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import {
@@ -12,8 +10,6 @@ import {
 } from '@toptal/picasso-icons'
 import type { VariantType as ContainerVariants } from '@toptal/picasso-container'
 
-import styles from './styles'
-
 export type VariantType = Extract<
   'red' | 'green' | 'yellow' | 'blue',
   ContainerVariants
@@ -33,15 +29,10 @@ const icons = {
   yellow: <ExclamationSolid16 color='yellow' />,
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoAlertInline',
-})
-
 export const AlertInline = forwardRef<HTMLDivElement, Props>(function Alert(
   props,
   ref
 ) {
-  const classes = useStyles()
   const { variant, children, className } = props
   const icon = icons[variant!]
 
@@ -53,13 +44,8 @@ export const AlertInline = forwardRef<HTMLDivElement, Props>(function Alert(
   }
 
   return (
-    <Container inline flex ref={ref} className={classes.root}>
-      <Container
-        right='xsmall'
-        flex
-        alignItems='center'
-        className={classes.iconWrapper}
-      >
+    <Container inline flex ref={ref} className='text-lg/[1.375em]'>
+      <Container right='xsmall' flex alignItems='center' className='h-[1.25em]'>
         {icon}
       </Container>
       <Typography

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

@@ -6,10 +6,10 @@ exports[`Alert renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-inline PicassoAlertInline-root"
+      class="PicassoContainer-flex PicassoContainer-inline text-lg/[1.375em]"
     >
       <div
-        class="PicassoContainer-rightxsmallMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoAlertInline-iconWrapper"
+        class="PicassoContainer-rightxsmallMargin PicassoContainer-centerAlignItems PicassoContainer-flex h-[1.25em]"
       >
         <svg
           class="PicassoSvgExclamationSolid16-root PicassoSvgExclamationSolid16-yellow"

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

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

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

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

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

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        fontSize: '1rem',
-        lineHeight: '1.375em',
-    },
-    iconWrapper: {
-        height: '1.375em',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        fontSize: '1rem',
-        lineHeight: '1.375em',
-    },
-    iconWrapper: {
-        height: '1.25em',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

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

package/src/Alert/styles.ts

@@ -1,12 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      fontSize: '1rem',
-      lineHeight: '1.375em',
-    },
-    iconWrapper: {
-      height: '1.375em',
-    },
-  })

package/src/AlertInline/styles.ts

@@ -1,12 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      fontSize: '1rem',
-      lineHeight: '1.375em',
-    },
-    iconWrapper: {
-      height: '1.25em',
-    },
-  })