@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Loader.module.scss

@@ -0,0 +1,74 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+
+$itemsCnt: 8;
+$duration: c.$durationLoader;
+$delayStep: math.div($duration, $itemsCnt);
+$opacityMax: 1;
+$opacityMin: 0.2;
+
+.loader {
+  &.small {
+    width: c.$iconSizeSmall;
+    height: c.$iconSizeSmall;
+  }
+
+  &.smallMedium {
+    width: c.$iconSizeSmallMedium;
+    height: c.$iconSizeSmallMedium;
+  }
+
+  &.medium {
+    width: c.$iconSizeMedium;
+    height: c.$iconSizeMedium;
+  }
+
+  &.large {
+    width: c.$iconSizeLarge;
+    height: c.$iconSizeLarge;
+  }
+
+  &.xlarge {
+    width: c.$iconSizeXLarge;
+    height: c.$iconSizeXLarge;
+  }
+
+  &.primary {
+    color: c.$colorPrimaryDark;
+  }
+
+  &.contrast {
+    color: c.$colorNeutralWhite;
+  }
+
+  &.inherit {
+    color: inherit;
+  }
+
+  > line {
+    animation-duration: $duration;
+    animation-name: fade;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+  }
+
+  @for $i from 1 through $itemsCnt {
+    > line:nth-child(#{$i}) {
+      animation-delay: $delayStep * ($i - 1);
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: $opacityMax;
+  }
+
+  50% {
+    opacity: $opacityMin;
+  }
+
+  100% {
+    opacity: $opacityMax;
+  }
+}

package/lib/components/Modal.js

@@ -1,17 +1,14 @@
-'use strict';
-
-var React = require('react');
-var ReactModal = require('react-modal');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var components_Button = require('./Button.js');
-var components_Icon = require('./Icon.js');
-var components_IconButton = require('./IconButton.js');
-var Modal_module = require('./Modal.module.scss.js');
-
+import React, { useMemo } from 'react';
+import ReactModal from 'react-modal';
+import cn from 'classnames';
+import { X } from 'react-feather';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import styles from './Modal.module.scss';
 // Direct re-exporting is breaking tests in MC
 // TODO: Investigate why
-const setAppElement = appElement => ReactModal.setAppElement(appElement);
+export const setAppElement = (appElement) => ReactModal.setAppElement(appElement);
 /*
  * ### Purpose
  * Occasionally there's a user-story that's not a part of the main user flow. Such action can be contained in a Modal.
@@ -24,85 +21,21 @@ const setAppElement = appElement => ReactModal.setAppElement(appElement);
  * - Content beneath the modal is covered by a "blanket".
  * - To close the Modal, use "Cancel" button in the footer, "X" button in the header, press "Esc" key or click anywhere on the "blanket".
  */
-const Modal = ({
-  'data-test': dataTest = 'modal',
-  actions,
-  hideActions = false,
-  autoFocus = true,
-  children,
-  className,
-  closable = true,
-  showCloseButton = true,
-  bodyClassName,
-  headerClassName,
-  contentClassName,
-  footerClassName,
-  icon,
-  iconAriaLabel,
-  onClose,
-  overlayClassName,
-  title,
-  ...rest
-}) => {
-  const shouldAutoFocusCancelButton = React.useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some(action => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
-  return /*#__PURE__*/React.createElement(ReactModal, {
-    portalClassName: Modal_module.default.portal,
-    className: cn(Modal_module.default.modal, className),
-    contentLabel: title,
-    onRequestClose: onClose,
-    overlayClassName: cn(Modal_module.default.overlay, overlayClassName),
-    shouldCloseOnEsc: closable,
-    shouldCloseOnOverlayClick: closable,
-    shouldFocusAfterRender: false,
-    shouldReturnFocusAfterClose: true,
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: Modal_module.default.outline
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn(Modal_module.default.body, bodyClassName)
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "modal-header",
-    className: cn(Modal_module.default.header, headerClassName)
-  }, icon && iconAriaLabel && /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": "modal-header-icon",
-    className: Modal_module.default.icon,
-    icon: icon,
-    ariaLabel: iconAriaLabel
-  }), /*#__PURE__*/React.createElement("h3", {
-    "data-test": "modal-header-title",
-    className: Modal_module.default.title
-  }, title), closable && showCloseButton && (
-  /*#__PURE__*/
-  // Note: Mostly a Dialog use-case. We want it to be closable, but we don't want to show an X button in the corner.
-  React.createElement("div", {
-    className: Modal_module.default.close
-  }, /*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    "data-test": `${dataTest}-button-close`,
-    kind: "transparent",
-    ariaLabel: "Close icon",
-    icon: reactFeather.X,
-    onClick: onClose
-  })))), /*#__PURE__*/React.createElement("div", {
-    "data-test": "modal-content",
-    className: cn(Modal_module.default.content, contentClassName)
-  }, children), !hideActions && (/*#__PURE__*/React.createElement("div", {
-    "data-test": "modal-footer",
-    className: cn(Modal_module.default.footer, footerClassName)
-  }, actions === null || actions === void 0 ? void 0 : actions.map(({
-    children,
-    ...actionPropsRest
-  }, key) => (/*#__PURE__*/React.createElement(components_Button.Button, {
-    key: key,
-    "data-test": "modal-button-action",
-    ...actionPropsRest
-  }, children))), /*#__PURE__*/React.createElement(components_Button.Button, {
-    autoFocus: shouldAutoFocusCancelButton,
-    "data-test": "modal-button-cancel",
-    variant: "outlined",
-    onClick: onClose
-  }, "Cancel")))));
+export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, title, ...rest }) => {
+    const shouldAutoFocusCancelButton = useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some((action) => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
+    return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
+        React.createElement("div", { className: styles.outline }),
+        React.createElement("div", { className: cn(styles.body, bodyClassName) },
+            React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
+                icon && iconAriaLabel && React.createElement(Icon, { "data-test": "modal-header-icon", className: styles.icon, icon: icon, ariaLabel: iconAriaLabel }),
+                React.createElement("h3", { "data-test": "modal-header-title", className: styles.title }, title),
+                closable && showCloseButton && (
+                // Note: Mostly a Dialog use-case. We want it to be closable, but we don't want to show an X button in the corner.
+                React.createElement("div", { className: styles.close },
+                    React.createElement(IconButton, { "data-test": `${dataTest}-button-close`, kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: onClose })))),
+            React.createElement("div", { "data-test": "modal-content", className: cn(styles.content, contentClassName) }, children),
+            !hideActions && (React.createElement("div", { "data-test": "modal-footer", className: cn(styles.footer, footerClassName) }, actions === null || actions === void 0 ? void 0 :
+                actions.map(({ children, ...actionPropsRest }, key) => (React.createElement(Button, { key: key, "data-test": "modal-button-action", ...actionPropsRest }, children))),
+                React.createElement(Button, { autoFocus: shouldAutoFocusCancelButton, "data-test": "modal-button-cancel", variant: "outlined", onClick: onClose }, "Cancel"))))));
 };
