@ledgerhq/lumen-ui-rnative 0.0.76 → 0.0.78

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.53",
+    "@ledgerhq/lumen-design-core": "0.0.54",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

package/dist/src/lib/Components/ContentBanner/ContentBanner.d.ts

@@ -0,0 +1,48 @@
+import { ContentBannerContentProps, ContentBannerDescriptionProps, ContentBannerProps, ContentBannerTitleProps } from './types';
+/**
+ * Container for the text content (title and description) within the content banner.
+ */
+export declare const ContentBannerContent: {
+    ({ children, lx, style, ref, ...viewProps }: ContentBannerContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The main title of the content banner.
+ */
+export declare const ContentBannerTitle: {
+    ({ children, lx, style, ref, ...textProps }: ContentBannerTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Optional description text below the title.
+ */
+export declare const ContentBannerDescription: {
+    ({ children, lx, style, ref, ...textProps }: ContentBannerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * A content banner component for displaying a composable banner with an optional
+ * leading visual, title, description, and close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-contentbanner-overview--docs Storybook}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the banner's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <ContentBanner onClose={() => {}}>
+ *   <Spot appearance="icon" icon={Wallet} size={48} />
+ *   <ContentBannerContent>
+ *     <ContentBannerTitle>Title</ContentBannerTitle>
+ *     <ContentBannerDescription>Description text</ContentBannerDescription>
+ *   </ContentBannerContent>
+ * </ContentBanner>
+ */
+export declare const ContentBanner: {
+    ({ children, lx, style, onClose, closeAccessibilityLabel, ref, ...viewProps }: ContentBannerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ContentBanner.d.ts.map

package/dist/src/lib/Components/ContentBanner/ContentBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentBanner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ContentBanner/ContentBanner.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC7B,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,eAAO,MAAM,oBAAoB;iDAM9B,yBAAyB;;CAuB3B,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,kBAAkB;iDAM5B,uBAAuB;;CAgCzB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,wBAAwB;iDAMlC,6BAA6B;;CAgC/B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa;mFAQvB,kBAAkB;;CAsDpB,CAAC"}

package/dist/src/lib/Components/ContentBanner/ContentBanner.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet, View } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
+import { Close } from '../../Symbols';
+import { InteractiveIcon } from '../InteractiveIcon';
+import { Box, Text } from '../Utility';
+/**
+ * Container for the text content (title and description) within the content banner.
+ */
+export const ContentBannerContent = ({ children, lx = {}, style, ref, ...viewProps }) => {
+    const styles = useStyleSheet((t) => ({
+        content: {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: 'column',
+            gap: t.spacings.s4,
+        },
+    }), []);
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.content, style]), ...viewProps, children: children }));
+};
+ContentBannerContent.displayName = 'ContentBannerContent';
+/**
+ * The main title of the content banner.
+ */
+export const ContentBannerTitle = ({ children, lx = {}, style, ref, ...textProps }) => {
+    const styles = useStyleSheet((t) => ({
+        title: StyleSheet.flatten([
+            t.typographies.body2SemiBold,
+            {
+                color: t.colors.text.base,
+            },
+        ]),
+    }), []);
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.title, style]), numberOfLines: 1, ellipsizeMode: 'tail', children: children }));
+    }
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([style]), ...textProps, children: children }));
+};
+ContentBannerTitle.displayName = 'ContentBannerTitle';
+/**
+ * Optional description text below the title.
+ */
+export const ContentBannerDescription = ({ children, lx = {}, style, ref, ...textProps }) => {
+    const styles = useStyleSheet((t) => ({
+        description: StyleSheet.flatten([
+            t.typographies.body3,
+            {
+                color: t.colors.text.muted,
+            },
+        ]),
+    }), []);
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.description, style]), numberOfLines: 2, ellipsizeMode: 'tail', children: children }));
+    }
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([style]), ...textProps, children: children }));
+};
+ContentBannerDescription.displayName = 'ContentBannerDescription';
+/**
+ * A content banner component for displaying a composable banner with an optional
+ * leading visual, title, description, and close button.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-contentbanner-overview--docs Storybook}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the banner's core appearance (colors, padding, etc).
+ *
+ * @example
+ * import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <ContentBanner onClose={() => {}}>
+ *   <Spot appearance="icon" icon={Wallet} size={48} />
+ *   <ContentBannerContent>
+ *     <ContentBannerTitle>Title</ContentBannerTitle>
+ *     <ContentBannerDescription>Description text</ContentBannerDescription>
+ *   </ContentBannerContent>
+ * </ContentBanner>
+ */
+export const ContentBanner = ({ children, lx = {}, style, onClose, closeAccessibilityLabel, ref, ...viewProps }) => {
+    const { t } = useCommonTranslation();
+    const styles = useStyleSheet((t) => ({
+        root: {
+            flexDirection: 'row',
+            width: t.sizes.full,
+            alignItems: 'center',
+            gap: t.spacings.s12,
+            borderRadius: t.borderRadius.md,
+            padding: t.spacings.s12,
+            backgroundColor: t.colors.bg.surface,
+        },
+        rootWithClose: {
+            paddingRight: t.spacings.s48,
+        },
+        closeButton: {
+            position: 'absolute',
+            top: t.spacings.s8,
+            right: t.spacings.s8,
+        },
+    }), []);
+    return (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([
+            styles.root,
+            onClose && styles.rootWithClose,
+            style,
+        ]), ...viewProps, children: [children, onClose && (_jsx(View, { style: styles.closeButton, children: _jsx(InteractiveIcon, { iconType: 'stroked', testID: 'content-banner-close-button', onPress: () => onClose(), accessibilityLabel: closeAccessibilityLabel || t('components.banner.closeAriaLabel'), children: _jsx(Close, { size: 16 }) }) }))] }));
+};
+ContentBanner.displayName = 'ContentBanner';

