@toptal/picasso-notification 2.0.5 → 2.0.6

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;AAiFjE,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;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"}

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

@@ -19,7 +19,9 @@ import { Container } from '@toptal/picasso-container';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Typography } from '@toptal/picasso-typography';
 import styles from './styles';
-const renderNotificationCloseButton = ({ onClose, classes, testIds, }) => (React.createElement(ButtonCircular, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton, onClick: onClose, className: classes === null || classes === void 0 ? void 0 : classes.close, icon: React.createElement(CloseMinor16, { className: classes === null || classes === void 0 ? void 0 : classes.closeIcon }) }));
+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,

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":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,UAAU,MAAM,oCAAoC,CAAA;AAE3D,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,MAAM,GACP,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AA2B7B,MAAM,6BAA6B,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAE,EAAE,CAAC,CAC5E,oBAAC,cAAc,mBACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACjC,OAAO,EAAE,OAAO;IAChB,mDAAmD;IACnD,SAAS,EAAC,uHAAuH,EACjI,IAAI,EAAE,oBAAC,YAAY,IAAC,KAAK,EAAC,UAAU,GAAG,GACvC,CACH,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC1E,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;KACzB,CAAA;IAED,6GAA6G;IAC7G,sEAAsE;IACtE,QAAQ,OAAO,EAAE;QACf,KAAK,KAAK;YACR,OAAO,oBAAC,kBAAkB,oBAAK,SAAS,IAAE,KAAK,EAAC,KAAK,IAAG,CAAA;QAE1D,KAAK,QAAQ;YACX,OAAO,oBAAC,kBAAkB,oBAAK,SAAS,IAAE,KAAK,EAAC,QAAQ,IAAG,CAAA;QAE7D,KAAK,OAAO;YACV,OAAO,oBAAC,YAAY,oBAAK,SAAS,IAAE,KAAK,EAAC,OAAO,IAAG,CAAA;QAEtD,OAAO,CAAC,CAAC;YACP,MAAM,SAAS,mCAAQ,SAAS,KAAE,KAAK,EAAE,MAAe,GAAE,CAAA;YAE1D,OAAO,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,oBAAC,MAAM,oBAAK,SAAS,EAAI,CAAA;SACxE;KACF;AACH,CAAC,CAAA;AAED,MAAM,yBAAyB,GAAG,CAAC,KAAmB,EAAE,EAAE;IACxD,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAE9D,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAiB,CAAC,CAAA;IAExD,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,QACJ,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,iBACrB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO;QAE7B,oBAAC,SAAS,IACR,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,cAAc,kBAAkB,EAAE,CAAC,CAC9C,IAEA,sBAAsB,CAAC,KAAK,CAAC,CACpB;QACZ,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC/C,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAC7C,EACD,EAAE,EAAC,KAAK,IAEP,QAAQ,CACE;QACZ,OAAO,IAAI,6BAA6B,CAAC,KAAK,CAAC,CACtC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,cAAc;CACrB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,8DAOL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,eAAe,oBACV,IAAI,IACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,eAAe,UAAU,CAAC,OAAiB,CAAC,EAAE,CAAC,EACvD;YACE,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,QAAQ;YACtC,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ;SACnC,EACD,OAAO,CAAC,YAAY,EACpB,SAAS,CACV,iBACY,UAAU,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CAAA,EAChD,OAAO,EAAE,yBAAyB,iCAC7B,KAAK,KACR,OAAO,IACP,EACF,GAAG,EAAE,GAAG,IACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,YAAY,GAAG;IAC1B,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette: { red, green, yellow, common, text }, shadows, breakpoints: { down }, sizes: { borderRadius }, }: Theme) => import("@material-ui/styles").StyleRules<{}, "notification" | "notificationShadow" | "roundedBorders" | "notificationRed" | "notificationGreen" | "notificationWhite" | "notificationYellow" | "iconWrapper" | "iconWrapperYellow" | "close" | "closeIcon">;
+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 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Notification/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sIAgClD,KAAK;AALR,wBA0EI"}
+{"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

@@ -19,7 +19,7 @@ PicassoProvider.override(({ layout, breakpoints: { down } }) => ({
         },
     },
 }));
