@ledgerhq/react-ui 0.19.1 → 0.20.0-next.0

package/lib/cjs/components/asorted/Icon/NotificationIcon.js

@@ -0,0 +1,106 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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 NotificationIcon_exports = {};
+__export(NotificationIcon_exports, {
+  default: () => NotificationIcon
+});
+module.exports = __toCommonJS(NotificationIcon_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var Icons = __toESM(require("@ledgerhq/icons-ui/react"));
+var import_layout = require("../../layout");
+var import_styles = require("../../../styles");
+function getColorsByIcon(colors) {
+  const { warning } = colors;
+  return {
+    Warning: {
+      round: { fg: warning.c80, bg: warning.c30 },
+      square: { fg: warning.c80, bg: warning.c30 }
+    }
+  };
+}
+function getDefaultDefaultColors({ primary }) {
+  return {
+    round: { fg: primary.c90, bg: primary.c30 },
+    square: { fg: primary.c80, bg: (0, import_styles.rgba)(primary.c80, 0.08) }
+  };
+}
+function NotificationIcon({ icon, variant = "round" }) {
+  var _a;
+  const { colors } = (0, import_styled_components.useTheme)();
+  const defaultColors = getDefaultDefaultColors(colors)[variant];
+  const safeIcon = icon in Icons ? icon : "Information";
+  const Icon = Icons[safeIcon];
+  const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } = ((_a = getColorsByIcon(colors)[safeIcon]) == null ? void 0 : _a[variant]) ?? {};
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { backgroundColor: iconBgColor, variant }, /* @__PURE__ */ import_react.default.createElement(Icon, { color: iconColor }));
+}
+const Wrapper = (0, import_styled_components.default)(import_layout.Box)`
+  display: inline-flex;
+  padding: 8px;
+  ${(p) => p.variant === "square" ? squareWrapper : roundWrapper}
+`;
+const roundWrapper = import_styled_components.css`
+  border-radius: 50%;
+`;
+const squareWrapper = import_styled_components.css`
+  border-radius: 13.5px;
+  background-clip: padding-box;
+  border-width: 7px;
+  border-style: solid;
+  border-color: transparent;
+  position: relative;
+
+  ${(p) => import_styled_components.css`
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: -7px;
+      border-radius: 13.5px;
+      rotate: ${p.theme.colors.type === "dark" ? "0deg" : "180deg"};
+    }
+    &::before {
+      background: linear-gradient(
+        ${p.theme.colors.type === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(29, 28, 31, 0.05)"}
+          0%,
+        rgba(29, 28, 31, 0) 100%
+      );
+    }
+    &::after {
+      content: ${p.theme.colors.type};
+      border: solid 0.5px ${p.theme.colors.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.5)"};
+      mask-image: linear-gradient(
+        rgba(255, 255, 255, 0.15) 0%,
+        rgba(255, 255, 255, 0.01) 60%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  `};
+`;
+//# sourceMappingURL=NotificationIcon.js.map

package/lib/cjs/components/asorted/Icon/NotificationIcon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/NotificationIcon.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport { Box } from \"../../layout\";\nimport { type ColorPalette, rgba } from \"../../../styles\";\n\ntype IconKey = keyof typeof Icons;\ntype WrapperType = \"round\" | \"square\";\n\ntype IconPallet = { fg: string; bg: string };\n\nfunction getColorsByIcon(\n  colors: ColorPalette,\n): Partial<Record<IconKey, Partial<Record<WrapperType, Partial<IconPallet>>>>> {\n  const { warning } = colors;\n\n  return {\n    Warning: {\n      round: { fg: warning.c80, bg: warning.c30 },\n      square: { fg: warning.c80, bg: warning.c30 },\n    },\n  };\n}\n\nfunction getDefaultDefaultColors({ primary }: ColorPalette): Record<WrapperType, IconPallet> {\n  return {\n    round: { fg: primary.c90, bg: primary.c30 },\n    square: { fg: primary.c80, bg: rgba(primary.c80, 0.08) },\n  };\n}\n\ntype Props = Readonly<{\n  icon: IconKey;\n  variant: WrapperType;\n}>;\n\nexport default function NotificationIcon({ icon, variant = \"round\" }: Props) {\n  const { colors } = useTheme();\n  const defaultColors = getDefaultDefaultColors(colors)[variant];\n  const safeIcon: IconKey = icon in Icons ? icon : \"Information\";\n  const Icon = Icons[safeIcon];\n  const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } =\n    getColorsByIcon(colors)[safeIcon]?.[variant] ?? {};\n\n  return (\n    <Wrapper backgroundColor={iconBgColor} variant={variant}>\n      <Icon color={iconColor} />\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled(Box)<{ variant: WrapperType }>`\n  display: inline-flex;\n  padding: 8px;\n  ${p => (p.variant === \"square\" ? squareWrapper : roundWrapper)}\n`;\n\nconst roundWrapper = css`\n  border-radius: 50%;\n`;\n\nconst squareWrapper = css`\n  border-radius: 13.5px;\n  background-clip: padding-box;\n  border-width: 7px;\n  border-style: solid;\n  border-color: transparent;\n  position: relative;\n\n  ${p => css`\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: -7px;\n      border-radius: 13.5px;\n      rotate: ${p.theme.colors.type === \"dark\" ? \"0deg\" : \"180deg\"};\n    }\n    &::before {\n      background: linear-gradient(\n        ${p.theme.colors.type === \"dark\" ? \"rgba(255, 255, 255, 0.05)\" : \"rgba(29, 28, 31, 0.05)\"}\n          0%,\n        rgba(29, 28, 31, 0) 100%\n      );\n    }\n    &::after {\n      content: ${p.theme.colors.type};\n      border: solid 0.5px ${p.theme.colors.type === \"dark\" ? \"#fff\" : \"rgba(0, 0, 0, 0.5)\"};\n      mask-image: linear-gradient(\n        rgba(255, 255, 255, 0.15) 0%,\n        rgba(255, 255, 255, 0.01) 60%,\n        rgba(255, 255, 255, 0) 100%\n      );\n    }\n  `};\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAsC;AAEtC,YAAuB;AACvB,oBAAoB;AACpB,oBAAwC;AAOxC,SAAS,gBACP,QAC6E;AAC7E,QAAM,EAAE,QAAQ,IAAI;AAEpB,SAAO;AAAA,IACL,SAAS;AAAA,MACP,OAAO,EAAE,IAAI,QAAQ,KAAK,IAAI,QAAQ,IAAI;AAAA,MAC1C,QAAQ,EAAE,IAAI,QAAQ,KAAK,IAAI,QAAQ,IAAI;AAAA,IAC7C;AAAA,EACF;AACF;AAEA,SAAS,wBAAwB,EAAE,QAAQ,GAAkD;AAC3F,SAAO;AAAA,IACL,OAAO,EAAE,IAAI,QAAQ,KAAK,IAAI,QAAQ,IAAI;AAAA,IAC1C,QAAQ,EAAE,IAAI,QAAQ,KAAK,QAAI,oBAAK,QAAQ,KAAK,IAAI,EAAE;AAAA,EACzD;AACF;AAOe,SAAR,iBAAkC,EAAE,MAAM,UAAU,QAAQ,GAAU;AArC7E;AAsCE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAC5B,QAAM,gBAAgB,wBAAwB,MAAM,EAAE,OAAO;AAC7D,QAAM,WAAoB,QAAQ,QAAQ,OAAO;AACjD,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,EAAE,IAAI,YAAY,cAAc,IAAI,IAAI,cAAc,cAAc,GAAG,MAC3E,qBAAgB,MAAM,EAAE,QAAQ,MAAhC,mBAAoC,aAAY,CAAC;AAEnD,SACE,6BAAAA,QAAA,cAAC,WAAQ,iBAAiB,aAAa,WACrC,6BAAAA,QAAA,cAAC,QAAK,OAAO,WAAW,CAC1B;AAEJ;AAEA,MAAM,cAAU,yBAAAC,SAAO,iBAAG;AAAA;AAAA;AAAA,IAGtB,OAAM,EAAE,YAAY,WAAW,gBAAgB,YAAa;AAAA;AAGhE,MAAM,eAAe;AAAA;AAAA;AAIrB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB,OAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOO,EAAE,MAAM,OAAO,SAAS,SAAS,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIxD,EAAE,MAAM,OAAO,SAAS,SAAS,8BAA8B,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMhF,EAAE,MAAM,OAAO,IAAI;AAAA,4BACR,EAAE,MAAM,OAAO,SAAS,SAAS,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvF;AAAA;",
+  "names": ["React", "styled"]
+}

package/lib/cjs/components/asorted/Icon/NotificationIcon.stories.js

@@ -0,0 +1,58 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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 NotificationIcon_stories_exports = {};
+__export(NotificationIcon_stories_exports, {
+  Default: () => Default,
+  default: () => NotificationIcon_stories_default
+});
+module.exports = __toCommonJS(NotificationIcon_stories_exports);
+var Icons = __toESM(require("@ledgerhq/icons-ui/react"));
+var import_NotificationIcon = __toESM(require("./NotificationIcon"));
+const meta = {
+  title: "Asorted/NotificationIcon",
+  component: import_NotificationIcon.default,
+  argTypes: {
+    icon: {
+      description: "Icon to display.",
+      options: Object.keys(Icons),
+      control: { type: "select" }
+    },
+    variant: {
+      options: ["round", "square"],
+      control: { type: "inline-radio" }
+    }
+  },
+  args: {
+    icon: "Info",
+    variant: "round"
+  }
+};
+var NotificationIcon_stories_default = meta;
+const Default = {};
+//# sourceMappingURL=NotificationIcon.stories.js.map

package/lib/cjs/components/asorted/Icon/NotificationIcon.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/NotificationIcon.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport NotificationIcon from \"./NotificationIcon\";\n\nconst meta: Meta<typeof NotificationIcon> = {\n  title: \"Asorted/NotificationIcon\",\n  component: NotificationIcon,\n  argTypes: {\n    icon: {\n      description: \"Icon to display.\",\n      options: Object.keys(Icons),\n      control: { type: \"select\" },\n    },\n    variant: {\n      options: [\"round\", \"square\"],\n      control: { type: \"inline-radio\" },\n    },\n  },\n  args: {\n    icon: \"Info\",\n    variant: \"round\",\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NotificationIcon>;\n\nexport const Default: Story = {};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,8BAA6B;AAE7B,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,WAAW,wBAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,aAAa;AAAA,MACb,SAAS,OAAO,KAAK,KAAK;AAAA,MAC1B,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,SAAS,QAAQ;AAAA,MAC3B,SAAS,EAAE,MAAM,eAAe;AAAA,IAClC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AACA,IAAO,mCAAQ;AAIR,MAAM,UAAiB,CAAC;",
+  "names": ["NotificationIcon"]
+}

package/lib/cjs/components/asorted/Icon/index.js

@@ -31,6 +31,7 @@ __export(Icon_exports, {
   BoxedIcon: () => import_BoxedIcon.default,
   CryptoIcon: () => import_CryptoIcon.default,
   IconBox: () => import_BoxedIcon.IconBox,
+  NotificationIcon: () => import_NotificationIcon.default,
   default: () => import_Icon.default,
   iconNames: () => import_Icon.iconNames
 });
@@ -38,4 +39,5 @@ module.exports = __toCommonJS(Icon_exports);
 var import_Icon = __toESM(require("./Icon"));
 var import_BoxedIcon = __toESM(require("./BoxedIcon"));
 var import_CryptoIcon = __toESM(require("./CryptoIcon"));
+var import_NotificationIcon = __toESM(require("./NotificationIcon"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/asorted/Icon/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/index.tsx"],
-  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;",
+  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as NotificationIcon } from \"./NotificationIcon\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;AACtC,8BAA4C;",
   "names": ["BoxedIcon"]
 }

package/lib/cjs/components/asorted/index.js

@@ -33,6 +33,7 @@ __export(asorted_exports, {
   Divider: () => import_Divider.default,
   Icon: () => import_Icon.default,
   IconBox: () => import_Icon.IconBox,
+  NotificationIcon: () => import_Icon.NotificationIcon,
   Text: () => import_Text.default
 });
 module.exports = __toCommonJS(asorted_exports);

package/lib/cjs/components/asorted/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/asorted/index.ts"],
-  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAAgE;AAChE,kBAAgC;",
+  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon, NotificationIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAAkF;AAClF,kBAAgC;",
   "names": []
 }

