@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-next.0

package/lib/cjs/components/message/Notification/Badge.js

@@ -1,32 +1,39 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Badge_exports = {};
+__export(Badge_exports, {
   default: () => Badge
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_styled_system = __toModule(require("styled-system"));
+module.exports = __toCommonJS(Badge_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
 const ActiveCircle = import_styled_components.default.div`
   position: absolute;
   top: 0;
@@ -61,8 +68,6 @@ const Wrapper = import_styled_components.default.div`
   ${import_styled_system.layout}
 `;
 function Badge({ active, icon, ...props }) {
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
-    ...props
-  }, icon, active && /* @__PURE__ */ import_react.default.createElement(ActiveCircle, null));
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { ...props }, icon, active && /* @__PURE__ */ import_react.default.createElement(ActiveCircle, null));
 }
 //# sourceMappingURL=Badge.js.map

package/lib/cjs/components/message/Notification/Badge.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/Badge.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, position, shadow, border, background, layout } from \"styled-system\";\n\nconst ActiveCircle = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 10px;\n  width: 10px;\n  border-radius: 9999px;\n  box-sizing: content-box;\n  background-color: ${(p) => p.theme.colors.error.c100};\n\n  border: 2px solid\n    var(\n      --notification-badge-border,\n      ${(p) => {\n        /* The CSS variable is dynamically set by the Notification component */\n        return p.theme.colors.background.main;\n      }}\n    );\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 9999px;\n  ${color}\n  ${position}\n  ${shadow}\n  ${border}\n  ${background}\n  ${layout}\n`;\n\nexport type Props = {\n  /* If true a notification bubble will be displayed in the top right corner of the badge. */\n  active?: boolean;\n  /* JSX filling up the space inside the badge, usually an <Icon />. */\n  icon: JSX.Element;\n} & React.ComponentProps<typeof Wrapper>;\nexport default function Badge({ active, icon, ...props }: Props): JSX.Element {\n  return (\n    <Wrapper {...props}>\n      {icon}\n      {active && <ActiveCircle />}\n    </Wrapper>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,CAAC,MAAM,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAK1C,CAAC,MAAM;AAEP,SAAO,EAAE,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAKzC,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AASW,eAAe,EAAE,QAAQ,SAAS,SAA6B;AAC5E,SACE,mDAAC,SAAD;AAAA,OAAa;AAAA,KACV,MACA,UAAU,mDAAC,cAAD;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,2BAAoE;AAEpE,MAAM,eAAe,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQN,CAAC,MAAM,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAK1C,CAAC,MAAM;AAEP,SAAO,EAAE,MAAM,OAAO,WAAW;AACnC;AAAA;AAAA;AAIN,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AASW,SAAR,MAAuB,EAAE,QAAQ,MAAM,GAAG,MAAM,GAAuB;AAC5E,SACE,6BAAAC,QAAA,cAAC,WAAS,GAAG,SACV,MACA,UAAU,6BAAAA,QAAA,cAAC,kBAAa,CAC3B;AAEJ;",
+  "names": ["styled", "React"]
 }

package/lib/cjs/components/message/Notification/Badge.stories.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Badge_stories_exports = {};
+__export(Badge_stories_exports, {
   Badge: () => Badge,
   default: () => Badge_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_Badge = __toModule(require("./Badge"));
-var import_Icon = __toModule(require("../../asorted/Icon"));
-var import_Flex = __toModule(require("../../layout/Flex"));
+module.exports = __toCommonJS(Badge_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Badge = __toESM(require("./Badge"));
+var import_Icon = __toESM(require("../../asorted/Icon"));
+var import_Flex = __toESM(require("../../layout/Flex"));
 var Badge_stories_default = {
   title: "Messages/Notifications/Badge",
   component: import_Badge.default,
@@ -44,25 +51,22 @@ var Badge_stories_default = {
   }
 };
 const Badge = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    style: { columnGap: "2em" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, {
-    ...args,
-    color: "warning.c100",
-    backgroundColor: "warning.c10",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-      name: "Warning",
-      size: 24
-    })
-  }), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, {
-    ...args,
-    color: "primary.c100",
-    backgroundColor: "primary.c10",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-      name: "Info",
-      size: 24,
-      weight: "Medium"
-    })
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { style: { columnGap: "2em" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_Badge.default,
+    {
+      ...args,
+      color: "warning.c100",
+      backgroundColor: "warning.c10",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Warning", size: 24 })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Badge.default,
+    {
+      ...args,
+      color: "primary.c100",
+      backgroundColor: "primary.c10",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Info", size: 24, weight: "Medium" })
+    }
+  ));
 };
 //# sourceMappingURL=Badge.stories.js.map

package/lib/cjs/components/message/Notification/Badge.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/Badge.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport BadgeComponent, { Props } from \"./Badge\";\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport default {\n  title: \"Messages/Notifications/Badge\",\n  component: BadgeComponent,\n  argTypes: {\n    active: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    icon: { control: false },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport const Badge = (args: Props): JSX.Element => {\n  return (\n    <FlexBox style={{ columnGap: \"2em\" }}>\n      <BadgeComponent\n        {...args}\n        color=\"warning.c100\"\n        backgroundColor=\"warning.c10\"\n        icon={<Icon name=\"Warning\" size={24} />}\n      />\n      <BadgeComponent\n        {...args}\n        color=\"primary.c100\"\n        backgroundColor=\"primary.c10\"\n        icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      />\n    </FlexBox>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AACtC,kBAAiB;AACjB,kBAAoB;AAEpB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,MAAM,EAAE,SAAS;AAAA,IACjB,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,IAAI,EAAE,OAAO,EAAE,SAAS;AAAA,IACxB,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA;AAAA;AAI9B,MAAM,QAAQ,CAAC,SAA6B;AACjD,SACE,mDAAC,qBAAD;AAAA,IAAS,OAAO,EAAE,WAAW;AAAA,KAC3B,mDAAC,sBAAD;AAAA,OACM;AAAA,IACJ,OAAM;AAAA,IACN,iBAAgB;AAAA,IAChB,MAAM,mDAAC,qBAAD;AAAA,MAAM,MAAK;AAAA,MAAU,MAAM;AAAA;AAAA,MAEnC,mDAAC,sBAAD;AAAA,OACM;AAAA,IACJ,OAAM;AAAA,IACN,iBAAgB;AAAA,IAChB,MAAM,mDAAC,qBAAD;AAAA,MAAM,MAAK;AAAA,MAAO,MAAM;AAAA,MAAI,QAAO;AAAA;AAAA;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AACtC,kBAAiB;AACjB,kBAAoB;AAEpB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,IACvB,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,MAAM,QAAQ,CAAC,SAA6B;AACjD,SACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,OAAO,EAAE,WAAW,MAAM,KACjC,6BAAAD,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA;AAAA,EACvC,GACA,6BAAAF,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA;AAAA,EACpD,CACF;AAEJ;",
+  "names": ["BadgeComponent", "React", "FlexBox", "Icon"]
 }

package/lib/cjs/components/message/Notification/Notification.stories.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Notification_stories_exports = {};
+__export(Notification_stories_exports, {
   Notifications: () => Notifications,
   default: () => Notification_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_Icon = __toModule(require("../../asorted/Icon"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_index = __toModule(require("./index"));
+module.exports = __toCommonJS(Notification_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Icon = __toESM(require("../../asorted/Icon"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_index = __toESM(require("./index"));
 var Notification_stories_default = {
   title: "Messages/Notifications",
   component: import_index.default,
@@ -59,55 +66,33 @@ var Notification_stories_default = {
 };
 function Notifications(args) {
   const { description, link, ...props } = args;
-  const warningBadge = /* @__PURE__ */ import_react.default.createElement(import_index.default.Badge, {
-    color: "warning.c100",
-    backgroundColor: "warning.c10",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-      name: "Warning",
-      size: 24
-    }),
-    active: args.active
-  });
-  const infoBadge = /* @__PURE__ */ import_react.default.createElement(import_index.default.Badge, {
-    color: "primary.c100",
-    backgroundColor: "primary.c10",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-      name: "Info",
-      size: 24,
-      weight: "Medium"
-    }),
-    active: args.active
-  });
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    rowGap: 5
-  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: warningBadge,
-    hasBackground: true
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: infoBadge
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    description,
-    badge: warningBadge,
-    hasBackground: true
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    description,
-    badge: infoBadge
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    description,
-    link,
-    ...props,
-    badge: warningBadge,
-    hasBackground: true
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    description,
-    link,
-    badge: infoBadge
-  }));
+  const warningBadge = /* @__PURE__ */ import_react.default.createElement(
+    import_index.default.Badge,
+    {
+      color: "warning.c100",
+      backgroundColor: "warning.c10",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Warning", size: 24 }),
+      active: args.active
+    }
+  );
+  const infoBadge = /* @__PURE__ */ import_react.default.createElement(
+    import_index.default.Badge,
+    {
+      color: "primary.c100",
+      backgroundColor: "primary.c10",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Info", size: 24, weight: "Medium" }),
+      active: args.active
+    }
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 5 }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: warningBadge, hasBackground: true }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: infoBadge }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, description, badge: warningBadge, hasBackground: true }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, description, badge: infoBadge }), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      description,
+      link,
+      ...props,
+      badge: warningBadge,
+      hasBackground: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, description, link, badge: infoBadge }));
 }
 //# sourceMappingURL=Notification.stories.js.map