-
-exports.Modal = Modal;
-exports.setAppElement = setAppElement;
-//# sourceMappingURL=Modal.js.map
+//# sourceMappingURL=Modal.js.map

package/lib/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":[null],"names":["setAppElement","appElement","ReactModal","Modal","dataTest","actions","hideActions","autoFocus","children","className","closable","showCloseButton","bodyClassName","headerClassName","contentClassName","footerClassName","icon","iconAriaLabel","onClose","overlayClassName","title","rest","shouldAutoFocusCancelButton","useMemo","some","action","React","createElement","portalClassName","styles","portal","cn","modal","contentLabel","onRequestClose","overlay","shouldCloseOnEsc","shouldCloseOnOverlayClick","shouldFocusAfterRender","shouldReturnFocusAfterClose","outline","body","header","Icon","ariaLabel","close","IconButton","kind","X","onClick","content","footer","map","actionPropsRest","key","Button","variant"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,OAAO,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,UAAwC,MAAM,aAAa,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAGjC,OAAO,EAAE,MAAM,EAAsC,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAExC,8CAA8C;AAC9C,wBAAwB;AACxB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;AA0BvG;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,WAAW,EAAE,QAAQ,GAAG,OAAO,EAC/B,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,eAAe,GAAG,IAAI,EACtB,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,aAAa,EACb,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,2BAA2B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,CAAC,CAAA,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAA;IAEnI,OAAO,CACL,oBAAC,UAAU,IACT,eAAe,EAAE,MAAM,CAAC,MAAM,EAC9B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EACtC,YAAY,EAAE,KAAK,EACnB,cAAc,EAAE,OAAO,EACvB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,EACtD,gBAAgB,EAAE,QAAQ,EAC1B,yBAAyB,EAAE,QAAQ,EACnC,sBAAsB,EAAE,KAAK,EAC7B,2BAA2B,WACvB,IAAI;QAER,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAClC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;YAC5C,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;gBACxE,IAAI,IAAI,aAAa,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,GAAI;gBAC9H,yCAAc,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IACvD,KAAK,CACH;gBACJ,QAAQ,IAAI,eAAe,IAAI;gBAC9B,kHAAkH;gBAClH,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;oBAC1B,oBAAC,UAAU,iBAAY,GAAG,QAAQ,eAAe,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACtH,CACP,CACG;YACN,0CAAe,eAAe,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC3E,QAAQ,CACL;YACL,CAAC,WAAW,IAAI,CACf,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,IACxE,OAAO,aAAP,OAAO;gBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,oBAAC,MAAM,IAAC,GAAG,EAAE,GAAG,eAAY,qBAAqB,KAAK,eAAe,IAClE,QAAQ,CACF,CACV,CAAC;gBACF,oBAAC,MAAM,IAAC,SAAS,EAAE,2BAA2B,eAAY,qBAAqB,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,aAE1G,CACL,CACP,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Modal.module.scss

