@ledgerhq/lumen-ui-rnative 0.1.12 → 0.1.13

package/dist/module/lib/Components/MediaBanner/MediaBanner.js

@@ -0,0 +1,158 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useCommonTranslation } from "../../../i18n/index.js";
+import { useStyleSheet, useTheme } from "../../../styles/index.js";
+import { Close } from "../../Symbols/index.js";
+import { InteractiveIcon } from "../InteractiveIcon/index.js";
+import { Box, LinearGradient, Pressable, Text } from "../Utility/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A promotional banner with a background image, title, description, and an optional close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediabanner--docs Storybook}
+ */
+export function MediaBanner({
+  lx,
+  style,
+  imageUrl,
+  onClose,
+  closeAccessibilityLabel,
+  children,
+  ...props
+}) {
+  const {
+    t: translate
+  } = useCommonTranslation();
+  const {
+    theme: t
+  } = useTheme();
+  const [imageLoadError, setImageLoadError] = useState(false);
+  useEffect(() => {
+    setImageLoadError(false);
+  }, [imageUrl]);
+  const showImage = imageUrl && !imageLoadError;
+  const styles = useStyleSheet(t => ({
+    container: {
+      backgroundColor: t.colors.bg.surface,
+      borderRadius: t.borderRadius.md,
+      overflow: 'hidden',
+      flexDirection: 'row',
+      height: t.sizes.s72
+    },
+    contentWrapper: {
+      flex: 1,
+      overflow: 'hidden',
+      justifyContent: 'center',
+      paddingHorizontal: t.spacings.s12,
+      paddingVertical: t.spacings.s2
+    },
+    contentContainer: {
+      paddingVertical: t.spacings.s12,
+      gap: 4
+    },
+    closeButton: {
+      position: 'absolute',
+      top: 8.5,
+      right: 8.5
+    }
+  }), []);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    lx: lx,
+    style: [styles.container, style],
+    ...props,
+    children: [/*#__PURE__*/_jsx(Box, {
+      style: styles.contentWrapper,
+      children: /*#__PURE__*/_jsx(Box, {
+        style: styles.contentContainer,
+        children: children
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      style: {
+        width: 120
+      },
+      children: [showImage && /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: imageUrl
+        },
+        style: StyleSheet.absoluteFill,
+        resizeMode: "cover",
+        onError: () => setImageLoadError(true),
+        accessible: false
+      }), /*#__PURE__*/_jsx(LinearGradient, {
+        direction: "to-topright",
+        stops: [{
+          color: t.colors.bg.black,
+          opacity: 0,
+          offset: 0.67
+        }, {
+          color: t.colors.bg.black,
+          opacity: 0.8
+        }],
+        style: StyleSheet.absoluteFill,
+        accessible: false,
+        pointerEvents: "none"
+      })]
+    }), onClose && /*#__PURE__*/_jsx(Box, {
+      style: styles.closeButton,
+      children: /*#__PURE__*/_jsx(InteractiveIcon, {
+        testID: "media-banner-close-button",
+        iconType: "stroked",
+        appearance: "white",
+        onPress: onClose,
+        accessibilityLabel: closeAccessibilityLabel || translate('components.banner.closeAriaLabel'),
+        children: /*#__PURE__*/_jsx(Close, {
+          size: 16
+        })
+      })
+    })]
+  });
+}
+
+/**
+ * The title of the MediaBanner. Clamps at 1 line.
+ */
+export function MediaBannerTitle({
+  lx,
+  style,
+  children,
+  ...props
+}) {
+  const styles = useStyleSheet(t => ({
+    title: StyleSheet.flatten([t.typographies.body2SemiBold, {
+      color: t.colors.text.base
+    }])
+  }), []);
+  return /*#__PURE__*/_jsx(Text, {
+    lx: lx,
+    style: [styles.title, style],
+    numberOfLines: 1,
+    ...props,
+    children: children
+  });
+}
+
+/**
+ * The description of the MediaBanner. Clamps at 2 lines.
+ */
+export function MediaBannerDescription({
+  lx,
+  style,
+  children,
+  ...props
+}) {
+  const styles = useStyleSheet(t => ({
+    description: StyleSheet.flatten([t.typographies.body3, {
+      color: t.colors.text.muted
+    }])
+  }), []);
+  return /*#__PURE__*/_jsx(Text, {
+    lx: lx,
+    style: [styles.description, style],
+    numberOfLines: 2,
+    ...props,
+    children: children
+  });
+}
+//# sourceMappingURL=MediaBanner.js.map