package/lib/cjs/components/message/Notification/Notification.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/Notification.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport Notification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Notifications\",\n  component: Notification,\n  argTypes: {\n    title: {\n      type: \"string\",\n      defaultValue: \"Informational title\",\n    },\n    description: {\n      type: \"string\",\n      defaultValue:\n        \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id...\",\n    },\n    link: {\n      type: \"string\",\n      defaultValue: \"Learn more\",\n    },\n    active: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    badge: {\n      control: false,\n    },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function Notifications(args: Props & { active: boolean }): JSX.Element {\n  const { description, link, ...props } = args;\n\n  const warningBadge = (\n    <Notification.Badge\n      color=\"warning.c100\"\n      backgroundColor=\"warning.c10\"\n      icon={<Icon name=\"Warning\" size={24} />}\n      active={args.active}\n    />\n  );\n\n  const infoBadge = (\n    <Notification.Badge\n      color=\"primary.c100\"\n      backgroundColor=\"primary.c10\"\n      icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      active={args.active}\n    />\n  );\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={5}>\n      <Notification {...props} badge={warningBadge} hasBackground />\n      <Notification {...props} badge={infoBadge} />\n      <Notification {...props} description={description} badge={warningBadge} hasBackground />\n      <Notification {...props} description={description} badge={infoBadge} />\n      <Notification\n        description={description}\n        link={link}\n        {...props}\n        badge={warningBadge}\n        hasBackground\n      />\n      <Notification {...props} description={description} link={link} badge={infoBadge} />\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cACE;AAAA;AAAA,IAEJ,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAEX,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,IAAI,EAAE,OAAO,EAAE,SAAS;AAAA,IACxB,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA;AAAA;AAI9B,uBAAuB,MAAgD;AAC5E,QAAM,EAAE,aAAa,SAAS,UAAU;AAExC,QAAM,eACJ,mDAAC,qBAAa,OAAd;AAAA,IACE,OAAM;AAAA,IACN,iBAAgB;AAAA,IAChB,MAAM,mDAAC,qBAAD;AAAA,MAAM,MAAK;AAAA,MAAU,MAAM;AAAA;AAAA,IACjC,QAAQ,KAAK;AAAA;AAIjB,QAAM,YACJ,mDAAC,qBAAa,OAAd;AAAA,IACE,OAAM;AAAA,IACN,iBAAgB;AAAA,IAChB,MAAM,mDAAC,qBAAD;AAAA,MAAM,MAAK;AAAA,MAAO,MAAM;AAAA,MAAI,QAAO;AAAA;AAAA,IACzC,QAAQ,KAAK;AAAA;AAIjB,SACE,mDAAC,qBAAD;AAAA,IAAS,eAAc;AAAA,IAAS,QAAQ;AAAA,KACtC,mDAAC,sBAAD;AAAA,OAAkB;AAAA,IAAO,OAAO;AAAA,IAAc,eAAa;AAAA,MAC3D,mDAAC,sBAAD;AAAA,OAAkB;AAAA,IAAO,OAAO;AAAA,MAChC,mDAAC,sBAAD;AAAA,OAAkB;AAAA,IAAO;AAAA,IAA0B,OAAO;AAAA,IAAc,eAAa;AAAA,MACrF,mDAAC,sBAAD;AAAA,OAAkB;AAAA,IAAO;AAAA,IAA0B,OAAO;AAAA,MAC1D,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,OACI;AAAA,IACJ,OAAO;AAAA,IACP,eAAa;AAAA,MAEf,mDAAC,sBAAD;AAAA,OAAkB;AAAA,IAAO;AAAA,IAA0B;AAAA,IAAY,OAAO;AAAA;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cACE;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,cAAc,MAAgD;AAC5E,QAAM,EAAE,aAAa,MAAM,GAAG,MAAM,IAAI;AAExC,QAAM,eACJ,6BAAAC,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA,MACrC,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,QAAM,YACJ,6BAAAD,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA,MAClD,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,cAAc,eAAa,MAAC,GAC5D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,WAAW,GAC3C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,cAAc,eAAa,MAAC,GACtF,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,WAAW,GACrE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,eAAa;AAAA;AAAA,EACf,GACA,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,MAAY,OAAO,WAAW,CACnF;AAEJ;",
+  "names": ["Notification", "React", "Icon", "FlexBox"]
 }

