@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

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

@@ -3,8 +3,6 @@ import * as BannerStories from './Banner.stories';
 import { Banner } from './Banner';
 import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Banner' of={BannerStories} />
 
@@ -349,90 +347,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 />
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Banner component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's16' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='Use the lx prop for margins, positioning, and other layout adjustments'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='System Notice'
-  description='Maintenance scheduled for tonight'
-  lx={{ marginTop: 's16' }}
-  appearance='warning'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use lx for appearance changes"
-      description='Avoid using lx to modify colors, padding, or other core appearance styles'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='System Notice'
-  description='Maintenance scheduled for tonight'
-  lx={{ backgroundColor: 'accent', padding: 's24' }}
-  appearance='warning'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Pass complete Button components with proper styling'
-      description='Always provide fully styled Button components with appearance and size props for actions'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='Confirm Action'
-  description='This action cannot be undone'
-  primaryAction={
-    <Button appearance='transparent' size='sm' onPress={handleConfirm}>
-      Confirm
-    </Button>
-  }
-  appearance='warning'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't pass incomplete or unstyled buttons"
-      description='Avoid passing Button components without proper appearance and size props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='Broken Action'
-  description="This won't work properly"
-  primaryAction={<Button onPress={handleSubmit}>Submit</Button>}
-  appearance='warning'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/dist/module/lib/Components/BottomSheet/BottomSheet.figma.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Button } from "../Button/index.js";
+import { BottomSheet } from "./BottomSheet.js";
+import { BottomSheetHeader } from "./BottomSheetHeader.js";
+import { BottomSheetView } from "./Scrollables.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(BottomSheet, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=118-1734', {
+  imports: ["import { BottomSheet, BottomSheetHeader, BottomSheetView, useBottomSheetRef } from '@ledgerhq/lumen-ui-rnative'", "import { Button } from '@ledgerhq/lumen-ui-rnative'"],
+  props: {
+    header: figma.nestedProps('.bottom-sheet-header', {
+      density: figma.enum('density', {
+        compact: 'compact',
+        expanded: 'expanded'
+      }),
+      title: figma.boolean('show-title', {
+        true: figma.string('title'),
+        false: undefined
+      }),
+      description: figma.boolean('show-description', {
+        true: figma.string('description'),
+        false: undefined
+      }),
+      onBack: figma.boolean('show-back-icon', {
+        true: () => {},
+        false: undefined
+      })
+    })
+  },
+  example: props => {
+    return /*#__PURE__*/_jsxs(BottomSheet, {
+      onBack: props.header.onBack,
+      children: [/*#__PURE__*/_jsx(BottomSheetHeader, {
+        density: props.header.density,
+        title: props.header.title,
+        description: props.header.description
+      }), /*#__PURE__*/_jsx(BottomSheetView, {
+        children: /*#__PURE__*/_jsx(Button, {
+          appearance: "base",
+          isFull: true,
+          onPress: () => {},
+          children: "Confirm"
+        })
+      })]
+    });
+  }
+});
+//# sourceMappingURL=BottomSheet.figma.js.map

package/dist/module/lib/Components/BottomSheet/BottomSheet.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Button","BottomSheet","BottomSheetHeader","BottomSheetView","jsx","_jsx","jsxs","_jsxs","connect","imports","props","header","nestedProps","density","enum","compact","expanded","title","boolean","true","string","false","undefined","description","onBack","example","children","appearance","isFull","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/BottomSheet/BottomSheet.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,eAAe,QAAQ,kBAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhDR,KAAK,CAACS,OAAO,CACXP,WAAW,EACX,sEAAsE,EACtE;EACEQ,OAAO,EAAE,CACP,iHAAiH,EACjH,qDAAqD,CACtD;EACDC,KAAK,EAAE;IACLC,MAAM,EAAEZ,KAAK,CAACa,WAAW,CAAC,sBAAsB,EAAE;MAChDC,OAAO,EAAEd,KAAK,CAACe,IAAI,CAAC,SAAS,EAAE;QAC7BC,OAAO,EAAE,SAAS;QAClBC,QAAQ,EAAE;MACZ,CAAC,CAAC;MACFC,KAAK,EAAElB,KAAK,CAACmB,OAAO,CAAC,YAAY,EAAE;QACjCC,IAAI,EAAEpB,KAAK,CAACqB,MAAM,CAAC,OAAO,CAAC;QAC3BC,KAAK,EAAEC;MACT,CAAC,CAAC;MACFC,WAAW,EAAExB,KAAK,CAACmB,OAAO,CAAC,kBAAkB,EAAE;QAC7CC,IAAI,EAAEpB,KAAK,CAACqB,MAAM,CAAC,aAAa,CAAC;QACjCC,KAAK,EAAEC;MACT,CAAC,CAAC;MACFE,MAAM,EAAEzB,KAAK,CAACmB,OAAO,CAAC,gBAAgB,EAAE;QACtCC,IAAI,EAAEA,CAAA,KAAM,CAAC,CAAC;QACdE,KAAK,EAAEC;MACT,CAAC;IACH,CAAC;EACH,CAAC;EACDG,OAAO,EAAGf,KAAK,IAAK;IAClB,oBACEH,KAAA,CAACN,WAAW;MAACuB,MAAM,EAAEd,KAAK,CAACC,MAAM,CAACa,MAAO;MAAAE,QAAA,gBACvCrB,IAAA,CAACH,iBAAiB;QAChBW,OAAO,EAAEH,KAAK,CAACC,MAAM,CAACE,OAAQ;QAC9BI,KAAK,EAAEP,KAAK,CAACC,MAAM,CAACM,KAAM;QAC1BM,WAAW,EAAEb,KAAK,CAACC,MAAM,CAACY;MAAY,CACvC,CAAC,eACFlB,IAAA,CAACF,eAAe;QAAAuB,QAAA,eACdrB,IAAA,CAACL,MAAM;UAAC2B,UAAU,EAAC,MAAM;UAACC,MAAM;UAACC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAE;UAAAH,QAAA,EAAC;QAEpD,CAAQ;MAAC,CACM,CAAC;IAAA,CACP,CAAC;EAElB;AACF,CACF,CAAC","ignoreList":[]}

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

