@ledgerhq/lumen-ui-rnative 0.1.15 → 0.1.16

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

@@ -0,0 +1,102 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useStyleSheet } from "../../../styles/index.js";
+import { Box } from "../Utility/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const borderRadiusMap = {
+  12: 'xs',
+  16: 'xs',
+  20: 'xs',
+  24: 'sm',
+  32: 'sm',
+  40: 'md',
+  48: 'md',
+  56: 'lg'
+};
+export const mediaImageDotSizeMap = {
+  12: 8,
+  16: 8,
+  20: 8,
+  24: 10,
+  32: 12,
+  40: 16,
+  48: 20,
+  56: 24
+};
+const useStyles = ({
+  size,
+  shape
+}) => {
+  return useStyleSheet(t => {
+    const sizeValue = t.sizes[`s${size}`];
+    const radius = shape === 'circle' ? t.borderRadius.full : t.borderRadius[borderRadiusMap[size]];
+    return {
+      root: {
+        width: sizeValue,
+        height: sizeValue,
+        borderRadius: radius,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: t.colors.bg.mutedTransparent
+      },
+      image: {
+        width: '100%',
+        height: '100%'
+      }
+    };
+  }, [size, shape]);
+};
+
+/**
+ * A generic media image component that displays an image with optional shape variants.
+ * Supports square and circular appearances with consistent sizing.
+ *
+ * When the image fails to load or no src is provided, displays a background placeholder.
+ *
+ * @example
+ * import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <MediaImage src="https://example.com/icon.png" alt="Bitcoin" size={32} />
+ */
+export const MediaImage = ({
+  src,
+  alt,
+  size = 48,
+  shape = 'square',
+  lx = {},
+  style,
+  ref,
+  ...props
+}) => {
+  const [error, setError] = useState(false);
+  const shouldFallback = !src || error;
+  const styles = useStyles({
+    size,
+    shape
+  });
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    lx: lx,
+    style: StyleSheet.flatten([styles.root, style]),
+    accessibilityRole: "image",
+    accessibilityLabel: alt,
+    ...props,
+    children: !shouldFallback && /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: src
+      },
+      style: styles.image,
+      accessible: false,
+      onError: () => setError(true),
+      testID: "media-image-img"
+    })
+  });
+};
+MediaImage.displayName = 'MediaImage';
+//# sourceMappingURL=MediaImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","Image","StyleSheet","useStyleSheet","Box","jsx","_jsx","borderRadiusMap","mediaImageDotSizeMap","useStyles","size","shape","t","sizeValue","sizes","radius","borderRadius","full","root","width","height","overflow","alignItems","justifyContent","backgroundColor","colors","bg","mutedTransparent","image","MediaImage","src","alt","lx","style","ref","props","error","setError","shouldFallback","styles","flatten","accessibilityRole","accessibilityLabel","children","source","uri","accessible","onError","testID","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/MediaImage.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,103 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaImageStories from './MediaImage.stories';
+import { MediaImage } from './MediaImage';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+
+<Meta title='Communication/MediaImage' of={MediaImageStories} />
+
+# MediaImage
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaImage displays an image with consistent sizing and shape. When the image fails to load or no source is provided, a background placeholder is shown automatically. This React Native implementation ensures consistent behavior across mobile platforms.
+
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
+
+## Anatomy
+
+<Canvas of={MediaImageStories.Base} />
+
+- **Container**: Sized wrapper with rounded corners and overflow clipping
+- **Image**: Fills the container using React Native's `Image` component
+- **Fallback**: Background placeholder shown on missing or broken source
+
+## Properties
+
+### Overview
+
+<Canvas of={MediaImageStories.Base} />
+<Controls of={MediaImageStories.Base} />
+
+### Sizes
+
+Eight sizes are available (12, 16, 20, 24, 32, 40, 48, 56). Border radius scales with size.
+
+<Canvas of={MediaImageStories.SizeShowcase} />
+
+### Shapes
+
+<Canvas of={MediaImageStories.ShapeShowcase} />
+
+- **square** (default): Rounded corners that scale with size
+- **circle**: Fully rounded
+
+## Accessibility
+
+- The root element uses `accessibilityRole="image"` with `accessibilityLabel` derived from `alt`.
+- The inner `Image` is marked `accessible={false}` to avoid duplicate announcements.
+- Always provide a meaningful `alt` prop so screen readers can announce the image.
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <MediaImage src='https://example.com/icon.png' alt='Bitcoin' size={32} />;
+}
+```
+
+### With Circle Shape
+
+```tsx
+<MediaImage src='https://example.com/icon.png' alt='Ethereum' size={48} shape='circle' />
+```
+
+### Custom Styling
+
+Use the `lx` prop for token-based layout adjustments:
+
+```tsx
+<MediaImage
+  src='https://example.com/icon.png'
+  alt='Token'
+  size={40}
+  lx={{ marginRight: 's8' }}
+/>
+```
+
+You can also use the `style` prop for escape-hatch styling:
+
+```tsx
+<MediaImage
+  src='https://example.com/icon.png'
+  alt='Token'
+  size={40}
+  style={{ marginRight: 8 }}
+/>
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,91 @@
+"use strict";
+
+import { Box } from "../Utility/index.js";
+import { MediaImage } from "./MediaImage.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: MediaImage,
+  title: 'Communication/MediaImage',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+const exampleSrc = 'https://crypto-icons.ledger.com/ADA.png';
+export const Base = {
+  args: {
+    src: exampleSrc,
+    alt: 'Cardano',
+    size: 40,
+    shape: 'square'
+  }
+};
+export const SizeShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 's16'
+    },
+    children: [/*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 12",
+      size: 12
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 16",
+      size: 16
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 20",
+      size: 20
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 24",
+      size: 24
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 32",
+      size: 32
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 40",
+      size: 40
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 48",
+      size: 48
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Size 56",
+      size: 56
+    })]
+  })
+};
+export const ShapeShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's24'
+    },
+    children: [/*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Square",
+      size: 48,
+      shape: "square"
+    }), /*#__PURE__*/_jsx(MediaImage, {
+      src: exampleSrc,
+      alt: "Circle",
+      size: 48,
+      shape: "circle"
+    })]
+  })
+};
+//# sourceMappingURL=MediaImage.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Box","MediaImage","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","exampleSrc","Base","args","src","alt","size","shape","SizeShowcase","render","lx","flexDirection","alignItems","gap","children","ShapeShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/MediaImage.stories.tsx"],"mappings":";;AACA,SAASA,GAAG,QAAQ,qBAAY;AAChC,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1C,MAAMC,IAAI,GAAG;EACXC,SAAS,EAAEN,UAAU;EACrBO,KAAK,EAAE,0BAA0B;EACjCC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,MAAM,EAAE;QACNC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE,IAAI;QACZC,IAAI,EAAE;MACR;IACF;EACF;AACF,CAAmC;AAEnC,eAAeR,IAAI;AAGnB,MAAMS,UAAU,GAAG,yCAAyC;AAE5D,OAAO,MAAMC,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJC,GAAG,EAAEH,UAAU;IACfI,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,MAAMC,YAAmB,GAAG;EACjCC,MAAM,EAAEA,CAAA,kBACNlB,KAAA,CAACL,GAAG;IAACwB,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,UAAU;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBACpEzB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC,eACvDjB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,SAAS;MAACC,IAAI,EAAE;IAAG,CAAE,CAAC;EAAA,CACpD;AAET,CAAC;AAED,OAAO,MAAMS,aAAoB,GAAG;EAClCN,MAAM,EAAEA,CAAA,kBACNlB,KAAA,CAACL,GAAG;IAACwB,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAM,CAAE;IAAAC,QAAA,gBAClEzB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,QAAQ;MAACC,IAAI,EAAE,EAAG;MAACC,KAAK,EAAC;IAAQ,CAAE,CAAC,eACrElB,IAAA,CAACF,UAAU;MAACiB,GAAG,EAAEH,UAAW;MAACI,GAAG,EAAC,QAAQ;MAACC,IAAI,EAAE,EAAG;MAACC,KAAK,EAAC;IAAQ,CAAE,CAAC;EAAA,CAClE;AAET,CAAC","ignoreList":[]}

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