package/lib/cjs/components/message/Notification/index.js

@@ -1,36 +1,43 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Notification_exports = {};
+__export(Notification_exports, {
   default: () => Notification_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Badge = __toModule(require("./Badge"));
-var import_Link = __toModule(require("../../cta/Link"));
-var import_react2 = __toModule(require("@ledgerhq/icons-ui/react"));
+module.exports = __toCommonJS(Notification_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Badge = __toESM(require("./Badge"));
+var import_Link = __toESM(require("../../cta/Link"));
+var import_react2 = require("@ledgerhq/icons-ui/react");
 const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
   p: 6,
   columnGap: 8,
@@ -52,28 +59,7 @@ function Notification({
   hasBackground = false,
   ...containerProps
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(Container, {
-    hasBackground,
-    ...containerProps
-  }, badge, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    rowGap: 3,
-    flex: "auto"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "large",
-    fontWeight: "medium",
-    color: "neutral.c100"
-  }, title), description && /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "paragraph",
-    fontWeight: "medium",
-    color: "neutral.c80",
-    whiteSpace: "pre-wrap"
-  }, description), link && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    justifyContent: "flex-start"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Link.default, {
-    onClick: (event) => onLinkClick && onLinkClick(event),
-    Icon: import_react2.ExternalLinkMedium
-  }, link))));
+  return /* @__PURE__ */ import_react.default.createElement(Container, { hasBackground, ...containerProps }, badge, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3, flex: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title), description && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description), link && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(import_Link.default, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: import_react2.ExternalLinkMedium }, link))));
 }
 Notification.Badge = import_Badge.default;
 var Notification_default = Notification;