@@ -2,8 +2,6 @@ import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BottomSheetStories from './BottomSheet.stories';
 import { BottomSheet } from './BottomSheet';
 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='Core/BottomSheet' of={BottomSheetStories} />
@@ -275,123 +273,6 @@ import {
 - **SectionList**: Not compatible with react-native-web. See [Gorhom documentation](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetsectionlist).
 - **FlashList**: Requires `@shopify/flash-list` package. See [Gorhom docs](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflashlist)
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use specialized scrollable components'
-      description='Always use BottomSheet-specific components for scrollable content'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet ref={bottomSheetRef} snapPoints='full'>
-  <BottomSheetScrollView>
-    <BottomSheetHeader title='Title' density='compact' />
-    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
-  </BottomSheetScrollView>
-</BottomSheet>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use regular React Native components"
-      description='Avoid using regular ScrollView, FlatList, etc. - they will not work properly'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet ref={bottomSheetRef} snapPoints='full'>
-  <ScrollView>
-    <BottomSheetHeader title='Title' density='compact' />
-    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
-  </ScrollView>
-</BottomSheet>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use useBottomSheetRef with optional chaining'
-      description='Use the provided hook and always use optional chaining to call methods safely'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const bottomSheetRef = useBottomSheetRef();
-
-bottomSheetRef.current?.present();
-bottomSheetRef.current?.dismiss();
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't call methods without optional chaining"
-      description='Calling methods without optional chaining may crash if ref is not yet mounted'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const bottomSheetRef = useBottomSheetRef();
-
-bottomSheetRef.current.present();
-bottomSheetRef.current.dismiss();
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Disable both props for non-dismissible sheets'
-      description='For critical flows, disable both close button and pan-down gesture'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet
-  ref={bottomSheetRef}
-  snapPoints='full'
-  hideCloseButton
-  enablePanDownToClose={false}
-  backdropPressBehavior='none'
->
-  <BottomSheetView>
-    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
-  </BottomSheetView>
-</BottomSheet>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't disable only one dismissal method"
-      description='Partially blocking dismissal creates confusing UX - disable all methods or none'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet
-  ref={bottomSheetRef}
-  snapPoints='full'
-  hideCloseButton
->
-  <BottomSheetView>
-    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
-  </BottomSheetView>
-</BottomSheet>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ## Learn More
 

package/dist/module/lib/Components/Button/Button.figma.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Placeholder } from "../../Symbols/index.js";
+import { Button } from "./Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Button, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9%3A28', {
+  imports: ["import { Button } from '@ledgerhq/lumen-ui-rnative'", "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'"],
+  props: {
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    loading: figma.enum('state', {
+      loading: true
+    }),
+    appearance: figma.enum('appearance', {
+      base: 'base',
+      gray: 'gray',
+      accent: 'accent',
+      transparent: 'transparent',
+      'no-background': 'no-background',
+      red: 'red'
+    }),
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg'
+    }),
+    children: figma.string('label'),
+    icon: figma.enum('content', {
+      'icon-text': Placeholder,
+      text: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Button, {
+    disabled: props.disabled,
+    loading: props.loading,
+    appearance: props.appearance,
+    size: props.size,
+    icon: props.icon,
+    onPress: () => {},
+    children: props.children
+  })
+});
+//# sourceMappingURL=Button.figma.js.map

