@ledgerhq/react-ui 0.18.2 → 0.19.0-nightly.0

package/lib/assets/index.d.ts

@@ -1,5 +1,8 @@
-export * as IconsLegacy from "@ledgerhq/icons-ui/reactLegacy";
-export * as Icons from "@ledgerhq/icons-ui/react";
-export * as CryptoIcons from "@ledgerhq/crypto-icons-ui/react";
+import * as IconsLegacy from "@ledgerhq/icons-ui/reactLegacy";
+export { IconsLegacy };
+import * as Icons from "@ledgerhq/icons-ui/react";
+export { Icons };
+import * as CryptoIcons from "@ledgerhq/crypto-icons-ui/react";
+export { CryptoIcons };
 export * as Logos from "./logos";
 //# sourceMappingURL=index.d.ts.map

package/lib/assets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,gCAAgC,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAAK,WAAW,MAAM,iCAAiC,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,KAAK,WAAW,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/lib/assets/index.js

@@ -1,9 +1,8 @@
-import * as IconsLegacy_1 from "@ledgerhq/icons-ui/reactLegacy";
-export { IconsLegacy_1 as IconsLegacy };
-import * as Icons_1 from "@ledgerhq/icons-ui/react";
-export { Icons_1 as Icons };
-import * as CryptoIcons_1 from "@ledgerhq/crypto-icons-ui/react";
-export { CryptoIcons_1 as CryptoIcons };
-import * as Logos_1 from "./logos";
-export { Logos_1 as Logos };
+import * as IconsLegacy from "@ledgerhq/icons-ui/reactLegacy";
+export { IconsLegacy };
+import * as Icons from "@ledgerhq/icons-ui/react";
+export { Icons };
+import * as CryptoIcons from "@ledgerhq/crypto-icons-ui/react";
+export { CryptoIcons };
+export * as Logos from "./logos";
 //# sourceMappingURL=index.js.map

package/lib/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"+BAA6B,gCAAgC;0BAAjD,WAAW;yBACA,0BAA0B;oBAArC,KAAK;+BACY,iCAAiC;0BAAlD,WAAW;yBACA,SAAS;oBAApB,KAAK"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,KAAK,WAAW,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/lib/cjs/assets/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/assets/index.ts"],
-  "sourcesContent": ["export * as IconsLegacy from \"@ledgerhq/icons-ui/reactLegacy\";\nexport * as Icons from \"@ledgerhq/icons-ui/react\";\nexport * as CryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\nexport * as Logos from \"./logos\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAC7B,YAAuB;AACvB,kBAA6B;AAC7B,YAAuB;",
+  "sourcesContent": ["import * as IconsLegacy from \"@ledgerhq/icons-ui/reactLegacy\";\nexport { IconsLegacy };\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nexport { Icons };\nimport * as CryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\nexport { CryptoIcons };\nexport * as Logos from \"./logos\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAE7B,YAAuB;AAEvB,kBAA6B;AAE7B,YAAuB;",
   "names": []
 }

package/lib/cjs/components/form/Switch/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Switch/index.ts"],
-  "sourcesContent": ["export { default } from \"./Switch\";\n"],
+  "sourcesContent": ["export { default } from \"./Switch\";\nexport type { SwitchProps } from \"./Switch\";\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAwB;",
   "names": []
 }

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

@@ -0,0 +1,92 @@
+"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 BannerCard_stories_exports = {};
+__export(BannerCard_stories_exports, {
+  Default: () => Default,
+  LNSCardBanner: () => LNSCardBanner,
+  default: () => BannerCard_stories_default
+});
+module.exports = __toCommonJS(BannerCard_stories_exports);
+var import_react = __toESM(require("react"));
+var import_asorted = require("../../../asorted");
+var import__ = __toESM(require("."));
+var BannerCard_stories_default = {
+  title: "Layout/Banner/BannerCard",
+  component: import__.default,
+  argTypes: {
+    title: {
+      description: "Title of the card."
+    },
+    cta: {
+      description: "Call to action text."
+    },
+    linkText: {
+      description: "Link text."
+    },
+    description: {
+      description: "Description of the card."
+    },
+    tag: {
+      description: "Tag to be displayed on top of the card."
+    },
+    image: {
+      description: "Image to be displayed on the right of the card."
+    },
+    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."
+    }
+  },
+  args: {
+    title: "Ledger Recover",
+    description: "Get peace of mind and start your free trial.",
+    cta: "Start my free trial",
+    linkText: "Learn more",
+    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>"
+  }
+};
+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",
+    tag: void 0,
+    onClose: void 0,
+    borderRadius: "5px"
+  }
+};
+//# sourceMappingURL=BannerCard.stories.js.map

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

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

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

