@highlight-ui/alert - npm Package Compare versions

Comparing version 7.0.1 to 7.0.2

dist/cjs/index.js

@@ -11,2 +11,3 @@ 'use strict';
 var button = require('@highlight-ui/button');
+var layout = require('@highlight-ui/layout');
 var utilsHooks = require('@highlight-ui/utils-hooks');
@@ -55,14 +56,2 @@ var utilsPortalManager = require('@highlight-ui/utils-portal-manager');
 }
-var styles$3 = {
-  "actionsContainer": "Actions-module__SdRTL5PY__v7-0-1"
-};
-function ActionsWithRef(_a, ref) {
-  var children = _a.children;
-  return React__default["default"].createElement("div", {
-    className: styles$3.actionsContainer,
-    ref: ref
-  }, children);
-}
-ActionsWithRef.displayName = 'Actions';
-var Actions = React__default["default"].forwardRef(ActionsWithRef);
 var statusToIconNameMap = {
@@ -78,29 +67,28 @@ highlight: 'info-circle',
 var styles$2 = {
-  "alert": "Alert-module__rScsAaPN__v7-0-1",
-  "alert-highlight": "Alert-module__2QTjEVq8__v7-0-1",
-  "alert-success": "Alert-module__xP1LHYht__v7-0-1",
-  "alert-warning": "Alert-module__IKBj6MlH__v7-0-1",
-  "alert-critical": "Alert-module__3i0wkJlm__v7-0-1",
-  "alertRow": "Alert-module__o1-KQl6h__v7-0-1",
-  "alertContent": "Alert-module__ts5gfJw1__v7-0-1",
-  "icon": "Alert-module__-xWWD5Pd__v7-0-1",
-  "alertBodyContainer": "Alert-module__C82f1g--__v7-0-1",
-  "alertFullWidth": "Alert-module__JjRJnmRM__v7-0-1",
-  "alertCloseButton": "Alert-module__cTL7gDvM__v7-0-1"
+  "alert": "Alert-module__rScsAaPN__v7-0-2",
+  "alert-highlight": "Alert-module__2QTjEVq8__v7-0-2",
+  "alert-success": "Alert-module__xP1LHYht__v7-0-2",
+  "alert-warning": "Alert-module__IKBj6MlH__v7-0-2",
+  "alert-critical": "Alert-module__3i0wkJlm__v7-0-2",
+  "alertFullWidth": "Alert-module__JjRJnmRM__v7-0-2",
+  "alertContent": "Alert-module__ts5gfJw1__v7-0-2",
+  "topPadding": "Alert-module__D1eHtukU__v7-0-2",
+  "icon": "Alert-module__-xWWD5Pd__v7-0-2",
+  "alertBodyContainer": "Alert-module__C82f1g--__v7-0-2"
 };
 function AlertWithRef(_a, ref) {
-  var _b;
+  var _b, _c;
   var actions = _a.actions,
     children = _a.children,
     className = _a.className,
-    _c = _a.enableCloseButton,
-    enableCloseButton = _c === void 0 ? false : _c,
-    _d = _a.fullWidth,
-    fullWidth = _d === void 0 ? false : _d,
+    _d = _a.enableCloseButton,
+    enableCloseButton = _d === void 0 ? false : _d,
+    _e = _a.fullWidth,
+    fullWidth = _e === void 0 ? false : _e,
     iconColor = _a.iconColor,
-    _e = _a.iconFamily,
-    iconFamily = _e === void 0 ? 'solid' : _e,
+    _f = _a.iconFamily,
+    iconFamily = _f === void 0 ? 'solid' : _f,
     iconName = _a.iconName,
-    _f = _a.iconSize,
-    iconSize = _f === void 0 ? 16 : _f,
+    _g = _a.iconSize,
+    iconSize = _g === void 0 ? 16 : _g,
     iconClassName = _a.iconClassName,
@@ -116,7 +104,10 @@ metadata = _a.metadata,
     className: classnames__default["default"](styles$2.alert, styles$2["alert-" + status], (_b = {}, _b[styles$2.alertFullWidth] = fullWidth, _b), className)
-  }, remainingProps, utilsCommons.parseMetadata(metadata)), React__default["default"].createElement("div", {
-    className: styles$2.alertRow
-  }, React__default["default"].createElement("div", {
-    className: styles$2.alertContent
-  }, React__default["default"].createElement(icon.Icon, {
+  }, remainingProps, utilsCommons.parseMetadata(metadata)), React__default["default"].createElement(layout.Stack, {
+    space: "spacing-4"
+  }, React__default["default"].createElement(layout.Inline, {
+    space: "spacing-4"
+  }, React__default["default"].createElement(layout.Inline, {
+    space: "spacing-1",
+    className: classnames__default["default"](styles$2.alertContent, (_c = {}, _c[styles$2.topPadding] = enableCloseButton, _c))
+  }, React__default["default"].createElement("span", null, React__default["default"].createElement(icon.Icon, {
     className: classnames__default["default"](styles$2.icon, iconClassName),
@@ -127,4 +118,4 @@ name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
     type: iconFamily
-  }), children && React__default["default"].createElement("div", {
-    className: styles$2.alertBodyContainer
+  })), children && React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$2.alertBodyContainer)
   }, children)), enableCloseButton && React__default["default"].createElement(button.IconButton, {
@@ -134,5 +125,4 @@ onClick: onClickCloseButton,
     icon: "times",
-    "aria-label": "close alert",
-    className: styles$2.alertCloseButton
-  })), actions && React__default["default"].createElement(Actions, null, actions));
+    "aria-label": "close alert"
+  })), actions && React__default["default"].createElement("div", null, actions)));
 }