package/dist/module/lib/Components/MediaBanner/MediaBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","Image","StyleSheet","useCommonTranslation","useStyleSheet","useTheme","Close","InteractiveIcon","Box","LinearGradient","Pressable","Text","jsx","_jsx","jsxs","_jsxs","MediaBanner","lx","style","imageUrl","onClose","closeAccessibilityLabel","children","props","t","translate","theme","imageLoadError","setImageLoadError","showImage","styles","container","backgroundColor","colors","bg","surface","borderRadius","md","overflow","flexDirection","height","sizes","s72","contentWrapper","flex","justifyContent","paddingHorizontal","spacings","s12","paddingVertical","s2","contentContainer","gap","closeButton","position","top","right","width","source","uri","absoluteFill","resizeMode","onError","accessible","direction","stops","color","black","opacity","offset","pointerEvents","testID","iconType","appearance","onPress","accessibilityLabel","size","MediaBannerTitle","title","flatten","typographies","body2SemiBold","text","base","numberOfLines","MediaBannerDescription","description","body3","muted"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/MediaBanner/MediaBanner.mdx

@@ -0,0 +1,150 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaBannerStories from './MediaBanner.stories';
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from './MediaBanner';
+import { Box } from '../Utility';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/MediaBanner' of={MediaBannerStories} />
+
+# 🖼️ MediaBanner
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaBanner is a promotional banner component that displays a background image alongside a title and description. It is designed for marketing or informational content and supports an optional close action for dismissibility.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11235-5982&m=dev).
+
+## Anatomy
+
+<Canvas of={MediaBannerStories.Base} />
+
+- **MediaBanner**: Root pressable container with surface background, rounded corners, and a fixed height
+- **MediaBannerTitle**: The main label of the banner (clamps at 1 line)
+- **MediaBannerDescription**: Additional context below the title (clamps at 2 lines)
+- **Image**: Background image displayed on the right side with a gradient overlay
+- **Close button**: Optional InteractiveIcon rendered in the top-right corner via the `onClose` prop
+
+## Properties
+
+### Overview
+
+<Canvas of={MediaBannerStories.Base} />
+<Controls of={MediaBannerStories.Base} />
+
+### Truncation
+
+Title clamps at 1 line and description clamps at 2 lines when content overflows.
+
+<Canvas of={MediaBannerStories.Truncation} />
+
+### Broken Image
+
+When the `imageUrl` fails to load, the broken image is hidden while the gradient overlay and image space are preserved. The banner remains functional and visually consistent.
+
+<Canvas of={MediaBannerStories.WithBrokenImage} />
+
+### Dismissible
+
+When `onClose` is provided, the close button allows the user to dismiss the banner.
+
+<Canvas of={MediaBannerStories.WithClose} />
+
+## Accessibility
+
+- The close button uses `InteractiveIcon` with proper press states
+- The root element is a `Pressable` for interactive use cases
+- Title and description use semantic `Text` elements
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+MediaBanner uses a composite component pattern with `MediaBannerTitle` and `MediaBannerDescription`:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <MediaBanner imageUrl='https://example.com/promo.jpg'>
+      <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+      <MediaBannerDescription>
+        Keep your Nano updated!
+      </MediaBannerDescription>
+    </MediaBanner>
+  );
+}
+```
+
+### With Close Button
+
+Add an `onClose` callback to make the banner dismissible:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function DismissibleBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <MediaBanner
+      imageUrl='https://example.com/promo.jpg'
+      onClose={() => setIsVisible(false)}
+    >
+      <MediaBannerTitle>
+        Earn Up to 12% APY With Staking Now!
+      </MediaBannerTitle>
+      <MediaBannerDescription>
+        Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+        directly from Ledger Live
+      </MediaBannerDescription>
+    </MediaBanner>
+  );
+}
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<MediaBanner
+  imageUrl='https://example.com/promo.jpg'
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
+>
+  <MediaBannerTitle>With Margin</MediaBannerTitle>
+  <MediaBannerDescription>
+    This banner has layout adjustments via lx.
+  </MediaBannerDescription>
+</MediaBanner>
+```
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import { useState } from 'react';
+import { Button } from "../Button/index.js";
+import { Box } from "../Utility/index.js";
+import { MediaBanner, MediaBannerDescription, MediaBannerTitle } from "./MediaBanner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IMAGE_URL = 'https://images.unsplash.com/photo-1663741954108-d15d514529ef';
+const meta = {
+  component: MediaBanner,
+  title: 'Communication/MediaBanner',
+  subcomponents: {
+    MediaBannerTitle,
+    MediaBannerDescription
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    imageUrl: {
+      control: 'text',
+      description: 'URL of the background image'
+    },
+    onClose: {
+      control: 'select',
+      description: 'Close action callback',
+      options: ['With Close', 'None'],
+      mapping: {
+        'With Close': () => {
+          console.log('Close clicked');
+        },
+        None: undefined
+      }
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    imageUrl: IMAGE_URL
+  },
+  render: args => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      width: 's400'
+    },
+    children: /*#__PURE__*/_jsxs(MediaBanner, {
+      ...args,
+      children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
+        children: "Firmware Update"
+      }), /*#__PURE__*/_jsx(MediaBannerDescription, {
+        children: "Keep your Nano updated!"
+      })]
+    })
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<MediaBanner imageUrl="https://images.unsplash.com/photo-1663741954108-d15d514529ef">
+  <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+  <MediaBannerDescription>
+    Keep your Nano updated!
+  </MediaBannerDescription>
+</MediaBanner>
+`
+      }
+    }
+  }
+};
+export const Truncation = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      width: 's400'
+    },
+    children: /*#__PURE__*/_jsxs(MediaBanner, {
+      imageUrl: IMAGE_URL,
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
+        children: "Earn Up to 12% APY With Staking Now And Much More Rewards Awaiting You"
+      }), /*#__PURE__*/_jsx(MediaBannerDescription, {
+        children: "Put your idle crypto to work. Start staking SOL, ETH, ATOM and more directly from Ledger Live. Maximize your returns with our secure staking solutions."
+      })]
+    })
+  })
+};
+export const WithBrokenImage = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      width: 's400'
+    },
+    children: /*#__PURE__*/_jsxs(MediaBanner, {
+      imageUrl: "https://broken-url.invalid/image.jpg",
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
+        children: "Sorry!"
+      }), /*#__PURE__*/_jsx(MediaBannerDescription, {
+        children: "The image failed to load so the banner decided to gracefully hide it."
+      })]
+    })
+  })
+};
+export const WithClose = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+    if (!visible) {
+      return /*#__PURE__*/_jsx(Button, {
+        appearance: "transparent",
+        size: "sm",
+        onPress: () => setVisible(true),
+        children: "Show banner"
+      });
+    }
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's400'
+      },
+      children: /*#__PURE__*/_jsxs(MediaBanner, {
+        imageUrl: IMAGE_URL,
+        onClose: () => setVisible(false),
+        children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
+          children: "Earn Up to 12% APY With Staking Now!"
+        }), /*#__PURE__*/_jsx(MediaBannerDescription, {
+          children: "Put your idle crypto to work. Start staking SOL, ETH, ATOM and more directly from Ledger Live"
+        })]
+      })
+    });
+  }
+};
+//# sourceMappingURL=MediaBanner.stories.js.map

package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Button","Box","MediaBanner","MediaBannerDescription","MediaBannerTitle","jsx","_jsx","jsxs","_jsxs","IMAGE_URL","meta","component","title","subcomponents","parameters","docs","source","language","format","type","argTypes","imageUrl","control","description","onClose","options","mapping","With Close","console","log","None","undefined","Base","args","render","lx","width","children","code","Truncation","WithBrokenImage","WithClose","visible","setVisible","appearance","size","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { MediaBanner, MediaBannerTitle, MediaBannerDescription } from "./MediaBanner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+const IMAGE_URL = 'https://example.com/image.jpg';
+describe('MediaBanner', () => {
+  it('should render title and description', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsxs(MediaBanner, {
+        imageUrl: IMAGE_URL,
+        children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
+          children: "Banner Title"
+        }), /*#__PURE__*/_jsx(MediaBannerDescription, {
+          children: "Banner description"
+        })]
+      })
+    }));
+    getByText('Banner Title');
+    getByText('Banner description');
+  });
+  it('should call onClose when close button is pressed', () => {
+    const handleClose = jest.fn();
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaBanner, {
+        imageUrl: IMAGE_URL,
+        onClose: handleClose,
+        children: /*#__PURE__*/_jsx(MediaBannerTitle, {
+          children: "Title"
+        })
+      })
+    }));
+    const closeButton = getByTestId('media-banner-close-button');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+  it('should apply surface background color', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaBanner, {
+        testID: "media-banner",
+        imageUrl: IMAGE_URL,
+        children: /*#__PURE__*/_jsx(MediaBannerTitle, {
+          children: "Title"
+        })
+      })
+    }));
+    const banner = getByTestId('media-banner');
+    expect(banner.props.style.backgroundColor).toBe(ledgerLiveThemes.dark.colors.bg.surface);
+  });
+  it('should render with imageUrl prop', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaBanner, {
+        testID: "media-banner",
+        imageUrl: IMAGE_URL,
+        children: /*#__PURE__*/_jsx(MediaBannerTitle, {
+          children: "Title"
+        })
+      })
+    }));
+    expect(getByTestId('media-banner')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=MediaBanner.test.js.map

package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","fireEvent","render","ThemeProvider","MediaBanner","MediaBannerTitle","MediaBannerDescription","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","IMAGE_URL","getByText","imageUrl","handleClose","fn","getByTestId","onClose","closeButton","toBeTruthy","press","toHaveBeenCalledTimes","testID","banner","props","style","backgroundColor","toBe","dark","colors","bg","surface"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/MediaBanner/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./MediaBanner.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/MediaBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/index.ts"],"mappings":";;AAAA,cAAc,kBAAe;AAC7B,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/MediaBanner/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/MediaBanner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/index.js

@@ -18,6 +18,7 @@ export * from "./IconButton/index.js";
 export * from "./InteractiveIcon/index.js";
 export * from "./Link/index.js";
 export * from "./ListItem/index.js";
+export * from "./MediaBanner/index.js";
 export * from "./MediaCard/index.js";
 export * from "./NavBar/index.js";
 export * from "./PageIndicator/index.js";

package/dist/module/lib/Components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Components/index.ts"],"mappings":";;AAAA,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,gBAAO;AACrB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Components/index.ts"],"mappings":";;AAAA,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,wBAAe;AAC7B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,wBAAe;AAC7B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,0BAAiB;AAC/B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,iBAAQ;AACtB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,mBAAU;AACxB,cAAc,gBAAO;AACrB,cAAc,oBAAW;AACzB,cAAc,sBAAa;AAC3B,cAAc,0BAAiB;AAC/B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,oBAAW","ignoreList":[]}

package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts

@@ -0,0 +1,16 @@
+import { MediaBannerDescriptionProps, MediaBannerProps, MediaBannerTitleProps } from './types';
+/**
+ * A promotional banner with a background image, title, description, and an optional close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediabanner--docs Storybook}
+ */
+export declare function MediaBanner({ lx, style, imageUrl, onClose, closeAccessibilityLabel, children, ...props }: MediaBannerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The title of the MediaBanner. Clamps at 1 line.
+ */
+export declare function MediaBannerTitle({ lx, style, children, ...props }: MediaBannerTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The description of the MediaBanner. Clamps at 2 lines.
+ */
+export declare function MediaBannerDescription({ lx, style, children, ...props }: MediaBannerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaBanner.d.ts.map

package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaBanner/MediaBanner.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,2BAA2B,EAC3B,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,OAAO,EACP,uBAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAoFlB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAkBvB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAuB7B"}

package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MediaBanner';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaBanner/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { StyledPressableProps, StyledTextProps } from '../../../styles';
+/**
+ * Props for the MediaBanner root component.
+ */
+export type MediaBannerProps = {
+    /**
+     * URL of the background image displayed on the right side.
+     */
+    imageUrl: string;
+    /**
+     * Optional close action callback.
+     */
+    onClose?: () => void;
+    /**
+     * Optional accessibility label for the close button.
+     */
+    closeAccessibilityLabel?: string;
+    /**
+     * The banner content (MediaBannerTitle, MediaBannerDescription).
+     */
+    children: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;
+/**
+ * Props for the MediaBannerTitle component.
+ */
+export type MediaBannerTitleProps = {
+    /**
+     * The title text content.
+     */
+    children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the MediaBannerDescription component.
+ */
+export type MediaBannerDescriptionProps = {
+    /**
+     * The description text content.
+     */
+    children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaBanner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/dist/typescript/src/lib/Components/index.d.ts

@@ -16,6 +16,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
+export * from './MediaBanner';
 export * from './MediaCard';
 export * from './NavBar';
 export * from './PageIndicator';

package/dist/typescript/src/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/lib/Components/MediaBanner/MediaBanner.mdx

@@ -0,0 +1,150 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaBannerStories from './MediaBanner.stories';
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from './MediaBanner';
+import { Box } from '../Utility';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/MediaBanner' of={MediaBannerStories} />
+
+# 🖼️ MediaBanner
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaBanner is a promotional banner component that displays a background image alongside a title and description. It is designed for marketing or informational content and supports an optional close action for dismissibility.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11235-5982&m=dev).
+
+## Anatomy
+
+<Canvas of={MediaBannerStories.Base} />
+
+- **MediaBanner**: Root pressable container with surface background, rounded corners, and a fixed height
+- **MediaBannerTitle**: The main label of the banner (clamps at 1 line)
+- **MediaBannerDescription**: Additional context below the title (clamps at 2 lines)
+- **Image**: Background image displayed on the right side with a gradient overlay
+- **Close button**: Optional InteractiveIcon rendered in the top-right corner via the `onClose` prop
+
+## Properties
+
+### Overview
+
+<Canvas of={MediaBannerStories.Base} />
+<Controls of={MediaBannerStories.Base} />
+
+### Truncation
+
+Title clamps at 1 line and description clamps at 2 lines when content overflows.
+
+<Canvas of={MediaBannerStories.Truncation} />
+
+### Broken Image
+
+When the `imageUrl` fails to load, the broken image is hidden while the gradient overlay and image space are preserved. The banner remains functional and visually consistent.
+
+<Canvas of={MediaBannerStories.WithBrokenImage} />
+
+### Dismissible
+
+When `onClose` is provided, the close button allows the user to dismiss the banner.
+
+<Canvas of={MediaBannerStories.WithClose} />
+
+## Accessibility
+
+- The close button uses `InteractiveIcon` with proper press states
+- The root element is a `Pressable` for interactive use cases
+- Title and description use semantic `Text` elements
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+MediaBanner uses a composite component pattern with `MediaBannerTitle` and `MediaBannerDescription`:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <MediaBanner imageUrl='https://example.com/promo.jpg'>
+      <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+      <MediaBannerDescription>
+        Keep your Nano updated!
+      </MediaBannerDescription>
+    </MediaBanner>
+  );
+}
+```
+
+### With Close Button
+
+Add an `onClose` callback to make the banner dismissible:
+
+```tsx
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+import { useState } from 'react';
+
+function DismissibleBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <MediaBanner
+      imageUrl='https://example.com/promo.jpg'
+      onClose={() => setIsVisible(false)}
+    >
+      <MediaBannerTitle>
+        Earn Up to 12% APY With Staking Now!
+      </MediaBannerTitle>
+      <MediaBannerDescription>
+        Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+        directly from Ledger Live
+      </MediaBannerDescription>
+    </MediaBanner>
+  );
+}
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<MediaBanner
+  imageUrl='https://example.com/promo.jpg'
+  lx={{ marginTop: 's16', marginBottom: 's8' }}
+>
+  <MediaBannerTitle>With Margin</MediaBannerTitle>
+  <MediaBannerDescription>
+    This banner has layout adjustments via lx.
+  </MediaBannerDescription>
+</MediaBanner>
+```
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>

