@ledgerhq/lumen-ui-rnative 0.1.28 → 0.1.29

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -5,7 +5,7 @@ export type DotIndicatorProps = {
      * The size of the dot indicator.
      * @default sm
      */
-    size?: 'xs' | 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * The appearance of the dot indicator.
      * @default base

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/DotIndicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/DotIndicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,14 +1,20 @@
-import type { MediaImageProps } from './types';
+import type { MediaImageProps, MediaImageSize } from './types';
+export declare const fontSizeMap: Record<MediaImageSize, number>;
 /**
  * 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.
+ * When the image fails to load or no src is provided, displays a fallback letter (if `fallback`
+ * is provided) or a muted background placeholder.
+ *
+ * While `loading` is true, a pulsing skeleton overlay is shown regardless of `src`.
  *
  * @example
  * import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
  *
  * <MediaImage src="https://example.com/icon.png" alt="Bitcoin" size={32} />
+ * <MediaImage fallback="Bitcoin" size={32} />
+ * <MediaImage loading size={32} />
  */
-export declare const MediaImage: ({ src, alt, size, shape, lx, style, ref, ...props }: MediaImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MediaImage: ({ src, alt, size, shape, fallback, loading, lx, style, ref, ...props }: MediaImageProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MediaImage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAmC,MAAM,SAAS,CAAC;AAmDhF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GAAI,qDASxB,eAAe,4CA6BjB,CAAC"}
+{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAC;AAgBhF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAUtD,CAAC;AAyCF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,wEAWxB,eAAe,4CAuCjB,CAAC"}

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

@@ -21,5 +21,17 @@ export type MediaImageProps = {
      * Alternative text for the image, used for accessibility.
      */
     alt?: string;
+    /**
+     * Text used to derive a single-letter fallback when no `src` is provided or the image fails to load.
+     * The first character is displayed, uppercased.
+     * @optional
+     */
+    fallback?: string;
+    /**
+     * When true, displays a pulsing skeleton placeholder instead of the image or fallback.
+     * @optional
+     * @default false
+     */
+    loading?: boolean;
 } & Omit<StyledViewProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/package.json

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

package/src/i18n/locales/de.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Benutzer-Avatar",
-      "notificationAriaLabel": "Hat Benachrichtigung"
+      "notificationAriaLabel": "Hat Benachrichtigung",
+      "fallbackIconAriaLabel": "Fallback-Icon"
     },
     "baseInput": {
       "clearInputAriaLabel": "Eingabe löschen"

package/src/i18n/locales/en.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "User avatar",
-      "notificationAriaLabel": "Has notification"
+      "notificationAriaLabel": "Has notification",
+      "fallbackIconAriaLabel": "Fallback Icon"
     },
     "baseInput": {
       "clearInputAriaLabel": "Clear input"

package/src/i18n/locales/es.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Avatar de usuario",
-      "notificationAriaLabel": "Tiene notificación"
+      "notificationAriaLabel": "Tiene notificación",
+      "fallbackIconAriaLabel": "Ícono alternativo"
     },
     "baseInput": {
       "clearInputAriaLabel": "Borrar entrada"

package/src/i18n/locales/fr.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Avatar de l'utilisateur",
-      "notificationAriaLabel": "A une notification"
+      "notificationAriaLabel": "A une notification",
+      "fallbackIconAriaLabel": "Icône par défaut"
     },
     "baseInput": {
       "clearInputAriaLabel": "Effacer la saisie"

package/src/i18n/locales/ja.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "ユーザーアバター",
-      "notificationAriaLabel": "通知あり"
+      "notificationAriaLabel": "通知あり",
+      "fallbackIconAriaLabel": "フォールバックアイコン"
     },
     "baseInput": {
       "clearInputAriaLabel": "インプットを削除"
@@ -30,7 +31,7 @@
       "opensInNewTabAriaLabel": "（新しいタブで開く）"
     },
     "stepper": {
-      "progressAriaLabel": "ステップ {{currentStep}}/{{totalSteps}}"
+      "progressAriaLabel": "ステップ{{currentStep}}/{{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/ko.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "사용자 아바타",
-      "notificationAriaLabel": "알림 있음"
+      "notificationAriaLabel": "알림 있음",
+      "fallbackIconAriaLabel": "대체 아이콘"
     },
     "baseInput": {
       "clearInputAriaLabel": "입력 값 지우기"
@@ -30,7 +31,7 @@
       "opensInNewTabAriaLabel": "(새 탭에서 열기)"
     },
     "stepper": {
-      "progressAriaLabel": "{{totalSteps}}단계 중 {{currentStep}}단계"
+      "progressAriaLabel": "{{totalSteps}} 중 {{currentStep}} 단계"
     }
   }
 }

package/src/i18n/locales/pt.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Avatar do usuário",
-      "notificationAriaLabel": "Tem notificação"
+      "notificationAriaLabel": "Tem notificação",
+      "fallbackIconAriaLabel": "Ícone fallback"
     },
     "baseInput": {
       "clearInputAriaLabel": "Limpar input"

package/src/i18n/locales/ru.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Аватар пользователя",
-      "notificationAriaLabel": "Есть уведомление"
+      "notificationAriaLabel": "Есть уведомление",
+      "fallbackIconAriaLabel": "Стандартная иконка"
     },
     "baseInput": {
       "clearInputAriaLabel": "Очистить поле"

package/src/i18n/locales/th.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "อวาตาร์ผู้ใช้",
-      "notificationAriaLabel": "มีการแจ้งเตือน"
+      "notificationAriaLabel": "มีการแจ้งเตือน",
+      "fallbackIconAriaLabel": "ไอคอนสำรอง"
     },
     "baseInput": {
       "clearInputAriaLabel": "ล้างอินพุต"

package/src/i18n/locales/tr.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "Kullanıcı avatarı",
-      "notificationAriaLabel": "Bildirim var"
+      "notificationAriaLabel": "Bildirim var",
+      "fallbackIconAriaLabel": "Yedek simge"
     },
     "baseInput": {
       "clearInputAriaLabel": "Girdiyi temizle"
@@ -30,7 +31,7 @@
       "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
     },
     "stepper": {
-      "progressAriaLabel": "{{totalSteps}} adımdan {{currentStep}}. adım"
+      "progressAriaLabel": "Adım {{totalSteps}} / {{currentStep}}"
     }
   }
 }