package/lib/cjs/components/message/Notification/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/index.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/react\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected background. */\n  hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The title to be displayed. */\n  title: string;\n  /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n  badge: React.ReactNode;\n  /* An optional description. */\n  description?: string;\n  /* An optional link. */\n  link?: string;\n  /* A callback to perform when clicking on the link. */\n  onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 6,\n  columnGap: 8,\n  alignItems: \"center\",\n})<ContainerProps>`\n  --notification-badge-border: ${(p) => {\n    /* Set a CSS variable that will be consumed by the Badge component */\n    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n  }};\n  background-color: ${(p) => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n  border-radius: 8px;\n`;\n\nfunction Notification({\n  title,\n  description,\n  badge,\n  link,\n  onLinkClick,\n  hasBackground = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBackground={hasBackground} {...containerProps}>\n      {badge}\n      <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n        <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n            {description}\n          </Text>\n        )}\n        {link && (\n          <FlexBox justifyContent={\"flex-start\"}>\n            <Link onClick={(event) => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n              {link}\n            </Link>\n          </FlexBox>\n        )}\n      </FlexBox>\n    </Container>\n  );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,oBAAmC;AAoBnC,MAAM,YAAY,sCAAO,qBAAS,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AAAA;AAAA,iCAEmB,CAAC,MAAM;AAEpC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAAA;AAAA,sBAE9D,CAAC,MAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK7E,sBAAsB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,KACb;AAAA,GACkB;AACrB,SACE,mDAAC,WAAD;AAAA,IAAW;AAAA,OAAkC;AAAA,KAC1C,OACD,mDAAC,qBAAD;AAAA,IAAS,eAAc;AAAA,IAAS,QAAQ;AAAA,IAAG,MAAK;AAAA,KAC9C,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAS,YAAW;AAAA,IAAS,OAAM;AAAA,KAC/C,QAEF,eACC,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAa,YAAW;AAAA,IAAS,OAAM;AAAA,IAAc,YAAW;AAAA,KAC5E,cAGJ,QACC,mDAAC,qBAAD;AAAA,IAAS,gBAAgB;AAAA,KACvB,mDAAC,qBAAD;AAAA,IAAM,SAAS,CAAC,UAAU,eAAe,YAAY;AAAA,IAAQ,MAAM;AAAA,KAChE;AAAA;AAQf,aAAa,QAAQ;AAGrB,IAAO,uBAAQ;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,IAAAA,gBAAmC;AAoBnC,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,CAAC,MAAM;AAEpC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,sBACoB,CAAC,MAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK7E,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,CAAC,UAAU,eAAe,YAAY,KAAK,GAAG,MAAM,oCAChE,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
+  "names": ["import_react", "styled", "FlexBox", "React", "Text", "Link", "Badge"]
 }