@@ -0,0 +1,120 @@
+"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 BannerCard_exports = {};
+__export(BannerCard_exports, {
+  default: () => BannerCard
+});
+module.exports = __toCommonJS(BannerCard_exports);
+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_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
+}) {
+  const handleClose = (event) => {
+    event.stopPropagation();
+    onClose == null ? void 0 : onClose(event);
+  };
+  const handleCTAClick = (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 })));
+}
+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" })`
+  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" })`
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  padding-bottom: 8px;
+`;
+const Wrapper = (0, import_styled_components.default)(import__.Flex)`
+  background-color: ${(p) => p.theme.colors.background.card};
+  background-image: ${(p) => p.image ? `url("${p.image}")` : "none"};
+  background-position: right center;
+  background-repeat: no-repeat;
+  background-size: 50% auto;
+
+  cursor: pointer;
+  padding: 16px;
+  padding-top: ${(p) => p.tag ? "16px" : "24px"};
+  padding-right: 50%;
+  flex-basis: 100%;
+
+  position: relative;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 4px;
+`;
+const CloseButton = (0, import_styled_components.default)(import_cta.Button).attrs({
+  Icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Close, { size: "XS" }),
+  iconButton: true,
+  outline: true
+})`
+  background-color: ${(p) => p.theme.colors.neutral.c30};
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,80 @@
+"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 NotificationCard_stories_exports = {};
+__export(NotificationCard_stories_exports, {
+  Default: () => Default,
+  LNSNotificationCard: () => LNSNotificationCard,
+  default: () => NotificationCard_stories_default
+});
+module.exports = __toCommonJS(NotificationCard_stories_exports);
+var import_assets = require("../../../../assets");
+var import__ = __toESM(require("."));
+var NotificationCard_stories_default = {
+  title: "Layout/Banner/NotificationCard",
+  component: import__.default,
+  argTypes: {
+    title: {
+      description: "Title of the card."
+    },
+    cta: {
+      description: "Call to action text."
+    },
+    description: {
+      description: "Description of the card."
+    },
+    icon: {
+      description: "Icon to be displayed on the left of the notification card.",
+      options: Object.keys(import_assets.Icons),
+      control: {
+        type: "select"
+      }
+    },
+    onClick: {
+      description: "Function to be called when the card is clicked."
+    }
+  },
+  args: {
+    title: "Ledger Recover",
+    description: "Get peace of mind and start your free trial.",
+    cta: "Start my free trial",
+    icon: "Warning",
+    isHighlighted: false
+  }
+};
+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",
+    icon: "SparksFill",
+    isHighlighted: true
+  }
+};
+//# sourceMappingURL=NotificationCard.stories.js.map

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

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

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

@@ -0,0 +1,113 @@
+"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 NotificationCard_exports = {};
+__export(NotificationCard_exports, {
+  default: () => NotificationCard
+});
+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__ = require("../..");
+const colorsByIcon = {
+  Warning: {
+    icon: "warning.c80",
+    iconBg: "warning.c30",
+    cta: "warning.c80"
+  }
+};
+function NotificationCard({
+  title,
+  cta,
+  icon,
+  description,
+  isHighlighted,
+  onClick,
+  ...boxProps
+}) {
+  const handleCTAClick = (event) => {
+    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)));
+}
+const Desc = (0, import_styled_components.default)(import_asorted.Text).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"};
+
+  cursor: pointer;
+  padding: 12px;
+  grid-template-columns: auto 1fr;
+  gap: ${(p) => p.isHighlighted ? "12px" : "24px"};
+  border-radius: 12px;
+
+  align-items: center;
+  justify-content: start;
+`;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -32,12 +32,7 @@ __export(PortfolioContentCard_exports, {
 });
 module.exports = __toCommonJS(PortfolioContentCard_exports);
 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_cta = require("../../../cta");
-var import_Tag = __toESM(require("../../../Tag"));
+var import_BannerCard = __toESM(require("../../Banner/BannerCard"));
 function PortfolioContentCard({
   title,
   cta,
@@ -47,62 +42,17 @@ function PortfolioContentCard({
   onClick,
   onClose
 }) {
-  const handleClose = (event) => {
-    event.stopPropagation();
-    onClose(event);
-  };
-  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { image, tag, onClick }, tag && /* @__PURE__ */ import_react.default.createElement(StyledTag, null, tag), /* @__PURE__ */ import_react.default.createElement(Title, null, title), description && /* @__PURE__ */ import_react.default.createElement(Desc, null, description), cta && /* @__PURE__ */ import_react.default.createElement(import_cta.Button, { variant: "main", outline: false, onClick }, cta), /* @__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(
+    import_BannerCard.default,
+    {
+      title,
+      cta,
+      description,
+      tag,
+      image,
+      onClick,
+      onClose
+    }
+  );
 }
-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" })`
-  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" })`
-  font-family: Inter;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 500;
-  padding-bottom: 8px;
-`;
-const Wrapper = import_styled_components.default.div`
-  background-color: ${(p) => p.theme.colors.background.card};
-  background-image: ${(p) => p.image ? `url("${p.image}")` : "none"};
-  background-position: right center;
-  background-repeat: no-repeat;
-  background-size: 50% auto;
-
-  cursor: pointer;
-  padding: 16px;
-  padding-top: ${(p) => p.tag ? "16px" : "24px"};
-  padding-right: 50%;
-  flex-basis: 100%;
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: 4px;
-`;
-const CloseButton = (0, import_styled_components.default)(import_cta.Button).attrs({
-  Icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Close, { size: "XS" }),
-  iconButton: true,
-  outline: true
-})`
-  background-color: ${(p) => p.theme.colors.neutral.c30};
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 24px;
-  height: 24px;
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-`;
 //# sourceMappingURL=index.js.map