package/src/i18n/locales/zh.json

@@ -11,7 +11,8 @@
     },
     "avatar": {
       "defaultAlt": "用户头像",
-      "notificationAriaLabel": "有通知"
+      "notificationAriaLabel": "有通知",
+      "fallbackIconAriaLabel": "备用图标"
     },
     "baseInput": {
       "clearInputAriaLabel": "清空输入框"
@@ -30,7 +31,7 @@
       "opensInNewTabAriaLabel": "（在新选项卡中打开）"
     },
     "stepper": {
-      "progressAriaLabel": "第 {{currentStep}} 步，共 {{totalSteps}} 步"
+      "progressAriaLabel": "第 {{currentStep}} / {{totalSteps}} 步"
     }
   }
 }

package/src/lib/Components/Avatar/Avatar.figma.tsx

@@ -11,6 +11,7 @@ figma.connect(
         sm: 'sm',
         md: 'md',
         lg: 'lg',
+        xl: 'xl',
       }),
       showNotification: figma.boolean('show-notification', {
         true: true,

package/src/lib/Components/Avatar/Avatar.mdx

@@ -15,7 +15,7 @@ import { Box } from '../Utility';
 
 ## Introduction
 
-The Avatar component displays a circular user profile image with automatic fallback to a User icon when the image is unavailable or fails to load. It supports an optional notification indicator and three size variants. This React Native implementation ensures consistent behavior across mobile platforms while maintaining design system coherence.
+The Avatar component displays a circular user profile image with automatic fallback to a User icon when the image is unavailable or fails to load. It supports an optional notification indicator and four size variants. This React Native implementation ensures consistent behavior across mobile platforms while maintaining design system coherence.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10546-614&p=f&m=dev).
 
@@ -36,7 +36,7 @@ The Avatar component displays a circular user profile image with automatic fallb
 
 ### Size
 
-Avatars come in three different sizes:
+Avatars come in four different sizes:
 
 <Canvas of={AvatarStories.SizeShowcase} />
 
@@ -137,6 +137,7 @@ function MyComponent() {
       <Avatar src="https://example.com/photo.jpg" size="sm" />
       <Avatar src="https://example.com/photo.jpg" size="md" />
       <Avatar src="https://example.com/photo.jpg" size="lg" />
+      <Avatar src="https://example.com/photo.jpg" size="xl" />
     </Box>
   );
 }

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

@@ -77,6 +77,15 @@ export const SizeShowcase: Story = {
         />
         <Text style={{ marginTop: 4 }}>lg</Text>
       </View>
+      <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
+        <Avatar
+          src={exampleSrc}
+          alt='avatar'
+          size='xl'
+          showNotification={false}
+        />
+        <Text style={{ marginTop: 4 }}>xl</Text>
+      </View>
     </Box>
   ),
 };

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