-export default ({ palette: { red, green, yellow, common, text }, shadows, breakpoints: { down }, sizes: { borderRadius }, }) => createStyles({
+export default ({ palette: { red, green, yellow, common }, shadows, breakpoints: { down }, sizes: { borderRadius }, }) => createStyles({
     notification: {
         alignItems: 'start',
         borderRadius: 0,
@@ -69,20 +69,5 @@ export default ({ palette: { red, green, yellow, common, text }, shadows, breakp
         height: '1em',
         marginTop: '2px',
     },
-    close: {
-        position: 'absolute',
-        right: '0.5em',
-        top: '0.75em',
-        background: 'transparent',
-        border: 0,
-        padding: 0,
-        height: '1em',
-        '&:hover': {
-            background: 'transparent',
-        },
-    },
-    closeIcon: {
-        fill: text.primary,
-    },
 });
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"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,IAAI,EAAE,EAC7C,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;IAED,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,QAAQ;QACb,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,KAAK;QAEb,SAAS,EAAE;YACT,UAAU,EAAE,aAAa;SAC1B;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,IAAI,CAAC,OAAO;KACnB;CACF,CAAC,CAAA"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-notification",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Toptal UI components library - Notification",
   "publishConfig": {
     "access": "public"
@@ -22,12 +22,12 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "1.0.13",
-    "@toptal/picasso-container": "1.0.2",
-    "@toptal/picasso-icons": "1.1.0",
-    "@toptal/picasso-shared": "14.0.1",
-    "@toptal/picasso-typography": "2.0.0",
-    "@toptal/picasso-utils": "1.0.2",
+    "@toptal/picasso-button": "2.0.0",
+    "@toptal/picasso-container": "1.0.3",
+    "@toptal/picasso-icons": "1.1.1",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-typography": "2.0.1",
+    "@toptal/picasso-utils": "1.0.3",
     "classnames": "^2.5.1",
     "notistack": "3.0.1"
   },
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@toptal/picasso-provider": "4.2.1",
-    "@toptal/picasso-test-utils": "1.1.0"
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",

package/src/Notification/Notification.tsx

@@ -44,16 +44,13 @@ export interface PrivateProps
 /** `elevated` and `icon` props are omitted from the public declaration, since they're only for internal use */
 export type PublicProps = Omit<PrivateProps, 'elevated' | 'icon'>
 
-const renderNotificationCloseButton = ({
-  onClose,
-  classes,
-  testIds,
-}: PrivateProps) => (
+const renderNotificationCloseButton = ({ onClose, testIds }: PrivateProps) => (
   <ButtonCircular
     data-testid={testIds?.closeButton}
     onClick={onClose}
-    className={classes?.close}
-    icon={<CloseMinor16 className={classes?.closeIcon} />}
+    // 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={<CloseMinor16 color='darkGrey' />}
   />
 )
 

package/src/Notification/styles.ts

@@ -26,7 +26,7 @@ PicassoProvider.override(({ layout, breakpoints: { down } }: Theme) => ({
 }))
 
 export default ({
-  palette: { red, green, yellow, common, text },
+  palette: { red, green, yellow, common },
   shadows,
   breakpoints: { down },
   sizes: { borderRadius },
@@ -82,21 +82,4 @@ export default ({
       height: '1em',
       marginTop: '2px',
     },
-
-    close: {
-      position: 'absolute',
-      right: '0.5em',
-      top: '0.75em',
-      background: 'transparent',
-      border: 0,
-      padding: 0,
-      height: '1em',
-
-      '&:hover': {
-        background: 'transparent',
-      },
-    },
-    closeIcon: {
-      fill: text.primary,
-    },
   })

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

@@ -6,37 +6,43 @@ exports[`useNotifications error notification render 1`] = `
     class="Picasso-root"
   >
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -85,16 +91,18 @@ exports[`useNotifications error notification render 1`] = `
                     Error message
                   </div>
                   <button
-                    class="MuiButtonBase-root PicassoButton-small PicassoButton-primary PicassoButton-root PicassoButtonCircular-primary PicassoButtonCircular-root Notification-close"
+                    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 PicassoButton-content"
+                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgCloseMinor16-root PicassoButton-icon Notification-closeIcon"
+                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
                         style="min-width: 16px; min-height: 16px;"
                         viewBox="0 0 16 16"
                       >
@@ -121,37 +129,43 @@ exports[`useNotifications info notification render 1`] = `
     class="Picasso-root"
   >
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -203,16 +217,18 @@ exports[`useNotifications info notification render 1`] = `
                     Info message
                   </div>
                   <button
-                    class="MuiButtonBase-root PicassoButton-small PicassoButton-primary PicassoButton-root PicassoButtonCircular-primary PicassoButtonCircular-root Notification-close"
+                    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 PicassoButton-content"
+                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgCloseMinor16-root PicassoButton-icon Notification-closeIcon"
+                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
                         style="min-width: 16px; min-height: 16px;"
                         viewBox="0 0 16 16"
                       >
@@ -239,37 +255,43 @@ exports[`useNotifications success notification render 1`] = `
     class="Picasso-root"
   >
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Error
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Info
       </span>
     </button>
     <button
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
+      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-8 py-0 px-4"
       data-component-type="button"
+      role="button"
       tabindex="0"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         Show Success
       </span>
@@ -318,16 +340,18 @@ exports[`useNotifications success notification render 1`] = `
                     Success message
                   </div>
                   <button
-                    class="MuiButtonBase-root PicassoButton-small PicassoButton-primary PicassoButton-root PicassoButtonCircular-primary PicassoButtonCircular-root Notification-close"
+                    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 PicassoButton-content"
+                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgCloseMinor16-root PicassoButton-icon Notification-closeIcon"
+                        class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1 PicassoSvgCloseMinor16-darkGrey"
                         style="min-width: 16px; min-height: 16px;"
                         viewBox="0 0 16 16"
                       >