@bbl-digital/snorre 4.0.24 → 4.0.26

package/esm/core/NotificationsMenu/NotificationRow/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Button from '../../Button';
 import Text from '../../Text';
-import { Wrapper } from './styles';
+import { StyledButton, TextContent, Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const NotificationRow = ({
@@ -9,19 +8,26 @@ const NotificationRow = ({
   description,
   icon,
   hideBorderBottom,
+  extraInfo,
   onClick
-}) => /*#__PURE__*/_jsx(Button, {
+}) => /*#__PURE__*/_jsx(StyledButton, {
   nostyle: true,
   onClick: onClick,
   children: /*#__PURE__*/_jsxs(Wrapper, {
     hideBorderBottom: hideBorderBottom,
-    children: [icon, /*#__PURE__*/_jsxs(Text, {
-      size: "14px",
-      children: [/*#__PURE__*/_jsx(Text, {
-        size: "14px",
-        semibold: true,
-        children: title
-      }), ' ' + description]
+    children: [icon, /*#__PURE__*/_jsxs(TextContent, {
+      children: [extraInfo && /*#__PURE__*/_jsx(Text, {
+        subtle: true,
+        small: true,
+        children: extraInfo
+      }), /*#__PURE__*/_jsxs(Text, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(Text, {
+          small: true,
+          semibold: true,
+          children: title
+        }), ' ' + description]
+      })]
     })]
   })
 });

package/esm/core/NotificationsMenu/NotificationRow/styles.js

@@ -1,8 +1,38 @@
 import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import { css } from '@emotion/react';
+import Button from '../../Button';
 export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "exqwsp82"
+} : {
+  target: "exqwsp82",
+  label: "Wrapper"
+})(props => /*#__PURE__*/css("display:flex;gap:0.5rem;justify-content:start;padding:1rem 0;border-bottom:", props.hideBorderBottom ? 'none' : '1px solid #d8e4f9', ";svg{margin-top:3px;min-width:14px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGhpZGVCb3JkZXJCb3R0b20/OiBib29sZWFuIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgcGFkZGluZzogMXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206ICR7cHJvcHMuaGlkZUJvcmRlckJvdHRvbSA/ICdub25lJyA6ICcxcHggc29saWQgI2Q4ZTRmOSd9O1xuXG4gICAgc3ZnIHtcbiAgICAgIG1hcmdpbi10b3A6IDNweDtcbiAgICAgIG1pbi13aWR0aDogMTRweDtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFRleHRDb250ZW50ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJiA+IHNwYW4ge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAmID4gc3BhbiB7XG4gICAgICBmb250LXdlaWdodDogNjAwO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgd2lkdGg6IDEwMCU7XG4gICYgPiBzcGFuIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYFxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGhpZGVCb3JkZXJCb3R0b20/OiBib29sZWFuIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgcGFkZGluZzogMXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206ICR7cHJvcHMuaGlkZUJvcmRlckJvdHRvbSA/ICdub25lJyA6ICcxcHggc29saWQgI2Q4ZTRmOSd9O1xuXG4gICAgc3ZnIHtcbiAgICAgIG1hcmdpbi10b3A6IDNweDtcbiAgICAgIG1pbi13aWR0aDogMTRweDtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFRleHRDb250ZW50ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJiA+IHNwYW4ge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAmID4gc3BhbiB7XG4gICAgICBmb250LXdlaWdodDogNjAwO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgd2lkdGg6IDEwMCU7XG4gICYgPiBzcGFuIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYFxuIl19 */");
+export const TextContent = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "exqwsp81"
+} : {
+  target: "exqwsp81",
+  label: "TextContent"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vmat21",
+  styles: "display:flex;flex-direction:column;text-align:left;&>span{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}"
+} : {
+  name: "1vmat21",
+  styles: "display:flex;flex-direction:column;text-align:left;&>span{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJzQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Ob3RpZmljYXRpb25zTWVudS9Ob3RpZmljYXRpb25Sb3cvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vQnV0dG9uJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgICBtaW4td2lkdGg6IDE0cHg7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUZXh0Q29udGVudCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuXG4gICYgPiBzcGFuIHtcbiAgICBsaW5lLWhlaWdodDogMS41ZW07XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuXG4gICAgJiA+IHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbilgXG4gIHdpZHRoOiAxMDAlO1xuICAmID4gc3BhbiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const StyledButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "exqwsp80"
 } : {
   target: "exqwsp80",
-  label: "Wrapper"
-})(props => /*#__PURE__*/css("display:flex;gap:0.5rem;justify-content:start;padding:1rem 0;border-bottom:", props.hideBorderBottom ? 'none' : '1px solid #d8e4f9', ";svg{margin-top:3px;}&>span:last-of-type{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSWdEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgfVxuXG4gICAgJiA+IHNwYW46bGFzdC1vZi10eXBlIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAgICYgPiBzcGFuIHtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICBgXG4pXG4iXX0= */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgfVxuXG4gICAgJiA+IHNwYW46bGFzdC1vZi10eXBlIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAgICYgPiBzcGFuIHtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICBgXG4pXG4iXX0= */");
+  label: "StyledButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13nmmot",
+  styles: "width:100%;&>span{width:100%;}"
+} : {
+  name: "13nmmot",
+  styles: "width:100%;&>span{width:100%;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUMwQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Ob3RpZmljYXRpb25zTWVudS9Ob3RpZmljYXRpb25Sb3cvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vQnV0dG9uJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgICBtaW4td2lkdGg6IDE0cHg7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUZXh0Q29udGVudCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuXG4gICYgPiBzcGFuIHtcbiAgICBsaW5lLWhlaWdodDogMS41ZW07XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuXG4gICAgJiA+IHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbilgXG4gIHdpZHRoOiAxMDAlO1xuICAmID4gc3BhbiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/esm/core/NotificationsMenu/NotificationsMenu.stories.js

@@ -12,7 +12,7 @@ export default meta;
 export const Default = {
   name: 'Default',
   args: {
-    unread: false,
+    unreadCount: 0,
     onBellClick: () => console.log('bell click'),
     children: 'Her kan man legge hva man vil'
   }
@@ -20,7 +20,7 @@ export const Default = {
 export const UnreadNotification = {
   name: 'Unread notification',
   args: {
-    unread: true,
+    unreadCount: 5,
     onBellClick: () => console.log('bell click'),
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(NotificationRow, {
@@ -32,12 +32,13 @@ export const UnreadNotification = {
         }),
         onClick: () => console.log('hi')
       }), /*#__PURE__*/_jsx(NotificationRow, {
-        title: "Dette er en test",
-        description: "beskrivelse kommer her",
+        title: "Oppslagets tittel",
+        description: "- Det er nye kommentarer p\xE5 oppslaget",
         icon: /*#__PURE__*/_jsx(IconAttachment, {
           size: "14px",
           primary: true
         }),
+        extraInfo: "Andeby borettslag",
         onClick: () => console.log('hi')
       }), /*#__PURE__*/_jsx(NotificationRow, {
         title: "Dette er en test",
@@ -46,6 +47,7 @@ export const UnreadNotification = {
           size: "14px",
           primary: true
         }),
+        hideBorderBottom: true,
         onClick: () => console.log('hi')
       })]
     })

package/esm/core/NotificationsMenu/index.js

@@ -3,16 +3,20 @@ import { NotificationsWrapper, NotificationsContent, UnreadMark } from './styles
 import Button from '../Button';
 import IconBellOutline from '../../icons/General/IconBellOutline';
 import IconBellFilled from '../../icons/General/IconBellFilled';
+import Text from '../Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const NotificationsMenu = ({
-  unread,
+  unreadCount,
   triggerClose,
+  radius,
   children,
   onBellClick
 }) => {
   const ref = /*#__PURE__*/createRef();
   const [open, setOpen] = useState(false);
+  const hasUnread = Boolean(unreadCount);
+  const maxUnreadCount = 99;
   useEffect(() => {
     const handleClickOutside = e => {
       const node = ref.current;
@@ -43,12 +47,19 @@ const NotificationsMenu = ({
     children: [/*#__PURE__*/_jsxs(Button, {
       nostyle: true,
       onClick: onClick,
-      children: [unread ? /*#__PURE__*/_jsx(IconBellOutline, {
+      children: [hasUnread ? /*#__PURE__*/_jsx(IconBellOutline, {
         secondary: true
-      }) : /*#__PURE__*/_jsx(IconBellFilled, {}), unread && /*#__PURE__*/_jsx(UnreadMark, {})]
+      }) : /*#__PURE__*/_jsx(IconBellFilled, {}), hasUnread && /*#__PURE__*/_jsx(UnreadMark, {
+        children: /*#__PURE__*/_jsx(Text, {
+          size: "12px",
+          color: "white",
+          children: unreadCount <= maxUnreadCount ? unreadCount : maxUnreadCount
+        })
+      })]
     }), open && /*#__PURE__*/_jsx("span", {
       ref: ref,
       children: /*#__PURE__*/_jsx(NotificationsContent, {
+        $radius: radius,
         children: children
       })
     })]

package/esm/core/NotificationsMenu/styles.js

@@ -11,7 +11,7 @@ export const NotificationsWrapper = /*#__PURE__*/_styled("div", process.env.NODE
 } : {
   name: "1ivkyd7",
   styles: "position:relative;display:flex;flex-direction:row;&>svg{margin-left:0.5em;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICByaWdodDogMDtcbiAgdG9wOiAzMHB4O1xuXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHdpZHRoOiAzMDBweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NmZDllYTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICBib3gtc2hhZG93OiAwIDEwcHggMTVweCAwIHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMC41ZW0gMWVtO1xuYFxuXG5leHBvcnQgY29uc3QgVW5yZWFkTWFyayA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnl9O1xuICBoZWlnaHQ6IDEwcHg7XG4gIHdpZHRoOiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2PHsgJHJhZGl1cz86IHN0cmluZyB9PmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgJHJhZGl1cyB9KSA9PiAkcmFkaXVzIHx8ICcxMHB4J307XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB0b3A6IC02cHg7XG4gIGxlZnQ6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucHJpbWFyeTVkYXJrZXJ9O1xuICBoZWlnaHQ6IDE4cHg7XG4gIHdpZHRoOiAxOHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const NotificationsContent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -19,20 +19,14 @@ export const NotificationsContent = /*#__PURE__*/_styled("div", process.env.NODE
 } : {
   target: "ebh5fga1",
   label: "NotificationsContent"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1141e4r",
-  styles: "position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:10px;overflow:hidden;padding:0.5em 1em"
-} : {
-  name: "1141e4r",
-  styles: "position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:10px;overflow:hidden;padding:0.5em 1em",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICByaWdodDogMDtcbiAgdG9wOiAzMHB4O1xuXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHdpZHRoOiAzMDBweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NmZDllYTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICBib3gtc2hhZG93OiAwIDEwcHggMTVweCAwIHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMC41ZW0gMWVtO1xuYFxuXG5leHBvcnQgY29uc3QgVW5yZWFkTWFyayA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnl9O1xuICBoZWlnaHQ6IDEwcHg7XG4gIHdpZHRoOiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:", ({
+  $radius
+}) => $radius || '10px', ";overflow:hidden;padding:0.5em 1em;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhb0UiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2PHsgJHJhZGl1cz86IHN0cmluZyB9PmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgJHJhZGl1cyB9KSA9PiAkcmFkaXVzIHx8ICcxMHB4J307XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB0b3A6IC02cHg7XG4gIGxlZnQ6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucHJpbWFyeTVkYXJrZXJ9O1xuICBoZWlnaHQ6IDE4cHg7XG4gIHdpZHRoOiAxOHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */"));
 export const UnreadMark = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ebh5fga0"
 } : {
   target: "ebh5fga0",
   label: "UnreadMark"
-})("position:absolute;top:-2px;left:10px;background:", ({
+})("position:absolute;display:flex;align-items:center;justify-content:center;top:-6px;left:10px;background:", ({
   theme
-}) => theme.primary, ";height:10px;width:10px;border-radius:10px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Qm9DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcblxuICAmID4gc3ZnIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbnNDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTJweDtcbiAgbGVmdDogMTBweDtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wcmltYXJ5fTtcbiAgaGVpZ2h0OiAxMHB4O1xuICB3aWR0aDogMTBweDtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbmBcbiJdfQ== */"));
+}) => theme.primary5darker, ";height:18px;width:18px;border-radius:10px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Qm9DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcblxuICAmID4gc3ZnIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbnNDb250ZW50ID0gc3R5bGVkLmRpdjx7ICRyYWRpdXM/OiBzdHJpbmcgfT5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIHJpZ2h0OiAwO1xuICB0b3A6IDMwcHg7XG5cbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgd2lkdGg6IDMwMHB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAjY2ZkOWVhO1xuXG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gIGJveC1zaGFkb3c6IDAgMTBweCAxNXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItcmFkaXVzOiAkeyh7ICRyYWRpdXMgfSkgPT4gJHJhZGl1cyB8fCAnMTBweCd9O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAwLjVlbSAxZW07XG5gXG5cbmV4cG9ydCBjb25zdCBVbnJlYWRNYXJrID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgdG9wOiAtNnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnk1ZGFya2VyfTtcbiAgaGVpZ2h0OiAxOHB4O1xuICB3aWR0aDogMThweDtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbmBcbiJdfQ== */"));