@@ -0,0 +1,204 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, waitFor } from '@testing-library/react-native';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { MediaImage } from "./MediaImage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  sizes,
+  borderRadius
+} = ledgerLiveThemes.dark;
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('MediaImage Component', () => {
+  const validSrc = 'https://crypto-icons.ledger.com/ADA.png';
+  it('should render with image when valid src is provided', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: validSrc,
+        alt: "Cardano"
+      })
+    }));
+    const img = getByTestId('media-image-img');
+    expect(img.props.source).toEqual({
+      uri: validSrc
+    });
+  });
+  it('should render fallback when no src is provided', () => {
+    const {
+      queryByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        alt: "Empty"
+      })
+    }));
+    expect(queryByTestId('media-image-img')).toBeNull();
+  });
+  it('should render fallback when src is empty string', () => {
+    const {
+      queryByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: "",
+        alt: "Empty"
+      })
+    }));
+    expect(queryByTestId('media-image-img')).toBeNull();
+  });
+  it('should render fallback when image fails to load', async () => {
+    const {
+      getByTestId,
+      queryByTestId,
+      rerender
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: "https://broken-link.com/404.png",
+        alt: "Broken"
+      })
+    }));
+    const img = getByTestId('media-image-img');
+    img.props.onError();
+    rerender(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: "https://broken-link.com/404.png",
+        alt: "Broken"
+      })
+    }));
+    await waitFor(() => {
+      expect(queryByTestId('media-image-img')).toBeNull();
+    });
+  });
+  it('should reset error state when src changes', async () => {
+    const {
+      getByTestId,
+      rerender
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: "https://broken-link.com/404.png",
+        alt: "Test"
+      })
+    }));
+    const img = getByTestId('media-image-img');
+    img.props.onError();
+    rerender(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: validSrc,
+        alt: "Test"
+      })
+    }));
+    await waitFor(() => {
+      const newImg = getByTestId('media-image-img');
+      expect(newImg.props.source).toEqual({
+        uri: validSrc
+      });
+    });
+  });
+  it('should apply default size (48)', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "mi",
+        src: validSrc,
+        alt: "Test"
+      })
+    }));
+    const root = getByTestId('mi');
+    expect(root.props.style.width).toBe(sizes.s48);
+    expect(root.props.style.height).toBe(sizes.s48);
+  });
+  it('should apply specified size', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "mi",
+        src: validSrc,
+        alt: "Test",
+        size: 24
+      })
+    }));
+    const root = getByTestId('mi');
+    expect(root.props.style.width).toBe(sizes.s24);
+    expect(root.props.style.height).toBe(sizes.s24);
+  });
+  it('should apply circle shape', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "mi",
+        src: validSrc,
+        alt: "Test",
+        shape: "circle"
+      })
+    }));
+    const root = getByTestId('mi');
+    expect(root.props.style.borderRadius).toBe(borderRadius.full);
+  });
+  it('should apply square shape with correct border radius', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "mi",
+        src: validSrc,
+        alt: "Test",
+        size: 48,
+        shape: "square"
+      })
+    }));
+    const root = getByTestId('mi');
+    expect(root.props.style.borderRadius).toBe(borderRadius.md);
+  });
+  it('should set accessibility label from alt prop', () => {
+    const {
+      getByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: validSrc,
+        alt: "Cardano icon"
+      })
+    }));
+    expect(getByLabelText('Cardano icon')).toBeTruthy();
+  });
+  it('should apply custom styles', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "mi",
+        src: validSrc,
+        alt: "Test",
+        style: {
+          borderWidth: 2
+        }
+      })
+    }));
+    const root = getByTestId('mi');
+    expect(root.props.style.borderWidth).toBe(2);
+  });
+  it('should pass additional props', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        testID: "custom-id",
+        src: validSrc,
+        alt: "Test"
+      })
+    }));
+    expect(getByTestId('custom-id')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=MediaImage.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","waitFor","ThemeProvider","MediaImage","jsx","_jsx","sizes","borderRadius","dark","TestWrapper","children","themes","colorScheme","locale","validSrc","getByTestId","src","alt","img","props","source","toEqual","uri","queryByTestId","toBeNull","rerender","onError","newImg","testID","root","style","width","toBe","s48","height","size","s24","shape","full","md","getByLabelText","toBeTruthy","borderWidth"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/MediaImage.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,eAAe;AACpD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,EAAEC,OAAO,QAAQ,+BAA+B;AAC/D,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1C,MAAM;EAAEC,KAAK;EAAEC;AAAa,CAAC,GAAGR,gBAAgB,CAACS,IAAI;AAErD,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwC,CAAC,kBAC9DL,IAAA,CAACH,aAAa;EAACS,MAAM,EAAEZ,gBAAiB;EAACa,WAAW,EAAC,MAAM;EAACC,MAAM,EAAC,IAAI;EAAAH,QAAA,EACpEA;AAAQ,CACI,CAChB;AAEDd,QAAQ,CAAC,sBAAsB,EAAE,MAAM;EACrC,MAAMkB,QAAQ,GAAG,yCAAyC;EAE1DjB,EAAE,CAAC,qDAAqD,EAAE,MAAM;IAC9D,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC;MAAS,CAAE;IAAC,CAChC,CACf,CAAC;IAED,MAAMC,GAAG,GAAGH,WAAW,CAAC,iBAAiB,CAAC;IAC1CjB,MAAM,CAACoB,GAAG,CAACC,KAAK,CAACC,MAAM,CAAC,CAACC,OAAO,CAAC;MAAEC,GAAG,EAAER;IAAS,CAAC,CAAC;EACrD,CAAC,CAAC;EAEFjB,EAAE,CAAC,gDAAgD,EAAE,MAAM;IACzD,MAAM;MAAE0B;IAAc,CAAC,GAAGvB,MAAM,cAC9BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACc,GAAG,EAAC;MAAO,CAAE;IAAC,CACf,CACf,CAAC;IAEDnB,MAAM,CAACyB,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACrD,CAAC,CAAC;EAEF3B,EAAE,CAAC,iDAAiD,EAAE,MAAM;IAC1D,MAAM;MAAE0B;IAAc,CAAC,GAAGvB,MAAM,cAC9BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAC,EAAE;QAACC,GAAG,EAAC;MAAO,CAAE;IAAC,CACtB,CACf,CAAC;IAEDnB,MAAM,CAACyB,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACrD,CAAC,CAAC;EAEF3B,EAAE,CAAC,iDAAiD,EAAE,YAAY;IAChE,MAAM;MAAEkB,WAAW;MAAEQ,aAAa;MAAEE;IAAS,CAAC,GAAGzB,MAAM,cACrDK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAC,iCAAiC;QAACC,GAAG,EAAC;MAAQ,CAAE;IAAC,CACtD,CACf,CAAC;IAED,MAAMC,GAAG,GAAGH,WAAW,CAAC,iBAAiB,CAAC;IAC1CG,GAAG,CAACC,KAAK,CAACO,OAAO,CAAC,CAAC;IAEnBD,QAAQ,cACNpB,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAC,iCAAiC;QAACC,GAAG,EAAC;MAAQ,CAAE;IAAC,CACtD,CACf,CAAC;IAED,MAAMhB,OAAO,CAAC,MAAM;MAClBH,MAAM,CAACyB,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;IACrD,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF3B,EAAE,CAAC,2CAA2C,EAAE,YAAY;IAC1D,MAAM;MAAEkB,WAAW;MAAEU;IAAS,CAAC,GAAGzB,MAAM,cACtCK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAC,iCAAiC;QAACC,GAAG,EAAC;MAAM,CAAE;IAAC,CACpD,CACf,CAAC;IAED,MAAMC,GAAG,GAAGH,WAAW,CAAC,iBAAiB,CAAC;IAC1CG,GAAG,CAACC,KAAK,CAACO,OAAO,CAAC,CAAC;IAEnBD,QAAQ,cACNpB,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC;MAAM,CAAE;IAAC,CAC7B,CACf,CAAC;IAED,MAAMhB,OAAO,CAAC,MAAM;MAClB,MAAM0B,MAAM,GAAGZ,WAAW,CAAC,iBAAiB,CAAC;MAC7CjB,MAAM,CAAC6B,MAAM,CAACR,KAAK,CAACC,MAAM,CAAC,CAACC,OAAO,CAAC;QAAEC,GAAG,EAAER;MAAS,CAAC,CAAC;IACxD,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFjB,EAAE,CAAC,gCAAgC,EAAE,MAAM;IACzC,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACyB,MAAM,EAAC,IAAI;QAACZ,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC;MAAM,CAAE;IAAC,CACzC,CACf,CAAC;IAED,MAAMY,IAAI,GAAGd,WAAW,CAAC,IAAI,CAAC;IAC9BjB,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACC,KAAK,CAAC,CAACC,IAAI,CAAC1B,KAAK,CAAC2B,GAAG,CAAC;IAC9CnC,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACI,MAAM,CAAC,CAACF,IAAI,CAAC1B,KAAK,CAAC2B,GAAG,CAAC;EACjD,CAAC,CAAC;EAEFpC,EAAE,CAAC,6BAA6B,EAAE,MAAM;IACtC,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACyB,MAAM,EAAC,IAAI;QAACZ,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC,MAAM;QAACkB,IAAI,EAAE;MAAG,CAAE;IAAC,CACnD,CACf,CAAC;IAED,MAAMN,IAAI,GAAGd,WAAW,CAAC,IAAI,CAAC;IAC9BjB,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACC,KAAK,CAAC,CAACC,IAAI,CAAC1B,KAAK,CAAC8B,GAAG,CAAC;IAC9CtC,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACI,MAAM,CAAC,CAACF,IAAI,CAAC1B,KAAK,CAAC8B,GAAG,CAAC;EACjD,CAAC,CAAC;EAEFvC,EAAE,CAAC,2BAA2B,EAAE,MAAM;IACpC,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACyB,MAAM,EAAC,IAAI;QAACZ,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC,MAAM;QAACoB,KAAK,EAAC;MAAQ,CAAE;IAAC,CACxD,CACf,CAAC;IAED,MAAMR,IAAI,GAAGd,WAAW,CAAC,IAAI,CAAC;IAC9BjB,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACvB,YAAY,CAAC,CAACyB,IAAI,CAACzB,YAAY,CAAC+B,IAAI,CAAC;EAC/D,CAAC,CAAC;EAEFzC,EAAE,CAAC,sDAAsD,EAAE,MAAM;IAC/D,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QACTyB,MAAM,EAAC,IAAI;QACXZ,GAAG,EAAEF,QAAS;QACdG,GAAG,EAAC,MAAM;QACVkB,IAAI,EAAE,EAAG;QACTE,KAAK,EAAC;MAAQ,CACf;IAAC,CACS,CACf,CAAC;IAED,MAAMR,IAAI,GAAGd,WAAW,CAAC,IAAI,CAAC;IAC9BjB,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACvB,YAAY,CAAC,CAACyB,IAAI,CAACzB,YAAY,CAACgC,EAAE,CAAC;EAC7D,CAAC,CAAC;EAEF1C,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACvD,MAAM;MAAE2C;IAAe,CAAC,GAAGxC,MAAM,cAC/BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACa,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC;MAAc,CAAE;IAAC,CACrC,CACf,CAAC;IAEDnB,MAAM,CAAC0C,cAAc,CAAC,cAAc,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EACrD,CAAC,CAAC;EAEF5C,EAAE,CAAC,4BAA4B,EAAE,MAAM;IACrC,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QACTyB,MAAM,EAAC,IAAI;QACXZ,GAAG,EAAEF,QAAS;QACdG,GAAG,EAAC,MAAM;QACVa,KAAK,EAAE;UAAEY,WAAW,EAAE;QAAE;MAAE,CAC3B;IAAC,CACS,CACf,CAAC;IAED,MAAMb,IAAI,GAAGd,WAAW,CAAC,IAAI,CAAC;IAC9BjB,MAAM,CAAC+B,IAAI,CAACV,KAAK,CAACW,KAAK,CAACY,WAAW,CAAC,CAACV,IAAI,CAAC,CAAC,CAAC;EAC9C,CAAC,CAAC;EAEFnC,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACvC,MAAM;MAAEkB;IAAY,CAAC,GAAGf,MAAM,cAC5BK,IAAA,CAACI,WAAW;MAAAC,QAAA,eACVL,IAAA,CAACF,UAAU;QAACyB,MAAM,EAAC,WAAW;QAACZ,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAC;MAAM,CAAE;IAAC,CAChD,CACf,CAAC;IAEDnB,MAAM,CAACiB,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC0B,UAAU,CAAC,CAAC;EAC/C,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["MediaImage","mediaImageDotSizeMap"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaImage/index.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,oBAAoB,QAAQ,iBAAc;AAC/D,cAAc,YAAS","ignoreList":[]}

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

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

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from "../../../styles/index.js";
 import { Search as SearchIcon } from "../../Symbols/index.js";
 import { BaseInput } from "../BaseInput/index.js";