package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StatusNotification_stories_exports = {};
+__export(StatusNotification_stories_exports, {
   StatusNotifications: () => StatusNotifications,
   default: () => StatusNotification_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_Icon = __toModule(require("../../asorted/Icon"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_index = __toModule(require("./index"));
+module.exports = __toCommonJS(StatusNotification_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Icon = __toESM(require("../../asorted/Icon"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_index = __toESM(require("./index"));
 var StatusNotification_stories_default = {
   title: "Messages/Status Notifications",
   component: import_index.default,
@@ -50,38 +57,8 @@ var StatusNotification_stories_default = {
 };
 function StatusNotifications(args) {
   const { ...props } = args;
-  const warningBadge = /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "Warning",
-    size: 50,
-    color: "error.c100",
-    weight: "Light"
-  });
-  const infoBadge = /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "Info",
-    size: 50,
-    color: "primary.c100",
-    weight: "Regular"
-  });
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    justifyContent: "center"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    width: "502px",
-    flexDirection: "column",
-    rowGap: 5
-  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: warningBadge,
-    hasBorder: true
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: infoBadge
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: warningBadge,
-    hasBorder: true
-  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...props,
-    badge: infoBadge
-  })));
+  const warningBadge = /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Warning", size: 50, color: "error.c100", weight: "Medium" });
+  const infoBadge = /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Info", size: 50, color: "primary.c100", weight: "Medium" });
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { width: "502px", flexDirection: "column", rowGap: 5 }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: warningBadge, hasBorder: true }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: infoBadge }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: warningBadge, hasBorder: true }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...props, badge: infoBadge })));
 }
 //# sourceMappingURL=StatusNotification.stories.js.map