@@ -0,0 +1,109 @@
+@use 'sass:color';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.portal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: c.$zIndex1000;
+  pointer-events: none;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: color.adjust(c.$colorText, $alpha: -0.2);
+  pointer-events: all;
+}
+
+.modal {
+  background-color: c.$colorNeutralWhite;
+  border: none;
+  border-radius: c.$borderRadius;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: c.$modalWidth;
+  min-width: c.$modalMinWidth;
+  max-width: c.$modalMaxWidth;
+  max-height: c.$modalMaxHeight;
+  z-index: c.$zIndex1000;
+  padding: c.$grid * 5 0;
+  display: flex;
+  flex-direction: column;
+
+  .close {
+    position: absolute;
+    right: c.$grid * 1.5;
+    top: c.$grid * 2;
+  }
+
+  .outline {
+    position: absolute;
+    border-radius: c.$borderRadius;
+    pointer-events: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    z-index: c.$zIndex100;
+    visibility: hidden;
+
+    @include h.outlineSimple;
+  }
+
+  &:focus,
+  &.focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: transparent solid c.$outlineWidth;
+
+    .outline {
+      visibility: visible;
+    }
+  }
+
+  .body {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 0 c.$grid * 5;
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      margin: 0 c.$grid * 5 c.$grid * 5 0;
+
+      .icon {
+        margin-right: c.$grid * 2.5;
+      }
+
+      .title {
+        margin: 0;
+        word-break: break-all;
+      }
+    }
+
+    .content {
+      flex: 1;
+      overflow: auto;
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin: c.$grid * 5 0 c.$grid * 2.5;
+
+      & > button:not(:first-of-type) {
+        margin-left: c.$grid * 5;
+      }
+    }
+  }
+}

package/lib/components/Notification.js

