@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

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

@@ -0,0 +1,68 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => Badge
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+const ActiveCircle = import_styled_components.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 10px;
+  width: 10px;
+  border-radius: 9999px;
+  box-sizing: content-box;
+  background-color: ${(p) => p.theme.colors.error.c100};
+
+  border: 2px solid
+    var(
+      --notification-badge-border,
+      ${(p) => {
+  return p.theme.colors.background.main;
+}}
+    );
+`;
+const Wrapper = import_styled_components.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  ${import_styled_system.color}
+  ${import_styled_system.position}
+  ${import_styled_system.shadow}
+  ${import_styled_system.border}
+  ${import_styled_system.background}
+  ${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));
+}
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,68 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+var Badge_stories_default = {
+  title: "Messages/Notifications/Badge",
+  component: import_Badge.default,
+  argTypes: {
+    active: {
+      type: "boolean",
+      defaultValue: false
+    },
+    icon: { control: false },
+    theme: { table: { disable: true } },
+    as: { table: { disable: true } },
+    forwardedAs: { table: { disable: true } }
+  }
+};
+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"
+    })
+  }));
+};
+//# sourceMappingURL=Badge.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,113 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+var Notification_stories_default = {
+  title: "Messages/Notifications",
+  component: import_index.default,
+  argTypes: {
+    title: {
+      type: "string",
+      defaultValue: "Informational title"
+    },
+    description: {
+      type: "string",
+      defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id..."
+    },
+    link: {
+      type: "string",
+      defaultValue: "Learn more"
+    },
+    active: {
+      type: "boolean",
+      defaultValue: false
+    },
+    badge: {
+      control: false
+    },
+    theme: { table: { disable: true } },
+    as: { table: { disable: true } },
+    forwardedAs: { table: { disable: true } }
+  }
+};
+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
+  }));
+}
+//# sourceMappingURL=Notification.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,80 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
+  p: 6,
+  columnGap: 8,
+  alignItems: "center"
+})`
+  --notification-badge-border: ${(p) => {
+  return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;
+}};
+  background-color: ${(p) => p.hasBackground ? p.theme.colors.neutral.c30 : "transparent"};
+
+  border-radius: 8px;
+`;
+function Notification({
+  title,
+  description,
+  badge,
+  link,
+  onLinkClick,
+  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))));
+}
+Notification.Badge = import_Badge.default;
+var Notification_default = Notification;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,87 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+var StatusNotification_stories_default = {
+  title: "Messages/Status Notifications",
+  component: import_index.default,
+  argTypes: {
+    text: {
+      type: "string",
+      defaultValue: "Ledger Live is Experiencing Issues"
+    },
+    badge: {
+      control: false
+    },
+    columnGap: { control: false },
+    rowGap: { control: false },
+    hasBorder: { type: "boolean" },
+    theme: { table: { disable: true } },
+    as: { table: { disable: true } },
+    forwardedAs: { table: { disable: true } }
+  }
+};
+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
+  })));
+}
+//# sourceMappingURL=StatusNotification.stories.js.map

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

@@ -0,0 +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": []
+}

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

@@ -0,0 +1,54 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => StatusNotification_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Log = __toModule(require("../Log/"));
+const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
+  p: 8,
+  rowGap: 9,
+  alignItems: "center",
+  flexDirection: "column"
+})`
+  border-width: 1px;
+  border-style: ${(p) => p.hasBorder ? "solid" : "none"};
+  border-radius: 8px;
+  border-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+function StatusNotification({
+  text,
+  badge,
+  hasBorder = false,
+  ...containerProps
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(Container, {
+    hasBorder,
+    ...containerProps
+  }, badge, /* @__PURE__ */ import_react.default.createElement(import_Log.default, null, text));
+}
+var StatusNotification_default = StatusNotification;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/message/StatusNotification/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Log from \"../Log/\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected border. */\n  hasBorder?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The text to be displayed. */\n  text: string;\n  /* JSX that should be rendered on top of the Notification.*/\n  badge: React.ReactNode;\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 8,\n  rowGap: 9,\n  alignItems: \"center\",\n  flexDirection: \"column\",\n})<ContainerProps>`\n  border-width: 1px;\n  border-style: ${(p) => (p.hasBorder ? \"solid\" : \"none\")};\n  border-radius: 8px;\n  border-color: ${(p) => p.theme.colors.neutral.c40};\n`;\n\nfunction StatusNotification({\n  text,\n  badge,\n  hasBorder = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBorder={hasBorder} {...containerProps}>\n      {badge}\n      <Log>{text}</Log>\n    </Container>\n  );\n}\n\nexport default StatusNotification;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,iBAAgB;AAchB,MAAM,YAAY,sCAAO,qBAAS,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AAAA;AAAA;AAAA,kBAGC,CAAC,MAAO,EAAE,YAAY,UAAU;AAAA;AAAA,kBAEhC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGhD,4BAA4B;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,KACT;AAAA,GACkB;AACrB,SACE,mDAAC,WAAD;AAAA,IAAW;AAAA,OAA0B;AAAA,KAClC,OACD,mDAAC,oBAAD,MAAM;AAAA;AAKZ,IAAO,6BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,52 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Default: () => Default,
+  default: () => Tip_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var Tip_stories_default = {
+  title: "Messages/Tips",
+  argTypes: {
+    type: {
+      options: ["success", "warning", "error", void 0],
+      control: {
+        type: "radio"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      },
+      defaultValue: "Label"
+    }
+  }
+};
+const Default = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  });
+};
+//# sourceMappingURL=Tip.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/message/Tip/Tip.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Tip, { TipProps } from \"./index\";\nexport default {\n  title: \"Messages/Tips\",\n  argTypes: {\n    type: {\n      options: [\"success\", \"warning\", \"error\", undefined],\n      control: {\n        type: \"radio\",\n      },\n    },\n    label: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Label\",\n    },\n  },\n};\n\nexport const Default = (args: TipProps): JSX.Element => {\n  return <Tip {...args} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,WAAW,WAAW,SAAS;AAAA,MACzC,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA;AAAA,MAER,cAAc;AAAA;AAAA;AAAA;AAKb,MAAM,UAAU,CAAC,SAAgC;AACtD,SAAO,mDAAC,sBAAD;AAAA,OAAS;AAAA;AAAA;",
+  "names": []
+}