@@ -39,12 +39,20 @@ describe('Avatar Component', () => {
         <Avatar testID='avatar-id' size='sm' />
       </TestWrapper>,
     );
+    expect(getByTestId('avatar-id').props.style.width).toBe(sizes.s32);
+    expect(getByTestId('avatar-id').props.style.height).toBe(sizes.s32);
+
+    rerender(
+      <TestWrapper>
+        <Avatar testID='avatar-id' size='md' />
+      </TestWrapper>,
+    );
     expect(getByTestId('avatar-id').props.style.width).toBe(sizes.s40);
     expect(getByTestId('avatar-id').props.style.height).toBe(sizes.s40);
 
     rerender(
       <TestWrapper>
-        <Avatar testID='avatar-id' size='md' />
+        <Avatar testID='avatar-id' size='lg' />
       </TestWrapper>,
     );
     expect(getByTestId('avatar-id').props.style.width).toBe(sizes.s48);
@@ -52,11 +60,11 @@ describe('Avatar Component', () => {
 
     rerender(
       <TestWrapper>
-        <Avatar testID='avatar-id' size='lg' />
+        <Avatar testID='avatar-id' size='xl' />
       </TestWrapper>,
     );
-    expect(getByTestId('avatar-id').props.style.width).toBe(sizes.s72);
-    expect(getByTestId('avatar-id').props.style.height).toBe(sizes.s72);
+    expect(getByTestId('avatar-id').props.style.width).toBe(sizes.s64);
+    expect(getByTestId('avatar-id').props.style.height).toBe(sizes.s64);
   });
 
   it('should render fallback icon when no src is provided', () => {
@@ -194,6 +202,15 @@ describe('Avatar Component', () => {
       </TestWrapper>,
     );
 
+    dot = toJSON().children[0];
+    expect(dot.props.style.height).toBe(sizes.s14);
+
+    rerender(
+      <TestWrapper>
+        <Avatar testID='avatar-id' size='xl' showNotification />
+      </TestWrapper>,
+    );
+
     dot = toJSON().children[0];
     expect(dot.props.style.height).toBe(sizes.s16);
   });

package/src/lib/Components/Avatar/Avatar.tsx

@@ -13,6 +13,7 @@ const fallbackSizes = {
   sm: 16,
   md: 24,
   lg: 32,
+  xl: 40,
 } as const;
 
 const dotSizeMap: Record<
@@ -22,15 +23,17 @@ const dotSizeMap: Record<
   sm: 'xs',
   md: 'sm',
   lg: 'md',
+  xl: 'lg',
 };
 
 const useStyles = ({ size }: { size: Size }) => {
   return useStyleSheet(
     (t) => {
       const sizeMap = {
-        sm: { size: t.sizes.s40, padding: t.spacings.s4 },
-        md: { size: t.sizes.s48, padding: t.spacings.s4 },
-        lg: { size: t.sizes.s72, padding: t.spacings.s4 },
+        sm: { size: t.sizes.s32, padding: t.spacings.s4 },
+        md: { size: t.sizes.s40, padding: t.spacings.s4 },
+        lg: { size: t.sizes.s48, padding: t.spacings.s4 },
+        xl: { size: t.sizes.s64, padding: t.spacings.s4 },
       };
 
       return {

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

@@ -16,7 +16,7 @@ export type AvatarProps = {
    * @optional
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
   /**
    * Whether to show the notifications indicator.
    * @optional

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

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { Wallet } from '../../Symbols';
@@ -71,7 +71,7 @@ export const Base: Story = {
     <Card {...args}>
       <CardHeader>
         <CardLeading>
-          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
           <CardContent>
             <CardContentTitle>Bitcoin</CardContentTitle>
             <CardContentDescription>BTC</CardContentDescription>
@@ -96,7 +96,7 @@ export const Base: Story = {
 <Card onPress={handlePress}>
   <CardHeader>
     <CardLeading>
-      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="48px" />
+      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size={48} />
       <CardContent>
         <CardContentTitle>Bitcoin</CardContentTitle>
         <CardContentDescription>BTC</CardContentDescription>
@@ -125,7 +125,7 @@ export const StatesShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }}>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Interactive (default)</CardContentTitle>
               <CardContentDescription>
@@ -150,7 +150,7 @@ export const StatesShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }} outlined>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Outlined</CardContentTitle>
               <CardContentDescription>Selected state</CardContentDescription>
@@ -173,7 +173,7 @@ export const StatesShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }} type='info'>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Info</CardContentTitle>
               <CardContentDescription>Data display only</CardContentDescription>
@@ -197,7 +197,7 @@ export const StatesShowcase: Story = {
         <CardHeader>
           <CardLeading>
             <Box lx={{ opacity: 0.3 }}>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             </Box>
             <CardContent>
               <CardContentTitle>Disabled</CardContentTitle>
@@ -286,7 +286,7 @@ export const ExpandableShowcase: Story = {
         >
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>Expandable Card</CardContentTitle>
                 <CardContentDescription>
@@ -332,7 +332,7 @@ export const LayoutShowcase: Story = {
       <Card {...args}>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Defined width (320px)</CardContentTitle>
               <CardContentDescription>BTC</CardContentDescription>
@@ -347,7 +347,7 @@ export const LayoutShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }}>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentRow>
                 <CardContentTitle>With Tags</CardContentTitle>
@@ -370,7 +370,7 @@ export const LayoutShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }}>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentRow>
                 <CardContentTitle>Trailing values</CardContentTitle>
@@ -403,7 +403,7 @@ export const LayoutShowcase: Story = {
       <Card {...args} lx={{ width: 'full' }}>
         <CardHeader>
           <CardLeading>
-            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Full width (fills parent)</CardContentTitle>
               <CardContentDescription>BTC</CardContentDescription>
@@ -433,7 +433,7 @@ export const CompositionsShowcase: Story = {
         <Card type='info'>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>Account 1</CardContentTitle>
                 <CardContentDescription>Ethereum</CardContentDescription>
@@ -457,7 +457,7 @@ export const CompositionsShowcase: Story = {
         <Card>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>Bitcoin</CardContentTitle>
                 <CardContentDescription>BTC</CardContentDescription>
@@ -503,7 +503,7 @@ export const CompositionsShowcase: Story = {
         <Card>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>My Wallet</CardContentTitle>
                 <CardContentDescription>Ethereum</CardContentDescription>
@@ -523,7 +523,7 @@ export const CompositionsShowcase: Story = {
         <Card>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentRow>
                   <CardContentTitle>Bitcoin</CardContentTitle>
@@ -576,7 +576,7 @@ export const CompositionsShowcase: Story = {
         <Card type='info'>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>Staking</CardContentTitle>
                 <CardContentDescription>Earn rewards</CardContentDescription>
@@ -604,7 +604,7 @@ export const CompositionsShowcase: Story = {
         <Card type='info'>
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>My Wallet</CardContentTitle>
                 <CardContentDescription>Ethereum</CardContentDescription>
@@ -630,7 +630,7 @@ export const CompositionsShowcase: Story = {
         >
           <CardHeader>
             <CardLeading>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
               <CardContent>
                 <CardContentTitle>Bitcoin</CardContentTitle>
                 <CardContentDescription>BTC</CardContentDescription>

package/src/lib/Components/DotIcon/DotIcon.tsx

@@ -11,7 +11,7 @@ import type {
 
 const dotIconSizeMap: Record<DotIconSize, IconSize> = {
   16: 12,
-  20: 12,
+  20: 16,
   24: 16,
 };
 

package/src/lib/Components/DotIndicator/DotIndicator.mdx

@@ -22,11 +22,12 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 
     ## Sizes
 
-    DotIndicator comes in three sizes:
+    DotIndicator comes in four sizes:
 
     - **xs** - compact dot for tight layouts.
     - **sm** (default) - standard dot for most use cases.
-    - **md** - larger dot for prominent indicators.
+    - **md** - medium dot for prominent indicators.
+    - **lg** - large dot for maximum visibility.
 
     <Canvas of={DotIndicatorStories.SizeShowcase} />
 

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

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Settings } from '../../Symbols';
+import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
+import { IconButton } from '../IconButton/IconButton';
 import { Box } from '../Utility/Box';
 import { DotIndicator } from './DotIndicator';
 
@@ -18,7 +21,7 @@ const meta = {
   argTypes: {
     size: {
       control: 'radio',
-      options: ['xs', 'sm', 'md'],
+      options: ['xs', 'sm', 'md', 'lg'],
     },
     appearance: {
       control: 'radio',
@@ -42,6 +45,7 @@ export const SizeShowcase: Story = {
       <DotIndicator size='xs' />
       <DotIndicator size='sm' />
       <DotIndicator size='md' />
+      <DotIndicator size='lg' />
     </Box>
   ),
 };
@@ -62,6 +66,12 @@ export const WithChildren: Story = {
       <DotIndicator appearance='red'>
         <Button size='sm'>Submit</Button>
       </DotIndicator>
+      <DotIndicator appearance='red'>
+        <Avatar size='md' />
+      </DotIndicator>
+      <DotIndicator appearance='red'>
+        <IconButton accessibilityLabel='Settings' icon={Settings} />
+      </DotIndicator>
     </Box>
   ),
 };

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

@@ -97,6 +97,16 @@ describe('DotIndicator', () => {
     expect(toJSON()).toBeTruthy();
   });
 
+  it('should render in lg size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='lg' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
   it('should render with red appearance', () => {
     const { toJSON } = render(
       <TestWrapper>

package/src/lib/Components/DotIndicator/DotIndicator.tsx

@@ -65,7 +65,8 @@ const useStyles = ({
       const sizeMap = {
         xs: t.sizes.s10,
         sm: t.sizes.s12,
-        md: t.sizes.s16,
+        md: t.sizes.s14,
+        lg: t.sizes.s16,
       };
 
       const bgColorMap = {