package/dist/module/lib/Components/Button/Button.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Placeholder","Button","jsx","_jsx","connect","imports","props","disabled","enum","loading","appearance","base","gray","accent","transparent","red","size","sm","md","lg","children","string","icon","text","undefined","example","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/Button/Button.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,wBAAe;AAC3C,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGlCJ,KAAK,CAACK,OAAO,CACXH,MAAM,EACN,oEAAoE,EACpE;EACEI,OAAO,EAAE,CACP,qDAAqD,EACrD,kEAAkE,CACnE;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAER,KAAK,CAACS,IAAI,CAAC,OAAO,EAAE;MAC5BD,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFE,OAAO,EAAEV,KAAK,CAACS,IAAI,CAAC,OAAO,EAAE;MAC3BC,OAAO,EAAE;IACX,CAAC,CAAC;IACFC,UAAU,EAAEX,KAAK,CAACS,IAAI,CAAC,YAAY,EAAE;MACnCG,IAAI,EAAE,MAAM;MACZC,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBC,WAAW,EAAE,aAAa;MAC1B,eAAe,EAAE,eAAe;MAChCC,GAAG,EAAE;IACP,CAAC,CAAC;IACFC,IAAI,EAAEjB,KAAK,CAACS,IAAI,CAAC,MAAM,EAAE;MACvBS,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,QAAQ,EAAErB,KAAK,CAACsB,MAAM,CAAC,OAAO,CAAC;IAC/BC,IAAI,EAAEvB,KAAK,CAACS,IAAI,CAAC,SAAS,EAAE;MAC1B,WAAW,EAAER,WAAW;MACxBuB,IAAI,EAAEC;IACR,CAAC;EACH,CAAC;EACDC,OAAO,EACLnB,KAEC,iBAEDH,IAAA,CAACF,MAAM;IACLM,QAAQ,EAAED,KAAK,CAACC,QAAS;IACzBE,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,UAAU,EAAEJ,KAAK,CAACI,UAAW;IAC7BM,IAAI,EAAEV,KAAK,CAACU,IAAK;IACjBM,IAAI,EAAEhB,KAAK,CAACgB,IAAK;IACjBI,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAE;IAAAN,QAAA,EAEjBd,KAAK,CAACc;EAAQ,CACT;AAEZ,CACF,CAAC","ignoreList":[]}

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

@@ -1,17 +1,14 @@
-import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
 import { Button } from './Button';
-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';
+import { CustomTabs, Tab, SetupNote } from '../../../../.storybook/components';
 
 <Meta title='Core/Button' of={ButtonStories} />
 
 # Button
 
 <CustomTabs>
-  <Tab label="Overview ">
+  <Tab label="Overview">
 
 ## Introduction
 
@@ -23,9 +20,11 @@ Buttons are key interactive elements that trigger actions and guide users throug
 
 <Canvas of={ButtonStories.IconText} />
 
-- **Label**: describes the action that occurs when the button is tapped
+- **Label(required)**: must be present and describe the action that occurs when the button is tapped
 - **Icon (optional)**: visually communicate the button's action, and helps draw attention
 