@@ -142,23 +132,23 @@ AlertWithRef.displayName = 'Alert';
 var styles$1 = {
-  "heading-xsmall": "InlineAlertPopover-module__cpXFJDXJ__v7-0-1",
-  "heading-small": "InlineAlertPopover-module__IDbqwgsm__v7-0-1",
-  "heading-medium": "InlineAlertPopover-module__UcAjrDHn__v7-0-1",
-  "heading-large": "InlineAlertPopover-module__XcIm3Li4__v7-0-1",
-  "heading-xlarge": "InlineAlertPopover-module__XZOPhdP7__v7-0-1",
-  "heading-2xl": "InlineAlertPopover-module__Own1O-Qn__v7-0-1",
-  "body-small": "InlineAlertPopover-module__vIqgkrGw__v7-0-1",
-  "body-base": "InlineAlertPopover-module__WrHZdaem__v7-0-1",
-  "body-large": "InlineAlertPopover-module__kaLvlwTh__v7-0-1",
-  "body-strong-small": "InlineAlertPopover-module__YQ7r0Bw8__v7-0-1",
-  "body-strong-base": "InlineAlertPopover-module__dHBy-LIK__v7-0-1",
-  "body-strong-large": "InlineAlertPopover-module__cpIKlGZn__v7-0-1",
-  "page-heading": "InlineAlertPopover-module__OGG5oOA2__v7-0-1",
-  "button": "InlineAlertPopover-module__IWWK6Uyz__v7-0-1",
-  "popover": "InlineAlertPopover-module__mIMd-myB__v7-0-1",
-  "form-label": "InlineAlertPopover-module__VtxW8ibY__v7-0-1",
-  "caption": "InlineAlertPopover-module__RrqjvBon__v7-0-1",
-  "text-link-default": "InlineAlertPopover-module__HOvb2PdN__v7-0-1",
-  "text-link-hover": "InlineAlertPopover-module__PFwjMEZz__v7-0-1",
-  "table-data-regular": "InlineAlertPopover-module__Z6uejiTl__v7-0-1",
-  "table-data-bold": "InlineAlertPopover-module__EsIDKfaj__v7-0-1"
+  "heading-xsmall": "InlineAlertPopover-module__cpXFJDXJ__v7-0-2",
+  "heading-small": "InlineAlertPopover-module__IDbqwgsm__v7-0-2",
+  "heading-medium": "InlineAlertPopover-module__UcAjrDHn__v7-0-2",
+  "heading-large": "InlineAlertPopover-module__XcIm3Li4__v7-0-2",
+  "heading-xlarge": "InlineAlertPopover-module__XZOPhdP7__v7-0-2",
+  "heading-2xl": "InlineAlertPopover-module__Own1O-Qn__v7-0-2",
+  "body-small": "InlineAlertPopover-module__vIqgkrGw__v7-0-2",
+  "body-base": "InlineAlertPopover-module__WrHZdaem__v7-0-2",
+  "body-large": "InlineAlertPopover-module__kaLvlwTh__v7-0-2",
+  "body-strong-small": "InlineAlertPopover-module__YQ7r0Bw8__v7-0-2",
+  "body-strong-base": "InlineAlertPopover-module__dHBy-LIK__v7-0-2",
+  "body-strong-large": "InlineAlertPopover-module__cpIKlGZn__v7-0-2",
+  "page-heading": "InlineAlertPopover-module__OGG5oOA2__v7-0-2",
+  "button": "InlineAlertPopover-module__IWWK6Uyz__v7-0-2",
+  "popover": "InlineAlertPopover-module__mIMd-myB__v7-0-2",
+  "form-label": "InlineAlertPopover-module__VtxW8ibY__v7-0-2",
+  "caption": "InlineAlertPopover-module__RrqjvBon__v7-0-2",
+  "text-link-default": "InlineAlertPopover-module__HOvb2PdN__v7-0-2",
+  "text-link-hover": "InlineAlertPopover-module__PFwjMEZz__v7-0-2",
+  "table-data-regular": "InlineAlertPopover-module__Z6uejiTl__v7-0-2",
+  "table-data-bold": "InlineAlertPopover-module__EsIDKfaj__v7-0-2"
 };