package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/StatusNotification/StatusNotification.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Status Notifications\",\n  component: StatusNotification,\n  argTypes: {\n    text: {\n      type: \"string\",\n      defaultValue: \"Ledger Live is Experiencing Issues\",\n    },\n    badge: {\n      control: false,\n    },\n    columnGap: { control: false },\n    rowGap: { control: false },\n    hasBorder: { type: \"boolean\" },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function StatusNotifications(args: Props & { active: boolean }): JSX.Element {\n  const { ...props } = args;\n\n  const warningBadge = <Icon name=\"Warning\" size={50} color=\"error.c100\" weight=\"Light\" />;\n  const infoBadge = <Icon name=\"Info\" size={50} color=\"primary.c100\" weight=\"Regular\" />;\n\n  return (\n    <FlexBox justifyContent=\"center\">\n      <FlexBox width=\"502px\" flexDirection=\"column\" rowGap={5}>\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n      </FlexBox>\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAEX,WAAW,EAAE,SAAS;AAAA,IACtB,QAAQ,EAAE,SAAS;AAAA,IACnB,WAAW,EAAE,MAAM;AAAA,IACnB,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,IAAI,EAAE,OAAO,EAAE,SAAS;AAAA,IACxB,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA;AAAA;AAI9B,6BAA6B,MAAgD;AAClF,QAAM,KAAK,UAAU;AAErB,QAAM,eAAe,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAU,MAAM;AAAA,IAAI,OAAM;AAAA,IAAa,QAAO;AAAA;AAC9E,QAAM,YAAY,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAO,MAAM;AAAA,IAAI,OAAM;AAAA,IAAe,QAAO;AAAA;AAE1E,SACE,mDAAC,qBAAD;AAAA,IAAS,gBAAe;AAAA,KACtB,mDAAC,qBAAD;AAAA,IAAS,OAAM;AAAA,IAAQ,eAAc;AAAA,IAAS,QAAQ;AAAA,KACpD,mDAAC,sBAAD;AAAA,OAAwB;AAAA,IAAO,OAAO;AAAA,IAAc,WAAS;AAAA,MAC7D,mDAAC,sBAAD;AAAA,OAAwB;AAAA,IAAO,OAAO;AAAA,MACtC,mDAAC,sBAAD;AAAA,OAAwB;AAAA,IAAO,OAAO;AAAA,IAAc,WAAS;AAAA,MAC7D,mDAAC,sBAAD;AAAA,OAAwB;AAAA,IAAO,OAAO;AAAA;AAAA;",
-  "names": []
+  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Status Notifications\",\n  component: StatusNotification,\n  argTypes: {\n    text: {\n      type: \"string\",\n      defaultValue: \"Ledger Live is Experiencing Issues\",\n    },\n    badge: {\n      control: false,\n    },\n    columnGap: { control: false },\n    rowGap: { control: false },\n    hasBorder: { type: \"boolean\" },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function StatusNotifications(args: Props & { active: boolean }): JSX.Element {\n  const { ...props } = args;\n\n  const warningBadge = <Icon name=\"Warning\" size={50} color=\"error.c100\" weight=\"Medium\" />;\n  const infoBadge = <Icon name=\"Info\" size={50} color=\"primary.c100\" weight=\"Medium\" />;\n\n  return (\n    <FlexBox justifyContent=\"center\">\n      <FlexBox width=\"502px\" flexDirection=\"column\" rowGap={5}>\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n      </FlexBox>\n    </FlexBox>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW,EAAE,SAAS,MAAM;AAAA,IAC5B,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,WAAW,EAAE,MAAM,UAAU;AAAA,IAC7B,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,oBAAoB,MAAgD;AAClF,QAAM,EAAE,GAAG,MAAM,IAAI;AAErB,QAAM,eAAe,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI,OAAM,cAAa,QAAO,UAAS;AACvF,QAAM,YAAY,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,OAAM,gBAAe,QAAO,UAAS;AAEnF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,OAAM,SAAQ,eAAc,UAAS,QAAQ,KACpD,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,GACjD,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,CACnD,CACF;AAEJ;",
+  "names": ["StatusNotification", "React", "Icon", "FlexBox"]
 }