package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { ContentBanner } from './ContentBanner';
+declare const meta: Meta<typeof ContentBanner>;
+export default meta;
+type Story = StoryObj<typeof ContentBanner>;
+export declare const Base: Story;
+export declare const WithClose: Story;
+export declare const ContentVariationsShowcase: Story;
+export declare const WithStepper: Story;
+export declare const ResponsiveLayout: Story;
+//# sourceMappingURL=ContentBanner.stories.d.ts.map

package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ContentBanner/ContentBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAOvE,OAAO,EACL,aAAa,EAId,MAAM,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA6BpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAkClB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAiCvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAoDvC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC"}

package/dist/src/lib/Components/ContentBanner/ContentBanner.stories.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Settings, Wallet } from '../../Symbols';
+import { Button } from '../Button';
+import { Spot } from '../Spot';
+import { Stepper } from '../Stepper';
+import { Box, Text } from '../Utility';
+import { ContentBanner, ContentBannerContent, ContentBannerDescription, ContentBannerTitle, } from './ContentBanner';
+const meta = {
+    component: ContentBanner,
+    title: 'Communication/ContentBanner',
+    parameters: {
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    },
+    argTypes: {
+        onClose: {
+            control: 'select',
+            description: 'Close action callback',
+            options: ['With Close', 'None'],
+            mapping: {
+                'With Close': () => {
+                    console.log('Close clicked');
+                },
+                None: undefined,
+            },
+        },
+        closeAccessibilityLabel: {
+            control: 'text',
+            description: 'Accessibility label for the close button',
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        closeAccessibilityLabel: 'Close content banner',
+    },
+    render: (args) => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsxs(ContentBanner, { ...args, children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Content Banner" }), _jsx(ContentBannerDescription, { children: "This is a description for the content banner." })] })] }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<ContentBanner>
+  <Spot appearance="icon" icon={Settings} size={48} />
+  <ContentBannerContent>
+    <ContentBannerTitle>Content Banner</ContentBannerTitle>
+    <ContentBannerDescription>
+      This is a description for the content banner.
+    </ContentBannerDescription>
+  </ContentBannerContent>
+</ContentBanner>
+`,
+            },
+        },
+    },
+};
+export const WithClose = {
+    render: () => {
+        const [visible, setVisible] = React.useState(true);
+        if (!visible) {
+            return (_jsx(Button, { appearance: 'transparent', size: 'sm', onPress: () => setVisible(true), children: "Show banner again" }));
+        }
+        return (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsxs(ContentBanner, { onClose: () => setVisible(false), closeAccessibilityLabel: 'Close content banner', children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Dismissible Banner" }), _jsx(ContentBannerDescription, { children: "Press the close button to dismiss this banner." })] })] }) }));
+    },
+};
+export const ContentVariationsShowcase = {
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            maxWidth: 's400',
+            gap: 's16',
+            padding: 's8',
+        }, children: [_jsxs(ContentBanner, { children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: 48 }), _jsx(ContentBannerContent, { children: _jsx(ContentBannerTitle, { children: "Title Only" }) })] }), _jsxs(ContentBanner, { children: [_jsx(Spot, { appearance: 'icon', icon: Wallet, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Title with Description" }), _jsx(ContentBannerDescription, { children: "This is a description for the content banner." })] })] }), _jsxs(ContentBanner, { onClose: () => console.log('close'), children: [_jsx(Spot, { appearance: 'icon', icon: Wallet, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "With Close Button" }), _jsx(ContentBannerDescription, { children: "A content banner with a leading icon and close button." })] })] }), _jsxs(ContentBanner, { onClose: () => console.log('close'), children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Longer Title That Demonstrates Clamping Behavior With a Long Description" }), _jsx(ContentBannerDescription, { children: "This is a longer description that demonstrates how the content banner handles overflow. It should be clamped at two lines." })] })] })] })),
+};
+export const WithStepper = {
+    render: () => (_jsx(Box, { lx: { maxWidth: 's400' }, children: _jsxs(ContentBanner, { onClose: () => console.log('close'), children: [_jsx(Stepper, { currentStep: 2, totalSteps: 4 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Setup your wallet" }), _jsx(ContentBannerDescription, { children: "Complete all steps to secure your wallet." })] })] }) })),
+};
+export const ResponsiveLayout = {
+    render: () => (_jsxs(Box, { lx: {
+            width: 's400',
+            flexDirection: 'column',
+            gap: 's16',
+            backgroundColor: 'mutedPressed',
+            padding: 's16',
+        }, children: [_jsx(Text, { typography: 'body4SemiBold', lx: { color: 'muted' }, children: "Container with a fixed width" }), _jsxs(ContentBanner, { children: [_jsx(Spot, { appearance: 'icon', icon: Settings, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Short Title" }), _jsx(ContentBannerDescription, { children: "Short description" })] })] }), _jsxs(ContentBanner, { onClose: () => console.log('close'), children: [_jsx(Spot, { appearance: 'icon', icon: Wallet, size: 48 }), _jsxs(ContentBannerContent, { children: [_jsx(ContentBannerTitle, { children: "Longer Title That Might Overflow When Container is Smaller" }), _jsx(ContentBannerDescription, { children: "This is a longer description that demonstrates how the content banner handles longer content within its constraints. It should be clamped at two lines with an ellipsis." })] })] })] })),
+};

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

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

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

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

package/dist/src/lib/Components/ContentBanner/index.js

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

package/dist/src/lib/Components/ContentBanner/types.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyledTextProps, StyledViewProps } from '../../../styles';
+/**
+ * Props for the ContentBanner root component
+ */
+export type ContentBannerProps = {
+    /**
+     * The content of the content banner (ContentBannerContent, ContentBannerTitle, ContentBannerDescription, or any leading element)
+     */
+    children: React.ReactNode;
+    /**
+     * Optional close action.
+     */
+    onClose?: () => void;
+    /**
+     * Optional accessibility label for the close button.
+     */
+    closeAccessibilityLabel?: string;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ContentBannerContent component
+ */
+export type ContentBannerContentProps = {
+    /**
+     * The content (ContentBannerTitle, ContentBannerDescription)
+     */
+    children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+/**
+ * Props for the ContentBannerTitle component
+ */
+export type ContentBannerTitleProps = {
+    /**
+     * The title text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+/**
+ * Props for the ContentBannerDescription component
+ */
+export type ContentBannerDescriptionProps = {
+    /**
+     * The description text or custom content
+     */
+    children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/ContentBanner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ContentBanner/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC;;GAEG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/ContentBanner/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -6,6 +6,7 @@ export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
+export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
 export * from './Icon';

package/dist/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,cAAc,CAAC;AAC7B,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,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,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,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,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,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/dist/src/lib/Components/index.js

@@ -6,6 +6,7 @@ export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';
 export * from './CardButton';
+export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
 export * from './Icon';

package/dist/src/lib/Symbols/Icons/Csv.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Csv icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Csv } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Csv />
+ *
+ * @example
+ * // With custom size and style
+ * <Csv size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Csv} size="md">
+ *   Click me
+ * </Button>
+ */
+export declare const Csv: {
+    (props: Omit<import("../../Components").IconProps, "children">): import("react").FunctionComponentElement<import("../../Components").IconProps>;
+    displayName: string;
+};
+//# sourceMappingURL=Csv.d.ts.map

package/dist/src/lib/Symbols/Icons/Csv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Csv.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Symbols/Icons/Csv.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,GAAG;;;CAef,CAAC"}

package/dist/src/lib/Symbols/Icons/Csv.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+/**
+ * Csv icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Csv } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Csv />
+ *
+ * @example
+ * // With custom size and style
+ * <Csv size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Csv} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Csv = createIcon('Csv', _jsxs(Svg, { width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 16 16', children: [_jsx(Path, { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 1.3, d: 'M10.333 14h1a2 2 0 0 0 2-2V5.673a2 2 0 0 0-.585-1.414l-1.673-1.673A2 2 0 0 0 9.66 2H4.667a2 2 0 0 0-2 2v4.667m10.666-3H11a1.333 1.333 0 0 1-1.333-1.334V2M8 6v3.333m0 0L9.333 8M8 9.333 6.667 8' }), _jsx(Path, { fill: 'currentColor', d: 'M1.86 13.656a.467.467 0 0 1 .641.156.13.13 0 0 0 .043.044q.015.01.04.01h.426a.08.08 0 0 0 .079-.078.08.08 0 0 0-.062-.078l-.728-.183a1.012 1.012 0 0 1 .247-1.994h.426c.39 0 .704.217.878.502a.467.467 0 0 1-.797.486.13.13 0 0 0-.042-.044.1.1 0 0 0-.039-.01h-.426a.079.079 0 0 0-.02.155l.73.183A1.012 1.012 0 0 1 3.01 14.8h-.426c-.391 0-.705-.217-.879-.503a.467.467 0 0 1 .156-.64m2.34.01v-1c0-.625.507-1.133 1.133-1.133H6a.467.467 0 0 1 0 .934h-.667a.2.2 0 0 0-.2.2v1c0 .11.09.2.2.2H6a.467.467 0 0 1 0 .933h-.667A1.134 1.134 0 0 1 4.2 13.667m5.01-2.115c.248.07.392.327.323.575l-.656 2.334a.47.47 0 0 1-.45.34H7.99a.47.47 0 0 1-.45-.34l-.656-2.334a.467.467 0 0 1 .899-.252l.425 1.514.426-1.514a.467.467 0 0 1 .576-.323' })] }));

package/dist/src/lib/Symbols/Icons/Invoice.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Invoice icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Invoice } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Invoice />
+ *
+ * @example
+ * // With custom size and style
+ * <Invoice size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Invoice} size="md">
+ *   Click me
+ * </Button>
+ */
+export declare const Invoice: {
+    (props: Omit<import("../../Components").IconProps, "children">): import("react").FunctionComponentElement<import("../../Components").IconProps>;
+    displayName: string;
+};
+//# sourceMappingURL=Invoice.d.ts.map

package/dist/src/lib/Symbols/Icons/Invoice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Invoice.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Symbols/Icons/Invoice.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO;;;CAWnB,CAAC"}

package/dist/src/lib/Symbols/Icons/Invoice.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+/**
+ * Invoice icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Invoice } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Invoice />
+ *
+ * @example
+ * // With custom size and style
+ * <Invoice size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Invoice} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Invoice = createIcon('Invoice', _jsx(Svg, { width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 16 16', children: _jsx(Path, { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 1.3, d: 'M10.667 6H5.333m5.334 2H5.333m3.334 2H5.333m7.633 3.597-.66.332a.67.67 0 0 1-.595.002l-1.048-.518-1.027.516a.67.67 0 0 1-.597 0L8 13.413l-1.04.518a.67.67 0 0 1-.596-.001l-1.027-.517-1.048.519a.67.67 0 0 1-.595-.002l-.66-.332a.67.67 0 0 1-.367-.595V2.998c0-.252.142-.482.367-.595l.66-.332a.67.67 0 0 1 .595-.002l1.048.518 1.027-.516a.67.67 0 0 1 .597 0L8 2.587l1.04-.518a.67.67 0 0 1 .596.001l1.027.516 1.048-.518a.67.67 0 0 1 .595.002l.66.332a.67.67 0 0 1 .367.595v10.004a.67.67 0 0 1-.367.595' }) }));

package/dist/src/lib/Symbols/Icons/Mailbox.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Mailbox icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Mailbox } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Mailbox />
+ *
+ * @example
+ * // With custom size and style
+ * <Mailbox size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Mailbox} size="md">
+ *   Click me
+ * </Button>
+ */
+export declare const Mailbox: {
+    (props: Omit<import("../../Components").IconProps, "children">): import("react").FunctionComponentElement<import("../../Components").IconProps>;
+    displayName: string;
+};
+//# sourceMappingURL=Mailbox.d.ts.map

package/dist/src/lib/Symbols/Icons/Mailbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mailbox.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Symbols/Icons/Mailbox.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO;;;CAWnB,CAAC"}

package/dist/src/lib/Symbols/Icons/Mailbox.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+/**
+ * Mailbox icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Mailbox } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Mailbox />
+ *
+ * @example
+ * // With custom size and style
+ * <Mailbox size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Mailbox} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Mailbox = createIcon('Mailbox', _jsx(Svg, { width: 24, height: 24, fill: 'currentColor', viewBox: '0 0 16 16', children: _jsx(Path, { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 1.3, d: 'M9.038 4.332 7.74 5.628l-.778-.778m-.964 2.817h4.002M3.33 9.334V3.33c0-.736.598-1.333 1.334-1.333h6.67c.736 0 1.334.597 1.334 1.333v6.003M1.998 12.669v-2.335a1 1 0 0 1 1-1H4.25a1 1 0 0 1 .707.293l.651.65c.25.25.589.39.942.39h2.897c.354 0 .693-.14.944-.39l.553-.553c.25-.25.588-.39.942-.39h1.115a1 1 0 0 1 1 1v2.335c0 .736-.597 1.333-1.333 1.333H3.33a1.334 1.334 0 0 1-1.333-1.333' }) }));

package/dist/src/lib/Symbols/Icons/PenEditWriting.d.ts

@@ -0,0 +1,35 @@
+/**
+ * PenEditWriting icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { PenEditWriting } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <PenEditWriting />
+ *
+ * @example
+ * // With custom size and style
+ * <PenEditWriting size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={PenEditWriting} size="md">
+ *   Click me
+ * </Button>
+ */
+export declare const PenEditWriting: {
+    (props: Omit<import("../../Components").IconProps, "children">): import("react").FunctionComponentElement<import("../../Components").IconProps>;
+    displayName: string;
+};
+//# sourceMappingURL=PenEditWriting.d.ts.map

package/dist/src/lib/Symbols/Icons/PenEditWriting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PenEditWriting.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Symbols/Icons/PenEditWriting.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,cAAc;;;CAW1B,CAAC"}