+> Note: For **icon-only buttons**, use the [IconButton](https://ldls-react-native.vercel.app/?path=/docs/rnative-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
+
 ## Properties
 
 ### Overview
@@ -53,8 +52,6 @@ Buttons' contents can be of two types:
 - text (default)
 - icon-text
 
-> Note: For `icon-only` buttons, use the [IconButton](https://ldls-react-native.vercel.app/?path=/docs/rnative-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
-
 <Canvas of={ButtonStories.ContentTypesShowcase} />
 
 ### Size
@@ -69,11 +66,12 @@ Buttons come in four different sizes:
 
 <Canvas of={ButtonStories.SizesShowcase} />
 
-
 ### States
 
 <Canvas of={ButtonStories.StatesShowcase} />
 
+> **Important Note:** The `loading` and `disabled` states are **not coupled**. When `disabled` is set, all event handlers are deactivated. When only `loading` is set (without `disabled`), the button remains pressable. Combine both props if you need to prevent interactions during loading.
+
 ## Responsive Layout
 
 Buttons dynamically adapt their width to the size of their content, while keeping the default paddings:
@@ -86,84 +84,23 @@ When a label is too long, it's truncated to 2 lines, with a maximum width of the
 
 > The Button must dynamically resize to its container constraints.
 
-## Accessibility
-
-To be implemented:
-
-- Color contrast
-- Text zoom
-- Touch target sizing (minimum 44px)
-- Screen reader compatibility
-- Semantic labeling
-
-### Interactive States
+## Interactive States
 
 <Canvas of={ButtonStories.InteractiveLoadingStates} />
 
-</Tab> <Tab label="Implementation ">
-
-## Setup
+</Tab> <Tab label="Implementation">
 
-Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+<SetupNote />
 
 ### Basic Usage
 
-```tsx
-import { Button } from '@ledgerhq/lumen-ui-rnative';
-
-function MyComponent() {
-  return (
-    <Button size='md' appearance='base' onPress={() => console.log('Pressed!')}>
-      Click me
-    </Button>
-  );
-}
-```
-
-### Custom Styling
-
-While the component comes with predefined styles, you can extend them using the `lx` prop for token-based styling:
-
-```tsx
-<Button
-  size='md'
-  appearance='base'
-  lx={{ marginTop: 's4' }} // Custom margin top using design tokens
-  onPress={() => {}}
->
-  Custom Button
-</Button>
-```
-
-You can also use the `style` prop for escape-hatch styling when needed:
-
-```tsx
-<Button
-  size='md'
-  appearance='base'
-  style={{ marginTop: 16 }} // Raw style values
-  onPress={() => {}}
->
-  Custom Button
-</Button>
-```
+<Source of={ButtonStories.Base} />
 
 ### With Icons
 
-The Button component supports icons with automatic size adjustment based on the button size:
+The Button supports icons with automatic size adjustment based on the button size.
 
-```tsx
-import { Button } from '@ledgerhq/lumen-ui-rnative';
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-function MyComponent() {
-  return (
-    <Button size='md' appearance='base' icon={ArrowRight} onPress={() => {}}>
-      Continue
-    </Button>
-  );
-}
-```
+<Source of={ButtonStories.IconText} />
 
 ### Full Width
 
@@ -175,173 +112,37 @@ Use the `isFull` prop to make the button take the full width of its container:
 </Button>
 ```
 
-### Loading State
+### States
+
+Use the `loading` and `disabled` props to reflect state. `loading` shows a spinner; combine it with `disabled` to block interaction while loading.
+
+<Source of={ButtonStories.StatesShowcase} />
 
-Use the `loading` prop to show a spinner and disable interaction:
+### Custom Styling
+
+Extend layout with the token-based `lx` prop, or the `style` prop as an escape hatch:
 
 ```tsx
-<Button
-  size='md'
-  appearance='base'
-  loading={isLoading}
-  disabled={isLoading}
-  onPress={() => {}}
->
-  {isLoading ? 'Loading...' : 'Submit'}
+<Button size='md' appearance='base' lx={{ marginTop: 's4' }} onPress={() => {}}>
+  Custom Button
 </Button>
 ```
 
 ### Pressable Integration
 
-The Button component is built on React Native's `Pressable` and accepts all its props:
+The Button is built on React Native's `Pressable` and accepts all its props:
 
 ```tsx
 <Button
-  size='md'
   appearance='base'
   onPress={() => console.log('Pressed!')}
   onPressIn={() => console.log('Press started')}
   onPressOut={() => console.log('Press ended')}
-  disabled={false}
 >
   Interactive Button
 </Button>
 ```
 
-## Do's and Don'ts
-
-The following guidelines are based on our [Button Component API Design ADR](https://ledgerhq.atlassian.net/wiki/spaces/DLS/pages/6003949581/ADR-001+Button+Component+API+Design). These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-  <DoBlockItem
-    title='Use icon prop'
-    description='Pass icon as a component reference for proper sizing and alignment'
-  >
-
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button icon={Plus} onPress={() => {}}>
-  Add Item
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='Avoid placing icons inside children as this breaks automatic sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button onPress={() => {}}>
-  <Plus /> Add Item
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Let Button handle icon sizing'
-      description='Icon size adjusts automatically based on button size'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button icon={Settings} size='sm' onPress={() => {}}>
-  Settings
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't modify icon size directly"
-      description='Avoid overriding icon dimensions in children'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Button size='sm' onPress={() => {}}>
-  <Settings size={24} /> Settings
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use isFull for width'
-      description='Use the isFull prop for full-width buttons'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button isFull onPress={() => {}}>
-  Full Width
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use style for full width"
-      description='Avoid using style to control button width'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button style={{ width: '100%' }} onPress={() => {}}>
-  Full Width
-</Button>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide proper onPress handlers'
-      description='Always provide an onPress handler for interactive buttons'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button onPress={() => navigation.navigate('Details')}>
-  View Details
-</Button>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit onPress"
-      description='Avoid creating buttons without onPress handlers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Button>
-  Clickable Looking Button
-</Button>
-```
-</DontBlockItem>
-</DoVsDontRow>
-<CommonRulesDoAndDont />
-</Box>
-
 ## Platform Considerations
 
 ### iOS Specific