package/lib/core/NotificationsMenu/NotificationRow/index.d.ts

@@ -8,9 +8,11 @@ declare type IProps = {
     icon: React.ReactNode;
     /** Hide border bottom on row  */
     hideBorderBottom?: boolean;
+    /** Extra info on top of row  */
+    extraInfo?: string;
     /** On click on notification row */
     onClick: () => void;
 };
-declare const NotificationRow: ({ title, description, icon, hideBorderBottom, onClick, }: IProps) => React.JSX.Element;
+declare const NotificationRow: ({ title, description, icon, hideBorderBottom, extraInfo, onClick, }: IProps) => React.JSX.Element;
 export default NotificationRow;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/NotificationsMenu/NotificationRow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/NotificationsMenu/NotificationRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,aAAK,MAAM,GAAG;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAA;IACnB,sCAAsC;IACtC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,eAAe,6DAMlB,MAAM,sBAYR,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/NotificationsMenu/NotificationRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,aAAK,MAAM,GAAG;IACZ,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAA;IACnB,sCAAsC;IACtC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iCAAiC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,eAAe,wEAOlB,MAAM,sBAmBR,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/core/NotificationsMenu/NotificationRow/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import Button from '../../Button';
 import Text from '../../Text';
-import { Wrapper } from './styles';
+import { StyledButton, TextContent, Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const NotificationRow = ({
@@ -9,19 +8,26 @@ const NotificationRow = ({
   description,
   icon,
   hideBorderBottom,
+  extraInfo,
   onClick
-}) => /*#__PURE__*/_jsx(Button, {
+}) => /*#__PURE__*/_jsx(StyledButton, {
   nostyle: true,
   onClick: onClick,
   children: /*#__PURE__*/_jsxs(Wrapper, {
     hideBorderBottom: hideBorderBottom,
-    children: [icon, /*#__PURE__*/_jsxs(Text, {
-      size: "14px",
-      children: [/*#__PURE__*/_jsx(Text, {
-        size: "14px",
-        semibold: true,
-        children: title
-      }), ' ' + description]
+    children: [icon, /*#__PURE__*/_jsxs(TextContent, {
+      children: [extraInfo && /*#__PURE__*/_jsx(Text, {
+        subtle: true,
+        small: true,
+        children: extraInfo
+      }), /*#__PURE__*/_jsxs(Text, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(Text, {
+          small: true,
+          semibold: true,
+          children: title
+        }), ' ' + description]
+      })]
     })]
   })
 });

package/lib/core/NotificationsMenu/NotificationRow/styles.d.ts

@@ -5,4 +5,49 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 } & {
     hideBorderBottom?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<import("../../private/ButtonOrLink").ButtonOrLinkTypes> & {
+    afterIcon?: import("react").ReactNode;
+    beforeIcon?: import("react").ReactNode;
+    children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    loading?: boolean | undefined;
+    onClick?: ((event: import("react").MouseEvent<import("../../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onMouseUp?: ((event: import("react").MouseEvent<import("../../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    onCustomKeyPress?: {
+        key: string;
+        action: (event: KeyboardEvent) => void;
+    } | undefined;
+    onKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
+    openInNewWindow?: boolean | undefined;
+    rel?: string | undefined;
+    trackingEvent?: string | undefined;
+    trackingName?: string | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
+    target?: string | undefined;
+    download?: any;
+    tabIndex?: number | undefined;
+} & {
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    highlight?: boolean | undefined;
+    outline?: boolean | undefined;
+    nostyle?: boolean | undefined;
+    focusable?: boolean | undefined;
+    border?: string | undefined;
+    css?: import("@emotion/utils").SerializedStyles | undefined;
+    loading?: boolean | undefined;
+    back?: boolean | undefined;
+    small?: boolean | undefined;
+    transparentBg?: boolean | undefined;
+    tabIndex?: number | undefined;
+} & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/core/NotificationsMenu/NotificationRow/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/NotificationsMenu/NotificationRow/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,OAAO;;;;;yGAwBnB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/NotificationsMenu/NotificationRow/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;yGAanB,CAAA;AAED,eAAO,MAAM,WAAW;;;2GAgBvB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAKxB,CAAA"}

package/lib/core/NotificationsMenu/NotificationRow/styles.js

@@ -1,8 +1,38 @@
 import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import { css } from '@emotion/react';
+import Button from '../../Button';
 export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "exqwsp82"
+} : {
+  target: "exqwsp82",
+  label: "Wrapper"
+})(props => /*#__PURE__*/css("display:flex;gap:0.5rem;justify-content:start;padding:1rem 0;border-bottom:", props.hideBorderBottom ? 'none' : '1px solid #d8e4f9', ";svg{margin-top:3px;min-width:14px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGhpZGVCb3JkZXJCb3R0b20/OiBib29sZWFuIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgcGFkZGluZzogMXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206ICR7cHJvcHMuaGlkZUJvcmRlckJvdHRvbSA/ICdub25lJyA6ICcxcHggc29saWQgI2Q4ZTRmOSd9O1xuXG4gICAgc3ZnIHtcbiAgICAgIG1hcmdpbi10b3A6IDNweDtcbiAgICAgIG1pbi13aWR0aDogMTRweDtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFRleHRDb250ZW50ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJiA+IHNwYW4ge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAmID4gc3BhbiB7XG4gICAgICBmb250LXdlaWdodDogNjAwO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgd2lkdGg6IDEwMCU7XG4gICYgPiBzcGFuIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYFxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXVCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGhpZGVCb3JkZXJCb3R0b20/OiBib29sZWFuIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgcGFkZGluZzogMXJlbSAwO1xuICAgIGJvcmRlci1ib3R0b206ICR7cHJvcHMuaGlkZUJvcmRlckJvdHRvbSA/ICdub25lJyA6ICcxcHggc29saWQgI2Q4ZTRmOSd9O1xuXG4gICAgc3ZnIHtcbiAgICAgIG1hcmdpbi10b3A6IDNweDtcbiAgICAgIG1pbi13aWR0aDogMTRweDtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFRleHRDb250ZW50ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJiA+IHNwYW4ge1xuICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAmID4gc3BhbiB7XG4gICAgICBmb250LXdlaWdodDogNjAwO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgd2lkdGg6IDEwMCU7XG4gICYgPiBzcGFuIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYFxuIl19 */");
+export const TextContent = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "exqwsp81"
+} : {
+  target: "exqwsp81",
+  label: "TextContent"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vmat21",
+  styles: "display:flex;flex-direction:column;text-align:left;&>span{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}"
+} : {
+  name: "1vmat21",
+  styles: "display:flex;flex-direction:column;text-align:left;&>span{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJzQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Ob3RpZmljYXRpb25zTWVudS9Ob3RpZmljYXRpb25Sb3cvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vQnV0dG9uJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgICBtaW4td2lkdGg6IDE0cHg7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUZXh0Q29udGVudCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuXG4gICYgPiBzcGFuIHtcbiAgICBsaW5lLWhlaWdodDogMS41ZW07XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuXG4gICAgJiA+IHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbilgXG4gIHdpZHRoOiAxMDAlO1xuICAmID4gc3BhbiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const StyledButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "exqwsp80"
 } : {
   target: "exqwsp80",
-  label: "Wrapper"
-})(props => /*#__PURE__*/css("display:flex;gap:0.5rem;justify-content:start;padding:1rem 0;border-bottom:", props.hideBorderBottom ? 'none' : '1px solid #d8e4f9', ";svg{margin-top:3px;}&>span:last-of-type{line-height:1.5em;text-align:left;font-weight:normal;text-transform:none;&>span{font-weight:600;text-transform:none;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSWdEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgfVxuXG4gICAgJiA+IHNwYW46bGFzdC1vZi10eXBlIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAgICYgPiBzcGFuIHtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICBgXG4pXG4iXX0= */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgfVxuXG4gICAgJiA+IHNwYW46bGFzdC1vZi10eXBlIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAxLjVlbTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cbiAgICAgICYgPiBzcGFuIHtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICBgXG4pXG4iXX0= */");
+  label: "StyledButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13nmmot",
+  styles: "width:100%;&>span{width:100%;}"
+} : {
+  name: "13nmmot",
+  styles: "width:100%;&>span{width:100%;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L05vdGlmaWNhdGlvblJvdy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUMwQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Ob3RpZmljYXRpb25zTWVudS9Ob3RpZmljYXRpb25Sb3cvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vQnV0dG9uJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBoaWRlQm9yZGVyQm90dG9tPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IDAuNXJlbTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIHBhZGRpbmc6IDFyZW0gMDtcbiAgICBib3JkZXItYm90dG9tOiAke3Byb3BzLmhpZGVCb3JkZXJCb3R0b20gPyAnbm9uZScgOiAnMXB4IHNvbGlkICNkOGU0ZjknfTtcblxuICAgIHN2ZyB7XG4gICAgICBtYXJnaW4tdG9wOiAzcHg7XG4gICAgICBtaW4td2lkdGg6IDE0cHg7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUZXh0Q29udGVudCA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuXG4gICYgPiBzcGFuIHtcbiAgICBsaW5lLWhlaWdodDogMS41ZW07XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuXG4gICAgJiA+IHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbilgXG4gIHdpZHRoOiAxMDAlO1xuICAmID4gc3BhbiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/lib/core/NotificationsMenu/NotificationsMenu.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/NotificationsMenu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,GAAG,CAAA;AAGjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAGxC,CAAA;AACD,eAAe,IAAI,CAAA;AACnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE/C,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAA"}
+{"version":3,"file":"NotificationsMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/NotificationsMenu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,GAAG,CAAA;AAGjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAGxC,CAAA;AACD,eAAe,IAAI,CAAA;AACnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE/C,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAA"}

package/lib/core/NotificationsMenu/NotificationsMenu.stories.js

@@ -12,7 +12,7 @@ export default meta;
 export const Default = {
   name: 'Default',
   args: {
-    unread: false,
+    unreadCount: 0,
     onBellClick: () => console.log('bell click'),
     children: 'Her kan man legge hva man vil'
   }
@@ -20,7 +20,7 @@ export const Default = {
 export const UnreadNotification = {
   name: 'Unread notification',
   args: {
-    unread: true,
+    unreadCount: 5,
     onBellClick: () => console.log('bell click'),
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(NotificationRow, {
@@ -32,12 +32,13 @@ export const UnreadNotification = {
         }),
         onClick: () => console.log('hi')
       }), /*#__PURE__*/_jsx(NotificationRow, {
-        title: "Dette er en test",
-        description: "beskrivelse kommer her",
+        title: "Oppslagets tittel",
+        description: "- Det er nye kommentarer p\xE5 oppslaget",
         icon: /*#__PURE__*/_jsx(IconAttachment, {
           size: "14px",
           primary: true
         }),
+        extraInfo: "Andeby borettslag",
         onClick: () => console.log('hi')
       }), /*#__PURE__*/_jsx(NotificationRow, {
         title: "Dette er en test",
@@ -46,6 +47,7 @@ export const UnreadNotification = {
           size: "14px",
           primary: true
         }),
+        hideBorderBottom: true,
         onClick: () => console.log('hi')
       })]
     })

package/lib/core/NotificationsMenu/index.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 interface IProps {
     /** Unread property for showing marker */
-    unread: boolean;
+    unreadCount: number;
     /** Update value for close dropdown */
     triggerClose?: any;
+    /** Menu border radius */
+    radius?: '10px' | '4px';
     /** Children */
     children?: React.ReactNode;
     /** Callback on bell click */
     onBellClick: () => void;
 }
-declare const NotificationsMenu: ({ unread, triggerClose, children, onBellClick, }: IProps) => React.JSX.Element;
+declare const NotificationsMenu: ({ unreadCount, triggerClose, radius, children, onBellClick, }: IProps) => React.JSX.Element;
 export default NotificationsMenu;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/NotificationsMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAU7D,UAAU,MAAM;IACd,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAA;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,QAAA,MAAM,iBAAiB,qDAKpB,MAAM,sBAgDR,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAW7D,UAAU,MAAM;IACd,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAA;IACnB,sCAAsC;IACtC,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACvB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,QAAA,MAAM,iBAAiB,kEAMpB,MAAM,sBA0DR,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/lib/core/NotificationsMenu/index.js

@@ -3,16 +3,20 @@ import { NotificationsWrapper, NotificationsContent, UnreadMark } from './styles
 import Button from '../Button';
 import IconBellOutline from '../../icons/General/IconBellOutline';
 import IconBellFilled from '../../icons/General/IconBellFilled';
+import Text from '../Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const NotificationsMenu = ({
-  unread,
+  unreadCount,
   triggerClose,
+  radius,
   children,
   onBellClick
 }) => {
   const ref = /*#__PURE__*/createRef();
   const [open, setOpen] = useState(false);
+  const hasUnread = Boolean(unreadCount);
+  const maxUnreadCount = 99;
   useEffect(() => {
     const handleClickOutside = e => {
       const node = ref.current;
@@ -43,12 +47,19 @@ const NotificationsMenu = ({
     children: [/*#__PURE__*/_jsxs(Button, {
       nostyle: true,
       onClick: onClick,
-      children: [unread ? /*#__PURE__*/_jsx(IconBellOutline, {
+      children: [hasUnread ? /*#__PURE__*/_jsx(IconBellOutline, {
         secondary: true
-      }) : /*#__PURE__*/_jsx(IconBellFilled, {}), unread && /*#__PURE__*/_jsx(UnreadMark, {})]
+      }) : /*#__PURE__*/_jsx(IconBellFilled, {}), hasUnread && /*#__PURE__*/_jsx(UnreadMark, {
+        children: /*#__PURE__*/_jsx(Text, {
+          size: "12px",
+          color: "white",
+          children: unreadCount <= maxUnreadCount ? unreadCount : maxUnreadCount
+        })
+      })]
     }), open && /*#__PURE__*/_jsx("span", {
       ref: ref,
       children: /*#__PURE__*/_jsx(NotificationsContent, {
+        $radius: radius,
         children: children
       })
     })]

package/lib/core/NotificationsMenu/styles.d.ts

@@ -6,6 +6,8 @@ export declare const NotificationsWrapper: import("@emotion/styled").StyledCompo
 export declare const NotificationsContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    $radius?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const UnreadMark: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/lib/core/NotificationsMenu/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,oBAAoB;;;yGAShC,CAAA;AAED,eAAO,MAAM,oBAAoB;;;yGAehC,CAAA;AAED,eAAO,MAAM,UAAU;;;yGAQtB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/NotificationsMenu/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,oBAAoB;;;yGAShC,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;yGAehC,CAAA;AAED,eAAO,MAAM,UAAU;;;yGAWtB,CAAA"}

package/lib/core/NotificationsMenu/styles.js

@@ -11,7 +11,7 @@ export const NotificationsWrapper = /*#__PURE__*/_styled("div", process.env.NODE
 } : {
   name: "1ivkyd7",
   styles: "position:relative;display:flex;flex-direction:row;&>svg{margin-left:0.5em;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICByaWdodDogMDtcbiAgdG9wOiAzMHB4O1xuXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHdpZHRoOiAzMDBweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NmZDllYTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICBib3gtc2hhZG93OiAwIDEwcHggMTVweCAwIHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMC41ZW0gMWVtO1xuYFxuXG5leHBvcnQgY29uc3QgVW5yZWFkTWFyayA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnl9O1xuICBoZWlnaHQ6IDEwcHg7XG4gIHdpZHRoOiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2PHsgJHJhZGl1cz86IHN0cmluZyB9PmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgJHJhZGl1cyB9KSA9PiAkcmFkaXVzIHx8ICcxMHB4J307XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB0b3A6IC02cHg7XG4gIGxlZnQ6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucHJpbWFyeTVkYXJrZXJ9O1xuICBoZWlnaHQ6IDE4cHg7XG4gIHdpZHRoOiAxOHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const NotificationsContent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -19,20 +19,14 @@ export const NotificationsContent = /*#__PURE__*/_styled("div", process.env.NODE
 } : {
   target: "ebh5fga1",
   label: "NotificationsContent"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1141e4r",
-  styles: "position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:10px;overflow:hidden;padding:0.5em 1em"
-} : {
-  name: "1141e4r",
-  styles: "position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:10px;overflow:hidden;padding:0.5em 1em",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICByaWdodDogMDtcbiAgdG9wOiAzMHB4O1xuXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHdpZHRoOiAzMDBweDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NmZDllYTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICBib3gtc2hhZG93OiAwIDEwcHggMTVweCAwIHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMC41ZW0gMWVtO1xuYFxuXG5leHBvcnQgY29uc3QgVW5yZWFkTWFyayA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnl9O1xuICBoZWlnaHQ6IDEwcHg7XG4gIHdpZHRoOiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:", ({
+  $radius
+}) => $radius || '10px', ";overflow:hidden;padding:0.5em 1em;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhb0UiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTm90aWZpY2F0aW9uc01lbnUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICYgPiBzdmcge1xuICAgIG1hcmdpbi1sZWZ0OiAwLjVlbTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc0NvbnRlbnQgPSBzdHlsZWQuZGl2PHsgJHJhZGl1cz86IHN0cmluZyB9PmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgJHJhZGl1cyB9KSA9PiAkcmFkaXVzIHx8ICcxMHB4J307XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB0b3A6IC02cHg7XG4gIGxlZnQ6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucHJpbWFyeTVkYXJrZXJ9O1xuICBoZWlnaHQ6IDE4cHg7XG4gIHdpZHRoOiAxOHB4O1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuYFxuIl19 */"));
 export const UnreadMark = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ebh5fga0"
 } : {
   target: "ebh5fga0",
   label: "UnreadMark"
-})("position:absolute;top:-2px;left:10px;background:", ({
+})("position:absolute;display:flex;align-items:center;justify-content:center;top:-6px;left:10px;background:", ({
   theme
-}) => theme.primary, ";height:10px;width:10px;border-radius:10px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Qm9DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcblxuICAmID4gc3ZnIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbnNDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgcmlnaHQ6IDA7XG4gIHRvcDogMzBweDtcblxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB3aWR0aDogMzAwcHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjZmQ5ZWE7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDE1cHggMCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDAuNWVtIDFlbTtcbmBcblxuZXhwb3J0IGNvbnN0IFVucmVhZE1hcmsgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTJweDtcbiAgbGVmdDogMTBweDtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wcmltYXJ5fTtcbiAgaGVpZ2h0OiAxMHB4O1xuICB3aWR0aDogMTBweDtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbmBcbiJdfQ== */"));
+}) => theme.primary5darker, ";height:18px;width:18px;border-radius:10px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Qm9DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL05vdGlmaWNhdGlvbnNNZW51L3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uc1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcblxuICAmID4gc3ZnIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbnNDb250ZW50ID0gc3R5bGVkLmRpdjx7ICRyYWRpdXM/OiBzdHJpbmcgfT5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIHJpZ2h0OiAwO1xuICB0b3A6IDMwcHg7XG5cbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgd2lkdGg6IDMwMHB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAjY2ZkOWVhO1xuXG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gIGJveC1zaGFkb3c6IDAgMTBweCAxNXB4IDAgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItcmFkaXVzOiAkeyh7ICRyYWRpdXMgfSkgPT4gJHJhZGl1cyB8fCAnMTBweCd9O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAwLjVlbSAxZW07XG5gXG5cbmV4cG9ydCBjb25zdCBVbnJlYWRNYXJrID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgdG9wOiAtNnB4O1xuICBsZWZ0OiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnByaW1hcnk1ZGFya2VyfTtcbiAgaGVpZ2h0OiAxOHB4O1xuICB3aWR0aDogMThweDtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbmBcbiJdfQ== */"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.0.24",
+  "version": "4.0.26",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",