@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

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

@@ -0,0 +1,277 @@
+"use strict";
+
+import { useState } from 'react';
+import { useTheme } from "../../../styles/index.js";
+import * as Icons from "../../Symbols/index.js";
+import { SearchInput } from "../SearchInput/SearchInput.js";
+import { Box, Text, Pressable } from "../Utility/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Symbols/Interface Icons'
+};
+export default meta;
+const sizes = [12, 16, 20, 24, 32, 40, 48, 56];
+const iconNames = Object.keys(Icons);
+const IconCard = ({
+  name,
+  size = 24,
+  color
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const [copied, setCopied] = useState(false);
+  const IconComponent = Icons[name];
+  const iconColor = color ?? theme.colors.text.base;
+  const handleClick = async () => {
+    try {
+      await navigator.clipboard.writeText(name);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: handleClick,
+    lx: {
+      position: 'relative',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 's8',
+      borderRadius: 'sm',
+      padding: 's16',
+      width: 's96'
+    },
+    style: ({
+      pressed
+    }) => ({
+      backgroundColor: pressed ? theme.colors.bg.mutedPressed : 'transparent'
+    }),
+    children: [/*#__PURE__*/_jsx(IconComponent, {
+      size: size,
+      style: {
+        color: iconColor
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      typography: "body4",
+      lx: {
+        color: 'muted'
+      },
+      children: name
+    }), copied && /*#__PURE__*/_jsx(Box, {
+      lx: {
+        position: 'absolute',
+        top: 's0',
+        left: 's0',
+        right: 's0',
+        bottom: 's0',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'sm',
+        backgroundColor: 'muted'
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'onAccent'
+        },
+        children: "Copied!"
+      })
+    })]
+  }, name);
+};
+export const Icon = {
+  args: {
+    size: 24,
+    name: 'Home'
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: sizes,
+      description: 'The size of the icon in pixels'
+    },
+    name: {
+      control: 'select',
+      options: iconNames,
+      description: 'The name of the icon to display'
+    },
+    color: {
+      control: 'color',
+      description: 'The color of the icon'
+    },
+    disabled: {
+      control: 'boolean'
+    }
+  },
+  render: args => {
+    const {
+      theme
+    } = useTheme();
+    const IconComponent = Icons[args.name];
+    const iconColor = args.color ?? theme.colors.text.base;
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        padding: 's8'
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 's4'
+        },
+        children: [/*#__PURE__*/_jsx(IconComponent, {
+          size: args.size,
+          style: {
+            color: iconColor
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          lx: {
+            color: 'base'
+          },
+          children: args.name
+        })]
+      })
+    });
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <Information size={24} style={{ color: theme.colors.text.base }} />
+      `
+      }
+    }
+  }
+};
+export const IconSizes = {
+  render: () => {
+    const {
+      theme
+    } = useTheme();
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        flexDirection: 'column',
+        gap: 's16'
+      },
+      children: sizes.map(size => /*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/_jsxs(Text, {
+          typography: "heading4",
+          lx: {
+            marginBottom: 's16'
+          },
+          children: ["Size ", size, "px"]
+        }), /*#__PURE__*/_jsx(Box, {
+          lx: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 's8',
+            borderRadius: 'sm',
+            padding: 's8'
+          },
+          style: {
+            borderWidth: 1,
+            borderColor: theme.colors.border.mutedSubtle
+          },
+          children: ['Home', 'Settings', 'Heart', 'Star', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].map(iconName => /*#__PURE__*/_jsx(IconCard, {
+            name: iconName,
+            size: size
+          }, iconName))
+        })]
+      }, size))
+    });
+  }
+};
+export const Gallery = {
+  parameters: {
+    layout: 'fullscreen'
+  },
+  render: () => {
+    const {
+      theme
+    } = useTheme();
+    const [searchTerm, setSearchTerm] = useState('');
+
+    // Filter icons based on search term
+    const filteredIcons = Object.entries(Icons).filter(([name]) => name.toLowerCase().includes(searchTerm.toLowerCase()));
+    return /*#__PURE__*/_jsxs(Box, {
+      lx: {
+        width: 'full',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+        padding: 's8'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        lx: {
+          marginBottom: 's32'
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          lx: {
+            marginBottom: 's8',
+            maxWidth: 's320'
+          },
+          children: /*#__PURE__*/_jsx(SearchInput, {
+            placeholder: "Search icons...",
+            value: searchTerm,
+            onChangeText: setSearchTerm
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          lx: {
+            marginBottom: 's4'
+          },
+          children: /*#__PURE__*/_jsxs(Text, {
+            typography: "body3",
+            lx: {
+              marginLeft: 's8',
+              color: 'muted'
+            },
+            children: [filteredIcons.length, " of ", Object.keys(Icons).length, " icons", searchTerm && ` matching "${searchTerm}"`]
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        lx: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 's8'
+        },
+        children: filteredIcons.map(([name]) => /*#__PURE__*/_jsx(IconCard, {
+          name: name
+        }, name))
+      }), filteredIcons.length === 0 && searchTerm && /*#__PURE__*/_jsxs(Box, {
+        lx: {
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingVertical: 's16'
+        },
+        children: [/*#__PURE__*/_jsxs(Text, {
+          typography: "body2",
+          lx: {
+            color: 'muted'
+          },
+          children: ["No icons found matching \"", searchTerm, "\""]
+        }), /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => setSearchTerm(''),
+          style: ({
+            pressed
+          }) => ({
+            marginTop: 16,
+            color: pressed ? theme.colors.text.interactivePressed : theme.colors.text.interactive
+          }),
+          children: /*#__PURE__*/_jsx(Text, {
+            typography: "body2",
+            lx: {
+              color: 'interactive'
+            },
+            children: "Clear search"
+          })
+        })]
+      })]
+    });
+  }
+};
+//# sourceMappingURL=Icon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useTheme","Icons","SearchInput","Box","Text","Pressable","jsx","_jsx","jsxs","_jsxs","meta","title","sizes","iconNames","Object","keys","IconCard","name","size","color","theme","copied","setCopied","IconComponent","iconColor","colors","text","base","handleClick","navigator","clipboard","writeText","setTimeout","err","console","error","onPress","lx","position","flexDirection","alignItems","gap","borderRadius","padding","width","style","pressed","backgroundColor","bg","mutedPressed","children","typography","top","left","right","bottom","justifyContent","Icon","args","argTypes","control","options","description","disabled","render","parameters","docs","source","code","IconSizes","map","marginBottom","flexWrap","borderWidth","borderColor","border","mutedSubtle","iconName","Gallery","layout","searchTerm","setSearchTerm","filteredIcons","entries","filter","toLowerCase","includes","maxWidth","placeholder","value","onChangeText","marginLeft","length","paddingVertical","marginTop","interactivePressed","interactive"],"sourceRoot":"../../../../../src","sources":["lib/Components/Icon/Icon.stories.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,85 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { Icon } from "./Icon.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  icon: iconTokens
+} = ledgerLiveThemes.dark;
+const renderWithProvider = component => {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    themes: ledgerLiveThemes,
+    colorScheme: "dark",
+    locale: "en",
+    children: component
+  }));
+};
+describe('Icon', () => {
+  it('should render children with default props', () => {
+    renderWithProvider(/*#__PURE__*/_jsx(Icon, {
+      viewBox: "0 0 24 24",
+      testID: "icon",
+      children: /*#__PURE__*/_jsx(Path, {
+        d: "M12 2L2 7l10 5 10-5-10-5z",
+        testID: "path"
+      })
+    }));
+    const svg = screen.getByTestId('icon');
+    expect(screen.getByTestId('path')).toBeTruthy();
+    expect(svg.props.fill).toBe('none');
+    expect(svg.props.width).toBe(iconTokens.width.s24);
+    expect(svg.props.height).toBe(iconTokens.height.s24);
+    expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth.s24);
+  });
+  it.each([12, 16, 20, 24, 32, 40, 48, 56])('should apply correct dimensions for size %i', size => {
+    renderWithProvider(/*#__PURE__*/_jsx(Icon, {
+      viewBox: "0 0 24 24",
+      size: size,
+      testID: "icon",
+      children: /*#__PURE__*/_jsx(Path, {
+        d: "M12 2L2 7l10 5 10-5-10-5z"
+      })
+    }));
+    const sizeKey = `s${size}`;
+    const svg = screen.getByTestId('icon');
+    expect(svg.props.width).toBe(iconTokens.width[sizeKey]);
+    expect(svg.props.height).toBe(iconTokens.height[sizeKey]);
+    expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth[sizeKey]);
+  });
+  it('should apply color from style prop', () => {
+    renderWithProvider(/*#__PURE__*/_jsx(Icon, {
+      viewBox: "0 0 24 24",
+      testID: "icon",
+      color: "error",
+      children: /*#__PURE__*/_jsx(Path, {
+        d: "M12 2L2 7l10 5 10-5-10-5z"
+      })
+    }));
+    expect(screen.getByTestId('icon').props.color).toBe('#fca6a7');
+  });
+  it('should forward ref and spread additional props', () => {
+    const ref = {
+      current: null
+    };
+    renderWithProvider(/*#__PURE__*/_jsx(Icon, {
+      viewBox: "0 0 24 24",
+      ref: ref,
+      testID: "icon",
+      accessibilityLabel: "Test icon",
+      fill: "currentColor",
+      children: /*#__PURE__*/_jsx(Path, {
+        d: "M12 2L2 7l10 5 10-5-10-5z"
+      })
+    }));
+    const svg = screen.getByTestId('icon');
+    expect(ref.current).not.toBeNull();
+    expect(svg.props.accessibilityLabel).toBe('Test icon');
+    expect(svg.props.fill).toBe('currentColor');
+  });
+});
+//# sourceMappingURL=Icon.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","screen","React","Path","ThemeProvider","Icon","jsx","_jsx","icon","iconTokens","dark","renderWithProvider","component","themes","colorScheme","locale","children","viewBox","testID","d","svg","getByTestId","toBeTruthy","props","fill","toBe","width","s24","height","strokeWidth","borderWidth","each","size","sizeKey","color","ref","current","accessibilityLabel","not","toBeNull"],"sourceRoot":"../../../../../src","sources":["lib/Components/Icon/Icon.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Icon/createIcon.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { toPascalCase, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import React from 'react';
+import { useTheme } from "../../../styles/index.js";
+import { Icon } from "./Icon.js";
+/**
+ * Create an Icon component for React Native
+ * @param {string} iconName - The name of the icon
+ * @param {React.ReactElement} iconJsx - The JSX content of the icon (SVG paths/elements)
+ * @returns {FunctionComponent} Icon component
+ */
+const createIcon = (iconName, iconJsx) => {
+  const Component = ({
+    disabled,
+    ...props
+  }) => {
+    const {
+      theme
+    } = useTheme();
+    const mergedDisabled = useDisabledContext({
+      consumerName: iconName,
+      mergeWith: {
+        disabled
+      }
+    });
+    return /*#__PURE__*/React.createElement(Icon, {
+      viewBox: iconJsx.props.viewBox,
+      ...props,
+      style: [mergedDisabled ? {
+        color: theme.colors.text.disabled
+      } : {}, props.style],
+      children: iconJsx.props.children
+    });
+  };
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+export default createIcon;
+//# sourceMappingURL=createIcon.js.map

package/dist/module/lib/Components/Icon/createIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toPascalCase","useDisabledContext","React","useTheme","Icon","createIcon","iconName","iconJsx","Component","disabled","props","theme","mergedDisabled","consumerName","mergeWith","createElement","viewBox","style","color","colors","text","children","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/Icon/createIcon.ts"],"mappings":";;AAAA,SAASA,YAAY,EAAEC,kBAAkB,QAAQ,8BAA8B;AAC/E,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,0BAAiB;AAC1C,SAASC,IAAI,QAAQ,WAAQ;AAG7B;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGA,CACjBC,QAAgB,EAChBC,OAAqC,KAClC;EACH,MAAMC,SAAS,GAAGA,CAAC;IAAEC,QAAQ;IAAE,GAAGC;EAAmC,CAAC,KAAK;IACzE,MAAM;MAAEC;IAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;IAC5B,MAAMS,cAAc,GAAGX,kBAAkB,CAAC;MACxCY,YAAY,EAAEP,QAAQ;MACtBQ,SAAS,EAAE;QAAEL;MAAS;IACxB,CAAC,CAAC;IAEF,oBAAOP,KAAK,CAACa,aAAa,CAACX,IAAI,EAAE;MAC/BY,OAAO,EAAET,OAAO,CAACG,KAAK,CAACM,OAAO;MAC9B,GAAGN,KAAK;MACRO,KAAK,EAAE,CACLL,cAAc,GAAG;QAAEM,KAAK,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAACX;MAAS,CAAC,GAAG,CAAC,CAAC,EAC3DC,KAAK,CAACO,KAAK,CACZ;MACDI,QAAQ,EAAEd,OAAO,CAACG,KAAK,CAACW;IAC1B,CAAC,CAAC;EACJ,CAAC;EAEDb,SAAS,CAACc,WAAW,GAAGtB,YAAY,CAACM,QAAQ,CAAC;EAE9C,OAAOE,SAAS;AAClB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+import { BaseButton } from "../Button/BaseButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IconButton = props => {
+  return /*#__PURE__*/_jsx(BaseButton, {
+    ...props
+  });
+};
+IconButton.displayName = 'IconButton';
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BaseButton","jsx","_jsx","IconButton","props","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/IconButton/IconButton.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGlD,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EACpD,oBAAOF,IAAA,CAACF,UAAU;IAAA,GAAKI;EAAK,CAAG,CAAC;AAClC,CAAC;AAEDD,UAAU,CAACE,WAAW,GAAG,YAAY","ignoreList":[]}

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

@@ -0,0 +1,205 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as IconButtonStories from './IconButton.stories';
+import { IconButton } from './IconButton';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
+
+<Meta title='Action/IconButton' of={IconButtonStories} />
+
+# 🔘 IconButton
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+**IconButton** is a specialized button component that displays only an icon. It's ideal for actions that can be represented by a clear, universally understood icon, such as `close`, `settings`, or `favorite`.
+
+## Properties
+
+### Overview
+
+<Canvas of={IconButtonStories.Base} />
+<Controls of={IconButtonStories.Base} />
+
+### Appearance
+
+IconButton supports the same appearances as the standard Button:
+
+- accent
+- base (default)
+- gray
+- transparent
+- no-background
+- red
+
+<Canvas of={IconButtonStories.AppearanceShowcase} />
+
+### Size
+
+IconButtons come in four different sizes:
+
+
+- `xs` (**32px**)
+- `sm` (**40px**)
+- `md` (**48px**, default)
+- `lg` (**56px**)
+
+
+<Canvas of={IconButtonStories.SizesShowcase} />
+
+### States
+
+<Canvas of={IconButtonStories.StatesShowcase} />
+
+  </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 { IconButton } from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <IconButton
+      accessibilityLabel='Settings'
+      icon={Settings}
+      size='md'
+      appearance='base'
+    />
+  );
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop for token-based styling:
+
+```tsx
+<IconButton accessibilityLabel='Close' icon={Close} lx={{ marginTop: 's4' }} />
+```
+
+### Full Width
+
+Use the `isFull` prop to make the button take the full width of its container:
+
+```tsx
+<IconButton
+  accessibilityLabel='Close'
+  icon={Close}
+  size='md'
+  appearance='base'
+  isFull
+  onPress={() => {}}
+/>
+```
+
+### Loading State
+
+Use the `loading` prop to show a spinner and disable interaction:
+
+```tsx
+<IconButton
+  accessibilityLabel='Close'
+  icon={Close}
+  size='md'
+  appearance='base'
+  loading={isLoading}
+  disabled={isLoading}
+  onPress={() => {}}
+/>
+```
+
+### Pressable Integration
+
+The Button component is built on React Native's `Pressable` and accepts all its props:
+
+```tsx
+<IconButton
+  accessibilityLabel='Close'
+  icon={Close}
+  size='md'
+  appearance='base'
+  onPress={() => console.log('Pressed!')}
+  onPressIn={() => console.log('Press started')}
+  onPressOut={() => console.log('Press ended')}
+  disabled={false}
+/>
+```
+
+## Do's and Don'ts
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use icon prop for consistent sizing'
+      description='Pass icon as a component reference and let IconButton handle sizing automatically'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<IconButton accessibilityLabel='Settings' icon={Settings} size='md' />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't modify icon size directly"
+      description='Avoid passing icon size prop or overriding dimensions through lx'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<IconButton accessibilityLabel='Settings' icon={Settings} lx={{ width: 's32', height: 's32' }} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Always provide accessibilityLabel'
+      description='Icon-only buttons require descriptive accessibility labels for screen readers'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<IconButton accessibilityLabel='Open settings menu' icon={Settings} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't omit accessibilityLabel"
+      description='Icon buttons without labels are not accessible to screen reader users'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<IconButton icon={Settings} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+  </Tab>
+</CustomTabs>