@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

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

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TextInputStories from './TextInput.stories';
 import { TextInput } from './TextInput';
 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/TextInput' of={TextInputStories} />
 
@@ -286,182 +284,6 @@ Use the `editable` prop to make the input non-editable without the muted visual
 <TextInput label='Username' value='johndoe' editable={false} />
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled input pattern'
-      description='Use value and onChangeText props for controlled input state management'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Email'
-  value={value}
-  onChangeText={setValue}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both value and defaultValue props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Email'
-  value={value}
-  defaultValue='initial'
-  onChangeText={setValue}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use onClear for custom logic only'
-      description='Let the component handle clearing automatically, add onClear only for additional logic'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Search'
-  value={value}
-  onChangeText={setValue}
-  onClear={() => {
-    // Default clearing happens automatically
-    analytics.track('search_cleared');
-  }}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually clear value in onClear"
-      description='Value clearing happens automatically - no need to call setValue'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Search'
-  value={value}
-  onChangeText={setValue}
-  onClear={() => setValue('')}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always provide labels'
-      description='Use label prop to provide clear, descriptive labels for inputs'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email Address'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use placeholder as label replacement"
-      description='Placeholder text disappears when typing - use label prop instead'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  placeholder='Enter your email'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate keyboard types'
-      description='Provide the right keyboardType to show contextually appropriate keyboards'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email'
-  value={email}
-  onChangeText={setEmail}
-  keyboardType='email-address'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use default keyboard for specialized inputs"
-      description='Avoid using default keyboard when specialized keyboards would improve UX'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -0,0 +1,111 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { Placeholder, Settings } from "../../Symbols/index.js";
+import { Spot } from "../Spot/index.js";
+import { Tag } from "../Tag/index.js";
+import { Trend } from "../Trend/index.js";
+import { Tile, TileContent, TileDescription, TileTitle, TileTrailingContent } from "./Tile.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sharedProps = {
+  title: figma.string('title'),
+  description: figma.boolean('show-description', {
+    true: figma.boolean('show-network', {
+      true: /*#__PURE__*/_jsxs(TileDescription, {
+        children: ["Description ", /*#__PURE__*/_jsx(CryptoIcon, {
+          ledgerId: "ethereum",
+          ticker: "ETH",
+          size: 20
+        })]
+      }),
+      false: /*#__PURE__*/_jsx(TileDescription, {
+        children: "Description"
+      })
+    }),
+    false: undefined
+  }),
+  appearance: figma.enum('appearance', {
+    'no-background': 'no-background',
+    card: 'card'
+  }),
+  disabled: figma.enum('state', {
+    disabled: true
+  }),
+  leadingContent: figma.enum('leading-icon', {
+    coin: /*#__PURE__*/_jsx(CryptoIcon, {
+      ledgerId: "bitcoin",
+      ticker: "BTC",
+      size: 48
+    }),
+    spot: /*#__PURE__*/_jsx(Spot, {
+      appearance: "icon",
+      icon: Settings
+    }),
+    'interface-icon': /*#__PURE__*/_jsx(Placeholder, {
+      size: 24
+    })
+  })
+};
+const sharedImports = ["import { Tile, Spot, TileContent, TileTitle, TileDescription, TileTrailingContent } from '@ledgerhq/lumen-ui-rnative'", "import { Tag } from '@ledgerhq/lumen-ui-rnative'", "import { Text } from '@ledgerhq/lumen-ui-rnative'", "import { Placeholder, Settings } from '@ledgerhq/lumen-ui-rnative/symbols'", "import CryptoIcon from '@ledgerhq/crypto-icons/native'"];
+figma.connect(Tile, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328', {
+  imports: sharedImports,
+  variant: {
+    'show-additionnal-content': false
+  },
+  props: sharedProps,
+  example: props => /*#__PURE__*/_jsxs(Tile, {
+    appearance: props.appearance,
+    disabled: props.disabled,
+    onPress: () => {},
+    children: [props.leadingContent, /*#__PURE__*/_jsxs(TileContent, {
+      children: [/*#__PURE__*/_jsx(TileTitle, {
+        children: props.title
+      }), props.description]
+    })]
+  })
+});
+figma.connect(Tile, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328', {
+  imports: sharedImports,
+  variant: {
+    'show-additionnal-content': true
+  },
+  props: {
+    ...sharedProps,
+    tag: figma.boolean('show-tag', {
+      true: /*#__PURE__*/_jsx(Tag, {
+        label: "Label",
+        appearance: "base"
+      }),
+      false: undefined
+    }),
+    subInfo: figma.boolean('show-sub-info', {
+      true: /*#__PURE__*/_jsx(Tag, {
+        icon: Settings,
+        label: "Label",
+        appearance: "base"
+      }),
+      false: undefined
+    }),
+    trend: figma.boolean('show-trend', {
+      true: /*#__PURE__*/_jsx(Trend, {
+        value: 7.87,
+        size: "sm"
+      }),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(Tile, {
+    appearance: props.appearance,
+    disabled: props.disabled,
+    onPress: () => {},
+    children: [props.leadingContent, /*#__PURE__*/_jsxs(TileContent, {
+      children: [/*#__PURE__*/_jsx(TileTitle, {
+        children: props.title
+      }), props.description, /*#__PURE__*/_jsxs(TileTrailingContent, {
+        children: [props.tag, props.subInfo, props.trend]
+      })]
+    })]
+  })
+});
+//# sourceMappingURL=Tile.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","CryptoIcon","Placeholder","Settings","Spot","Tag","Trend","Tile","TileContent","TileDescription","TileTitle","TileTrailingContent","jsx","_jsx","jsxs","_jsxs","sharedProps","title","string","description","boolean","true","children","ledgerId","ticker","size","false","undefined","appearance","enum","card","disabled","leadingContent","coin","spot","icon","sharedImports","connect","imports","variant","props","example","onPress","tag","label","subInfo","trend","value"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tile/Tile.figma.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -4,11 +4,7 @@ import { Tile } from './Tile';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/Tile' of={TileStories} />
@@ -250,56 +246,7 @@ import { Tile, TileContent, TileTitle, TileDescription, Spot } from '@ledgerhq/l
 </Tile>
 ```
 
-## Do's and Don'ts
 
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-
-### Trailing Content
-
-<DoVsDontRow>
-  <DoBlockItem
-    title='Use TileTrailingContent for additional elements'
-    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper spacing.'
-  >
-
-```tsx
-{/* prettier-ignore */}
-<Tile>
-  <Spot appearance="icon" icon={Settings} />
-  <TileContent>
-    <TileTitle>Title</TileTitle>
-    <TileDescription>Description</TileDescription>
-    <TileTrailingContent>
-      <Tag label="Active" />
-    </TileTrailingContent>
-  </TileContent>
-</Tile>
-```
-
-  </DoBlockItem>
-  <DontBlockItem
-    title="Don't place trailing content directly in TileContent"
-    description='Placing Tags or other elements directly in TileContent without TileTrailingContent results in incorrect spacing.'
-  >
-
-```tsx
-{/* prettier-ignore */}
-<Tile>
-  <Spot appearance="icon" icon={Settings} />
-  <TileContent>
-    <TileTitle>Title</TileTitle>
-    <TileDescription>Description</TileDescription>
-    <Tag label="Active" />
-  </TileContent>
-</Tile>
-```
-
-  </DontBlockItem>
-</DoVsDontRow>
-
-<CommonRulesDoAndDont />
-
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,23 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Placeholder } from "../../Symbols/index.js";
+import { TileButton } from "./TileButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(TileButton, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11291-620', {
+  imports: ["import { TileButton } from '@ledgerhq/lumen-ui-rnative'", "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'"],
+  props: {
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    children: figma.string('label'),
+    icon: Placeholder
+  },
+  example: props => /*#__PURE__*/_jsx(TileButton, {
+    disabled: props.disabled,
+    icon: props.icon,
+    onPress: () => {},
+    children: props.children
+  })
+});
+//# sourceMappingURL=TileButton.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Placeholder","TileButton","jsx","_jsx","connect","imports","props","disabled","enum","children","string","icon","example","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/TileButton/TileButton.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,uEAAuE,EACvE;EACEI,OAAO,EAAE,CACP,yDAAyD,EACzD,kEAAkE,CACnE;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAER,KAAK,CAACS,IAAI,CAAC,OAAO,EAAE;MAC5BD,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFE,QAAQ,EAAEV,KAAK,CAACW,MAAM,CAAC,OAAO,CAAC;IAC/BC,IAAI,EAAEX;EACR,CAAC;EACDY,OAAO,EACLN,KAEC,iBAEDH,IAAA,CAACF,UAAU;IACTM,QAAQ,EAAED,KAAK,CAACC,QAAS;IACzBI,IAAI,EAAEL,KAAK,CAACK,IAAK;IACjBE,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAE;IAAAJ,QAAA,EAEjBH,KAAK,CAACG;EAAQ,CACL;AAEhB,CACF,CAAC","ignoreList":[]}

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

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileButtonStories from './TileButton.stories';
 import { TileButton } from './TileButton';
 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/TileButton' of={TileButtonStories} />
 
@@ -154,44 +152,6 @@ Or use the `style` prop for escape-hatch styling:
 </TileButton>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the icon prop'
-      description='Pass icon as a component reference'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  Add
-</TileButton>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='The icon and children are separate'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  <Plus /> Add
-</TileButton>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -0,0 +1,26 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { Text } from "../Utility/Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(Tooltip, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6387%3A409', {
+  imports: ["import { Tooltip, TooltipTrigger, TooltipContent } from '@ledgerhq/lumen-ui-rnative'"],
+  props: {
+    header: figma.nestedProps('.bottom-sheet-header', {
+      title: figma.string('title'),
+      description: figma.string('description')
+    })
+  },
+  example: props => /*#__PURE__*/_jsxs(Tooltip, {
+    children: [/*#__PURE__*/_jsx(TooltipTrigger, {
+      children: /*#__PURE__*/_jsx(_Fragment, {})
+    }), /*#__PURE__*/_jsx(TooltipContent, {
+      title: props.header.title,
+      content: /*#__PURE__*/_jsx(Text, {
+        children: props.header.description
+      })
+    })]
+  })
+});
+//# sourceMappingURL=Tooltip.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","Text","Tooltip","TooltipContent","TooltipTrigger","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","connect","imports","props","header","nestedProps","title","string","description","example","children","content"],"sourceRoot":"../../../../../src","sources":["lib/Components/Tooltip/Tooltip.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,IAAI,QAAQ,0BAAiB;AACtC,SAASC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAQ,cAAW;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpEV,KAAK,CAACW,OAAO,CACXT,OAAO,EACP,wEAAwE,EACxE;EACEU,OAAO,EAAE,CACP,sFAAsF,CACvF;EACDC,KAAK,EAAE;IACLC,MAAM,EAAEd,KAAK,CAACe,WAAW,CAAC,sBAAsB,EAAE;MAChDC,KAAK,EAAEhB,KAAK,CAACiB,MAAM,CAAC,OAAO,CAAC;MAC5BC,WAAW,EAAElB,KAAK,CAACiB,MAAM,CAAC,aAAa;IACzC,CAAC;EACH,CAAC;EACDE,OAAO,EAAGN,KAAK,iBACbH,KAAA,CAACR,OAAO;IAAAkB,QAAA,gBACNZ,IAAA,CAACJ,cAAc;MAAAgB,QAAA,eACbZ,IAAA,CAAAF,SAAA,IAAI;IAAC,CACS,CAAC,eACjBE,IAAA,CAACL,cAAc;MACba,KAAK,EAAEH,KAAK,CAACC,MAAM,CAACE,KAAM;MAC1BK,OAAO,eAAEb,IAAA,CAACP,IAAI;QAAAmB,QAAA,EAAEP,KAAK,CAACC,MAAM,CAACI;MAAW,CAAO;IAAE,CAClD,CAAC;EAAA,CACK;AAEb,CACF,CAAC","ignoreList":[]}

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

@@ -1,7 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import * as TooltipStories from './Tooltip.stories';
 import { Box } from '../Utility/Box';
 
@@ -166,187 +164,6 @@ function CallbackFunctionTooltip() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use asChild to merge props with existing components'
-      description='Use asChild prop on TooltipTrigger to merge tooltip functionality with interactive components'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipTrigger asChild>
-  <Button>Help</Button>
-</TooltipTrigger>
-
-<TooltipTrigger asChild>
-  <InteractiveIcon iconType='filled'>
-    <Information />
-  </InteractiveIcon>
-</TooltipTrigger>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't wrap non-interactive elements"
-      description='Avoid using TooltipTrigger with static text or non-interactive elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipTrigger asChild>
-  <Text>Static Text</Text>
-</TooltipTrigger>
-
-<TooltipTrigger asChild>
-  <View>
-    <Text>Non-interactive</Text>
-  </View>
-</TooltipTrigger>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Keep content concise and helpful'
-      description='Provide brief, clear explanations in tooltip content'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipContent
-  title='Short Title'
-  content={<Text typography='body2'>Brief, helpful explanation.</Text>}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly long or complex content"
-      description='Avoid verbose explanations or complex layouts in tooltips'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipContent
-  title='Very Long Detailed Title That Goes On Forever'
-  content={<Text typography='body2'>This is a very long explanation that contains too much information...</Text>}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Correct provider order'
-      description='BottomSheetModalProvider must be inside GestureHandlerRootView'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ThemeProvider>
-  <GestureHandlerRootView>
-    <BottomSheetModalProvider>
-      <App />
-      <GlobalTooltipBottomSheet />
-    </BottomSheetModalProvider>
-  </GestureHandlerRootView>
-</ThemeProvider>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place providers in wrong order"
-      description="Gestures won't work if BottomSheetModalProvider is outside GestureHandlerRootView"
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ThemeProvider>
-  <BottomSheetModalProvider> {/* Wrong! */}
-    <GestureHandlerRootView>
-      <App />
-      <GlobalTooltipBottomSheet />
-    </GestureHandlerRootView>
-  </BottomSheetModalProvider>
-</ThemeProvider>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use multiple separate tooltips'
-      description='Create independent tooltip instances for different trigger elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 1</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='First'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 2</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='Second'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't nest tooltips"
-      description='Avoid nesting Tooltip components inside each other'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 1</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='First'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger>
-      <Tooltip>...</Tooltip>
-    </TooltipTrigger>
-  </Tooltip>
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ### Performance