package/lib/cjs/components/layout/Banner/BannerCard/BannerCard.stories.js

@@ -35,8 +35,9 @@ __export(BannerCard_stories_exports, {
 module.exports = __toCommonJS(BannerCard_stories_exports);
 var import_react = __toESM(require("react"));
 var import_asorted = require("../../../asorted");
+var import_cta = require("../../../cta");
 var import__ = __toESM(require("."));
-var BannerCard_stories_default = {
+const meta = {
   title: "Layout/Banner/BannerCard",
   component: import__.default,
   argTypes: {
@@ -44,10 +45,7 @@ var BannerCard_stories_default = {
       description: "Title of the card."
     },
     cta: {
-      description: "Call to action text."
-    },
-    linkText: {
-      description: "Link text."
+      description: "Call to action element."
     },
     description: {
       description: "Description of the card."
@@ -61,9 +59,6 @@ var BannerCard_stories_default = {
     onClick: {
       description: "Function to be called when the card is clicked."
     },
-    onLinkClick: {
-      description: "Function to be called when the link is clicked."
-    },
     onClose: {
       description: "Function to be called when the close button is clicked."
     }
@@ -71,19 +66,18 @@ var BannerCard_stories_default = {
   args: {
     title: "Ledger Recover",
     description: "Get peace of mind and start your free trial.",
-    cta: "Start my free trial",
-    linkText: "Learn more",
+    cta: /* @__PURE__ */ import_react.default.createElement(import_cta.Link, null, /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, null, "Start my free trial")),
     tag: "New",
     image: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>"
   }
 };
+var BannerCard_stories_default = meta;
 const Default = {};
 const LNSCardBanner = {
   args: {
-    title: "It's time to upgrade",
-    description: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Upgrade to our latest devices with ", /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { color: "constant.purple" }, "20% discount"), " for an enhanced security and a seamless experience."),
-    descriptionWidth: 320,
-    cta: "Level up my wallet",
+    title: "Limited memory, limited experience",
+    description: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Upgrade your Nano S to a newer Ledger \u2014 like the Ledger Flex \u2014 for more memory, the latest security enhancements, fresh features, and", " ", /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { color: "primary.c80" }, "an exclusive 20% off"), "."),
+    cta: /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false }, "Upgrade my Ledger"),
     tag: void 0,
     onClose: void 0,
     borderRadius: "5px"

package/lib/cjs/components/layout/Banner/BannerCard/BannerCard.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Banner/BannerCard/BannerCard.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\n\nimport { Text } from \"../../../asorted\";\nimport BannerCard, { BannerCardProps } from \".\";\n\nexport default {\n  title: \"Layout/Banner/BannerCard\",\n  component: BannerCard,\n  argTypes: {\n    title: {\n      description: \"Title of the card.\",\n    },\n    cta: {\n      description: \"Call to action text.\",\n    },\n    linkText: {\n      description: \"Link text.\",\n    },\n    description: {\n      description: \"Description of the card.\",\n    },\n    tag: {\n      description: \"Tag to be displayed on top of the card.\",\n    },\n    image: {\n      description: \"Image to be displayed on the right of the card.\",\n    },\n    onClick: {\n      description: \"Function to be called when the card is clicked.\",\n    },\n    onLinkClick: {\n      description: \"Function to be called when the link is clicked.\",\n    },\n    onClose: {\n      description: \"Function to be called when the close button is clicked.\",\n    },\n  },\n  args: {\n    title: \"Ledger Recover\",\n    description: \"Get peace of mind and start your free trial.\",\n    cta: \"Start my free trial\",\n    linkText: \"Learn more\",\n    tag: \"New\",\n    image:\n      \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\",\n  },\n} satisfies Meta<BannerCardProps>;\n\nexport const Default: StoryObj<BannerCardProps> = {};\n\nexport const LNSCardBanner: StoryObj<BannerCardProps> = {\n  args: {\n    title: \"It's time to upgrade\",\n    description: (\n      <>\n        Upgrade to our latest devices with <Text color=\"constant.purple\">20% discount</Text> for an\n        enhanced security and a seamless experience.\n      </>\n    ),\n    descriptionWidth: 320,\n    cta: \"Level up my wallet\",\n    tag: undefined,\n    onClose: undefined,\n    borderRadius: \"5px\",\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAElB,qBAAqB;AACrB,eAA4C;AAE5C,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OACE;AAAA,EACJ;AACF;AAEO,MAAM,UAAqC,CAAC;AAE5C,MAAM,gBAA2C;AAAA,EACtD,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aACE,6BAAAC,QAAA,2BAAAA,QAAA,gBAAE,uCACmC,6BAAAA,QAAA,cAAC,uBAAK,OAAM,qBAAkB,cAAY,GAAO,sDAEtF;AAAA,IAEF,kBAAkB;AAAA,IAClB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,EAChB;AACF;",
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\n\nimport { Text } from \"../../../asorted\";\nimport { Button, Link } from \"../../../cta\";\nimport BannerCard from \".\";\n\nconst meta: Meta<typeof BannerCard> = {\n  title: \"Layout/Banner/BannerCard\",\n  component: BannerCard,\n  argTypes: {\n    title: {\n      description: \"Title of the card.\",\n    },\n    cta: {\n      description: \"Call to action element.\",\n    },\n    description: {\n      description: \"Description of the card.\",\n    },\n    tag: {\n      description: \"Tag to be displayed on top of the card.\",\n    },\n    image: {\n      description: \"Image to be displayed on the right of the card.\",\n    },\n    onClick: {\n      description: \"Function to be called when the card is clicked.\",\n    },\n    onClose: {\n      description: \"Function to be called when the close button is clicked.\",\n    },\n  },\n  args: {\n    title: \"Ledger Recover\",\n    description: \"Get peace of mind and start your free trial.\",\n    cta: (\n      <Link>\n        <Text>Start my free trial</Text>\n      </Link>\n    ),\n    tag: \"New\",\n    image:\n      \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\",\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof BannerCard>;\n\nexport const Default: Story = {};\n\nexport const LNSCardBanner: Story = {\n  args: {\n    title: \"Limited memory, limited experience\",\n    description: (\n      <>\n        Upgrade your Nano S to a newer Ledger \u2014 like the Ledger Flex \u2014 for more memory, the latest\n        security enhancements, fresh features, and{\" \"}\n        <Text color=\"primary.c80\">an exclusive 20% off</Text>.\n      </>\n    ),\n    cta: (\n      <Button variant=\"main\" outline={false}>\n        Upgrade my Ledger\n      </Button>\n    ),\n    tag: undefined,\n    onClose: undefined,\n    borderRadius: \"5px\",\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAElB,qBAAqB;AACrB,iBAA6B;AAC7B,eAAuB;AAEvB,MAAM,OAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KACE,6BAAAC,QAAA,cAAC,uBACC,6BAAAA,QAAA,cAAC,2BAAK,qBAAmB,CAC3B;AAAA,IAEF,KAAK;AAAA,IACL,OACE;AAAA,EACJ;AACF;AACA,IAAO,6BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,gBAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aACE,6BAAAA,QAAA,2BAAAA,QAAA,gBAAE,mJAE2C,KAC3C,6BAAAA,QAAA,cAAC,uBAAK,OAAM,iBAAc,sBAAoB,GAAO,GACvD;AAAA,IAEF,KACE,6BAAAA,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,SAAO,mBAEvC;AAAA,IAEF,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,EAChB;AACF;",
   "names": ["BannerCard", "React"]
 }

package/lib/cjs/components/layout/Banner/BannerCard/index.js

@@ -35,20 +35,18 @@ var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_styles = require("../../../../styles");
 var import_assets = require("../../../../assets");
-var import_asorted = require("../../../asorted");
+var import_Text = __toESM(require("../../../asorted/Text"));
 var import_cta = require("../../../cta");
 var import_Tag = __toESM(require("../../../Tag"));
 var import__ = require("../..");
 function BannerCard({
   title,
   cta,
-  linkText,
   description,
   descriptionWidth,
   tag,
   image,
   onClick,
-  onLinkClick,
   onClose,
   ...boxProps
 }) {
@@ -56,26 +54,22 @@ function BannerCard({
     event.stopPropagation();
     onClose == null ? void 0 : onClose(event);
   };
-  const handleCTAClick = (event) => {
+  const handleClick = (event) => {
     event.stopPropagation();
     onClick(event);
   };
-  const handleLinkClick = (event) => {
-    event.stopPropagation();
-    onLinkClick == null ? void 0 : onLinkClick(event);
-  };
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { ...boxProps, image, tag, onClick: handleCTAClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, { maxWidth: descriptionWidth }, description), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { columnGap: 5 }, cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false, onClick: handleCTAClick }, cta), linkText && /* @__PURE__ */ import_react.default.createElement(import_cta.Link, { onClick: handleLinkClick }, /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { variant: "body", fontSize: 14, flexShrink: 1 }, linkText))), onClose && /* @__PURE__ */ import_react.default.createElement(import_styles.StyleProvider, { selectedPalette: "dark" }, /* @__PURE__ */ import_react.default.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose })));
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { ...boxProps, image, tag, onClick: handleClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, { maxWidth: descriptionWidth }, description), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { columnGap: 5 }, cta), onClose && /* @__PURE__ */ import_react.default.createElement(import_styles.StyleProvider, { selectedPalette: "dark" }, /* @__PURE__ */ import_react.default.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose })));
 }
 const StyledTag = (0, import_styled_components.default)(import_Tag.default).attrs({ size: "medium", type: "plain", active: true })`
   font-size: 11px;
   background-color: ${(p) => p.theme.colors.primary.c80};
 `;