@@ -180,7 +170,6 @@ function InlineAlertPopover(_a, ref) {
 var styles = {
-  "alertContainer": "InlineAlert-module__HIjXIvPW__v7-0-1",
-  "horizontalStack": "InlineAlert-module__cTi5hyBc__v7-0-1",
-  "icon": "InlineAlert-module__-3i3ylsB__v7-0-1",
-  "cursorPointer": "InlineAlert-module__xaqEN8rz__v7-0-1",
-  "supportText": "InlineAlert-module__McquLxFj__v7-0-1"
+  "alertContainer": "InlineAlert-module__HIjXIvPW__v7-0-2",
+  "cursorPointer": "InlineAlert-module__xaqEN8rz__v7-0-2",
+  "icon": "InlineAlert-module__-3i3ylsB__v7-0-2",
+  "supportText": "InlineAlert-module__McquLxFj__v7-0-2"
 };
@@ -227,3 +216,3 @@ var normalizeStatus = function (status) {
     ref: triggerRef,
-    className: classnames__default["default"](styles.horizontalStack, (_b = {}, _b[styles.cursorPointer] = popoverContent, _b)),
+    className: classnames__default["default"]((_b = {}, _b[styles.cursorPointer] = popoverContent, _b)),
     onClick: function () {
@@ -235,3 +224,5 @@ if (isPopoverVisible) {
     }
-  }, React__default["default"].createElement(icon.Icon, {
+  }, React__default["default"].createElement(layout.Inline, {
+    space: "spacing-1"
+  }, React__default["default"].createElement("span", null, React__default["default"].createElement(icon.Icon, {
     className: classnames__default["default"](styles.icon, iconClassName),
@@ -242,5 +233,5 @@ name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
     type: iconFamily !== null && iconFamily !== void 0 ? iconFamily : 'solid'
-  }), React__default["default"].createElement("div", {
-    className: styles.supportText
-  }, children)), popoverContent && isPopoverVisible && React__default["default"].createElement(utilsPortalManager.GroupedPortal, null, React__default["default"].createElement(InlineAlertPopover$1, {
+  })), children && React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles.supportText)
+  }, children))), popoverContent && isPopoverVisible && React__default["default"].createElement(utilsPortalManager.GroupedPortal, null, React__default["default"].createElement(InlineAlertPopover$1, {
     closeCallback: function () {
@@ -247,0 +238,0 @@ setPopoverVisibility(false);

dist/esm/index.js

@@ -6,2 +6,3 @@ import React, { useState } from 'react';
 import { IconButton } from '@highlight-ui/button';
+import { Stack, Inline } from '@highlight-ui/layout';
 import { useClickOutside, useForkRef, useAutoPosition } from '@highlight-ui/utils-hooks';
@@ -43,14 +44,2 @@ import { GroupedPortal } from '@highlight-ui/utils-portal-manager';
 }
-var styles$3 = {
-  "actionsContainer": "Actions-module__SdRTL5PY__v7-0-1"
-};
-function ActionsWithRef(_a, ref) {
-  var children = _a.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$3.actionsContainer,
-    ref: ref
-  }, children);
-}
-ActionsWithRef.displayName = 'Actions';
-var Actions = /*#__PURE__*/React.forwardRef(ActionsWithRef);
 var statusToIconNameMap = {
@@ -66,29 +55,28 @@ highlight: 'info-circle',
 var styles$2 = {
-  "alert": "Alert-module__rScsAaPN__v7-0-1",
-  "alert-highlight": "Alert-module__2QTjEVq8__v7-0-1",
-  "alert-success": "Alert-module__xP1LHYht__v7-0-1",
-  "alert-warning": "Alert-module__IKBj6MlH__v7-0-1",
-  "alert-critical": "Alert-module__3i0wkJlm__v7-0-1",
-  "alertRow": "Alert-module__o1-KQl6h__v7-0-1",
-  "alertContent": "Alert-module__ts5gfJw1__v7-0-1",
-  "icon": "Alert-module__-xWWD5Pd__v7-0-1",
-  "alertBodyContainer": "Alert-module__C82f1g--__v7-0-1",
-  "alertFullWidth": "Alert-module__JjRJnmRM__v7-0-1",
-  "alertCloseButton": "Alert-module__cTL7gDvM__v7-0-1"
+  "alert": "Alert-module__rScsAaPN__v7-0-2",
+  "alert-highlight": "Alert-module__2QTjEVq8__v7-0-2",
+  "alert-success": "Alert-module__xP1LHYht__v7-0-2",
+  "alert-warning": "Alert-module__IKBj6MlH__v7-0-2",
+  "alert-critical": "Alert-module__3i0wkJlm__v7-0-2",
+  "alertFullWidth": "Alert-module__JjRJnmRM__v7-0-2",
+  "alertContent": "Alert-module__ts5gfJw1__v7-0-2",
+  "topPadding": "Alert-module__D1eHtukU__v7-0-2",
+  "icon": "Alert-module__-xWWD5Pd__v7-0-2",
+  "alertBodyContainer": "Alert-module__C82f1g--__v7-0-2"
 };
 function AlertWithRef(_a, ref) {
-  var _b;
+  var _b, _c;
   var actions = _a.actions,
     children = _a.children,
     className = _a.className,
-    _c = _a.enableCloseButton,
-    enableCloseButton = _c === void 0 ? false : _c,
-    _d = _a.fullWidth,
-    fullWidth = _d === void 0 ? false : _d,
+    _d = _a.enableCloseButton,
+    enableCloseButton = _d === void 0 ? false : _d,
+    _e = _a.fullWidth,
+    fullWidth = _e === void 0 ? false : _e,
     iconColor = _a.iconColor,
-    _e = _a.iconFamily,
-    iconFamily = _e === void 0 ? 'solid' : _e,
+    _f = _a.iconFamily,
+    iconFamily = _f === void 0 ? 'solid' : _f,
     iconName = _a.iconName,
-    _f = _a.iconSize,
-    iconSize = _f === void 0 ? 16 : _f,
+    _g = _a.iconSize,
+    iconSize = _g === void 0 ? 16 : _g,
     iconClassName = _a.iconClassName,
@@ -104,7 +92,10 @@ metadata = _a.metadata,
     className: classnames(styles$2.alert, styles$2["alert-" + status], (_b = {}, _b[styles$2.alertFullWidth] = fullWidth, _b), className)
-  }, remainingProps, parseMetadata(metadata)), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.alertRow
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.alertContent
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, remainingProps, parseMetadata(metadata)), /*#__PURE__*/React.createElement(Stack, {
+    space: "spacing-4"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "spacing-4"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "spacing-1",
+    className: classnames(styles$2.alertContent, (_c = {}, _c[styles$2.topPadding] = enableCloseButton, _c))
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
     className: classnames(styles$2.icon, iconClassName),
@@ -115,4 +106,4 @@ name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
     type: iconFamily
-  }), children && /*#__PURE__*/React.createElement("div", {
-    className: styles$2.alertBodyContainer
+  })), children && /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles$2.alertBodyContainer)
   }, children)), enableCloseButton && /*#__PURE__*/React.createElement(IconButton, {
@@ -122,5 +113,4 @@ onClick: onClickCloseButton,
     icon: "times",
-    "aria-label": "close alert",
-    className: styles$2.alertCloseButton
-  })), actions && /*#__PURE__*/React.createElement(Actions, null, actions));
+    "aria-label": "close alert"
+  })), actions && /*#__PURE__*/React.createElement("div", null, actions)));
 }