@@ -1,77 +1,39 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var components_Icon = require('./Icon.js');
-var components_IconButton = require('./IconButton.js');
-var components_Link = require('./Link.js');
-var Notification_module = require('./Notification.module.scss.js');
-
-const NotificationIcon = {
-  success: {
-    icon: reactFeather.CheckCircle,
-    ariaLabel: 'Check circle icon'
-  },
-  info: {
-    icon: reactFeather.Info,
-    ariaLabel: 'Info circle icon'
-  },
-  warning: {
-    icon: reactFeather.AlertTriangle,
-    ariaLabel: 'Warning triangle icon'
-  },
-  error: {
-    icon: reactFeather.AlertCircle,
-    ariaLabel: 'Info error circle icon'
-  }
+import React from 'react';
+import cn from 'classnames';
+import { AlertTriangle, CheckCircle, AlertCircle, Info, ChevronRight, X } from 'react-feather';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import { Link } from './Link';
+import styles from './Notification.module.scss';
+export const NotificationIcon = {
+    success: {
+        icon: CheckCircle,
+        ariaLabel: 'Check circle icon',
+    },
+    info: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    warning: {
+        icon: AlertTriangle,
+        ariaLabel: 'Warning triangle icon',
+    },
+    error: {
+        icon: AlertCircle,
+        ariaLabel: 'Info error circle icon',
+    },
 };
-const Notification = ({
-  type,
-  children,
-  className,
-  link,
-  linkHref,
-  onClose
-}) => {
-  const {
-    icon,
-    ariaLabel
-  } = NotificationIcon[type];
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "notification",
-    className: cn(Notification_module.default.notification, {
-      [Notification_module.default.success]: type === 'success',
-      [Notification_module.default.info]: type === 'info',
-      [Notification_module.default.warning]: type === 'warning',
-      [Notification_module.default.error]: type === 'error'
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": "notification-icon",
-    ariaLabel: ariaLabel,
-    icon: icon,
-    className: Notification_module.default.icon
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-test": "notification-content",
-    className: Notification_module.default.content
-  }, children), link && linkHref && (/*#__PURE__*/React.createElement(components_Link.Link, {
-    "data-test": "notification-link",
-    component: "a",
-    size: "small",
-    className: Notification_module.default.link,
-    href: linkHref,
-    icon: reactFeather.ChevronRight,
-    ariaLabel: "Icon chevron right",
-    bold: true
-  }, link)), onClose && (/*#__PURE__*/React.createElement(components_IconButton.IconButton, {
-    "data-test": "notification-close",
-    className: Notification_module.default.closeButton,
-    icon: reactFeather.X,
-    onClick: onClose,
-    ariaLabel: "Notification close button"
-  })));
+export const Notification = ({ type, children, className, link, linkHref, onClose }) => {
+    const { icon, ariaLabel } = NotificationIcon[type];
+    return (React.createElement("div", { "data-test": "notification", className: cn(styles.notification, {
+            [styles.success]: type === 'success',
+            [styles.info]: type === 'info',
+            [styles.warning]: type === 'warning',
+            [styles.error]: type === 'error',
+        }, className) },
+        React.createElement(Icon, { "data-test": "notification-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
+        React.createElement("div", { "data-test": "notification-content", className: styles.content }, children),
+        link && linkHref && (React.createElement(Link, { "data-test": "notification-link", component: "a", size: "small", className: styles.link, href: linkHref, icon: ChevronRight, ariaLabel: "Icon chevron right", bold: true }, link)),
+        onClose && (React.createElement(IconButton, { "data-test": "notification-close", className: styles.closeButton, icon: X, onClick: onClose, ariaLabel: "Notification close button" }))));
 };
-
-exports.Notification = Notification;
-exports.NotificationIcon = NotificationIcon;
-//# sourceMappingURL=Notification.js.map
+//# sourceMappingURL=Notification.js.map

package/lib/components/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../src/components/Notification.tsx"],"sourcesContent":[null],"names":["NotificationIcon","success","icon","CheckCircle","ariaLabel","info","Info","warning","AlertTriangle","error","AlertCircle","Notification","type","children","className","link","linkHref","onClose","React","createElement","cn","styles","notification","Icon","content","Link","component","size","href","ChevronRight","bold","IconButton","closeButton","X","onClick"],"mappings":";;;;;;;;;;AAiBO,MAAMA,gBAAgB,GAA8D;AACzFC,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAEC,wBAAW;AACjBC,IAAAA,SAAS,EAAE;GACZ;AACDC,EAAAA,IAAI,EAAE;AACJH,IAAAA,IAAI,EAAEI,iBAAI;AACVF,IAAAA,SAAS,EAAE;GACZ;AACDG,EAAAA,OAAO,EAAE;AACPL,IAAAA,IAAI,EAAEM,0BAAa;AACnBJ,IAAAA,SAAS,EAAE;GACZ;AACDK,EAAAA,KAAK,EAAE;AACLP,IAAAA,IAAI,EAAEQ,wBAAW;AACjBN,IAAAA,SAAS,EAAE;AACZ;;AAoBI,MAAMO,YAAY,GAA0BA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;EAAEC,QAAQ;AAAEC,EAAAA;AAAO,CAAE,KAAI;EAC5G,MAAM;IAAEf,IAAI;AAAEE,IAAAA;AAAS,GAAE,GAAGJ,gBAAgB,CAACY,IAAI,CAAC;AAElD,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACY,cAAc;AACxBL,IAAAA,SAAS,EAAEM,EAAE,CACXC,2BAAM,CAACC,YAAY,EACnB;AACE,MAAA,CAACD,2BAAM,CAACpB,OAAO,GAAGW,IAAI,KAAK,SAAS;AACpC,MAAA,CAACS,2BAAM,CAAChB,IAAI,GAAGO,IAAI,KAAK,MAAM;AAC9B,MAAA,CAACS,2BAAM,CAACd,OAAO,GAAGK,IAAI,KAAK,SAAS;AACpC,MAAA,CAACS,2BAAM,CAACZ,KAAK,GAAGG,IAAI,KAAK;AAC1B,KAAA,EACDE,SAAS;AACV,GAAA,eAEDI,KAAA,CAAAC,aAAA,CAACI,oBAAI,EAAA;AAAA,IAAA,WAAA,EAAW,mBAAmB;AAACnB,IAAAA,SAAS,EAAEA,SAAS;AAAEF,IAAAA,IAAI,EAAEA,IAAI;IAAEY,SAAS,EAAEO,2BAAM,CAACnB;AAAI,GAAA,CAAI,eAChGgB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EAAe,sBAAsB;IAACL,SAAS,EAAEO,2BAAM,CAACG;AAAO,GAAA,EAC5DX,QAAQ,CACL,EACLE,IAAI,IAAIC,QAAQ,kBACfE,KAAA,CAAAC,aAAA,CAACM,oBAAI,EAAA;AAAA,IAAA,WAAA,EACO,mBAAmB;AAC7BC,IAAAA,SAAS,EAAC,GAAG;AACbC,IAAAA,IAAI,EAAC,OAAO;IACZb,SAAS,EAAEO,2BAAM,CAACN,IAAI;AACtBa,IAAAA,IAAI,EAAEZ,QAAQ;AACdd,IAAAA,IAAI,EAAE2B,yBAAY;AAClBzB,IAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,IAAAA,IAAI,EAAA;AAAA,GAAA,EAEHf,IAAI,CACA,CACR,EACAE,OAAO,kBACNC,KAAA,CAAAC,aAAA,CAACY,gCAAU,EAAA;AAAA,IAAA,WAAA,EACC,oBAAoB;IAC9BjB,SAAS,EAAEO,2BAAM,CAACW,WAAW;AAC7B9B,IAAAA,IAAI,EAAE+B,cAAC;AACPC,IAAAA,OAAO,EAAEjB,OAAO;AAChBb,IAAAA,SAAS,EAAC;GAA2B,CACrC,CACH,CACG;AAEV;;;;;"}
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAEhH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAS/C,MAAM,CAAC,MAAM,gBAAgB,GAA8D;IACzF,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,wBAAwB;KACpC;CACF,CAAA;AAmBD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAElD,OAAO,CACL,0CACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,YAAY,EACnB;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QAChG,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAC5D,QAAQ,CACL;QACL,IAAI,IAAI,QAAQ,IAAI,CACnB,oBAAC,IAAI,iBACO,mBAAmB,EAC7B,SAAS,EAAC,GAAG,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,UAEH,IAAI,CACA,CACR;QACA,OAAO,IAAI,CACV,oBAAC,UAAU,iBACC,oBAAoB,EAC9B,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2BAA2B,GACrC,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Notification.module.scss

@@ -0,0 +1,97 @@
+@use '../../styles/constants' as c;
+
+.notification {
+  display: flex;
+  align-items: flex-start;
+  padding: c.$grid * 2 c.$grid * 3;
+  border-radius: c.$borderRadiusNotification;
+
+  @include c.typographyBodySmall;
+
+  .icon {
+    flex: 0 0 auto;
+    margin-right: c.$grid * 2;
+  }
+
+  .content {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    /*
+     * Note:
+     * The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment and
+     * specific alignment differences between single-line and multi-line text content.
+     */
+    min-height: c.$grid * 6;
+  }
+
+  .link {
+    // Note: The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment.
+    min-height: c.$grid * 6;
+
+    // TODO: Improvisation. Consult with @pawel.
+    margin-left: c.$grid * 2;
+
+    @include c.typographyBodyWeight('bold');
+  }
+
+  .closeButton {
+    margin-left: c.$grid * 3;
+  }
+
+  /* Theme - success */
+  &.success {
+    color: c.$colorText;
+    background-color: c.$colorSuccessLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+
+  /* Theme - info */
+  &.info {
+    color: c.$colorText;
+    background-color: c.$colorInfoLight;
+
+    .icon {
+      color: c.$colorInfoDark;
+    }
+
+    .link {
+      color: c.$colorInfoDark;
+    }
+  }
+
+  /* Theme - warning */
+  &.warning {
+    color: c.$colorText;
+    background-color: c.$colorWarningLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+
+  /* Theme - error */
+  &.error {
+    color: c.$colorText;
+    background-color: c.$colorErrorLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .link {
+      color: c.$colorText;
+    }
+  }
+}

package/lib/components/NumberBadge.js

@@ -1,19 +1,8 @@
-'use strict';
-
-var React = require('react');
-var NumberBadge_module = require('./NumberBadge.module.scss.js');
-var cn = require('classnames');
-
-const NumberBadge = ({
-  number,
-  className
-}) => {
-  const formattedNumber = number <= 99 ? number.toString() : '+99';
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "number-badge",
-    className: cn(NumberBadge_module.default.numberBadge, className)
-  }, formattedNumber);
+import React from 'react';
+import styles from './NumberBadge.module.scss';
+import cn from 'classnames';
+export const NumberBadge = ({ number, className }) => {
+    const formattedNumber = number <= 99 ? number.toString() : '+99';
+    return (React.createElement("div", { "data-test": "number-badge", className: cn(styles.numberBadge, className) }, formattedNumber));
 };
-
-exports.NumberBadge = NumberBadge;
-//# sourceMappingURL=NumberBadge.js.map
+//# sourceMappingURL=NumberBadge.js.map

package/lib/components/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../src/components/NumberBadge.tsx"],"sourcesContent":[null],"names":["NumberBadge","number","className","formattedNumber","toString","React","createElement","cn","styles","numberBadge"],"mappings":";;;;;;AAUO,MAAMA,WAAW,GAAyBA,CAAC;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAAE,KAAI;AACzE,EAAA,MAAMC,eAAe,GAAWF,MAAM,IAAI,EAAE,GAAGA,MAAM,CAACG,QAAQ,EAAE,GAAG,KAAK;AAExE,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EAAe,cAAc;AAACJ,IAAAA,SAAS,EAAEK,EAAE,CAACC,0BAAM,CAACC,WAAW,EAAEP,SAAS;KACtEC,eAAe,CACZ;AAEV;;;;"}
+{"version":3,"file":"NumberBadge.js","sourceRoot":"","sources":["../../src/components/NumberBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAO3B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;IACzE,MAAM,eAAe,GAAW,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExE,OAAO,CACL,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,IACvE,eAAe,CACZ,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/NumberBadge.module.scss

@@ -0,0 +1,13 @@
+@use '../../styles/constants' as c;
+
+.numberBadge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: c.$borderRadiusBadge;
+  padding: 0 c.$grid * 1.25;
+  background-color: c.$colorNeutral;
+  color: c.$colorText;
+
+  @include c.typographyBodySmall;
+}