@@ -9,20 +10,28 @@ export const SearchInput = ({
   style,
   containerStyle,
   inputStyle,
+  disabled: disabledProp,
   ref,
   ...props
 }) => {
+  const disabled = useDisabledContext({
+    consumerName: 'SearchInput',
+    mergeWith: {
+      disabled: disabledProp
+    }
+  });
   const styles = useAppearanceStyles(appearance);
   return /*#__PURE__*/_jsx(BaseInput, {
     ref: ref,
     prefix: /*#__PURE__*/_jsx(SearchIcon, {
       size: 20,
-      color: "muted",
-      accessible: false
+      accessible: false,
+      disabled: disabled
     }),
     style: style,
     containerStyle: [containerStyle, styles.container],
     inputStyle: [inputStyle, styles.input],
+    disabled: disabledProp,
     ...props
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["useStyleSheet","Search","SearchIcon","BaseInput","jsx","_jsx","SearchInput","appearance","style","containerStyle","inputStyle","ref","props","styles","useAppearanceStyles","prefix","size","color","accessible","container","input","t","backgroundColor","colors","bg","mutedTransparent","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/SearchInput.tsx"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,0BAAiB;AAC/C,SAASC,MAAM,IAAIC,UAAU,QAAQ,wBAAe;AACpD,SAASC,SAAS,QAAQ,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,UAAU,GAAG,OAAO;EACpBC,KAAK;EACLC,cAAc;EACdC,UAAU;EACVC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,MAAM,GAAGC,mBAAmB,CAACP,UAAU,CAAC;EAE9C,oBACEF,IAAA,CAACF,SAAS;IACRQ,GAAG,EAAEA,GAAI;IACTI,MAAM,eAAEV,IAAA,CAACH,UAAU;MAACc,IAAI,EAAE,EAAG;MAACC,KAAK,EAAC,OAAO;MAACC,UAAU,EAAE;IAAM,CAAE,CAAE;IAClEV,KAAK,EAAEA,KAAM;IACbC,cAAc,EAAE,CAACA,cAAc,EAAEI,MAAM,CAACM,SAAS,CAAE;IACnDT,UAAU,EAAE,CAACA,UAAU,EAAEG,MAAM,CAACO,KAAK,CAAE;IAAA,GACnCR;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAME,mBAAmB,GAAIP,UAAmC,IAAK;EACnE,OAAOP,aAAa,CACjBqB,CAAC,KAAM;IACNF,SAAS,EACPZ,UAAU,KAAK,aAAa,GACxB;MAAEe,eAAe,EAAED,CAAC,CAACE,MAAM,CAACC,EAAE,CAACC;IAAiB,CAAC,GACjD,CAAC,CAAC;IACRL,KAAK,EAAE;MAAEE,eAAe,EAAE;IAAc;EAC1C,CAAC,CAAC,EACF,CAACf,UAAU,CACb,CAAC;AACH,CAAC;AAEDD,WAAW,CAACoB,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"names":["useDisabledContext","useStyleSheet","Search","SearchIcon","BaseInput","jsx","_jsx","SearchInput","appearance","style","containerStyle","inputStyle","disabled","disabledProp","ref","props","consumerName","mergeWith","styles","useAppearanceStyles","prefix","size","accessible","container","input","t","backgroundColor","colors","bg","mutedTransparent","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/SearchInput/SearchInput.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,0BAAiB;AAC/C,SAASC,MAAM,IAAIC,UAAU,QAAQ,wBAAe;AACpD,SAASC,SAAS,QAAQ,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,UAAU,GAAG,OAAO;EACpBC,KAAK;EACLC,cAAc;EACdC,UAAU;EACVC,QAAQ,EAAEC,YAAY;EACtBC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMH,QAAQ,GAAGZ,kBAAkB,CAAC;IAClCgB,YAAY,EAAE,aAAa;IAC3BC,SAAS,EAAE;MAAEL,QAAQ,EAAEC;IAAa;EACtC,CAAC,CAAC;EACF,MAAMK,MAAM,GAAGC,mBAAmB,CAACX,UAAU,CAAC;EAE9C,oBACEF,IAAA,CAACF,SAAS;IACRU,GAAG,EAAEA,GAAI;IACTM,MAAM,eAAEd,IAAA,CAACH,UAAU;MAACkB,IAAI,EAAE,EAAG;MAACC,UAAU,EAAE,KAAM;MAACV,QAAQ,EAAEA;IAAS,CAAE,CAAE;IACxEH,KAAK,EAAEA,KAAM;IACbC,cAAc,EAAE,CAACA,cAAc,EAAEQ,MAAM,CAACK,SAAS,CAAE;IACnDZ,UAAU,EAAE,CAACA,UAAU,EAAEO,MAAM,CAACM,KAAK,CAAE;IACvCZ,QAAQ,EAAEC,YAAa;IAAA,GACnBE;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAMI,mBAAmB,GAAIX,UAAmC,IAAK;EACnE,OAAOP,aAAa,CACjBwB,CAAC,KAAM;IACNF,SAAS,EACPf,UAAU,KAAK,aAAa,GACxB;MAAEkB,eAAe,EAAED,CAAC,CAACE,MAAM,CAACC,EAAE,CAACC;IAAiB,CAAC,GACjD,CAAC,CAAC;IACRL,KAAK,EAAE;MAAEE,eAAe,EAAE;IAAc;EAC1C,CAAC,CAAC,EACF,CAAClB,UAAU,CACb,CAAC;AACH,CAAC;AAEDD,WAAW,CAACuB,WAAW,GAAG,aAAa","ignoreList":[]}

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

@@ -57,10 +57,14 @@ Use `onClear` to extend the default clear behavior with custom logic.
 
 ### Disabled State
 
-The search input can be disabled using the `editable` prop set to `false`.
+The search input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
 
 <Canvas of={SearchInputStories.DisabledSearchInput} />
 
+### Read-Only State
+
+Alternatively, use `editable={false}` to prevent editing without applying the muted visual style. This is useful for displaying non-editable values that should still look like regular inputs.
+
 ### Error State
 
 The search component supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
@@ -273,7 +277,15 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 
 ### Disabled State
 
-Use the `editable` prop to disable the search input:
+Use the `disabled` prop to disable the search input with a muted visual style:
+
+```tsx
+<SearchInput placeholder='Search' value='Current search' disabled />
+```
+
+### Read-Only State
+
+Use the `editable` prop to make the search input non-editable without the muted visual style:
 
 ```tsx
 <SearchInput placeholder='Search' value='Current search' editable={false} />

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

@@ -18,24 +18,6 @@ const meta = {
         type: 'code'
       }
     }
-  },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text when input is empty'
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Error message to display below input'
-    },
-    editable: {
-      control: 'boolean',
-      description: 'Whether the input is editable'
-    },
-    hideClearButton: {
-      control: 'boolean',
-      description: 'Hide the clear button'
-    }
   }
 };
 export default meta;
@@ -103,7 +85,7 @@ export const DisabledSearchInput = {
   }),
   args: {
     placeholder: 'Search products',
-    editable: false,
+    disabled: true,
     hideClearButton: false
   }
 };