@@ -130,23 +120,23 @@ AlertWithRef.displayName = 'Alert';
 var styles$1 = {
-  "heading-xsmall": "InlineAlertPopover-module__cpXFJDXJ__v7-0-1",
-  "heading-small": "InlineAlertPopover-module__IDbqwgsm__v7-0-1",
-  "heading-medium": "InlineAlertPopover-module__UcAjrDHn__v7-0-1",
-  "heading-large": "InlineAlertPopover-module__XcIm3Li4__v7-0-1",
-  "heading-xlarge": "InlineAlertPopover-module__XZOPhdP7__v7-0-1",
-  "heading-2xl": "InlineAlertPopover-module__Own1O-Qn__v7-0-1",
-  "body-small": "InlineAlertPopover-module__vIqgkrGw__v7-0-1",
-  "body-base": "InlineAlertPopover-module__WrHZdaem__v7-0-1",
-  "body-large": "InlineAlertPopover-module__kaLvlwTh__v7-0-1",
-  "body-strong-small": "InlineAlertPopover-module__YQ7r0Bw8__v7-0-1",
-  "body-strong-base": "InlineAlertPopover-module__dHBy-LIK__v7-0-1",
-  "body-strong-large": "InlineAlertPopover-module__cpIKlGZn__v7-0-1",
-  "page-heading": "InlineAlertPopover-module__OGG5oOA2__v7-0-1",
-  "button": "InlineAlertPopover-module__IWWK6Uyz__v7-0-1",
-  "popover": "InlineAlertPopover-module__mIMd-myB__v7-0-1",
-  "form-label": "InlineAlertPopover-module__VtxW8ibY__v7-0-1",
-  "caption": "InlineAlertPopover-module__RrqjvBon__v7-0-1",
-  "text-link-default": "InlineAlertPopover-module__HOvb2PdN__v7-0-1",
-  "text-link-hover": "InlineAlertPopover-module__PFwjMEZz__v7-0-1",
-  "table-data-regular": "InlineAlertPopover-module__Z6uejiTl__v7-0-1",
-  "table-data-bold": "InlineAlertPopover-module__EsIDKfaj__v7-0-1"
+  "heading-xsmall": "InlineAlertPopover-module__cpXFJDXJ__v7-0-2",
+  "heading-small": "InlineAlertPopover-module__IDbqwgsm__v7-0-2",
+  "heading-medium": "InlineAlertPopover-module__UcAjrDHn__v7-0-2",
+  "heading-large": "InlineAlertPopover-module__XcIm3Li4__v7-0-2",
+  "heading-xlarge": "InlineAlertPopover-module__XZOPhdP7__v7-0-2",
+  "heading-2xl": "InlineAlertPopover-module__Own1O-Qn__v7-0-2",
+  "body-small": "InlineAlertPopover-module__vIqgkrGw__v7-0-2",
+  "body-base": "InlineAlertPopover-module__WrHZdaem__v7-0-2",
+  "body-large": "InlineAlertPopover-module__kaLvlwTh__v7-0-2",
+  "body-strong-small": "InlineAlertPopover-module__YQ7r0Bw8__v7-0-2",
+  "body-strong-base": "InlineAlertPopover-module__dHBy-LIK__v7-0-2",
+  "body-strong-large": "InlineAlertPopover-module__cpIKlGZn__v7-0-2",
+  "page-heading": "InlineAlertPopover-module__OGG5oOA2__v7-0-2",
+  "button": "InlineAlertPopover-module__IWWK6Uyz__v7-0-2",
+  "popover": "InlineAlertPopover-module__mIMd-myB__v7-0-2",
+  "form-label": "InlineAlertPopover-module__VtxW8ibY__v7-0-2",
+  "caption": "InlineAlertPopover-module__RrqjvBon__v7-0-2",
+  "text-link-default": "InlineAlertPopover-module__HOvb2PdN__v7-0-2",
+  "text-link-hover": "InlineAlertPopover-module__PFwjMEZz__v7-0-2",
+  "table-data-regular": "InlineAlertPopover-module__Z6uejiTl__v7-0-2",
+  "table-data-bold": "InlineAlertPopover-module__EsIDKfaj__v7-0-2"
 };