package/src/lib/Components/MediaBanner/MediaBanner.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { Button } from '../Button';
+import { Box } from '../Utility';
+import {
+  MediaBanner,
+  MediaBannerDescription,
+  MediaBannerTitle,
+} from './MediaBanner';
+
+const IMAGE_URL =
+  'https://images.unsplash.com/photo-1663741954108-d15d514529ef';
+
+const meta: Meta<typeof MediaBanner> = {
+  component: MediaBanner,
+  title: 'Communication/MediaBanner',
+  subcomponents: {
+    MediaBannerTitle,
+    MediaBannerDescription,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    imageUrl: {
+      control: 'text',
+      description: 'URL of the background image',
+    },
+    onClose: {
+      control: 'select',
+      description: 'Close action callback',
+      options: ['With Close', 'None'],
+      mapping: {
+        'With Close': () => {
+          console.log('Close clicked');
+        },
+        None: undefined,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MediaBanner>;
+
+export const Base: Story = {
+  args: {
+    imageUrl: IMAGE_URL,
+  },
+  render: (args) => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner {...args}>
+        <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+        <MediaBannerDescription>Keep your Nano updated!</MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<MediaBanner imageUrl="https://images.unsplash.com/photo-1663741954108-d15d514529ef">
+  <MediaBannerTitle>Firmware Update</MediaBannerTitle>
+  <MediaBannerDescription>
+    Keep your Nano updated!
+  </MediaBannerDescription>
+</MediaBanner>
+`,
+      },
+    },
+  },
+};
+
+export const Truncation: Story = {
+  render: () => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner imageUrl={IMAGE_URL} onClose={() => console.log('close')}>
+        <MediaBannerTitle>
+          Earn Up to 12% APY With Staking Now And Much More Rewards Awaiting You
+        </MediaBannerTitle>
+        <MediaBannerDescription>
+          Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+          directly from Ledger Live. Maximize your returns with our secure
+          staking solutions.
+        </MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+};
+
+export const WithBrokenImage: Story = {
+  render: () => (
+    <Box lx={{ width: 's400' }}>
+      <MediaBanner
+        imageUrl='https://broken-url.invalid/image.jpg'
+        onClose={() => console.log('close')}
+      >
+        <MediaBannerTitle>Sorry!</MediaBannerTitle>
+        <MediaBannerDescription>
+          The image failed to load so the banner decided to gracefully hide it.
+        </MediaBannerDescription>
+      </MediaBanner>
+    </Box>
+  ),
+};
+
+export const WithClose: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) {
+      return (
+        <Button
+          appearance='transparent'
+          size='sm'
+          onPress={() => setVisible(true)}
+        >
+          Show banner
+        </Button>
+      );
+    }
+
+    return (
+      <Box lx={{ width: 's400' }}>
+        <MediaBanner imageUrl={IMAGE_URL} onClose={() => setVisible(false)}>
+          <MediaBannerTitle>
+            Earn Up to 12% APY With Staking Now!
+          </MediaBannerTitle>
+          <MediaBannerDescription>
+            Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
+            directly from Ledger Live
+          </MediaBannerDescription>
+        </MediaBanner>
+      </Box>
+    );
+  },
+};

package/src/lib/Components/MediaBanner/MediaBanner.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import { type ReactNode } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import {
+  MediaBanner,
+  MediaBannerTitle,
+  MediaBannerDescription,
+} from './MediaBanner';
+
+const TestWrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+const IMAGE_URL = 'https://example.com/image.jpg';
+
+describe('MediaBanner', () => {
+  it('should render title and description', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaBanner imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Banner Title</MediaBannerTitle>
+          <MediaBannerDescription>Banner description</MediaBannerDescription>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    getByText('Banner Title');
+    getByText('Banner description');
+  });
+
+  it('should call onClose when close button is pressed', () => {
+    const handleClose = jest.fn();
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner imageUrl={IMAGE_URL} onClose={handleClose}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    const closeButton = getByTestId('media-banner-close-button');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should apply surface background color', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner testID='media-banner' imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    const banner = getByTestId('media-banner');
+    expect(banner.props.style.backgroundColor).toBe(
+      ledgerLiveThemes.dark.colors.bg.surface,
+    );
+  });
+
+  it('should render with imageUrl prop', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <MediaBanner testID='media-banner' imageUrl={IMAGE_URL}>
+          <MediaBannerTitle>Title</MediaBannerTitle>
+        </MediaBanner>
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('media-banner')).toBeTruthy();
+  });
+});

package/src/lib/Components/MediaBanner/MediaBanner.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { Close } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { Box, LinearGradient, Pressable, Text } from '../Utility';
+import {
+  MediaBannerDescriptionProps,
+  MediaBannerProps,
+  MediaBannerTitleProps,
+} from './types';
+
+/**
+ * A promotional banner with a background image, title, description, and an optional close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediabanner--docs Storybook}
+ */
+export function MediaBanner({
+  lx,
+  style,
+  imageUrl,
+  onClose,
+  closeAccessibilityLabel,
+  children,
+  ...props
+}: MediaBannerProps) {
+  const { t: translate } = useCommonTranslation();
+  const { theme: t } = useTheme();
+  const [imageLoadError, setImageLoadError] = useState(false);
+
+  useEffect(() => {
+    setImageLoadError(false);
+  }, [imageUrl]);
+
+  const showImage = imageUrl && !imageLoadError;
+
+  const styles = useStyleSheet(
+    (t) => ({
+      container: {
+        backgroundColor: t.colors.bg.surface,
+        borderRadius: t.borderRadius.md,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        height: t.sizes.s72,
+      },
+      contentWrapper: {
+        flex: 1,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        paddingHorizontal: t.spacings.s12,
+        paddingVertical: t.spacings.s2,
+      },
+      contentContainer: {
+        paddingVertical: t.spacings.s12,
+        gap: 4,
+      },
+      closeButton: {
+        position: 'absolute',
+        top: 8.5,
+        right: 8.5,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Pressable lx={lx} style={[styles.container, style]} {...props}>
+      <Box style={styles.contentWrapper}>
+        <Box style={styles.contentContainer}>{children}</Box>
+      </Box>
+      <Box style={{ width: 120 }}>
+        {showImage && (
+          <Image
+            source={{ uri: imageUrl }}
+            style={StyleSheet.absoluteFill}
+            resizeMode='cover'
+            onError={() => setImageLoadError(true)}
+            accessible={false}
+          />
+        )}
+        <LinearGradient
+          direction='to-topright'
+          stops={[
+            { color: t.colors.bg.black, opacity: 0, offset: 0.67 },
+            { color: t.colors.bg.black, opacity: 0.8 },
+          ]}
+          style={StyleSheet.absoluteFill}
+          accessible={false}
+          pointerEvents='none'
+        />
+      </Box>
+      {onClose && (
+        <Box style={styles.closeButton}>
+          <InteractiveIcon
+            testID='media-banner-close-button'
+            iconType='stroked'
+            appearance='white'
+            onPress={onClose}
+            accessibilityLabel={
+              closeAccessibilityLabel ||
+              translate('components.banner.closeAriaLabel')
+            }
+          >
+            <Close size={16} />
+          </InteractiveIcon>
+        </Box>
+      )}
+    </Pressable>
+  );
+}
+
+/**
+ * The title of the MediaBanner. Clamps at 1 line.
+ */
+export function MediaBannerTitle({
+  lx,
+  style,
+  children,
+  ...props
+}: MediaBannerTitleProps) {
+  const styles = useStyleSheet(
+    (t) => ({
+      title: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          color: t.colors.text.base,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  return (
+    <Text lx={lx} style={[styles.title, style]} numberOfLines={1} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * The description of the MediaBanner. Clamps at 2 lines.
+ */
+export function MediaBannerDescription({
+  lx,
+  style,
+  children,
+  ...props
+}: MediaBannerDescriptionProps) {
+  const styles = useStyleSheet(
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          color: t.colors.text.muted,
+        },
+      ]),
+    }),
+    [],
+  );
+
+  return (
+    <Text
+      lx={lx}
+      style={[styles.description, style]}
+      numberOfLines={2}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/lib/Components/MediaBanner/index.ts

@@ -0,0 +1,2 @@
+export * from './MediaBanner';
+export * from './types';

package/src/lib/Components/MediaBanner/types.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { StyledPressableProps, StyledTextProps } from '../../../styles';
+
+/**
+ * Props for the MediaBanner root component.
+ */
+export type MediaBannerProps = {
+  /**
+   * URL of the background image displayed on the right side.
+   */
+  imageUrl: string;
+  /**
+   * Optional close action callback.
+   */
+  onClose?: () => void;
+  /**
+   * Optional accessibility label for the close button.
+   */
+  closeAccessibilityLabel?: string;
+  /**
+   * The banner content (MediaBannerTitle, MediaBannerDescription).
+   */
+  children: ReactNode;
+} & Omit<StyledPressableProps, 'children'>;
+
+/**
+ * Props for the MediaBannerTitle component.
+ */
+export type MediaBannerTitleProps = {
+  /**
+   * The title text content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+/**
+ * Props for the MediaBannerDescription component.
+ */
+export type MediaBannerDescriptionProps = {
+  /**
+   * The description text content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;

package/src/lib/Components/index.ts

@@ -16,6 +16,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
+export * from './MediaBanner';
 export * from './MediaCard';
 export * from './NavBar';
 export * from './PageIndicator';