-const Title = (0, import_styled_components.default)(import_asorted.Text).attrs({ variant: "h4Inter" })`
+const Title = (0, import_styled_components.default)(import_Text.default).attrs({ variant: "h4Inter" })`
   font-family: Inter;
   font-size: 24px;
   font-weight: 600;
 `;
-const Desc = (0, import_styled_components.default)(import_asorted.Text).attrs({ variant: "small", color: "neutral.c70" })`
+const Desc = (0, import_styled_components.default)(import_Text.default).attrs({ variant: "small", color: "neutral.c70" })`
   font-family: Inter;
   font-size: 13px;
   font-style: normal;
@@ -93,7 +87,6 @@ const Wrapper = (0, import_styled_components.default)(import__.Flex)`
   padding: 16px;
   padding-top: ${(p) => p.tag ? "16px" : "24px"};
   padding-right: 50%;
-  flex-basis: 100%;
 
   position: relative;
   flex-direction: column;

package/lib/cjs/components/layout/Banner/BannerCard/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Banner/BannerCard/index.tsx"],
-  "sourcesContent": ["import React, { type ReactEventHandler, type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nimport { StyleProvider } from \"../../../../styles\";\nimport { Icons } from \"../../../../assets\";\nimport { Text } from \"../../../asorted\";\nimport { Button, Link } from \"../../../cta\";\nimport Tag from \"../../../Tag\";\nimport type { FlexBoxProps } from \"../../Flex\";\nimport { Flex } from \"../..\";\n\nexport type BannerCardProps = FlexBoxProps & {\n  title: string;\n  cta?: string;\n  linkText?: string;\n  description?: ReactNode;\n  descriptionWidth?: number;\n  tag?: string;\n  image?: string;\n\n  onClick: ReactEventHandler;\n  onLinkClick?: ReactEventHandler;\n  onClose?: ReactEventHandler;\n};\n\nexport default function BannerCard({\n  title,\n  cta,\n  linkText,\n  description,\n  descriptionWidth,\n  tag,\n  image,\n  onClick,\n  onLinkClick,\n  onClose,\n  ...boxProps\n}: BannerCardProps) {\n  const handleClose: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClose?.(event);\n  };\n  const handleCTAClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClick(event);\n  };\n  const handleLinkClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onLinkClick?.(event);\n  };\n\n  return (\n    <Wrapper {...boxProps} image={image} tag={tag} onClick={handleCTAClick}>\n      {tag && <StyledTag>{tag}</StyledTag>}\n      <Title>{title}</Title>\n      {description && <Desc maxWidth={descriptionWidth}>{description}</Desc>}\n      <Flex columnGap={5}>\n        {cta && (\n          <Button variant=\"main\" outline={false} onClick={handleCTAClick}>\n            {cta}\n          </Button>\n        )}\n        {linkText && (\n          <Link onClick={handleLinkClick}>\n            <Text variant=\"body\" fontSize={14} flexShrink={1}>\n              {linkText}\n            </Text>\n          </Link>\n        )}\n      </Flex>\n      {onClose && (\n        <StyleProvider selectedPalette=\"dark\">\n          <CloseButton data-testid=\"portfolio-card-close-button\" onClick={handleClose} />\n        </StyleProvider>\n      )}\n    </Wrapper>\n  );\n}\n\nconst StyledTag = styled(Tag).attrs({ size: \"medium\", type: \"plain\", active: true })`\n  font-size: 11px;\n  background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Title = styled(Text).attrs({ variant: \"h4Inter\" })`\n  font-family: Inter;\n  font-size: 24px;\n  font-weight: 600;\n`;\n\nconst Desc = styled(Text).attrs({ variant: \"small\", color: \"neutral.c70\" })`\n  font-family: Inter;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 500;\n  padding-bottom: 8px;\n`;\n\nconst Wrapper = styled(Flex)<Pick<BannerCardProps, \"image\" | \"tag\">>`\n  background-color: ${p => p.theme.colors.background.card};\n  background-image: ${p => (p.image ? `url(\"${p.image}\")` : \"none\")};\n  background-position: right center;\n  background-repeat: no-repeat;\n  background-size: 50% auto;\n\n  cursor: pointer;\n  padding: 16px;\n  padding-top: ${p => (p.tag ? \"16px\" : \"24px\")};\n  padding-right: 50%;\n  flex-basis: 100%;\n\n  position: relative;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  gap: 4px;\n`;\n\nconst CloseButton = styled(Button).attrs({\n  Icon: <Icons.Close size=\"XS\" />,\n  iconButton: true,\n  outline: true,\n})`\n  background-color: ${p => p.theme.colors.neutral.c30};\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  width: 24px;\n  height: 24px;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,+BAAmB;AAEnB,oBAA8B;AAC9B,oBAAsB;AACtB,qBAAqB;AACrB,iBAA6B;AAC7B,iBAAgB;AAEhB,eAAqB;AAgBN,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,uCAAU;AAAA,EACZ;AACA,QAAM,iBAAoC,WAAS;AACjD,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AACA,QAAM,kBAAqC,WAAS;AAClD,UAAM,gBAAgB;AACtB,+CAAc;AAAA,EAChB;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,UAAU,OAAc,KAAU,SAAS,kBACrD,OAAO,6BAAAA,QAAA,cAAC,iBAAW,GAAI,GACxB,6BAAAA,QAAA,cAAC,aAAO,KAAM,GACb,eAAe,6BAAAA,QAAA,cAAC,QAAK,UAAU,oBAAmB,WAAY,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,WAAW,KACd,OACC,6BAAAA,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,OAAO,SAAS,kBAC7C,GACH,GAED,YACC,6BAAAA,QAAA,cAAC,mBAAK,SAAS,mBACb,6BAAAA,QAAA,cAAC,uBAAK,SAAQ,QAAO,UAAU,IAAI,YAAY,KAC5C,QACH,CACF,CAEJ,GACC,WACC,6BAAAA,QAAA,cAAC,+BAAc,iBAAgB,UAC7B,6BAAAA,QAAA,cAAC,eAAY,eAAY,+BAA8B,SAAS,aAAa,CAC/E,CAEJ;AAEJ;AAEA,MAAM,gBAAY,yBAAAC,SAAO,WAAAC,OAAG,EAAE,MAAM,EAAE,MAAM,UAAU,MAAM,SAAS,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAE7D,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGrD,MAAM,YAAQ,yBAAAD,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,WAAO,yBAAAA,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,SAAS,OAAO,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1E,MAAM,cAAU,yBAAAA,SAAO,aAAI;AAAA,sBACL,OAAK,EAAE,MAAM,OAAO,WAAW,IAAI;AAAA,sBACnC,OAAM,EAAE,QAAQ,QAAQ,EAAE,KAAK,OAAO,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlD,OAAM,EAAE,MAAM,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/C,MAAM,kBAAc,yBAAAA,SAAO,iBAAM,EAAE,MAAM;AAAA,EACvC,MAAM,6BAAAD,QAAA,cAAC,oBAAM,OAAN,EAAY,MAAK,MAAK;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["React", "styled", "Tag"]
+  "sourcesContent": ["import React, { type ReactEventHandler, type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nimport { StyleProvider } from \"../../../../styles\";\nimport { Icons } from \"../../../../assets\";\nimport Text from \"../../../asorted/Text\";\nimport { Button } from \"../../../cta\";\nimport Tag from \"../../../Tag\";\nimport type { FlexBoxProps } from \"../../Flex\";\nimport { Flex } from \"../..\";\n\ntype Props = FlexBoxProps & {\n  title: string;\n  cta?: ReactNode;\n  description?: ReactNode;\n  descriptionWidth?: number;\n  tag?: string;\n  image?: string;\n\n  onClick: ReactEventHandler;\n  onClose?: ReactEventHandler;\n};\n\nexport default function BannerCard({\n  title,\n  cta,\n  description,\n  descriptionWidth,\n  tag,\n  image,\n  onClick,\n  onClose,\n  ...boxProps\n}: Props) {\n  const handleClose: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClose?.(event);\n  };\n  const handleClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClick(event);\n  };\n\n  return (\n    <Wrapper {...boxProps} image={image} tag={tag} onClick={handleClick}>\n      {tag && <StyledTag>{tag}</StyledTag>}\n      <Title>{title}</Title>\n      {description && <Desc maxWidth={descriptionWidth}>{description}</Desc>}\n      <Flex columnGap={5}>{cta}</Flex>\n      {onClose && (\n        <StyleProvider selectedPalette=\"dark\">\n          <CloseButton data-testid=\"portfolio-card-close-button\" onClick={handleClose} />\n        </StyleProvider>\n      )}\n    </Wrapper>\n  );\n}\n\nconst StyledTag = styled(Tag).attrs({ size: \"medium\", type: \"plain\", active: true })`\n  font-size: 11px;\n  background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Title = styled(Text).attrs({ variant: \"h4Inter\" })`\n  font-family: Inter;\n  font-size: 24px;\n  font-weight: 600;\n`;\n\nconst Desc = styled(Text).attrs({ variant: \"small\", color: \"neutral.c70\" })`\n  font-family: Inter;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 500;\n  padding-bottom: 8px;\n`;\n\nconst Wrapper = styled(Flex)<Pick<Props, \"image\" | \"tag\">>`\n  background-color: ${p => p.theme.colors.background.card};\n  background-image: ${p => (p.image ? `url(\"${p.image}\")` : \"none\")};\n  background-position: right center;\n  background-repeat: no-repeat;\n  background-size: 50% auto;\n\n  cursor: pointer;\n  padding: 16px;\n  padding-top: ${p => (p.tag ? \"16px\" : \"24px\")};\n  padding-right: 50%;\n\n  position: relative;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  gap: 4px;\n`;\n\nconst CloseButton = styled(Button).attrs({\n  Icon: <Icons.Close size=\"XS\" />,\n  iconButton: true,\n  outline: true,\n})`\n  background-color: ${p => p.theme.colors.neutral.c30};\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  width: 24px;\n  height: 24px;\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,+BAAmB;AAEnB,oBAA8B;AAC9B,oBAAsB;AACtB,kBAAiB;AACjB,iBAAuB;AACvB,iBAAgB;AAEhB,eAAqB;AAcN,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,uCAAU;AAAA,EACZ;AACA,QAAM,cAAiC,WAAS;AAC9C,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,UAAU,OAAc,KAAU,SAAS,eACrD,OAAO,6BAAAA,QAAA,cAAC,iBAAW,GAAI,GACxB,6BAAAA,QAAA,cAAC,aAAO,KAAM,GACb,eAAe,6BAAAA,QAAA,cAAC,QAAK,UAAU,oBAAmB,WAAY,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,WAAW,KAAI,GAAI,GACxB,WACC,6BAAAA,QAAA,cAAC,+BAAc,iBAAgB,UAC7B,6BAAAA,QAAA,cAAC,eAAY,eAAY,+BAA8B,SAAS,aAAa,CAC/E,CAEJ;AAEJ;AAEA,MAAM,gBAAY,yBAAAC,SAAO,WAAAC,OAAG,EAAE,MAAM,EAAE,MAAM,UAAU,MAAM,SAAS,QAAQ,KAAK,CAAC;AAAA;AAAA,sBAE7D,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGrD,MAAM,YAAQ,yBAAAD,SAAO,YAAAE,OAAI,EAAE,MAAM,EAAE,SAAS,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,WAAO,yBAAAF,SAAO,YAAAE,OAAI,EAAE,MAAM,EAAE,SAAS,SAAS,OAAO,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1E,MAAM,cAAU,yBAAAF,SAAO,aAAI;AAAA,sBACL,OAAK,EAAE,MAAM,OAAO,WAAW,IAAI;AAAA,sBACnC,OAAM,EAAE,QAAQ,QAAQ,EAAE,KAAK,OAAO,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOlD,OAAM,EAAE,MAAM,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/C,MAAM,kBAAc,yBAAAA,SAAO,iBAAM,EAAE,MAAM;AAAA,EACvC,MAAM,6BAAAD,QAAA,cAAC,oBAAM,OAAN,EAAY,MAAK,MAAK;AAAA,EAC7B,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": ["React", "styled", "Tag", "Text"]
 }

package/lib/cjs/components/layout/Banner/NotificationCard/NotificationCard.stories.js

@@ -33,9 +33,11 @@ __export(NotificationCard_stories_exports, {
   default: () => NotificationCard_stories_default
 });
 module.exports = __toCommonJS(NotificationCard_stories_exports);
+var import_react = __toESM(require("react"));
 var import_assets = require("../../../../assets");
+var import_cta = require("../../../cta");
 var import__ = __toESM(require("."));
-var NotificationCard_stories_default = {
+const meta = {
   title: "Layout/Banner/NotificationCard",
   component: import__.default,
   argTypes: {
@@ -43,7 +45,7 @@ var NotificationCard_stories_default = {
       description: "Title of the card."
     },
     cta: {
-      description: "Call to action text."
+      description: "Call to action element."
     },
     description: {
       description: "Description of the card."
@@ -62,17 +64,18 @@ var NotificationCard_stories_default = {
   args: {
     title: "Ledger Recover",
     description: "Get peace of mind and start your free trial.",
-    cta: "Start my free trial",
+    cta: /* @__PURE__ */ import_react.default.createElement(import_cta.Link, { alignSelf: "start" }, "Start my free trial"),
     icon: "Warning",
     isHighlighted: false
   }
 };
+var NotificationCard_stories_default = meta;
 const Default = {};
 const LNSNotificationCard = {
   args: {
-    title: void 0,
-    description: "Updates are ending soon. Upgrade now with 20% off for a seamless experience.",
-    cta: "Level up my wallet",
+    title: "",
+    description: "Upgrade your Nano S to a newer Ledger \u2014 like the Ledger Flex \u2014 for more memory, the latest security enhancements, fresh features, and an exclusive 20% off. ",
+    cta: /* @__PURE__ */ import_react.default.createElement(import_cta.Link, { alignSelf: "start", color: "primary.c80" }, "Upgrade my Ledger", /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.ExternalLink, { size: "S", style: { marginLeft: "8px", verticalAlign: "middle" } })),
     icon: "SparksFill",
     isHighlighted: true
   }

package/lib/cjs/components/layout/Banner/NotificationCard/NotificationCard.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Banner/NotificationCard/NotificationCard.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Icons } from \"../../../../assets\";\nimport NotificationCard, { NotificationCardProps } from \".\";\n\nexport default {\n  title: \"Layout/Banner/NotificationCard\",\n  component: NotificationCard,\n  argTypes: {\n    title: {\n      description: \"Title of the card.\",\n    },\n    cta: {\n      description: \"Call to action text.\",\n    },\n    description: {\n      description: \"Description of the card.\",\n    },\n    icon: {\n      description: \"Icon to be displayed on the left of the notification card.\",\n      options: Object.keys(Icons),\n      control: {\n        type: \"select\",\n      },\n    },\n    onClick: {\n      description: \"Function to be called when the card is clicked.\",\n    },\n  },\n  args: {\n    title: \"Ledger Recover\",\n    description: \"Get peace of mind and start your free trial.\",\n    cta: \"Start my free trial\",\n    icon: \"Warning\",\n    isHighlighted: false,\n  },\n} satisfies Meta<NotificationCardProps>;\n\nexport const Default: StoryObj<NotificationCardProps> = {};\n\nexport const LNSNotificationCard: StoryObj<NotificationCardProps> = {\n  args: {\n    title: undefined,\n    description: \"Updates are ending soon. Upgrade now with 20% off for a seamless experience.\",\n    cta: \"Level up my wallet\",\n    icon: \"SparksFill\",\n    isHighlighted: true,\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAsB;AACtB,eAAwD;AAExD,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,MACb,SAAS,OAAO,KAAK,mBAAK;AAAA,MAC1B,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KAAK;AAAA,IACL,MAAM;AAAA,IACN,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,UAA2C,CAAC;AAElD,MAAM,sBAAuD;AAAA,EAClE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KAAK;AAAA,IACL,MAAM;AAAA,IACN,eAAe;AAAA,EACjB;AACF;",
-  "names": ["NotificationCard"]
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\n\nimport { Icons } from \"../../../../assets\";\nimport { Link } from \"../../../cta\";\nimport NotificationCard from \".\";\n\nconst meta: Meta<typeof NotificationCard> = {\n  title: \"Layout/Banner/NotificationCard\",\n  component: NotificationCard,\n  argTypes: {\n    title: {\n      description: \"Title of the card.\",\n    },\n    cta: {\n      description: \"Call to action element.\",\n    },\n    description: {\n      description: \"Description of the card.\",\n    },\n    icon: {\n      description: \"Icon to be displayed on the left of the notification card.\",\n      options: Object.keys(Icons),\n      control: {\n        type: \"select\",\n      },\n    },\n    onClick: {\n      description: \"Function to be called when the card is clicked.\",\n    },\n  },\n  args: {\n    title: \"Ledger Recover\",\n    description: \"Get peace of mind and start your free trial.\",\n    cta: <Link alignSelf=\"start\">Start my free trial</Link>,\n    icon: \"Warning\",\n    isHighlighted: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NotificationCard>;\n\nexport const Default: Story = {};\n\nexport const LNSNotificationCard: Story = {\n  args: {\n    title: \"\",\n    description:\n      \"Upgrade your Nano S to a newer Ledger \u2014 like the Ledger Flex \u2014 for more memory, the latest security enhancements, fresh features, and an exclusive 20% off. \",\n    cta: (\n      <Link alignSelf=\"start\" color=\"primary.c80\">\n        Upgrade my Ledger\n        <Icons.ExternalLink size=\"S\" style={{ marginLeft: \"8px\", verticalAlign: \"middle\" }} />\n      </Link>\n    ),\n    icon: \"SparksFill\",\n    isHighlighted: true,\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAElB,oBAAsB;AACtB,iBAAqB;AACrB,eAA6B;AAE7B,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,aAAa;AAAA,IACf;AAAA,IACA,KAAK;AAAA,MACH,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aAAa;AAAA,IACf;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,MACb,SAAS,OAAO,KAAK,mBAAK;AAAA,MAC1B,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,KAAK,6BAAAC,QAAA,cAAC,mBAAK,WAAU,WAAQ,qBAAmB;AAAA,IAChD,MAAM;AAAA,IACN,eAAe;AAAA,EACjB;AACF;AACA,IAAO,mCAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,sBAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,KACE,6BAAAA,QAAA,cAAC,mBAAK,WAAU,SAAQ,OAAM,iBAAc,qBAE1C,6BAAAA,QAAA,cAAC,oBAAM,cAAN,EAAmB,MAAK,KAAI,OAAO,EAAE,YAAY,OAAO,eAAe,SAAS,GAAG,CACtF;AAAA,IAEF,MAAM;AAAA,IACN,eAAe;AAAA,EACjB;AACF;",
+  "names": ["NotificationCard", "React"]
 }

package/lib/cjs/components/layout/Banner/NotificationCard/index.js

@@ -33,17 +33,9 @@ __export(NotificationCard_exports, {
 module.exports = __toCommonJS(NotificationCard_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_assets = require("../../../../assets");
 var import_asorted = require("../../../asorted");
-var import_cta = require("../../../cta");
+var import_Text = __toESM(require("../../../asorted/Text"));
 var import__ = require("../..");
-const colorsByIcon = {
-  Warning: {
-    icon: "warning.c80",
-    iconBg: "warning.c30",
-    cta: "warning.c80"
-  }
-};
 function NotificationCard({
   title,
   cta,
@@ -57,49 +49,20 @@ function NotificationCard({
     event.stopPropagation();
     onClick(event);
   };
-  const safeIcon = icon in import_assets.Icons ? icon : "Information";
-  const Icon = import_assets.Icons[safeIcon];
-  const colors = colorsByIcon[safeIcon];
-  const ctaColor = isHighlighted ? (colors == null ? void 0 : colors.cta) ?? "primary.c80" : "neutral.c100";
-  const iconColor = (colors == null ? void 0 : colors.icon) ?? "primary.c80";
-  const iconBgColor = (colors == null ? void 0 : colors.iconBg) ?? "opacityPurple.c10";
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { ...boxProps, isHighlighted, onClick: handleCTAClick }, /* @__PURE__ */ import_react.default.createElement(IconWrapper, { backgroundColor: iconBgColor, isHighlighted }, /* @__PURE__ */ import_react.default.createElement(Icon, { color: iconColor })), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "column", rowGap: isHighlighted ? "4px" : "8px" }, title && /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { variant: "h4Inter", fontSize: 16 }, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, { color: isHighlighted ? "neutral.c100" : "neutral.c80" }, description), cta && /* @__PURE__ */ import_react.default.createElement(Cta, { color: ctaColor, onClick: handleCTAClick }, cta)));
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { ...boxProps, isHighlighted, onClick: handleCTAClick }, /* @__PURE__ */ import_react.default.createElement(import_asorted.NotificationIcon, { icon, variant: isHighlighted ? "square" : "round" }), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "column", rowGap: isHighlighted ? "4px" : "8px" }, title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h4Inter", fontSize: 16 }, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, { color: isHighlighted ? "neutral.c100" : "neutral.c80" }, description), cta));
 }
-const Desc = (0, import_styled_components.default)(import_asorted.Text).attrs({ variant: "small" })`
+const Desc = (0, import_styled_components.default)(import_Text.default).attrs({ variant: "small" })`
   font-family: Inter;
   font-size: 13px;
   font-style: normal;
   font-weight: 500;
 `;
-const Cta = (0, import_styled_components.default)(import_cta.Link).attrs({ alignSelf: "start" })`
-  font-size: 13px;
-`;
-const IconWrapper = (0, import_styled_components.default)(import__.Flex)`
-  border-radius: ${(p) => p.isHighlighted ? "13.5px" : "50%"};
-  padding: 8px;
-  ${(p) => p.isHighlighted && import_styled_components.css`
-      background-clip: padding-box;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent;
-      position: relative;
-      &::before {
-        content: "";
-        position: absolute;
-        inset: -7px;
-        border-radius: 13.5px;
-        background: linear-gradient(
-          180deg,
-          ${p.theme.colors.opacityDefault.c05} 0%,
-          rgba(29, 28, 31, 0) 100%
-        );
-      }
-    `}
-          
-  }
-`;
 const Wrapper = (0, import_styled_components.default)(import__.Grid)`
-  background-color: ${(p) => p.isHighlighted ? p.theme.colors.opacityDefault.c05 : "transparent"};
+  background-color: ${({ isHighlighted, theme: { colors } }) => {
+  if (!isHighlighted)
+    return "transparent";
+  return colors.type === "dark" ? colors.opacityDefault.c05 : colors.neutral.c00;
+}};
 
   cursor: pointer;
   padding: 12px;

package/lib/cjs/components/layout/Banner/NotificationCard/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Banner/NotificationCard/index.tsx"],
-  "sourcesContent": ["import React, { type ReactEventHandler, type ReactNode } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { Icons } from \"../../../../assets\";\nimport { Text } from \"../../../asorted\";\nimport { Link } from \"../../../cta\";\nimport type { Props as GridBoxProps } from \"../../Grid\";\nimport { Grid, Flex } from \"../..\";\n\ntype IconKey = keyof typeof Icons;\n\nexport type NotificationCardProps = GridBoxProps & {\n  title?: string;\n  cta?: string;\n  description?: ReactNode;\n  icon: IconKey;\n  isHighlighted?: boolean;\n\n  onClick: ReactEventHandler;\n};\n\nconst colorsByIcon: Partial<\n  Record<IconKey, Partial<{ icon: string; iconBg: string; cta: string }>>\n> = {\n  Warning: {\n    icon: \"warning.c80\",\n    iconBg: \"warning.c30\",\n    cta: \"warning.c80\",\n  },\n};\n\nexport default function NotificationCard({\n  title,\n  cta,\n  icon,\n  description,\n  isHighlighted,\n  onClick,\n  ...boxProps\n}: NotificationCardProps) {\n  const handleCTAClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClick(event);\n  };\n\n  const safeIcon: IconKey = icon in Icons ? icon : \"Information\";\n  const Icon = Icons[safeIcon];\n  const colors = colorsByIcon[safeIcon];\n  const ctaColor = isHighlighted ? colors?.cta ?? \"primary.c80\" : \"neutral.c100\";\n  const iconColor = colors?.icon ?? \"primary.c80\";\n  const iconBgColor = colors?.iconBg ?? \"opacityPurple.c10\";\n\n  return (\n    <Wrapper {...boxProps} isHighlighted={isHighlighted} onClick={handleCTAClick}>\n      <IconWrapper backgroundColor={iconBgColor} isHighlighted={isHighlighted}>\n        <Icon color={iconColor} />\n      </IconWrapper>\n      <Flex flexDirection=\"column\" rowGap={isHighlighted ? \"4px\" : \"8px\"}>\n        {title && (\n          <Text variant=\"h4Inter\" fontSize={16}>\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Desc color={isHighlighted ? \"neutral.c100\" : \"neutral.c80\"}>{description}</Desc>\n        )}\n        {cta && (\n          <Cta color={ctaColor} onClick={handleCTAClick}>\n            {cta}\n          </Cta>\n        )}\n      </Flex>\n    </Wrapper>\n  );\n}\n\nconst Desc = styled(Text).attrs({ variant: \"small\" })`\n  font-family: Inter;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 500;\n`;\n\nconst Cta = styled(Link).attrs({ alignSelf: \"start\" })`\n  font-size: 13px;\n`;\n\nconst IconWrapper = styled(Flex)<Pick<NotificationCardProps, \"isHighlighted\">>`\n  border-radius: ${p => (p.isHighlighted ? \"13.5px\" : \"50%\")};\n  padding: 8px;\n  ${p =>\n    p.isHighlighted &&\n    css`\n      background-clip: padding-box;\n      border-width: 7px;\n      border-style: solid;\n      border-color: transparent;\n      position: relative;\n      &::before {\n        content: \"\";\n        position: absolute;\n        inset: -7px;\n        border-radius: 13.5px;\n        background: linear-gradient(\n          180deg,\n          ${p.theme.colors.opacityDefault.c05} 0%,\n          rgba(29, 28, 31, 0) 100%\n        );\n      }\n    `}\n          \n  }\n`;\n\nconst Wrapper = styled(Grid)<Pick<NotificationCardProps, \"isHighlighted\">>`\n  background-color: ${p => (p.isHighlighted ? p.theme.colors.opacityDefault.c05 : \"transparent\")};\n\n  cursor: pointer;\n  padding: 12px;\n  grid-template-columns: auto 1fr;\n  gap: ${p => (p.isHighlighted ? \"12px\" : \"24px\")};\n  border-radius: 12px;\n\n  align-items: center;\n  justify-content: start;\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,+BAA4B;AAE5B,oBAAsB;AACtB,qBAAqB;AACrB,iBAAqB;AAErB,eAA2B;AAc3B,MAAM,eAEF;AAAA,EACF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AACF;AAEe,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,iBAAoC,WAAS;AACjD,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,WAAoB,QAAQ,sBAAQ,OAAO;AACjD,QAAM,OAAO,oBAAM,QAAQ;AAC3B,QAAM,SAAS,aAAa,QAAQ;AACpC,QAAM,WAAW,iBAAgB,iCAAQ,QAAO,gBAAgB;AAChE,QAAM,aAAY,iCAAQ,SAAQ;AAClC,QAAM,eAAc,iCAAQ,WAAU;AAEtC,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,UAAU,eAA8B,SAAS,kBAC5D,6BAAAA,QAAA,cAAC,eAAY,iBAAiB,aAAa,iBACzC,6BAAAA,QAAA,cAAC,QAAK,OAAO,WAAW,CAC1B,GACA,6BAAAA,QAAA,cAAC,iBAAK,eAAc,UAAS,QAAQ,gBAAgB,QAAQ,SAC1D,SACC,6BAAAA,QAAA,cAAC,uBAAK,SAAQ,WAAU,UAAU,MAC/B,KACH,GAED,eACC,6BAAAA,QAAA,cAAC,QAAK,OAAO,gBAAgB,iBAAiB,iBAAgB,WAAY,GAE3E,OACC,6BAAAA,QAAA,cAAC,OAAI,OAAO,UAAU,SAAS,kBAC5B,GACH,CAEJ,CACF;AAEJ;AAEA,MAAM,WAAO,yBAAAC,SAAO,mBAAI,EAAE,MAAM,EAAE,SAAS,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpD,MAAM,UAAM,yBAAAA,SAAO,eAAI,EAAE,MAAM,EAAE,WAAW,QAAQ,CAAC;AAAA;AAAA;AAIrD,MAAM,kBAAc,yBAAAA,SAAO,aAAI;AAAA,mBACZ,OAAM,EAAE,gBAAgB,WAAW,KAAM;AAAA;AAAA,IAExD,OACA,EAAE,iBACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAaQ,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA,KAIxC;AAAA;AAAA;AAAA;AAKL,MAAM,cAAU,yBAAAA,SAAO,aAAI;AAAA,sBACL,OAAM,EAAE,gBAAgB,EAAE,MAAM,OAAO,eAAe,MAAM,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA,SAKvF,OAAM,EAAE,gBAAgB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["React", "styled"]
+  "sourcesContent": ["import React, { type ReactEventHandler, type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport { NotificationIcon } from \"../../../asorted\";\nimport Text from \"../../../asorted/Text\";\nimport type { Props as GridBoxProps } from \"../../Grid\";\nimport { Grid, Flex } from \"../..\";\n\ntype IconKey = keyof typeof Icons;\n\ntype Props = GridBoxProps & {\n  title?: string;\n  cta?: ReactNode;\n  description?: ReactNode;\n  icon: IconKey;\n  isHighlighted?: boolean;\n\n  onClick: ReactEventHandler;\n};\n\nexport default function NotificationCard({\n  title,\n  cta,\n  icon,\n  description,\n  isHighlighted,\n  onClick,\n  ...boxProps\n}: Props) {\n  const handleCTAClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClick(event);\n  };\n\n  return (\n    <Wrapper {...boxProps} isHighlighted={isHighlighted} onClick={handleCTAClick}>\n      <NotificationIcon icon={icon} variant={isHighlighted ? \"square\" : \"round\"} />\n      <Flex flexDirection=\"column\" rowGap={isHighlighted ? \"4px\" : \"8px\"}>\n        {title && (\n          <Text variant=\"h4Inter\" fontSize={16}>\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Desc color={isHighlighted ? \"neutral.c100\" : \"neutral.c80\"}>{description}</Desc>\n        )}\n        {cta}\n      </Flex>\n    </Wrapper>\n  );\n}\n\nconst Desc = styled(Text).attrs({ variant: \"small\" })`\n  font-family: Inter;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 500;\n`;\n\nconst Wrapper = styled(Grid)<Pick<Props, \"isHighlighted\">>`\n  background-color: ${({ isHighlighted, theme: { colors } }) => {\n    if (!isHighlighted) return \"transparent\";\n    return colors.type === \"dark\" ? colors.opacityDefault.c05 : colors.neutral.c00;\n  }};\n\n  cursor: pointer;\n  padding: 12px;\n  grid-template-columns: auto 1fr;\n  gap: ${p => (p.isHighlighted ? \"12px\" : \"24px\")};\n  border-radius: 12px;\n\n  align-items: center;\n  justify-content: start;\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,+BAAmB;AAGnB,qBAAiC;AACjC,kBAAiB;AAEjB,eAA2B;AAcZ,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,iBAAoC,WAAS;AACjD,UAAM,gBAAgB;AACtB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,6BAAAA,QAAA,cAAC,WAAS,GAAG,UAAU,eAA8B,SAAS,kBAC5D,6BAAAA,QAAA,cAAC,mCAAiB,MAAY,SAAS,gBAAgB,WAAW,SAAS,GAC3E,6BAAAA,QAAA,cAAC,iBAAK,eAAc,UAAS,QAAQ,gBAAgB,QAAQ,SAC1D,SACC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,WAAU,UAAU,MAC/B,KACH,GAED,eACC,6BAAAD,QAAA,cAAC,QAAK,OAAO,gBAAgB,iBAAiB,iBAAgB,WAAY,GAE3E,GACH,CACF;AAEJ;AAEA,MAAM,WAAO,yBAAAE,SAAO,YAAAD,OAAI,EAAE,MAAM,EAAE,SAAS,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpD,MAAM,cAAU,yBAAAC,SAAO,aAAI;AAAA,sBACL,CAAC,EAAE,eAAe,OAAO,EAAE,OAAO,EAAE,MAAM;AAC5D,MAAI,CAAC;AAAe,WAAO;AAC3B,SAAO,OAAO,SAAS,SAAS,OAAO,eAAe,MAAM,OAAO,QAAQ;AAC7E,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,SAKM,OAAM,EAAE,gBAAgB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": ["React", "Text", "styled"]
 }

package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js

@@ -32,6 +32,7 @@ __export(PortfolioContentCard_exports, {
 });
 module.exports = __toCommonJS(PortfolioContentCard_exports);
 var import_react = __toESM(require("react"));
+var import_cta = require("../../../cta");
 var import_BannerCard = __toESM(require("../../Banner/BannerCard"));
 function PortfolioContentCard({
   title,
@@ -46,7 +47,7 @@ function PortfolioContentCard({
     import_BannerCard.default,
     {
       title,
-      cta,
+      cta: cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false }, cta),
       description,
       tag,
       image,

package/lib/cjs/components/layout/ContentCard/PortfolioContentCard/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],
-  "sourcesContent": ["import React, { type ReactEventHandler } from \"react\";\n\nimport BannerCard from \"../../Banner/BannerCard\";\n\nexport type PortfolioContentCardProps = {\n  title: string;\n  cta?: string;\n  description?: string;\n  tag?: string;\n  image?: string;\n\n  onClick: ReactEventHandler;\n  onClose: ReactEventHandler;\n};\n\nexport default function PortfolioContentCard({\n  title,\n  cta,\n  description,\n  tag,\n  image,\n  onClick,\n  onClose,\n}: PortfolioContentCardProps) {\n  return (\n    <BannerCard\n      title={title}\n      cta={cta}\n      description={description}\n      tag={tag}\n      image={image}\n      onClick={onClick}\n      onClose={onClose}\n    />\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAE9C,wBAAuB;AAaR,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,6BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { type ReactEventHandler } from \"react\";\n\nimport { Button } from \"../../../cta\";\nimport BannerCard from \"../../Banner/BannerCard\";\n\nexport type PortfolioContentCardProps = {\n  title: string;\n  cta?: string;\n  description?: string;\n  tag?: string;\n  image?: string;\n\n  onClick: ReactEventHandler;\n  onClose: ReactEventHandler;\n};\n\nexport default function PortfolioContentCard({\n  title,\n  cta,\n  description,\n  tag,\n  image,\n  onClick,\n  onClose,\n}: PortfolioContentCardProps) {\n  return (\n    <BannerCard\n      title={title}\n      cta={\n        cta && (\n          <Button variant=\"main\" outline={false}>\n            {cta}\n          </Button>\n        )\n      }\n      description={description}\n      tag={tag}\n      image={image}\n      onClick={onClick}\n      onClose={onClose}\n    />\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAE9C,iBAAuB;AACvB,wBAAuB;AAaR,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,6BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KACE,OACE,6BAAAD,QAAA,cAAC,qBAAO,SAAQ,QAAO,SAAS,SAC7B,GACH;AAAA,MAGJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React", "BannerCard"]
 }

package/lib/components/asorted/Icon/NotificationIcon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import * as Icons from "@ledgerhq/icons-ui/react";
+type IconKey = keyof typeof Icons;
+type WrapperType = "round" | "square";
+type Props = Readonly<{
+    icon: IconKey;
+    variant: WrapperType;
+}>;
+export default function NotificationIcon({ icon, variant }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=NotificationIcon.d.ts.map

package/lib/components/asorted/Icon/NotificationIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAIlD,KAAK,OAAO,GAAG,MAAM,OAAO,KAAK,CAAC;AAClC,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAwBtC,KAAK,KAAK,GAAG,QAAQ,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAiB,EAAE,EAAE,KAAK,qBAa1E"}

package/lib/components/asorted/Icon/NotificationIcon.js

@@ -0,0 +1,73 @@
+import React from "react";
+import styled, { css, useTheme } from "styled-components";
+import * as Icons from "@ledgerhq/icons-ui/react";
+import { Box } from "../../layout";
+import { rgba } from "../../../styles";
+function getColorsByIcon(colors) {
+    const { warning } = colors;
+    return {
+        Warning: {
+            round: { fg: warning.c80, bg: warning.c30 },
+            square: { fg: warning.c80, bg: warning.c30 },
+        },
+    };
+}
+function getDefaultDefaultColors({ primary }) {
+    return {
+        round: { fg: primary.c90, bg: primary.c30 },
+        square: { fg: primary.c80, bg: rgba(primary.c80, 0.08) },
+    };
+}
+export default function NotificationIcon({ icon, variant = "round" }) {
+    const { colors } = useTheme();
+    const defaultColors = getDefaultDefaultColors(colors)[variant];
+    const safeIcon = icon in Icons ? icon : "Information";
+    const Icon = Icons[safeIcon];
+    const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } = getColorsByIcon(colors)[safeIcon]?.[variant] ?? {};
+    return (React.createElement(Wrapper, { backgroundColor: iconBgColor, variant: variant },
+        React.createElement(Icon, { color: iconColor })));
+}
+const Wrapper = styled(Box) `
+  display: inline-flex;
+  padding: 8px;
+  ${p => (p.variant === "square" ? squareWrapper : roundWrapper)}
+`;
+const roundWrapper = css `
+  border-radius: 50%;
+`;
+const squareWrapper = css `
+  border-radius: 13.5px;
+  background-clip: padding-box;
+  border-width: 7px;
+  border-style: solid;
+  border-color: transparent;
+  position: relative;
+
+  ${p => css `
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: -7px;
+      border-radius: 13.5px;
+      rotate: ${p.theme.colors.type === "dark" ? "0deg" : "180deg"};
+    }
+    &::before {
+      background: linear-gradient(
+        ${p.theme.colors.type === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(29, 28, 31, 0.05)"}
+          0%,
+        rgba(29, 28, 31, 0) 100%
+      );
+    }
+    &::after {
+      content: ${p.theme.colors.type};
+      border: solid 0.5px ${p.theme.colors.type === "dark" ? "#fff" : "rgba(0, 0, 0, 0.5)"};
+      mask-image: linear-gradient(
+        rgba(255, 255, 255, 0.15) 0%,
+        rgba(255, 255, 255, 0.01) 60%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  `};
+`;
+//# sourceMappingURL=NotificationIcon.js.map

package/lib/components/asorted/Icon/NotificationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/NotificationIcon.tsx"],"names":[],"mappings":"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"}

package/lib/components/asorted/Icon/index.d.ts

@@ -3,4 +3,5 @@ import BoxedIcon, { IconBox } from "./BoxedIcon";
 export { BoxedIcon, IconBox };
 export type { Props } from "./Icon";
 export { default as CryptoIcon } from "./CryptoIcon";
+export { default as NotificationIcon } from "./NotificationIcon";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/asorted/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAC9B,YAAY,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAC9B,YAAY,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/asorted/Icon/index.js

@@ -2,4 +2,5 @@ export { default, iconNames } from "./Icon";
 import BoxedIcon, { IconBox } from "./BoxedIcon";
 export { BoxedIcon, IconBox };
 export { default as CryptoIcon } from "./CryptoIcon";
+export { default as NotificationIcon } from "./NotificationIcon";
 //# sourceMappingURL=index.js.map

package/lib/components/asorted/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/asorted/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/asorted/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox, BoxedIcon, CryptoIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon, NotificationIcon } from "./Icon";
 export { default as Text } from "./Text";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/asorted/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/asorted/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/asorted/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/asorted/index.js

@@ -1,4 +1,4 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox, BoxedIcon, CryptoIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon, NotificationIcon } from "./Icon";
 export { default as Text } from "./Text";
 //# sourceMappingURL=index.js.map

package/lib/components/asorted/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/asorted/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/asorted/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/layout/Banner/BannerCard/index.d.ts

@@ -1,16 +1,15 @@
 import React, { type ReactEventHandler, type ReactNode } from "react";
 import type { FlexBoxProps } from "../../Flex";
-export type BannerCardProps = FlexBoxProps & {
+type Props = FlexBoxProps & {
     title: string;
-    cta?: string;
-    linkText?: string;
+    cta?: ReactNode;
     description?: ReactNode;
     descriptionWidth?: number;
     tag?: string;
     image?: string;
     onClick: ReactEventHandler;
-    onLinkClick?: ReactEventHandler;
     onClose?: ReactEventHandler;
 };
-export default function BannerCard({ title, cta, linkText, description, descriptionWidth, tag, image, onClick, onLinkClick, onClose, ...boxProps }: BannerCardProps): React.JSX.Element;
+export default function BannerCard({ title, cta, description, descriptionWidth, tag, image, onClick, onClose, ...boxProps }: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/layout/Banner/BannerCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/BannerCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,GAAG,EACH,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,GAAG,EACH,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,QAAQ,EACZ,EAAE,eAAe,qBAwCjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/BannerCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,KAAK,KAAK,GAAG,YAAY,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,GAAG,EACH,WAAW,EACX,gBAAgB,EAChB,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,GAAG,QAAQ,EACZ,EAAE,KAAK,qBAuBP"}

package/lib/components/layout/Banner/BannerCard/index.js

@@ -2,31 +2,24 @@ import React from "react";
 import styled from "styled-components";
 import { StyleProvider } from "../../../../styles";
 import { Icons } from "../../../../assets";
-import { Text } from "../../../asorted";
-import { Button, Link } from "../../../cta";
+import Text from "../../../asorted/Text";
+import { Button } from "../../../cta";
 import Tag from "../../../Tag";
 import { Flex } from "../..";
-export default function BannerCard({ title, cta, linkText, description, descriptionWidth, tag, image, onClick, onLinkClick, onClose, ...boxProps }) {
+export default function BannerCard({ title, cta, description, descriptionWidth, tag, image, onClick, onClose, ...boxProps }) {
     const handleClose = event => {
         event.stopPropagation();
         onClose?.(event);
     };
-    const handleCTAClick = event => {
+    const handleClick = event => {
         event.stopPropagation();
         onClick(event);
     };
-    const handleLinkClick = event => {
-        event.stopPropagation();
-        onLinkClick?.(event);
-    };
-    return (React.createElement(Wrapper, { ...boxProps, image: image, tag: tag, onClick: handleCTAClick },
+    return (React.createElement(Wrapper, { ...boxProps, image: image, tag: tag, onClick: handleClick },
         tag && React.createElement(StyledTag, null, tag),
         React.createElement(Title, null, title),
         description && React.createElement(Desc, { maxWidth: descriptionWidth }, description),
-        React.createElement(Flex, { columnGap: 5 },
-            cta && (React.createElement(Button, { variant: "main", outline: false, onClick: handleCTAClick }, cta)),
-            linkText && (React.createElement(Link, { onClick: handleLinkClick },
-                React.createElement(Text, { variant: "body", fontSize: 14, flexShrink: 1 }, linkText)))),
+        React.createElement(Flex, { columnGap: 5 }, cta),
         onClose && (React.createElement(StyleProvider, { selectedPalette: "dark" },
             React.createElement(CloseButton, { "data-testid": "portfolio-card-close-button", onClick: handleClose })))));
 }
@@ -57,7 +50,6 @@ const Wrapper = styled(Flex) `
   padding: 16px;
   padding-top: ${p => (p.tag ? "16px" : "24px")};
   padding-right: 50%;
-  flex-basis: 100%;
 
   position: relative;
   flex-direction: column;

package/lib/components/layout/Banner/BannerCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/BannerCard/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/BannerCard/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/layout/Banner/NotificationCard/index.d.ts

@@ -1,15 +1,15 @@
 import React, { type ReactEventHandler, type ReactNode } from "react";
-import { Icons } from "../../../../assets";
+import * as Icons from "@ledgerhq/icons-ui/react";
 import type { Props as GridBoxProps } from "../../Grid";
 type IconKey = keyof typeof Icons;
-export type NotificationCardProps = GridBoxProps & {
+type Props = GridBoxProps & {
     title?: string;
-    cta?: string;
+    cta?: ReactNode;
     description?: ReactNode;
     icon: IconKey;
     isHighlighted?: boolean;
     onClick: ReactEventHandler;
 };
-export default function NotificationCard({ title, cta, icon, description, isHighlighted, onClick, ...boxProps }: NotificationCardProps): React.JSX.Element;
+export default function NotificationCard({ title, cta, icon, description, isHighlighted, onClick, ...boxProps }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/layout/Banner/NotificationCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/NotificationCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,KAAK,OAAO,GAAG,MAAM,OAAO,KAAK,CAAC;AAElC,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,GAAG,EACH,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,GAAG,QAAQ,EACZ,EAAE,qBAAqB,qBAmCvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/NotificationCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAGlD,OAAO,KAAK,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,KAAK,OAAO,GAAG,MAAM,OAAO,KAAK,CAAC;AAElC,KAAK,KAAK,GAAG,YAAY,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,GAAG,EACH,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,GAAG,QAAQ,EACZ,EAAE,KAAK,qBAsBP"}

package/lib/components/layout/Banner/NotificationCard/index.js

@@ -1,34 +1,19 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { Icons } from "../../../../assets";
-import { Text } from "../../../asorted";
-import { Link } from "../../../cta";
+import styled from "styled-components";
+import { NotificationIcon } from "../../../asorted";
+import Text from "../../../asorted/Text";
 import { Grid, Flex } from "../..";
-const colorsByIcon = {
-    Warning: {
-        icon: "warning.c80",
-        iconBg: "warning.c30",
-        cta: "warning.c80",
-    },
-};
 export default function NotificationCard({ title, cta, icon, description, isHighlighted, onClick, ...boxProps }) {
     const handleCTAClick = event => {
         event.stopPropagation();
         onClick(event);
     };
-    const safeIcon = icon in Icons ? icon : "Information";
-    const Icon = Icons[safeIcon];
-    const colors = colorsByIcon[safeIcon];
-    const ctaColor = isHighlighted ? colors?.cta ?? "primary.c80" : "neutral.c100";
-    const iconColor = colors?.icon ?? "primary.c80";
-    const iconBgColor = colors?.iconBg ?? "opacityPurple.c10";
     return (React.createElement(Wrapper, { ...boxProps, isHighlighted: isHighlighted, onClick: handleCTAClick },
-        React.createElement(IconWrapper, { backgroundColor: iconBgColor, isHighlighted: isHighlighted },
-            React.createElement(Icon, { color: iconColor })),
+        React.createElement(NotificationIcon, { icon: icon, variant: isHighlighted ? "square" : "round" }),
         React.createElement(Flex, { flexDirection: "column", rowGap: isHighlighted ? "4px" : "8px" },
             title && (React.createElement(Text, { variant: "h4Inter", fontSize: 16 }, title)),
             description && (React.createElement(Desc, { color: isHighlighted ? "neutral.c100" : "neutral.c80" }, description)),
-            cta && (React.createElement(Cta, { color: ctaColor, onClick: handleCTAClick }, cta)))));
+            cta)));
 }
 const Desc = styled(Text).attrs({ variant: "small" }) `
   font-family: Inter;
@@ -36,36 +21,12 @@ const Desc = styled(Text).attrs({ variant: "small" }) `
   font-style: normal;
   font-weight: 500;
 `;
-const Cta = styled(Link).attrs({ alignSelf: "start" }) `
-  font-size: 13px;
-`;
-const IconWrapper = styled(Flex) `
-  border-radius: ${p => (p.isHighlighted ? "13.5px" : "50%")};
-  padding: 8px;
-  ${p => p.isHighlighted &&
-    css `
-      background-clip: padding-box;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent;
-      position: relative;
-      &::before {
-        content: "";
-        position: absolute;
-        inset: -7px;
-        border-radius: 13.5px;
-        background: linear-gradient(
-          180deg,
-          ${p.theme.colors.opacityDefault.c05} 0%,
-          rgba(29, 28, 31, 0) 100%
-        );
-      }
-    `}
-          
-  }
-`;
 const Wrapper = styled(Grid) `
-  background-color: ${p => (p.isHighlighted ? p.theme.colors.opacityDefault.c05 : "transparent")};
+  background-color: ${({ isHighlighted, theme: { colors } }) => {
+    if (!isHighlighted)
+        return "transparent";
+    return colors.type === "dark" ? colors.opacityDefault.c05 : colors.neutral.c00;
+}};
 
   cursor: pointer;
   padding: 12px;

package/lib/components/layout/Banner/NotificationCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/NotificationCard/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Banner/NotificationCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAcnC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,GAAG,EACH,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,GAAG,QAAQ,EACL;IACN,MAAM,cAAc,GAAsB,KAAK,CAAC,EAAE;QAChD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,OAAO,OAAK,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,cAAc;QAC1E,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAI;QAC7E,oBAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC/D,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,EAAE,IACjC,KAAK,CACD,CACR;YACA,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,IAAG,WAAW,CAAQ,CAClF;YACA,GAAG,CACC,CACC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAA;;;;;CAKpD,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAA8B;sBACpC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE;IAC3D,IAAI,CAAC,aAAa;QAAE,OAAO,aAAa,CAAC;IACzC,OAAO,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;AACjF,CAAC;;;;;SAKM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;CAKhD,CAAC"}

package/lib/components/layout/ContentCard/PortfolioContentCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE,yBAAyB,qBAY3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,iBAAiB,CAAC;IAC3B,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACR,EAAE,yBAAyB,qBAkB3B"}

package/lib/components/layout/ContentCard/PortfolioContentCard/index.js

@@ -1,6 +1,7 @@
 import React from "react";
+import { Button } from "../../../cta";
 import BannerCard from "../../Banner/BannerCard";
 export default function PortfolioContentCard({ title, cta, description, tag, image, onClick, onClose, }) {
-    return (React.createElement(BannerCard, { title: title, cta: cta, description: description, tag: tag, image: image, onClick: onClick, onClose: onClose }));
+    return (React.createElement(BannerCard, { title: title, cta: cta && (React.createElement(Button, { variant: "main", outline: false }, cta)), description: description, tag: tag, image: image, onClick: onClick, onClose: onClose }));
 }
 //# sourceMappingURL=index.js.map

package/lib/components/layout/ContentCard/PortfolioContentCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAajD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACmB;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/ContentCard/PortfolioContentCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAajD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,GAAG,EACH,WAAW,EACX,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,GACmB;IAC1B,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,GAAG,EACD,GAAG,IAAI,CACL,oBAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,IAClC,GAAG,CACG,CACV,EAEH,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.19.1",
+  "version": "0.20.0-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -69,9 +69,9 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
+    "@ledgerhq/crypto-icons-ui": "^1.10.0-next.0",
     "@ledgerhq/icons-ui": "^0.8.1",
-    "@ledgerhq/ui-shared": "^0.3.0",
-    "@ledgerhq/crypto-icons-ui": "^1.9.0"
+    "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2",