@@ -168,7 +158,6 @@ function InlineAlertPopover(_a, ref) {
 var styles = {
-  "alertContainer": "InlineAlert-module__HIjXIvPW__v7-0-1",
-  "horizontalStack": "InlineAlert-module__cTi5hyBc__v7-0-1",
-  "icon": "InlineAlert-module__-3i3ylsB__v7-0-1",
-  "cursorPointer": "InlineAlert-module__xaqEN8rz__v7-0-1",
-  "supportText": "InlineAlert-module__McquLxFj__v7-0-1"
+  "alertContainer": "InlineAlert-module__HIjXIvPW__v7-0-2",
+  "cursorPointer": "InlineAlert-module__xaqEN8rz__v7-0-2",
+  "icon": "InlineAlert-module__-3i3ylsB__v7-0-2",
+  "supportText": "InlineAlert-module__McquLxFj__v7-0-2"
 };
@@ -215,3 +204,3 @@ var normalizeStatus = function (status) {
     ref: triggerRef,
-    className: classnames(styles.horizontalStack, (_b = {}, _b[styles.cursorPointer] = popoverContent, _b)),
+    className: classnames((_b = {}, _b[styles.cursorPointer] = popoverContent, _b)),
     onClick: function () {
@@ -223,3 +212,5 @@ if (isPopoverVisible) {
     }
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "spacing-1"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
     className: classnames(styles.icon, iconClassName),
@@ -230,5 +221,5 @@ name: iconName !== null && iconName !== void 0 ? iconName : statusIconName,
     type: iconFamily !== null && iconFamily !== void 0 ? iconFamily : 'solid'
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.supportText
-  }, children)), popoverContent && isPopoverVisible && /*#__PURE__*/React.createElement(GroupedPortal, null, /*#__PURE__*/React.createElement(InlineAlertPopover$1, {
+  })), children && /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.supportText)
+  }, children))), popoverContent && isPopoverVisible && /*#__PURE__*/React.createElement(GroupedPortal, null, /*#__PURE__*/React.createElement(InlineAlertPopover$1, {
     closeCallback: function () {
@@ -235,0 +226,0 @@ setPopoverVisibility(false);

package.json

 {
   "name": "@highlight-ui/alert",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "author": "Personio GmbH & Co. KG",
@@ -46,2 +46,3 @@ "main": "dist/cjs/index.js",
     "@highlight-ui/icon": "^5.1.0",
+    "@highlight-ui/layout": "^0.4.2",
     "@highlight-ui/utils-commons": "^2.3.8",
@@ -55,3 +56,3 @@ "@highlight-ui/utils-hooks": "^3.2.21",
   },
-  "gitHead": "dfee0112d559dc70f599449597d6821e76f19f24"
+  "gitHead": "fa55c3abf24a363c6b12bb1c93ea2a7549927bd0"
 }

README.md

@@ -48,2 +48,27 @@ [![npm](https://img.shields.io/npm/v/@highlight-ui/alert)](https://www.npmjs.com/package/@highlight-ui/alert)
 
+⚠️⚠️⚠️⚠️ As of version `7.0.0` on both Alert and InlineAlert the pre-defined typographic style on children are removed. ⚠️⚠️⚠️⚠️
+so for the component to work properly use next suggestion as an example
+In your (S)CSS file:
+
+```scss
+@import url('@highlight-ui/alert');
+@import url('@highlight-ui/typography');
+```
+
+In your TS(X) file:
+
+```tsx
+import React, { useState } from 'react';
+import { Body } from '@highlight-ui/typography';
+import { Alert } from '@highlight-ui/alert';
+
+export default function AlertExample() {
+  return (
+    <Alert status="highlight">
+      <Body color="text-default">This is an alert!</Body>
+    </Alert>
+  );
+}
+```
+
 ## Props 📜
@@ -50,0 +75,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

99

increased by33.78%

Worsened metrics

Total package byte prevSize

127321

decreased by-0.58%

Dependency count

8

increased by14.29%

Number of package files

23

decreased by-8%

Lines of code

1248

decreased by-6.02%

Dependency changes

• + Added@highlight-ui/layout@^0.4.2

• + Added@highlight-ui/button@12.2.6(transitive)

• + Added@highlight-ui/icon@5.3.4(transitive)

• + Added@highlight-ui/layout@0.4.120.6.5(transitive)

• + Added@highlight-ui/typography@6.3.5(transitive)

• - Removed@highlight-ui/button@12.2.8(transitive)

• - Removed@highlight-ui/icon@5.3.6(transitive)

• - Removed@highlight-ui/layout@0.6.7(transitive)

• - Removed@highlight-ui/typography@6.3.7(transitive)