@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

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

@@ -0,0 +1,143 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import { ChevronRight, Wallet } from "../../Symbols/index.js";
+import { Button } from "../Button/index.js";
+import { Spot } from "../Spot/index.js";
+import { Tag } from "../Tag/index.js";
+import { Card, CardContent, CardContentDescription, CardContentTitle, CardHeader, CardLeading, CardTrailing } from "./Card.js";
+
+// —— Card root ——
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Card, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11025-33000', {
+  imports: ["import { Card, CardFooter } from '@ledgerhq/lumen-ui-rnative'"],
+  props: {
+    outlined: figma.boolean('is-selected', {
+      true: true,
+      false: undefined
+    }),
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    header: figma.children('.card-header'),
+    footer: figma.boolean('show-footer', {
+      true: figma.children('.card-footer'),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(Card, {
+    outlined: props.outlined,
+    disabled: props.disabled,
+    children: [props.header, props.footer]
+  })
+});
+
+// —— CardHeader ——
+figma.connect(CardHeader, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10541-743', {
+  imports: ["import { CardHeader, CardLeading, CardContent, CardContentTitle, CardContentDescription, CardTrailing } from '@ledgerhq/lumen-ui-rnative'", "import { Spot, Button, Tag } from '@ledgerhq/lumen-ui-rnative'", "import { CryptoIcon } from '@ledgerhq/crypto-icons'"],
+  props: {
+    title: figma.string('title'),
+    description: figma.string('description'),
+    leading: figma.enum('leading', {
+      spot: /*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Wallet
+      }),
+      coin: /*#__PURE__*/_jsx(CryptoIcon, {
+        ledgerId: "bitcoin",
+        ticker: "BTC",
+        size: 48
+      }),
+      provider: /*#__PURE__*/_jsx(CryptoIcon, {
+        ledgerId: "ethereum",
+        ticker: "ETH",
+        size: 48,
+        shape: "square"
+      }),
+      'interface-icon': /*#__PURE__*/_jsx(Wallet, {
+        size: 20
+      }),
+      none: undefined
+    }),
+    trailing: figma.enum('trailing', {
+      value: figma.boolean('show-subvalue', {
+        true: /*#__PURE__*/_jsxs(CardContent, {
+          children: [/*#__PURE__*/_jsx(CardContentTitle, {
+            children: "$43,210.00"
+          }), /*#__PURE__*/_jsx(CardContentDescription, {
+            children: "0.5 BTC"
+          })]
+        }),
+        false: /*#__PURE__*/_jsx(CardContent, {
+          children: /*#__PURE__*/_jsx(CardContentTitle, {
+            children: "$43,210.00"
+          })
+        })
+      }),
+      button: /*#__PURE__*/_jsx(Button, {
+        appearance: "base",
+        size: "sm",
+        onPress: () => {},
+        children: "Action"
+      }),
+      tag: /*#__PURE__*/_jsx(Tag, {
+        label: "Label",
+        appearance: "gray"
+      }),
+      'interface-icon': /*#__PURE__*/_jsx(Wallet, {
+        size: 20
+      }),
+      none: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(CardHeader, {
+    children: [/*#__PURE__*/_jsxs(CardLeading, {
+      children: [props.leading, /*#__PURE__*/_jsxs(CardContent, {
+        children: [/*#__PURE__*/_jsx(CardContentTitle, {
+          children: props.title
+        }), /*#__PURE__*/_jsx(CardContentDescription, {
+          children: props.description
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(CardTrailing, {
+      children: props.trailing
+    })]
+  })
+});
+
+// —— Card (expandable/info variant) ——
+figma.connect('https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=14481-33979', {
+  imports: ["import { Card, CardHeader, CardLeading, CardContent, CardContentTitle, CardContentDescription, CardTrailing } from '@ledgerhq/lumen-ui-rnative'", "import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'"],
+  props: {
+    title: figma.string('title'),
+    description: figma.string('value'),
+    type: figma.enum('type', {
+      display: 'info',
+      interactive: 'interactive'
+    }),
+    disabled: figma.enum('state', {
+      disabled: true
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Card, {
+    type: props.type,
+    disabled: props.disabled,
+    children: /*#__PURE__*/_jsxs(CardHeader, {
+      children: [/*#__PURE__*/_jsx(CardLeading, {
+        children: /*#__PURE__*/_jsxs(CardContent, {
+          children: [/*#__PURE__*/_jsx(CardContentDescription, {
+            children: props.description
+          }), /*#__PURE__*/_jsx(CardContentTitle, {
+            children: props.title
+          })]
+        })
+      }), /*#__PURE__*/_jsx(CardTrailing, {
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 20
+        })
+      })]
+    })
+  })
+});
+//# sourceMappingURL=Card.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","CryptoIcon","ChevronRight","Wallet","Button","Spot","Tag","Card","CardContent","CardContentDescription","CardContentTitle","CardHeader","CardLeading","CardTrailing","jsxs","_jsxs","jsx","_jsx","connect","imports","props","outlined","boolean","true","false","undefined","disabled","enum","header","children","footer","example","title","string","description","leading","spot","appearance","icon","coin","ledgerId","ticker","size","provider","shape","none","trailing","value","button","onPress","tag","label","type","display","interactive"],"sourceRoot":"../../../../../src","sources":["lib/Components/Card/Card.figma.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -16,11 +16,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Card' of={CardStories} />
 
@@ -277,162 +273,6 @@ Use `lx` prop for layout purposes only, such as maximum width:
 </Card>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Card component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern correctly'
-      description='CardContent should be nested inside CardLeading or CardTrailing to group visual and text content together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="48px" />
-      <CardContent>
-        <CardContentTitle>Bitcoin</CardContentTitle>
-        <CardContentDescription>BTC</CardContentDescription>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place CardContent outside CardLeading"
-      description='CardContent must be inside CardLeading or CardTrailing for proper layout'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - CardContent outside CardLeading
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="48px" />
-    </CardLeading>
-    <CardContent>
-      <CardContentTitle>Bitcoin</CardContentTitle>
-    </CardContent>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use type="info" for cards with action buttons'
-      description='Info cards have no press handling on the card itself, allowing buttons to work independently'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card type="info">
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Staking</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-    <CardTrailing>
-      <Button appearance="base" size="sm">Stake</Button>
-    </CardTrailing>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't put interactive elements in interactive cards"
-      description='Buttons inside an interactive card create nested press targets'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - Nested pressables
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Staking</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-    <CardTrailing>
-      <Button appearance="base" size="sm">Stake</Button>
-    </CardTrailing>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='The lx prop should be used for layout-level adjustments like max-width or margins'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card
-  lx={{ maxWidth: 's320' }}
-  onPress={handlePress}
->
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Settings</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override card appearance with lx"
-      description='Do not use lx to change the card background, padding, or border radius'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - Overriding appearance via lx
-<Card
-  lx={{
-    maxWidth: 's320',
-    backgroundColor: 'accent',
-    padding: 's24',
-    borderRadius: 'xl',
-  }}
-  onPress={handlePress}
->
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Settings</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Placeholder } from "../../Symbols/index.js";
+import { CardButton } from "./CardButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(CardButton, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=89%3A525', {
+  imports: ["import { CardButton } from '@ledgerhq/lumen-ui-rnative'", "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'"],
+  props: {
+    title: figma.string('title'),
+    description: figma.boolean('show-description', {
+      true: figma.string('description'),
+      false: undefined
+    }),
+    hideChevron: figma.boolean('show-chevron', {
+      true: false,
+      false: true
+    }),
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    appearance: figma.enum('appearance', {
+      base: 'base',
+      outline: 'outline'
+    }),
+    icon: Placeholder
+  },
+  example: props => /*#__PURE__*/_jsx(CardButton, {
+    title: props.title,
+    description: props.description,
+    icon: props.icon,
+    hideChevron: props.hideChevron,
+    disabled: props.disabled,
+    appearance: props.appearance,
+    onPress: () => {}
+  })
+});
+//# sourceMappingURL=CardButton.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Placeholder","CardButton","jsx","_jsx","connect","imports","props","title","string","description","boolean","true","false","undefined","hideChevron","disabled","enum","appearance","base","outline","icon","example","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/CardButton/CardButton.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,wBAAe;AAC3C,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1CJ,KAAK,CAACK,OAAO,CACXH,UAAU,EACV,sEAAsE,EACtE;EACEI,OAAO,EAAE,CACP,yDAAyD,EACzD,kEAAkE,CACnE;EACDC,KAAK,EAAE;IACLC,KAAK,EAAER,KAAK,CAACS,MAAM,CAAC,OAAO,CAAC;IAC5BC,WAAW,EAAEV,KAAK,CAACW,OAAO,CAAC,kBAAkB,EAAE;MAC7CC,IAAI,EAAEZ,KAAK,CAACS,MAAM,CAAC,aAAa,CAAC;MACjCI,KAAK,EAAEC;IACT,CAAC,CAAC;IACFC,WAAW,EAAEf,KAAK,CAACW,OAAO,CAAC,cAAc,EAAE;MACzCC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACT,CAAC,CAAC;IACFG,QAAQ,EAAEhB,KAAK,CAACiB,IAAI,CAAC,OAAO,EAAE;MAC5BD,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFE,UAAU,EAAElB,KAAK,CAACiB,IAAI,CAAC,YAAY,EAAE;MACnCE,IAAI,EAAE,MAAM;MACZC,OAAO,EAAE;IACX,CAAC,CAAC;IACFC,IAAI,EAAEpB;EACR,CAAC;EACDqB,OAAO,EACLf,KAEC,iBAEDH,IAAA,CAACF,UAAU;IACTM,KAAK,EAAED,KAAK,CAACC,KAAM;IACnBE,WAAW,EAAEH,KAAK,CAACG,WAAY;IAC/BW,IAAI,EAAEd,KAAK,CAACc,IAAK;IACjBN,WAAW,EAAER,KAAK,CAACQ,WAAY;IAC/BC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBE,UAAU,EAAEX,KAAK,CAACW,UAAW;IAC7BK,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,CACnB;AAEL,CACF,CAAC","ignoreList":[]}

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

@@ -2,8 +2,6 @@ import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as CardButtonStories from './CardButton.stories';
 import { CardButton } from './CardButton';
 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/CardButton' of={CardButtonStories} />
@@ -239,52 +237,6 @@ While the component comes with predefined styles, you can extend them using the
 />
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the CardButton component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use container elements to control width'
-      description='Wrap CardButton in container elements to control its width'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ maxWidth: 's400' }}>
-  <CardButton
-    title='Continue'
-    description='Proceed to next step'
-    onPress={() => console.log('Continue')}
-  />
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't modify width directly"
-      description='Avoid using lx to set width on CardButton itself'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ maxWidth: 's400' }}>
-  <CardButton
-    title='Continue'
-    description='Proceed to next step'
-    lx={{ width: 's320' }}
-    onPress={() => console.log('Continue')}
-  />
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,48 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Checkbox } from "./Checkbox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Checkbox, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6688-3600', {
+  imports: ["import { Checkbox } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'show-label': true
+  },
+  props: {
+    checkbox: figma.nestedProps('.checkbox', {
+      checked: figma.boolean('selected'),
+      disabled: figma.enum('state', {
+        disabled: true
+      })
+    }),
+    label: figma.string('label')
+  },
+  example: props => /*#__PURE__*/_jsx(Checkbox, {
+    checked: props.checkbox.checked,
+    onCheckedChange: _checked => {},
+    defaultChecked: false,
+    disabled: props.checkbox.disabled,
+    label: props.label
+  })
+});
+figma.connect(Checkbox, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6688-3600', {
+  imports: ["import { Checkbox } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'show-label': false
+  },
+  props: {
+    checkbox: figma.nestedProps('.checkbox', {
+      checked: figma.boolean('selected'),
+      disabled: figma.enum('state', {
+        disabled: true
+      })
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Checkbox, {
+    checked: props.checkbox.checked,
+    onCheckedChange: _checked => {},
+    defaultChecked: false,
+    disabled: props.checkbox.disabled
+  })
+});
+//# sourceMappingURL=Checkbox.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Checkbox","jsx","_jsx","connect","imports","variant","props","checkbox","nestedProps","checked","boolean","disabled","enum","label","string","example","onCheckedChange","_checked","defaultChecked"],"sourceRoot":"../../../../../src","sources":["lib/Components/Checkbox/Checkbox.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtCH,KAAK,CAACI,OAAO,CACXH,QAAQ,EACR,uEAAuE,EACvE;EACEI,OAAO,EAAE,CAAC,uDAAuD,CAAC;EAClEC,OAAO,EAAE;IAAE,YAAY,EAAE;EAAK,CAAC;EAC/BC,KAAK,EAAE;IACLC,QAAQ,EAAER,KAAK,CAACS,WAAW,CAAC,WAAW,EAAE;MACvCC,OAAO,EAAEV,KAAK,CAACW,OAAO,CAAC,UAAU,CAAC;MAClCC,QAAQ,EAAEZ,KAAK,CAACa,IAAI,CAAC,OAAO,EAAE;QAC5BD,QAAQ,EAAE;MACZ,CAAC;IACH,CAAC,CAAC;IACFE,KAAK,EAAEd,KAAK,CAACe,MAAM,CAAC,OAAO;EAC7B,CAAC;EACDC,OAAO,EAAGT,KAAK,iBACbJ,IAAA,CAACF,QAAQ;IACPS,OAAO,EAAEH,KAAK,CAACC,QAAQ,CAACE,OAAQ;IAChCO,eAAe,EAAGC,QAAiB,IAAK,CAAC,CAAE;IAC3CC,cAAc,EAAE,KAAM;IACtBP,QAAQ,EAAEL,KAAK,CAACC,QAAQ,CAACI,QAAS;IAClCE,KAAK,EAAEP,KAAK,CAACO;EAAM,CACpB;AAEL,CACF,CAAC;AAEDd,KAAK,CAACI,OAAO,CACXH,QAAQ,EACR,uEAAuE,EACvE;EACEI,OAAO,EAAE,CAAC,uDAAuD,CAAC;EAClEC,OAAO,EAAE;IAAE,YAAY,EAAE;EAAM,CAAC;EAChCC,KAAK,EAAE;IACLC,QAAQ,EAAER,KAAK,CAACS,WAAW,CAAC,WAAW,EAAE;MACvCC,OAAO,EAAEV,KAAK,CAACW,OAAO,CAAC,UAAU,CAAC;MAClCC,QAAQ,EAAEZ,KAAK,CAACa,IAAI,CAAC,OAAO,EAAE;QAC5BD,QAAQ,EAAE;MACZ,CAAC;IACH,CAAC;EACH,CAAC;EACDI,OAAO,EAAGT,KAAK,iBACbJ,IAAA,CAACF,QAAQ;IACPS,OAAO,EAAEH,KAAK,CAACC,QAAQ,CAACE,OAAQ;IAChCO,eAAe,EAAGC,QAAiB,IAAK,CAAC,CAAE;IAC3CC,cAAc,EAAE,KAAM;IACtBP,QAAQ,EAAEL,KAAK,CAACC,QAAQ,CAACI;EAAS,CACnC;AAEL,CACF,CAAC","ignoreList":[]}

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

@@ -3,8 +3,6 @@ import * as CheckboxStories from './Checkbox.stories';
 import { Checkbox } from './Checkbox';
 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/Checkbox' of={CheckboxStories} />
 
@@ -148,77 +146,6 @@ The Checkbox component automatically supports:
 - **Space**: Toggle checked/unchecked state
 - **Enter**: Submit form (when inside a form)
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Checkbox component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the built-in label prop'
-      description='Use the label prop for simple text labels'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Checkbox label='Subscribe to newsletter' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use unlabeled checkboxes"
-      description='Always provide labels for accessibility and clarity'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Checkbox id='newsletter' />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled components for form state'
-      description='Use checked and onCheckedChange props for controlled checkboxes'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Checkbox 
-  label='Accept terms'
-  checked={isChecked} 
-  onCheckedChange={setIsChecked} 
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both checked and defaultChecked props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Checkbox 
-  label='Accept terms'
-  checked={isChecked} 
-  defaultChecked={true} 
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,91 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Settings } from "../../Symbols/index.js";
+import { Spot } from "../Spot/index.js";
+import { Stepper } from "../Stepper/index.js";
+import { ContentBanner, ContentBannerContent, ContentBannerDescription, ContentBannerTitle } from "./ContentBanner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(ContentBanner, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966', {
+  imports: ["import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'leading-content': 'spot'
+  },
+  props: {
+    title: figma.string('title'),
+    description: figma.string('description'),
+    onClose: figma.boolean('show-close-button', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(ContentBanner, {
+    onClose: props.onClose,
+    closeAccessibilityLabel: "Close content banner",
+    children: [/*#__PURE__*/_jsx(Spot, {
+      appearance: "icon",
+      icon: Settings,
+      size: 48
+    }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+      children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+        children: props.title
+      }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+        children: props.description
+      })]
+    })]
+  })
+});
+figma.connect(ContentBanner, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966', {
+  imports: ["import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'leading-content': 'stepper'
+  },
+  props: {
+    title: figma.string('title'),
+    description: figma.string('description'),
+    onClose: figma.boolean('show-close-button', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(ContentBanner, {
+    onClose: props.onClose,
+    closeAccessibilityLabel: "Close content banner",
+    children: [/*#__PURE__*/_jsx(Stepper, {
+      currentStep: 1,
+      totalSteps: 4
+    }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+      children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+        children: props.title
+      }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+        children: props.description
+      })]
+    })]
+  })
+});
+figma.connect(ContentBanner, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966', {
+  imports: ["import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    'leading-content': 'none'
+  },
+  props: {
+    title: figma.string('title'),
+    description: figma.string('description'),
+    onClose: figma.boolean('show-close-button', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(ContentBanner, {
+    onClose: props.onClose,
+    closeAccessibilityLabel: "Close content banner",
+    children: /*#__PURE__*/_jsxs(ContentBannerContent, {
+      children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+        children: props.title
+      }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+        children: props.description
+      })]
+    })
+  })
+});
+//# sourceMappingURL=ContentBanner.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Settings","Spot","Stepper","ContentBanner","ContentBannerContent","ContentBannerDescription","ContentBannerTitle","jsx","_jsx","jsxs","_jsxs","connect","imports","variant","props","title","string","description","onClose","boolean","true","false","undefined","example","closeAccessibilityLabel","children","appearance","icon","size","currentStep","totalSteps"],"sourceRoot":"../../../../../src","sources":["lib/Components/ContentBanner/ContentBanner.figma.tsx"],"mappings":"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","ignoreList":[]}